llmtap 0.1.7 → 0.1.8

package/dist/dashboard/assets/CommandBar-CBRbPbgc.js

@@ -0,0 +1 @@
+import{r as u,j as a}from"./query-DVWnIZNd.js";import{I as d,c as t}from"./index-DG2eF3M2.js";const p=[{value:1,label:"1h"},{value:6,label:"6h"},{value:24,label:"24h"},{value:168,label:"7d"},{value:720,label:"30d"}];function x({placeholder:o="Search",value:s,onChange:l,shortcut:n="⌘K",className:i}){const[e,r]=u.useState(!1);return a.jsxs("div",{className:t("relative w-full",i),children:[a.jsx(d,{value:s,onChange:c=>l(c.target.value),onFocus:()=>r(!0),onBlur:()=>r(!1),placeholder:o,className:"h-12 rounded-[var(--radius-panel)] border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.88),rgba(var(--ch-bg-base),0.94))] px-4 pr-16 font-[var(--font-mono)] text-[13px] tracking-[0.03em] text-[var(--color-text-primary)] transition-all duration-[var(--duration-base)] ease-[var(--ease-out)] placeholder:text-[var(--color-text-disabled)] focus-visible:border-[var(--border-bright)] focus-visible:ring-0",style:{boxShadow:e?"0 0 0 3px var(--color-accent-soft), 0 0 28px rgba(var(--ch-accent), 0.08)":"inset 0 1px 0 rgba(var(--ch-text-primary), 0.03)"}}),a.jsx("span",{className:t("badge pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] transition-opacity duration-[var(--duration-base)] ease-[var(--ease-out)]",e&&"opacity-0"),children:n})]})}export{x as C,p as P};

package/dist/dashboard/assets/Costs-B-TMvDlI.js

@@ -0,0 +1 @@
+import{j as e,r as v,d as k}from"./query-DVWnIZNd.js";import{b as C,f as w}from"./index-DG2eF3M2.js";import{B as S,S as T}from"./statistics-with-status-grid-tcb9SpIY.js";import{S as $,a as M,b as D,c as P,d as g}from"./select-BJEJvQo4.js";import{f as u,b as y,a as d,P as L}from"./format-zoXqpaOb.js";import{h as R,I as V,Z as E,a0 as K,a1 as A,O as B,a2 as W}from"./icons-BOLUIAKd.js";import{D as q}from"./DataTable-p1PD-dJj.js";import{E as j}from"./EmptyState-xDl-M9Rz.js";import{p as b}from"./provider-colors-CTiHNYHs.js";import{c as x}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";function I({segments:t,totalLabel:n,totalValue:l}){const a=2*Math.PI*66,i=Math.max(t.reduce((r,o)=>r+o.value,0),1);let c=0;return e.jsxs("div",{className:"grid gap-6 lg:grid-cols-[280px_minmax(0,1fr)] lg:items-center",children:[e.jsxs("div",{className:"relative mx-auto h-[220px] w-[220px]",children:[e.jsxs("svg",{viewBox:"0 0 180 180",className:"h-full w-full -rotate-90",role:"img","aria-label":"Provider budget distribution",children:[e.jsx("circle",{cx:"90",cy:"90",r:66,fill:"none",stroke:"rgba(var(--ch-text-primary),0.12)",strokeWidth:"18"}),t.map(r=>{const o=r.value/i*a,m=-c;return c+=o,e.jsx("circle",{cx:"90",cy:"90",r:66,fill:"none",stroke:r.color,strokeWidth:"18",strokeLinecap:"round",strokeDasharray:`${o} ${a-o}`,strokeDashoffset:m,style:{filter:`drop-shadow(0 0 10px ${r.color}40)`}},r.label)})]}),e.jsxs("div",{className:"absolute inset-0 flex flex-col items-center justify-center rounded-full",children:[e.jsx("div",{className:"hud-label",children:n}),e.jsx("div",{className:"mt-2 text-2xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:l}),e.jsxs("div",{className:"mt-1 text-xs text-[var(--color-text-tertiary)]",children:[t.length," providers active"]})]})]}),e.jsx("div",{className:"space-y-3",children:t.map(r=>{const o=r.value/i*100;return e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.72),rgba(var(--ch-bg-base),0.9))] p-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"h-3 w-3 rounded-full",style:{backgroundColor:r.color,boxShadow:`0 0 12px ${r.color}50`}}),e.jsx("span",{className:"flex-1 text-sm font-medium capitalize text-[var(--color-text-primary)]",children:r.label}),e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-tertiary)]",children:[o.toFixed(0),"%"]})]}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.84)]",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${Math.max(o,6)}%`,background:`linear-gradient(90deg, ${r.color}, rgba(var(--ch-text-primary),0.72))`}})}),r.detail?e.jsx("div",{className:"mt-2 text-xs text-[var(--color-text-tertiary)]",children:r.detail}):null]},r.label)})})]})}const N={cost:{label:"Cost ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent-2), 0.95),rgba(var(--ch-accent), 0.92))]",value:t=>t.totalCost,formatter:t=>d(t)},latency:{label:"Latency ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-text-primary), 0.9),rgba(var(--ch-accent), 0.78))]",value:t=>t.avgDuration,formatter:t=>y(t)},tokens:{label:"Token ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent), 0.96),rgba(var(--ch-accent-2), 0.86))]",value:t=>t.totalTokens,formatter:t=>u(t)}};function _({rows:t}){const[n,l]=v.useState("cost"),h=v.useMemo(()=>{const a=N[n].value;return[...t].sort((i,c)=>a(c)-a(i)).map((i,c,r)=>{const o=Math.max(a(r[0]??i),1),m=a(i);return{...i,rank:c+1,metricValue:m,progress:Math.max(m/o*100,6)}})},[n,t]);return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3",children:[e.jsxs(S,{variant:"info",className:"border-[var(--color-accent)]/18 bg-[var(--color-accent)]/12 text-[var(--color-accent)]",children:[e.jsx(R,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"ranking live"})]}),e.jsxs($,{value:n,onValueChange:a=>l(a),children:[e.jsx(M,{className:"h-8 w-[170px] text-xs",children:e.jsx(D,{placeholder:"Select metric"})}),e.jsxs(P,{align:"end",children:[e.jsx(g,{value:"cost",children:"Cost ranking"}),e.jsx(g,{value:"latency",children:"Latency ranking"}),e.jsx(g,{value:"tokens",children:"Token ranking"})]})]})]}),e.jsx("div",{className:"space-y-3",children:h.map(a=>e.jsxs("div",{className:"rounded-[22px] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.78),rgba(var(--ch-bg-base),0.94))] p-4",children:[e.jsxs("div",{className:"flex items-start justify-between gap-4",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:["#",a.rank]}),e.jsx("div",{className:"truncate text-sm font-semibold text-[var(--color-text-primary)]",children:a.label})]}),e.jsxs("div",{className:"mt-1 flex flex-wrap items-center gap-2 text-xs text-[var(--color-text-secondary)]",children:[e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 uppercase tracking-[0.16em] text-[10px] text-[var(--color-text-secondary)]",children:a.provider}),e.jsxs("span",{children:[a.spanCount," calls"]}),e.jsxs("span",{children:[u(a.totalTokens)," tokens"]})]})]}),e.jsxs("div",{className:"text-right",children:[e.jsx("div",{className:"font-mono text-sm text-[var(--color-text-primary)]",children:N[n].formatter(a.metricValue)}),e.jsx("div",{className:"mt-1 text-[11px] text-[var(--color-text-tertiary)]",children:n==="cost"?y(a.avgDuration):d(a.totalCost)})]})]}),e.jsx("div",{className:"mt-3 h-2.5 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.82)]",children:e.jsx("div",{className:`h-full rounded-full ${N[n].barClassName}`,style:{width:`${a.progress}%`}})})]},`${a.provider}-${a.label}`))})]})}const p="dashboard-shell rounded-[var(--radius-card)]",F={item:{hidden:{opacity:0,y:20,scale:.97},show:{opacity:1,y:0,scale:1,transition:{duration:.4,ease:[.22,1,.36,1]}}}};function ae(){const[t,n]=v.useState([{id:"totalCost",desc:!0}]),{data:l,isLoading:h}=k({queryKey:["stats"],queryFn:()=>w(24)}),a=l?.byModel??[],i=l?.byProvider??[],c=a.slice(0,8).map(s=>({label:s.model,provider:s.provider,totalCost:s.totalCost,totalTokens:s.totalTokens,avgDuration:s.avgDuration??0,spanCount:s.spanCount})),r=i.map(s=>({label:s.provider,value:s.totalCost,color:b[s.provider]??"var(--color-accent)",detail:`${s.spanCount} calls · ${u(s.totalTokens)} tokens`})),o=[{title:"Total Cost",value:d(l?.totalCost??0),status:(l?.totalCost??0)>0?"observe":"unknown",range:"Accumulated over the last 24 hours",icon:e.jsx(V,{className:"h-4 w-4"})},{title:"Token Volume",value:u(l?.totalTokens??0),status:(l?.totalTokens??0)>0?"within":"unknown",range:`${l?.totalSpans??0} model calls observed`,icon:e.jsx(E,{className:"h-4 w-4"})},{title:"Models in Rotation",value:String(a.length),status:a.length>0?"within":"unknown",range:`${i.length} providers contributing to spend`,icon:e.jsx(K,{className:"h-4 w-4"})}],m=v.useMemo(()=>[{accessorKey:"model",header:"Model",cell:({row:s})=>e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:s.original.model}),e.jsxs("div",{className:"mt-1 text-xs text-[var(--color-text-secondary)]",children:[s.original.spanCount," calls in the current window"]})]})},{accessorKey:"provider",header:"Provider",cell:({row:s})=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"h-2.5 w-2.5 rounded-full",style:{backgroundColor:b[s.original.provider]??"var(--color-accent)",boxShadow:`0 0 10px ${b[s.original.provider]??"var(--color-accent)"}`}}),e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-secondary)]",children:s.original.provider})]})},{accessorKey:"spanCount",header:"Calls",cell:({row:s})=>e.jsx("span",{className:"inline-flex items-center justify-center rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-0.5 font-mono text-xs text-[var(--color-text-secondary)]",children:s.original.spanCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalTokens",header:"Tokens",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:s.original.totalTokens.toLocaleString()}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalCost",header:"Cost",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:d(s.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"avgDuration",header:"Avg Duration",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:s.original.avgDuration?y(s.original.avgDuration):"-"}),meta:{className:"text-right",cellClassName:"text-right"}}],[a]);return h?e.jsxs("div",{className:"mx-auto max-w-[1760px] space-y-8",children:[e.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),e.jsx("div",{className:"grid grid-cols-1 gap-5 md:grid-cols-3",children:[...Array(3)].map((s,f)=>e.jsxs("div",{className:"metric-card",children:[e.jsx("div",{className:"skeleton-panel h-12 w-12 rounded-2xl"}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("div",{className:"skeleton-panel h-3 w-20 rounded-full"}),e.jsx("div",{className:"skeleton-panel h-8 w-28 rounded-full"})]})]},f))})]}):e.jsxs(L,{eyebrow:"Economic Layer",title:"Understand where every token is converting into spend.",description:"This surface should answer two questions immediately: which models are burning budget, and which providers are quietly dominating the bill.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(C,{}),e.jsxs("div",{className:"mt-5 space-y-4",children:[e.jsxs("div",{className:"deck-card deck-card--accent",children:[e.jsx("div",{className:"hud-label",children:"Highest model spend"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:a[0]?.model??"Awaiting traffic"}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:a[0]?`${d(a[0].totalCost)} across ${a[0].spanCount} calls`:"No model cost data yet"})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Provider spread"}),e.jsxs("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:[i.length," active providers"]}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:"Cost dominance becomes obvious here before it becomes expensive."})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsx("strong",{children:"24h"})]}),e.jsxs("span",{className:"pill-item",children:["models ",e.jsx("strong",{children:a.length})]}),e.jsxs("span",{className:"pill-item",children:["providers ",e.jsx("strong",{children:i.length})]}),e.jsxs("span",{className:"pill-item",children:["spend ",e.jsx("strong",{children:d(l?.totalCost??0)})]})]}),e.jsx(x.div,{variants:F.item,initial:"hidden",animate:"show",children:e.jsx(T,{cards:o,className:"max-w-none px-0 sm:px-0 lg:px-0 md:grid-cols-3 xl:grid-cols-3"})}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)]",children:[e.jsxs(x.div,{className:`${p} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.15,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Model ranking"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Cost by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(A,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsx("span",{children:"Spend concentration"})]})]}),c.length>0?e.jsx(_,{rows:c}):e.jsx(j,{title:"No cost data yet",description:"Model spend will stack up here as soon as traffic hits the collector.",className:"h-[320px]"})]}),e.jsxs(x.div,{className:`${p} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.2,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Provider mix"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Who is taking the budget"})]}),e.jsx(B,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),r.length>0?e.jsx(I,{segments:r,totalLabel:"24h spend",totalValue:d(l?.totalCost??0)}):e.jsx(j,{title:"No providers yet",description:"Provider allocation appears here as soon as at least one model call is captured.",className:"h-[260px]"})]})]}),a.length>0?e.jsxs(x.div,{className:`${p} overflow-hidden p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.25,duration:.35},children:[e.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Detailed ledger"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Breakdown by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(W,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[a.length," models"]})]})]}),e.jsx(q,{columns:m,data:a,sorting:t,onSortingChange:n})]}):e.jsx(x.div,{className:`${p} p-16`,initial:{opacity:0},animate:{opacity:1},children:e.jsx(j,{title:"No cost data yet",description:"Start making traced model calls and the economic layer will fill in automatically."})})]})}export{ae as default};

package/dist/dashboard/assets/Dashboard-CFNAMjdc.js

@@ -0,0 +1 @@
+import{r as $,j as e,d as K}from"./query-DVWnIZNd.js";import{c as ve,L as be,u as ye,a as Ne,B as ce,b as we,f as ke,d as Se,e as Ce}from"./index-DG2eF3M2.js";import{G as _e}from"./GettingStartedPanel-Cn46fQ1w.js";import{f as Y,a as M,P as $e,b as Te,c as de}from"./format-zoXqpaOb.js";import{B as Pe,S as Le}from"./statistics-with-status-grid-tcb9SpIY.js";import{h as E,i as Ae,j as Me,k as Ie,d as De,l as me,G as He,X as Ve,m as qe,n as Fe,T as xe,o as Oe,g as Ge,O as Re}from"./icons-BOLUIAKd.js";import{A as We,a as J,b as ee,c as re}from"./accordion-CC_sxDZ8.js";import{S as G,a as R,b as W,c as B,d as P}from"./select-BJEJvQo4.js";import{P as he,C as Be}from"./CommandBar-CBRbPbgc.js";import{E as z}from"./EmptyState-xDl-M9Rz.js";import{P as ze}from"./ProviderBadge-Cs31007s.js";import{c as ge}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";const V=720,ae=320,h={top:24,right:16,bottom:42,left:16};function Ee(a){if(typeof a=="number")return new Date(a).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"});const t=Number(a);return!Number.isNaN(t)&&String(a).length>=10?new Date(t).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):String(a)}function ue(a){if(typeof a=="number")return a;if(!a)return 0;const t=Number(a);return Number.isFinite(t)?t:0}function se(a){if(a.length===0)return"";if(a.length===1)return`M ${a[0].x} ${a[0].y}`;let t=`M ${a[0].x} ${a[0].y}`;for(let m=0;m<a.length-1;m+=1){const i=a[m],c=a[m+1];if(!(i&&c))continue;const g=(i.x+c.x)/2;t+=` C ${g} ${i.y}, ${g} ${c.y}, ${c.x} ${c.y}`}return t}function Xe(a,t){if(a.length===0)return"";const m=se(a),i=a[a.length-1],c=a[0];return i&&c?`${m} L ${i.x} ${t} L ${c.x} ${t} Z`:""}function Ue({data:a,xDataKey:t,primaryDataKey:m,secondaryDataKey:i}){const c=$.useId().replace(/:/g,""),[g,N]=$.useState(Math.max(0,a.length-1)),s=$.useMemo(()=>{const l=V-h.left-h.right,x=ae-h.top-h.bottom,u=h.top+x,b=Math.max(a.length-1,1),p=a.map(n=>ue(n[m])),o=i?a.map(n=>ue(n[i])):[],I=Math.max(...p,...o.length>0?o:[0],1),f=a.map((n,j)=>{const O=h.left+l*j/b,H=p[j]??0,k=o.length>0?o[j]??0:void 0,S=C=>u-C/I*x;return{index:j,x:O,yPrimary:S(H),ySecondary:k===void 0?void 0:S(k),label:Ee(n[t]),primaryValue:H,secondaryValue:k}}),X=se(f.map(n=>({x:n.x,y:n.yPrimary}))),F=Xe(f.map(n=>({x:n.x,y:n.yPrimary})),u),D=i&&f.some(n=>n.ySecondary!==void 0)?se(f.map(n=>({x:n.x,y:n.ySecondary??u}))):"",w=Math.max(1,Math.floor(f.length/5)),U=f.filter((n,j)=>j===0||j===f.length-1||j%w===0);return{chartInnerWidth:l,chartInnerHeight:x,baselineY:u,maxValue:I,points:f,primaryPath:X,primaryArea:F,secondaryPath:D,ticks:U,gridLines:[.25,.5,.75].map(n=>h.top+x*n)}},[a,m,i,t]),d=s.points[Math.min(g,s.points.length-1)];return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[e.jsxs(Pe,{variant:"info",className:"border-[var(--color-accent)]/18 bg-[var(--color-accent)]/12 text-[var(--color-accent)]",children:[e.jsx(E,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"live trend"})]}),d?e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx("div",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]",children:d.label}),e.jsx("div",{className:"rounded-full border border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/12 px-3 py-1.5 font-mono text-xs text-[var(--color-text-primary)]",children:d.primaryValue.toLocaleString(void 0,{maximumFractionDigits:4})}),i&&d.secondaryValue!==void 0&&e.jsx("div",{className:"rounded-full border border-[var(--color-accent)]/18 bg-[var(--color-accent)]/10 px-3 py-1.5 font-mono text-xs text-[var(--color-text-primary)]",children:d.secondaryValue.toLocaleString(void 0,{maximumFractionDigits:4})})]}):null]}),e.jsxs("div",{className:"relative overflow-hidden rounded-[24px] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-surface),0.74),rgba(var(--ch-bg-base),0.96))] p-3",children:[e.jsx("div",{className:"pointer-events-none absolute inset-x-0 top-0 h-24 bg-[radial-gradient(circle_at_top,rgba(var(--ch-accent), 0.16),transparent_60%)]"}),e.jsxs("svg",{"aria-hidden":"true",className:"h-[320px] w-full",viewBox:`0 0 ${V} ${ae}`,children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:`line-fill-${c}`,x1:"0",x2:"0",y1:"0",y2:"1",children:[e.jsx("stop",{offset:"0%",stopColor:"var(--color-accent-2)",stopOpacity:"0.38"}),e.jsx("stop",{offset:"100%",stopColor:"var(--color-accent-2)",stopOpacity:"0"})]}),e.jsxs("linearGradient",{id:`line-stroke-${c}`,x1:"0",x2:"1",y1:"0",y2:"0",children:[e.jsx("stop",{offset:"0%",stopColor:"var(--color-accent-2)"}),e.jsx("stop",{offset:"100%",stopColor:"var(--color-accent)"})]}),e.jsxs("filter",{id:`line-glow-${c}`,x:"-30%",y:"-30%",width:"160%",height:"160%",children:[e.jsx("feGaussianBlur",{stdDeviation:"9",result:"blur"}),e.jsxs("feMerge",{children:[e.jsx("feMergeNode",{in:"blur"}),e.jsx("feMergeNode",{in:"SourceGraphic"})]})]})]}),s.gridLines.map(l=>e.jsx("line",{x1:h.left,x2:V-h.right,y1:l,y2:l,stroke:"rgba(var(--ch-text-primary),0.16)",strokeDasharray:"4 8"},l)),e.jsx("line",{x1:h.left,x2:V-h.right,y1:s.baselineY,y2:s.baselineY,stroke:"rgba(var(--ch-text-primary),0.2)"}),s.primaryArea?e.jsx("path",{d:s.primaryArea,fill:`url(#line-fill-${c})`,opacity:"0.95"}):null,s.secondaryPath?e.jsx("path",{d:s.secondaryPath,fill:"none",stroke:"var(--color-text-primary)",strokeLinecap:"round",strokeLinejoin:"round",strokeOpacity:"0.55",strokeWidth:"2"}):null,s.primaryPath?e.jsxs(e.Fragment,{children:[e.jsx("path",{d:s.primaryPath,fill:"none",filter:`url(#line-glow-${c})`,stroke:"url(#line-stroke-${chartId})",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2.75"}),e.jsx("path",{d:s.primaryPath,fill:"none",stroke:"rgba(var(--ch-text-primary),0.16)",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1"})]}):null,d?e.jsxs(e.Fragment,{children:[e.jsx("line",{x1:d.x,x2:d.x,y1:h.top,y2:s.baselineY,stroke:"rgba(var(--ch-accent), 0.24)",strokeDasharray:"4 6"}),e.jsx("circle",{cx:d.x,cy:d.yPrimary,fill:"var(--color-text-primary)",r:"5",stroke:"var(--color-accent)",strokeWidth:"3"})]}):null,s.ticks.map(l=>e.jsx("text",{x:l.x,y:ae-12,fill:"rgba(var(--ch-text-primary),0.74)",fontSize:"11",textAnchor:"middle",children:l.label},`${l.index}-${l.label}`)),s.points.map((l,x)=>{const u=s.points[x-1],b=s.points[x+1],p=u?(u.x+l.x)/2:h.left,o=b?(b.x+l.x)/2:V-h.right;return e.jsx("rect",{x:p,y:h.top,width:Math.max(o-p,8),height:s.chartInnerHeight,fill:"transparent",onFocus:()=>N(l.index),onMouseEnter:()=>N(l.index)},l.index)})]}),e.jsxs("div",{className:"mt-3 grid gap-3 sm:grid-cols-3",children:[e.jsx(te,{label:"Peak",value:s.maxValue.toLocaleString(void 0,{maximumFractionDigits:4})}),e.jsx(te,{label:"Samples",value:s.points.length.toLocaleString()}),e.jsx(te,{label:"Current",value:(d?.primaryValue??0).toLocaleString(void 0,{maximumFractionDigits:4})})]})]})]})}function te({label:a,value:t}){return e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:[e.jsx("div",{className:"hud-label",children:a}),e.jsx("div",{className:"mt-2 font-mono text-sm text-[var(--color-text-primary)]",children:t})]})}function Qe(a){return a<.01?{color:"var(--color-accent)",background:"var(--color-accent-soft)",border:"var(--border-default)",shadow:"0 0 18px rgba(var(--ch-accent), 0.14)"}:a<.1?{color:"var(--color-text-primary)",background:"rgba(var(--ch-text-primary), 0.05)",border:"var(--border-dim)",shadow:"none"}:a<=1?{color:"var(--color-warning)",background:"rgba(var(--ch-warning), 0.08)",border:"rgba(var(--ch-warning), 0.24)",shadow:"0 0 18px rgba(var(--ch-warning), 0.14)"}:{color:"var(--color-error)",background:"rgba(var(--ch-error), 0.08)",border:"rgba(var(--ch-error), 0.24)",shadow:"0 0 18px rgba(var(--ch-error), 0.16)"}}function fe({value:a,size:t="md",className:m}){const i=Qe(a);return e.jsxs("span",{className:ve("badge justify-center",t==="sm"?"px-2.5 py-[2px] text-[10px]":"px-3 py-[3px] text-[11px]",m),style:{color:i.color,background:i.background,borderColor:i.border,boxShadow:i.shadow},children:["$",a.toFixed(4)]})}function Ze(a){return a<1e3?`${Math.round(a)}ms`:`${(a/1e3).toFixed(1)}s`}function Ke(a){return a>=1e3?`${(a/1e3).toFixed(1)}k`:`${a}`}function Ye(a){return a==="active"?{dot:e.jsx("span",{"aria-hidden":"true",className:"live-dot",style:{display:"inline-block"}}),label:"active"}:a==="warning"?{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-warning)",boxShadow:"0 0 6px rgba(var(--ch-warning), 0.55)"}}),label:"warning"}:a==="error"?{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-error)",boxShadow:"0 0 6px rgba(var(--ch-error), 0.48)"}}),label:"error"}:{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-accent-2)",boxShadow:"0 0 6px rgba(var(--ch-accent-2), 0.38)"}}),label:"complete"}}function Je({trace:a,selected:t=!1,onSelect:m,onClick:i,href:c,index:g=0,className:N}){const s=Ye(a.status),d="grid w-full grid-cols-[auto_auto_minmax(0,1.5fr)_minmax(0,0.8fr)_minmax(72px,0.5fr)_minmax(80px,0.7fr)_minmax(94px,0.6fr)_minmax(86px,0.6fr)_minmax(96px,0.7fr)] items-center gap-3 px-4 py-3 text-left hover:bg-[rgba(var(--ch-text-primary),0.02)]",l=e.jsxs(e.Fragment,{children:[m?e.jsx("span",{onClick:x=>{x.stopPropagation(),m(a.id)},className:"inline-flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-dim)] bg-transparent text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-accent)]",children:t?e.jsx(Ae,{className:"h-4 w-4"}):e.jsx(Me,{className:"h-4 w-4"})}):e.jsx("span",{className:"w-0"}),e.jsxs("div",{className:"flex items-center gap-2",children:[s.dot,e.jsx("span",{className:"mono-label text-[var(--color-text-secondary)]",children:s.label})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate text-[14px] font-medium text-[var(--color-text-primary)]",children:a.name}),e.jsx("div",{className:"mono-label mt-1 truncate",children:a.when})]}),e.jsx("div",{className:"mono-value truncate text-[var(--color-text-secondary)]",children:a.id.slice(0,10)}),e.jsx("div",{className:"mono-value justify-self-end",children:a.spans}),e.jsx("div",{className:"mono-value justify-self-end",children:Ke(a.tokens)}),e.jsx("div",{className:"justify-self-end",children:e.jsx(fe,{value:a.cost,size:"sm"})}),e.jsx("div",{className:"mono-value justify-self-end text-[var(--color-text-secondary)]",children:Ze(a.duration)}),e.jsx("div",{className:"mono-label justify-self-end text-[var(--color-text-secondary)]",children:a.when})]});return e.jsxs(ge.div,{initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:{duration:.28,delay:g*.04,ease:[.16,1,.3,1]},className:ve("relative overflow-hidden rounded-[var(--radius-panel)] border transition-[background-color,border-color,transform] duration-[var(--duration-base)] ease-[var(--ease-out)] hover:-translate-y-[1px]",N),style:{borderColor:t?"var(--border-default)":"var(--border-dim)",background:t?"var(--color-accent-dim)":"linear-gradient(180deg, rgba(var(--ch-text-primary), 0.02), rgba(var(--ch-text-primary), 0.01))"},children:[t?e.jsx("div",{"aria-hidden":"true",className:"absolute inset-y-2 left-0 w-[2px] rounded-full",style:{background:"var(--color-accent)"}}):null,c&&!m?e.jsx(be,{to:c,onClick:()=>i?.(a.id),className:d,children:l}):e.jsx("button",{type:"button",onClick:()=>i?.(a.id),className:d,children:l})]})}const q="dashboard-shell rounded-[var(--radius-card)]",pe=[12,25,50,100];function hr(){const a=ye(),[t,m]=Ne(),i=t.get("q")??"",c=$.useDeferredValue(i),g=t.get("provider")??"",N=t.get("status"),s=N==="ok"||N==="error"?N:"",d=Number(t.get("periodHours")??"24"),l=Number(t.get("pageSize")??"12"),x=pe.includes(l)?l:12,u=Math.max(1,Number(t.get("page")??"1")||1),b=(u-1)*x,p=$.useMemo(()=>({limit:x,offset:b,q:c.trim()||void 0,provider:g||void 0,status:s||void 0,periodHours:he.some(r=>r.value===d)?d:24}),[c,x,b,d,g,s]),{data:o}=K({queryKey:["stats",p.periodHours],queryFn:()=>ke(p.periodHours??24)}),{data:I,isLoading:f}=K({queryKey:["traces",p],queryFn:()=>Se(p)}),{data:X}=K({queryKey:["insights"],queryFn:Ce,refetchInterval:6e4}),F=X?.insights??[],D=I?.traces??[],w=I?.total??0,U=Math.max(1,Math.ceil(w/x)),[n,j]=$.useState(null),[O,H]=$.useState("desc");function k(r){n===r?H(y=>y==="asc"?"desc":"asc"):(j(r),H("desc"))}const S=$.useMemo(()=>n?[...D].sort((r,y)=>{const A=r[n]??0,T=y[n]??0;return O==="asc"?A-T:T-A}):D,[D,n,O]),C=o?.byProvider[0],L=S[0],oe=[...new Set(o?.byProvider.map(r=>r.provider)??[])],v=o?.costOverTime.map(r=>({timestamp:r.timestamp,cost:r.cost}))??[],ne=o&&o.totalSpans>0?o.totalCost/o.totalSpans:0,Q=Math.round((o?.errorRate??0)*100),je=[{title:"Trace Volume",value:Y(o?.totalTraces??0),status:(o?.totalTraces??0)>0?"within":"unknown",range:`${o?.totalSpans??0} spans in window`,icon:e.jsx(Ie,{className:"h-4 w-4"})},{title:"Token Throughput",value:Y(o?.totalTokens??0),status:(o?.totalTokens??0)>0?"within":"unknown",range:"Token load across active filter window",icon:e.jsx(De,{className:"h-4 w-4"})},{title:"Spend Velocity",value:M(o?.totalCost??0),status:ne>0?"observe":"unknown",range:`${M(ne)} avg per call`,icon:e.jsx(E,{className:"h-4 w-4"})},{title:"Risk Surface",value:`${Q}%`,status:Q>=8?"exceed":Q>=3?"observe":"within",range:`${o?.errorCount??0} failing calls`,icon:e.jsx(me,{className:"h-4 w-4"})}],ie=i.length>0||g.length>0||s.length>0||p.periodHours!==24;function _(r,y=!0){m(A=>{const T=new URLSearchParams(A);for(const[le,Z]of Object.entries(r))Z===void 0||Z===""?T.delete(le):T.set(le,String(Z));return y&&T.delete("page"),T},{replace:!0})}return e.jsxs($e,{eyebrow:"Flight Deck",title:"Read the behavior of every model call like a live system.",description:"LLMTap should feel like a live operator console, not a half-finished devtool. This view keeps spend movement, provider pressure, queue state, and the latest traces readable in one sweep.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(we,{}),e.jsxs("div",{className:"mt-4 grid gap-3",children:[e.jsxs("div",{className:"deck-card deck-card--accent",children:[e.jsx("div",{className:"hud-label",children:"Dominant provider"}),e.jsxs("div",{className:"mt-2 flex items-center justify-between",children:[e.jsx("div",{className:"capitalize text-[var(--color-text-primary)]",style:{fontFamily:"var(--font-operator)",fontSize:"30px",fontWeight:700,lineHeight:"0.92",letterSpacing:"-0.04em"},children:C?.provider??"Awaiting traffic"}),e.jsx(Re,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:C?`${C.spanCount} calls, ${M(C.totalCost)} spend`:"No provider activity yet"})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Latest trace"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:L?.name??"No recent traces"}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:L?`${de(L.startTime)} / ${L.spanCount} spans`:"Start sending spans to populate the deck"})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsxs("strong",{children:[p.periodHours,"h"]})]}),e.jsxs("span",{className:"pill-item",children:["providers ",e.jsx("strong",{children:oe.length||0})]}),e.jsxs("span",{className:"pill-item",children:["traces ",e.jsx("strong",{children:w})]}),e.jsxs("span",{className:"pill-item",children:["status ",e.jsx("strong",{children:o?.errorCount?"watching":"stable"})]})]}),e.jsx(Le,{cards:je,className:"max-w-none px-0 sm:px-0 lg:px-0"}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.5fr)_minmax(320px,0.95fr)]",children:[e.jsxs("section",{className:`${q} p-5 sm:p-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:"Economic pulse"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Cost gradient"})]}),e.jsxs("div",{className:"status-chip",children:[e.jsx(He,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[p.periodHours,"h window"]})]})]}),v.length>0?e.jsxs("div",{className:"surface-strong overflow-hidden rounded-[var(--radius-card)] p-4",children:[e.jsx(Ue,{data:v,xDataKey:"timestamp",primaryDataKey:"cost"}),e.jsxs("div",{className:"mt-4 grid gap-3 sm:grid-cols-3",children:[e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Latest"}),e.jsx("div",{className:"mt-2 text-lg font-semibold text-[var(--color-text-primary)]",children:M(v.at(-1)?.cost??0)})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Peak"}),e.jsx("div",{className:"mt-2 text-lg font-semibold text-[var(--color-text-primary)]",children:M(Math.max(...v.map(r=>r.cost),0))})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Change"}),e.jsxs("div",{className:`mt-2 text-lg font-semibold ${(v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)>=0?"text-[var(--color-accent)]":"text-[var(--color-text-primary)]"}`,children:[(v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)>=0?"+":"-",M(Math.abs((v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)))]})]})]})]}):e.jsx(z,{title:"No cost movement yet",description:"This turns into a live spend curve as soon as the collector receives traced calls.",className:"min-h-[320px]"})]}),e.jsxs("section",{className:`${q} p-5 sm:p-6`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Provider pressure"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Allocation by provider"})]}),e.jsx("div",{className:"space-y-4",children:(o?.byProvider??[]).length>0?(o?.byProvider??[]).map(r=>{const y=(o?.totalCost??0)>0?r.totalCost/(o?.totalCost??1)*100:0;return e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx(ze,{provider:r.provider}),e.jsxs("div",{className:"text-[length:var(--text-caption)] text-[var(--color-text-secondary)]",children:[r.spanCount," calls / ",Y(r.totalTokens)," tokens"]})]}),e.jsxs("div",{className:"text-right",children:[e.jsx(fe,{value:r.totalCost,size:"sm"}),e.jsx("div",{className:"text-[length:var(--text-caption)] text-[var(--color-text-tertiary)]",children:Te(r.avgDuration)})]})]}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.84)]",children:e.jsx(ge.div,{className:"h-full w-full origin-left rounded-full bg-[linear-gradient(90deg,var(--color-accent-2),var(--color-accent))]",initial:{scaleX:0},animate:{scaleX:Math.max(y,4)/100},transition:{duration:.5,ease:"easeOut"}})})]},r.provider)}):e.jsx(z,{title:"No provider activity yet",description:"Allocation bands appear here once the collector receives instrumented traffic.",className:"min-h-[320px]"})})]})]}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.45fr)_minmax(320px,0.85fr)]",children:[e.jsxs("section",{className:`${q} p-4 sm:p-5`,children:[e.jsxs("div",{className:"surface-strong mb-4 rounded-[var(--radius-card)] 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:"page-section-title mt-1",children:"Trace dispatch queue"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"status-chip",children:[w," matches"]}),e.jsxs("button",{type:"button",onClick:()=>_({q:void 0,provider:void 0,status:void 0,periodHours:void 0}),disabled:!ie,className:"status-chip transition-all duration-[--duration-normal] hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(Ve,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]})]}),e.jsxs("div",{className:"mt-4 grid gap-3 xl:grid-cols-[minmax(0,1.7fr)_repeat(3,minmax(0,0.7fr))]",children:[e.jsx(Be,{value:i,onChange:r=>_({q:r||void 0}),placeholder:"Search traces, models, providers, errors"}),e.jsxs(G,{value:g||"__all__",onValueChange:r=>_({provider:r==="__all__"?void 0:r}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{placeholder:"All providers"})}),e.jsxs(B,{children:[e.jsx(P,{value:"__all__",children:"All providers"}),oe.map(r=>e.jsx(P,{value:r,children:r},r))]})]}),e.jsxs(G,{value:s||"__all__",onValueChange:r=>_({status:r==="__all__"?void 0:r}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{placeholder:"All states"})}),e.jsxs(B,{children:[e.jsx(P,{value:"__all__",children:"All states"}),e.jsx(P,{value:"ok",children:"Healthy only"}),e.jsx(P,{value:"error",children:"Errors only"})]})]}),e.jsxs(G,{value:String(p.periodHours??24),onValueChange:r=>_({periodHours:Number(r)===24?void 0:Number(r)}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{})}),e.jsx(B,{children:he.map(r=>e.jsx(P,{value:String(r.value),children:r.label},r.value))})]})]})]}),f?e.jsx(z,{title:"Loading trace queue",description:"The latest calls are being assembled into the dispatch surface.",className:"min-h-[280px]"}):S.length===0&&!ie?e.jsx(_e,{}):S.length===0?e.jsx(z,{title:"No traces match these filters",description:"Try adjusting the search term, provider filter, or time window.",className:"min-h-[280px]"}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs("div",{className:"grid grid-cols-[auto_auto_minmax(0,1.5fr)_minmax(0,0.8fr)_minmax(72px,0.5fr)_minmax(80px,0.7fr)_minmax(94px,0.6fr)_minmax(86px,0.6fr)_minmax(96px,0.7fr)] gap-3 px-4 py-2 text-[11px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:[e.jsx("span",{}),e.jsx("span",{children:"State"}),e.jsx("span",{children:"Trace"}),e.jsx("span",{children:"ID"}),e.jsx("button",{type:"button",onClick:()=>k("spanCount"),className:"justify-self-end",children:"Spans"}),e.jsx("button",{type:"button",onClick:()=>k("totalTokens"),className:"justify-self-end",children:"Tokens"}),e.jsx("button",{type:"button",onClick:()=>k("totalCost"),className:"justify-self-end",children:"Cost"}),e.jsx("span",{className:"justify-self-end",children:"Duration"}),e.jsx("button",{type:"button",onClick:()=>k("startTime"),className:"justify-self-end",children:"When"})]}),S.map((r,y)=>e.jsx(Je,{index:y,trace:{id:r.traceId,name:r.name,status:r.status==="ok"?"complete":"error",spans:r.spanCount,tokens:r.totalTokens,cost:r.totalCost,duration:r.totalDuration??0,when:de(r.startTime)},href:`/trace/${r.traceId}`,onClick:A=>a(`/trace/${A}`)},r.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-[length:var(--text-caption)] text-[var(--color-text-tertiary)]",children:w>0?`Showing ${b+1}-${Math.min(b+S.length,w)} of ${w}`:"Awaiting traces"}),e.jsxs(G,{value:String(x),onValueChange:r=>_({pageSize:Number(r)===12?void 0:Number(r)}),children:[e.jsx(R,{className:"w-auto rounded-xl px-2 py-1.5 text-[length:var(--text-caption)]",children:e.jsx(W,{})}),e.jsx(B,{children:pe.map(r=>e.jsxs(P,{value:String(r),children:[r," / page"]},r))})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(ce,{variant:"outline",size:"sm",onClick:()=>_({page:u>2?u-1:void 0},!1),disabled:u<=1,children:[e.jsx(qe,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Previous"})]}),e.jsxs(ce,{variant:"outline",size:"sm",onClick:()=>_({page:u+1},!1),disabled:u>=U,children:[e.jsx("span",{children:"Next"}),e.jsx(Fe,{className:"h-3.5 w-3.5"})]})]})]})]})]}),e.jsxs("section",{className:`${q} p-5`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Intelligence layer"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Insights"})]}),e.jsx("div",{className:"space-y-4",children:F.length>0?F.map(r=>e.jsxs("div",{className:`rounded-2xl border p-4 ${r.severity==="critical"?"border-[var(--color-text-primary)]/18 bg-[var(--color-text-primary)]/8":r.severity==="warning"?"border-[var(--color-accent-2)]/18 bg-[var(--color-accent-2)]/8":"border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)]"}`,children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[r.type==="cost_anomaly"&&e.jsx(xe,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),r.type==="error_pattern"&&e.jsx(me,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),r.type==="model_recommendation"&&e.jsx(Oe,{className:"h-4 w-4 text-[var(--color-accent)]"}),r.type==="token_waste"&&e.jsx(E,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),r.title]}),r.metric&&e.jsx("span",{className:"shrink-0 rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 font-mono text-[length:var(--text-hud)] text-[var(--color-text-tertiary)]",children:r.metric})]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:r.description})]},r.id)):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(Ge,{className:"h-4 w-4 text-[var(--color-accent)]"}),"Health read"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:(o?.errorRate??0)>.05?"Error rate is elevated. Start with the most recent failed trace and inspect provider or tool payloads.":"Error pressure is currently low. Use this window to compare provider cost drift and latency patterns."})]}),e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(E,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),"Spend insight"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:C?`${C.provider} currently leads cost share. If that is unexpected, inspect the filtered queue for bursty workflows.`:"Provider concentration will appear here once traces land."})]}),e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(xe,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),"Queue focus"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:L?`Latest traffic is "${L.name}". Open it to inspect hierarchy, timing, and payload shape.`:"No active traces yet. Generate a request through an instrumented client to validate the pipeline."})]})]})})]})]}),e.jsxs("section",{className:`${q} p-5 sm:p-6`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Operator Briefing"}),e.jsx("h2",{className:"page-section-title mt-1",children:"What this surface is telling you"})]}),e.jsxs(We,{defaultValue:["queue-health"],multiple:!0,children:[e.jsxs(J,{value:"queue-health",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What should I check first when I open LLMTap?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Start with the economic pulse, dominant provider, and latest trace. That combination tells you whether traffic is flowing, whether one provider is dominating spend, and which trace should be inspected first."})]}),e.jsxs(J,{value:"traces-vs-economics",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"When do I move from Overview to Traces or Economics?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Use Traces when something looks operationally wrong and you need the exact request timeline. Use Economics when behavior is healthy but budget concentration or model mix looks suspicious."})]}),e.jsxs(J,{value:"healthy-window",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What does a healthy window look like?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Healthy windows show steady cost movement, low risk surface, no sudden provider concentration shifts, and a queue of recent traces that stays readable instead of spiking with failures."})]})]})]})]})}export{hr as default};

package/dist/dashboard/assets/DataTable-p1PD-dJj.js

@@ -0,0 +1 @@
+import{r as i,j as e,e as H,f as x,h as M,i as I,k as z}from"./query-DVWnIZNd.js";import{S as p,a as v,b as u,c as h,d as f}from"./select-BJEJvQo4.js";import{c as n}from"./index-DG2eF3M2.js";import{E as A}from"./EmptyState-xDl-M9Rz.js";import{a4 as E,a5 as G,a6 as L,u as F,a7 as _,a8 as B,Q as U,a9 as O}from"./icons-BOLUIAKd.js";const j=i.forwardRef(({className:o,...t},s)=>e.jsx("div",{className:"relative w-full overflow-x-auto",children:e.jsx("table",{ref:s,className:n("w-full caption-bottom text-sm",o),...t})}));j.displayName="Table";const y=i.forwardRef(({className:o,...t},s)=>e.jsx("thead",{ref:s,className:n("[&_tr]:border-b [&_tr]:border-[var(--border-dim)]",o),...t}));y.displayName="TableHeader";const N=i.forwardRef(({className:o,...t},s)=>e.jsx("tbody",{ref:s,className:n("[&_tr:last-child]:border-0",o),...t}));N.displayName="TableBody";const Q=i.forwardRef(({className:o,...t},s)=>e.jsx("tfoot",{ref:s,className:n("border-t border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.68)] font-medium [&>tr]:last:border-b-0",o),...t}));Q.displayName="TableFooter";const g=i.forwardRef(({className:o,...t},s)=>e.jsx("tr",{ref:s,className:n("border-b border-[rgba(var(--ch-text-primary),0.06)] transition-colors hover:bg-[rgba(var(--ch-bg-surface),0.54)] data-[state=selected]:bg-[rgba(var(--ch-accent),0.08)]",o),...t}));g.displayName="TableRow";const w=i.forwardRef(({className:o,...t},s)=>e.jsx("th",{ref:s,className:n("h-10 px-3 text-left align-middle text-xs font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",o),...t}));w.displayName="TableHead";const C=i.forwardRef(({className:o,...t},s)=>e.jsx("td",{ref:s,className:n("px-3 py-3 align-middle text-[var(--color-text-secondary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",o),...t}));C.displayName="TableCell";const q=i.forwardRef(({className:o,...t},s)=>e.jsx("caption",{ref:s,className:n("mt-4 text-sm text-[var(--color-text-tertiary)]",o),...t}));q.displayName="TableCaption";function Z({columns:o,data:t,sorting:s,onSortingChange:S,emptyState:T,rowClassName:b,onRowClick:m}){const[R,P]=i.useState({}),[D,k]=i.useState({pageIndex:0,pageSize:10}),l=H({data:t,columns:o,state:{sorting:s??[],columnVisibility:R,pagination:D},onSortingChange:S,onColumnVisibilityChange:P,onPaginationChange:k,getCoreRowModel:z(),getSortedRowModel:I(),getPaginationRowModel:M(),manualPagination:!1});return t.length===0?T??e.jsx(A,{title:"No rows available",description:"This surface will populate when LLMTap receives matching data for the current view."}):e.jsxs("div",{className:"dashboard-shell relative overflow-hidden rounded-[calc(var(--radius-panel)+8px)]",children:[e.jsx("div",{className:"pointer-events-none absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,rgba(var(--ch-accent),0.28),transparent)]"}),e.jsx("div",{className:"pointer-events-none absolute -left-20 top-0 h-40 w-40 rounded-full bg-[var(--color-accent)]/8 blur-3xl"}),e.jsx("div",{className:"pointer-events-none absolute -right-16 bottom-0 h-36 w-36 rounded-full bg-[var(--color-accent-2)]/8 blur-3xl"}),e.jsxs("div",{className:"relative z-10 flex flex-wrap items-center justify-between gap-3 border-b border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.025)] px-4 py-3.5 sm:px-5",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Operator ledger"}),e.jsxs("div",{className:"mt-1 font-mono text-xs text-[var(--color-text-secondary)]",children:[t.length," visible rows"]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"badge hidden md:inline-flex",children:"dense mode"}),e.jsx(E,{className:"h-4 w-4 text-[var(--color-text-tertiary)]"}),e.jsxs(p,{value:l.getAllColumns().filter(r=>r.getIsVisible()).length.toString(),onValueChange:r=>{const a=Number(r);l.getAllColumns().filter(d=>d.getCanHide()&&typeof d.accessorFn<"u").forEach((d,V)=>{d.toggleVisibility(V<a)})},children:[e.jsx(v,{className:"h-8 w-42.5 rounded-[var(--radius-panel)] border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-xs text-[var(--color-text-secondary)]",children:e.jsx(u,{placeholder:"Visible columns"})}),e.jsx(h,{children:[2,3,4,5,6,7,8].map(r=>e.jsxs(f,{value:r.toString(),children:["Show ",r," columns"]},r))})]})]})]}),e.jsx("div",{className:"relative max-h-[62vh] overflow-auto",children:e.jsxs(j,{className:"min-w-195 w-full table-auto text-[13px]",children:[e.jsx(y,{className:"sticky top-0 z-20 bg-[rgba(var(--ch-bg-base),0.96)] backdrop-blur-xl",children:l.getHeaderGroups().map(r=>e.jsx(g,{className:"border-b border-[var(--border-dim)] bg-[linear-gradient(90deg,rgba(var(--ch-bg-panel),0.8),rgba(var(--ch-bg-base),0.98),rgba(var(--ch-bg-panel),0.8))] hover:bg-[linear-gradient(90deg,rgba(var(--ch-bg-panel),0.8),rgba(var(--ch-bg-base),0.98),rgba(var(--ch-bg-panel),0.8))]",children:r.headers.map(a=>{const c=a.column.getCanSort(),d=a.column.getIsSorted();return e.jsx(w,{className:n("h-12 whitespace-nowrap border-b border-[var(--border-dim)] px-4 text-[10px] font-semibold tracking-[0.18em] text-[var(--color-text-tertiary)]",a.column.columnDef.meta&&typeof a.column.columnDef.meta=="object"&&"className"in a.column.columnDef.meta?String(a.column.columnDef.meta.className):void 0),children:a.isPlaceholder?null:c?e.jsxs("button",{type:"button",onClick:a.column.getToggleSortingHandler(),className:"inline-flex items-center gap-1.5 transition-colors hover:text-[var(--color-text-primary)]",children:[x(a.column.columnDef.header,a.getContext()),d==="asc"?e.jsx(G,{className:"h-3 w-3"}):d==="desc"?e.jsx(L,{className:"h-3 w-3"}):e.jsx(F,{className:"h-3 w-3 opacity-35"})]}):x(a.column.columnDef.header,a.getContext())},a.id)})},r.id))}),e.jsx(N,{children:l.getRowModel().rows.map(r=>e.jsx(g,{onClick:m?()=>m(r):void 0,className:n("group border-b border-[var(--border-dim)] bg-transparent transition-colors odd:bg-[rgba(var(--ch-text-primary),0.012)] hover:bg-[rgba(var(--ch-accent),0.035)]",m?"cursor-pointer":void 0,typeof b=="function"?b(r):b),children:r.getVisibleCells().map((a,c)=>e.jsx(C,{className:n("border-b border-[var(--border-dim)] px-4 py-3.5 align-middle transition-colors duration-200 group-hover:border-[var(--color-accent)]/10",c===0?"pl-5":void 0,c===r.getVisibleCells().length-1?"pr-5":void 0,a.column.columnDef.meta&&typeof a.column.columnDef.meta=="object"&&"cellClassName"in a.column.columnDef.meta?String(a.column.columnDef.meta.cellClassName):void 0),children:x(a.column.columnDef.cell,a.getContext())},a.id))},r.id))})]})}),e.jsxs("div",{className:"relative z-10 flex items-center justify-between gap-3 border-t border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.02)] px-4 py-3 sm:px-5",children:[e.jsxs("div",{className:"hidden items-center gap-2 text-xs text-[var(--color-text-tertiary)] md:flex",children:[e.jsx("span",{children:"Rows per page"}),e.jsxs(p,{value:String(l.getState().pagination.pageSize),onValueChange:r=>l.setPageSize(Number(r)),children:[e.jsx(v,{className:"h-8 w-20 rounded-[var(--radius-panel)] border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-xs",children:e.jsx(u,{})}),e.jsx(h,{side:"top",children:[10,20,30,40,50].map(r=>e.jsx(f,{value:String(r),children:r},r))})]})]}),e.jsxs("div",{className:"text-xs font-medium text-[var(--color-text-secondary)]",children:["Page ",l.getState().pagination.pageIndex+1," of ",l.getPageCount()||1]}),e.jsxs("div",{className:"ml-auto flex items-center gap-1.5",children:[e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>l.setPageIndex(0),disabled:!l.getCanPreviousPage(),"aria-label":"Go to first page",children:e.jsx(_,{className:"h-4 w-4"})}),e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>l.previousPage(),disabled:!l.getCanPreviousPage(),"aria-label":"Go to previous page",children:e.jsx(B,{className:"h-4 w-4"})}),e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>l.nextPage(),disabled:!l.getCanNextPage(),"aria-label":"Go to next page",children:e.jsx(U,{className:"h-4 w-4"})}),e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>l.setPageIndex(l.getPageCount()-1),disabled:!l.getCanNextPage(),"aria-label":"Go to last page",children:e.jsx(O,{className:"h-4 w-4"})})]})]})]})}export{Z as D};

package/dist/dashboard/assets/EmptyState-xDl-M9Rz.js

@@ -0,0 +1 @@
+import{j as r}from"./query-DVWnIZNd.js";import{B as n,c as l}from"./index-DG2eF3M2.js";function c({label:t="AWAITING DATA",title:o,description:a,action:e,className:i}){return r.jsxs("div",{className:l("flex min-h-[220px] flex-col items-center justify-center rounded-[var(--radius-panel)] border border-dashed px-6 py-10 text-center",i),style:{borderColor:"var(--border-dim)",animation:"empty-state-border 3s var(--ease-out) infinite alternate",background:"linear-gradient(180deg, rgba(var(--ch-text-primary), 0.015), rgba(var(--ch-accent), 0.02))"},children:[r.jsx("div",{className:"mb-4 flex h-11 w-11 items-center justify-center rounded-full border border-[var(--border-default)] bg-[var(--color-accent-dim)]",children:r.jsxs("svg",{width:"22",height:"22",viewBox:"0 0 22 22","aria-hidden":"true",children:[r.jsx("circle",{cx:"11",cy:"11",r:"8",fill:"none",stroke:"var(--color-accent)",strokeOpacity:"0.45",strokeWidth:"1.5",style:{animation:"breathe 2.8s var(--ease-out) infinite"}}),r.jsx("circle",{cx:"11",cy:"11",r:"2.5",fill:"var(--color-accent)",style:{filter:"drop-shadow(var(--glow-dot))"}})]})}),t?r.jsx("div",{className:"mono-label",children:t}):null,r.jsx("div",{className:"mt-2 text-[16px] font-medium text-[var(--color-text-primary)]",children:o}),a?r.jsx("div",{className:"mt-2 max-w-[34rem] text-[13px] leading-6 text-[var(--color-text-secondary)]",children:a}):null,e?r.jsx(n,{type:"button",variant:"outline",onClick:e.onClick,className:"mt-5 rounded-[var(--radius-panel)] border-[var(--border-default)] bg-transparent text-[var(--color-text-primary)] transition-colors duration-[var(--duration-base)] ease-[var(--ease-out)] hover:border-[var(--border-bright)] hover:bg-[var(--color-accent-dim)]",children:e.label}):null]})}export{c as E};

package/dist/dashboard/assets/GettingStartedPanel-Cn46fQ1w.js

@@ -0,0 +1,18 @@
+import{r as m,j as e}from"./query-DVWnIZNd.js";import{ag as p,af as v,B as b,H as u,z as h,U as g}from"./icons-BOLUIAKd.js";const x={openai:{label:"OpenAI",wrapCode:`import OpenAI from "openai";
+import { wrap } from "@llmtap/sdk";
+
+const client = wrap(new OpenAI());`,requestCode:`await client.chat.completions.create({
+  model: "gpt-4o-mini",
+  messages: [{ role: "user", content: "Hello!" }],
+});`},anthropic:{label:"Anthropic",wrapCode:`import Anthropic from "@anthropic-ai/sdk";
+import { wrap } from "@llmtap/sdk";
+
+const client = wrap(new Anthropic());`,requestCode:`await client.messages.create({
+  model: "claude-sonnet-4-20250514",
+  max_tokens: 256,
+  messages: [{ role: "user", content: "Hello!" }],
+});`},gemini:{label:"Gemini",wrapCode:`import { GoogleGenerativeAI } from "@google/generative-ai";
+import { wrap } from "@llmtap/sdk";
+
+const genAI = wrap(new GoogleGenerativeAI(process.env.GOOGLE_API_KEY!));
+const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash" });`,requestCode:'await model.generateContent("Hello!");'}};function n({label:r,text:s,copied:c,onCopy:a}){return e.jsx("button",{type:"button",onClick:()=>a(r,s),className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] p-1.5 text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",title:`Copy ${r}`,children:c===r?e.jsx(h,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}):e.jsx(g,{className:"h-3.5 w-3.5"})})}function y({compact:r=!1}){const[s,c]=m.useState("openai"),[a,i]=m.useState(null),o=x[s];function l(t,d){navigator.clipboard.writeText(d).catch(()=>{}),i(t),window.setTimeout(()=>i(null),1800)}return e.jsxs("div",{className:"surface-strong rounded-[var(--radius-card)] p-5 sm:p-6",children:[e.jsxs("div",{className:"max-w-3xl",children:[e.jsx("div",{className:"hud-label",children:"First successful trace"}),e.jsx("h2",{className:"mt-2 text-2xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"LLMTap is already running locally. The remaining change happens in your app."}),e.jsxs("p",{className:"mt-3 text-sm leading-6 text-[var(--color-text-secondary)]",children:["Running ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-surface),0.82)] px-1.5 py-0.5 font-mono text-[var(--color-text-primary)]",children:"npx llmtap"})," starts the collector and opens this dashboard automatically. You do not edit LLMTap itself from here. You edit the codebase that is already making LLM calls."]})]}),e.jsxs("div",{className:"mt-5 rounded-[var(--radius-panel)] border border-[var(--color-accent-2)]/18 bg-[var(--color-accent-2)]/10 p-4 text-sm text-[var(--color-text-primary)]",children:["Put the wrap code in the same file where your app currently does"," ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-base),0.35)] px-1.5 py-0.5 font-mono text-[var(--color-accent)]",children:"new OpenAI()"}),","," ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-base),0.35)] px-1.5 py-0.5 font-mono text-[var(--color-accent)]",children:"new Anthropic()"}),", or"," ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-base),0.35)] px-1.5 py-0.5 font-mono text-[var(--color-accent)]",children:"new GoogleGenerativeAI()"}),"."]}),e.jsx("div",{className:"mt-5 flex flex-wrap gap-2",children:Object.entries(x).map(([t,d])=>e.jsx("button",{type:"button",onClick:()=>c(t),className:`rounded-full border px-4 py-1.5 text-sm font-semibold transition-colors ${s===t?"border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/12 text-[var(--color-accent)]":"border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] text-[var(--color-text-secondary)] hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]"}`,children:d.label},t))}),e.jsxs("div",{className:`mt-5 grid gap-5 ${r?"xl:grid-cols-3":"lg:grid-cols-3"}`,children:[e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-[var(--color-accent-2)]/15 text-xs font-bold text-[var(--color-accent)]",children:"1"}),e.jsx("div",{className:"text-sm font-semibold text-[var(--color-text-primary)]",children:"Collector is already up"})]}),e.jsx("p",{className:"mt-3 text-sm leading-6 text-[var(--color-text-secondary)]",children:"This command started the local collector and opened the dashboard in your browser."}),e.jsxs("div",{className:"mt-3 flex items-start justify-between gap-3 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.4)] p-3",children:[e.jsx("pre",{className:"overflow-x-auto text-sm leading-relaxed text-[var(--color-accent)]",children:"npx llmtap"}),e.jsx(n,{label:"start",text:"npx llmtap",copied:a,onCopy:l})]})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-[var(--color-accent-2)]/15 text-xs font-bold text-[var(--color-accent)]",children:"2"}),e.jsx("div",{className:"text-sm font-semibold text-[var(--color-text-primary)]",children:"Wrap your existing client"})]}),e.jsx("p",{className:"mt-3 text-sm leading-6 text-[var(--color-text-secondary)]",children:"Change the file in your app where the provider client is created. After wrapping, you keep using the SDK the same way."}),e.jsxs("div",{className:"mt-3 flex items-start justify-between gap-3 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.4)] p-3",children:[e.jsx("pre",{className:"overflow-x-auto text-sm leading-relaxed text-[var(--color-accent)]",children:o.wrapCode}),e.jsx(n,{label:"wrap",text:o.wrapCode,copied:a,onCopy:l})]})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-[var(--color-accent-2)]/15 text-xs font-bold text-[var(--color-accent)]",children:"3"}),e.jsx("div",{className:"text-sm font-semibold text-[var(--color-text-primary)]",children:"Run one real request"})]}),e.jsx("p",{className:"mt-3 text-sm leading-6 text-[var(--color-text-secondary)]",children:"Trigger any normal model call in that same app. LLMTap captures it automatically and the first trace should appear here in a few seconds."}),e.jsxs("div",{className:"mt-3 flex items-start justify-between gap-3 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.4)] p-3",children:[e.jsx("pre",{className:"overflow-x-auto text-sm leading-relaxed text-[var(--color-accent)]",children:o.requestCode}),e.jsx(n,{label:"request",text:o.requestCode,copied:a,onCopy:l})]})]})]}),e.jsxs("div",{className:"mt-5 grid gap-5 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]",children:[e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-5",children:[e.jsxs("div",{className:"mb-4 flex items-center gap-2 text-sm font-semibold text-[var(--color-text-primary)]",children:[e.jsx(p,{className:"h-4 w-4 text-[var(--color-accent)]"}),"Where this code usually goes"]}),e.jsxs("div",{className:"grid gap-3 text-sm text-[var(--color-text-secondary)] sm:grid-cols-2",children:[e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:"Next.js route or server action"}),e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:"Express / Fastify backend file"}),e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:"Agent runner or worker script"}),e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:"CLI script already calling the provider"})]})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-5",children:[e.jsxs("div",{className:"mb-4 flex items-center gap-2 text-sm font-semibold text-[var(--color-text-primary)]",children:[e.jsx(v,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),"How to know it worked"]}),e.jsxs("div",{className:"space-y-3 text-sm text-[var(--color-text-secondary)]",children:[e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:"A new trace appears in the Overview or Traces page."}),e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:"Token, cost, and latency numbers start changing."}),e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:["If nothing appears, run ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-surface),0.82)] px-1.5 py-0.5 font-mono text-[var(--color-text-primary)]",children:"npx llmtap doctor"}),"."]})]})]})]}),e.jsxs("div",{className:"mt-5 flex flex-wrap gap-3 text-sm text-[var(--color-text-secondary)]",children:[e.jsxs("span",{className:"status-chip border-[var(--color-accent-2)]/16 bg-[var(--color-accent-2)]/12 text-[var(--color-accent)]",children:[e.jsx(b,{className:"h-3.5 w-3.5"}),"Collector + dashboard start automatically"]}),e.jsxs("span",{className:"status-chip border-[var(--color-accent)]/16 bg-[var(--color-accent)]/10 text-[var(--color-accent)]",children:[e.jsx(u,{className:"h-3.5 w-3.5"}),"One real request is enough to validate the setup"]})]})]})}export{y as G};

package/dist/dashboard/assets/Models-BpMhGVp5.js

@@ -0,0 +1 @@
+import{r as v,d as y,j as e}from"./query-DVWnIZNd.js";import{b as N,f as b}from"./index-DG2eF3M2.js";import{D as f}from"./DataTable-p1PD-dJj.js";import{b as c,f as d,a as m,P as C}from"./format-zoXqpaOb.js";import{E as x}from"./EmptyState-xDl-M9Rz.js";import{N as k}from"./number-ticker-CjofSQ3s.js";import{p as u}from"./provider-colors-CTiHNYHs.js";import{c as i}from"./motion-CSeNjKbZ.js";import{y as w,x as D,d as M}from"./icons-BOLUIAKd.js";import"./ui-BFiKdTjl.js";import"./select-BJEJvQo4.js";const r="dashboard-shell rounded-[var(--radius-card)]";function g({rows:t,valueFormatter:o,barClassName:l}){const n=Math.max(...t.map(s=>s.value),1);return e.jsx("div",{className:"space-y-4",children:t.map(s=>e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.78),rgba(var(--ch-bg-base),0.94))] p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsx("span",{className:"truncate text-sm font-medium text-[var(--color-text-primary)]",children:s.name}),e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:o(s.value)})]}),e.jsx("div",{className:"mt-3 h-2.5 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.82)]",children:e.jsx(i.div,{className:`h-full rounded-full ${l}`,initial:{width:0},animate:{width:`${Math.max(s.value/n*100,6)}%`},transition:{duration:.45,ease:"easeOut"}})})]},s.name))})}function I(){const[t,o]=v.useState([{id:"totalCost",desc:!0}]),{data:l,isLoading:n}=y({queryKey:["stats",168],queryFn:()=>b(168)}),s=l?.byModel??[],h=s.map(a=>({name:a.model.length>20?`${a.model.slice(0,18)}...`:a.model,value:a.avgDuration})).filter(a=>a.value>0).slice(0,8),p=s.map(a=>({name:a.model.length>20?`${a.model.slice(0,18)}...`:a.model,value:a.totalTokens})).filter(a=>a.value>0).slice(0,8),j=v.useMemo(()=>[{accessorKey:"model",header:"Model",cell:({row:a})=>e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:a.original.model}),e.jsxs("div",{className:"mt-1 text-xs text-[var(--color-text-secondary)]",children:[a.original.avgDuration?c(a.original.avgDuration):"No latency yet"," average latency"]})]})},{accessorKey:"provider",header:"Provider",cell:({row:a})=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"h-2.5 w-2.5 rounded-full",style:{backgroundColor:u[a.original.provider]??"var(--color-accent)",boxShadow:`0 0 10px ${u[a.original.provider]??"var(--color-accent)"}`}}),e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-secondary)]",children:a.original.provider})]})},{accessorKey:"spanCount",header:"Calls",cell:({row:a})=>e.jsx("span",{className:"inline-flex items-center justify-center rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-0.5 font-mono text-xs text-[var(--color-text-secondary)]",children:a.original.spanCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalTokens",header:"Tokens",cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:d(a.original.totalTokens)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalCost",header:"Cost",cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:m(a.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"avgDuration",header:"Avg Latency",cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:a.original.avgDuration?c(a.original.avgDuration):"-"}),meta:{className:"text-right",cellClassName:"text-right"}},{id:"costPerCall",header:"Cost/Call",accessorFn:a=>a.spanCount>0?a.totalCost/a.spanCount:0,cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:a.original.spanCount>0?m(a.original.totalCost/a.original.spanCount):"-"}),meta:{className:"text-right",cellClassName:"text-right"}}],[]);return n?e.jsxs("div",{className:"mx-auto max-w-[1760px] space-y-8",children:[e.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),e.jsx("div",{className:"skeleton-panel h-80 rounded-[24px]"})]}):e.jsxs(C,{eyebrow:"Model Intelligence",title:"Every model. Every metric. One surface.",description:"Compare cost, token volume, latency, and call frequency across all models in your rotation. Identify the models consuming the most budget and the ones delivering the best performance.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(N,{}),e.jsxs("div",{className:"mt-5 space-y-4",children:[e.jsxs("div",{className:"deck-card deck-card--accent",children:[e.jsx("div",{className:"hud-label",children:"Models active"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:e.jsx(k,{value:s.length})}),e.jsxs("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:["Across ",new Set(s.map(a=>a.provider)).size," providers"]})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Highest cost model"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:s[0]?.model??"No data"}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:s[0]?m(s[0].totalCost):"-"})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsx("strong",{children:"168h"})]}),e.jsxs("span",{className:"pill-item",children:["models ",e.jsx("strong",{children:s.length})]}),e.jsxs("span",{className:"pill-item",children:["providers ",e.jsx("strong",{children:new Set(s.map(a=>a.provider)).size})]}),e.jsxs("span",{className:"pill-item",children:["tokens ",e.jsx("strong",{children:d(l?.totalTokens??0)})]})]}),s.length>0?e.jsxs(e.Fragment,{children:[e.jsxs(i.div,{className:`${r} overflow-hidden p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{duration:.35},children:[e.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Model roster"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Performance by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(w,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[s.length," models"]})]})]}),e.jsx(f,{columns:j,data:s,sorting:t,onSortingChange:o})]}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-2",children:[e.jsxs(i.div,{className:`${r} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.1,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Latency profile"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Average latency by model"})]}),e.jsx(D,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),h.length>0?e.jsx(g,{rows:h,valueFormatter:c,barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent-2),0.95),rgba(var(--ch-accent),0.78))]"}):e.jsx(x,{title:"No latency data available yet",description:"Latency lanes appear once calls have enough timing data to compare across models.",className:"h-[280px]"})]}),e.jsxs(i.div,{className:`${r} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.15,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Token distribution"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Token volume by model"})]}),e.jsx(M,{className:"h-4 w-4 text-[var(--color-accent-2)]"})]}),p.length>0?e.jsx(g,{rows:p,valueFormatter:d,barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent),0.95),rgba(var(--ch-accent-2),0.78))]"}):e.jsx(x,{title:"No token distribution data available yet",description:"Token lanes appear once captured model traffic reaches the collector.",className:"h-[280px]"})]})]})]}):e.jsx("div",{className:`${r} p-16`,children:e.jsx(x,{title:"No models tracked yet",description:"Start sending traced API calls and model metrics will populate automatically."})})]})}export{I as default};

package/dist/dashboard/assets/ProviderBadge-Cs31007s.js

@@ -0,0 +1 @@
+import{j as t}from"./query-DVWnIZNd.js";import{c}from"./index-DG2eF3M2.js";function s({provider:r,active:o=!0,size:a="md",className:e}){return t.jsx("span",{className:c("badge capitalize transition-[border-color,background-color,color,text-shadow] duration-[var(--duration-base)] ease-[var(--ease-out)] hover:border-[var(--border-default)]",a==="sm"?"px-2.5 py-[2px] text-[10px]":"px-3 py-[3px] text-[11px]",e),style:o?{background:"var(--color-accent-dim)",borderColor:"var(--border-default)",color:"var(--color-accent)",textShadow:"0 0 10px rgba(var(--ch-accent), 0.18)"}:{background:"transparent",borderColor:"var(--border-invisible)",color:"var(--color-text-tertiary)"},children:r})}export{s as P};

package/dist/dashboard/assets/Sessions-CiKyTRlP.js

@@ -0,0 +1,3 @@
+import{r as m,d as v,j as s}from"./query-DVWnIZNd.js";import{L as g,b as N,s as j}from"./index-DG2eF3M2.js";import{D as f}from"./DataTable-p1PD-dJj.js";import{c as o,f as y,a as l,P as b}from"./format-zoXqpaOb.js";import{E as C}from"./EmptyState-xDl-M9Rz.js";import{N as S}from"./number-ticker-CjofSQ3s.js";import{M as k,T as w,a3 as T}from"./icons-BOLUIAKd.js";import{c as K}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";import"./select-BJEJvQo4.js";const d="dashboard-shell rounded-[var(--radius-card)]";function R(){const[x,h]=m.useState([{id:"lastSeen",desc:!0}]),{data:i,isLoading:p}=v({queryKey:["sessions"],queryFn:()=>j(168)}),t=i?.sessions??[],a=i?.total??0,n=t.reduce((e,r)=>e+r.totalCost,0),c=t.reduce((e,r)=>e+r.traceCount,0),u=m.useMemo(()=>[{accessorKey:"sessionId",header:"Session ID",cell:({row:e})=>s.jsxs(g,{to:`/traces?q=${encodeURIComponent(e.original.sessionId)}`,className:"group inline-flex min-w-0 items-center gap-3",children:[s.jsx("span",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] text-[var(--color-accent)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-accent)]",children:s.jsx(k,{className:"h-4 w-4"})}),s.jsxs("span",{className:"min-w-0",children:[s.jsx("span",{className:"block truncate font-mono text-sm font-semibold text-[var(--color-text-primary)] transition-colors hover:text-[var(--color-accent)]",children:e.original.sessionId.length>28?`${e.original.sessionId.slice(0,26)}...`:e.original.sessionId}),s.jsxs("span",{className:"mt-1 block text-xs text-[var(--color-text-secondary)]",children:["Last active ",o(e.original.lastSeen)]})]})]})},{accessorKey:"traceCount",header:"Traces",cell:({row:e})=>s.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:e.original.traceCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"spanCount",header:"Spans",cell:({row:e})=>s.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:e.original.spanCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalTokens",header:"Tokens",cell:({row:e})=>s.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:y(e.original.totalTokens)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalCost",header:"Cost",cell:({row:e})=>s.jsx("span",{className:"font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:l(e.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"errorCount",header:"Errors",cell:({row:e})=>e.original.errorCount>0?s.jsxs("span",{className:"inline-flex items-center gap-1 rounded-full border border-[var(--color-text-primary)]/20 bg-[var(--color-text-primary)]/10 px-2 py-0.5 text-xs font-bold text-[var(--color-text-primary)]",children:[s.jsx(w,{className:"h-3 w-3"}),e.original.errorCount]}):s.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:"0"}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"firstSeen",header:"First Seen",cell:({row:e})=>s.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:o(e.original.firstSeen)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"lastSeen",header:"Last Active",cell:({row:e})=>s.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:o(e.original.lastSeen)}),meta:{className:"text-right",cellClassName:"text-right"}}],[]);return p?s.jsxs("div",{className:"mx-auto max-w-[1760px] space-y-8",children:[s.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),s.jsx("div",{className:"skeleton-panel h-80 rounded-[24px]"})]}):s.jsxs(b,{eyebrow:"Session Fabric",title:"Multi-turn conversations, grouped and measured.",description:"Sessions collect related traces into logical units. Track total cost and token volume across entire user conversations, multi-step agent runs, or workflow pipelines.",aside:s.jsxs("div",{className:"insight-panel",children:[s.jsx(N,{}),s.jsxs("div",{className:"mt-5 space-y-4",children:[s.jsxs("div",{className:"deck-card deck-card--accent",children:[s.jsx("div",{className:"hud-label",children:"Active sessions"}),s.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:s.jsx(S,{value:a})}),s.jsxs("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:[c," traces across all sessions"]})]}),s.jsxs("div",{className:"deck-card",children:[s.jsx("div",{className:"hud-label",children:"Session spend"}),s.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:l(n)}),s.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:"Combined cost across visible sessions"})]})]})]}),children:[s.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[s.jsxs("span",{className:"pill-item",children:["window ",s.jsx("strong",{children:"168h"})]}),s.jsxs("span",{className:"pill-item",children:["sessions ",s.jsx("strong",{children:a})]}),s.jsxs("span",{className:"pill-item",children:["traces ",s.jsx("strong",{children:c})]}),s.jsxs("span",{className:"pill-item",children:["spend ",s.jsx("strong",{children:l(n)})]})]}),t.length>0?s.jsxs(K.div,{className:`${d} overflow-hidden p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{duration:.35},children:[s.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3 px-1",children:[s.jsxs("div",{children:[s.jsx("div",{className:"hud-label",children:"Session registry"}),s.jsx("h2",{className:"page-section-title mt-1",children:"Tracked sessions"})]}),s.jsxs("span",{className:"status-chip",children:[s.jsx(T,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),s.jsxs("span",{children:[a," sessions"]})]})]}),s.jsx(f,{columns:u,data:t,sorting:x,onSortingChange:h})]}):s.jsx("div",{className:`${d} p-16`,children:s.jsxs("div",{className:"space-y-6",children:[s.jsx(C,{title:"No sessions tracked yet",description:"Sessions appear when you pass a `sessionId` to the SDK. This groups related traces into logical conversations or workflows."}),s.jsx("pre",{className:"mx-auto mt-5 max-w-lg rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] p-5 text-left font-mono text-sm text-[var(--color-text-secondary)]",children:`import { init } from "@llmtap/sdk";
+
+init({ sessionId: "user-session-123" });`})]})})]})}export{R as default};

package/dist/dashboard/assets/Settings-7wRfCPnB.js

@@ -0,0 +1,6 @@
+import{r as o,j as e,u as Ce,d as Se}from"./query-DVWnIZNd.js";import{c as p,v as oe,t as c,w as ke,x as Te,b as Pe,y as De,z as Re,A as Oe,C as Ae}from"./index-DG2eF3M2.js";import{G as Me}from"./GettingStartedPanel-Cn46fQ1w.js";import{A as Le,a as g,b as y,c as f}from"./accordion-CC_sxDZ8.js";import{P as Ee,c as ae}from"./format-zoXqpaOb.js";import{S as $e,a as Fe,b as Ie,c as Ue,d as b}from"./select-BJEJvQo4.js";import{j as Be,k as ze,l as le,m as ne,n as ce,o as ie,A as de,p as xe}from"./ui-BFiKdTjl.js";import{c as x}from"./motion-CSeNjKbZ.js";import{aa as Je,z as S,U as Ke,E as k,ab as We,R as qe,D as He,X as re,ac as Qe,ad as Ve,S as Ge,ae as _e,af as Xe}from"./icons-BOLUIAKd.js";const te=Be,Ye=ze,pe=o.forwardRef(({className:t,...s},l)=>e.jsx(xe,{className:p("fixed inset-0 z-50 bg-[rgba(var(--ch-bg-base),0.74)] 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",t),...s,ref:l}));pe.displayName=xe.displayName;const A=o.forwardRef(({className:t,...s},l)=>e.jsxs(Ye,{children:[e.jsx(pe,{}),e.jsx(le,{ref:l,className:p("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[24px] border border-[var(--border-default)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.98),rgba(var(--ch-bg-base),0.99))] p-6 shadow-[0_40px_100px_rgba(0,0,0,0.5)] backdrop-blur-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",t),...s})]}));A.displayName=le.displayName;const M=({className:t,...s})=>e.jsx("div",{className:p("flex flex-col gap-1.5 text-center sm:text-left",t),...s});M.displayName="AlertDialogHeader";const L=({className:t,...s})=>e.jsx("div",{className:p("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",t),...s});L.displayName="AlertDialogFooter";const E=o.forwardRef(({className:t,...s},l)=>e.jsx(ne,{ref:l,className:p("text-lg font-semibold text-[var(--color-text-primary)]",t),...s}));E.displayName=ne.displayName;const $=o.forwardRef(({className:t,...s},l)=>e.jsx(ce,{ref:l,className:p("text-sm text-[var(--color-text-secondary)]",t),...s}));$.displayName=ce.displayName;const F=o.forwardRef(({className:t,...s},l)=>e.jsx(de,{ref:l,className:p(oe(),t),...s}));F.displayName=de.displayName;const I=o.forwardRef(({className:t,...s},l)=>e.jsx(ie,{ref:l,className:p(oe({variant:"outline"}),t),...s}));I.displayName=ie.displayName;function se(t){if(t===0)return"0 B";const s=["B","KB","MB","GB"],l=Math.min(Math.floor(Math.log(t)/Math.log(1024)),s.length-1);return`${(t/Math.pow(1024,l)).toFixed(l===0?0:1)} ${s[l]}`}function j({label:t,value:s,mono:l}){return e.jsxs("div",{className:"flex items-center justify-between gap-4 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:t}),e.jsx("span",{className:`text-sm font-medium text-[var(--color-text-primary)] ${l?"font-mono":""}`,children:s})]})}function ca(){const t=Ce(),[s,l]=o.useState(!1),[me,U]=o.useState(!1),[N,B]=o.useState(!1),[he,z]=o.useState(null),[w,J]=o.useState([]),[ue,T]=o.useState(!1),[i,h]=o.useState({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""}),[v,be]=o.useState("30"),[ve,K]=o.useState(!1),[P,W]=o.useState(null),[q,H]=o.useState(!1),[D,ge]=o.useState(""),[R,ye]=o.useState("llmtap"),[Q,V]=o.useState(!1),[O,C]=o.useState(null),[G,_]=o.useState(!1),[fe,X]=o.useState(!1),[je,Y]=o.useState(!1),{data:n}=Se({queryKey:["db-info"],queryFn:Ae});async function Ne(){l(!0);try{await De(),U(!0),t.invalidateQueries(),c.success("Trace data cleared",{description:"The local collector database has been reset."}),setTimeout(()=>U(!1),3e3)}catch(a){c.error("Reset failed",{description:a instanceof Error?a.message:String(a)})}finally{l(!1)}}async function Z(a){H(!0);try{const r=await Re(a);W(r.deletedSpans),K(!0),t.invalidateQueries(),c.success("Retention applied",{description:r.deletedSpans>0?`Deleted ${r.deletedSpans} old spans.`:"No spans needed cleanup for the selected window."}),setTimeout(()=>{K(!1),W(null)},4e3)}catch(r){c.error("Retention failed",{description:r instanceof Error?r.message:String(r)})}finally{H(!1)}}async function ee(a){B(!0);try{const r=await Oe(a),u=new Blob([r],{type:a==="json"?"application/json":"text/csv"}),d=URL.createObjectURL(u),m=document.createElement("a");m.href=d,m.download=`llmtap-traces-${new Date().toISOString().slice(0,10)}.${a}`,document.body.appendChild(m),m.click(),document.body.removeChild(m),URL.revokeObjectURL(d),c.success(`Exported ${a.toUpperCase()}`,{description:"Trace data was downloaded successfully."})}catch(r){c.error("Export failed",{description:r instanceof Error?r.message:String(r)})}finally{B(!1)}}function we(a,r){navigator.clipboard.writeText(a).catch(()=>{}),z(r),c.success("Copied to clipboard",{description:"Database path copied."}),setTimeout(()=>z(null),2e3)}return e.jsxs(e.Fragment,{children:[e.jsxs(Ee,{eyebrow:"Control Panel",title:"Configure, export, and manage your local collector.",description:"This is the operational side of LLMTap: local storage, exports, retention, and recovery controls. Nothing here should feel cryptic.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(Pe,{}),e.jsx("div",{className:"mt-4 space-y-3",children:e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Database"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:n?se(n.sizeBytes):"..."}),e.jsxs("div",{className:"mt-1 text-sm text-[var(--color-text-secondary)]",children:[n?.spanCount??0," spans stored"]})]})})]}),children:[e.jsx(Me,{compact:!0}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-2",children:[e.jsxs("div",{className:"space-y-5",children:[e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(Je,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Database status"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(j,{label:"Size on disk",value:n?se(n.sizeBytes):"-"}),e.jsx(j,{label:"Total spans",value:String(n?.spanCount??0),mono:!0}),e.jsx(j,{label:"Total traces",value:String(n?.traceCount??0),mono:!0}),e.jsx(j,{label:"Journal mode",value:n?.walMode?.toUpperCase()??"-",mono:!0}),e.jsx(j,{label:"Data range",value:n?.oldestSpan&&n?.newestSpan?`${ae(n.oldestSpan)} to ${ae(n.newestSpan)}`:"No data"}),e.jsxs("div",{className:"flex items-center justify-between gap-4 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:"Storage path"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"max-w-[220px] truncate font-mono text-xs text-[var(--color-text-secondary)]",children:n?.path??"-"}),n?.path&&e.jsx("button",{type:"button",onClick:()=>we(n.path,"path"),className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] p-1.5 text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",children:he==="path"?e.jsx(S,{className:"h-3 w-3 text-[var(--color-accent)]"}):e.jsx(Ke,{className:"h-3 w-3"})})]})]})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.06,duration:.35},children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Settings FAQ"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Before you change the collector"})]}),e.jsxs(Le,{defaultValue:["local-data"],multiple:!0,children:[e.jsxs(g,{value:"local-data",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What stays local on this machine?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"The collector database, exports, retention operations, replay tools, and diagnostics stay local first. LLMTap only sends traces outward when you explicitly export or forward them."})]}),e.jsxs(g,{value:"retention",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What happens when I apply retention?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Retention deletes stored spans older than the selected window immediately. If you need a rollback point, run a backup first and then apply retention."})]}),e.jsxs(g,{value:"backup-restore",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"When should I backup, export, or restore?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Use export for analysis outside LLMTap, backup before aggressive cleanup or experiments, and restore when you need to return the collector to a known-good local state quickly."})]}),e.jsxs(g,{value:"otlp",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"Does OTLP forwarding make LLMTap cloud-only?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"No. LLMTap still runs locally. OTLP forwarding is an explicit send step for traces you choose to push into another backend like Tempo, Jaeger, Datadog, or Honeycomb."})]}),e.jsxs(g,{value:"empty-dashboard",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What do I do if the dashboard is still empty?"}),e.jsxs(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:["Run one real model request from the app you wrapped, then refresh this page. If nothing appears, run",e.jsx("code",{className:"mx-1 rounded-full bg-[rgba(var(--ch-bg-surface),0.78)] px-2 py-0.5 font-mono text-[var(--color-text-primary)]",children:"npx llmtap doctor"}),"in the instrumented project to check the collector, SDK install, and local database path."]})]})]})]})]}),e.jsxs("div",{className:"space-y-5",children:[e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.1,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(k,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Export data"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Download all trace data for offline analysis, backup, or migration."}),e.jsxs("div",{className:"flex gap-3",children:[e.jsxs("button",{type:"button",onClick:()=>ee("json"),disabled:N,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(k,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:N?"Exporting...":"Export JSON"})]}),e.jsxs("button",{type:"button",onClick:()=>ee("csv"),disabled:N,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(k,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:N?"Exporting...":"Export CSV"})]})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.15,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(We,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Reset data"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Permanently delete all stored traces and spans. This action cannot be undone."}),e.jsx("button",{type:"button",onClick:()=>X(!0),disabled:s,className:"inline-flex items-center gap-2 rounded-full border border-[var(--color-error)]/24 bg-[var(--color-error)]/10 px-4 py-2.5 text-sm font-medium text-[var(--color-error)] transition-colors hover:border-[var(--color-error)]/36 hover:bg-[var(--color-error)]/16 disabled:cursor-not-allowed disabled:opacity-50",children:me?e.jsxs(e.Fragment,{children:[e.jsx(S,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("span",{children:"Data cleared"})]}):e.jsxs(e.Fragment,{children:[e.jsx(qe,{className:`h-4 w-4 ${s?"animate-spin":""}`}),e.jsx("span",{children:s?"Resetting...":"Reset all data"})]})})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.2,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(He,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Pricing override generator"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Build the SDK snippet for custom or private model pricing. These entries are not applied automatically inside the dashboard and they do not rewrite already captured trace costs."}),w.length>0&&e.jsx("div",{className:"mb-4 space-y-2",children:w.map((a,r)=>e.jsxs("div",{className:"flex items-center justify-between gap-3 rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.32)] px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-secondary)]",children:a.provider}),e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-primary)]",children:a.model})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-secondary)]",children:["$",a.inputCostPer1M,"/M in"]}),e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-secondary)]",children:["$",a.outputCostPer1M,"/M out"]}),e.jsx("button",{type:"button",onClick:()=>J(u=>u.filter((d,m)=>m!==r)),className:"rounded-lg border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] p-1.5 text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",children:e.jsx(re,{className:"h-3 w-3"})})]})]},`${a.provider}-${a.model}`))}),ue?e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-4",children:[e.jsx("input",{value:i.provider,onChange:a=>h(r=>({...r,provider:a.target.value})),placeholder:"Provider",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.model,onChange:a=>h(r=>({...r,model:a.target.value})),placeholder:"Model name",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.inputCostPer1M,onChange:a=>h(r=>({...r,inputCostPer1M:a.target.value})),placeholder:"Input $/M",type:"number",step:"0.01",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.outputCostPer1M,onChange:a=>h(r=>({...r,outputCostPer1M:a.target.value})),placeholder:"Output $/M",type:"number",step:"0.01",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"})]}),e.jsxs("div",{className:"mt-3 flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>{i.provider&&i.model&&i.inputCostPer1M&&i.outputCostPer1M&&(J(a=>[...a,{...i}]),c.success("Pricing snippet added",{description:`${i.provider}/${i.model} was added to the generated SDK snippet.`}),h({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""}),T(!1))},className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(S,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Add"})]}),e.jsxs("button",{type:"button",onClick:()=>{T(!1),h({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""})},className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(re,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Cancel"})]})]})]}):e.jsxs("button",{type:"button",onClick:()=>T(!0),className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(Qe,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Add pricing snippet"})]}),w.length>0&&e.jsxs("div",{className:"mt-4 rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"SDK code to paste into your app"}),e.jsx("p",{className:"mb-3 text-xs leading-relaxed text-[var(--color-text-secondary)]",children:"Put this next to your LLMTap initialization or provider setup so future traces use your custom prices."}),e.jsx("pre",{className:"font-mono text-xs leading-relaxed text-[var(--color-text-primary)]",children:`import { setPricing } from "@llmtap/sdk";
+${w.map(a=>`setPricing("${a.provider}", "${a.model}", ${a.inputCostPer1M}, ${a.outputCostPer1M});`).join(`
+`)}`})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.25,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(Ve,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Data retention"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Configure how long trace data is kept. Older traces will be automatically cleaned up."}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs($e,{value:v,onValueChange:a=>be(a),children:[e.jsx(Fe,{className:"w-[160px] rounded-2xl py-3",children:e.jsx(Ie,{})}),e.jsxs(Ue,{children:[e.jsx(b,{value:"7",children:"7 days"}),e.jsx(b,{value:"14",children:"14 days"}),e.jsx(b,{value:"30",children:"30 days"}),e.jsx(b,{value:"90",children:"90 days"}),e.jsx(b,{value:"365",children:"1 year"}),e.jsx(b,{value:"0",children:"Keep forever"})]})]}),e.jsx("button",{type:"button",onClick:async()=>{const a=parseInt(v,10);if(a>0){Y(!0);return}await Z(a)},disabled:q,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)] disabled:cursor-not-allowed disabled:opacity-50",children:ve?e.jsxs(e.Fragment,{children:[e.jsx(S,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsx("span",{children:P!==null&&P>0?`Cleaned ${P} spans`:"Applied"})]}):e.jsx("span",{children:q?"Applying...":"Apply now"})})]}),e.jsxs("p",{className:"mt-3 text-xs text-[var(--color-text-tertiary)]",children:["This immediately deletes spans older than the selected period. For automatic enforcement on every startup, use ",e.jsxs("code",{className:"rounded bg-[rgba(var(--ch-bg-surface),0.72)] px-1.5 py-0.5 font-mono text-[var(--color-text-secondary)]",children:["llmtap start --retention ",v]}),"."]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.27,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(Ge,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"OpenTelemetry Export"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Export spans in OTLP format for Datadog, Grafana Tempo, Jaeger, Honeycomb, or any OTLP-compatible backend."}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("button",{type:"button",disabled:G,onClick:async()=>{_(!0);try{const a=await ke(1e3,R),r=new Blob([a],{type:"application/json"}),u=URL.createObjectURL(r),d=document.createElement("a");d.href=u,d.download="llmtap-export.otlp.json",document.body.appendChild(d),d.click(),document.body.removeChild(d),URL.revokeObjectURL(u),c.success("OTLP export downloaded",{description:"The collector export was saved as OTLP JSON."})}catch(a){c.error("Export failed",{description:a instanceof Error?a.message:String(a)})}finally{_(!1)}},className:"flex items-center gap-2 rounded-2xl border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/10 px-4 py-2.5 text-sm font-medium text-[var(--color-accent)] transition-colors hover:bg-[var(--color-accent)]/20",children:[e.jsx(k,{className:"h-3.5 w-3.5"}),G?"Exporting...":"Download OTLP JSON"]}),e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"Forward to OTLP endpoint"}),e.jsxs("div",{className:"flex flex-col gap-3 sm:flex-row",children:[e.jsx("input",{type:"text",value:D,onChange:a=>{ge(a.target.value),C(null)},placeholder:"http://localhost:4318/v1/traces",className:"flex-1 rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{type:"text",value:R,onChange:a=>ye(a.target.value),placeholder:"service name",className:"w-32 rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("button",{type:"button",disabled:!D||Q,onClick:async()=>{V(!0),C(null);try{const a=await Te(D,{service:R});C(`Forwarded ${a.spanCount} spans`),c.success("OTLP forward complete",{description:`Forwarded ${a.spanCount} spans to the target endpoint.`})}catch(a){C(`Error: ${a instanceof Error?a.message:String(a)}`),c.error("OTLP forward failed",{description:a instanceof Error?a.message:String(a)})}finally{V(!1)}},className:"rounded-xl border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/10 px-4 py-2 text-sm font-medium text-[var(--color-accent)] transition-colors hover:bg-[var(--color-accent)]/20 disabled:opacity-40",children:Q?"Sending...":"Send"})]}),O&&e.jsx("p",{className:`mt-2 text-xs ${O.startsWith("Error")?"text-[var(--color-text-primary)]":"text-[var(--color-accent)]"}`,children:O})]}),e.jsxs("p",{className:"text-xs text-[var(--color-text-tertiary)]",children:["CLI: ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-surface),0.72)] px-1.5 py-0.5 font-mono text-[var(--color-text-secondary)]",children:"llmtap export --format otlp --endpoint http://localhost:4318/v1/traces"})]})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.3,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(_e,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"First-run help"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[e.jsx(Xe,{className:"h-3.5 w-3.5 text-[var(--color-accent-2)]"}),"Where the wrap code belongs"]}),e.jsx("p",{className:"text-xs leading-relaxed text-[var(--color-text-secondary)]",children:"Edit the file in your app where you already create the provider client. That is usually a backend route, agent runner, worker, or script. You do not change code inside this dashboard."})]}),e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"How to verify the setup"}),e.jsxs("p",{className:"text-xs leading-relaxed text-[var(--color-text-secondary)]",children:["After you make one real model call, a new trace should appear on the Overview or Traces page within a few seconds. If nothing appears, run"," ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-surface),0.72)] px-1.5 py-0.5 font-mono text-[var(--color-text-primary)]",children:"npx llmtap doctor"})," ","from the app you are instrumenting."]})]}),e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"Useful local operations"}),e.jsx("pre",{className:"font-mono text-xs leading-relaxed text-[var(--color-text-primary)]",children:`npx llmtap doctor
+npx llmtap backup
+npx llmtap import llmtap-export.json
+npx llmtap restore llmtap-backup.db`})]})]})]})]})]})]}),e.jsx(te,{open:fe,onOpenChange:X,children:e.jsxs(A,{children:[e.jsxs(M,{children:[e.jsx(E,{children:"Delete all trace data?"}),e.jsx($,{children:"This will permanently delete all stored traces and spans. This action cannot be undone."})]}),e.jsxs(L,{children:[e.jsx(I,{children:"Cancel"}),e.jsx(F,{onClick:()=>Ne(),className:"border-[var(--color-error)]/24 bg-[var(--color-error)] text-[var(--color-bg-base)] hover:bg-[var(--color-error)]/90",children:"Delete all data"})]})]})}),e.jsx(te,{open:je,onOpenChange:Y,children:e.jsxs(A,{children:[e.jsxs(M,{children:[e.jsx(E,{children:"Apply data retention?"}),e.jsxs($,{children:["This will delete all trace data older than ",v," days. This action cannot be undone."]})]}),e.jsxs(L,{children:[e.jsx(I,{children:"Cancel"}),e.jsx(F,{onClick:()=>Z(parseInt(v,10)),className:"border-[var(--color-warning)]/24 bg-[var(--color-warning)] text-[var(--color-bg-base)] hover:bg-[var(--color-warning)]/90",children:"Delete old data"})]})]})})]})}export{ca as default};

package/dist/dashboard/assets/TraceDetail-CKDDbbEV.js

@@ -0,0 +1,17 @@
+import{r as u,d as me,j as e}from"./query-DVWnIZNd.js";import{l as ue,L as he,D as ve,m as ge,n as be,o as je,p as fe,b as ye,t as I,r as Ne,k as ke}from"./index-DG2eF3M2.js";import{P as we,a as w,b as g}from"./format-zoXqpaOb.js";import{E as Se}from"./EmptyState-xDl-M9Rz.js";import{g as S,S as Ce}from"./content-DZmxO8bn.js";import{P as Q}from"./ProviderBadge-Cs31007s.js";import{m as Te,z as E,B as $e,F as Ie,E as Me,H as Y,y as Z,Z as Re,I as V,x as D,O as ee,J as _e,q as te,N as Oe,Q as Pe,U as Ee,W as De,w as W,Y as Le,_ as re,$ as Ae,t as He}from"./icons-BOLUIAKd.js";import{c as ae,b as qe}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";function Be(t){const s=new Map,o=[];for(const l of t)s.set(l.spanId,{span:l,children:[]});for(const l of t){const n=s.get(l.spanId);n&&(l.parentSpanId&&s.has(l.parentSpanId)?s.get(l.parentSpanId)?.children.push(n):o.push(n))}const c=l=>{l.sort((n,r)=>n.span.startTime-r.span.startTime);for(const n of l)c(n.children)};return c(o),o}function L(t){return t.children.reduce((s,o)=>s+1+L(o),0)}function Fe(){const[t,s]=u.useState(null);function o(c,l){navigator.clipboard.writeText(c),s(l),I.success("Copied to clipboard",{description:`${l} copied successfully.`}),setTimeout(()=>s(null),2e3)}return{copied:t,copy:o}}function k({text:t,label:s,copied:o,onCopy:c}){return e.jsx("button",{type:"button",onClick:l=>{l.stopPropagation(),c(t,s)},className:"rounded-lg border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.035)] p-1.5 text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",title:"Copy to clipboard",children:o===s?e.jsx(E,{className:"h-3 w-3 text-[var(--color-accent)]"}):e.jsx(Ee,{className:"h-3 w-3"})})}function b({icon:t,label:s,value:o}){return e.jsxs("div",{className:"deck-card h-full rounded-[calc(var(--radius-panel)+4px)] p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[e.jsx(t,{className:"h-3 w-3"}),s]}),e.jsx("div",{className:"text-[var(--color-text-primary)]",style:{fontFamily:"var(--font-operator)",fontSize:"28px",fontWeight:700,lineHeight:"0.92",letterSpacing:"-0.04em"},children:o})]})}function v({label:t,value:s,tone:o="default"}){const c=o==="success"?"border-[var(--color-accent)]/16 bg-[var(--color-accent)]/8 text-[var(--color-text-primary)]":o==="danger"?"border-[var(--color-text-primary)]/16 bg-[var(--color-text-primary)]/8 text-[var(--color-text-primary)]":"border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.035)] text-[var(--color-text-primary)]";return e.jsxs("div",{className:`rounded-2xl border px-3 py-2 ${c}`,children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:t}),e.jsx("div",{className:"mt-1 font-mono text-xs font-semibold",children:s})]})}function P({icon:t,title:s,count:o,collapsed:c,onToggle:l}){const n=e.jsxs(e.Fragment,{children:[l?e.jsx(He,{className:`h-3.5 w-3.5 transition-transform ${c?"-rotate-90":""}`}):null,e.jsx(t,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:s}),typeof o=="number"?e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 font-mono text-[10px] text-[var(--color-text-secondary)]",children:o}):null]});return l?e.jsx("button",{type:"button",onClick:l,className:"mb-3 flex w-full items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-secondary)]",children:n}):e.jsx("div",{className:"mb-3 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:n})}function Ke({role:t,type:s}){const o={system:"bg-[var(--color-panel)]/90 text-[var(--color-text-primary)] border-[var(--color-accent-2)]/16",user:"bg-[var(--color-accent)]/10 text-[var(--color-text-primary)] border-[var(--color-accent)]/16",assistant:"bg-[var(--color-accent-2)]/10 text-[var(--color-accent)] border-[var(--color-accent-2)]/16",tool:"bg-[var(--color-text-primary)]/10 text-[var(--color-text-primary)] border-[var(--color-text-primary)]/16",function:"bg-[var(--color-text-primary)]/10 text-[var(--color-text-primary)] border-[var(--color-text-primary)]/16"},c=s==="input"?"bg-[var(--color-accent)]/10 text-[var(--color-text-primary)] border-[var(--color-accent)]/16":"bg-[var(--color-accent-2)]/10 text-[var(--color-accent)] border-[var(--color-accent-2)]/16";return e.jsx("span",{className:`rounded-full border px-2.5 py-1 text-[10px] font-bold capitalize tracking-[0.16em] ${o[t]??c}`,children:t})}function X(t){return!t||typeof t=="string"?!1:t.some(s=>s.type==="image_url"||s.type==="image")}function A(t){return t.map(s=>s.type==="image_url"&&s.image_url?.url?s.image_url.url:s.type==="image"&&s.source?.data?`data:${s.source.media_type||"image/png"};base64,${s.source.data}`:null).filter(s=>{if(!s)return!1;if(s.startsWith("data:image/"))return!0;try{const o=new URL(s);return o.protocol==="http:"||o.protocol==="https:"}catch{return!1}})}function Je(t){const s=S(t);let o=s?Math.ceil(s.length/4):0;if(t&&typeof t!="string"){const c=t.filter(l=>l.type==="image_url"||l.type==="image").length;o+=c*85}return o}function G({message:t,type:s,copied:o,onCopy:c}){const l=t.content,n=S(l),r=l&&typeof l!="string"?A(l):[],d=s==="input"?"border-[var(--border-dim)]":"border-[var(--color-accent)]/12",i=`msg-${s}-${t.role}-${n.slice(0,20)}`;return e.jsxs("div",{className:`rounded-2xl border ${d} bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.68),rgba(var(--ch-bg-base),0.9))] 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(Ke,{role:t.role,type:s}),t.name&&e.jsx("span",{className:"font-mono text-[10px] text-[var(--color-text-tertiary)]",children:t.name}),r.length>0&&e.jsxs("span",{className:"inline-flex items-center gap-1 rounded-full border border-[var(--color-accent-2)]/16 bg-[var(--color-panel)]/90 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-[var(--color-text-primary)]",children:[e.jsx(Ae,{className:"h-2.5 w-2.5"}),r.length," image",r.length>1?"s":""]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"font-mono text-[10px] text-[var(--color-text-disabled)]",children:["~",Je(l)," tok"]}),n&&e.jsx(k,{text:n,label:i,copied:o,onCopy:c})]})]}),n&&e.jsx("pre",{className:"mt-2.5 whitespace-pre-wrap font-mono text-xs leading-relaxed text-[var(--color-text-secondary)]",children:We(n)}),r.length>0&&e.jsx("div",{className:"mt-2.5 flex flex-wrap gap-2",children:r.map((x,j)=>e.jsxs("a",{href:x,target:"_blank",rel:"noopener noreferrer",className:"group relative overflow-hidden rounded-lg border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] transition-colors hover:border-[var(--border-default)]",children:[e.jsx("img",{src:x,alt:`Image ${j+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-[var(--color-text-primary)]",children:"Open"})})]},j))})]})}function Ue({span:t,copied:s,onCopy:o}){const c=t.inputMessages?.length??0,l=t.outputMessages?.length??0,[n,r]=u.useState(c>3),[d,i]=u.useState(l>3);return e.jsx(ae.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.jsx("div",{className:"mx-4 mb-4 rounded-[24px] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.92),rgba(var(--ch-bg-deep),0.97),rgba(var(--ch-bg-base),0.99))] p-5 text-sm shadow-[inset_0_1px_0_rgba(var(--ch-text-primary),0.04),0_26px_60px_rgba(0,0,0,0.22)]",children:e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1fr)_320px]",children:[e.jsxs("div",{className:"space-y-5",children:[e.jsxs("div",{className:"grid flex-1 grid-cols-2 gap-3 md:grid-cols-4",children:[e.jsx(b,{icon:De,label:"Model",value:t.responseModel??t.requestModel??"-"}),e.jsx(b,{icon:Z,label:"Tokens",value:`${t.inputTokens} in / ${t.outputTokens} out`}),e.jsx(b,{icon:V,label:"Cost",value:w(t.totalCost)}),e.jsx(b,{icon:D,label:"Duration",value:t.duration?g(t.duration):"-"})]}),e.jsxs("div",{className:"grid gap-3 sm:grid-cols-2 xl:grid-cols-4",children:[e.jsx(v,{label:"Input msgs",value:String(c)}),e.jsx(v,{label:"Output msgs",value:String(l)}),e.jsx(v,{label:"Tool calls",value:String(t.toolCalls?.length??0)}),e.jsx(v,{label:"Status",value:t.status==="error"?"Error":"OK",tone:t.status==="error"?"danger":"success"})]}),t.status==="error"&&e.jsxs("div",{className:"rounded-2xl border border-[var(--color-text-primary)]/18 bg-[var(--color-text-primary)]/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-[var(--color-text-primary)]",children:[e.jsx(te,{className:"h-4 w-4"}),t.errorType??"error"]}),t.errorMessage&&e.jsx(k,{text:t.errorMessage,label:"error",copied:s,onCopy:o})]}),e.jsx("div",{className:"font-mono text-xs leading-relaxed text-[var(--color-text-primary)]/70",children:t.errorMessage})]}),t.inputMessages&&t.inputMessages.length>0&&e.jsxs("div",{children:[e.jsx(P,{icon:W,title:"Input messages",count:t.inputMessages.length,collapsed:n,onToggle:()=>r(x=>!x)}),!n&&e.jsx("div",{className:"space-y-2",children:t.inputMessages.map((x,j)=>e.jsx(G,{message:x,type:"input",copied:s,onCopy:o},`in-${x.role}-${j}`))})]}),t.outputMessages&&t.outputMessages.length>0&&e.jsxs("div",{children:[e.jsx(P,{icon:W,title:"Output messages",count:t.outputMessages.length,collapsed:d,onToggle:()=>i(x=>!x)}),!d&&e.jsx("div",{className:"space-y-2",children:t.outputMessages.map((x,j)=>e.jsx(G,{message:x,type:"output",copied:s,onCopy:o},`out-${x.role}-${j}`))})]}),t.toolCalls&&t.toolCalls.length>0&&e.jsxs("div",{children:[e.jsx(P,{icon:Le,title:"Tool calls",count:t.toolCalls.length}),e.jsx("div",{className:"space-y-2",children:t.toolCalls.map(x=>e.jsxs("div",{className:"rounded-2xl border border-[var(--color-accent-2)]/10 bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.7),rgba(var(--ch-bg-base),0.86))] p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsx("span",{className:"rounded-full border border-[var(--color-accent-2)]/16 bg-[var(--color-accent-2)]/10 px-2.5 py-1 text-[10px] font-bold tracking-[0.16em] text-[var(--color-accent)]",children:x.name}),e.jsx(k,{text:x.arguments,label:`tool-${x.id}`,copied:s,onCopy:o})]}),e.jsx("pre",{className:"mt-2.5 overflow-x-auto font-mono text-xs leading-relaxed text-[var(--color-text-secondary)]",children:se(x.arguments)}),x.result&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"my-2 border-t border-[var(--border-dim)]"}),e.jsx("div",{className:"mb-1 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-disabled)]",children:"Result"}),e.jsx("pre",{className:"overflow-x-auto font-mono text-xs leading-relaxed text-[var(--color-text-secondary)]",children:x.result})]})]},x.id))})]})]}),e.jsxs("div",{className:"space-y-4 xl:sticky xl:top-6 xl:self-start",children:[e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.74),rgba(var(--ch-bg-base),0.9))] p-4",children:[e.jsxs("div",{className:"mb-3 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[e.jsx(ee,{className:"h-3.5 w-3.5"}),"Span identity"]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-disabled)]",children:"Span ID"}),e.jsxs("div",{className:"mt-1 flex items-center gap-2",children:[e.jsx("code",{className:"min-w-0 flex-1 truncate font-mono text-xs text-[var(--color-text-secondary)]",children:t.spanId}),e.jsx(k,{text:t.spanId,label:"spanId",copied:s,onCopy:o})]})]}),e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-disabled)]",children:"Operation"}),e.jsx("div",{className:"mt-1 text-sm text-[var(--color-text-secondary)]",children:t.operationName})]}),e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-disabled)]",children:"Provider"}),e.jsx("div",{className:"mt-1",children:e.jsx(Q,{provider:t.providerName})})]}),t.parentSpanId&&e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-disabled)]",children:"Parent span"}),e.jsx("div",{className:"mt-1 font-mono text-xs text-[var(--color-text-secondary)]",children:t.parentSpanId})]}),t.sessionId&&e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-disabled)]",children:"Session"}),e.jsx("div",{className:"mt-1 font-mono text-xs text-[var(--color-text-secondary)]",children:t.sessionId})]})]})]}),e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.74),rgba(var(--ch-bg-base),0.9))] p-4",children:[e.jsxs("div",{className:"mb-3 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[e.jsx(re,{className:"h-3.5 w-3.5"}),"Request config"]}),e.jsxs("div",{className:"grid gap-3 sm:grid-cols-2 xl:grid-cols-1",children:[e.jsx(v,{label:"Request model",value:t.requestModel}),e.jsx(v,{label:"Response model",value:t.responseModel??t.requestModel??"-"}),e.jsx(v,{label:"Temperature",value:t.temperature!==void 0?String(t.temperature):"-"}),e.jsx(v,{label:"Top P",value:t.topP!==void 0?String(t.topP):"-"}),e.jsx(v,{label:"Max tokens",value:t.maxTokens!==void 0?String(t.maxTokens):"-"}),e.jsx(v,{label:"Started",value:new Date(t.startTime).toLocaleTimeString()})]})]})]})]})})})})}function se(t){try{return JSON.stringify(JSON.parse(t),null,2)}catch{return t}}function ze(t){const s=t.providerName?.toLowerCase()??"",o=t.requestModel??t.responseModel??"unknown",c=(t.inputMessages??[]).map(r=>({role:r.role,content:typeof r.content=="string"?r.content:r.content??""})),n=JSON.stringify({model:o,messages:c}).replace(/'/g,"'\\''");return s==="openai"?`curl https://api.openai.com/v1/chat/completions \\
+  -H "Authorization: Bearer $OPENAI_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '${n}'`:s==="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:o,max_tokens:t.maxTokens??1024,messages:c.filter(i=>i.role!=="system"),...c.find(i=>i.role==="system")?{system:c.find(i=>i.role==="system").content}:{}}).replace(/'/g,"'\\''")}'`:s==="google"?`curl "https://generativelanguage.googleapis.com/v1beta/models/${o}:generateContent?key=$GOOGLE_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '${n}'`:`curl https://api.example.com/v1/chat/completions \\
+  -H "Authorization: Bearer $API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '${n}'`}function Ye(t,s,o,c,l,n){const r=[];r.push("# Trace Report"),r.push(""),r.push(`**Trace ID:** \`${t}\``),r.push(`**Status:** ${n?"Error":"Stable"}`),r.push(`**Total Spans:** ${s.length}`),r.push(`**Total Tokens:** ${o.toLocaleString()}`),r.push(`**Total Cost:** ${w(c)}`),r.push(`**Duration:** ${g(l)}`),r.push(""),r.push("---"),r.push("");for(const d of s){if(r.push(`## Span: ${d.name}`),r.push(""),r.push("| Field | Value |"),r.push("|-------|-------|"),r.push(`| Span ID | \`${d.spanId}\` |`),r.push(`| Provider | ${d.providerName} |`),r.push(`| Model | ${d.responseModel??d.requestModel??"-"} |`),r.push(`| Operation | ${d.operationName} |`),r.push(`| Tokens | ${d.inputTokens} in / ${d.outputTokens} out |`),r.push(`| Cost | ${w(d.totalCost)} |`),r.push(`| Duration | ${d.duration?g(d.duration):"-"} |`),r.push(`| Status | ${d.status} |`),r.push(""),d.inputMessages&&d.inputMessages.length>0){r.push("### Input Messages"),r.push("");for(const i of d.inputMessages)r.push(`**[${i.role}]${i.name?` (${i.name})`:""}**`),r.push(""),r.push(S(i.content)||"_empty_"),X(i.content)&&r.push(`
+_[${A(i.content).length} image(s) attached]_`),r.push("")}if(d.outputMessages&&d.outputMessages.length>0){r.push("### Output Messages"),r.push("");for(const i of d.outputMessages)r.push(`**[${i.role}]${i.name?` (${i.name})`:""}**`),r.push(""),r.push(S(i.content)||"_empty_"),X(i.content)&&r.push(`
+_[${A(i.content).length} image(s) attached]_`),r.push("")}if(d.toolCalls&&d.toolCalls.length>0){r.push("### Tool Calls"),r.push("");for(const i of d.toolCalls)r.push(`**${i.name}** (\`${i.id}\`)`),r.push(""),r.push("```json"),r.push(se(i.arguments)),r.push("```"),i.result&&(r.push(""),r.push("Result:"),r.push("```"),r.push(i.result),r.push("```")),r.push("")}r.push("---"),r.push("")}return r.join(`
+`)}function We(t){const s=/```(\w*)\n?([\s\S]*?)```/g,o=[];let c=0,l,n=0;for(;(l=s.exec(t))!==null;){l.index>c&&o.push(e.jsx("span",{children:t.slice(c,l.index)},n++));const r=l[1]||"",d=l[2];o.push(e.jsxs("span",{className:"my-1.5 block rounded-lg border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.78)] px-3 py-2",children:[r&&e.jsxs("span",{className:"mb-1 flex items-center gap-1 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[e.jsx(re,{className:"h-3 w-3"}),r]}),e.jsx("span",{className:"block font-mono text-[11px] leading-relaxed text-[var(--color-accent)]/80",children:d})]},n++)),c=l.index+l[0].length}return c<t.length&&o.push(e.jsx("span",{children:t.slice(c)},n++)),o.length===0?t:o}function ot(){const{traceId:t}=ue(),[s,o]=u.useState(null),[c,l]=u.useState({}),{copied:n,copy:r}=Fe(),[d,i]=u.useState(!1),[x,j]=u.useState(""),[H,q]=u.useState(!1),[y,C]=u.useState(null),[B,T]=u.useState(null),[M,oe]=u.useState(null),{data:le,isLoading:ne}=me({queryKey:["trace",t],queryFn:()=>ke(t),enabled:!!t}),p=le?.spans??[],R=u.useMemo(()=>Be(p),[p]),_=p.length>0?Math.min(...p.map(a=>a.startTime)):0,N=(p.length>0?Math.max(...p.map(a=>a.endTime??a.startTime)):0)-_||1,O=p.reduce((a,h)=>a+h.totalTokens,0),F=p.reduce((a,h)=>a+h.totalCost,0),$=p.some(a=>a.status==="error");function ce(){const a=new Blob([JSON.stringify(p,null,2)],{type:"application/json"}),h=URL.createObjectURL(a),m=document.createElement("a");m.href=h,m.download=`trace-${t?.slice(0,12)}.json`,document.body.appendChild(m),m.click(),document.body.removeChild(m),URL.revokeObjectURL(h),I.success("Trace exported",{description:"The full trace payload was downloaded as JSON."})}async function ie(){if(!(!M||!x.trim())){q(!0),T(null),C(null);try{const a=await Ne(M,x.trim());C(a),I.success("Replay complete",{description:`Received a fresh response from ${a.provider}.`})}catch(a){T(a instanceof Error?a.message:String(a)),I.error("Replay failed",{description:a instanceof Error?a.message:String(a)})}finally{q(!1)}}}function de(a){oe(a),i(!0),C(null),T(null)}const K=(a,h=0)=>{const m=a.span.spanId===s,J=a.children.length>0,U=c[a.span.spanId]??!1,xe=(a.span.startTime-_)/N*100,pe=Math.max(((a.span.endTime??a.span.startTime)-a.span.startTime)/N*100,1);return e.jsxs(u.Fragment,{children:[e.jsx("div",{className:"border-t border-[var(--border-dim)] first:border-t-0",children:e.jsxs("div",{role:"button",tabIndex:0,onClick:()=>o(m?null:a.span.spanId),onKeyDown:f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),o(m?null:a.span.spanId))},className:`grid w-full gap-3 px-4 py-3 text-left transition-colors sm:grid-cols-[minmax(0,380px)_minmax(0,1fr)_110px] sm:items-center sm:px-5 ${m?"bg-[rgba(var(--ch-accent),0.06)]":"hover:bg-[rgba(var(--ch-text-primary),0.03)]"}`,children:[e.jsx("div",{className:"min-w-0",children:e.jsxs("div",{className:"flex min-w-0 items-start gap-3",style:{paddingLeft:`${h*22}px`},children:[J?e.jsx("button",{type:"button",onClick:f=>{f.stopPropagation(),l(z=>({...z,[a.span.spanId]:!z[a.span.spanId]}))},className:"mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.035)] text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",children:e.jsx(Pe,{className:`h-4 w-4 transition-transform ${U?"":"rotate-90"}`})}):e.jsx("span",{className:"mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] text-[var(--color-text-tertiary)]",children:e.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-[var(--color-text-tertiary)]"})}),e.jsx("div",{className:"min-w-0 flex-1",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(Ce,{status:a.span.status}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate text-sm font-medium text-[var(--color-text-primary)]",children:a.span.name}),e.jsxs("div",{className:"mt-1 flex flex-wrap items-center gap-2.5",children:[e.jsx(Q,{provider:a.span.providerName}),e.jsx("span",{className:"font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:a.span.operationName}),J?e.jsxs("span",{className:"font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[L(a)," child",L(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-[var(--color-text-tertiary)]",children:[e.jsxs("span",{children:[Math.round(a.span.startTime-_),"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-[rgba(var(--ch-bg-base),0.88)]",children:e.jsx(ae.div,{className:`absolute bottom-1 top-1 origin-left rounded-full ${a.span.status==="error"?"bg-[linear-gradient(90deg,var(--color-text-primary),var(--color-accent-2))]":"bg-[linear-gradient(90deg,var(--color-accent-2),var(--color-accent))]"}`,style:{left:`${xe}%`,width:`${Math.max(pe,.5)}%`},initial:{scaleX:0},animate:{scaleX:1},transition:{duration:.4,ease:"easeOut"}})})]}),e.jsxs("div",{className:"text-right font-mono text-[11px] text-[var(--color-text-tertiary)]",children:[e.jsx("div",{className:"text-[var(--color-text-secondary)]",children:w(a.span.totalCost)}),e.jsxs("div",{children:[a.span.totalTokens.toLocaleString()," tok"]})]})]})}),e.jsx(qe,{children:m?e.jsx(Ue,{span:a.span,copied:n,onCopy:r}):null}),!U&&a.children.map(f=>K(f,h+1))]},a.span.spanId)};return ne?e.jsxs("div",{className:"mx-auto max-w-[1760px] 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(we,{eyebrow:"Trace Console",title:t?`Trace ${t.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(ye,{}),e.jsxs("div",{className:"mt-4 space-y-3",children:[e.jsxs("div",{className:"deck-card deck-card--accent",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-[var(--color-text-primary)]",children:$?e.jsxs(e.Fragment,{children:[e.jsx(te,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),"Error state"]}):e.jsxs(e.Fragment,{children:[e.jsx(Oe,{className:"h-4 w-4 text-[var(--color-accent)]"}),"Stable"]})})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Hierarchy"}),e.jsxs("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:[R.length," root spans"]}),e.jsxs("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:[g(N)," elapsed from first to last event"]})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["trace ",e.jsx("strong",{children:t?.slice(0,10)??"unknown"})]}),e.jsxs("span",{className:"pill-item",children:["spans ",e.jsx("strong",{children:p.length})]}),e.jsxs("span",{className:"pill-item",children:["tokens ",e.jsx("strong",{children:O})]}),e.jsxs("span",{className:"pill-item",children:["status ",e.jsx("strong",{children:$?"error":"stable"})]})]}),e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 text-sm",children:[e.jsxs("div",{className:"flex min-w-0 flex-wrap items-center gap-2",children:[e.jsxs(he,{to:"/",className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)] hover:text-[var(--color-text-primary)]",children:[e.jsx(Te,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Back to overview"})]}),e.jsx("span",{className:"truncate rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-1 font-mono text-xs text-[var(--color-text-tertiary)]",children:t}),e.jsx(k,{text:t??"",label:"traceId",copied:n,onCopy:r})]}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[p.length>0&&e.jsxs("button",{type:"button",onClick:()=>{const a=p[0];r(ze(a),"curl")},className:"terminal-action",children:[n==="curl"?e.jsx(E,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}):e.jsx($e,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:n==="curl"?"Copied!":"Copy as cURL"})]}),p.length>0&&e.jsxs("button",{type:"button",onClick:()=>{r(Ye(t??"",p,O,F,N,$),"markdown")},className:"terminal-action",children:[n==="markdown"?e.jsx(E,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}):e.jsx(Ie,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:n==="markdown"?"Copied!":"Copy as Markdown"})]}),e.jsxs("button",{type:"button",onClick:ce,className:"terminal-action",children:[e.jsx(Me,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Export JSON"})]}),p.length>0&&e.jsxs("button",{type:"button",onClick:()=>de(p[0].spanId),className:"terminal-action",children:[e.jsx(Y,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),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:Z,label:"Spans",value:String(p.length)}),e.jsx(b,{icon:Re,label:"Tokens",value:O.toLocaleString()}),e.jsx(b,{icon:V,label:"Cost",value:w(F)}),e.jsx(b,{icon:D,label:"Duration",value:p.length>0?g(N):"-"}),e.jsx(b,{icon:ee,label:"Status",value:$?"Error":"Stable"})]})}),e.jsxs("div",{className:"dashboard-shell overflow-hidden rounded-[26px]",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-3 border-b border-[var(--border-dim)] px-5 py-4",children:[e.jsx("div",{className:"flex h-9 w-9 items-center justify-center rounded-2xl border border-[var(--color-accent)]/16 bg-[var(--color-accent)]/10",children:e.jsx(D,{className:"h-4 w-4 text-[var(--color-accent)]"})}),e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Execution tree"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Trace hierarchy"})]}),e.jsxs("div",{className:"ml-auto flex flex-wrap items-center gap-2",children:[e.jsxs("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-1 text-xs font-mono tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[g(N)," total"]}),e.jsxs("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-1 text-xs font-mono tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[p.length," spans"]})]})]}),R.length>0?e.jsxs("div",{className:"py-2",children:[e.jsxs("div",{className:"grid gap-3 border-b border-[var(--border-dim)] px-4 py-3 text-[10px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)] sm:grid-cols-[minmax(0,380px)_minmax(0,1fr)_110px] sm:px-5",children:[e.jsx("span",{children:"Span"}),e.jsx("span",{children:"Timeline"}),e.jsx("span",{className:"text-right",children:"Spend / Tokens"})]}),R.map(a=>K(a))]}):e.jsx(Se,{title:"No spans found for this trace",description:"This trace exists, but there are no captured span events to render in the execution tree yet.",className:"h-[280px]"})]}),e.jsx(ve,{open:d,onOpenChange:a=>!a&&i(!1),children:e.jsxs(ge,{className:"max-w-2xl",children:[e.jsx(be,{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-[var(--color-accent)]/20 bg-[var(--color-accent)]/10",children:e.jsx(Y,{className:"h-4.5 w-4.5 text-[var(--color-accent)]"})}),e.jsxs("div",{children:[e.jsx(je,{children:"Trace Replay"}),e.jsx(fe,{children:"Re-send the same prompts and compare responses"})]})]})}),!y&&!H&&e.jsxs("div",{className:"space-y-4",children:[e.jsx("div",{className:"rounded-xl border border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/8 p-3 text-xs text-[var(--color-text-primary)]/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-[var(--color-text-tertiary)]",children:"Provider API Key"}),e.jsx("input",{type:"password",value:x,onChange:a=>j(a.target.value),placeholder:"sk-... or anthropic key",className:"w-full rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] px-4 py-3 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--color-accent)]/30 focus:outline-none"})]}),B&&e.jsx("div",{className:"rounded-xl border border-[var(--color-text-primary)]/20 bg-[var(--color-text-primary)]/8 p-3 text-sm text-[var(--color-text-primary)]",children:B}),e.jsx("button",{type:"button",disabled:!x.trim(),onClick:ie,className:"w-full rounded-xl bg-[var(--color-accent)] px-4 py-3 text-sm font-semibold text-[var(--color-bg-base)] transition-colors hover:bg-[var(--color-accent-2)] disabled:cursor-not-allowed disabled:opacity-40",children:"Send Replay Request"})]}),H&&e.jsxs("div",{className:"flex flex-col items-center gap-3 py-12",children:[e.jsx(_e,{className:"h-8 w-8 animate-spin text-[var(--color-accent)]"}),e.jsxs("p",{className:"text-sm text-[var(--color-text-tertiary)]",children:["Replaying against ",p[0]?.providerName," API..."]})]}),y&&(()=>{const a=p.find(m=>m.spanId===M)??p[0],h=a?.outputMessages?.map(m=>S(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-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"Tokens"}),e.jsxs("div",{className:"mt-1 font-mono text-sm text-[var(--color-text-primary)]",children:[a.totalTokens," ",e.jsx("span",{className:"text-[var(--color-text-tertiary)]",children:"vs"})," ",y.totalTokens]})]}),e.jsxs("div",{className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"Duration"}),e.jsxs("div",{className:"mt-1 font-mono text-sm text-[var(--color-text-primary)]",children:[g(a.duration??0)," ",e.jsx("span",{className:"text-[var(--color-text-tertiary)]",children:"vs"})," ",g(y.duration)]})]}),e.jsxs("div",{className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"Model"}),e.jsx("div",{className:"mt-1 truncate font-mono text-xs text-[var(--color-text-primary)]",children:y.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-[var(--color-text-tertiary)]",children:"Original Response"}),e.jsx("div",{className:"max-h-[300px] overflow-y-auto rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] p-3 text-sm leading-6 text-[var(--color-text-secondary)]",children:h||e.jsx("span",{className:"text-[var(--color-text-disabled)]",children:"No content captured"})})]}),e.jsxs("div",{children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-accent)]/80",children:"Replay Response"}),e.jsx("div",{className:"max-h-[300px] overflow-y-auto rounded-xl border border-[var(--color-accent)]/12 bg-[var(--color-accent)]/6 p-3 text-sm leading-6 text-[var(--color-text-secondary)]",children:y.content||e.jsx("span",{className:"text-[var(--color-text-disabled)]",children:"Empty response"})})]})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{type:"button",onClick:()=>{C(null),T(null)},className:"flex-1 rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] px-4 py-2.5 text-sm text-[var(--color-text-secondary)] transition-colors hover:bg-[rgba(var(--ch-text-primary),0.06)]",children:"Replay Again"}),e.jsx("button",{type:"button",onClick:()=>i(!1),className:"flex-1 rounded-xl bg-[var(--color-accent)] px-4 py-2.5 text-sm font-semibold text-[var(--color-bg-base)] transition-colors hover:bg-[var(--color-accent-2)]",children:"Done"})]})]})})()]})})]})}export{ot as default};

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

@@ -0,0 +1 @@
+import{r as d,d as me,j as e}from"./query-DVWnIZNd.js";import{a as pe,S as he,g as ue,h as ve,i as be,j as ge,L as je,k as J,d as fe}from"./index-DG2eF3M2.js";import{G as Ne}from"./GettingStartedPanel-Cn46fQ1w.js";import{P as ye,c as G,a as T,b as k,f as se}from"./format-zoXqpaOb.js";import{S as E,g as Se}from"./content-DZmxO8bn.js";import{S as M,a as P,b as $,c as L,d as S}from"./select-BJEJvQo4.js";import{P as Y,C as we}from"./CommandBar-CBRbPbgc.js";import{E as A}from"./EmptyState-xDl-M9Rz.js";import{b as B,c as ae}from"./motion-CSeNjKbZ.js";import{p as V,q as Ce,r as K,Z as Te,X as re,j as ee,s as ke,t as _e,u as De,m as Ie,n as le,v as Me,w as Pe,x as $e,y as Le,d as Ee,D as He}from"./icons-BOLUIAKd.js";import"./ui-BFiKdTjl.js";const te=[25,50,100,200];function qe({trace:s,onClose:a}){const h=s.totalDuration??(s.endTime?s.endTime-s.startTime:0);return e.jsx(he,{open:!0,onOpenChange:u=>!u&&a(),children:e.jsxs(ue,{side:"right",className:"flex flex-col overflow-y-auto",children:[e.jsxs(ve,{className:"border-b border-[var(--border-dim)]",children:[e.jsx("div",{className:"hud-label",children:"Quick preview"}),e.jsx(be,{className:"truncate",children:s.name}),e.jsx(ge,{className:"sr-only",children:"Trace preview panel"})]}),e.jsxs("div",{className:"flex-1 space-y-4 p-5",children:[e.jsxs("div",{className:"surface-strong rounded-[20px] 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-[var(--color-text-secondary)]",children:s.traceId})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("div",{className:"surface-strong rounded-[20px] 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(E,{status:s.status}),e.jsx("span",{className:`text-sm font-medium ${s.status==="error"?"text-[var(--color-text-primary)]":"text-[var(--color-accent)]"}`,children:s.status==="error"?"Error":"Healthy"})]})]}),e.jsxs("div",{className:"surface-strong rounded-[20px] 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($e,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("span",{className:"text-sm font-medium text-[var(--color-text-primary)]",children:h>0?k(h):"N/A"})]})]})]}),e.jsxs("div",{className:"grid grid-cols-3 gap-3",children:[e.jsxs("div",{className:"surface-strong rounded-[20px] p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Spans"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-[var(--color-text-primary)]",children:s.spanCount}),e.jsx(Le,{className:"mx-auto mt-1 h-4 w-4 text-[var(--color-accent-2)]/70"})]}),e.jsxs("div",{className:"surface-strong rounded-[20px] p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Tokens"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-[var(--color-text-primary)]",children:se(s.totalTokens)}),e.jsx(Ee,{className:"mx-auto mt-1 h-4 w-4 text-[var(--color-accent)]/70"})]}),e.jsxs("div",{className:"surface-strong rounded-[20px] p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Cost"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-[var(--color-text-primary)]",children:T(s.totalCost)}),e.jsx(He,{className:"mx-auto mt-1 h-4 w-4 text-[var(--color-text-primary)]/70"})]})]}),e.jsxs("div",{className:"surface-strong rounded-[20px] p-4",children:[e.jsx("div",{className:"hud-label",children:"Started"}),e.jsxs("div",{className:"mt-1 text-sm text-[var(--color-text-secondary)]",children:[new Date(s.startTime).toLocaleString()," (",G(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-[var(--color-text-secondary)]",children:new Date(s.endTime).toLocaleString()})]})]}),e.jsxs(je,{to:`/trace/${s.traceId}`,className:"flex w-full items-center justify-center gap-2 rounded-2xl border border-[var(--color-accent-2)]/20 bg-[linear-gradient(135deg,rgba(var(--ch-accent-2), 0.14),rgba(var(--ch-accent), 0.08))] px-5 py-3 text-sm font-medium text-[var(--color-accent)] transition-colors hover:bg-[linear-gradient(135deg,rgba(var(--ch-accent-2), 0.24),rgba(var(--ch-accent), 0.14))]",children:["Open full trace detail",e.jsx(le,{className:"h-4 w-4"})]})]})]})})}function ze({traceA:s,traceB:a}){const[h,u]=d.useState([]),[c,n]=d.useState([]),[l,f]=d.useState(!0);if(d.useEffect(()=>{let N=!1;return f(!0),Promise.all([J(s.traceId),J(a.traceId)]).then(([i,b])=>{N||(u(i.spans),n(b.spans),f(!1))}),()=>{N=!0}},[s.traceId,a.traceId]),l)return e.jsx("div",{className:"flex items-center justify-center py-8 text-sm text-[var(--color-text-tertiary)]",children:"Loading responses..."});const o=N=>N.flatMap(i=>(i.outputMessages??[]).filter(b=>b.role==="assistant").map(b=>({spanName:i.name,model:i.responseModel??i.requestModel,content:Se(b.content)}))),v=o(h),g=o(c),r=Math.max(v.length,g.length);return r===0?e.jsx("div",{className:"flex items-center justify-center py-8 text-sm text-[var(--color-text-tertiary)]",children:"No assistant responses found in either trace."}):e.jsx("div",{className:"space-y-3",children:Array.from({length:r},(N,i)=>{const b=v[i],p=g[i];return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx("div",{className:"surface-strong rounded-[20px] border-[var(--color-accent-2)]/12 p-3",children:b?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-[var(--color-accent-2)]/16 bg-[var(--color-accent-2)]/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-[var(--color-accent)]",children:"assistant"}),e.jsx("span",{className:"font-mono text-[10px] text-[var(--color-text-tertiary)]",children:b.model})]}),e.jsx("pre",{className:"whitespace-pre-wrap font-mono text-xs leading-relaxed text-[var(--color-text-secondary)]",children:b.content||e.jsx("span",{className:"text-[var(--color-text-disabled)] italic",children:"empty response"})})]}):e.jsx("div",{className:"text-xs italic text-[var(--color-text-disabled)]",children:"No response"})}),e.jsx("div",{className:"surface-strong rounded-[20px] border-[var(--color-accent)]/12 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-[var(--color-accent)]/16 bg-[var(--color-accent)]/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-[var(--color-accent)]",children:"assistant"}),e.jsx("span",{className:"font-mono text-[10px] text-[var(--color-text-tertiary)]",children:p.model})]}),e.jsx("pre",{className:"whitespace-pre-wrap font-mono text-xs leading-relaxed text-[var(--color-text-secondary)]",children:p.content||e.jsx("span",{className:"text-[var(--color-text-disabled)] italic",children:"empty response"})})]}):e.jsx("div",{className:"text-xs italic text-[var(--color-text-disabled)]",children:"No response"})})]},i)})})}function Re({traceA:s,traceB:a,durA:h,durB:u}){const[c,n]=d.useState("cost"),l=d.useMemo(()=>[{id:"A",name:s.name,cost:s.totalCost,latency:h,tokens:s.totalTokens},{id:"B",name:a.name,cost:a.totalCost,latency:u,tokens:a.totalTokens}],[s,a,h,u]),f=r=>c==="tokens"?r.toLocaleString():c==="latency"?k(r):T(r),o=c==="tokens"?"Token distribution":c==="latency"?"Latency comparison":"Cost comparison",v=Math.max(...l.map(r=>r[c]),1),g=l[0][c]===l[1][c]?null:l[0][c]>l[1][c]?"A":"B";return e.jsxs("div",{className:"surface-strong mb-4 rounded-[24px] p-4",children:[e.jsxs("div",{className:"mb-4 flex flex-wrap items-center justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Signal lanes"}),e.jsx("div",{className:"text-sm font-medium text-[var(--color-text-primary)]",children:o})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-1 text-[10px] font-mono uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:g?`trace ${g} leading`:"even"}),e.jsxs(M,{value:c,onValueChange:r=>n(r),children:[e.jsx(P,{className:"h-8 w-[170px] text-xs",children:e.jsx($,{placeholder:"Select metric"})}),e.jsxs(L,{children:[e.jsx(S,{value:"cost",children:"Model cost ranking"}),e.jsx(S,{value:"latency",children:"Model latency ranking"}),e.jsx(S,{value:"tokens",children:"Token distribution"})]})]})]})]}),e.jsx("div",{className:"grid gap-3 md:grid-cols-2",children:l.map(r=>{const N=Math.max(r[c]/v*100,8),i=r.id==="A";return e.jsxs("div",{className:`rounded-[22px] border px-4 py-4 ${i?"border-[var(--color-accent)]/18 bg-[var(--color-accent)]/8":"border-[var(--color-accent-2)]/18 bg-[var(--color-accent-2)]/8"}`,children:[e.jsxs("div",{className:"flex items-start justify-between gap-3",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:`rounded-full border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.18em] ${i?"border-[var(--color-accent)]/22 bg-[var(--color-accent)]/12 text-[var(--color-text-primary)]":"border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/10 text-[var(--color-text-primary)]"}`,children:["Trace ",r.id]}),g===r.id?e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 text-[10px] uppercase tracking-[0.18em] text-[var(--color-text-secondary)]",children:"lead"}):null]}),e.jsx("div",{className:"mt-2 truncate text-sm font-semibold text-[var(--color-text-primary)]",children:r.name}),e.jsx("div",{className:"mt-1 font-mono text-[11px] text-[var(--color-text-tertiary)]",children:i?s.traceId.slice(0,14):a.traceId.slice(0,14)})]}),e.jsxs("div",{className:"text-right",children:[e.jsx("div",{className:"font-mono text-sm text-[var(--color-text-primary)]",children:f(r[c])}),e.jsx("div",{className:"mt-1 text-[11px] text-[var(--color-text-tertiary)]",children:r.cost>0?T(r.cost):"No cost"})]})]}),e.jsx("div",{className:"mt-4 h-2.5 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.82)]",children:e.jsx("div",{className:`h-full rounded-full ${i?"bg-[linear-gradient(90deg,var(--color-accent-2),var(--color-accent))]":"bg-[linear-gradient(90deg,var(--color-bg-panel),var(--color-accent-2))]"}`,style:{width:`${N}%`}})}),e.jsxs("div",{className:"mt-3 flex flex-wrap gap-2 text-[11px] text-[var(--color-text-tertiary)]",children:[e.jsxs("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5",children:[r.tokens.toLocaleString()," tokens"]}),e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5",children:r.latency>0?k(r.latency):"N/A"})]})]},r.id)})})]})}function Fe({traceA:s,traceB:a,onClose:h}){const[u,c]=d.useState("metrics"),n=s.totalDuration??(s.endTime?s.endTime-s.startTime:0),l=a.totalDuration??(a.endTime?a.endTime-a.startTime:0),f=[{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:n>0?k(n):"N/A",b:l>0?k(l):"N/A",diff:n>0&&l>0&&n!==l?`${l-n>0?"+":""}${k(Math.abs(l-n))}`:n===l?"same":void 0,better:n===l?"tie":n>0&&l>0&&n<l?"a":"b"}];return e.jsxs(ae.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-[var(--color-text-primary)]",children:"Side-by-side analysis"})]}),e.jsxs("button",{type:"button",onClick:h,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)]",children:[e.jsx(re,{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:()=>c("metrics"),className:`inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-xs font-semibold transition-colors ${u==="metrics"?"border-[var(--color-accent)]/22 bg-[var(--color-accent)]/12 text-[var(--color-text-primary)]":"border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"}`,children:[e.jsx(K,{className:"h-3 w-3"}),"Metrics"]}),e.jsxs("button",{type:"button",onClick:()=>c("responses"),className:`inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-xs font-semibold transition-colors ${u==="responses"?"border-[var(--color-accent)]/22 bg-[var(--color-accent)]/12 text-[var(--color-text-primary)]":"border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"}`,children:[e.jsx(Pe,{className:"h-3 w-3"}),"Response diff"]})]}),u==="metrics"?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mb-4 grid grid-cols-[110px_1fr_1fr_96px] gap-3",children:[e.jsx("div",{}),e.jsxs("div",{className:"rounded-2xl border border-[var(--color-accent)]/18 bg-[var(--color-accent)]/8 p-3",children:[e.jsx("div",{className:"hud-label",children:"Trace A"}),e.jsx("div",{className:"mt-1 truncate text-sm font-medium text-[var(--color-text-primary)]",children:s.name}),e.jsx("div",{className:"mt-0.5 font-mono text-[10px] text-[var(--color-text-tertiary)]",children:s.traceId.slice(0,16)})]}),e.jsxs("div",{className:"rounded-2xl border border-[var(--color-accent-2)]/18 bg-[var(--color-accent-2)]/8 p-3",children:[e.jsx("div",{className:"hud-label",children:"Trace B"}),e.jsx("div",{className:"mt-1 truncate text-sm font-medium text-[var(--color-text-primary)]",children:a.name}),e.jsx("div",{className:"mt-0.5 font-mono text-[10px] text-[var(--color-text-tertiary)]",children:a.traceId.slice(0,16)})]}),e.jsx("div",{className:"flex items-center justify-center text-[11px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:"Delta"})]}),e.jsx(Re,{traceA:s,traceB:a,durA:n,durB:l}),e.jsx("div",{className:"space-y-2",children:f.map(o=>e.jsxs("div",{className:"grid grid-cols-[110px_1fr_1fr_96px] items-center gap-3 rounded-2xl border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.72),rgba(var(--ch-bg-base),0.9))] px-4 py-3",children:[e.jsx("div",{className:"text-xs font-medium uppercase tracking-wider text-[var(--color-text-tertiary)]",children:o.label}),e.jsx("div",{className:`text-sm font-mono ${o.better==="a"?"text-[var(--color-accent)]":(o.better==="tie","text-[var(--color-text-secondary)]")}`,children:o.label==="Status"?e.jsxs("span",{className:"inline-flex items-center gap-1.5",children:[e.jsx(E,{status:s.status}),o.a]}):o.a}),e.jsx("div",{className:`text-sm font-mono ${o.better==="b"?"text-[var(--color-accent-2)]":(o.better==="tie","text-[var(--color-text-secondary)]")}`,children:o.label==="Status"?e.jsxs("span",{className:"inline-flex items-center gap-1.5",children:[e.jsx(E,{status:a.status}),o.b]}):o.b}),e.jsx("div",{className:"text-center text-xs font-mono text-[var(--color-text-tertiary)]",children:o.diff??"--"})]},o.label))})]}):e.jsx(ze,{traceA:s,traceB:a})]})}function Ae(){const[s,a]=pe(),h=s.get("q")??"",u=d.useDeferredValue(h),c=s.get("status"),n=c==="ok"||c==="error"?c:"",l=Number(s.get("periodHours")??"24"),f=Number(s.get("pageSize")??"50"),o=te.includes(f)?f:50,v=Math.max(1,Number(s.get("page")??"1")||1),g=(v-1)*o,[r,N]=d.useState(null),[i,b]=d.useState("desc"),[p,H]=d.useState(new Set),[q,Q]=d.useState(null),[oe,z]=d.useState(!1),_=d.useMemo(()=>({limit:o,offset:g,q:u.trim()||void 0,status:n||void 0,periodHours:Y.some(t=>t.value===l)?l:24}),[u,o,g,l,n]),{data:U,isLoading:ce}=me({queryKey:["traces",_],queryFn:()=>fe(_)}),R=U?.traces??[],w=U?.total??0,Z=Math.max(1,Math.ceil(w/o));function ne(t){r===t?b(x=>x==="asc"?"desc":"asc"):(N(t),b("desc"))}const j=d.useMemo(()=>r?[...R].sort((t,x)=>{const m=t[r]??0,y=x[r]??0;return i==="asc"?m-y:y-m}):R,[R,r,i]),D=j.length>0&&j.every(t=>p.has(t.traceId)),ie=d.useCallback(()=>{H(t=>{const x=new Set(t);if(D)for(const m of j)x.delete(m.traceId);else for(const m of j)x.add(m.traceId);return x})},[D,j]),de=d.useCallback(t=>{H(x=>{const m=new Set(x);return m.has(t)?m.delete(t):m.add(t),m})},[]),xe=d.useCallback(()=>{H(new Set),z(!1)},[]),F=d.useMemo(()=>j.filter(t=>p.has(t.traceId)),[j,p]),I=p.size===2,W=h.length>0||n.length>0||_.periodHours!==24;function C(t,x=!0){a(m=>{const y=new URLSearchParams(m);for(const[X,O]of Object.entries(t))O===void 0||O===""?y.delete(X):y.set(X,String(O));return x&&y.delete("page"),y},{replace:!0})}return e.jsxs(e.Fragment,{children:[e.jsxs(ye,{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:"deck-card deck-card--accent",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-[var(--color-text-primary)]",style:{fontFamily:"var(--font-operator)",fontSize:"30px",fontWeight:700,lineHeight:"0.92",letterSpacing:"-0.04em"},children:se(w)}),e.jsx(Me,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:"Matching current filters"})]}),p.size>0&&e.jsxs("div",{className:"deck-card",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-[var(--color-text-primary)]",children:[p.size," trace",p.size!==1&&"s"]}),e.jsx(K,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:I?"Ready to compare":"Select exactly 2 to compare"})]})]})}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsxs("strong",{children:[_.periodHours,"h"]})]}),e.jsxs("span",{className:"pill-item",children:["selected ",e.jsx("strong",{children:p.size})]}),e.jsxs("span",{className:"pill-item",children:["compare ",e.jsx("strong",{children:I?"ready":"idle"})]}),e.jsxs("span",{className:"pill-item",children:["matches ",e.jsx("strong",{children:w})]})]}),e.jsx(B,{children:p.size>0&&e.jsx(ae.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(V,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[p.size," selected"]})]}),e.jsxs("button",{type:"button",onClick:xe,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)]",children:[e.jsx(Ce,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]}),e.jsxs("button",{type:"button",disabled:!I,onClick:()=>z(!0),className:`inline-flex items-center gap-2 rounded-[var(--radius-panel)] border px-4 py-2 text-sm font-medium transition-all ${I?"border-[var(--color-accent-2)]/20 bg-[linear-gradient(135deg,rgba(var(--ch-accent-2), 0.14),rgba(var(--ch-accent), 0.08))] text-[var(--color-accent)] hover:bg-[linear-gradient(135deg,rgba(var(--ch-accent-2), 0.24),rgba(var(--ch-accent), 0.14))]":"cursor-not-allowed border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] text-[var(--color-text-tertiary)]"}`,children:[e.jsx(K,{className:"h-4 w-4"}),"Compare traces"]})]})})})}),e.jsx(B,{children:oe&&F.length===2&&e.jsx(Fe,{traceA:F[0],traceB:F[1],onClose:()=>z(!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:"page-section-title mt-1",children:"Trace explorer"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"status-chip",children:[e.jsx(Te,{className:"h-3.5 w-3.5 text-[var(--color-text-primary)]"}),e.jsxs("span",{children:[w," traces"]})]}),e.jsxs("button",{type:"button",onClick:()=>C({q:void 0,status:void 0,periodHours:void 0}),disabled:!W,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(re,{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.jsx(we,{value:h,onChange:t=>C({q:t||void 0}),placeholder:"Search by trace name, ID, or keyword..."}),e.jsxs(M,{value:n||"__all__",onValueChange:t=>C({status:t==="__all__"?void 0:t}),children:[e.jsx(P,{className:"w-full rounded-2xl py-3",children:e.jsx($,{placeholder:"All states"})}),e.jsxs(L,{children:[e.jsx(S,{value:"__all__",children:"All states"}),e.jsx(S,{value:"ok",children:"Healthy only"}),e.jsx(S,{value:"error",children:"Errors only"})]})]}),e.jsxs(M,{value:String(_.periodHours??24),onValueChange:t=>C({periodHours:Number(t)===24?void 0:Number(t)}),children:[e.jsx(P,{className:"w-full rounded-2xl py-3",children:e.jsx($,{})}),e.jsx(L,{children:Y.map(t=>e.jsx(S,{value:String(t.value),children:t.label},t.value))})]})]})]}),ce?e.jsx(A,{title:"Loading traces",description:"LLMTap is assembling the explorer feed for the current filter window.",className:"min-h-[400px]"}):j.length===0?W?e.jsx(A,{title:"No traces match these filters",description:"Try adjusting the search term or time window to widen the explorer surface.",className:"min-h-[400px]"}):e.jsx(Ne,{}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"overflow-hidden rounded-[22px] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.9),rgba(var(--ch-bg-deep),0.96),rgba(var(--ch-bg-base),0.99))] shadow-[inset_0_1px_0_rgba(var(--ch-text-primary),0.04),0_24px_56px_rgba(0,0,0,0.3)]",children:e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full min-w-[980px] border-collapse text-sm",children:[e.jsx("thead",{className:"sticky top-0 z-10 bg-[rgba(var(--ch-bg-base),0.94)] backdrop-blur-xl",children:e.jsxs("tr",{className:"text-left text-[11px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:[e.jsx("th",{className:"px-4 py-3 text-center",children:e.jsx("button",{type:"button",onClick:ie,"aria-label":D?"Deselect all traces on page":"Select all traces on page",className:"inline-flex items-center justify-center transition-colors hover:text-[var(--color-text-secondary)]",title:D?"Deselect all":"Select all",children:D?e.jsx(V,{className:"h-4 w-4 text-[var(--color-accent)]"}):e.jsx(ee,{className:"h-4 w-4"})})}),e.jsx("th",{className:"w-10 px-4 py-3",children:"State"}),e.jsx("th",{className:"px-4 py-3",children:"Trace"}),e.jsx("th",{className:"px-4 py-3",children:"ID"}),[["spanCount","Spans"],["totalTokens","Tokens"],["totalCost","Cost"],["startTime","When"]].map(([t,x])=>e.jsx("th",{className:"px-4 py-3 text-right",children:e.jsxs("button",{type:"button",onClick:()=>ne(t),className:"inline-flex items-center gap-1 transition-colors hover:text-[var(--color-text-secondary)]",children:[x,r===t?i==="asc"?e.jsx(ke,{className:"h-3 w-3"}):e.jsx(_e,{className:"h-3 w-3"}):e.jsx(De,{className:"h-3 w-3 opacity-30"})]})},t)),e.jsx("th",{className:"px-4 py-3 text-right",children:"Duration"})]})}),e.jsx("tbody",{children:j.map(t=>{const x=p.has(t.traceId),m=t.totalDuration??(t.endTime?t.endTime-t.startTime:0);return e.jsxs("tr",{onClick:()=>Q(t),className:`cursor-pointer border-t border-[var(--border-dim)] transition-colors ${x?"bg-[var(--color-accent)]/8":"hover:bg-[rgba(var(--ch-text-primary),0.03)]"}`,children:[e.jsx("td",{className:"px-4 py-3.5 text-center",onClick:y=>y.stopPropagation(),children:e.jsx("button",{type:"button",onClick:()=>de(t.traceId),"aria-label":`Select trace ${t.name}`,className:"inline-flex items-center justify-center transition-colors hover:text-[var(--color-accent)]",children:x?e.jsx(V,{className:"h-4 w-4 text-[var(--color-accent)]"}):e.jsx(ee,{className:"h-4 w-4 text-[var(--color-text-tertiary)]"})})}),e.jsx("td",{className:"px-4 py-3.5",children:e.jsx(E,{status:t.status})}),e.jsx("td",{className:"px-4 py-3.5",children:e.jsxs("div",{className:"max-w-[320px]",children:[e.jsx("div",{className:"truncate text-sm font-semibold text-[var(--color-text-primary)]",children:t.name}),e.jsxs("div",{className:"mt-1 text-[11px] text-[var(--color-text-tertiary)]",children:[G(t.startTime)," started"]})]})}),e.jsx("td",{className:"px-4 py-3.5",children:e.jsx("span",{className:"font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]",children:t.traceId.slice(0,12)})}),e.jsx("td",{className:"px-4 py-3.5 text-right font-mono text-xs text-[var(--color-text-secondary)]",children:t.spanCount}),e.jsx("td",{className:"px-4 py-3.5 text-right font-mono text-xs text-[var(--color-text-secondary)]",children:t.totalTokens.toLocaleString()}),e.jsx("td",{className:"px-4 py-3.5 text-right font-mono text-xs text-[var(--color-text-secondary)]",children:T(t.totalCost)}),e.jsx("td",{className:"px-4 py-3.5 text-right text-xs text-[var(--color-text-tertiary)]",children:G(t.startTime)}),e.jsx("td",{className:"px-4 py-3.5 text-right font-mono text-xs text-[var(--color-text-secondary)]",children:m>0?k(m):"--"})]},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-[var(--color-text-tertiary)]",children:w>0?`Showing ${g+1}-${Math.min(g+j.length,w)} of ${w}`:"Awaiting traces"}),e.jsxs(M,{value:String(o),onValueChange:t=>C({pageSize:Number(t)===50?void 0:Number(t)}),children:[e.jsx(P,{className:"w-auto rounded-xl px-2 py-1.5 text-xs",children:e.jsx($,{})}),e.jsx(L,{children:te.map(t=>e.jsxs(S,{value:String(t),children:[t," / page"]},t))})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>C({page:v>2?v-1:void 0},!1),disabled:v<=1,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(Ie,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Previous"})]}),e.jsxs("span",{className:"text-xs text-[var(--color-text-tertiary)]",children:[v," / ",Z]}),e.jsxs("button",{type:"button",onClick:()=>C({page:v+1},!1),disabled:v>=Z,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx("span",{children:"Next"}),e.jsx(le,{className:"h-3.5 w-3.5"})]})]})]})]})]})]}),q&&e.jsx(qe,{trace:q,onClose:()=>Q(null)},q.traceId)]})}export{Ae as default};