llmtap 0.1.4 → 0.1.6

package/dist/dashboard/assets/Traces-D6m-Ef3q.js

@@ -1 +0,0 @@
-import{c as Q,u as oe,r,j as e,A as H,m as I,X as U,S as de,C as ce,D as xe,L as me,k as X,h as he}from"./index-M3DwcRrc.js";import{u as pe,P as ue,b as k,d as B,c as C,a as ee}from"./format-CNuIwzac.js";import{C as be,S as P,A as je}from"./StatusDot-CjYDb6xj.js";import{P as G,A as W,C as ge,a as fe,b as se}from"./constants-BzCnW506.js";import{C as Ne,M as ve,g as we}from"./content-DqloWqre.js";import{Z as ye}from"./zap-DjNN7wJp.js";import{C as Se}from"./clock-BEYeaSdD.js";import{L as ke}from"./layers-BQ0MpYqk.js";const Ce=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 3v18",key:"108xh3"}]],K=Q("columns-2",Ce);const Te=[["path",{d:"M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344",key:"2acyp4"}],["path",{d:"m9 11 3 3L22 4",key:"1pflzl"}]],O=Q("square-check-big",Te);const De=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}]],J=Q("square",De),Y=[25,50,100,200];function Ie({trace:t,onClose:a}){const h=t.totalDuration??(t.endTime?t.endTime-t.startTime:0),[p,u]=r.useState(!1);return e.jsxs(I.aside,{initial:{x:"100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"100%",opacity:0},transition:{type:"spring",bounce:.12,duration:.45},onAnimationComplete:()=>u(!0),className:`fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l border-white/8 bg-[rgba(6,10,22,0.97)] shadow-[−40px_0_80px_rgba(0,0,0,0.5)] ${p?"backdrop-blur-xl":""}`,children:[e.jsxs("div",{className:"flex items-center justify-between border-b border-white/6 px-5 py-4",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"hud-label",children:"Quick preview"}),e.jsx("h3",{className:"mt-1 truncate text-lg font-semibold tracking-[-0.04em] text-white",children:t.name})]}),e.jsx("button",{type:"button",onClick:a,className:"flex h-9 w-9 items-center justify-center rounded-xl border border-white/8 bg-white/4 text-slate-400 transition-colors hover:bg-white/8 hover:text-white",children:e.jsx(U,{className:"h-4 w-4"})})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto px-5 py-5",children:[e.jsxs("div",{className:"space-y-4",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:t.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(P,{status:t.status}),e.jsx("span",{className:`text-sm font-medium ${t.status==="error"?"text-rose-300":"text-emerald-300"}`,children:t.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(Se,{className:"h-4 w-4 text-sky-300"}),e.jsx("span",{className:"text-sm font-medium text-white",children:h>0?C(h):"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:t.spanCount}),e.jsx(ke,{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:ee(t.totalTokens)}),e.jsx(ce,{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:k(t.totalCost)}),e.jsx(xe,{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(t.startTime).toLocaleString()," (",B(t.startTime),")"]}),t.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(t.endTime).toLocaleString()})]})]})]}),e.jsxs(me,{to:`/trace/${t.traceId}`,className:"mt-5 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(se,{className:"h-4 w-4"})]})]})]})}function Pe({traceA:t,traceB:a}){const[h,p]=r.useState([]),[u,i]=r.useState([]),[n,N]=r.useState(!0);if(r.useEffect(()=>{let w=!1;return N(!0),Promise.all([X(t.traceId),X(a.traceId)]).then(([c,m])=>{w||(p(c.spans),i(m.spans),N(!1))}),()=>{w=!0}},[t.traceId,a.traceId]),n)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(c=>(c.outputMessages??[]).filter(m=>m.role==="assistant").map(m=>({spanName:c.name,model:c.responseModel??c.requestModel,content:we(m.content)}))),b=l(h),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,c)=>{const m=b[c],x=v[c];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: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-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: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"})}),e.jsx("div",{className:"rounded-2xl border border-sky-400/10 bg-white/3 p-3",children:x?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:x.model})]}),e.jsx("pre",{className:"whitespace-pre-wrap font-mono text-xs leading-relaxed text-slate-200",children:x.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"})})]},c)})})}function Me({traceA:t,traceB:a,onClose:h}){const[p,u]=r.useState("metrics"),i=t.totalDuration??(t.endTime?t.endTime-t.startTime:0),n=a.totalDuration??(a.endTime?a.endTime-a.startTime:0),N=[{label:"Status",a:t.status,b:a.status,better:t.status===a.status?"tie":t.status==="ok"?"a":"b"},{label:"Spans",a:String(t.spanCount),b:String(a.spanCount)},{label:"Tokens",a:t.totalTokens.toLocaleString(),b:a.totalTokens.toLocaleString(),diff:t.totalTokens!==a.totalTokens?`${a.totalTokens-t.totalTokens>0?"+":""}${(a.totalTokens-t.totalTokens).toLocaleString()}`:"same",better:t.totalTokens===a.totalTokens?"tie":t.totalTokens<a.totalTokens?"a":"b"},{label:"Cost",a:k(t.totalCost),b:k(a.totalCost),diff:t.totalCost!==a.totalCost?`${a.totalCost-t.totalCost>0?"+":""}${k(Math.abs(a.totalCost-t.totalCost))}`:"same",better:t.totalCost===a.totalCost?"tie":t.totalCost<a.totalCost?"a":"b"},{label:"Duration",a:i>0?C(i):"N/A",b:n>0?C(n):"N/A",diff:i>0&&n>0&&i!==n?`${n-i>0?"+":""}${C(Math.abs(n-i))}`:i===n?"same":void 0,better:i===n?"tie":i>0&&n>0&&i<n?"a":"b"}];return e.jsxs(I.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:h,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(U,{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 ${p==="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 ${p==="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(ve,{className:"h-3 w-3"}),"Response diff"]})]}),p==="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:t.name}),e.jsx("div",{className:"mt-0.5 font-mono text-[10px] text-slate-500",children:t.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(P,{status:t.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(P,{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(Pe,{traceA:t,traceB:a})]})}function He(){const[t,a]=oe(),h=t.get("q")??"",p=r.useDeferredValue(h),u=t.get("status"),i=u==="ok"||u==="error"?u:"",n=Number(t.get("periodHours")??"24"),N=Number(t.get("pageSize")??"50"),l=Y.includes(N)?N:50,b=Math.max(1,Number(t.get("page")??"1")||1),v=(b-1)*l,[g,w]=r.useState(null),[c,m]=r.useState("desc"),[x,M]=r.useState(new Set),[_,$]=r.useState(null),[te,L]=r.useState(!1),T=r.useMemo(()=>({limit:l,offset:v,q:p.trim()||void 0,status:i||void 0,periodHours:G.some(s=>s.value===n)?n:24}),[p,l,v,n,i]),{data:V,isLoading:ae}=pe({queryKey:["traces",T],queryFn:()=>he(T)}),q=V?.traces??[],S=V?.total??0,Z=Math.max(1,Math.ceil(S/l));function le(s){g===s?m(o=>o==="asc"?"desc":"asc"):(w(s),m("desc"))}const j=r.useMemo(()=>g?[...q].sort((s,o)=>{const d=s[g]??0,f=o[g]??0;return c==="asc"?d-f:f-d}):q,[q,g,c]),D=j.length>0&&j.every(s=>x.has(s.traceId)),re=r.useCallback(()=>{M(s=>{const o=new Set(s);if(D)for(const d of j)o.delete(d.traceId);else for(const d of j)o.add(d.traceId);return o})},[D,j]),ie=r.useCallback(s=>{M(o=>{const d=new Set(o);return d.has(s)?d.delete(s):d.add(s),d})},[]),ne=r.useCallback(()=>{M(new Set),L(!1)},[]),z=r.useMemo(()=>j.filter(s=>x.has(s.traceId)),[j,x]),E=x.size===2,R=h.length>0||i.length>0||T.periodHours!==24;function y(s,o=!0){a(d=>{const f=new URLSearchParams(d);for(const[A,F]of Object.entries(s))F===void 0||F===""?f.delete(A):f.set(A,String(F));return o&&f.delete("page"),f},{replace:!0})}return e.jsxs(e.Fragment,{children:[e.jsxs(ue,{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:"rounded-2xl border border-white/8 bg-white/4 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:ee(S)}),e.jsx(W,{className:"h-4 w-4 text-emerald-300"})]}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:"Matching current filters"})]}),x.size>0&&e.jsxs("div",{className:"rounded-2xl border border-sky-400/15 bg-sky-400/5 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:[x.size," trace",x.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:E?"Ready to compare":"Select exactly 2 to compare"})]})]})}),children:[e.jsx(H,{children:x.size>0&&e.jsx(I.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(O,{className:"h-3.5 w-3.5 text-emerald-300"}),e.jsxs("span",{children:[x.size," selected"]})]}),e.jsxs("button",{type:"button",onClick:ne,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(Ne,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]}),e.jsxs("button",{type:"button",disabled:!E,onClick:()=>L(!0),className:`inline-flex items-center gap-2 rounded-2xl border px-4 py-2 text-sm font-medium transition-all ${E?"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(H,{children:te&&z.length===2&&e.jsx(Me,{traceA:z[0],traceB:z[1],onClose:()=>L(!1)})}),e.jsxs("section",{className:"dashboard-shell rounded-[26px] px-4 py-4 sm:px-5 sm:py-5",children:[e.jsxs("div",{className:"mb-4 rounded-[24px] border border-white/8 bg-[linear-gradient(180deg,rgba(7,14,26,0.95),rgba(4,8,18,0.98))] 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(ye,{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:!R,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(U,{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:"relative block",children:[e.jsx(de,{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:h,onChange:s=>y({q:s.target.value||void 0}),placeholder:"Search by trace name, ID, or keyword...",className:"w-full rounded-2xl border border-white/8 bg-white/4 py-3 pl-10 pr-4 text-sm text-white placeholder:text-slate-500 focus:border-emerald-400/30 focus:bg-white/6 focus:outline-none"})]}),e.jsxs("select",{value:i,onChange:s=>y({status:s.target.value||void 0}),className:"w-full rounded-2xl border border-white/8 bg-white/4 px-4 py-3 text-sm text-white focus:border-emerald-400/30 focus:bg-white/6 focus:outline-none",children:[e.jsx("option",{value:"",children:"All states"}),e.jsx("option",{value:"ok",children:"Healthy only"}),e.jsx("option",{value:"error",children:"Errors only"})]}),e.jsx("select",{value:String(T.periodHours??24),onChange:s=>y({periodHours:Number(s.target.value)===24?void 0:Number(s.target.value)}),className:"w-full rounded-2xl border border-white/8 bg-white/4 px-4 py-3 text-sm text-white focus:border-amber-400/30 focus:bg-white/6 focus:outline-none",children:G.map(s=>e.jsx("option",{value:s.value,children:s.label},s.value))})]})]}),ae?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(W,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:R?"No traces match these filters":"No traces recorded yet"}),e.jsx("div",{className:"mt-1 text-sm text-slate-500",children:R?"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:re,className:"inline-flex items-center justify-center transition-colors hover:text-slate-300",title:D?"Deselect all":"Select all",children:D?e.jsx(O,{className:"h-4 w-4 text-emerald-300"}):e.jsx(J,{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(([s,o])=>e.jsx("th",{className:"px-3 py-2 text-right",children:e.jsxs("button",{type:"button",onClick:()=>le(s),className:"inline-flex items-center gap-1 transition-colors hover:text-slate-300",children:[o,g===s?c==="asc"?e.jsx(ge,{className:"h-3 w-3"}):e.jsx(be,{className:"h-3 w-3"}):e.jsx(fe,{className:"h-3 w-3 opacity-30"})]})},s)),e.jsx("th",{className:"px-3 py-2 text-right",children:"Duration"})]})}),e.jsx("tbody",{children:j.map(s=>{const o=x.has(s.traceId),d=s.totalDuration??(s.endTime?s.endTime-s.startTime:0);return e.jsxs("tr",{onClick:()=>$(s),className:`cursor-pointer rounded-2xl border transition-colors ${o?"border-emerald-400/20 bg-emerald-400/5":"border-white/6 bg-white/4 hover:bg-white/6"}`,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:()=>ie(s.traceId),className:"inline-flex items-center justify-center transition-colors hover:text-emerald-300",children:o?e.jsx(O,{className:"h-4 w-4 text-emerald-300"}):e.jsx(J,{className:"h-4 w-4 text-slate-500"})})}),e.jsx("td",{className:"px-3 py-3",children:e.jsx(P,{status:s.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:s.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:s.traceId.slice(0,12)})}),e.jsx("td",{className:"px-3 py-3 text-right font-mono text-xs text-slate-300",children:s.spanCount}),e.jsx("td",{className:"px-3 py-3 text-right font-mono text-xs text-slate-300",children:s.totalTokens.toLocaleString()}),e.jsx("td",{className:"px-3 py-3 text-right font-mono text-xs text-slate-300",children:k(s.totalCost)}),e.jsx("td",{className:"px-3 py-3 text-right text-xs text-slate-500",children:B(s.startTime)}),e.jsx("td",{className:"rounded-r-2xl px-3 py-3 text-right font-mono text-xs text-slate-400",children:d>0?C(d):"--"})]},s.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.jsx("select",{value:String(l),onChange:s=>y({pageSize:Number(s.target.value)===50?void 0:Number(s.target.value)}),className:"rounded-xl border border-white/8 bg-white/4 px-2 py-1.5 text-xs text-slate-300 focus:border-emerald-400/30 focus:outline-none",children:Y.map(s=>e.jsxs("option",{value:s,children:[s," / page"]},s))})]}),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(je,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Previous"})]}),e.jsxs("span",{className:"text-xs text-slate-500",children:[b," / ",Z]}),e.jsxs("button",{type:"button",onClick:()=>y({page:b+1},!1),disabled:b>=Z,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(se,{className:"h-3.5 w-3.5"})]})]})]})]})]})]}),e.jsx(H,{children:_&&e.jsxs(e.Fragment,{children:[e.jsx(I.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:()=>$(null),className:"fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"},"overlay"),e.jsx(Ie,{trace:_,onClose:()=>$(null)},_.traceId)]})})]})}export{He as default};