llmtap 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dashboard/assets/CommandBar-CBRbPbgc.js +1 -0
- package/dist/dashboard/assets/Costs-B-TMvDlI.js +1 -0
- package/dist/dashboard/assets/Dashboard-CFNAMjdc.js +1 -0
- package/dist/dashboard/assets/DataTable-p1PD-dJj.js +1 -0
- package/dist/dashboard/assets/EmptyState-xDl-M9Rz.js +1 -0
- package/dist/dashboard/assets/GettingStartedPanel-Cn46fQ1w.js +18 -0
- package/dist/dashboard/assets/Models-BpMhGVp5.js +1 -0
- package/dist/dashboard/assets/ProviderBadge-Cs31007s.js +1 -0
- package/dist/dashboard/assets/Sessions-CiKyTRlP.js +3 -0
- package/dist/dashboard/assets/Settings-7wRfCPnB.js +6 -0
- package/dist/dashboard/assets/TraceDetail-CKDDbbEV.js +17 -0
- package/dist/dashboard/assets/Traces-BYWwPP14.js +1 -0
- package/dist/dashboard/assets/{accordion-DZ-R65JQ.js → accordion-CC_sxDZ8.js} +1 -1
- package/dist/dashboard/assets/content-DZmxO8bn.js +2 -0
- package/dist/dashboard/assets/format-zoXqpaOb.js +1 -0
- package/dist/dashboard/assets/icons-BOLUIAKd.js +1 -0
- package/dist/dashboard/assets/index-CtlcBMi-.css +1 -0
- package/dist/dashboard/assets/index-DG2eF3M2.js +14 -0
- package/dist/dashboard/assets/motion-CSeNjKbZ.js +17 -0
- package/dist/dashboard/assets/{number-ticker-DAf-8EjI.js → number-ticker-CjofSQ3s.js} +1 -1
- package/dist/dashboard/assets/provider-colors-CTiHNYHs.js +1 -0
- package/dist/dashboard/assets/select-BJEJvQo4.js +1 -0
- package/dist/dashboard/assets/statistics-with-status-grid-tcb9SpIY.js +1 -0
- package/dist/dashboard/index.html +4 -4
- package/package.json +3 -3
- package/dist/dashboard/assets/Costs-a6RxtEyD.js +0 -1
- package/dist/dashboard/assets/Dashboard-Dc3SbA3o.js +0 -1
- package/dist/dashboard/assets/DataTable-WlvwCpLc.js +0 -1
- package/dist/dashboard/assets/GettingStartedPanel-D2-E8-3Q.js +0 -18
- package/dist/dashboard/assets/Models-BwTqYNmO.js +0 -1
- package/dist/dashboard/assets/Sessions-PuU5TiOR.js +0 -3
- package/dist/dashboard/assets/Settings-Dsgny2rQ.js +0 -6
- package/dist/dashboard/assets/StatusDot-D69CfzT5.js +0 -1
- package/dist/dashboard/assets/TraceDetail-_YLBxcmc.js +0 -17
- package/dist/dashboard/assets/Traces-B5znc91x.js +0 -1
- package/dist/dashboard/assets/constants-OlSc-7iA.js +0 -1
- package/dist/dashboard/assets/content-BRoZVvRJ.js +0 -2
- package/dist/dashboard/assets/format-wxLsIVjs.js +0 -1
- package/dist/dashboard/assets/icons-mXW2t-HS.js +0 -1
- package/dist/dashboard/assets/index-BjX-ME4E.js +0 -14
- package/dist/dashboard/assets/index-C98gdeiH.css +0 -1
- package/dist/dashboard/assets/jetbrains-mono-cyrillic-wght-normal-D73BlboJ.woff2 +0 -0
- package/dist/dashboard/assets/jetbrains-mono-greek-wght-normal-Bw9x6K1M.woff2 +0 -0
- package/dist/dashboard/assets/jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2 +0 -0
- package/dist/dashboard/assets/jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2 +0 -0
- package/dist/dashboard/assets/jetbrains-mono-vietnamese-wght-normal-Bt-aOZkq.woff2 +0 -0
- package/dist/dashboard/assets/motion-DSHPdBNu.js +0 -17
- package/dist/dashboard/assets/provider-colors-BhO_XSTV.js +0 -1
- package/dist/dashboard/assets/select-DxzgyWz-.js +0 -1
- package/dist/dashboard/assets/statistics-with-status-grid-DE7T_RSi.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as e,j as g}from"./query-DVWnIZNd.js";import{
|
|
1
|
+
import{r as e,j as g}from"./query-DVWnIZNd.js";import{c as l}from"./index-DG2eF3M2.js";import{d as w,e as E,f as N}from"./motion-CSeNjKbZ.js";function F({value:t,direction:n="up",delay:o=0,decimalPlaces:u=0,className:c,prefix:f="",suffix:p=""}){const i=e.useRef(null),m=w(i,{once:!0,margin:"0px"}),r=E(n==="down"?t:0,{damping:60,stiffness:100}),a=N(r,s=>Intl.NumberFormat("en-US",{minimumFractionDigits:u,maximumFractionDigits:u}).format(s)),[b,x]=e.useState("");return e.useEffect(()=>{if(m){const s=setTimeout(()=>{r.set(n==="down"?0:t)},o*1e3);return()=>clearTimeout(s)}},[r,m,o,t,n]),e.useEffect(()=>a.on("change",d=>{x(d)}),[a]),g.jsxs("span",{ref:i,className:l("tabular-nums",c),children:[f,b,p]})}export{F as N};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const o={openai:"var(--color-accent)",anthropic:"var(--color-accent-2)",google:"var(--color-text-primary)",deepseek:"var(--color-accent)",groq:"var(--color-accent-2)",xai:"var(--color-text-primary)"};export{o as p};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,j as e}from"./query-DVWnIZNd.js";import{s as y,V as g,t as d,I as v,u as w,v as i,w as N,x as c,y as j,z as S,B as n,E as m,L as p,F as x}from"./ui-BFiKdTjl.js";import{c as s}from"./index-DG2eF3M2.js";import{t as f,z as R,s as I}from"./icons-BOLUIAKd.js";const _=y,k=g,C=o.forwardRef(({className:t,children:r,...a},l)=>e.jsxs(d,{ref:l,className:s("flex h-9 w-full items-center justify-between gap-2 rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-3 py-2 text-sm text-[var(--color-text-secondary)] transition-colors placeholder:text-[var(--color-text-tertiary)] hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-text-primary),0.06)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/45 focus:ring-offset-2 focus:ring-offset-[var(--color-bg-base)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer [&>span]:line-clamp-1",t),...a,children:[r,e.jsx(v,{asChild:!0,children:e.jsx(f,{className:"h-4 w-4 opacity-50"})})]}));C.displayName=d.displayName;const u=o.forwardRef(({className:t,...r},a)=>e.jsx(n,{ref:a,className:s("flex cursor-default items-center justify-center py-1",t),...r,children:e.jsx(I,{className:"h-4 w-4"})}));u.displayName=n.displayName;const b=o.forwardRef(({className:t,...r},a)=>e.jsx(m,{ref:a,className:s("flex cursor-default items-center justify-center py-1",t),...r,children:e.jsx(f,{className:"h-4 w-4"})}));b.displayName=m.displayName;const z=o.forwardRef(({className:t,children:r,position:a="popper",...l},h)=>e.jsx(w,{children:e.jsxs(i,{ref:h,className:s("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.96),rgba(var(--ch-bg-base),0.99))] shadow-[0_16px_40px_rgba(0,0,0,0.5)] backdrop-blur-xl 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",a==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",t),position:a,...l,children:[e.jsx(u,{}),e.jsx(N,{className:s("p-1",a==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:r}),e.jsx(b,{})]})}));z.displayName=i.displayName;const B=o.forwardRef(({className:t,...r},a)=>e.jsx(p,{ref:a,className:s("px-2 py-1.5 text-xs font-medium text-[var(--color-text-tertiary)]",t),...r}));B.displayName=p.displayName;const V=o.forwardRef(({className:t,children:r,...a},l)=>e.jsxs(c,{ref:l,className:s("relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm text-[var(--color-text-secondary)] outline-none transition-colors hover:bg-[rgba(var(--ch-text-primary),0.06)] hover:text-[var(--color-text-primary)] focus:bg-[rgba(var(--ch-text-primary),0.06)] focus:text-[var(--color-text-primary)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",t),...a,children:[e.jsx("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:e.jsx(j,{children:e.jsx(R,{className:"h-4 w-4 text-[var(--color-accent)]"})})}),e.jsx(S,{children:r})]}));V.displayName=c.displayName;const D=o.forwardRef(({className:t,...r},a)=>e.jsx(x,{ref:a,className:s("-mx-1 my-1 h-px bg-[var(--border-dim)]",t),...r}));D.displayName=x.displayName;export{_ as S,C as a,k as b,z as c,V as d};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as e,r as x}from"./query-DVWnIZNd.js";import{c,q as m}from"./index-DG2eF3M2.js";const g=m("inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",{variants:{variant:{default:"border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.05)] text-[var(--color-text-secondary)]",success:"border-[var(--color-accent)]/20 bg-[var(--color-accent)]/14 text-[var(--color-accent)]",warning:"border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/15 text-[var(--color-accent-2)]",error:"border-[var(--color-text-primary)]/20 bg-[var(--color-text-primary)]/15 text-[var(--color-text-primary)]",info:"border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/14 text-[var(--color-accent)]",purple:"border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/14 text-[var(--color-accent)]"}},defaultVariants:{variant:"default"}});function y({className:a,variant:t,...r}){return e.jsx("div",{className:c(g({variant:t}),a),...r})}function h({label:a,value:t,subtext:r,trend:o,icon:n,glowing:s=!1,size:l="md",className:p}){const[v,d]=x.useState(!1);x.useEffect(()=>{d(!0);const u=window.setTimeout(()=>d(!1),360);return()=>window.clearTimeout(u)},[t]);const i=o?.direction==="up"?{color:"var(--color-accent)",glow:"0 0 14px rgba(var(--ch-accent), 0.18)",rotation:"-45deg"}:o?.direction==="down"?{color:"var(--color-error)",glow:"0 0 14px rgba(var(--ch-error), 0.18)",rotation:"45deg"}:{color:"var(--color-text-secondary)",glow:"none",rotation:"0deg"};return e.jsxs("div",{className:c("group card relative overflow-hidden px-4 py-3.5",l==="sm"?"min-h-[96px]":"min-h-[112px]",p),children:[e.jsx("div",{className:"pointer-events-none absolute inset-0 opacity-[0.04] [background-image:linear-gradient(rgba(var(--ch-accent),0.9)_1px,transparent_1px),linear-gradient(90deg,rgba(var(--ch-accent),0.9)_1px,transparent_1px)] [background-size:36px_36px]"}),e.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-6 top-0 h-px opacity-30 transition-opacity duration-[var(--duration-base)] ease-[var(--ease-out)] group-hover:opacity-60",style:{background:"linear-gradient(90deg, transparent, var(--color-accent), transparent)"}}),s?e.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute -right-7 -top-7 h-24 w-24 rounded-full",style:{background:"var(--bloom-soft)"}}):null,e.jsxs("div",{className:"relative flex h-full flex-col justify-between gap-3",children:[e.jsxs("div",{className:"flex items-start justify-between gap-3",children:[e.jsx("span",{className:"mono-label",children:a}),e.jsxs("div",{className:"flex items-center gap-2",children:[o?e.jsxs("span",{className:"inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-[0.12em]",style:{color:i.color,textShadow:i.glow},children:[e.jsx("svg",{viewBox:"0 0 12 12","aria-hidden":"true",className:"h-3 w-3 shrink-0",style:{transform:`rotate(${i.rotation})`},children:e.jsx("path",{d:"M6 1.5 10.5 6H7.4v4H4.6V6H1.5Z",fill:"currentColor"})}),e.jsx("span",{children:o.value})]}):null,n?e.jsx("span",{className:"flex h-8 w-8 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] text-[var(--color-text-secondary)]",children:n}):null]})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx("div",{className:c("display-num leading-none text-[34px]",l==="sm"&&"text-[22px]",!s&&"text-[var(--color-text-primary)] [text-shadow:none]",v&&"animate-[count-pop_var(--duration-slow)_var(--ease-spring)]"),children:t}),r?e.jsx("div",{className:"text-[12px] leading-5 text-[var(--color-text-secondary)]",children:r}):null]})]})]})}const b={within:{direction:"up",value:"Live"},observe:{direction:"neutral",value:"Watch"},exceed:{direction:"down",value:"Alert"},unknown:void 0};function f({status:a,value:t,title:r,className:o,range:n,icon:s}){return e.jsx(h,{label:r,value:t,subtext:n,icon:s,glowing:a==="within",trend:b[a],className:o})}function N({cards:a,className:t}){return e.jsx("div",{className:c("mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 sm:grid-cols-2 sm:px-6 lg:px-8 xl:grid-cols-4",t),children:a.map((r,o)=>e.jsx(f,{...r},`${r.title}-${o}`))})}export{y as B,N as S};
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>LLMTap — LLM Observability</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-DG2eF3M2.js"></script>
|
|
8
8
|
<link rel="modulepreload" crossorigin href="/assets/query-DVWnIZNd.js">
|
|
9
9
|
<link rel="modulepreload" crossorigin href="/assets/ui-BFiKdTjl.js">
|
|
10
|
-
<link rel="modulepreload" crossorigin href="/assets/motion-
|
|
11
|
-
<link rel="modulepreload" crossorigin href="/assets/icons-
|
|
12
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
10
|
+
<link rel="modulepreload" crossorigin href="/assets/motion-CSeNjKbZ.js">
|
|
11
|
+
<link rel="modulepreload" crossorigin href="/assets/icons-BOLUIAKd.js">
|
|
12
|
+
<link rel="stylesheet" crossorigin href="/assets/index-CtlcBMi-.css">
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
15
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "llmtap",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "DevTools for AI Agents - See every LLM call, trace agent workflows, track costs",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"dist"
|
|
11
11
|
],
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@llmtap/collector": "^0.1.
|
|
14
|
-
"@llmtap/shared": "^0.1.
|
|
13
|
+
"@llmtap/collector": "^0.1.5",
|
|
14
|
+
"@llmtap/shared": "^0.1.5",
|
|
15
15
|
"chalk": "^5.4.0",
|
|
16
16
|
"commander": "^13.0.0",
|
|
17
17
|
"open": "^10.1.0"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{j as e,r as p,d as w}from"./query-DVWnIZNd.js";import{a as k,f as C}from"./index-BjX-ME4E.js";import{B as S,S as T}from"./statistics-with-status-grid-DE7T_RSi.js";import{S as F,a as $,b as M,c as D,d as g}from"./select-DxzgyWz-.js";import{f as v,b as N,a as m,P}from"./format-wxLsIVjs.js";import{k as L,N as R,Z as V,a2 as B,a3 as K,a4 as f,O as A,B as E,a5 as W}from"./icons-mXW2t-HS.js";import{D as q}from"./DataTable-WlvwCpLc.js";import{a as j}from"./provider-colors-BhO_XSTV.js";import{b as x}from"./motion-DSHPdBNu.js";import"./ui-BFiKdTjl.js";function _({segments:t,totalLabel:o,totalValue:i}){const s=2*Math.PI*66,r=Math.max(t.reduce((l,n)=>l+n.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(148,163,184,0.12)",strokeWidth:"18"}),t.map(l=>{const n=l.value/r*s,d=-c;return c+=n,e.jsx("circle",{cx:"90",cy:"90",r:66,fill:"none",stroke:l.color,strokeWidth:"18",strokeLinecap:"round",strokeDasharray:`${n} ${s-n}`,strokeDashoffset:d,style:{filter:`drop-shadow(0 0 10px ${l.color}40)`}},l.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:o}),e.jsx("div",{className:"mt-2 text-2xl font-semibold tracking-[-0.04em] text-white",children:i}),e.jsxs("div",{className:"mt-1 text-xs text-slate-500",children:[t.length," providers active"]})]})]}),e.jsx("div",{className:"space-y-3",children:t.map(l=>{const n=l.value/r*100;return e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/6 bg-white/4 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:l.color,boxShadow:`0 0 12px ${l.color}50`}}),e.jsx("span",{className:"flex-1 text-sm font-medium capitalize text-white",children:l.label}),e.jsxs("span",{className:"font-mono text-xs text-slate-400",children:[n.toFixed(0),"%"]})]}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-full bg-slate-950/85",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${Math.max(n,6)}%`,background:`linear-gradient(90deg, ${l.color}, rgba(248,250,252,0.72))`}})}),l.detail?e.jsx("div",{className:"mt-2 text-xs text-slate-500",children:l.detail}):null]},l.label)})})]})}const b={cost:{label:"Cost ranking",barClassName:"bg-[linear-gradient(90deg,rgba(69,162,158,0.95),rgba(102,252,241,0.92))]",value:t=>t.totalCost,formatter:t=>m(t)},latency:{label:"Latency ranking",barClassName:"bg-[linear-gradient(90deg,rgba(197,198,199,0.9),rgba(102,252,241,0.78))]",value:t=>t.avgDuration,formatter:t=>N(t)},tokens:{label:"Token ranking",barClassName:"bg-[linear-gradient(90deg,rgba(102,252,241,0.96),rgba(69,162,158,0.86))]",value:t=>t.totalTokens,formatter:t=>v(t)}};function I({rows:t}){const[o,i]=p.useState("cost"),h=p.useMemo(()=>{const s=b[o].value;return[...t].sort((r,c)=>s(c)-s(r)).map((r,c,l)=>{const n=Math.max(s(l[0]??r),1),d=s(r);return{...r,rank:c+1,metricValue:d,progress:Math.max(d/n*100,6)}})},[o,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-[#66FCF1]/18 bg-[#66FCF1]/12 text-[#66FCF1]",children:[e.jsx(L,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"ranking live"})]}),e.jsxs(F,{value:o,onValueChange:s=>i(s),children:[e.jsx($,{className:"h-8 w-[170px] text-xs",children:e.jsx(M,{placeholder:"Select metric"})}),e.jsxs(D,{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(s=>e.jsxs("div",{className:"rounded-[22px] border border-white/8 bg-[linear-gradient(180deg,rgba(14,19,34,0.9),rgba(7,11,24,0.96))] 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-white/10 bg-white/6 px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.18em] text-slate-400",children:["#",s.rank]}),e.jsx("div",{className:"truncate text-sm font-semibold text-slate-100",children:s.label})]}),e.jsxs("div",{className:"mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-400",children:[e.jsx("span",{className:"rounded-full border border-white/8 bg-white/5 px-2 py-0.5 uppercase tracking-[0.16em] text-[10px] text-slate-300",children:s.provider}),e.jsxs("span",{children:[s.spanCount," calls"]}),e.jsxs("span",{children:[v(s.totalTokens)," tokens"]})]})]}),e.jsxs("div",{className:"text-right",children:[e.jsx("div",{className:"font-mono text-sm text-white",children:b[o].formatter(s.metricValue)}),e.jsx("div",{className:"mt-1 text-[11px] text-slate-500",children:o==="cost"?N(s.avgDuration):m(s.totalCost)})]})]}),e.jsx("div",{className:"mt-3 h-2.5 overflow-hidden rounded-full bg-slate-950/80",children:e.jsx("div",{className:`h-full rounded-full ${b[o].barClassName}`,style:{width:`${s.progress}%`}})})]},`${s.provider}-${s.label}`))})]})}const u="dashboard-shell rounded-[var(--radius-card)]",O={item:{hidden:{opacity:0,y:20,scale:.97},show:{opacity:1,y:0,scale:1,transition:{duration:.4,ease:[.22,1,.36,1]}}}};function se(){const[t,o]=p.useState([{id:"totalCost",desc:!0}]),{data:i,isLoading:h}=w({queryKey:["stats"],queryFn:()=>C(24)}),s=i?.byModel??[],r=i?.byProvider??[],c=s.slice(0,8).map(a=>({label:a.model,provider:a.provider,totalCost:a.totalCost,totalTokens:a.totalTokens,avgDuration:a.avgDuration??0,spanCount:a.spanCount})),l=r.map(a=>({label:a.provider,value:a.totalCost,color:j[a.provider]??"#66FCF1",detail:`${a.spanCount} calls · ${v(a.totalTokens)} tokens`})),n=[{title:"Total Cost",value:m(i?.totalCost??0),status:(i?.totalCost??0)>0?"observe":"unknown",range:"Accumulated over the last 24 hours",icon:e.jsx(R,{className:"h-4 w-4"})},{title:"Token Volume",value:v(i?.totalTokens??0),status:(i?.totalTokens??0)>0?"within":"unknown",range:`${i?.totalSpans??0} model calls observed`,icon:e.jsx(V,{className:"h-4 w-4"})},{title:"Models in Rotation",value:String(s.length),status:s.length>0?"within":"unknown",range:`${r.length} providers contributing to spend`,icon:e.jsx(B,{className:"h-4 w-4"})}],d=p.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-slate-100",children:a.original.model}),e.jsxs("div",{className:"mt-1 text-xs text-slate-400",children:[a.original.spanCount," calls in the current window"]})]})},{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:j[a.original.provider]??"#66FCF1",boxShadow:`0 0 10px ${j[a.original.provider]??"#66FCF1"}`}}),e.jsx("span",{className:"rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-slate-300",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-white/10 bg-white/5 px-2.5 py-0.5 font-mono text-xs text-slate-300",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-slate-300",children:a.original.totalTokens.toLocaleString()}),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-white",children:m(a.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"avgDuration",header:"Avg Duration",cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm text-slate-400",children:a.original.avgDuration?N(a.original.avgDuration):"-"}),meta:{className:"text-right",cellClassName:"text-right"}}],[s]);return h?e.jsxs("div",{className:"mx-auto max-w-[1500px] 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((a,y)=>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"})]})]},y))})]}):e.jsxs(P,{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(k,{}),e.jsxs("div",{className:"mt-5 space-y-4",children:[e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 p-5",children:[e.jsx("div",{className:"hud-label",children:"Highest model spend"}),e.jsx("div",{className:"mt-2 text-base font-medium text-white",children:s[0]?.model??"Awaiting traffic"}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:s[0]?`${m(s[0].totalCost)} across ${s[0].spanCount} calls`:"No model cost data yet"})]}),e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 p-5",children:[e.jsx("div",{className:"hud-label",children:"Provider spread"}),e.jsxs("div",{className:"mt-2 text-base font-medium text-white",children:[r.length," active providers"]}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:"Cost dominance becomes obvious here before it becomes expensive."})]})]})]}),children:[e.jsx(x.div,{variants:O.item,initial:"hidden",animate:"show",children:e.jsx(T,{cards:n,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:`${u} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Cost by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(K,{className:"h-3.5 w-3.5 text-[#66FCF1]"}),e.jsx("span",{children:"Spend concentration"})]})]}),c.length>0?e.jsx(I,{rows:c}):e.jsxs("div",{className:"empty-state h-[320px]",children:[e.jsx(f,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No cost data yet"}),e.jsx("div",{className:"text-center text-sm text-slate-400",children:"Model spend will stack up here as soon as traffic hits the collector."})]})]}),e.jsxs(x.div,{className:`${u} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Who is taking the budget"})]}),e.jsx(A,{className:"h-4 w-4 text-[#66FCF1]"})]}),l.length>0?e.jsx(_,{segments:l,totalLabel:"24h spend",totalValue:m(i?.totalCost??0)}):e.jsxs("div",{className:"empty-state h-[260px]",children:[e.jsx(E,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No providers yet"}),e.jsx("div",{className:"text-center text-sm text-slate-400",children:"Provider allocation appears here as soon as at least one model call is captured."})]})]})]}),s.length>0?e.jsxs(x.div,{className:`${u} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Breakdown by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(W,{className:"h-3.5 w-3.5 text-[#66FCF1]"}),e.jsxs("span",{children:[s.length," models"]})]})]}),e.jsx(q,{columns:d,data:s,sorting:t,onSortingChange:o})]}):e.jsx(x.div,{className:`${u} p-16`,initial:{opacity:0},animate:{opacity:1},children:e.jsxs("div",{className:"empty-state",children:[e.jsx(f,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No cost data yet"}),e.jsx("div",{className:"max-w-sm text-center text-sm text-slate-400",children:"Start making traced model calls and the economic layer will fill in automatically."})]})})]})}export{se as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as F,j as e,d as Q}from"./query-DVWnIZNd.js";import{u as je,L as ve,B as ie,a as fe,f as Ne,b as be,c as we}from"./index-BjX-ME4E.js";import{G as ye}from"./GettingStartedPanel-D2-E8-3Q.js";import{f as Z,a as $,P as Ce,b as ne,c as oe}from"./format-wxLsIVjs.js";import{S as Se}from"./StatusDot-D69CfzT5.js";import{B as ke,S as $e}from"./statistics-with-status-grid-DE7T_RSi.js";import{k as D,l as Fe,g as Pe,m as ce,G as Te,X as Ae,a as _e,n as Le,o as Ie,p as Me,q as De,r as de,s as He,T as xe,t as Ve,j as qe,O as Ee}from"./icons-mXW2t-HS.js";import{A as Oe,a as K,b as Y,c as J}from"./accordion-DZ-R65JQ.js";import{S as G,a as R,b as W,c as z,d as _}from"./select-DxzgyWz-.js";import{P as me}from"./constants-OlSc-7iA.js";import{b as Ge}from"./motion-DSHPdBNu.js";import"./ui-BFiKdTjl.js";const I=720,ee=320,d={top:24,right:16,bottom:42,left:16};function Re(s){if(typeof s=="number")return new Date(s).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"});const o=Number(s);return!Number.isNaN(o)&&String(s).length>=10?new Date(o).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):String(s)}function he(s){if(typeof s=="number")return s;if(!s)return 0;const o=Number(s);return Number.isFinite(o)?o:0}function se(s){if(s.length===0)return"";if(s.length===1)return`M ${s[0].x} ${s[0].y}`;let o=`M ${s[0].x} ${s[0].y}`;for(let h=0;h<s.length-1;h+=1){const c=s[h],n=s[h+1];if(!(c&&n))continue;const y=(c.x+n.x)/2;o+=` C ${y} ${c.y}, ${y} ${n.y}, ${n.x} ${n.y}`}return o}function We(s,o){if(s.length===0)return"";const h=se(s),c=s[s.length-1],n=s[0];return c&&n?`${h} L ${c.x} ${o} L ${n.x} ${o} Z`:""}function ze({data:s,xDataKey:o,primaryDataKey:h,secondaryDataKey:c}){const n=F.useId().replace(/:/g,""),[y,P]=F.useState(Math.max(0,s.length-1)),r=F.useMemo(()=>{const l=I-d.left-d.right,m=ee-d.top-d.bottom,p=d.top+m,g=Math.max(s.length-1,1),a=s.map(i=>he(i[h])),f=c?s.map(i=>he(i[c])):[],H=Math.max(...a,...f.length>0?f:[0],1),v=s.map((i,j)=>{const q=d.left+l*j/g,E=a[j]??0,N=f.length>0?f[j]??0:void 0,b=S=>p-S/H*m;return{index:j,x:q,yPrimary:b(E),ySecondary:N===void 0?void 0:b(N),label:Re(i[o]),primaryValue:E,secondaryValue:N}}),V=se(v.map(i=>({x:i.x,y:i.yPrimary}))),L=We(v.map(i=>({x:i.x,y:i.yPrimary})),p),T=c&&v.some(i=>i.ySecondary!==void 0)?se(v.map(i=>({x:i.x,y:i.ySecondary??p}))):"",B=Math.max(1,Math.floor(v.length/5)),C=v.filter((i,j)=>j===0||j===v.length-1||j%B===0);return{chartInnerWidth:l,chartInnerHeight:m,baselineY:p,maxValue:H,points:v,primaryPath:V,primaryArea:L,secondaryPath:T,ticks:C,gridLines:[.25,.5,.75].map(i=>d.top+m*i)}},[s,h,c,o]),x=r.points[Math.min(y,r.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(ke,{variant:"info",className:"border-[#66FCF1]/18 bg-[#66FCF1]/12 text-[#66FCF1]",children:[e.jsx(D,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"live trend"})]}),x?e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx("div",{className:"rounded-full border border-white/8 bg-white/6 px-3 py-1.5 text-xs font-medium text-slate-300",children:x.label}),e.jsx("div",{className:"rounded-full border border-[#45A29E]/20 bg-[#45A29E]/12 px-3 py-1.5 font-mono text-xs text-[#C5C6C7]",children:x.primaryValue.toLocaleString(void 0,{maximumFractionDigits:4})}),c&&x.secondaryValue!==void 0&&e.jsx("div",{className:"rounded-full border border-[#66FCF1]/18 bg-[#66FCF1]/10 px-3 py-1.5 font-mono text-xs text-[#C5C6C7]",children:x.secondaryValue.toLocaleString(void 0,{maximumFractionDigits:4})})]}):null]}),e.jsxs("div",{className:"relative overflow-hidden rounded-[24px] border border-white/7 bg-[linear-gradient(180deg,rgba(15,23,42,0.62),rgba(9,13,28,0.92))] 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(102,252,241,0.16),transparent_60%)]"}),e.jsxs("svg",{"aria-hidden":"true",className:"h-[320px] w-full",viewBox:`0 0 ${I} ${ee}`,children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:`line-fill-${n}`,x1:"0",x2:"0",y1:"0",y2:"1",children:[e.jsx("stop",{offset:"0%",stopColor:"#45A29E",stopOpacity:"0.38"}),e.jsx("stop",{offset:"100%",stopColor:"#45A29E",stopOpacity:"0"})]}),e.jsxs("linearGradient",{id:`line-stroke-${n}`,x1:"0",x2:"1",y1:"0",y2:"0",children:[e.jsx("stop",{offset:"0%",stopColor:"#45A29E"}),e.jsx("stop",{offset:"100%",stopColor:"#66FCF1"})]}),e.jsxs("filter",{id:`line-glow-${n}`,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"})]})]})]}),r.gridLines.map(l=>e.jsx("line",{x1:d.left,x2:I-d.right,y1:l,y2:l,stroke:"rgba(148,163,184,0.16)",strokeDasharray:"4 8"},l)),e.jsx("line",{x1:d.left,x2:I-d.right,y1:r.baselineY,y2:r.baselineY,stroke:"rgba(148,163,184,0.2)"}),r.primaryArea?e.jsx("path",{d:r.primaryArea,fill:`url(#line-fill-${n})`,opacity:"0.95"}):null,r.secondaryPath?e.jsx("path",{d:r.secondaryPath,fill:"none",stroke:"#C5C6C7",strokeLinecap:"round",strokeLinejoin:"round",strokeOpacity:"0.55",strokeWidth:"2"}):null,r.primaryPath?e.jsxs(e.Fragment,{children:[e.jsx("path",{d:r.primaryPath,fill:"none",filter:`url(#line-glow-${n})`,stroke:"url(#line-stroke-${chartId})",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2.75"}),e.jsx("path",{d:r.primaryPath,fill:"none",stroke:"rgba(255,255,255,0.16)",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1"})]}):null,x?e.jsxs(e.Fragment,{children:[e.jsx("line",{x1:x.x,x2:x.x,y1:d.top,y2:r.baselineY,stroke:"rgba(102,252,241,0.24)",strokeDasharray:"4 6"}),e.jsx("circle",{cx:x.x,cy:x.yPrimary,fill:"#C5C6C7",r:"5",stroke:"#66FCF1",strokeWidth:"3"})]}):null,r.ticks.map(l=>e.jsx("text",{x:l.x,y:ee-12,fill:"rgba(148,163,184,0.74)",fontSize:"11",textAnchor:"middle",children:l.label},`${l.index}-${l.label}`)),r.points.map((l,m)=>{const p=r.points[m-1],g=r.points[m+1],a=p?(p.x+l.x)/2:d.left,f=g?(g.x+l.x)/2:I-d.right;return e.jsx("rect",{x:a,y:d.top,width:Math.max(f-a,8),height:r.chartInnerHeight,fill:"transparent",onFocus:()=>P(l.index),onMouseEnter:()=>P(l.index)},l.index)})]}),e.jsxs("div",{className:"mt-3 grid gap-3 sm:grid-cols-3",children:[e.jsx(te,{label:"Peak",value:r.maxValue.toLocaleString(void 0,{maximumFractionDigits:4})}),e.jsx(te,{label:"Samples",value:r.points.length.toLocaleString()}),e.jsx(te,{label:"Current",value:(x?.primaryValue??0).toLocaleString(void 0,{maximumFractionDigits:4})})]})]})]})}function te({label:s,value:o}){return e.jsxs("div",{className:"rounded-2xl border border-white/7 bg-white/5 px-4 py-3",children:[e.jsx("div",{className:"hud-label",children:s}),e.jsx("div",{className:"mt-2 font-mono text-sm text-slate-200",children:o})]})}const M="dashboard-shell rounded-[var(--radius-card)]",ue=[12,25,50,100];function rt(){const[s,o]=je(),h=s.get("q")??"",c=F.useDeferredValue(h),n=s.get("provider")??"",y=s.get("status"),P=y==="ok"||y==="error"?y:"",r=Number(s.get("periodHours")??"24"),x=Number(s.get("pageSize")??"12"),l=ue.includes(x)?x:12,m=Math.max(1,Number(s.get("page")??"1")||1),p=(m-1)*l,g=F.useMemo(()=>({limit:l,offset:p,q:c.trim()||void 0,provider:n||void 0,status:P||void 0,periodHours:me.some(t=>t.value===r)?r:24}),[c,l,p,r,n,P]),{data:a}=Q({queryKey:["stats",g.periodHours],queryFn:()=>Ne(g.periodHours??24)}),{data:f,isLoading:H}=Q({queryKey:["traces",g],queryFn:()=>be(g)}),{data:v}=Q({queryKey:["insights"],queryFn:we,refetchInterval:6e4}),V=v?.insights??[],L=f?.traces??[],T=f?.total??0,B=Math.max(1,Math.ceil(T/l)),[C,i]=F.useState(null),[j,q]=F.useState("desc");function E(t){C===t?q(w=>w==="asc"?"desc":"asc"):(i(t),q("desc"))}const N=F.useMemo(()=>C?[...L].sort((t,w)=>{const O=t[C]??0,A=w[C]??0;return j==="asc"?O-A:A-O}):L,[L,C,j]),b=a?.byProvider[0],S=N[0],pe=[...new Set(a?.byProvider.map(t=>t.provider)??[])],u=a?.costOverTime.map(t=>({timestamp:t.timestamp,cost:t.cost}))??[],ae=a&&a.totalSpans>0?a.totalCost/a.totalSpans:0,U=Math.round((a?.errorRate??0)*100),ge=[{title:"Trace Volume",value:Z(a?.totalTraces??0),status:(a?.totalTraces??0)>0?"within":"unknown",range:`${a?.totalSpans??0} spans in window`,icon:e.jsx(Fe,{className:"h-4 w-4"})},{title:"Token Throughput",value:Z(a?.totalTokens??0),status:(a?.totalTokens??0)>0?"within":"unknown",range:"Token load across active filter window",icon:e.jsx(Pe,{className:"h-4 w-4"})},{title:"Spend Velocity",value:$(a?.totalCost??0),status:ae>0?"observe":"unknown",range:`${$(ae)} avg per call`,icon:e.jsx(D,{className:"h-4 w-4"})},{title:"Risk Surface",value:`${U}%`,status:U>=8?"exceed":U>=3?"observe":"within",range:`${a?.errorCount??0} failing calls`,icon:e.jsx(ce,{className:"h-4 w-4"})}],re=h.length>0||n.length>0||P.length>0||g.periodHours!==24;function k(t,w=!0){o(O=>{const A=new URLSearchParams(O);for(const[le,X]of Object.entries(t))X===void 0||X===""?A.delete(le):A.set(le,String(X));return w&&A.delete("page"),A},{replace:!0})}return e.jsxs(Ce,{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(fe,{}),e.jsxs("div",{className:"mt-4 grid gap-3",children:[e.jsxs("div",{className:"surface-strong rounded-2xl p-4",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:"text-lg font-medium capitalize text-white",children:b?.provider??"Awaiting traffic"}),e.jsx(Ee,{className:"h-4 w-4 text-[#66FCF1]"})]}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:b?`${b.spanCount} calls, ${$(b.totalCost)} spend`:"No provider activity yet"})]}),e.jsxs("div",{className:"surface-strong rounded-2xl p-4",children:[e.jsx("div",{className:"hud-label",children:"Latest trace"}),e.jsx("div",{className:"mt-2 text-base font-medium text-white",children:S?.name??"No recent traces"}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:S?`${oe(S.startTime)} / ${S.spanCount} spans`:"Start sending spans to populate the deck"})]})]})]}),children:[e.jsx($e,{cards:ge,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:`${M} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Cost gradient"})]}),e.jsxs("div",{className:"status-chip",children:[e.jsx(Te,{className:"h-3.5 w-3.5 text-[#66FCF1]"}),e.jsxs("span",{children:[g.periodHours,"h window"]})]})]}),u.length>0?e.jsxs("div",{className:"overflow-hidden rounded-[var(--radius-card)] border border-white/[0.08] bg-[linear-gradient(180deg,rgba(6,12,22,0.98),rgba(4,8,17,0.98))] p-4",children:[e.jsx(ze,{data:u,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-white",children:$(u.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-white",children:$(Math.max(...u.map(t=>t.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 ${(u.at(-1)?.cost??0)-(u.at(-2)?.cost??u.at(-1)?.cost??0)>=0?"text-[#66FCF1]":"text-[#C5C6C7]"}`,children:[(u.at(-1)?.cost??0)-(u.at(-2)?.cost??u.at(-1)?.cost??0)>=0?"+":"-",$(Math.abs((u.at(-1)?.cost??0)-(u.at(-2)?.cost??u.at(-1)?.cost??0)))]})]})]})]}):e.jsxs("div",{className:"empty-state h-[320px]",children:[e.jsx(D,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No cost movement yet"}),e.jsx("div",{className:"max-w-sm text-center text-sm text-slate-500",children:"This turns into a live spend curve as soon as the collector receives traced calls."})]})]}),e.jsxs("section",{className:`${M} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Allocation by provider"})]}),e.jsx("div",{className:"space-y-4",children:(a?.byProvider??[]).map(t=>{const w=(a?.totalCost??0)>0?t.totalCost/(a?.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("div",{className:"text-sm font-medium capitalize text-white",children:t.provider}),e.jsxs("div",{className:"text-[length:var(--text-caption)] text-slate-400",children:[t.spanCount," calls / ",Z(t.totalTokens)," tokens"]})]}),e.jsxs("div",{className:"text-right",children:[e.jsx("div",{className:"text-sm font-medium text-white",children:$(t.totalCost)}),e.jsx("div",{className:"text-[length:var(--text-caption)] text-slate-500",children:ne(t.avgDuration)})]})]}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-full bg-slate-900/80",children:e.jsx(Ge.div,{className:"h-full w-full origin-left rounded-full bg-[linear-gradient(90deg,#45A29E,#66FCF1)]",initial:{scaleX:0},animate:{scaleX:Math.max(w,4)/100},transition:{duration:.5,ease:"easeOut"}})})]},t.provider)})})]})]}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.45fr)_minmax(320px,0.85fr)]",children:[e.jsxs("section",{className:`${M} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Trace dispatch queue"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"status-chip",children:[T," matches"]}),e.jsxs("button",{type:"button",onClick:()=>k({q:void 0,provider:void 0,status:void 0,periodHours:void 0}),disabled:!re,className:"status-chip transition-all duration-[--duration-normal] hover:border-white/[0.14] hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(Ae,{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.jsxs("label",{className:"field-surface relative block rounded-2xl",children:[e.jsx(_e,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500"}),e.jsx("input",{value:h,onChange:t=>k({q:t.target.value||void 0}),placeholder:"Search traces, models, providers, errors",className:"w-full rounded-2xl bg-transparent py-3 pl-10 pr-4 text-sm text-white placeholder:text-slate-500 focus:outline-none"})]}),e.jsxs(G,{value:n||"__all__",onValueChange:t=>k({provider:t==="__all__"?void 0:t}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{placeholder:"All providers"})}),e.jsxs(z,{children:[e.jsx(_,{value:"__all__",children:"All providers"}),pe.map(t=>e.jsx(_,{value:t,children:t},t))]})]}),e.jsxs(G,{value:P||"__all__",onValueChange:t=>k({status:t==="__all__"?void 0:t}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{placeholder:"All states"})}),e.jsxs(z,{children:[e.jsx(_,{value:"__all__",children:"All states"}),e.jsx(_,{value:"ok",children:"Healthy only"}),e.jsx(_,{value:"error",children:"Errors only"})]})]}),e.jsxs(G,{value:String(g.periodHours??24),onValueChange:t=>k({periodHours:Number(t)===24?void 0:Number(t)}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{})}),e.jsx(z,{children:me.map(t=>e.jsx(_,{value:String(t.value),children:t.label},t.value))})]})]})]}),H?e.jsx("div",{className:"empty-state h-[280px] text-slate-500",children:"Loading trace queue..."}):N.length===0&&!re?e.jsx(ye,{}):N.length===0?e.jsxs("div",{className:"empty-state h-[280px]",children:[e.jsx(Le,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No traces match these filters"})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full border-separate border-spacing-y-2 text-sm",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"text-left text-[length:var(--text-hud)] uppercase tracking-[var(--tracking-hud)] text-slate-500",children:[e.jsx("th",{className:"px-4 py-2",children:"State"}),e.jsx("th",{className:"px-4 py-2",children:"Trace"}),[["spanCount","Spans"],["totalTokens","Tokens"],["totalCost","Cost"],["startTime","When"]].map(([t,w])=>e.jsx("th",{className:"px-4 py-2 text-right",children:e.jsxs("button",{type:"button",onClick:()=>E(t),className:"inline-flex items-center gap-1 transition-colors duration-[--duration-fast] hover:text-slate-300",children:[w,C===t?j==="asc"?e.jsx(Ie,{className:"h-3 w-3"}):e.jsx(Me,{className:"h-3 w-3"}):e.jsx(De,{className:"h-3 w-3 opacity-30"})]})},t))]})}),e.jsx("tbody",{children:N.map(t=>e.jsxs("tr",{className:"table-row-surface rounded-2xl",children:[e.jsx("td",{className:"rounded-l-2xl px-4 py-4",children:e.jsx(Se,{status:t.status})}),e.jsx("td",{className:"px-4 py-4",children:e.jsxs(ve,{to:`/trace/${t.traceId}`,className:"group inline-flex max-w-[380px] flex-col gap-1 text-sm font-medium text-white transition-colors duration-[--duration-normal] hover:text-[#66FCF1]",children:[e.jsxs("span",{className:"inline-flex items-center gap-2",children:[e.jsx("span",{className:"truncate",children:t.name}),e.jsx(de,{className:"h-3.5 w-3.5 opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100"})]}),e.jsxs("span",{className:"font-mono text-[length:var(--text-hud)] uppercase tracking-[var(--tracking-hud)] text-slate-500",children:[t.traceId.slice(0,12),t.totalDuration?` / ${ne(t.totalDuration)}`:""]})]})}),e.jsx("td",{className:"px-4 py-4 text-right font-mono text-[length:var(--text-caption)] text-slate-300",children:t.spanCount}),e.jsx("td",{className:"px-4 py-4 text-right font-mono text-[length:var(--text-caption)] text-slate-300",children:t.totalTokens.toLocaleString()}),e.jsx("td",{className:"px-4 py-4 text-right font-mono text-[length:var(--text-caption)] text-slate-300",children:$(t.totalCost)}),e.jsx("td",{className:"rounded-r-2xl px-4 py-4 text-right text-[length:var(--text-caption)] text-slate-500",children:oe(t.startTime)})]},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-[length:var(--text-caption)] text-slate-500",children:T>0?`Showing ${p+1}-${Math.min(p+N.length,T)} of ${T}`:"Awaiting traces"}),e.jsxs(G,{value:String(l),onValueChange:t=>k({pageSize:Number(t)===12?void 0:Number(t)}),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(z,{children:ue.map(t=>e.jsxs(_,{value:String(t),children:[t," / page"]},t))})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(ie,{variant:"outline",size:"sm",onClick:()=>k({page:m>2?m-1:void 0},!1),disabled:m<=1,children:[e.jsx(He,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Previous"})]}),e.jsxs(ie,{variant:"outline",size:"sm",onClick:()=>k({page:m+1},!1),disabled:m>=B,children:[e.jsx("span",{children:"Next"}),e.jsx(de,{className:"h-3.5 w-3.5"})]})]})]})]})]}),e.jsxs("section",{className:`${M} p-5`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Intelligence layer"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Insights"})]}),e.jsx("div",{className:"space-y-4",children:V.length>0?V.map(t=>e.jsxs("div",{className:`rounded-2xl border p-4 ${t.severity==="critical"?"border-[#C5C6C7]/18 bg-[#C5C6C7]/8":t.severity==="warning"?"border-[#45A29E]/18 bg-[#45A29E]/8":"border-white/[0.06] bg-white/[0.04]"}`,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-white",children:[t.type==="cost_anomaly"&&e.jsx(xe,{className:"h-4 w-4 text-[#45A29E]"}),t.type==="error_pattern"&&e.jsx(ce,{className:"h-4 w-4 text-[#C5C6C7]"}),t.type==="model_recommendation"&&e.jsx(Ve,{className:"h-4 w-4 text-[#66FCF1]"}),t.type==="token_waste"&&e.jsx(D,{className:"h-4 w-4 text-[#45A29E]"}),t.title]}),t.metric&&e.jsx("span",{className:"shrink-0 rounded-full border border-white/[0.08] bg-white/[0.05] px-2 py-0.5 font-mono text-[length:var(--text-hud)] text-slate-400",children:t.metric})]}),e.jsx("p",{className:"text-sm leading-6 text-slate-400",children:t.description})]},t.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-white",children:[e.jsx(qe,{className:"h-4 w-4 text-[#66FCF1]"}),"Health read"]}),e.jsx("p",{className:"text-sm leading-6 text-slate-400",children:(a?.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-white",children:[e.jsx(D,{className:"h-4 w-4 text-[#45A29E]"}),"Spend insight"]}),e.jsx("p",{className:"text-sm leading-6 text-slate-400",children:b?`${b.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-white",children:[e.jsx(xe,{className:"h-4 w-4 text-[#C5C6C7]"}),"Queue focus"]}),e.jsx("p",{className:"text-sm leading-6 text-slate-400",children:S?`Latest traffic is "${S.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:`${M} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"What this surface is telling you"})]}),e.jsxs(Oe,{defaultValue:["queue-health"],multiple:!0,children:[e.jsxs(K,{value:"queue-health",className:"border-white/8",children:[e.jsx(Y,{className:"text-base text-white hover:no-underline",children:"What should I check first when I open LLMTap?"}),e.jsx(J,{className:"leading-6 text-slate-400",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(K,{value:"traces-vs-economics",className:"border-white/8",children:[e.jsx(Y,{className:"text-base text-white hover:no-underline",children:"When do I move from Overview to Traces or Economics?"}),e.jsx(J,{className:"leading-6 text-slate-400",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(K,{value:"healthy-window",className:"border-white/8",children:[e.jsx(Y,{className:"text-base text-white hover:no-underline",children:"What does a healthy window look like?"}),e.jsx(J,{className:"leading-6 text-slate-400",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{rt as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as n,j as e,e as _,f as x,h as F,i as H,k as I}from"./query-DVWnIZNd.js";import{S as h,a as p,b as u,c as f,d as w}from"./select-DxzgyWz-.js";import{j as i}from"./index-BjX-ME4E.js";import{a9 as M,aa as A,ab as z,q as G,ac as E,ad as U,U as B,ae as L}from"./icons-mXW2t-HS.js";const j=n.forwardRef(({className:l,...s},o)=>e.jsx("div",{className:"relative w-full overflow-x-auto",children:e.jsx("table",{ref:o,className:i("w-full caption-bottom text-sm",l),...s})}));j.displayName="Table";const v=n.forwardRef(({className:l,...s},o)=>e.jsx("thead",{ref:o,className:i("[&_tr]:border-b [&_tr]:border-white/6",l),...s}));v.displayName="TableHeader";const N=n.forwardRef(({className:l,...s},o)=>e.jsx("tbody",{ref:o,className:i("[&_tr:last-child]:border-0",l),...s}));N.displayName="TableBody";const q=n.forwardRef(({className:l,...s},o)=>e.jsx("tfoot",{ref:o,className:i("border-t border-white/6 bg-white/3 font-medium [&>tr]:last:border-b-0",l),...s}));q.displayName="TableFooter";const g=n.forwardRef(({className:l,...s},o)=>e.jsx("tr",{ref:o,className:i("border-b border-white/5 transition-colors hover:bg-white/[0.03] data-[state=selected]:bg-[#66FCF1]/[0.08]",l),...s}));g.displayName="TableRow";const y=n.forwardRef(({className:l,...s},o)=>e.jsx("th",{ref:o,className:i("h-10 px-3 text-left align-middle text-xs font-semibold uppercase tracking-wider text-slate-500 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",l),...s}));y.displayName="TableHead";const C=n.forwardRef(({className:l,...s},o)=>e.jsx("td",{ref:o,className:i("px-3 py-3 align-middle text-slate-300 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",l),...s}));C.displayName="TableCell";const J=n.forwardRef(({className:l,...s},o)=>e.jsx("caption",{ref:o,className:i("mt-4 text-sm text-slate-500",l),...s}));J.displayName="TableCaption";function X({columns:l,data:s,sorting:o,onSortingChange:S,emptyState:R,rowClassName:b,onRowClick:m}){const[P,T]=n.useState({}),[D,k]=n.useState({pageIndex:0,pageSize:10}),r=_({data:s,columns:l,state:{sorting:o??[],columnVisibility:P,pagination:D},onSortingChange:S,onColumnVisibilityChange:T,onPaginationChange:k,getCoreRowModel:I(),getSortedRowModel:H(),getPaginationRowModel:F(),manualPagination:!1});return s.length===0?R??e.jsx("div",{className:"empty-state h-65 text-slate-500",children:"No rows available."}):e.jsxs("div",{className:"relative overflow-hidden rounded-[var(--radius-card)] border border-white/10 bg-[linear-gradient(180deg,rgba(8,13,24,0.97),rgba(4,8,17,0.98))] shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_20px_46px_rgba(0,0,0,0.36)]",children:[e.jsx("div",{className:"pointer-events-none absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,rgba(125,211,252,0.28),transparent)]"}),e.jsx("div",{className:"pointer-events-none absolute -left-20 top-0 h-40 w-40 rounded-full bg-[#66FCF1]/8 blur-3xl"}),e.jsx("div",{className:"pointer-events-none absolute -right-16 bottom-0 h-36 w-36 rounded-full bg-[#45A29E]/8 blur-3xl"}),e.jsxs("div",{className:"relative z-10 flex items-center justify-between gap-3 border-b border-white/8 bg-white/[0.03] px-4 py-3.5 sm:px-5",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.22em] text-slate-400",children:"Grid controls"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(M,{className:"h-4 w-4 text-slate-400"}),e.jsxs(h,{value:r.getAllColumns().filter(a=>a.getIsVisible()).length.toString(),onValueChange:a=>{const t=Number(a);r.getAllColumns().filter(d=>d.getCanHide()&&typeof d.accessorFn<"u").forEach((d,V)=>{d.toggleVisibility(V<t)})},children:[e.jsx(p,{className:"h-8 w-42.5 border-white/10 bg-slate-950/60 text-xs text-slate-200",children:e.jsx(u,{placeholder:"Visible columns"})}),e.jsx(f,{children:[2,3,4,5,6,7,8].map(a=>e.jsxs(w,{value:a.toString(),children:["Show ",a," columns"]},a))})]})]})]}),e.jsx("div",{className:"relative max-h-[62vh] overflow-auto",children:e.jsxs(j,{className:"min-w-195 w-full table-auto",children:[e.jsx(v,{className:"sticky top-0 z-20 bg-[rgba(8,14,26,0.96)] backdrop-blur-xl",children:r.getHeaderGroups().map(a=>e.jsx(g,{className:"border-b border-white/8 bg-[linear-gradient(90deg,rgba(15,23,42,0.72),rgba(8,14,26,0.96),rgba(15,23,42,0.72))] hover:bg-[linear-gradient(90deg,rgba(15,23,42,0.72),rgba(8,14,26,0.96),rgba(15,23,42,0.72))]",children:a.headers.map(t=>{const c=t.column.getCanSort(),d=t.column.getIsSorted();return e.jsx(y,{className:i("h-12 whitespace-nowrap border-b border-white/8 px-4 text-[10px] font-semibold tracking-[0.18em] text-slate-400",t.column.columnDef.meta&&typeof t.column.columnDef.meta=="object"&&"className"in t.column.columnDef.meta?String(t.column.columnDef.meta.className):void 0),children:t.isPlaceholder?null:c?e.jsxs("button",{type:"button",onClick:t.column.getToggleSortingHandler(),className:"inline-flex items-center gap-1.5 transition-colors hover:text-white",children:[x(t.column.columnDef.header,t.getContext()),d==="asc"?e.jsx(A,{className:"h-3 w-3"}):d==="desc"?e.jsx(z,{className:"h-3 w-3"}):e.jsx(G,{className:"h-3 w-3 opacity-35"})]}):x(t.column.columnDef.header,t.getContext())},t.id)})},a.id))}),e.jsx(N,{children:r.getRowModel().rows.map(a=>e.jsx(g,{onClick:m?()=>m(a):void 0,className:i("group border-b border-white/7 bg-transparent transition-colors hover:bg-white/[0.035]",m?"cursor-pointer":void 0,typeof b=="function"?b(a):b),children:a.getVisibleCells().map((t,c)=>e.jsx(C,{className:i("border-b border-white/7 px-4 py-3.5 align-middle transition-colors duration-200 group-hover:border-[#66FCF1]/10",c===0?"pl-5":void 0,c===a.getVisibleCells().length-1?"pr-5":void 0,t.column.columnDef.meta&&typeof t.column.columnDef.meta=="object"&&"cellClassName"in t.column.columnDef.meta?String(t.column.columnDef.meta.cellClassName):void 0),children:x(t.column.columnDef.cell,t.getContext())},t.id))},a.id))})]})}),e.jsxs("div",{className:"relative z-10 flex items-center justify-between gap-3 border-t border-white/8 bg-white/[0.025] px-4 py-3 sm:px-5",children:[e.jsxs("div",{className:"hidden items-center gap-2 text-xs text-slate-400 md:flex",children:[e.jsx("span",{children:"Rows per page"}),e.jsxs(h,{value:String(r.getState().pagination.pageSize),onValueChange:a=>r.setPageSize(Number(a)),children:[e.jsx(p,{className:"h-8 w-20 border-white/10 bg-slate-950/60 text-xs",children:e.jsx(u,{})}),e.jsx(f,{side:"top",children:[10,20,30,40,50].map(a=>e.jsx(w,{value:String(a),children:a},a))})]})]}),e.jsxs("div",{className:"text-xs font-medium text-slate-300",children:["Page ",r.getState().pagination.pageIndex+1," of ",r.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-2xl border border-white/10 bg-slate-950/70 text-slate-300 transition-colors hover:border-white/16 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>r.setPageIndex(0),disabled:!r.getCanPreviousPage(),"aria-label":"Go to first page",children:e.jsx(E,{className:"h-4 w-4"})}),e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-2xl border border-white/10 bg-slate-950/70 text-slate-300 transition-colors hover:border-white/16 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>r.previousPage(),disabled:!r.getCanPreviousPage(),"aria-label":"Go to previous 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-2xl border border-white/10 bg-slate-950/70 text-slate-300 transition-colors hover:border-white/16 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>r.nextPage(),disabled:!r.getCanNextPage(),"aria-label":"Go to next 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-2xl border border-white/10 bg-slate-950/70 text-slate-300 transition-colors hover:border-white/16 hover:text-white disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>r.setPageIndex(r.getPageCount()-1),disabled:!r.getCanNextPage(),"aria-label":"Go to last page",children:e.jsx(L,{className:"h-4 w-4"})})]})]})]})}export{X as D};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import{r as p,j as e}from"./query-DVWnIZNd.js";import{al as x,ak as h,F as u,J as b,E as g,Y as w}from"./icons-mXW2t-HS.js";const m={openai:{label:"OpenAI",wrapCode:`import OpenAI from "openai";
|
|
2
|
-
import { wrap } from "@llmtap/sdk";
|
|
3
|
-
|
|
4
|
-
const client = wrap(new OpenAI());`,requestCode:`await client.chat.completions.create({
|
|
5
|
-
model: "gpt-4o-mini",
|
|
6
|
-
messages: [{ role: "user", content: "Hello!" }],
|
|
7
|
-
});`},anthropic:{label:"Anthropic",wrapCode:`import Anthropic from "@anthropic-ai/sdk";
|
|
8
|
-
import { wrap } from "@llmtap/sdk";
|
|
9
|
-
|
|
10
|
-
const client = wrap(new Anthropic());`,requestCode:`await client.messages.create({
|
|
11
|
-
model: "claude-sonnet-4-20250514",
|
|
12
|
-
max_tokens: 256,
|
|
13
|
-
messages: [{ role: "user", content: "Hello!" }],
|
|
14
|
-
});`},gemini:{label:"Gemini",wrapCode:`import { GoogleGenerativeAI } from "@google/generative-ai";
|
|
15
|
-
import { wrap } from "@llmtap/sdk";
|
|
16
|
-
|
|
17
|
-
const genAI = wrap(new GoogleGenerativeAI(process.env.GOOGLE_API_KEY!));
|
|
18
|
-
const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash" });`,requestCode:'await model.generateContent("Hello!");'}};function o({label:t,text:r,copied:i,onCopy:s}){return e.jsx("button",{type:"button",onClick:()=>s(t,r),className:"rounded-2xl border border-white/10 bg-white/5 p-1.5 text-slate-400 transition-colors hover:text-white",title:`Copy ${t}`,children:i===t?e.jsx(g,{className:"h-3.5 w-3.5 text-[#66FCF1]"}):e.jsx(w,{className:"h-3.5 w-3.5"})})}function v({compact:t=!1}){const[r,i]=p.useState("openai"),[s,c]=p.useState(null),l=m[r];function n(a,d){navigator.clipboard.writeText(d).catch(()=>{}),c(a),window.setTimeout(()=>c(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-white",children:"LLMTap is already running locally. The remaining change happens in your app."}),e.jsxs("p",{className:"mt-3 text-sm leading-6 text-slate-400",children:["Running ",e.jsx("code",{className:"rounded bg-white/10 px-1.5 py-0.5 font-mono text-slate-300",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-[#45A29E]/18 bg-[#45A29E]/10 p-4 text-sm text-[#C5C6C7]",children:["Put the wrap code in the same file where your app currently does"," ",e.jsx("code",{className:"rounded bg-black/20 px-1.5 py-0.5 font-mono text-[#66FCF1]",children:"new OpenAI()"}),","," ",e.jsx("code",{className:"rounded bg-black/20 px-1.5 py-0.5 font-mono text-[#66FCF1]",children:"new Anthropic()"}),", or"," ",e.jsx("code",{className:"rounded bg-black/20 px-1.5 py-0.5 font-mono text-[#66FCF1]",children:"new GoogleGenerativeAI()"}),"."]}),e.jsx("div",{className:"mt-5 flex flex-wrap gap-2",children:Object.entries(m).map(([a,d])=>e.jsx("button",{type:"button",onClick:()=>i(a),className:`rounded-full border px-4 py-1.5 text-sm font-semibold transition-colors ${r===a?"border-[#45A29E]/20 bg-[#45A29E]/12 text-[#66FCF1]":"border-white/10 bg-white/5 text-slate-400 hover:text-white"}`,children:d.label},a))}),e.jsxs("div",{className:`mt-5 grid gap-5 ${t?"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-[#45A29E]/15 text-xs font-bold text-[#66FCF1]",children:"1"}),e.jsx("div",{className:"text-sm font-semibold text-white",children:"Collector is already up"})]}),e.jsx("p",{className:"mt-3 text-sm leading-6 text-slate-400",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-white/10 bg-black/40 p-3",children:[e.jsx("pre",{className:"overflow-x-auto text-sm leading-relaxed text-[#66FCF1]",children:"npx llmtap"}),e.jsx(o,{label:"start",text:"npx llmtap",copied:s,onCopy:n})]})]}),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-[#45A29E]/15 text-xs font-bold text-[#66FCF1]",children:"2"}),e.jsx("div",{className:"text-sm font-semibold text-white",children:"Wrap your existing client"})]}),e.jsx("p",{className:"mt-3 text-sm leading-6 text-slate-400",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-white/10 bg-black/40 p-3",children:[e.jsx("pre",{className:"overflow-x-auto text-sm leading-relaxed text-[#66FCF1]",children:l.wrapCode}),e.jsx(o,{label:"wrap",text:l.wrapCode,copied:s,onCopy:n})]})]}),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-[#45A29E]/15 text-xs font-bold text-[#66FCF1]",children:"3"}),e.jsx("div",{className:"text-sm font-semibold text-white",children:"Run one real request"})]}),e.jsx("p",{className:"mt-3 text-sm leading-6 text-slate-400",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-white/10 bg-black/40 p-3",children:[e.jsx("pre",{className:"overflow-x-auto text-sm leading-relaxed text-[#66FCF1]",children:l.requestCode}),e.jsx(o,{label:"request",text:l.requestCode,copied:s,onCopy:n})]})]})]}),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-white",children:[e.jsx(x,{className:"h-4 w-4 text-[#66FCF1]"}),"Where this code usually goes"]}),e.jsxs("div",{className:"grid gap-3 text-sm text-slate-400 sm:grid-cols-2",children:[e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 px-4 py-3",children:"Next.js route or server action"}),e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 px-4 py-3",children:"Express / Fastify backend file"}),e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 px-4 py-3",children:"Agent runner or worker script"}),e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 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-white",children:[e.jsx(h,{className:"h-4 w-4 text-[#45A29E]"}),"How to know it worked"]}),e.jsxs("div",{className:"space-y-3 text-sm text-slate-400",children:[e.jsx("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 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-white/10 bg-white/5 px-4 py-3",children:"Token, cost, and latency numbers start changing."}),e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 px-4 py-3",children:["If nothing appears, run ",e.jsx("code",{className:"rounded bg-white/10 px-1.5 py-0.5 font-mono text-slate-300",children:"npx llmtap doctor"}),"."]})]})]})]}),e.jsxs("div",{className:"mt-5 flex flex-wrap gap-3 text-sm text-slate-400",children:[e.jsxs("span",{className:"status-chip border-[#45A29E]/16 bg-[#45A29E]/12 text-[#66FCF1]",children:[e.jsx(u,{className:"h-3.5 w-3.5"}),"Collector + dashboard start automatically"]}),e.jsxs("span",{className:"status-chip border-[#66FCF1]/16 bg-[#66FCF1]/10 text-[#66FCF1]",children:[e.jsx(b,{className:"h-3.5 w-3.5"}),"One real request is enough to validate the setup"]})]})]})}export{v as G};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as h,d as N,j as e}from"./query-DVWnIZNd.js";import{a as j,f as b}from"./index-BjX-ME4E.js";import{D as y}from"./DataTable-WlvwCpLc.js";import{b as d,f as u,a as c,P as f}from"./format-wxLsIVjs.js";import{N as C}from"./number-ticker-DAf-8EjI.js";import{a as p}from"./provider-colors-BhO_XSTV.js";import{b as i}from"./motion-DSHPdBNu.js";import{B as w,z as k,g as F,G as D}from"./icons-mXW2t-HS.js";import"./ui-BFiKdTjl.js";import"./select-DxzgyWz-.js";const l="dashboard-shell rounded-[var(--radius-card)]";function g({rows:s,valueFormatter:r,barClassName:n}){const o=Math.max(...s.map(t=>t.value),1);return e.jsx("div",{className:"space-y-4",children:s.map(t=>e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-[linear-gradient(180deg,rgba(10,16,28,0.9),rgba(5,10,20,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-slate-200",children:t.name}),e.jsx("span",{className:"font-mono text-sm text-slate-400",children:r(t.value)})]}),e.jsx("div",{className:"mt-3 h-2.5 overflow-hidden rounded-full bg-slate-950/80",children:e.jsx(i.div,{className:`h-full rounded-full ${n}`,initial:{width:0},animate:{width:`${Math.max(t.value/o*100,6)}%`},transition:{duration:.45,ease:"easeOut"}})})]},t.name))})}function z(){const[s,r]=h.useState([{id:"totalCost",desc:!0}]),{data:n,isLoading:o}=N({queryKey:["stats",168],queryFn:()=>b(168)}),t=n?.byModel??[],m=t.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),x=t.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),v=h.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-slate-100",children:a.original.model}),e.jsxs("div",{className:"mt-1 text-xs text-slate-400",children:[a.original.avgDuration?d(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:p[a.original.provider]??"#66FCF1",boxShadow:`0 0 10px ${p[a.original.provider]??"#66FCF1"}`}}),e.jsx("span",{className:"rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-slate-300",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-white/10 bg-white/5 px-2.5 py-0.5 font-mono text-xs text-slate-300",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-slate-300",children:u(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-white",children:c(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-slate-400",children:a.original.avgDuration?d(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-slate-500",children:a.original.spanCount>0?c(a.original.totalCost/a.original.spanCount):"-"}),meta:{className:"text-right",cellClassName:"text-right"}}],[]);return o?e.jsxs("div",{className:"mx-auto max-w-[1500px] 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.jsx(f,{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(j,{}),e.jsxs("div",{className:"mt-5 space-y-4",children:[e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 p-5",children:[e.jsx("div",{className:"hud-label",children:"Models active"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-white",children:e.jsx(C,{value:t.length})}),e.jsxs("div",{className:"mt-1 text-sm text-slate-400",children:["Across ",new Set(t.map(a=>a.provider)).size," providers"]})]}),e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 p-5",children:[e.jsx("div",{className:"hud-label",children:"Highest cost model"}),e.jsx("div",{className:"mt-2 text-base font-medium text-white",children:t[0]?.model??"No data"}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:t[0]?c(t[0].totalCost):"-"})]})]})]}),children:t.length>0?e.jsxs(e.Fragment,{children:[e.jsxs(i.div,{className:`${l} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Performance by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(w,{className:"h-3.5 w-3.5 text-[#66FCF1]"}),e.jsxs("span",{children:[t.length," models"]})]})]}),e.jsx(y,{columns:v,data:t,sorting:s,onSortingChange:r})]}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-2",children:[e.jsxs(i.div,{className:`${l} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Average latency by model"})]}),e.jsx(k,{className:"h-4 w-4 text-[#66FCF1]"})]}),m.length>0?e.jsx(g,{rows:m,valueFormatter:d,barClassName:"bg-[linear-gradient(90deg,rgba(69,162,158,0.95),rgba(102,252,241,0.78))]"}):e.jsx("div",{className:"empty-state h-[280px] text-slate-500",children:"No latency data available yet."})]}),e.jsxs(i.div,{className:`${l} 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:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Token volume by model"})]}),e.jsx(F,{className:"h-4 w-4 text-[#45A29E]"})]}),x.length>0?e.jsx(g,{rows:x,valueFormatter:u,barClassName:"bg-[linear-gradient(90deg,rgba(102,252,241,0.95),rgba(69,162,158,0.78))]"}):e.jsx("div",{className:"empty-state h-[280px] text-slate-500",children:"No token distribution data available yet."})]})]})]}):e.jsx("div",{className:`${l} p-16`,children:e.jsxs("div",{className:"empty-state",children:[e.jsx(D,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No models tracked yet"}),e.jsx("div",{className:"max-w-sm text-center text-sm text-slate-400",children:"Start sending traced API calls and model metrics will populate automatically."})]})})})}export{z as default};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import{r as n,d as g,j as e}from"./query-DVWnIZNd.js";import{L as j,a as f,q as v}from"./index-BjX-ME4E.js";import{D as C}from"./DataTable-WlvwCpLc.js";import{c as i,f as b,a as o,P as w}from"./format-wxLsIVjs.js";import{N as y}from"./number-ticker-DAf-8EjI.js";import{M as c,T as S,a8 as k}from"./icons-mXW2t-HS.js";import{b as F}from"./motion-DSHPdBNu.js";import"./ui-BFiKdTjl.js";import"./select-DxzgyWz-.js";const m="dashboard-shell rounded-[var(--radius-card)]";function $(){const[d,x]=n.useState([{id:"lastSeen",desc:!0}]),{data:r,isLoading:h}=g({queryKey:["sessions"],queryFn:()=>v(168)}),t=r?.sessions??[],l=r?.total??0,p=t.reduce((s,a)=>s+a.totalCost,0),u=t.reduce((s,a)=>s+a.traceCount,0),N=n.useMemo(()=>[{accessorKey:"sessionId",header:"Session ID",cell:({row:s})=>e.jsxs(j,{to:`/traces?q=${encodeURIComponent(s.original.sessionId)}`,className:"group inline-flex min-w-0 items-center gap-3",children:[e.jsx("span",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-panel)] border border-white/10 bg-white/5 text-[#66FCF1] transition-colors hover:border-[#45A29E]/20 hover:text-[#66FCF1]",children:e.jsx(c,{className:"h-4 w-4"})}),e.jsxs("span",{className:"min-w-0",children:[e.jsx("span",{className:"block truncate font-mono text-sm font-semibold text-slate-100 transition-colors hover:text-[#66FCF1]",children:s.original.sessionId.length>28?`${s.original.sessionId.slice(0,26)}...`:s.original.sessionId}),e.jsxs("span",{className:"mt-1 block text-xs text-slate-400",children:["Last active ",i(s.original.lastSeen)]})]})]})},{accessorKey:"traceCount",header:"Traces",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm text-slate-300",children:s.original.traceCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"spanCount",header:"Spans",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm text-slate-300",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-slate-300",children:b(s.original.totalTokens)}),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-white",children:o(s.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"errorCount",header:"Errors",cell:({row:s})=>s.original.errorCount>0?e.jsxs("span",{className:"inline-flex items-center gap-1 rounded-full border border-[#C5C6C7]/20 bg-[#C5C6C7]/10 px-2 py-0.5 text-xs font-bold text-[#C5C6C7]",children:[e.jsx(S,{className:"h-3 w-3"}),s.original.errorCount]}):e.jsx("span",{className:"font-mono text-sm text-slate-500",children:"0"}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"firstSeen",header:"First Seen",cell:({row:s})=>e.jsx("span",{className:"text-sm text-slate-400",children:i(s.original.firstSeen)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"lastSeen",header:"Last Active",cell:({row:s})=>e.jsx("span",{className:"text-sm text-slate-400",children:i(s.original.lastSeen)}),meta:{className:"text-right",cellClassName:"text-right"}}],[]);return h?e.jsxs("div",{className:"mx-auto max-w-[1500px] 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.jsx(w,{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:e.jsxs("div",{className:"insight-panel",children:[e.jsx(f,{}),e.jsxs("div",{className:"mt-5 space-y-4",children:[e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 p-5",children:[e.jsx("div",{className:"hud-label",children:"Active sessions"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-white",children:e.jsx(y,{value:l})}),e.jsxs("div",{className:"mt-1 text-sm text-slate-400",children:[u," traces across all sessions"]})]}),e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-white/10 bg-white/5 p-5",children:[e.jsx("div",{className:"hud-label",children:"Session spend"}),e.jsx("div",{className:"mt-2 text-base font-medium text-white",children:o(p)}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:"Combined cost across visible sessions"})]})]})]}),children:t.length>0?e.jsxs(F.div,{className:`${m} 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:"Session registry"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Tracked sessions"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(k,{className:"h-3.5 w-3.5 text-[#66FCF1]"}),e.jsxs("span",{children:[l," sessions"]})]})]}),e.jsx(C,{columns:N,data:t,sorting:d,onSortingChange:x})]}):e.jsx("div",{className:`${m} p-16`,children:e.jsxs("div",{className:"empty-state",children:[e.jsx(c,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No sessions tracked yet"}),e.jsxs("div",{className:"max-w-md text-center text-sm text-slate-400",children:["Sessions appear when you pass a ",e.jsx("code",{className:"rounded bg-white/10 px-1.5 py-0.5 font-mono text-[#66FCF1]",children:"sessionId"})," to the SDK. This groups related traces into logical conversations or workflows."]}),e.jsx("pre",{className:"mt-5 max-w-lg rounded-[var(--radius-panel)] border border-white/10 bg-white/5 p-5 text-left font-mono text-sm text-slate-300",children:`import { init } from "@llmtap/sdk";
|
|
2
|
-
|
|
3
|
-
init({ sessionId: "user-session-123" });`})]})})})}export{$ as default};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import{r,j as e,u as Ce,d as Se}from"./query-DVWnIZNd.js";import{j as x,s as re,t as i,v as Fe,w as ke,a as Te,x as Pe,y as De,z as Re,A as Oe}from"./index-BjX-ME4E.js";import{G as Ae}from"./GettingStartedPanel-D2-E8-3Q.js";import{A as Ee,a as j,b as f,c as y}from"./accordion-DZ-R65JQ.js";import{P as Me,c as te}from"./format-wxLsIVjs.js";import{S as Le,a as $e,b as Ie,c as Be,d as b}from"./select-DxzgyWz-.js";import{j as Ue,k as ze,l as oe,m as ne,n as ie,o as de,A as ce,p as pe}from"./ui-BFiKdTjl.js";import{b as p}from"./motion-DSHPdBNu.js";import{af as Je,E as S,Y as Ke,I as F,ag as We,R as qe,D as He,X as se,ah as Qe,ai as Ve,S as Ge,aj as _e,ak as Ye}from"./icons-mXW2t-HS.js";const ae=Ue,Xe=ze,xe=r.forwardRef(({className:a,...l},o)=>e.jsx(pe,{className:x("fixed inset-0 z-50 bg-black/60 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",a),...l,ref:o}));xe.displayName=pe.displayName;const O=r.forwardRef(({className:a,...l},o)=>e.jsxs(Xe,{children:[e.jsx(xe,{}),e.jsx(oe,{ref:o,className:x("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-white/10 bg-[linear-gradient(180deg,rgba(12,18,32,0.98),rgba(4,8,18,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",a),...l})]}));O.displayName=oe.displayName;const A=({className:a,...l})=>e.jsx("div",{className:x("flex flex-col gap-1.5 text-center sm:text-left",a),...l});A.displayName="AlertDialogHeader";const E=({className:a,...l})=>e.jsx("div",{className:x("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",a),...l});E.displayName="AlertDialogFooter";const M=r.forwardRef(({className:a,...l},o)=>e.jsx(ne,{ref:o,className:x("text-lg font-semibold text-white",a),...l}));M.displayName=ne.displayName;const L=r.forwardRef(({className:a,...l},o)=>e.jsx(ie,{ref:o,className:x("text-sm text-slate-400",a),...l}));L.displayName=ie.displayName;const $=r.forwardRef(({className:a,...l},o)=>e.jsx(ce,{ref:o,className:x(re(),a),...l}));$.displayName=ce.displayName;const I=r.forwardRef(({className:a,...l},o)=>e.jsx(de,{ref:o,className:x(re({variant:"outline"}),a),...l}));I.displayName=de.displayName;function le(a){if(a===0)return"0 B";const l=["B","KB","MB","GB"],o=Math.min(Math.floor(Math.log(a)/Math.log(1024)),l.length-1);return`${(a/Math.pow(1024,o)).toFixed(o===0?0:1)} ${l[o]}`}function w({label:a,value:l,mono:o}){return e.jsxs("div",{className:"flex items-center justify-between gap-4 rounded-2xl border border-white/6 bg-white/4 px-4 py-3",children:[e.jsx("span",{className:"text-sm text-slate-400",children:a}),e.jsx("span",{className:`text-sm font-medium text-white ${o?"font-mono":""}`,children:l})]})}function it(){const a=Ce(),[l,o]=r.useState(!1),[he,B]=r.useState(!1),[N,U]=r.useState(!1),[me,z]=r.useState(null),[v,J]=r.useState([]),[ue,k]=r.useState(!1),[d,m]=r.useState({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""}),[g,be]=r.useState("30"),[ge,K]=r.useState(!1),[T,W]=r.useState(null),[q,H]=r.useState(!1),[P,je]=r.useState(""),[D,fe]=r.useState("llmtap"),[Q,V]=r.useState(!1),[R,C]=r.useState(null),[G,_]=r.useState(!1),[ye,Y]=r.useState(!1),[we,X]=r.useState(!1),{data:n}=Se({queryKey:["db-info"],queryFn:Oe});async function Ne(){o(!0);try{await Pe(),B(!0),a.invalidateQueries(),i.success("Trace data cleared",{description:"The local collector database has been reset."}),setTimeout(()=>B(!1),3e3)}catch(t){i.error("Reset failed",{description:t instanceof Error?t.message:String(t)})}finally{o(!1)}}async function Z(t){H(!0);try{const s=await De(t);W(s.deletedSpans),K(!0),a.invalidateQueries(),i.success("Retention applied",{description:s.deletedSpans>0?`Deleted ${s.deletedSpans} old spans.`:"No spans needed cleanup for the selected window."}),setTimeout(()=>{K(!1),W(null)},4e3)}catch(s){i.error("Retention failed",{description:s instanceof Error?s.message:String(s)})}finally{H(!1)}}async function ee(t){U(!0);try{const s=await Re(t),u=new Blob([s],{type:t==="json"?"application/json":"text/csv"}),c=URL.createObjectURL(u),h=document.createElement("a");h.href=c,h.download=`llmtap-traces-${new Date().toISOString().slice(0,10)}.${t}`,document.body.appendChild(h),h.click(),document.body.removeChild(h),URL.revokeObjectURL(c),i.success(`Exported ${t.toUpperCase()}`,{description:"Trace data was downloaded successfully."})}catch(s){i.error("Export failed",{description:s instanceof Error?s.message:String(s)})}finally{U(!1)}}function ve(t,s){navigator.clipboard.writeText(t).catch(()=>{}),z(s),i.success("Copied to clipboard",{description:"Database path copied."}),setTimeout(()=>z(null),2e3)}return e.jsxs(e.Fragment,{children:[e.jsxs(Me,{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(Te,{}),e.jsx("div",{className:"mt-4 space-y-3",children:e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Database"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-white",children:n?le(n.sizeBytes):"..."}),e.jsxs("div",{className:"mt-1 text-sm text-slate-400",children:[n?.spanCount??0," spans stored"]})]})})]}),children:[e.jsx(Ae,{compact:!0}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-2",children:[e.jsxs("div",{className:"space-y-5",children:[e.jsxs(p.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-[#66FCF1]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-white",children:"Database status"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(w,{label:"Size on disk",value:n?le(n.sizeBytes):"-"}),e.jsx(w,{label:"Total spans",value:String(n?.spanCount??0),mono:!0}),e.jsx(w,{label:"Total traces",value:String(n?.traceCount??0),mono:!0}),e.jsx(w,{label:"Journal mode",value:n?.walMode?.toUpperCase()??"-",mono:!0}),e.jsx(w,{label:"Data range",value:n?.oldestSpan&&n?.newestSpan?`${te(n.oldestSpan)} to ${te(n.newestSpan)}`:"No data"}),e.jsxs("div",{className:"flex items-center justify-between gap-4 rounded-2xl border border-white/6 bg-white/4 px-4 py-3",children:[e.jsx("span",{className:"text-sm text-slate-400",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-slate-300",children:n?.path??"-"}),n?.path&&e.jsx("button",{type:"button",onClick:()=>ve(n.path,"path"),className:"rounded-2xl border border-white/8 bg-white/4 p-1.5 text-slate-400 transition-colors hover:text-white",children:me==="path"?e.jsx(S,{className:"h-3 w-3 text-[#66FCF1]"}):e.jsx(Ke,{className:"h-3 w-3"})})]})]})]})]}),e.jsxs(p.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-white",children:"Before you change the collector"})]}),e.jsxs(Ee,{defaultValue:["local-data"],multiple:!0,children:[e.jsxs(j,{value:"local-data",className:"border-white/8",children:[e.jsx(f,{className:"text-base text-white hover:no-underline",children:"What stays local on this machine?"}),e.jsx(y,{className:"leading-6 text-slate-400",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(j,{value:"retention",className:"border-white/8",children:[e.jsx(f,{className:"text-base text-white hover:no-underline",children:"What happens when I apply retention?"}),e.jsx(y,{className:"leading-6 text-slate-400",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(j,{value:"backup-restore",className:"border-white/8",children:[e.jsx(f,{className:"text-base text-white hover:no-underline",children:"When should I backup, export, or restore?"}),e.jsx(y,{className:"leading-6 text-slate-400",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(j,{value:"otlp",className:"border-white/8",children:[e.jsx(f,{className:"text-base text-white hover:no-underline",children:"Does OTLP forwarding make LLMTap cloud-only?"}),e.jsx(y,{className:"leading-6 text-slate-400",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(j,{value:"empty-dashboard",className:"border-white/8",children:[e.jsx(f,{className:"text-base text-white hover:no-underline",children:"What do I do if the dashboard is still empty?"}),e.jsxs(y,{className:"leading-6 text-slate-400",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-white/6 px-2 py-0.5 font-mono text-slate-300",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(p.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(F,{className:"h-4 w-4 text-[#66FCF1]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-white",children:"Export data"})]}),e.jsx("p",{className:"mb-4 text-sm text-slate-400",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-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(F,{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-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(F,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:N?"Exporting...":"Export CSV"})]})]})]}),e.jsxs(p.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-[#C5C6C7]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-white",children:"Reset data"})]}),e.jsx("p",{className:"mb-4 text-sm text-slate-400",children:"Permanently delete all stored traces and spans. This action cannot be undone."}),e.jsx("button",{type:"button",onClick:()=>Y(!0),disabled:l,className:"inline-flex items-center gap-2 rounded-full border border-[#C5C6C7]/20 bg-[#C5C6C7]/8 px-4 py-2.5 text-sm font-medium text-[#C5C6C7] transition-colors hover:border-[#C5C6C7]/30 hover:bg-[#C5C6C7]/14 disabled:cursor-not-allowed disabled:opacity-50",children:he?e.jsxs(e.Fragment,{children:[e.jsx(S,{className:"h-4 w-4 text-[#66FCF1]"}),e.jsx("span",{children:"Data cleared"})]}):e.jsxs(e.Fragment,{children:[e.jsx(qe,{className:`h-4 w-4 ${l?"animate-spin":""}`}),e.jsx("span",{children:l?"Resetting...":"Reset all data"})]})})]}),e.jsxs(p.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-[#45A29E]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-white",children:"Pricing override generator"})]}),e.jsx("p",{className:"mb-4 text-sm text-slate-400",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."}),v.length>0&&e.jsx("div",{className:"mb-4 space-y-2",children:v.map((t,s)=>e.jsxs("div",{className:"flex items-center justify-between gap-3 rounded-2xl border border-white/6 bg-white/4 px-4 py-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"rounded-full border border-white/10 bg-white/6 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-300",children:t.provider}),e.jsx("span",{className:"font-mono text-sm text-white",children:t.model})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"font-mono text-xs text-slate-400",children:["$",t.inputCostPer1M,"/M in"]}),e.jsxs("span",{className:"font-mono text-xs text-slate-400",children:["$",t.outputCostPer1M,"/M out"]}),e.jsx("button",{type:"button",onClick:()=>J(u=>u.filter((c,h)=>h!==s)),className:"rounded-lg border border-white/8 bg-white/4 p-1.5 text-slate-500 transition-colors hover:text-[#C5C6C7]",children:e.jsx(se,{className:"h-3 w-3"})})]})]},`${t.provider}-${t.model}`))}),ue?e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-4",children:[e.jsx("input",{value:d.provider,onChange:t=>m(s=>({...s,provider:t.target.value})),placeholder:"Provider",className:"rounded-xl border border-white/8 bg-white/4 px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:border-[#66FCF1]/30 focus:outline-none"}),e.jsx("input",{value:d.model,onChange:t=>m(s=>({...s,model:t.target.value})),placeholder:"Model name",className:"rounded-xl border border-white/8 bg-white/4 px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:border-[#66FCF1]/30 focus:outline-none"}),e.jsx("input",{value:d.inputCostPer1M,onChange:t=>m(s=>({...s,inputCostPer1M:t.target.value})),placeholder:"Input $/M",type:"number",step:"0.01",className:"rounded-xl border border-white/8 bg-white/4 px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:border-[#66FCF1]/30 focus:outline-none"}),e.jsx("input",{value:d.outputCostPer1M,onChange:t=>m(s=>({...s,outputCostPer1M:t.target.value})),placeholder:"Output $/M",type:"number",step:"0.01",className:"rounded-xl border border-white/8 bg-white/4 px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:border-[#66FCF1]/30 focus:outline-none"})]}),e.jsxs("div",{className:"mt-3 flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>{d.provider&&d.model&&d.inputCostPer1M&&d.outputCostPer1M&&(J(t=>[...t,{...d}]),i.success("Pricing snippet added",{description:`${d.provider}/${d.model} was added to the generated SDK snippet.`}),m({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""}),k(!1))},className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(S,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Add"})]}),e.jsxs("button",{type:"button",onClick:()=>{k(!1),m({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""})},className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(se,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Cancel"})]})]})]}):e.jsxs("button",{type:"button",onClick:()=>k(!0),className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(Qe,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Add pricing snippet"})]}),v.length>0&&e.jsxs("div",{className:"mt-4 rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500",children:"SDK code to paste into your app"}),e.jsx("p",{className:"mb-3 text-xs leading-relaxed text-slate-400",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-slate-300",children:`import { setPricing } from "@llmtap/sdk";
|
|
2
|
-
${v.map(t=>`setPricing("${t.provider}", "${t.model}", ${t.inputCostPer1M}, ${t.outputCostPer1M});`).join(`
|
|
3
|
-
`)}`})]})]}),e.jsxs(p.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-[#45A29E]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-white",children:"Data retention"})]}),e.jsx("p",{className:"mb-4 text-sm text-slate-400",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(Le,{value:g,onValueChange:t=>be(t),children:[e.jsx($e,{className:"w-[160px] rounded-2xl py-3",children:e.jsx(Ie,{})}),e.jsxs(Be,{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 t=parseInt(g,10);if(t>0){X(!0);return}await Z(t)},disabled:q,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:ge?e.jsxs(e.Fragment,{children:[e.jsx(S,{className:"h-3.5 w-3.5 text-[#66FCF1]"}),e.jsx("span",{children:T!==null&&T>0?`Cleaned ${T} spans`:"Applied"})]}):e.jsx("span",{children:q?"Applying...":"Apply now"})})]}),e.jsxs("p",{className:"mt-3 text-xs text-slate-500",children:["This immediately deletes spans older than the selected period. For automatic enforcement on every startup, use ",e.jsxs("code",{className:"rounded bg-white/6 px-1.5 py-0.5 font-mono text-slate-400",children:["llmtap start --retention ",g]}),"."]})]}),e.jsxs(p.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-[#66FCF1]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-white",children:"OpenTelemetry Export"})]}),e.jsx("p",{className:"mb-4 text-sm text-slate-400",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 t=await Fe(1e3,D),s=new Blob([t],{type:"application/json"}),u=URL.createObjectURL(s),c=document.createElement("a");c.href=u,c.download="llmtap-export.otlp.json",document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(u),i.success("OTLP export downloaded",{description:"The collector export was saved as OTLP JSON."})}catch(t){i.error("Export failed",{description:t instanceof Error?t.message:String(t)})}finally{_(!1)}},className:"flex items-center gap-2 rounded-2xl border border-[#66FCF1]/20 bg-[#66FCF1]/10 px-4 py-2.5 text-sm font-medium text-[#66FCF1] transition-colors hover:bg-[#66FCF1]/20",children:[e.jsx(F,{className:"h-3.5 w-3.5"}),G?"Exporting...":"Download OTLP JSON"]}),e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Forward to OTLP endpoint"}),e.jsxs("div",{className:"flex flex-col gap-3 sm:flex-row",children:[e.jsx("input",{type:"text",value:P,onChange:t=>{je(t.target.value),C(null)},placeholder:"http://localhost:4318/v1/traces",className:"flex-1 rounded-xl border border-white/8 bg-white/4 px-3 py-2 text-sm text-white placeholder-slate-500 focus:border-[#66FCF1]/30 focus:outline-none"}),e.jsx("input",{type:"text",value:D,onChange:t=>fe(t.target.value),placeholder:"service name",className:"w-32 rounded-xl border border-white/8 bg-white/4 px-3 py-2 text-sm text-white placeholder-slate-500 focus:border-[#66FCF1]/30 focus:outline-none"}),e.jsx("button",{type:"button",disabled:!P||Q,onClick:async()=>{V(!0),C(null);try{const t=await ke(P,{service:D});C(`Forwarded ${t.spanCount} spans`),i.success("OTLP forward complete",{description:`Forwarded ${t.spanCount} spans to the target endpoint.`})}catch(t){C(`Error: ${t instanceof Error?t.message:String(t)}`),i.error("OTLP forward failed",{description:t instanceof Error?t.message:String(t)})}finally{V(!1)}},className:"rounded-xl border border-[#66FCF1]/20 bg-[#66FCF1]/10 px-4 py-2 text-sm font-medium text-[#66FCF1] transition-colors hover:bg-[#66FCF1]/20 disabled:opacity-40",children:Q?"Sending...":"Send"})]}),R&&e.jsx("p",{className:`mt-2 text-xs ${R.startsWith("Error")?"text-[#C5C6C7]":"text-[#66FCF1]"}`,children:R})]}),e.jsxs("p",{className:"text-xs text-slate-500",children:["CLI: ",e.jsx("code",{className:"rounded bg-white/6 px-1.5 py-0.5 font-mono text-slate-400",children:"llmtap export --format otlp --endpoint http://localhost:4318/v1/traces"})]})]})]}),e.jsxs(p.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-[#66FCF1]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-white",children:"First-run help"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500",children:[e.jsx(Ye,{className:"h-3.5 w-3.5 text-[#45A29E]"}),"Where the wrap code belongs"]}),e.jsx("p",{className:"text-xs leading-relaxed text-slate-400",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-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500",children:"How to verify the setup"}),e.jsxs("p",{className:"text-xs leading-relaxed text-slate-400",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-white/6 px-1.5 py-0.5 font-mono text-slate-300",children:"npx llmtap doctor"})," ","from the app you are instrumenting."]})]}),e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Useful local operations"}),e.jsx("pre",{className:"font-mono text-xs leading-relaxed text-slate-300",children:`npx llmtap doctor
|
|
4
|
-
npx llmtap backup
|
|
5
|
-
npx llmtap import llmtap-export.json
|
|
6
|
-
npx llmtap restore llmtap-backup.db`})]})]})]})]})]})]}),e.jsx(ae,{open:ye,onOpenChange:Y,children:e.jsxs(O,{children:[e.jsxs(A,{children:[e.jsx(M,{children:"Delete all trace data?"}),e.jsx(L,{children:"This will permanently delete all stored traces and spans. This action cannot be undone."})]}),e.jsxs(E,{children:[e.jsx(I,{children:"Cancel"}),e.jsx($,{onClick:()=>Ne(),className:"border-[#C5C6C7]/20 bg-[#C5C6C7] text-slate-950 hover:bg-[#C5C6C7]/90",children:"Delete all data"})]})]})}),e.jsx(ae,{open:we,onOpenChange:X,children:e.jsxs(O,{children:[e.jsxs(A,{children:[e.jsx(M,{children:"Apply data retention?"}),e.jsxs(L,{children:["This will delete all trace data older than ",g," days. This action cannot be undone."]})]}),e.jsxs(E,{children:[e.jsx(I,{children:"Cancel"}),e.jsx($,{onClick:()=>Z(parseInt(g,10)),className:"border-[#C5C6C7]/20 bg-[#C5C6C7] text-slate-950 hover:bg-[#C5C6C7]/90",children:"Delete old data"})]})]})})]})}export{it as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{j as s}from"./query-DVWnIZNd.js";import{j as e}from"./index-BjX-ME4E.js";function l({status:t,className:a}){const r=t==="error";return s.jsxs("span",{className:e("relative flex h-3.5 w-3.5 items-center justify-center",a),children:[s.jsx("span",{className:e("absolute inset-0 rounded-full",r?"bg-[#C5C6C7]/20":"bg-[#66FCF1]/25")}),s.jsx("span",{className:e("relative h-2 w-2 rounded-full",r?"bg-[#C5C6C7]":"bg-[#66FCF1]")})]})}export{l as S};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import{j as e,r as u,d as pe}from"./query-DVWnIZNd.js";import{j as me,k as ue,L as he,D as ge,l as be,m as fe,n as je,o as ve,a as Ne,t as T,r as Ce,i as ye}from"./index-BjX-ME4E.js";import{P as we,a as y,b}from"./format-wxLsIVjs.js";import{g as w}from"./content-BRoZVvRJ.js";import{p as ke,d as Fe}from"./provider-colors-BhO_XSTV.js";import{S as Se}from"./StatusDot-D69CfzT5.js";import{s as Te,E as _,F as $e,H as Ie,I as Me,J as Y,B as A,Z as Re,N as Q,z as O,O as Z,c as Ee,v as V,Q as _e,U as Ae,Y as Oe,_ as Pe,y as W,$ as Le,a0 as ee,a1 as De,p as He}from"./icons-mXW2t-HS.js";import{b as se,a as Be}from"./motion-DSHPdBNu.js";import"./ui-BFiKdTjl.js";function te({provider:s,className:r}){const n=s.toLowerCase(),o=ke[n]??Fe;return e.jsx("span",{className:me("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold capitalize",o.bg,o.text,o.border,r),children:s})}function qe(s){const r=new Map,n=[];for(const l of s)r.set(l.spanId,{span:l,children:[]});for(const l of s){const i=r.get(l.spanId);i&&(l.parentSpanId&&r.has(l.parentSpanId)?r.get(l.parentSpanId)?.children.push(i):n.push(i))}const o=l=>{l.sort((i,t)=>i.span.startTime-t.span.startTime);for(const i of l)o(i.children)};return o(n),n}function P(s){return s.children.reduce((r,n)=>r+1+P(n),0)}function Je(){const[s,r]=u.useState(null);function n(o,l){navigator.clipboard.writeText(o),r(l),T.success("Copied to clipboard",{description:`${l} copied successfully.`}),setTimeout(()=>r(null),2e3)}return{copied:s,copy:n}}function C({text:s,label:r,copied:n,onCopy:o}){return e.jsx("button",{type:"button",onClick:l=>{l.stopPropagation(),o(s,r)},className:"rounded-lg border border-white/8 bg-white/4 p-1.5 text-slate-500 transition-colors hover:text-white",title:"Copy to clipboard",children:n===r?e.jsx(_,{className:"h-3 w-3 text-[#66FCF1]"}):e.jsx(Oe,{className:"h-3 w-3"})})}function f({icon:s,label:r,value:n}){return e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-[linear-gradient(180deg,rgba(18,24,41,0.78),rgba(8,11,24,0.9))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:[e.jsx(s,{className:"h-3 w-3"}),r]}),e.jsx("div",{className:"font-mono text-sm font-semibold text-slate-100",children:n})]})}function g({label:s,value:r,tone:n="default"}){const o=n==="success"?"border-[#66FCF1]/16 bg-[#66FCF1]/8 text-[#C5C6C7]":n==="danger"?"border-[#C5C6C7]/16 bg-[#C5C6C7]/8 text-[#C5C6C7]":"border-white/8 bg-white/4 text-slate-100";return e.jsxs("div",{className:`rounded-2xl border px-3 py-2 ${o}`,children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:s}),e.jsx("div",{className:"mt-1 font-mono text-xs font-semibold",children:r})]})}function E({icon:s,title:r,count:n,collapsed:o,onToggle:l}){const i=e.jsxs(e.Fragment,{children:[l?e.jsx(He,{className:`h-3.5 w-3.5 transition-transform ${o?"-rotate-90":""}`}):null,e.jsx(s,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:r}),typeof n=="number"?e.jsx("span",{className:"rounded-full border border-white/8 bg-white/4 px-2 py-0.5 font-mono text-[10px] text-slate-300",children:n}):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-slate-500 transition-colors hover:text-slate-300",children:i}):e.jsx("div",{className:"mb-3 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500",children:i})}function Ke({role:s,type:r}){const n={system:"bg-[#1F2833]/90 text-[#C5C6C7] border-[#45A29E]/16",user:"bg-[#66FCF1]/10 text-[#C5C6C7] border-[#66FCF1]/16",assistant:"bg-[#45A29E]/10 text-[#66FCF1] border-[#45A29E]/16",tool:"bg-[#C5C6C7]/10 text-[#C5C6C7] border-[#C5C6C7]/16",function:"bg-[#C5C6C7]/10 text-[#C5C6C7] border-[#C5C6C7]/16"},o=r==="input"?"bg-[#66FCF1]/10 text-[#C5C6C7] border-[#66FCF1]/16":"bg-[#45A29E]/10 text-[#66FCF1] border-[#45A29E]/16";return e.jsx("span",{className:`rounded-full border px-2.5 py-1 text-[10px] font-bold capitalize tracking-[0.16em] ${n[s]??o}`,children:s})}function X(s){return!s||typeof s=="string"?!1:s.some(r=>r.type==="image_url"||r.type==="image")}function L(s){return s.map(r=>r.type==="image_url"&&r.image_url?.url?r.image_url.url:r.type==="image"&&r.source?.data?`data:${r.source.media_type||"image/png"};base64,${r.source.data}`:null).filter(r=>{if(!r)return!1;if(r.startsWith("data:image/"))return!0;try{const n=new URL(r);return n.protocol==="http:"||n.protocol==="https:"}catch{return!1}})}function Ue(s){const r=w(s);let n=r?Math.ceil(r.length/4):0;if(s&&typeof s!="string"){const o=s.filter(l=>l.type==="image_url"||l.type==="image").length;n+=o*85}return n}function G({message:s,type:r,copied:n,onCopy:o}){const l=s.content,i=w(l),t=l&&typeof l!="string"?L(l):[],d=r==="input"?"border-white/8":"border-[#66FCF1]/12",c=`msg-${r}-${s.role}-${i.slice(0,20)}`;return e.jsxs("div",{className:`rounded-2xl border ${d} bg-[linear-gradient(180deg,rgba(18,24,41,0.68),rgba(8,11,24,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:s.role,type:r}),s.name&&e.jsx("span",{className:"font-mono text-[10px] text-slate-500",children:s.name}),t.length>0&&e.jsxs("span",{className:"inline-flex items-center gap-1 rounded-full border border-[#45A29E]/16 bg-[#1F2833]/90 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-[#C5C6C7]",children:[e.jsx(De,{className:"h-2.5 w-2.5"}),t.length," image",t.length>1?"s":""]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"font-mono text-[10px] text-slate-600",children:["~",Ue(l)," tok"]}),i&&e.jsx(C,{text:i,label:c,copied:n,onCopy:o})]})]}),i&&e.jsx("pre",{className:"mt-2.5 whitespace-pre-wrap font-mono text-xs leading-relaxed text-slate-200",children:Xe(i)}),t.length>0&&e.jsx("div",{className:"mt-2.5 flex flex-wrap gap-2",children:t.map((x,j)=>e.jsxs("a",{href:x,target:"_blank",rel:"noopener noreferrer",className:"group relative overflow-hidden rounded-lg border border-white/10 bg-slate-950/60 transition-colors hover:border-white/20",children:[e.jsx("img",{src: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-white",children:"Open"})})]},j))})]})}function ze({span:s,copied:r,onCopy:n}){const o=s.inputMessages?.length??0,l=s.outputMessages?.length??0,[i,t]=u.useState(o>3),[d,c]=u.useState(l>3);return e.jsx(se.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-white/8 bg-[linear-gradient(180deg,rgba(15,20,36,0.98),rgba(7,10,22,0.99))] p-5 text-sm shadow-[inset_0_1px_0_rgba(255,255,255,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(f,{icon:Pe,label:"Model",value:s.responseModel??s.requestModel??"-"}),e.jsx(f,{icon:A,label:"Tokens",value:`${s.inputTokens} in / ${s.outputTokens} out`}),e.jsx(f,{icon:Q,label:"Cost",value:y(s.totalCost)}),e.jsx(f,{icon:O,label:"Duration",value:s.duration?b(s.duration):"-"})]}),e.jsxs("div",{className:"grid gap-3 sm:grid-cols-2 xl:grid-cols-4",children:[e.jsx(g,{label:"Input msgs",value:String(o)}),e.jsx(g,{label:"Output msgs",value:String(l)}),e.jsx(g,{label:"Tool calls",value:String(s.toolCalls?.length??0)}),e.jsx(g,{label:"Status",value:s.status==="error"?"Error":"OK",tone:s.status==="error"?"danger":"success"})]}),s.status==="error"&&e.jsxs("div",{className:"rounded-2xl border border-[#C5C6C7]/18 bg-[#C5C6C7]/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-[#C5C6C7]",children:[e.jsx(V,{className:"h-4 w-4"}),s.errorType??"error"]}),s.errorMessage&&e.jsx(C,{text:s.errorMessage,label:"error",copied:r,onCopy:n})]}),e.jsx("div",{className:"font-mono text-xs leading-relaxed text-[#C5C6C7]/70",children:s.errorMessage})]}),s.inputMessages&&s.inputMessages.length>0&&e.jsxs("div",{children:[e.jsx(E,{icon:W,title:"Input messages",count:s.inputMessages.length,collapsed:i,onToggle:()=>t(x=>!x)}),!i&&e.jsx("div",{className:"space-y-2",children:s.inputMessages.map((x,j)=>e.jsx(G,{message:x,type:"input",copied:r,onCopy:n},`in-${x.role}-${j}`))})]}),s.outputMessages&&s.outputMessages.length>0&&e.jsxs("div",{children:[e.jsx(E,{icon:W,title:"Output messages",count:s.outputMessages.length,collapsed:d,onToggle:()=>c(x=>!x)}),!d&&e.jsx("div",{className:"space-y-2",children:s.outputMessages.map((x,j)=>e.jsx(G,{message:x,type:"output",copied:r,onCopy:n},`out-${x.role}-${j}`))})]}),s.toolCalls&&s.toolCalls.length>0&&e.jsxs("div",{children:[e.jsx(E,{icon:Le,title:"Tool calls",count:s.toolCalls.length}),e.jsx("div",{className:"space-y-2",children:s.toolCalls.map(x=>e.jsxs("div",{className:"rounded-2xl border border-[#45A29E]/10 bg-white/4 p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsx("span",{className:"rounded-full border border-[#45A29E]/16 bg-[#45A29E]/10 px-2.5 py-1 text-[10px] font-bold tracking-[0.16em] text-[#66FCF1]",children:x.name}),e.jsx(C,{text:x.arguments,label:`tool-${x.id}`,copied:r,onCopy:n})]}),e.jsx("pre",{className:"mt-2.5 overflow-x-auto font-mono text-xs leading-relaxed text-slate-200",children:ae(x.arguments)}),x.result&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"my-2 border-t border-white/6"}),e.jsx("div",{className:"mb-1 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-600",children:"Result"}),e.jsx("pre",{className:"overflow-x-auto font-mono text-xs leading-relaxed text-slate-300",children: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-white/8 bg-[linear-gradient(180deg,rgba(18,24,41,0.74),rgba(8,11,24,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-slate-500",children:[e.jsx(Z,{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-slate-600",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-slate-200",children:s.spanId}),e.jsx(C,{text:s.spanId,label:"spanId",copied:r,onCopy:n})]})]}),e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-600",children:"Operation"}),e.jsx("div",{className:"mt-1 text-sm text-slate-200",children:s.operationName})]}),e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-600",children:"Provider"}),e.jsx("div",{className:"mt-1",children:e.jsx(te,{provider:s.providerName})})]}),s.parentSpanId&&e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-600",children:"Parent span"}),e.jsx("div",{className:"mt-1 font-mono text-xs text-slate-300",children:s.parentSpanId})]}),s.sessionId&&e.jsxs("div",{children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-600",children:"Session"}),e.jsx("div",{className:"mt-1 font-mono text-xs text-slate-300",children:s.sessionId})]})]})]}),e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-[linear-gradient(180deg,rgba(18,24,41,0.74),rgba(8,11,24,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-slate-500",children:[e.jsx(ee,{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(g,{label:"Request model",value:s.requestModel}),e.jsx(g,{label:"Response model",value:s.responseModel??s.requestModel??"-"}),e.jsx(g,{label:"Temperature",value:s.temperature!==void 0?String(s.temperature):"-"}),e.jsx(g,{label:"Top P",value:s.topP!==void 0?String(s.topP):"-"}),e.jsx(g,{label:"Max tokens",value:s.maxTokens!==void 0?String(s.maxTokens):"-"}),e.jsx(g,{label:"Started",value:new Date(s.startTime).toLocaleTimeString()})]})]})]})]})})})})}function ae(s){try{return JSON.stringify(JSON.parse(s),null,2)}catch{return s}}function Ye(s){const r=s.providerName?.toLowerCase()??"",n=s.requestModel??s.responseModel??"unknown",o=(s.inputMessages??[]).map(t=>({role:t.role,content:typeof t.content=="string"?t.content:t.content??""})),i=JSON.stringify({model:n,messages:o}).replace(/'/g,"'\\''");return r==="openai"?`curl https://api.openai.com/v1/chat/completions \\
|
|
2
|
-
-H "Authorization: Bearer $OPENAI_API_KEY" \\
|
|
3
|
-
-H "Content-Type: application/json" \\
|
|
4
|
-
-d '${i}'`:r==="anthropic"?`curl https://api.anthropic.com/v1/messages \\
|
|
5
|
-
-H "x-api-key: $ANTHROPIC_API_KEY" \\
|
|
6
|
-
-H "anthropic-version: 2023-06-01" \\
|
|
7
|
-
-H "Content-Type: application/json" \\
|
|
8
|
-
-d '${JSON.stringify({model:n,max_tokens:s.maxTokens??1024,messages:o.filter(c=>c.role!=="system"),...o.find(c=>c.role==="system")?{system:o.find(c=>c.role==="system").content}:{}}).replace(/'/g,"'\\''")}'`:r==="google"?`curl "https://generativelanguage.googleapis.com/v1beta/models/${n}:generateContent?key=$GOOGLE_API_KEY" \\
|
|
9
|
-
-H "Content-Type: application/json" \\
|
|
10
|
-
-d '${i}'`:`curl https://api.example.com/v1/chat/completions \\
|
|
11
|
-
-H "Authorization: Bearer $API_KEY" \\
|
|
12
|
-
-H "Content-Type: application/json" \\
|
|
13
|
-
-d '${i}'`}function We(s,r,n,o,l,i){const t=[];t.push("# Trace Report"),t.push(""),t.push(`**Trace ID:** \`${s}\``),t.push(`**Status:** ${i?"Error":"Stable"}`),t.push(`**Total Spans:** ${r.length}`),t.push(`**Total Tokens:** ${n.toLocaleString()}`),t.push(`**Total Cost:** ${y(o)}`),t.push(`**Duration:** ${b(l)}`),t.push(""),t.push("---"),t.push("");for(const d of r){if(t.push(`## Span: ${d.name}`),t.push(""),t.push("| Field | Value |"),t.push("|-------|-------|"),t.push(`| Span ID | \`${d.spanId}\` |`),t.push(`| Provider | ${d.providerName} |`),t.push(`| Model | ${d.responseModel??d.requestModel??"-"} |`),t.push(`| Operation | ${d.operationName} |`),t.push(`| Tokens | ${d.inputTokens} in / ${d.outputTokens} out |`),t.push(`| Cost | ${y(d.totalCost)} |`),t.push(`| Duration | ${d.duration?b(d.duration):"-"} |`),t.push(`| Status | ${d.status} |`),t.push(""),d.inputMessages&&d.inputMessages.length>0){t.push("### Input Messages"),t.push("");for(const c of d.inputMessages)t.push(`**[${c.role}]${c.name?` (${c.name})`:""}**`),t.push(""),t.push(w(c.content)||"_empty_"),X(c.content)&&t.push(`
|
|
14
|
-
_[${L(c.content).length} image(s) attached]_`),t.push("")}if(d.outputMessages&&d.outputMessages.length>0){t.push("### Output Messages"),t.push("");for(const c of d.outputMessages)t.push(`**[${c.role}]${c.name?` (${c.name})`:""}**`),t.push(""),t.push(w(c.content)||"_empty_"),X(c.content)&&t.push(`
|
|
15
|
-
_[${L(c.content).length} image(s) attached]_`),t.push("")}if(d.toolCalls&&d.toolCalls.length>0){t.push("### Tool Calls"),t.push("");for(const c of d.toolCalls)t.push(`**${c.name}** (\`${c.id}\`)`),t.push(""),t.push("```json"),t.push(ae(c.arguments)),t.push("```"),c.result&&(t.push(""),t.push("Result:"),t.push("```"),t.push(c.result),t.push("```")),t.push("")}t.push("---"),t.push("")}return t.join(`
|
|
16
|
-
`)}function Xe(s){const r=/```(\w*)\n?([\s\S]*?)```/g,n=[];let o=0,l,i=0;for(;(l=r.exec(s))!==null;){l.index>o&&n.push(e.jsx("span",{children:s.slice(o,l.index)},i++));const t=l[1]||"",d=l[2];n.push(e.jsxs("span",{className:"my-1.5 block rounded-lg border border-white/8 bg-slate-950/80 px-3 py-2",children:[t&&e.jsxs("span",{className:"mb-1 flex items-center gap-1 text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500",children:[e.jsx(ee,{className:"h-3 w-3"}),t]}),e.jsx("span",{className:"block font-mono text-[11px] leading-relaxed text-[#66FCF1]/80",children:d})]},i++)),o=l.index+l[0].length}return o<s.length&&n.push(e.jsx("span",{children:s.slice(o)},i++)),n.length===0?s:n}function ls(){const{traceId:s}=ue(),[r,n]=u.useState(null),[o,l]=u.useState({}),{copied:i,copy:t}=Je(),[d,c]=u.useState(!1),[x,j]=u.useState(""),[D,H]=u.useState(!1),[v,k]=u.useState(null),[B,F]=u.useState(null),[$,re]=u.useState(null),{data:ne,isLoading:le}=pe({queryKey:["trace",s],queryFn:()=>ye(s),enabled:!!s}),p=ne?.spans??[],I=u.useMemo(()=>qe(p),[p]),M=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)-M||1,q=p.reduce((a,h)=>a+h.totalTokens,0),J=p.reduce((a,h)=>a+h.totalCost,0),R=p.some(a=>a.status==="error");function oe(){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-${s?.slice(0,12)}.json`,document.body.appendChild(m),m.click(),document.body.removeChild(m),URL.revokeObjectURL(h),T.success("Trace exported",{description:"The full trace payload was downloaded as JSON."})}async function ie(){if(!(!$||!x.trim())){H(!0),F(null),k(null);try{const a=await Ce($,x.trim());k(a),T.success("Replay complete",{description:`Received a fresh response from ${a.provider}.`})}catch(a){F(a instanceof Error?a.message:String(a)),T.error("Replay failed",{description:a instanceof Error?a.message:String(a)})}finally{H(!1)}}}function ce(a){re(a),c(!0),k(null),F(null)}const K=(a,h=0)=>{const m=a.span.spanId===r,U=a.children.length>0,z=o[a.span.spanId]??!1,de=(a.span.startTime-M)/N*100,xe=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-white/6 first:border-t-0",children:e.jsxs("div",{className:"flex items-start gap-2 px-4 py-3 sm:px-5",children:[e.jsx("div",{className:"flex items-center",style:{paddingLeft:`${h*22}px`},children:U?e.jsx("button",{type:"button",onClick:()=>l(S=>({...S,[a.span.spanId]:!S[a.span.spanId]})),className:"flex h-8 w-8 items-center justify-center rounded-full border border-white/8 bg-white/4 text-slate-400 transition-colors hover:text-white",children:e.jsx(Ae,{className:`h-4 w-4 transition-transform ${z?"":"rotate-90"}`})}):e.jsx("span",{className:"flex h-8 w-8 items-center justify-center rounded-full border border-white/8 bg-white/4 text-slate-500",children:e.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-slate-500"})})}),e.jsxs("button",{type:"button",onClick:()=>n(m?null:a.span.spanId),className:`grid min-w-0 flex-1 gap-3 rounded-[22px] px-3 py-3 text-left transition-colors sm:grid-cols-[minmax(0,320px)_minmax(0,1fr)_88px] sm:items-center ${m?"bg-white/8":"hover:bg-white/4"}`,children:[e.jsx("div",{className:"min-w-0",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(Se,{status:a.span.status}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate text-sm font-medium text-white",children:a.span.name}),e.jsxs("div",{className:"mt-1 flex flex-wrap items-center gap-2.5",children:[e.jsx(te,{provider:a.span.providerName}),e.jsx("span",{className:"font-mono text-[10px] uppercase tracking-[0.16em] text-slate-500",children:a.span.operationName}),U?e.jsxs("span",{className:"font-mono text-[10px] uppercase tracking-[0.16em] text-slate-500",children:[P(a)," child",P(a)===1?"":"ren"]}):null]})]})]})}),e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between text-[10px] uppercase tracking-[0.16em] text-slate-500",children:[e.jsxs("span",{children:[Math.round(a.span.startTime-M),"ms"]}),e.jsx("span",{children:a.span.duration?b(a.span.duration):"instant"})]}),e.jsx("div",{className:"relative h-8 overflow-hidden rounded-full bg-slate-950/90",children:e.jsx(se.div,{className:`absolute bottom-1 top-1 origin-left rounded-full ${a.span.status==="error"?"bg-[linear-gradient(90deg,#C5C6C7,#45A29E)]":"bg-[linear-gradient(90deg,#45A29E,#66FCF1)]"}`,style:{left:`${de}%`,width:`${Math.max(xe,.5)}%`},initial:{scaleX:0},animate:{scaleX:1},transition:{duration:.4,ease:"easeOut"}})})]}),e.jsxs("div",{className:"text-right font-mono text-[11px] text-slate-400",children:[e.jsx("div",{className:"text-slate-200",children:y(a.span.totalCost)}),e.jsxs("div",{children:[a.span.totalTokens.toLocaleString()," tok"]})]})]})]})}),e.jsx(Be,{children:m?e.jsx(ze,{span:a.span,copied:i,onCopy:t}):null}),!z&&a.children.map(S=>K(S,h+1))]},a.span.spanId)};return le?e.jsxs("div",{className:"mx-auto max-w-[1500px] space-y-6",children:[e.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),e.jsx("div",{className:"skeleton-panel h-28 rounded-[24px]"}),e.jsx("div",{className:"skeleton-panel h-72 rounded-[24px]"})]}):e.jsxs(we,{eyebrow:"Trace Console",title:s?`Trace ${s.slice(0,12)}...`:"Trace detail",description:"Inspect the nested execution tree, timing offsets, token pressure, and payloads for a single trace without losing the operator surface.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(Ne,{}),e.jsxs("div",{className:"mt-4 space-y-3",children:[e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Current status"}),e.jsx("div",{className:"mt-2 flex items-center gap-2 text-base font-medium text-white",children:R?e.jsxs(e.Fragment,{children:[e.jsx(V,{className:"h-4 w-4 text-[#C5C6C7]"}),"Error state"]}):e.jsxs(e.Fragment,{children:[e.jsx(_e,{className:"h-4 w-4 text-[#66FCF1]"}),"Stable"]})})]}),e.jsxs("div",{className:"rounded-2xl border border-white/8 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Hierarchy"}),e.jsxs("div",{className:"mt-2 text-base font-medium text-white",children:[I.length," root spans"]}),e.jsxs("div",{className:"mt-1 text-sm text-slate-400",children:[b(N)," elapsed from first to last event"]})]})]})]}),children:[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:text-white",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-white/8 bg-white/4 px-2.5 py-1 font-mono text-xs text-slate-500",children:s}),e.jsx(C,{text:s??"",label:"traceId",copied:i,onCopy:t})]}),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];t(Ye(a),"curl")},className:"status-chip transition-colors hover:border-[#66FCF1]/16 hover:bg-white/8",children:[i==="curl"?e.jsx(_,{className:"h-3.5 w-3.5 text-[#66FCF1]"}):e.jsx($e,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:i==="curl"?"Copied!":"Copy as cURL"})]}),p.length>0&&e.jsxs("button",{type:"button",onClick:()=>{t(We(s??"",p,q,J,N,R),"markdown")},className:"status-chip transition-colors hover:border-[#66FCF1]/16 hover:bg-white/8",children:[i==="markdown"?e.jsx(_,{className:"h-3.5 w-3.5 text-[#66FCF1]"}):e.jsx(Ie,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:i==="markdown"?"Copied!":"Copy as Markdown"})]}),e.jsxs("button",{type:"button",onClick:oe,className:"status-chip transition-colors hover:border-[#66FCF1]/16 hover:bg-white/8",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:()=>ce(p[0].spanId),className:"status-chip border-[#66FCF1]/20 bg-[#66FCF1]/10 transition-colors hover:border-[#66FCF1]/30 hover:bg-[#66FCF1]/14",children:[e.jsx(Y,{className:"h-3.5 w-3.5 text-[#66FCF1]"}),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(f,{icon:A,label:"Spans",value:String(p.length)}),e.jsx(f,{icon:Re,label:"Tokens",value:q.toLocaleString()}),e.jsx(f,{icon:Q,label:"Cost",value:y(J)}),e.jsx(f,{icon:O,label:"Duration",value:p.length>0?b(N):"-"}),e.jsx(f,{icon:Z,label:"Status",value:R?"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-white/6 px-5 py-4",children:[e.jsx("div",{className:"flex h-9 w-9 items-center justify-center rounded-2xl border border-[#66FCF1]/16 bg-[#66FCF1]/10",children:e.jsx(O,{className:"h-4 w-4 text-[#66FCF1]"})}),e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Execution tree"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",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-white/8 bg-white/4 px-2.5 py-1 text-xs font-mono tracking-[0.16em] text-slate-500",children:[b(N)," total"]}),e.jsxs("span",{className:"rounded-full border border-white/8 bg-white/4 px-2.5 py-1 text-xs font-mono tracking-[0.16em] text-slate-500",children:[p.length," spans"]})]})]}),I.length>0?e.jsx("div",{className:"py-2",children:I.map(a=>K(a))}):e.jsxs("div",{className:"empty-state h-[280px]",children:[e.jsx(A,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No spans found for this trace"})]})]}),e.jsx(ge,{open:d,onOpenChange:a=>!a&&c(!1),children:e.jsxs(be,{className:"max-w-2xl",children:[e.jsx(fe,{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-[#66FCF1]/20 bg-[#66FCF1]/10",children:e.jsx(Y,{className:"h-4.5 w-4.5 text-[#66FCF1]"})}),e.jsxs("div",{children:[e.jsx(je,{children:"Trace Replay"}),e.jsx(ve,{children:"Re-send the same prompts and compare responses"})]})]})}),!v&&!D&&e.jsxs("div",{className:"space-y-4",children:[e.jsx("div",{className:"rounded-xl border border-[#45A29E]/20 bg-[#45A29E]/8 p-3 text-xs text-[#C5C6C7]/80",children:"Your API key is sent directly to the provider and is never stored by LLMTap."}),e.jsxs("div",{children:[e.jsx("label",{className:"mb-1.5 block text-xs font-medium text-slate-400",children:"Provider API Key"}),e.jsx("input",{type:"password",value:x,onChange:a=>j(a.target.value),placeholder:"sk-... or anthropic key",className:"w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-[#66FCF1]/30 focus:outline-none"})]}),B&&e.jsx("div",{className:"rounded-xl border border-[#C5C6C7]/20 bg-[#C5C6C7]/8 p-3 text-sm text-[#C5C6C7]",children:B}),e.jsx("button",{type:"button",disabled:!x.trim(),onClick:ie,className:"w-full rounded-xl bg-[#66FCF1] px-4 py-3 text-sm font-semibold text-slate-950 transition-colors hover:bg-[#45A29E] disabled:cursor-not-allowed disabled:opacity-40",children:"Send Replay Request"})]}),D&&e.jsxs("div",{className:"flex flex-col items-center gap-3 py-12",children:[e.jsx(Ee,{className:"h-8 w-8 animate-spin text-[#66FCF1]"}),e.jsxs("p",{className:"text-sm text-slate-400",children:["Replaying against ",p[0]?.providerName," API..."]})]}),v&&(()=>{const a=p.find(m=>m.spanId===$)??p[0],h=a?.outputMessages?.map(m=>w(m.content)).join(`
|
|
17
|
-
`)??"";return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"grid grid-cols-3 gap-3 text-center",children:[e.jsxs("div",{className:"rounded-xl border border-white/8 bg-white/4 p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Tokens"}),e.jsxs("div",{className:"mt-1 font-mono text-sm text-white",children:[a.totalTokens," ",e.jsx("span",{className:"text-slate-500",children:"vs"})," ",v.totalTokens]})]}),e.jsxs("div",{className:"rounded-xl border border-white/8 bg-white/4 p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Duration"}),e.jsxs("div",{className:"mt-1 font-mono text-sm text-white",children:[b(a.duration??0)," ",e.jsx("span",{className:"text-slate-500",children:"vs"})," ",b(v.duration)]})]}),e.jsxs("div",{className:"rounded-xl border border-white/8 bg-white/4 p-3",children:[e.jsx("div",{className:"text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Model"}),e.jsx("div",{className:"mt-1 truncate font-mono text-xs text-white",children:v.responseModel})]})]}),e.jsxs("div",{className:"grid gap-3 md:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-500",children:"Original Response"}),e.jsx("div",{className:"max-h-[300px] overflow-y-auto rounded-xl border border-white/8 bg-white/4 p-3 text-sm leading-6 text-slate-300",children:h||e.jsx("span",{className:"text-slate-600",children:"No content captured"})})]}),e.jsxs("div",{children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[#66FCF1]/80",children:"Replay Response"}),e.jsx("div",{className:"max-h-[300px] overflow-y-auto rounded-xl border border-[#66FCF1]/12 bg-[#66FCF1]/6 p-3 text-sm leading-6 text-slate-300",children:v.content||e.jsx("span",{className:"text-slate-600",children:"Empty response"})})]})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{type:"button",onClick:()=>{k(null),F(null)},className:"flex-1 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-slate-300 transition-colors hover:bg-white/10",children:"Replay Again"}),e.jsx("button",{type:"button",onClick:()=>c(!1),className:"flex-1 rounded-xl bg-[#66FCF1] px-4 py-2.5 text-sm font-semibold text-slate-950 transition-colors hover:bg-[#45A29E]",children:"Done"})]})]})})()]})})]})}export{ls as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as c,d as me,j as e}from"./query-DVWnIZNd.js";import{u as he,S as pe,d as ue,e as be,g as je,h as ge,L as Ne,i as W,b as fe}from"./index-BjX-ME4E.js";import{G as ve}from"./GettingStartedPanel-D2-E8-3Q.js";import{P as we,c as V,a as S,b as F,f as te}from"./format-wxLsIVjs.js";import{S as M}from"./StatusDot-D69CfzT5.js";import{S as D,a as I,b as E,c as P,d as y}from"./select-DxzgyWz-.js";import{P as J}from"./constants-OlSc-7iA.js";import{g as ye}from"./content-BRoZVvRJ.js";import{a as Y,b as ae}from"./motion-DSHPdBNu.js";import{u as O,v as Ce,w as G,Z as Se,X as le,a as Fe,n as B,x as ee,o as Te,p as ke,q as _e,s as De,r as ne,y as Ie,z as Ee,B as Pe,g as Me,D as $e}from"./icons-mXW2t-HS.js";import"./ui-BFiKdTjl.js";const se=[25,50,100,200];function Le({trace:t,onClose:a}){const p=t.totalDuration??(t.endTime?t.endTime-t.startTime:0);return e.jsx(pe,{open:!0,onOpenChange:u=>!u&&a(),children:e.jsxs(ue,{side:"right",className:"flex flex-col overflow-y-auto",children:[e.jsxs(be,{className:"border-b border-white/6",children:[e.jsx("div",{className:"hud-label",children:"Quick preview"}),e.jsx(je,{className:"truncate",children:t.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:"rounded-2xl border border-white/6 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Trace ID"}),e.jsx("div",{className:"mt-1 break-all font-mono text-sm text-slate-300",children:t.traceId})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Status"}),e.jsxs("div",{className:"mt-2 flex items-center gap-2",children:[e.jsx(M,{status:t.status}),e.jsx("span",{className:`text-sm font-medium ${t.status==="error"?"text-[#C5C6C7]":"text-[#66FCF1]"}`,children:t.status==="error"?"Error":"Healthy"})]})]}),e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Duration"}),e.jsxs("div",{className:"mt-2 flex items-center gap-2",children:[e.jsx(Ee,{className:"h-4 w-4 text-[#66FCF1]"}),e.jsx("span",{className:"text-sm font-medium text-white",children:p>0?F(p):"N/A"})]})]})]}),e.jsxs("div",{className:"grid grid-cols-3 gap-3",children:[e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Spans"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-white",children:t.spanCount}),e.jsx(Pe,{className:"mx-auto mt-1 h-4 w-4 text-[#45A29E]/70"})]}),e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Tokens"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-white",children:te(t.totalTokens)}),e.jsx(Me,{className:"mx-auto mt-1 h-4 w-4 text-[#66FCF1]/70"})]}),e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4 text-center",children:[e.jsx("div",{className:"hud-label",children:"Cost"}),e.jsx("div",{className:"mt-2 text-xl font-semibold text-white",children:S(t.totalCost)}),e.jsx($e,{className:"mx-auto mt-1 h-4 w-4 text-[#C5C6C7]/70"})]})]}),e.jsxs("div",{className:"rounded-2xl border border-white/6 bg-white/4 p-4",children:[e.jsx("div",{className:"hud-label",children:"Started"}),e.jsxs("div",{className:"mt-1 text-sm text-slate-300",children:[new Date(t.startTime).toLocaleString()," (",V(t.startTime),")"]}),t.endTime&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"hud-label mt-3",children:"Ended"}),e.jsx("div",{className:"mt-1 text-sm text-slate-300",children:new Date(t.endTime).toLocaleString()})]})]}),e.jsxs(Ne,{to:`/trace/${t.traceId}`,className:"flex w-full items-center justify-center gap-2 rounded-2xl border border-[#45A29E]/20 bg-[linear-gradient(135deg,rgba(69,162,158,0.14),rgba(102,252,241,0.08))] px-5 py-3 text-sm font-medium text-[#66FCF1] transition-colors hover:bg-[linear-gradient(135deg,rgba(69,162,158,0.24),rgba(102,252,241,0.14))]",children:["Open full trace detail",e.jsx(ne,{className:"h-4 w-4"})]})]})]})})}function Ae({traceA:t,traceB:a}){const[p,u]=c.useState([]),[i,o]=c.useState([]),[n,f]=c.useState(!0);if(c.useEffect(()=>{let v=!1;return f(!0),Promise.all([W(t.traceId),W(a.traceId)]).then(([d,j])=>{v||(u(d.spans),o(j.spans),f(!1))}),()=>{v=!0}},[t.traceId,a.traceId]),n)return e.jsx("div",{className:"flex items-center justify-center py-8 text-sm text-slate-500",children:"Loading responses..."});const r=v=>v.flatMap(d=>(d.outputMessages??[]).filter(j=>j.role==="assistant").map(j=>({spanName:d.name,model:d.responseModel??d.requestModel,content:ye(j.content)}))),b=r(p),g=r(i),l=Math.max(b.length,g.length);return l===0?e.jsx("div",{className:"flex items-center justify-center py-8 text-sm text-slate-500",children:"No assistant responses found in either trace."}):e.jsx("div",{className:"space-y-3",children:Array.from({length:l},(v,d)=>{const j=b[d],h=g[d];return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx("div",{className:"rounded-2xl border border-[#45A29E]/10 bg-white/3 p-3",children:j?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-[#45A29E]/16 bg-[#45A29E]/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-[#66FCF1]",children:"assistant"}),e.jsx("span",{className:"font-mono text-[10px] text-slate-500",children:j.model})]}),e.jsx("pre",{className:"whitespace-pre-wrap font-mono text-xs leading-relaxed text-slate-200",children:j.content||e.jsx("span",{className:"text-slate-600 italic",children:"empty response"})})]}):e.jsx("div",{className:"text-xs italic text-slate-600",children:"No response"})}),e.jsx("div",{className:"rounded-2xl border border-[#66FCF1]/10 bg-white/3 p-3",children:h?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-[#66FCF1]/16 bg-[#66FCF1]/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-[#66FCF1]",children:"assistant"}),e.jsx("span",{className:"font-mono text-[10px] text-slate-500",children:h.model})]}),e.jsx("pre",{className:"whitespace-pre-wrap font-mono text-xs leading-relaxed text-slate-200",children:h.content||e.jsx("span",{className:"text-slate-600 italic",children:"empty response"})})]}):e.jsx("div",{className:"text-xs italic text-slate-600",children:"No response"})})]},d)})})}function qe({traceA:t,traceB:a,durA:p,durB:u}){const[i,o]=c.useState("cost"),n=c.useMemo(()=>[{id:"A",name:t.name,cost:t.totalCost,latency:p,tokens:t.totalTokens},{id:"B",name:a.name,cost:a.totalCost,latency:u,tokens:a.totalTokens}],[t,a,p,u]),f=l=>i==="tokens"?l.toLocaleString():i==="latency"?F(l):S(l),r=i==="tokens"?"Token distribution":i==="latency"?"Latency comparison":"Cost comparison",b=Math.max(...n.map(l=>l[i]),1),g=n[0][i]===n[1][i]?null:n[0][i]>n[1][i]?"A":"B";return e.jsxs("div",{className:"mb-4 rounded-[24px] border border-white/8 bg-[linear-gradient(180deg,rgba(15,20,36,0.96),rgba(8,11,24,0.98))] 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-white",children:r})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"rounded-full border border-white/8 bg-white/5 px-2.5 py-1 text-[10px] font-mono uppercase tracking-[0.18em] text-slate-400",children:g?`trace ${g} leading`:"even"}),e.jsxs(D,{value:i,onValueChange:l=>o(l),children:[e.jsx(I,{className:"h-8 w-[170px] text-xs",children:e.jsx(E,{placeholder:"Select metric"})}),e.jsxs(P,{children:[e.jsx(y,{value:"cost",children:"Model cost ranking"}),e.jsx(y,{value:"latency",children:"Model latency ranking"}),e.jsx(y,{value:"tokens",children:"Token distribution"})]})]})]})]}),e.jsx("div",{className:"grid gap-3 md:grid-cols-2",children:n.map(l=>{const v=Math.max(l[i]/b*100,8),d=l.id==="A";return e.jsxs("div",{className:`rounded-[22px] border px-4 py-4 ${d?"border-[#66FCF1]/18 bg-[#66FCF1]/8":"border-[#45A29E]/18 bg-[#45A29E]/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] ${d?"border-[#66FCF1]/22 bg-[#66FCF1]/12 text-[#C5C6C7]":"border-[#45A29E]/20 bg-[#45A29E]/10 text-[#C5C6C7]"}`,children:["Trace ",l.id]}),g===l.id?e.jsx("span",{className:"rounded-full border border-white/8 bg-white/6 px-2 py-0.5 text-[10px] uppercase tracking-[0.18em] text-slate-300",children:"lead"}):null]}),e.jsx("div",{className:"mt-2 truncate text-sm font-semibold text-white",children:l.name}),e.jsx("div",{className:"mt-1 font-mono text-[11px] text-slate-500",children:d?t.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-white",children:f(l[i])}),e.jsx("div",{className:"mt-1 text-[11px] text-slate-500",children:l.cost>0?S(l.cost):"No cost"})]})]}),e.jsx("div",{className:"mt-4 h-2.5 overflow-hidden rounded-full bg-slate-950/75",children:e.jsx("div",{className:`h-full rounded-full ${d?"bg-[linear-gradient(90deg,#45A29E,#66FCF1)]":"bg-[linear-gradient(90deg,#1F2833,#45A29E)]"}`,style:{width:`${v}%`}})}),e.jsxs("div",{className:"mt-3 flex flex-wrap gap-2 text-[11px] text-slate-400",children:[e.jsxs("span",{className:"rounded-full border border-white/8 bg-white/5 px-2 py-0.5",children:[l.tokens.toLocaleString()," tokens"]}),e.jsx("span",{className:"rounded-full border border-white/8 bg-white/5 px-2 py-0.5",children:l.latency>0?F(l.latency):"N/A"})]})]},l.id)})})]})}function Re({traceA:t,traceB:a,onClose:p}){const[u,i]=c.useState("metrics"),o=t.totalDuration??(t.endTime?t.endTime-t.startTime:0),n=a.totalDuration??(a.endTime?a.endTime-a.startTime:0),f=[{label:"Status",a:t.status,b:a.status,better:t.status===a.status?"tie":t.status==="ok"?"a":"b"},{label:"Spans",a:String(t.spanCount),b:String(a.spanCount)},{label:"Tokens",a:t.totalTokens.toLocaleString(),b:a.totalTokens.toLocaleString(),diff:t.totalTokens!==a.totalTokens?`${a.totalTokens-t.totalTokens>0?"+":""}${(a.totalTokens-t.totalTokens).toLocaleString()}`:"same",better:t.totalTokens===a.totalTokens?"tie":t.totalTokens<a.totalTokens?"a":"b"},{label:"Cost",a:S(t.totalCost),b:S(a.totalCost),diff:t.totalCost!==a.totalCost?`${a.totalCost-t.totalCost>0?"+":""}${S(Math.abs(a.totalCost-t.totalCost))}`:"same",better:t.totalCost===a.totalCost?"tie":t.totalCost<a.totalCost?"a":"b"},{label:"Duration",a:o>0?F(o):"N/A",b:n>0?F(n):"N/A",diff:o>0&&n>0&&o!==n?`${n-o>0?"+":""}${F(Math.abs(n-o))}`:o===n?"same":void 0,better:o===n?"tie":o>0&&n>0&&o<n?"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-white",children:"Side-by-side analysis"})]}),e.jsxs("button",{type:"button",onClick:p,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(le,{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:()=>i("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-[#66FCF1]/22 bg-[#66FCF1]/12 text-[#C5C6C7]":"border-white/8 bg-white/4 text-slate-400 hover:text-white"}`,children:[e.jsx(G,{className:"h-3 w-3"}),"Metrics"]}),e.jsxs("button",{type:"button",onClick:()=>i("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-[#66FCF1]/22 bg-[#66FCF1]/12 text-[#C5C6C7]":"border-white/8 bg-white/4 text-slate-400 hover:text-white"}`,children:[e.jsx(Ie,{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-[#66FCF1]/18 bg-[#66FCF1]/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-white",children:t.name}),e.jsx("div",{className:"mt-0.5 font-mono text-[10px] text-slate-500",children:t.traceId.slice(0,16)})]}),e.jsxs("div",{className:"rounded-2xl border border-[#45A29E]/18 bg-[#45A29E]/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-white",children:a.name}),e.jsx("div",{className:"mt-0.5 font-mono text-[10px] text-slate-500",children:a.traceId.slice(0,16)})]}),e.jsx("div",{className:"flex items-center justify-center text-[11px] uppercase tracking-[0.18em] text-slate-500",children:"Delta"})]}),e.jsx(qe,{traceA:t,traceB:a,durA:o,durB:n}),e.jsx("div",{className:"space-y-2",children:f.map(r=>e.jsxs("div",{className:"grid grid-cols-[110px_1fr_1fr_96px] items-center gap-3 rounded-2xl border border-white/6 bg-white/4 px-4 py-3",children:[e.jsx("div",{className:"text-xs font-medium uppercase tracking-wider text-slate-400",children:r.label}),e.jsx("div",{className:`text-sm font-mono ${r.better==="a"?"text-[#66FCF1]":(r.better==="tie","text-slate-300")}`,children:r.label==="Status"?e.jsxs("span",{className:"inline-flex items-center gap-1.5",children:[e.jsx(M,{status:t.status}),r.a]}):r.a}),e.jsx("div",{className:`text-sm font-mono ${r.better==="b"?"text-[#45A29E]":(r.better==="tie","text-slate-300")}`,children:r.label==="Status"?e.jsxs("span",{className:"inline-flex items-center gap-1.5",children:[e.jsx(M,{status:a.status}),r.b]}):r.b}),e.jsx("div",{className:"text-center text-xs font-mono text-slate-500",children:r.diff??"--"})]},r.label))})]}):e.jsx(Ae,{traceA:t,traceB:a})]})}function Je(){const[t,a]=he(),p=t.get("q")??"",u=c.useDeferredValue(p),i=t.get("status"),o=i==="ok"||i==="error"?i:"",n=Number(t.get("periodHours")??"24"),f=Number(t.get("pageSize")??"50"),r=se.includes(f)?f:50,b=Math.max(1,Number(t.get("page")??"1")||1),g=(b-1)*r,[l,v]=c.useState(null),[d,j]=c.useState("desc"),[h,$]=c.useState(new Set),[L,K]=c.useState(null),[re,A]=c.useState(!1),_=c.useMemo(()=>({limit:r,offset:g,q:u.trim()||void 0,status:o||void 0,periodHours:J.some(s=>s.value===n)?n:24}),[u,r,g,n,o]),{data:Q,isLoading:ie}=me({queryKey:["traces",_],queryFn:()=>fe(_)}),q=Q?.traces??[],T=Q?.total??0,U=Math.max(1,Math.ceil(T/r));function oe(s){l===s?j(x=>x==="asc"?"desc":"asc"):(v(s),j("desc"))}const N=c.useMemo(()=>l?[...q].sort((s,x)=>{const m=s[l]??0,w=x[l]??0;return d==="asc"?m-w:w-m}):q,[q,l,d]),k=N.length>0&&N.every(s=>h.has(s.traceId)),de=c.useCallback(()=>{$(s=>{const x=new Set(s);if(k)for(const m of N)x.delete(m.traceId);else for(const m of N)x.add(m.traceId);return x})},[k,N]),ce=c.useCallback(s=>{$(x=>{const m=new Set(x);return m.has(s)?m.delete(s):m.add(s),m})},[]),xe=c.useCallback(()=>{$(new Set),A(!1)},[]),R=c.useMemo(()=>N.filter(s=>h.has(s.traceId)),[N,h]),z=h.size===2,Z=p.length>0||o.length>0||_.periodHours!==24;function C(s,x=!0){a(m=>{const w=new URLSearchParams(m);for(const[X,H]of Object.entries(s))H===void 0||H===""?w.delete(X):w.set(X,String(H));return x&&w.delete("page"),w},{replace:!0})}return e.jsxs(e.Fragment,{children:[e.jsxs(we,{eyebrow:"Trace Explorer",title:"Deep-dive into every trace flowing through the system.",description:"Explore, compare, and inspect individual traces with full visibility into span counts, token usage, cost, and execution timing.",aside:e.jsx("div",{className:"insight-panel",children:e.jsxs("div",{className:"grid gap-3",children:[e.jsxs("div",{className:"surface-strong rounded-2xl p-4",children:[e.jsx("div",{className:"hud-label",children:"Total traces"}),e.jsxs("div",{className:"mt-2 flex items-center justify-between",children:[e.jsx("div",{className:"text-lg font-medium text-white",children:te(T)}),e.jsx(B,{className:"h-4 w-4 text-[#66FCF1]"})]}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:"Matching current filters"})]}),h.size>0&&e.jsxs("div",{className:"rounded-2xl border border-[#66FCF1]/15 bg-[#66FCF1]/8 p-4",children:[e.jsx("div",{className:"hud-label",children:"Selected"}),e.jsxs("div",{className:"mt-2 flex items-center justify-between",children:[e.jsxs("div",{className:"text-lg font-medium text-white",children:[h.size," trace",h.size!==1&&"s"]}),e.jsx(G,{className:"h-4 w-4 text-[#66FCF1]"})]}),e.jsx("div",{className:"mt-1 text-sm text-slate-400",children:z?"Ready to compare":"Select exactly 2 to compare"})]})]})}),children:[e.jsx(Y,{children:h.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(O,{className:"h-3.5 w-3.5 text-[#66FCF1]"}),e.jsxs("span",{children:[h.size," selected"]})]}),e.jsxs("button",{type:"button",onClick:xe,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8",children:[e.jsx(Ce,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]}),e.jsxs("button",{type:"button",disabled:!z,onClick:()=>A(!0),className:`inline-flex items-center gap-2 rounded-2xl border px-4 py-2 text-sm font-medium transition-all ${z?"border-[#45A29E]/20 bg-[linear-gradient(135deg,rgba(69,162,158,0.14),rgba(102,252,241,0.08))] text-[#66FCF1] hover:bg-[linear-gradient(135deg,rgba(69,162,158,0.24),rgba(102,252,241,0.14))]":"cursor-not-allowed border-white/6 bg-white/4 text-slate-500"}`,children:[e.jsx(G,{className:"h-4 w-4"}),"Compare traces"]})]})})})}),e.jsx(Y,{children:re&&R.length===2&&e.jsx(Re,{traceA:R[0],traceB:R[1],onClose:()=>A(!1)})}),e.jsxs("section",{className:"dashboard-shell rounded-[26px] px-4 py-4 sm:px-5 sm:py-5",children:[e.jsxs("div",{className:"surface-strong mb-4 rounded-[24px] p-4",children:[e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Search console"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-white",children:"Trace explorer"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"status-chip",children:[e.jsx(Se,{className:"h-3.5 w-3.5 text-[#C5C6C7]"}),e.jsxs("span",{children:[T," traces"]})]}),e.jsxs("button",{type:"button",onClick:()=>C({q:void 0,status:void 0,periodHours:void 0}),disabled:!Z,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(le,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]})]}),e.jsxs("div",{className:"mt-4 grid gap-3 md:grid-cols-[minmax(0,1.8fr)_minmax(0,0.6fr)_minmax(0,0.6fr)]",children:[e.jsxs("label",{className:"field-surface relative block rounded-2xl",children:[e.jsx(Fe,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500"}),e.jsx("input",{value:p,onChange:s=>C({q:s.target.value||void 0}),placeholder:"Search by trace name, ID, or keyword...",className:"w-full rounded-2xl bg-transparent py-3 pl-10 pr-4 text-sm text-white placeholder:text-slate-500 focus:outline-none"})]}),e.jsxs(D,{value:o||"__all__",onValueChange:s=>C({status:s==="__all__"?void 0:s}),children:[e.jsx(I,{className:"w-full rounded-2xl py-3",children:e.jsx(E,{placeholder:"All states"})}),e.jsxs(P,{children:[e.jsx(y,{value:"__all__",children:"All states"}),e.jsx(y,{value:"ok",children:"Healthy only"}),e.jsx(y,{value:"error",children:"Errors only"})]})]}),e.jsxs(D,{value:String(_.periodHours??24),onValueChange:s=>C({periodHours:Number(s)===24?void 0:Number(s)}),children:[e.jsx(I,{className:"w-full rounded-2xl py-3",children:e.jsx(E,{})}),e.jsx(P,{children:J.map(s=>e.jsx(y,{value:String(s.value),children:s.label},s.value))})]})]})]}),ie?e.jsx("div",{className:"empty-state h-[400px] text-slate-500",children:"Loading traces..."}):N.length===0?Z?e.jsxs("div",{className:"empty-state h-[400px]",children:[e.jsx(B,{className:"h-8 w-8 text-slate-500"}),e.jsx("div",{className:"text-base font-medium text-white",children:"No traces match these filters"}),e.jsx("div",{className:"mt-1 text-sm text-slate-500",children:"Try adjusting the search or time window"})]}):e.jsx(ve,{}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"overflow-hidden rounded-[22px] border border-white/8 bg-[linear-gradient(180deg,rgba(13,17,31,0.98),rgba(7,10,22,0.98))] shadow-[inset_0_1px_0_rgba(255,255,255,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(11,15,28,0.94)] backdrop-blur-xl",children:e.jsxs("tr",{className:"text-left text-[11px] uppercase tracking-[0.18em] text-slate-500",children:[e.jsx("th",{className:"px-4 py-3 text-center",children:e.jsx("button",{type:"button",onClick:de,"aria-label":k?"Deselect all traces on page":"Select all traces on page",className:"inline-flex items-center justify-center transition-colors hover:text-slate-300",title:k?"Deselect all":"Select all",children:k?e.jsx(O,{className:"h-4 w-4 text-[#66FCF1]"}):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(([s,x])=>e.jsx("th",{className:"px-4 py-3 text-right",children:e.jsxs("button",{type:"button",onClick:()=>oe(s),className:"inline-flex items-center gap-1 transition-colors hover:text-slate-300",children:[x,l===s?d==="asc"?e.jsx(Te,{className:"h-3 w-3"}):e.jsx(ke,{className:"h-3 w-3"}):e.jsx(_e,{className:"h-3 w-3 opacity-30"})]})},s)),e.jsx("th",{className:"px-4 py-3 text-right",children:"Duration"})]})}),e.jsx("tbody",{children:N.map(s=>{const x=h.has(s.traceId),m=s.totalDuration??(s.endTime?s.endTime-s.startTime:0);return e.jsxs("tr",{onClick:()=>K(s),className:`cursor-pointer border-t border-white/6 transition-colors ${x?"bg-[#66FCF1]/8":"hover:bg-white/4"}`,children:[e.jsx("td",{className:"px-4 py-3.5 text-center",onClick:w=>w.stopPropagation(),children:e.jsx("button",{type:"button",onClick:()=>ce(s.traceId),"aria-label":`Select trace ${s.name}`,className:"inline-flex items-center justify-center transition-colors hover:text-[#66FCF1]",children:x?e.jsx(O,{className:"h-4 w-4 text-[#66FCF1]"}):e.jsx(ee,{className:"h-4 w-4 text-slate-500"})})}),e.jsx("td",{className:"px-4 py-3.5",children:e.jsx(M,{status:s.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-white",children:s.name}),e.jsxs("div",{className:"mt-1 text-[11px] text-slate-500",children:[V(s.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-slate-500",children:s.traceId.slice(0,12)})}),e.jsx("td",{className:"px-4 py-3.5 text-right font-mono text-xs text-slate-300",children:s.spanCount}),e.jsx("td",{className:"px-4 py-3.5 text-right font-mono text-xs text-slate-300",children:s.totalTokens.toLocaleString()}),e.jsx("td",{className:"px-4 py-3.5 text-right font-mono text-xs text-slate-300",children:S(s.totalCost)}),e.jsx("td",{className:"px-4 py-3.5 text-right text-xs text-slate-500",children:V(s.startTime)}),e.jsx("td",{className:"px-4 py-3.5 text-right font-mono text-xs text-slate-400",children:m>0?F(m):"--"})]},s.traceId)})})]})})}),e.jsxs("div",{className:"mt-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"text-xs text-slate-500",children:T>0?`Showing ${g+1}-${Math.min(g+N.length,T)} of ${T}`:"Awaiting traces"}),e.jsxs(D,{value:String(r),onValueChange:s=>C({pageSize:Number(s)===50?void 0:Number(s)}),children:[e.jsx(I,{className:"w-auto rounded-xl px-2 py-1.5 text-xs",children:e.jsx(E,{})}),e.jsx(P,{children:se.map(s=>e.jsxs(y,{value:String(s),children:[s," / page"]},s))})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>C({page:b>2?b-1:void 0},!1),disabled:b<=1,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(De,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Previous"})]}),e.jsxs("span",{className:"text-xs text-slate-500",children:[b," / ",U]}),e.jsxs("button",{type:"button",onClick:()=>C({page:b+1},!1),disabled:b>=U,className:"status-chip transition-colors hover:border-white/16 hover:bg-white/8 disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx("span",{children:"Next"}),e.jsx(ne,{className:"h-3.5 w-3.5"})]})]})]})]})]})]}),L&&e.jsx(Le,{trace:L,onClose:()=>K(null)},L.traceId)]})}export{Je as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const l=[{value:1,label:"1h"},{value:6,label:"6h"},{value:24,label:"24h"},{value:168,label:"7d"},{value:720,label:"30d"}];export{l as P};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./query-DVWnIZNd.js";import{j as i,G as d}from"./index-BjX-ME4E.js";function c({className:a,size:t=200,duration:r=12,delay:s=0,colorFrom:n="#66FCF1",colorTo:l="#45A29E",borderWidth:o=1.5}){return e.jsx("div",{className:i("pointer-events-none absolute inset-0 rounded-[inherit]",a),style:{"--border-beam-size":`${t}px`,"--border-beam-duration":`${r}s`,"--border-beam-delay":`${s}s`,"--border-beam-color-from":n,"--border-beam-color-to":l,"--border-beam-width":`${o}px`},children:e.jsx("div",{className:"absolute inset-0 rounded-[inherit]",style:{padding:`${o}px`,mask:"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",maskComposite:"exclude",WebkitMaskComposite:"xor"},children:e.jsx("div",{className:"absolute inset-[-100%] animate-[border-beam_var(--border-beam-duration)_linear_var(--border-beam-delay)_infinite]",style:{background:"conic-gradient(from 0deg, transparent, transparent 60deg, var(--border-beam-color-from) 120deg, var(--border-beam-color-to) 180deg, transparent 240deg, transparent)"}})})})}function m({className:a,children:t}){return e.jsxs("div",{className:i("relative overflow-hidden",a),children:[e.jsx("div",{className:"pointer-events-none absolute left-1/2 top-0 h-56 w-[38rem] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgba(125,211,252,0.28),rgba(34,197,94,0.14)_36%,transparent_72%)] blur-3xl"}),e.jsx("div",{className:"pointer-events-none absolute left-1/2 top-0 h-44 w-[14rem] -translate-x-1/2 bg-[linear-gradient(180deg,rgba(255,255,255,0.36),rgba(125,211,252,0.14)_26%,transparent_72%)] opacity-70 blur-2xl"}),e.jsx("div",{className:"pointer-events-none absolute left-1/2 top-10 h-56 w-[30rem] -translate-x-1/2 bg-[conic-gradient(from_180deg_at_50%_0%,rgba(255,255,255,0)_0deg,rgba(255,255,255,0.16)_22deg,rgba(56,189,248,0.16)_48deg,rgba(16,185,129,0.12)_76deg,rgba(255,255,255,0)_112deg)] opacity-90 blur-xl"}),e.jsx("div",{className:"relative",children:t})]})}function x({children:a,className:t,shimmerWidth:r=100,speed:s=3}){return e.jsx("span",{className:i("inline-flex animate-[shiny-text_var(--shiny-speed)_ease-in-out_infinite] bg-clip-text",t),style:{"--shiny-width":`${r}px`,"--shiny-speed":`${s}s`,backgroundSize:`${r}px 100%`,backgroundRepeat:"no-repeat",backgroundPosition:"0 0",backgroundImage:"linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 60%)",WebkitBackgroundClip:"text"},children:a})}function p({eyebrow:a,title:t,description:r,aside:s,children:n}){return e.jsxs("div",{className:"mx-auto flex w-full max-w-[1500px] flex-col gap-8",children:[e.jsxs("section",{className:"hero-panel overflow-hidden rounded-[28px] border border-white/8 px-5 py-6 sm:px-7 sm:py-8",children:[e.jsx(c,{size:250,duration:15,colorFrom:"#66FCF1",colorTo:"#45A29E"}),e.jsx("div",{className:"absolute inset-0 opacity-80 [mask-image:radial-gradient(circle_at_center,black,transparent_86%)]",children:e.jsx(d,{className:"h-full w-full text-[#66FCF1]",starsCount:52,starsSize:1.8,starsOpacity:.68,glowIntensity:10,movementSpeed:.18,mouseInfluence:110,gravityStrength:58})}),e.jsx("div",{className:"pointer-events-none absolute inset-y-0 right-0 w-1/2 bg-[radial-gradient(circle_at_top_right,rgba(102,252,241,0.18),transparent_45%),radial-gradient(circle_at_60%_70%,rgba(69,162,158,0.16),transparent_42%)]"}),e.jsx("div",{className:"pointer-events-none absolute inset-x-8 bottom-0 h-px bg-[linear-gradient(90deg,transparent,rgba(148,163,184,0.4),transparent)]"}),e.jsx(m,{className:"relative",children:e.jsxs("div",{className:"relative grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]",children:[e.jsxs("div",{className:"space-y-4 pt-6 sm:pt-10",children:[e.jsxs("div",{className:"inline-flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-3 py-2 backdrop-blur-xl",children:[e.jsx(x,{className:"hud-label",shimmerWidth:80,speed:5,children:a}),e.jsx("span",{className:"h-1.5 w-1.5 rounded-full bg-[#66FCF1] shadow-[0_0_18px_rgba(102,252,241,0.7)]"}),e.jsx("span",{className:"text-[11px] font-medium uppercase tracking-[0.2em] text-slate-400",children:"Live operator surface"})]}),e.jsxs("div",{className:"max-w-4xl space-y-4",children:[e.jsx("h1",{className:"max-w-4xl text-4xl font-semibold leading-[0.95] tracking-[-0.06em] text-white sm:text-6xl",children:t}),e.jsx("p",{className:"max-w-2xl text-sm leading-6 text-slate-300 sm:text-base",children:r}),e.jsxs("div",{className:"flex flex-wrap gap-3 pt-1",children:[e.jsx("span",{className:"status-chip border-[#45A29E]/16 bg-[#45A29E]/12 text-[#66FCF1]",children:"Local-first telemetry"}),e.jsx("span",{className:"status-chip border-[#66FCF1]/16 bg-[#66FCF1]/10 text-[#66FCF1]",children:"Streaming traces"}),e.jsx("span",{className:"status-chip border-[#C5C6C7]/14 bg-[#C5C6C7]/8 text-[#C5C6C7]",children:"Cost intelligence"})]})]})]}),s?e.jsx("div",{className:"relative lg:pt-8",children:s}):null]})})]}),n]})}function u(a){const t=Math.abs(a),r=a<0?"-":"";return t<.01?`${r}$${t.toFixed(4)}`:`${r}$${t.toFixed(2)}`}function f(a){return a<1e3?`${Math.round(a)}ms`:`${(a/1e3).toFixed(1)}s`}function h(a){return new Intl.NumberFormat("en-US",{notation:"compact",maximumFractionDigits:a>=1e3?1:0}).format(a)}function v(a){const t=Date.now()-a,r=Math.floor(t/6e4);if(r<1)return"just now";if(r<60)return`${r}m ago`;const s=Math.floor(r/60);return s<24?`${s}h ago`:`${Math.floor(s/24)}d ago`}export{p as P,u as a,f as b,v as c,h as f};
|