llmtap 0.1.6 → 0.1.8

package/dist/dashboard/assets/TraceDetail-ByibqI-g.js

@@ -1,17 +0,0 @@
-import{j as e,r as h,d as ie}from"./query-BSZkMKN4.js";import{c as ce,i as de,L as pe,j as xe,k as me,l as he,m as ue,n as ge,a as be,t as $,r as fe,h as je}from"./index-jVcSWGwX.js";import{P as Ne,b as v,c as g}from"./format-CgXokIEM.js";import{g as w}from"./content-BRoZVvRJ.js";import{p as ye,d as ve}from"./provider-colors-DcHYMgVv.js";import{S as we}from"./StatusDot-BAf4TSfE.js";import{q as ke,z as _,B as Ce,F as Te,E as $e,H as U,y as O,Z as Se,I as G,x as L,O as Ie,d as Me,t as Q,J as Re,N as _e,Q as Oe,U as Le,n as z,w as Y,V as Pe,Y as Ee,_ as De}from"./icons-DhpK1vUv.js";import{m as V,A as Ae}from"./motion-Bw6xJyTE.js";import"./charts-BXAtT8sy.js";function Be({provider:s,className:r}){const n=s.toLowerCase(),o=ye[n]??ve;return e.jsx("span",{className:ce("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold capitalize",o.bg,o.text,o.border,r),children:s})}function Fe(s){const r=new Map,n=[];for(const l of s)r.set(l.spanId,{span:l,children:[]});for(const l of s){const i=r.get(l.spanId);i&&(l.parentSpanId&&r.has(l.parentSpanId)?r.get(l.parentSpanId)?.children.push(i):n.push(i))}const o=l=>{l.sort((i,t)=>i.span.startTime-t.span.startTime);for(const i of l)o(i.children)};return o(n),n}function P(s){return s.children.reduce((r,n)=>r+1+P(n),0)}function He(){const[s,r]=h.useState(null);function n(o,l){navigator.clipboard.writeText(o),r(l),$.success("Copied to clipboard",{description:`${l} copied successfully.`}),setTimeout(()=>r(null),2e3)}return{copied:s,copy:n}}function y({text:s,label:r,copied:n,onCopy:o}){return e.jsx("button",{type:"button",onClick:l=>{l.stopPropagation(),o(s,r)},className:"rounded-lg border border-white/8 bg-white/4 p-1.5 text-slate-500 transition-colors hover:text-white",title:"Copy to clipboard",children:n===r?e.jsx(_,{className:"h-3 w-3 text-emerald-300"}):e.jsx(Oe,{className:"h-3 w-3"})})}function b({icon:s,label:r,value:n}){return e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:[e.jsx(s,{className:"h-3 w-3"}),r]}),e.jsx("div",{className:"font-mono text-sm font-semibold text-slate-100",children:n})]})}function Je({role:s,type:r}){const n={system:"bg-purple-400/10 text-purple-200 border-purple-400/16",user:"bg-sky-400/10 text-sky-200 border-sky-400/16",assistant:"bg-emerald-400/10 text-emerald-200 border-emerald-400/16",tool:"bg-amber-300/10 text-amber-200 border-amber-300/16",function:"bg-amber-300/10 text-amber-200 border-amber-300/16"},o=r==="input"?"bg-sky-400/10 text-sky-200 border-sky-400/16":"bg-emerald-400/10 text-emerald-200 border-emerald-400/16";return e.jsx("span",{className:`rounded-full border px-2.5 py-1 text-[10px] font-bold capitalize tracking-[0.16em] ${n[s]??o}`,children:s})}function W(s){return!s||typeof s=="string"?!1:s.some(r=>r.type==="image_url"||r.type==="image")}function E(s){return s.map(r=>r.type==="image_url"&&r.image_url?.url?r.image_url.url:r.type==="image"&&r.source?.data?`data:${r.source.media_type||"image/png"};base64,${r.source.data}`:null).filter(r=>{if(!r)return!1;if(r.startsWith("data:image/"))return!0;try{const n=new URL(r);return n.protocol==="http:"||n.protocol==="https:"}catch{return!1}})}function qe(s){const r=w(s);let n=r?Math.ceil(r.length/4):0;if(s&&typeof s!="string"){const o=s.filter(l=>l.type==="image_url"||l.type==="image").length;n+=o*85}return n}function X({message:s,type:r,copied:n,onCopy:o}){const l=s.content,i=w(l),t=l&&typeof l!="string"?E(l):[],d=r==="input"?"border-white/8":"border-emerald-400/10",c=`msg-${r}-${s.role}-${i.slice(0,20)}`;return e.jsxs("div",{className:`rounded-2xl border ${d} bg-white/4 p-4`,children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(Je,{role:s.role,type:r}),s.name&&e.jsx("span",{className:"font-mono text-[10px] text-slate-500",children:s.name}),t.length>0&&e.jsxs("span",{className:"inline-flex items-center gap-1 rounded-full border border-purple-400/16 bg-purple-400/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-purple-200",children:[e.jsx(Ee,{className:"h-2.5 w-2.5"}),t.length," image",t.length>1?"s":""]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"font-mono text-[10px] text-slate-600",children:["~",qe(l)," tok"]}),i&&e.jsx(y,{text:i,label:c,copied:n,onCopy:o})]})]}),i&&e.jsx("pre",{className:"mt-2.5 whitespace-pre-wrap font-mono text-xs leading-relaxed text-slate-200",children:Ye(i)}),t.length>0&&e.jsx("div",{className:"mt-2.5 flex flex-wrap gap-2",children:t.map((p,f)=>e.jsxs("a",{href:p,target:"_blank",rel:"noopener noreferrer",className:"group relative overflow-hidden rounded-lg border border-white/10 bg-slate-950/60 transition-colors hover:border-white/20",children:[e.jsx("img",{src:p,alt:`Image ${f+1}`,className:"max-h-48 max-w-64 object-contain",loading:"lazy"}),e.jsx("span",{className:"absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100",children:e.jsx("span",{className:"text-[10px] font-bold uppercase tracking-widest text-white",children:"Open"})})]},f))})]})}function Ke({span:s,copied:r,onCopy:n}){const o=s.inputMessages?.length??0,l=s.outputMessages?.length??0,[i,t]=h.useState(o>3),[d,c]=h.useState(l>3);return e.jsx(V.div,{initial:{opacity:0,gridTemplateRows:"0fr"},animate:{opacity:1,gridTemplateRows:"1fr"},exit:{opacity:0,gridTemplateRows:"0fr"},transition:{duration:.2},style:{display:"grid"},children:e.jsx("div",{className:"overflow-hidden",children:e.jsxs("div",{className:"mx-4 mb-4 space-y-5 rounded-[24px] border border-white/8 bg-[linear-gradient(180deg,rgba(8,15,28,0.96),rgba(4,8,18,0.98))] p-5 text-sm",children:[e.jsx("div",{className:"flex items-center justify-between gap-2",children:e.jsxs("div",{className:"grid flex-1 grid-cols-2 gap-3 md:grid-cols-4",children:[e.jsx(b,{icon:Le,label:"Model",value:s.responseModel??s.requestModel??"-"}),e.jsx(b,{icon:O,label:"Tokens",value:`${s.inputTokens} in / ${s.outputTokens} out`}),e.jsx(b,{icon:G,label:"Cost",value:v(s.totalCost)}),e.jsx(b,{icon:L,label:"Duration",value:s.duration?g(s.duration):"-"})]})}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx(y,{text:s.spanId,label:"spanId",copied:r,onCopy:n}),e.jsxs("span",{className:"font-mono text-[10px] text-slate-500",children:["span: ",s.spanId.slice(0,12),"..."]}),s.sessionId&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"text-slate-600",children:"|"}),e.jsxs("span",{className:"font-mono text-[10px] text-slate-500",children:["session: ",s.sessionId]})]}),s.temperature!==void 0&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"text-slate-600",children:"|"}),e.jsxs("span",{className:"font-mono text-[10px] text-slate-500",children:["temp: ",s.temperature]})]}),s.topP!==void 0&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"text-slate-600",children:"|"}),e.jsxs("span",{className:"font-mono text-[10px] text-slate-500",children:["top_p: ",s.topP]})]}),s.maxTokens!==void 0&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"text-slate-600",children:"|"}),e.jsxs("span",{className:"font-mono text-[10px] text-slate-500",children:["max_tokens: ",s.maxTokens]})]})]}),s.status==="error"&&e.jsxs("div",{className:"rounded-2xl border border-rose-400/18 bg-rose-400/6 p-4",children:[e.jsxs("div",{className:"mb-1.5 flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-1.5 text-xs font-bold uppercase tracking-[0.16em] text-rose-300",children:[e.jsx(Q,{className:"h-4 w-4"}),s.errorType??"error"]}),s.errorMessage&&e.jsx(y,{text:s.errorMessage,label:"error",copied:r,onCopy:n})]}),e.jsx("div",{className:"font-mono text-xs leading-relaxed text-rose-200/70",children:s.errorMessage})]}),s.inputMessages&&s.inputMessages.length>0&&e.jsxs("div",{children:[e.jsxs("button",{type:"button",onClick:()=>t(p=>!p),className:"mb-3 flex w-full items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500 transition-colors hover:text-slate-300",children:[e.jsx(z,{className:`h-3.5 w-3.5 transition-transform ${i?"-rotate-90":""}`}),e.jsx(Y,{className:"h-3.5 w-3.5"}),"Input messages (",s.inputMessages.length,")"]}),!i&&e.jsx("div",{className:"space-y-2",children:s.inputMessages.map((p,f)=>e.jsx(X,{message:p,type:"input",copied:r,onCopy:n},`in-${p.role}-${f}`))})]}),s.outputMessages&&s.outputMessages.length>0&&e.jsxs("div",{children:[e.jsxs("button",{type:"button",onClick:()=>c(p=>!p),className:"mb-3 flex w-full items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500 transition-colors hover:text-slate-300",children:[e.jsx(z,{className:`h-3.5 w-3.5 transition-transform ${d?"-rotate-90":""}`}),e.jsx(Y,{className:"h-3.5 w-3.5"}),"Output messages (",s.outputMessages.length,")"]}),!d&&e.jsx("div",{className:"space-y-2",children:s.outputMessages.map((p,f)=>e.jsx(X,{message:p,type:"output",copied:r,onCopy:n},`out-${p.role}-${f}`))})]}),s.toolCalls&&s.toolCalls.length>0&&e.jsxs("div",{children:[e.jsxs("div",{className:"mb-3 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500",children:[e.jsx(Pe,{className:"h-3.5 w-3.5"}),"Tool calls (",s.toolCalls.length,")"]}),e.jsx("div",{className:"space-y-2",children:s.toolCalls.map(p=>e.jsxs("div",{className:"rounded-2xl border border-amber-300/10 bg-white/4 p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsx("span",{className:"rounded-full border border-amber-300/16 bg-amber-300/10 px-2.5 py-1 text-[10px] font-bold tracking-[0.16em] text-amber-200",children:p.name}),e.jsx(y,{text:p.arguments,label:`tool-${p.id}`,copied:r,onCopy:n})]}),e.jsx("pre",{className:"mt-2.5 overflow-x-auto font-mono text-xs leading-relaxed text-slate-200",children:Z(p.arguments)}),p.result&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"my-2 border-t border-white/6"}),e.jsx("div",{className:"mb-1 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-600",children:"Result"}),e.jsx("pre",{className:"overflow-x-auto font-mono text-xs leading-relaxed text-slate-300",children:p.result})]})]},p.id))})]})]})})})}function Z(s){try{return JSON.stringify(JSON.parse(s),null,2)}catch{return s}}function Ue(s){const r=s.providerName?.toLowerCase()??"",n=s.requestModel??s.responseModel??"unknown",o=(s.inputMessages??[]).map(t=>({role:t.role,content:typeof t.content=="string"?t.content:t.content??""})),i=JSON.stringify({model:n,messages:o}).replace(/'/g,"'\\''");return r==="openai"?`curl https://api.openai.com/v1/chat/completions \\
-  -H "Authorization: Bearer $OPENAI_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '${i}'`:r==="anthropic"?`curl https://api.anthropic.com/v1/messages \\
-  -H "x-api-key: $ANTHROPIC_API_KEY" \\
-  -H "anthropic-version: 2023-06-01" \\
-  -H "Content-Type: application/json" \\
-  -d '${JSON.stringify({model:n,max_tokens:s.maxTokens??1024,messages:o.filter(c=>c.role!=="system"),...o.find(c=>c.role==="system")?{system:o.find(c=>c.role==="system").content}:{}}).replace(/'/g,"'\\''")}'`:r==="google"?`curl "https://generativelanguage.googleapis.com/v1beta/models/${n}:generateContent?key=$GOOGLE_API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '${i}'`:`curl https://api.example.com/v1/chat/completions \\
-  -H "Authorization: Bearer $API_KEY" \\
-  -H "Content-Type: application/json" \\
-  -d '${i}'`}function ze(s,r,n,o,l,i){const t=[];t.push("# Trace Report"),t.push(""),t.push(`**Trace ID:** \`${s}\``),t.push(`**Status:** ${i?"Error":"Stable"}`),t.push(`**Total Spans:** ${r.length}`),t.push(`**Total Tokens:** ${n.toLocaleString()}`),t.push(`**Total Cost:** ${v(o)}`),t.push(`**Duration:** ${g(l)}`),t.push(""),t.push("---"),t.push("");for(const d of r){if(t.push(`## Span: ${d.name}`),t.push(""),t.push("| Field | Value |"),t.push("|-------|-------|"),t.push(`| Span ID | \`${d.spanId}\` |`),t.push(`| Provider | ${d.providerName} |`),t.push(`| Model | ${d.responseModel??d.requestModel??"-"} |`),t.push(`| Operation | ${d.operationName} |`),t.push(`| Tokens | ${d.inputTokens} in / ${d.outputTokens} out |`),t.push(`| Cost | ${v(d.totalCost)} |`),t.push(`| Duration | ${d.duration?g(d.duration):"-"} |`),t.push(`| Status | ${d.status} |`),t.push(""),d.inputMessages&&d.inputMessages.length>0){t.push("### Input Messages"),t.push("");for(const c of d.inputMessages)t.push(`**[${c.role}]${c.name?` (${c.name})`:""}**`),t.push(""),t.push(w(c.content)||"_empty_"),W(c.content)&&t.push(`
-_[${E(c.content).length} image(s) attached]_`),t.push("")}if(d.outputMessages&&d.outputMessages.length>0){t.push("### Output Messages"),t.push("");for(const c of d.outputMessages)t.push(`**[${c.role}]${c.name?` (${c.name})`:""}**`),t.push(""),t.push(w(c.content)||"_empty_"),W(c.content)&&t.push(`
-_[${E(c.content).length} image(s) attached]_`),t.push("")}if(d.toolCalls&&d.toolCalls.length>0){t.push("### Tool Calls"),t.push("");for(const c of d.toolCalls)t.push(`**${c.name}** (\`${c.id}\`)`),t.push(""),t.push("```json"),t.push(Z(c.arguments)),t.push("```"),c.result&&(t.push(""),t.push("Result:"),t.push("```"),t.push(c.result),t.push("```")),t.push("")}t.push("---"),t.push("")}return t.join(`
-`)}function Ye(s){const r=/```(\w*)\n?([\s\S]*?)```/g,n=[];let o=0,l,i=0;for(;(l=r.exec(s))!==null;){l.index>o&&n.push(e.jsx("span",{children:s.slice(o,l.index)},i++));const t=l[1]||"",d=l[2];n.push(e.jsxs("span",{className:"my-1.5 block rounded-lg border border-white/8 bg-slate-950/80 px-3 py-2",children:[t&&e.jsxs("span",{className:"mb-1 flex items-center gap-1 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500",children:[e.jsx(De,{className:"h-3 w-3"}),t]}),e.jsx("span",{className:"block font-mono text-[11px] leading-relaxed text-emerald-200/80",children:d})]},i++)),o=l.index+l[0].length}return o<s.length&&n.push(e.jsx("span",{children:s.slice(o)},i++)),n.length===0?s:n}function rs(){const{traceId:s}=de(),[r,n]=h.useState(null),[o,l]=h.useState({}),{copied:i,copy:t}=He(),[d,c]=h.useState(!1),[p,f]=h.useState(""),[D,A]=h.useState(!1),[j,k]=h.useState(null),[B,C]=h.useState(null),[S,ee]=h.useState(null),{data:se,isLoading:te}=ie({queryKey:["trace",s],queryFn:()=>je(s),enabled:!!s}),x=se?.spans??[],I=h.useMemo(()=>Fe(x),[x]),M=x.length>0?Math.min(...x.map(a=>a.startTime)):0,N=(x.length>0?Math.max(...x.map(a=>a.endTime??a.startTime)):0)-M||1,F=x.reduce((a,u)=>a+u.totalTokens,0),H=x.reduce((a,u)=>a+u.totalCost,0),R=x.some(a=>a.status==="error");function ae(){const a=new Blob([JSON.stringify(x,null,2)],{type:"application/json"}),u=URL.createObjectURL(a),m=document.createElement("a");m.href=u,m.download=`trace-${s?.slice(0,12)}.json`,document.body.appendChild(m),m.click(),document.body.removeChild(m),URL.revokeObjectURL(u),$.success("Trace exported",{description:"The full trace payload was downloaded as JSON."})}async function re(){if(!(!S||!p.trim())){A(!0),C(null),k(null);try{const a=await fe(S,p.trim());k(a),$.success("Replay complete",{description:`Received a fresh response from ${a.provider}.`})}catch(a){C(a instanceof Error?a.message:String(a)),$.error("Replay failed",{description:a instanceof Error?a.message:String(a)})}finally{A(!1)}}}function ne(a){ee(a),c(!0),k(null),C(null)}const J=(a,u=0)=>{const m=a.span.spanId===r,q=a.children.length>0,K=o[a.span.spanId]??!1,le=(a.span.startTime-M)/N*100,oe=Math.max(((a.span.endTime??a.span.startTime)-a.span.startTime)/N*100,1);return e.jsxs(h.Fragment,{children:[e.jsx("div",{className:"border-t border-white/6 first:border-t-0",children:e.jsxs("div",{className:"flex items-start gap-2 px-4 py-3 sm:px-5",children:[e.jsx("div",{className:"flex items-center",style:{paddingLeft:`${u*22}px`},children:q?e.jsx("button",{type:"button",onClick:()=>l(T=>({...T,[a.span.spanId]:!T[a.span.spanId]})),className:"flex h-8 w-8 items-center justify-center rounded-full border border-white/8 bg-white/4 text-slate-400 transition-colors hover:text-white",children:e.jsx(_e,{className:`h-4 w-4 transition-transform ${K?"":"rotate-90"}`})}):e.jsx("span",{className:"flex h-8 w-8 items-center justify-center rounded-full border border-white/8 bg-white/4 text-slate-500",children:e.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-slate-500"})})}),e.jsxs("button",{type:"button",onClick:()=>n(m?null:a.span.spanId),className:`grid min-w-0 flex-1 gap-3 rounded-[22px] px-3 py-3 text-left transition-colors sm:grid-cols-[minmax(0,320px)_minmax(0,1fr)_88px] sm:items-center ${m?"bg-white/8":"hover:bg-white/4"}`,children:[e.jsx("div",{className:"min-w-0",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(we,{status:a.span.status}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate text-sm font-medium text-white",children:a.span.name}),e.jsxs("div",{className:"mt-1 flex flex-wrap items-center gap-2.5",children:[e.jsx(Be,{provider:a.span.providerName}),e.jsx("span",{className:"font-mono text-[10px] uppercase tracking-[0.16em] text-slate-500",children:a.span.operationName}),q?e.jsxs("span",{className:"font-mono text-[10px] uppercase tracking-[0.16em] text-slate-500",children:[P(a)," child",P(a)===1?"":"ren"]}):null]})]})]})}),e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between text-[10px] uppercase tracking-[0.16em] text-slate-500",children:[e.jsxs("span",{children:[Math.round(a.span.startTime-M),"ms"]}),e.jsx("span",{children:a.span.duration?g(a.span.duration):"instant"})]}),e.jsx("div",{className:"relative h-8 overflow-hidden rounded-full bg-slate-950/90",children:e.jsx(V.div,{className:`absolute bottom-1 top-1 origin-left rounded-full ${a.span.status==="error"?"bg-[linear-gradient(90deg,#fb7185,#f97316)]":"bg-[linear-gradient(90deg,#34d399,#38bdf8)]"}`,style:{left:`${le}%`,width:`${Math.max(oe,.5)}%`},initial:{scaleX:0},animate:{scaleX:1},transition:{duration:.4,ease:"easeOut"}})})]}),e.jsxs("div",{className:"text-right font-mono text-[11px] text-slate-400",children:[e.jsx("div",{className:"text-slate-200",children:v(a.span.totalCost)}),e.jsxs("div",{children:[a.span.totalTokens.toLocaleString()," tok"]})]})]})]})}),e.jsx(Ae,{children:m?e.jsx(Ke,{span:a.span,copied:i,onCopy:t}):null}),!K&&a.children.map(T=>J(T,u+1))]},a.span.spanId)};return te?e.jsxs("div",{className:"mx-auto max-w-[1500px] space-y-6",children:[e.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),e.jsx("div",{className:"skeleton-panel h-28 rounded-[24px]"}),e.jsx("div",{className:"skeleton-panel h-72 rounded-[24px]"})]}):e.jsxs(Ne,{eyebrow:"Trace Console",title:s?`Trace ${s.slice(0,12)}...`:"Trace detail",description:"Inspect the nested execution tree, timing offsets, token pressure, and payloads for a single trace without losing the operator surface.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(be,{}),e.jsxs("div",{className:"mt-4 space-y-3",children:[e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Current status"}),e.jsx("div",{className:"mt-2 flex items-center gap-2 text-base font-medium text-white",children:R?e.jsxs(e.Fragment,{children:[e.jsx(Q,{className:"h-4 w-4 text-rose-300"}),"Error state"]}):e.jsxs(e.Fragment,{children:[e.jsx(Re,{className:"h-4 w-4 text-emerald-300"}),"Stable"]})})]}),e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Hierarchy"}),e.jsxs("div",{className:"mt-2 text-base font-medium text-white",children:[I.length," root spans"]}),e.jsxs("div",{className:"mt-1 text-sm text-slate-400",children:[g(N)," elapsed from first to last event"]})]})]})]}),children:[e.jsxs("div",{className:"flex items-center justify-between gap-2 text-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(pe,{to:"/",className:"status-chip transition-colors hover:text-white",children:[e.jsx(ke,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Back to overview"})]}),e.jsx("span",{className:"truncate font-mono text-xs text-slate-500",children:s}),e.jsx(y,{text:s??"",label:"traceId",copied:i,onCopy:t})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[x.length>0&&e.jsxs("button",{type:"button",onClick:()=>{const a=x[0];t(Ue(a),"curl")},className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[i==="curl"?e.jsx(_,{className:"h-3.5 w-3.5 text-emerald-300"}):e.jsx(Ce,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:i==="curl"?"Copied!":"Copy as cURL"})]}),x.length>0&&e.jsxs("button",{type:"button",onClick:()=>{t(ze(s??"",x,F,H,N,R),"markdown")},className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[i==="markdown"?e.jsx(_,{className:"h-3.5 w-3.5 text-emerald-300"}):e.jsx(Te,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:i==="markdown"?"Copied!":"Copy as Markdown"})]}),e.jsxs("button",{type:"button",onClick:ae,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx($e,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Export JSON"})]}),x.length>0&&e.jsxs("button",{type:"button",onClick:()=>ne(x[0].spanId),className:"status-chip border-emerald-400/20 bg-emerald-400/8 transition-colors hover:border-emerald-400/30 hover:bg-emerald-400/14",children:[e.jsx(U,{className:"h-3.5 w-3.5 text-emerald-300"}),e.jsx("span",{children:"Replay"})]})]})]}),e.jsx("div",{className:"dashboard-shell rounded-[26px] px-5 py-5",children:e.jsxs("div",{className:"grid grid-cols-2 gap-4 md:grid-cols-5",children:[e.jsx(b,{icon:O,label:"Spans",value:String(x.length)}),e.jsx(b,{icon:Se,label:"Tokens",value:F.toLocaleString()}),e.jsx(b,{icon:G,label:"Cost",value:v(H)}),e.jsx(b,{icon:L,label:"Duration",value:x.length>0?g(N):"-"}),e.jsx(b,{icon:Ie,label:"Status",value:R?"Error":"Stable"})]})}),e.jsxs("div",{className:"dashboard-shell overflow-hidden rounded-[26px]",children:[e.jsxs("div",{className:"flex items-center gap-2.5 border-b border-white/6 px-5 py-4",children:[e.jsx(L,{className:"h-4 w-4 text-sky-300"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-white",children:"Trace hierarchy"}),e.jsxs("span",{className:"ml-auto text-xs font-mono tracking-[0.18em] text-slate-500",children:[g(N)," total"]})]}),I.length>0?e.jsx("div",{className:"py-2",children:I.map(a=>J(a))}):e.jsxs("div",{className:"empty-state h-[280px]",children:[e.jsx(O,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No spans found for this trace"})]})]}),e.jsx(xe,{open:d,onOpenChange:a=>!a&&c(!1),children:e.jsxs(me,{className:"max-w-2xl",children:[e.jsx(he,{children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"flex h-10 w-10 items-center justify-center rounded-2xl border border-emerald-400/20 bg-emerald-400/8",children:e.jsx(U,{className:"h-4.5 w-4.5 text-emerald-300"})}),e.jsxs("div",{children:[e.jsx(ue,{children:"Trace Replay"}),e.jsx(ge,{children:"Re-send the same prompts and compare responses"})]})]})}),!j&&!D&&e.jsxs("div",{className:"space-y-4",children:[e.jsx("div",{className:"rounded-xl border border-amber-400/20 bg-amber-500/8 p-3 text-xs text-amber-200/80",children:"Your API key is sent directly to the provider and is never stored by LLMTap."}),e.jsxs("div",{children:[e.jsx("label",{className:"mb-1.5 block text-xs font-medium text-slate-400",children:"Provider API Key"}),e.jsx("input",{type:"password",value:p,onChange:a=>f(a.target.value),placeholder:"sk-... or anthropic key",className:"w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-emerald-400/30 focus:outline-none"})]}),B&&e.jsx("div",{className:"rounded-xl border border-rose-400/20 bg-rose-500/8 p-3 text-sm text-rose-200",children:B}),e.jsx("button",{type:"button",disabled:!p.trim(),onClick:re,className:"w-full rounded-xl bg-emerald-500 px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-400 disabled:cursor-not-allowed disabled:opacity-40",children:"Send Replay Request"})]}),D&&e.jsxs("div",{className:"flex flex-col items-center gap-3 py-12",children:[e.jsx(Me,{className:"h-8 w-8 animate-spin text-emerald-300"}),e.jsxs("p",{className:"text-sm text-slate-400",children:["Replaying against ",x[0]?.providerName," API..."]})]}),j&&(()=>{const a=x.find(m=>m.spanId===S)??x[0],u=a?.outputMessages?.map(m=>w(m.content)).join(`
-`)??"";return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"grid grid-cols-3 gap-3 text-center",children:[e.jsxs("div",{className:"rounded-xl border border-white/8 bg-white/4 p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Tokens"}),e.jsxs("div",{className:"mt-1 font-mono text-sm text-white",children:[a.totalTokens," ",e.jsx("span",{className:"text-slate-500",children:"vs"})," ",j.totalTokens]})]}),e.jsxs("div",{className:"rounded-xl border border-white/8 bg-white/4 p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Duration"}),e.jsxs("div",{className:"mt-1 font-mono text-sm text-white",children:[g(a.duration??0)," ",e.jsx("span",{className:"text-slate-500",children:"vs"})," ",g(j.duration)]})]}),e.jsxs("div",{className:"rounded-xl border border-white/8 bg-white/4 p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Model"}),e.jsx("div",{className:"mt-1 truncate font-mono text-xs text-white",children:j.responseModel})]})]}),e.jsxs("div",{className:"grid gap-3 md:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Original Response"}),e.jsx("div",{className:"max-h-[300px] overflow-y-auto rounded-xl border border-white/8 bg-white/4 p-3 text-sm leading-6 text-slate-300",children:u||e.jsx("span",{className:"text-slate-600",children:"No content captured"})})]}),e.jsxs("div",{children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-emerald-400/80",children:"Replay Response"}),e.jsx("div",{className:"max-h-[300px] overflow-y-auto rounded-xl border border-emerald-400/12 bg-emerald-400/4 p-3 text-sm leading-6 text-slate-300",children:j.content||e.jsx("span",{className:"text-slate-600",children:"Empty response"})})]})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{type:"button",onClick:()=>{k(null),C(null)},className:"flex-1 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-slate-300 transition-colors hover:bg-white/10",children:"Replay Again"}),e.jsx("button",{type:"button",onClick:()=>c(!1),className:"flex-1 rounded-xl bg-emerald-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-emerald-400",children:"Done"})]})]})})()]})})]})}export{rs as default};

package/dist/dashboard/assets/Traces-D9kJG7O9.js

@@ -1 +0,0 @@
-import{r,j as e,d as ye}from"./query-BSZkMKN4.js";import{P as Se,R as Ce,e as Te,C as le,T as Q,g as ke,c as D,D as re,O as ne,u as De,L as Ie,h as J,b as Pe}from"./index-jVcSWGwX.js";import{P as _e,b as T,d as ie,c as k,a as oe}from"./format-CgXokIEM.js";import{S as _}from"./StatusDot-BAf4TSfE.js";import{e as Le,S as z,a as V,b as F,c as U,d as C}from"./select-CbYE6Q0M.js";import{X as Z,s as A,t as Me,u as K,Z as Re,S as $e,A as B,v as ee,m as Ee,n as He,o as Oe,q as qe,p as de,w as ze,x as Ve,y as Fe,C as Ue,D as Ae}from"./icons-DhpK1vUv.js";import{P as se}from"./constants-OlSc-7iA.js";import{g as Ke}from"./content-BRoZVvRJ.js";import{A as te,m as ce}from"./motion-Bw6xJyTE.js";import"./charts-BXAtT8sy.js";var Qe=Object.freeze({position:"absolute",border:0,width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",wordWrap:"normal"}),Ze="VisuallyHidden",xe=r.forwardRef((s,a)=>e.jsx(Se.span,{...s,ref:a,style:{...Qe,...s.style}}));xe.displayName=Ze;var We=xe;const Xe=Ce,Ye=Te,me=r.forwardRef(({className:s,...a},n)=>e.jsx(ne,{className:D("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",s),...a,ref:n}));me.displayName=ne.displayName;const Ge=Le("fixed z-50 gap-4 border border-white/8 bg-[linear-gradient(180deg,rgba(8,14,28,0.98),rgba(4,8,18,0.99))] shadow-[0_40px_100px_rgba(0,0,0,0.5)] backdrop-blur-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300",{variants:{side:{top:"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",bottom:"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md"}},defaultVariants:{side:"right"}}),he=r.forwardRef(({side:s="right",className:a,children:n,...h},u)=>e.jsxs(Ye,{children:[e.jsx(me,{}),e.jsxs(le,{ref:u,className:D(Ge({side:s}),a),...h,children:[e.jsx(We,{children:e.jsx(Q,{children:"Panel"})}),n,e.jsxs(ke,{className:"absolute right-4 top-4 rounded-xl p-1.5 text-slate-400 transition-colors hover:bg-white/8 hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-emerald-400/50",children:[e.jsx(Z,{className:"h-4 w-4"}),e.jsx("span",{className:"sr-only",children:"Close"})]})]})]}));he.displayName=le.displayName;const pe=({className:s,...a})=>e.jsx("div",{className:D("flex flex-col gap-2 p-5",s),...a});pe.displayName="SheetHeader";const ue=r.forwardRef(({className:s,...a},n)=>e.jsx(Q,{ref:n,className:D("text-lg font-semibold text-white",s),...a}));ue.displayName=Q.displayName;const be=r.forwardRef(({className:s,...a},n)=>e.jsx(re,{ref:n,className:D("text-sm text-slate-400",s),...a}));be.displayName=re.displayName;const ae=[25,50,100,200];function Je({trace:s,onClose:a}){const n=s.totalDuration??(s.endTime?s.endTime-s.startTime:0);return e.jsx(Xe,{open:!0,onOpenChange:h=>!h&&a(),children:e.jsxs(he,{side:"right",className:"flex flex-col overflow-y-auto",children:[e.jsxs(pe,{className:"border-b border-white/6",children:[e.jsx("div",{className:"hud-label",children:"Quick preview"}),e.jsx(ue,{className:"truncate",children:s.name}),e.jsx(be,{className:"sr-only",children:"Trace preview panel"})]}),e.jsxs("div",{className:"flex-1 space-y-4 p-5",children:[e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Trace ID"}),e.jsx("div",{className:"mt-1 break-all font-mono text-sm text-slate-300",children:s.traceId})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Status"}),e.jsxs("div",{className:"mt-2 flex items-center gap-2",children:[e.jsx(_,{status:s.status}),e.jsx("span",{className:`text-sm font-medium ${s.status==="error"?"text-rose-300":"text-emerald-300"}`,children:s.status==="error"?"Error":"Healthy"})]})]}),e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Duration"}),e.jsxs("div",{className:"mt-2 flex items-center gap-2",children:[e.jsx(Ve,{className:"h-4 w-4 text-sky-300"}),e.jsx("span",{className:"text-sm font-medium text-white",children:n>0?k(n):"N/A"})]})]})]}),e.jsxs("div",{className:"grid grid-cols-3 gap-3",children:[e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Spans"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-white",children:s.spanCount}),e.jsx(Fe,{className:"mx-auto mt-1 h-4 w-4 text-emerald-300/60"})]}),e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Tokens"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-white",children:oe(s.totalTokens)}),e.jsx(Ue,{className:"mx-auto mt-1 h-4 w-4 text-sky-300/60"})]}),e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Cost"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-white",children:T(s.totalCost)}),e.jsx(Ae,{className:"mx-auto mt-1 h-4 w-4 text-amber-300/60"})]})]}),e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Started"}),e.jsxs("div",{className:"mt-1 text-sm text-slate-300",children:[new Date(s.startTime).toLocaleString()," (",ie(s.startTime),")"]}),s.endTime&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"hud-label mt-3",children:"Ended"}),e.jsx("div",{className:"mt-1 text-sm text-slate-300",children:new Date(s.endTime).toLocaleString()})]})]}),e.jsxs(Ie,{to:`/trace/${s.traceId}`,className:"flex w-full items-center justify-center gap-2 rounded-2xl border border-emerald-400/20 bg-[linear-gradient(135deg,rgba(16,185,129,0.12),rgba(14,165,233,0.08))] px-5 py-3 text-sm font-medium text-emerald-300 transition-colors hover:bg-[linear-gradient(135deg,rgba(16,185,129,0.22),rgba(14,165,233,0.14))]",children:["Open full trace detail",e.jsx(de,{className:"h-4 w-4"})]})]})]})})}function Be({traceA:s,traceB:a}){const[n,h]=r.useState([]),[u,i]=r.useState([]),[o,N]=r.useState(!0);if(r.useEffect(()=>{let w=!1;return N(!0),Promise.all([J(s.traceId),J(a.traceId)]).then(([x,p])=>{w||(h(x.spans),i(p.spans),N(!1))}),()=>{w=!0}},[s.traceId,a.traceId]),o)return e.jsx("div",{className:"flex items-center justify-center py-8 text-sm text-slate-500",children:"Loading responses..."});const l=w=>w.flatMap(x=>(x.outputMessages??[]).filter(p=>p.role==="assistant").map(p=>({spanName:x.name,model:x.responseModel??x.requestModel,content:Ke(p.content)}))),b=l(n),v=l(u),g=Math.max(b.length,v.length);return g===0?e.jsx("div",{className:"flex items-center justify-center py-8 text-sm text-slate-500",children:"No assistant responses found in either trace."}):e.jsx("div",{className:"space-y-3",children:Array.from({length:g},(w,x)=>{const p=b[x],m=v[x];return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx("div",{className:"rounded-2xl border border-emerald-400/10 bg-white/3 p-3",children:p?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mb-1.5 flex items-center gap-2",children:[e.jsx("span",{className:"rounded-full border border-emerald-400/16 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-emerald-200",children:"assistant"}),e.jsx("span",{className:"font-mono text-[10px] text-slate-500",children:p.model})]}),e.jsx("pre",{className:"whitespace-pre-wrap font-mono text-xs leading-relaxed text-slate-200",children:p.content||e.jsx("span",{className:"text-slate-600 italic",children:"empty response"})})]}):e.jsx("div",{className:"text-xs italic text-slate-600",children:"No response"})}),e.jsx("div",{className:"rounded-2xl border border-sky-400/10 bg-white/3 p-3",children:m?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mb-1.5 flex items-center gap-2",children:[e.jsx("span",{className:"rounded-full border border-sky-400/16 bg-sky-400/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-sky-200",children:"assistant"}),e.jsx("span",{className:"font-mono text-[10px] text-slate-500",children:m.model})]}),e.jsx("pre",{className:"whitespace-pre-wrap font-mono text-xs leading-relaxed text-slate-200",children:m.content||e.jsx("span",{className:"text-slate-600 italic",children:"empty response"})})]}):e.jsx("div",{className:"text-xs italic text-slate-600",children:"No response"})})]},x)})})}function es({traceA:s,traceB:a,onClose:n}){const[h,u]=r.useState("metrics"),i=s.totalDuration??(s.endTime?s.endTime-s.startTime:0),o=a.totalDuration??(a.endTime?a.endTime-a.startTime:0),N=[{label:"Status",a:s.status,b:a.status,better:s.status===a.status?"tie":s.status==="ok"?"a":"b"},{label:"Spans",a:String(s.spanCount),b:String(a.spanCount)},{label:"Tokens",a:s.totalTokens.toLocaleString(),b:a.totalTokens.toLocaleString(),diff:s.totalTokens!==a.totalTokens?`${a.totalTokens-s.totalTokens>0?"+":""}${(a.totalTokens-s.totalTokens).toLocaleString()}`:"same",better:s.totalTokens===a.totalTokens?"tie":s.totalTokens<a.totalTokens?"a":"b"},{label:"Cost",a:T(s.totalCost),b:T(a.totalCost),diff:s.totalCost!==a.totalCost?`${a.totalCost-s.totalCost>0?"+":""}${T(Math.abs(a.totalCost-s.totalCost))}`:"same",better:s.totalCost===a.totalCost?"tie":s.totalCost<a.totalCost?"a":"b"},{label:"Duration",a:i>0?k(i):"N/A",b:o>0?k(o):"N/A",diff:i>0&&o>0&&i!==o?`${o-i>0?"+":""}${k(Math.abs(o-i))}`:i===o?"same":void 0,better:i===o?"tie":i>0&&o>0&&i<o?"a":"b"}];return e.jsxs(ce.div,{initial:{opacity:0,y:24},animate:{opacity:1,y:0},exit:{opacity:0,y:24},transition:{duration:.3,ease:[.22,1,.36,1]},className:"dashboard-shell rounded-[26px] px-5 py-5 sm:px-6",children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Comparison mode"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Side-by-side analysis"})]}),e.jsxs("button",{type:"button",onClick:n,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(Z,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Close comparison"})]})]}),e.jsxs("div",{className:"mb-4 flex gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>u("metrics"),className:`inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-xs font-semibold transition-colors ${h==="metrics"?"border-emerald-400/20 bg-emerald-400/10 text-emerald-200":"border-white/8 bg-white/4 text-slate-400 hover:text-white"}`,children:[e.jsx(K,{className:"h-3 w-3"}),"Metrics"]}),e.jsxs("button",{type:"button",onClick:()=>u("responses"),className:`inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-xs font-semibold transition-colors ${h==="responses"?"border-emerald-400/20 bg-emerald-400/10 text-emerald-200":"border-white/8 bg-white/4 text-slate-400 hover:text-white"}`,children:[e.jsx(ze,{className:"h-3 w-3"}),"Response diff"]})]}),h==="metrics"?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mb-4 grid grid-cols-[140px_1fr_1fr_120px] gap-3",children:[e.jsx("div",{}),e.jsxs("div",{className:"rounded-2xl border border-emerald-400/15 bg-emerald-400/5 p-3",children:[e.jsx("div",{className:"hud-label",children:"Trace A"}),e.jsx("div",{className:"mt-1 truncate text-sm font-medium text-white",children:s.name}),e.jsx("div",{className:"mt-0.5 font-mono text-[10px] text-slate-500",children:s.traceId.slice(0,16)})]}),e.jsxs("div",{className:"rounded-2xl border border-sky-400/15 bg-sky-400/5 p-3",children:[e.jsx("div",{className:"hud-label",children:"Trace B"}),e.jsx("div",{className:"mt-1 truncate text-sm font-medium text-white",children:a.name}),e.jsx("div",{className:"mt-0.5 font-mono text-[10px] text-slate-500",children:a.traceId.slice(0,16)})]}),e.jsx("div",{className:"flex items-center justify-center text-[11px] uppercase tracking-[0.18em] text-slate-500",children:"Delta"})]}),e.jsx("div",{className:"space-y-2",children:N.map(l=>e.jsxs("div",{className:"grid grid-cols-[140px_1fr_1fr_120px] items-center gap-3 rounded-2xl border border-white/6 bg-white/4 px-4 py-3",children:[e.jsx("div",{className:"text-xs font-medium uppercase tracking-wider text-slate-400",children:l.label}),e.jsx("div",{className:`text-sm font-mono ${l.better==="a"?"text-emerald-300":(l.better==="tie","text-slate-300")}`,children:l.label==="Status"?e.jsxs("span",{className:"inline-flex items-center gap-1.5",children:[e.jsx(_,{status:s.status}),l.a]}):l.a}),e.jsx("div",{className:`text-sm font-mono ${l.better==="b"?"text-emerald-300":(l.better==="tie","text-slate-300")}`,children:l.label==="Status"?e.jsxs("span",{className:"inline-flex items-center gap-1.5",children:[e.jsx(_,{status:a.status}),l.b]}):l.b}),e.jsx("div",{className:"text-center text-xs font-mono text-slate-500",children:l.diff??"--"})]},l.label))})]}):e.jsx(Be,{traceA:s,traceB:a})]})}function xs(){const[s,a]=De(),n=s.get("q")??"",h=r.useDeferredValue(n),u=s.get("status"),i=u==="ok"||u==="error"?u:"",o=Number(s.get("periodHours")??"24"),N=Number(s.get("pageSize")??"50"),l=ae.includes(N)?N:50,b=Math.max(1,Number(s.get("page")??"1")||1),v=(b-1)*l,[g,w]=r.useState(null),[x,p]=r.useState("desc"),[m,L]=r.useState(new Set),[M,W]=r.useState(null),[je,R]=r.useState(!1),I=r.useMemo(()=>({limit:l,offset:v,q:h.trim()||void 0,status:i||void 0,periodHours:se.some(t=>t.value===o)?o:24}),[h,l,v,o,i]),{data:X,isLoading:ge}=ye({queryKey:["traces",I],queryFn:()=>Pe(I)}),$=X?.traces??[],S=X?.total??0,Y=Math.max(1,Math.ceil(S/l));function fe(t){g===t?p(d=>d==="asc"?"desc":"asc"):(w(t),p("desc"))}const j=r.useMemo(()=>g?[...$].sort((t,d)=>{const c=t[g]??0,f=d[g]??0;return x==="asc"?c-f:f-c}):$,[$,g,x]),P=j.length>0&&j.every(t=>m.has(t.traceId)),Ne=r.useCallback(()=>{L(t=>{const d=new Set(t);if(P)for(const c of j)d.delete(c.traceId);else for(const c of j)d.add(c.traceId);return d})},[P,j]),ve=r.useCallback(t=>{L(d=>{const c=new Set(d);return c.has(t)?c.delete(t):c.add(t),c})},[]),we=r.useCallback(()=>{L(new Set),R(!1)},[]),E=r.useMemo(()=>j.filter(t=>m.has(t.traceId)),[j,m]),H=m.size===2,O=n.length>0||i.length>0||I.periodHours!==24;function y(t,d=!0){a(c=>{const f=new URLSearchParams(c);for(const[G,q]of Object.entries(t))q===void 0||q===""?f.delete(G):f.set(G,String(q));return d&&f.delete("page"),f},{replace:!0})}return e.jsxs(e.Fragment,{children:[e.jsxs(_e,{eyebrow:"Trace Explorer",title:"Deep-dive into every trace flowing through the system.",description:"Explore, compare, and inspect individual traces with full visibility into span counts, token usage, cost, and execution timing.",aside:e.jsx("div",{className:"insight-panel",children:e.jsxs("div",{className:"grid gap-3",children:[e.jsxs("div",{className:"surface-strong rounded-2xl p-4",children:[e.jsx("div",{className:"hud-label",children:"Total traces"}),e.jsxs("div",{className:"mt-2 flex items-center justify-between",children:[e.jsx("div",{className:"text-lg font-medium text-white",children:oe(S)}),e.jsx(B,{className:"h-4 w-4 text-emerald-300"})]}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:"Matching current filters"})]}),m.size>0&&e.jsxs("div",{className:"rounded-2xl border border-sky-400/15 bg-sky-400/8 p-4",children:[e.jsx("div",{className:"hud-label",children:"Selected"}),e.jsxs("div",{className:"mt-2 flex items-center justify-between",children:[e.jsxs("div",{className:"text-lg font-medium text-white",children:[m.size," trace",m.size!==1&&"s"]}),e.jsx(K,{className:"h-4 w-4 text-sky-300"})]}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:H?"Ready to compare":"Select exactly 2 to compare"})]})]})}),children:[e.jsx(te,{children:m.size>0&&e.jsx(ce.div,{initial:{opacity:0,gridTemplateRows:"0fr"},animate:{opacity:1,gridTemplateRows:"1fr"},exit:{opacity:0,gridTemplateRows:"0fr"},transition:{duration:.25,ease:"easeOut"},style:{display:"grid"},children:e.jsx("div",{className:"overflow-hidden",children:e.jsxs("div",{className:"dashboard-shell flex items-center justify-between gap-4 rounded-[24px] px-5 py-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"status-chip",children:[e.jsx(A,{className:"h-3.5 w-3.5 text-emerald-300"}),e.jsxs("span",{children:[m.size," selected"]})]}),e.jsxs("button",{type:"button",onClick:we,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(Me,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]}),e.jsxs("button",{type:"button",disabled:!H,onClick:()=>R(!0),className:`inline-flex items-center gap-2 rounded-2xl border px-4 py-2 text-sm font-medium transition-all ${H?"border-emerald-400/20 bg-[linear-gradient(135deg,rgba(16,185,129,0.14),rgba(14,165,233,0.08))] text-emerald-300 hover:bg-[linear-gradient(135deg,rgba(16,185,129,0.24),rgba(14,165,233,0.14))]":"cursor-not-allowed border-white/6 bg-white/4 text-slate-500"}`,children:[e.jsx(K,{className:"h-4 w-4"}),"Compare traces"]})]})})})}),e.jsx(te,{children:je&&E.length===2&&e.jsx(es,{traceA:E[0],traceB:E[1],onClose:()=>R(!1)})}),e.jsxs("section",{className:"dashboard-shell rounded-[26px] px-4 py-4 sm:px-5 sm:py-5",children:[e.jsxs("div",{className:"surface-strong mb-4 rounded-[24px] p-4",children:[e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Search console"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Trace explorer"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"status-chip",children:[e.jsx(Re,{className:"h-3.5 w-3.5 text-amber-300"}),e.jsxs("span",{children:[S," traces"]})]}),e.jsxs("button",{type:"button",onClick:()=>y({q:void 0,status:void 0,periodHours:void 0}),disabled:!O,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(Z,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]})]}),e.jsxs("div",{className:"mt-4 grid gap-3 md:grid-cols-[minmax(0,1.8fr)_minmax(0,0.6fr)_minmax(0,0.6fr)]",children:[e.jsxs("label",{className:"field-surface relative block rounded-2xl",children:[e.jsx($e,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500"}),e.jsx("input",{value:n,onChange:t=>y({q:t.target.value||void 0}),placeholder:"Search by trace name, ID, or keyword...",className:"w-full rounded-2xl bg-transparent py-3 pl-10 pr-4 text-sm text-white placeholder:text-slate-500 focus:outline-none"})]}),e.jsxs(z,{value:i||"__all__",onValueChange:t=>y({status:t==="__all__"?void 0:t}),children:[e.jsx(V,{className:"w-full rounded-2xl py-3",children:e.jsx(F,{placeholder:"All states"})}),e.jsxs(U,{children:[e.jsx(C,{value:"__all__",children:"All states"}),e.jsx(C,{value:"ok",children:"Healthy only"}),e.jsx(C,{value:"error",children:"Errors only"})]})]}),e.jsxs(z,{value:String(I.periodHours??24),onValueChange:t=>y({periodHours:Number(t)===24?void 0:Number(t)}),children:[e.jsx(V,{className:"w-full rounded-2xl py-3",children:e.jsx(F,{})}),e.jsx(U,{children:se.map(t=>e.jsx(C,{value:String(t.value),children:t.label},t.value))})]})]})]}),ge?e.jsx("div",{className:"empty-state h-[400px] text-slate-500",children:"Loading traces..."}):j.length===0?e.jsxs("div",{className:"empty-state h-[400px]",children:[e.jsx(B,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:O?"No traces match these filters":"No traces recorded yet"}),e.jsx("div",{className:"mt-1 text-sm text-slate-500",children:O?"Try adjusting the search or time window":"Start sending spans to populate the explorer"})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full border-separate border-spacing-y-1.5 text-sm",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"text-left text-[11px] uppercase tracking-[0.18em] text-slate-500",children:[e.jsx("th",{className:"px-3 py-2 text-center",children:e.jsx("button",{type:"button",onClick:Ne,className:"inline-flex items-center justify-center transition-colors hover:text-slate-300",title:P?"Deselect all":"Select all",children:P?e.jsx(A,{className:"h-4 w-4 text-emerald-300"}):e.jsx(ee,{className:"h-4 w-4"})})}),e.jsx("th",{className:"px-3 py-2 w-10",children:"State"}),e.jsx("th",{className:"px-3 py-2",children:"Trace"}),e.jsx("th",{className:"px-3 py-2",children:"ID"}),[["spanCount","Spans"],["totalTokens","Tokens"],["totalCost","Cost"],["startTime","When"]].map(([t,d])=>e.jsx("th",{className:"px-3 py-2 text-right",children:e.jsxs("button",{type:"button",onClick:()=>fe(t),className:"inline-flex items-center gap-1 transition-colors hover:text-slate-300",children:[d,g===t?x==="asc"?e.jsx(Ee,{className:"h-3 w-3"}):e.jsx(He,{className:"h-3 w-3"}):e.jsx(Oe,{className:"h-3 w-3 opacity-30"})]})},t)),e.jsx("th",{className:"px-3 py-2 text-right",children:"Duration"})]})}),e.jsx("tbody",{children:j.map(t=>{const d=m.has(t.traceId),c=t.totalDuration??(t.endTime?t.endTime-t.startTime:0);return e.jsxs("tr",{onClick:()=>W(t),className:`cursor-pointer rounded-2xl transition-colors ${d?"border border-emerald-400/20 bg-emerald-400/8":"table-row-surface"}`,children:[e.jsx("td",{className:"rounded-l-2xl px-3 py-3 text-center",onClick:f=>f.stopPropagation(),children:e.jsx("button",{type:"button",onClick:()=>ve(t.traceId),className:"inline-flex items-center justify-center transition-colors hover:text-emerald-300",children:d?e.jsx(A,{className:"h-4 w-4 text-emerald-300"}):e.jsx(ee,{className:"h-4 w-4 text-slate-500"})})}),e.jsx("td",{className:"px-3 py-3",children:e.jsx(_,{status:t.status})}),e.jsx("td",{className:"px-3 py-3",children:e.jsx("span",{className:"inline-flex max-w-[280px] items-center gap-2 text-sm font-medium text-white",children:e.jsx("span",{className:"truncate",children:t.name})})}),e.jsx("td",{className:"px-3 py-3",children:e.jsx("span",{className:"font-mono text-[11px] uppercase tracking-[0.12em] text-slate-500",children:t.traceId.slice(0,12)})}),e.jsx("td",{className:"px-3 py-3 text-right font-mono text-xs text-slate-300",children:t.spanCount}),e.jsx("td",{className:"px-3 py-3 text-right font-mono text-xs text-slate-300",children:t.totalTokens.toLocaleString()}),e.jsx("td",{className:"px-3 py-3 text-right font-mono text-xs text-slate-300",children:T(t.totalCost)}),e.jsx("td",{className:"px-3 py-3 text-right text-xs text-slate-500",children:ie(t.startTime)}),e.jsx("td",{className:"rounded-r-2xl px-3 py-3 text-right font-mono text-xs text-slate-400",children:c>0?k(c):"--"})]},t.traceId)})})]})}),e.jsxs("div",{className:"mt-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"text-xs text-slate-500",children:S>0?`Showing ${v+1}-${Math.min(v+j.length,S)} of ${S}`:"Awaiting traces"}),e.jsxs(z,{value:String(l),onValueChange:t=>y({pageSize:Number(t)===50?void 0:Number(t)}),children:[e.jsx(V,{className:"w-auto rounded-xl px-2 py-1.5 text-xs",children:e.jsx(F,{})}),e.jsx(U,{children:ae.map(t=>e.jsxs(C,{value:String(t),children:[t," / page"]},t))})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>y({page:b>2?b-1:void 0},!1),disabled:b<=1,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(qe,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Previous"})]}),e.jsxs("span",{className:"text-xs text-slate-500",children:[b," / ",Y]}),e.jsxs("button",{type:"button",onClick:()=>y({page:b+1},!1),disabled:b>=Y,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx("span",{children:"Next"}),e.jsx(de,{className:"h-3.5 w-3.5"})]})]})]})]})]})]}),M&&e.jsx(Je,{trace:M,onClose:()=>W(null)},M.traceId)]})}export{xs as default};