llmtap 0.1.8 → 0.1.9
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 → CommandBar-CTVjcTSb.js} +1 -1
- package/dist/dashboard/assets/{Costs-B-TMvDlI.js → Costs-CIcHpRev.js} +1 -1
- package/dist/dashboard/assets/{Dashboard-CFNAMjdc.js → Dashboard-Bxw4TSkN.js} +1 -1
- package/dist/dashboard/assets/{DataTable-p1PD-dJj.js → DataTable-NGj_eAG3.js} +1 -1
- package/dist/dashboard/assets/{EmptyState-xDl-M9Rz.js → EmptyState-B8rSQL1S.js} +1 -1
- package/dist/dashboard/assets/{Models-BpMhGVp5.js → Models-BJBIK0Bi.js} +1 -1
- package/dist/dashboard/assets/{ProviderBadge-Cs31007s.js → ProviderBadge-Qtp_Hf66.js} +1 -1
- package/dist/dashboard/assets/{Sessions-CiKyTRlP.js → Sessions-BqAJxlud.js} +1 -1
- package/dist/dashboard/assets/{Settings-7wRfCPnB.js → Settings-R7gn546k.js} +1 -1
- package/dist/dashboard/assets/{TraceDetail-CKDDbbEV.js → TraceDetail-BNzpHmos.js} +1 -1
- package/dist/dashboard/assets/{Traces-BYWwPP14.js → Traces-Bcs-oGQr.js} +1 -1
- package/dist/dashboard/assets/{accordion-CC_sxDZ8.js → accordion-BbWMmUmi.js} +1 -1
- package/dist/dashboard/assets/{content-DZmxO8bn.js → content-BV3DhCiY.js} +1 -1
- package/dist/dashboard/assets/{format-zoXqpaOb.js → format-BdzpxHjW.js} +1 -1
- package/dist/dashboard/assets/index-BCjwgtkq.js +791 -0
- package/dist/dashboard/assets/index-DBxoe0Ri.css +1 -0
- package/dist/dashboard/assets/{number-ticker-CjofSQ3s.js → number-ticker-4lK1KASk.js} +1 -1
- package/dist/dashboard/assets/{select-BJEJvQo4.js → select-Dsu3r0h-.js} +1 -1
- package/dist/dashboard/assets/{statistics-with-status-grid-tcb9SpIY.js → statistics-with-status-grid-QCEOlWCN.js} +1 -1
- package/dist/dashboard/index.html +2 -2
- package/package.json +1 -1
- package/dist/dashboard/assets/index-CtlcBMi-.css +0 -1
- package/dist/dashboard/assets/index-DG2eF3M2.js +0 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as u,j as a}from"./query-DVWnIZNd.js";import{I as d,c as t}from"./index-
|
|
1
|
+
import{r as u,j as a}from"./query-DVWnIZNd.js";import{I as d,c as t}from"./index-BCjwgtkq.js";const p=[{value:1,label:"1h"},{value:6,label:"6h"},{value:24,label:"24h"},{value:168,label:"7d"},{value:720,label:"30d"}];function x({placeholder:o="Search",value:s,onChange:l,shortcut:n="⌘K",className:i}){const[e,r]=u.useState(!1);return a.jsxs("div",{className:t("relative w-full",i),children:[a.jsx(d,{value:s,onChange:c=>l(c.target.value),onFocus:()=>r(!0),onBlur:()=>r(!1),placeholder:o,className:"h-12 rounded-[var(--radius-panel)] border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.88),rgba(var(--ch-bg-base),0.94))] px-4 pr-16 font-[var(--font-mono)] text-[13px] tracking-[0.03em] text-[var(--color-text-primary)] transition-all duration-[var(--duration-base)] ease-[var(--ease-out)] placeholder:text-[var(--color-text-disabled)] focus-visible:border-[var(--border-bright)] focus-visible:ring-0",style:{boxShadow:e?"0 0 0 3px var(--color-accent-soft), 0 0 28px rgba(var(--ch-accent), 0.08)":"inset 0 1px 0 rgba(var(--ch-text-primary), 0.03)"}}),a.jsx("span",{className:t("badge pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] transition-opacity duration-[var(--duration-base)] ease-[var(--ease-out)]",e&&"opacity-0"),children:n})]})}export{x as C,p as P};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as e,r as v,d as k}from"./query-DVWnIZNd.js";import{b as C,f as w}from"./index-DG2eF3M2.js";import{B as S,S as T}from"./statistics-with-status-grid-tcb9SpIY.js";import{S as $,a as M,b as D,c as P,d as g}from"./select-BJEJvQo4.js";import{f as u,b as y,a as d,P as L}from"./format-zoXqpaOb.js";import{h as R,I as V,Z as E,a0 as K,a1 as A,O as B,a2 as W}from"./icons-BOLUIAKd.js";import{D as q}from"./DataTable-p1PD-dJj.js";import{E as j}from"./EmptyState-xDl-M9Rz.js";import{p as b}from"./provider-colors-CTiHNYHs.js";import{c as x}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";function I({segments:t,totalLabel:n,totalValue:l}){const a=2*Math.PI*66,i=Math.max(t.reduce((r,o)=>r+o.value,0),1);let c=0;return e.jsxs("div",{className:"grid gap-6 lg:grid-cols-[280px_minmax(0,1fr)] lg:items-center",children:[e.jsxs("div",{className:"relative mx-auto h-[220px] w-[220px]",children:[e.jsxs("svg",{viewBox:"0 0 180 180",className:"h-full w-full -rotate-90",role:"img","aria-label":"Provider budget distribution",children:[e.jsx("circle",{cx:"90",cy:"90",r:66,fill:"none",stroke:"rgba(var(--ch-text-primary),0.12)",strokeWidth:"18"}),t.map(r=>{const o=r.value/i*a,m=-c;return c+=o,e.jsx("circle",{cx:"90",cy:"90",r:66,fill:"none",stroke:r.color,strokeWidth:"18",strokeLinecap:"round",strokeDasharray:`${o} ${a-o}`,strokeDashoffset:m,style:{filter:`drop-shadow(0 0 10px ${r.color}40)`}},r.label)})]}),e.jsxs("div",{className:"absolute inset-0 flex flex-col items-center justify-center rounded-full",children:[e.jsx("div",{className:"hud-label",children:n}),e.jsx("div",{className:"mt-2 text-2xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:l}),e.jsxs("div",{className:"mt-1 text-xs text-[var(--color-text-tertiary)]",children:[t.length," providers active"]})]})]}),e.jsx("div",{className:"space-y-3",children:t.map(r=>{const o=r.value/i*100;return e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.72),rgba(var(--ch-bg-base),0.9))] p-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"h-3 w-3 rounded-full",style:{backgroundColor:r.color,boxShadow:`0 0 12px ${r.color}50`}}),e.jsx("span",{className:"flex-1 text-sm font-medium capitalize text-[var(--color-text-primary)]",children:r.label}),e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-tertiary)]",children:[o.toFixed(0),"%"]})]}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.84)]",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${Math.max(o,6)}%`,background:`linear-gradient(90deg, ${r.color}, rgba(var(--ch-text-primary),0.72))`}})}),r.detail?e.jsx("div",{className:"mt-2 text-xs text-[var(--color-text-tertiary)]",children:r.detail}):null]},r.label)})})]})}const N={cost:{label:"Cost ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent-2), 0.95),rgba(var(--ch-accent), 0.92))]",value:t=>t.totalCost,formatter:t=>d(t)},latency:{label:"Latency ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-text-primary), 0.9),rgba(var(--ch-accent), 0.78))]",value:t=>t.avgDuration,formatter:t=>y(t)},tokens:{label:"Token ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent), 0.96),rgba(var(--ch-accent-2), 0.86))]",value:t=>t.totalTokens,formatter:t=>u(t)}};function _({rows:t}){const[n,l]=v.useState("cost"),h=v.useMemo(()=>{const a=N[n].value;return[...t].sort((i,c)=>a(c)-a(i)).map((i,c,r)=>{const o=Math.max(a(r[0]??i),1),m=a(i);return{...i,rank:c+1,metricValue:m,progress:Math.max(m/o*100,6)}})},[n,t]);return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3",children:[e.jsxs(S,{variant:"info",className:"border-[var(--color-accent)]/18 bg-[var(--color-accent)]/12 text-[var(--color-accent)]",children:[e.jsx(R,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"ranking live"})]}),e.jsxs($,{value:n,onValueChange:a=>l(a),children:[e.jsx(M,{className:"h-8 w-[170px] text-xs",children:e.jsx(D,{placeholder:"Select metric"})}),e.jsxs(P,{align:"end",children:[e.jsx(g,{value:"cost",children:"Cost ranking"}),e.jsx(g,{value:"latency",children:"Latency ranking"}),e.jsx(g,{value:"tokens",children:"Token ranking"})]})]})]}),e.jsx("div",{className:"space-y-3",children:h.map(a=>e.jsxs("div",{className:"rounded-[22px] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.78),rgba(var(--ch-bg-base),0.94))] p-4",children:[e.jsxs("div",{className:"flex items-start justify-between gap-4",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:["#",a.rank]}),e.jsx("div",{className:"truncate text-sm font-semibold text-[var(--color-text-primary)]",children:a.label})]}),e.jsxs("div",{className:"mt-1 flex flex-wrap items-center gap-2 text-xs text-[var(--color-text-secondary)]",children:[e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 uppercase tracking-[0.16em] text-[10px] text-[var(--color-text-secondary)]",children:a.provider}),e.jsxs("span",{children:[a.spanCount," calls"]}),e.jsxs("span",{children:[u(a.totalTokens)," tokens"]})]})]}),e.jsxs("div",{className:"text-right",children:[e.jsx("div",{className:"font-mono text-sm text-[var(--color-text-primary)]",children:N[n].formatter(a.metricValue)}),e.jsx("div",{className:"mt-1 text-[11px] text-[var(--color-text-tertiary)]",children:n==="cost"?y(a.avgDuration):d(a.totalCost)})]})]}),e.jsx("div",{className:"mt-3 h-2.5 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.82)]",children:e.jsx("div",{className:`h-full rounded-full ${N[n].barClassName}`,style:{width:`${a.progress}%`}})})]},`${a.provider}-${a.label}`))})]})}const p="dashboard-shell rounded-[var(--radius-card)]",F={item:{hidden:{opacity:0,y:20,scale:.97},show:{opacity:1,y:0,scale:1,transition:{duration:.4,ease:[.22,1,.36,1]}}}};function ae(){const[t,n]=v.useState([{id:"totalCost",desc:!0}]),{data:l,isLoading:h}=k({queryKey:["stats"],queryFn:()=>w(24)}),a=l?.byModel??[],i=l?.byProvider??[],c=a.slice(0,8).map(s=>({label:s.model,provider:s.provider,totalCost:s.totalCost,totalTokens:s.totalTokens,avgDuration:s.avgDuration??0,spanCount:s.spanCount})),r=i.map(s=>({label:s.provider,value:s.totalCost,color:b[s.provider]??"var(--color-accent)",detail:`${s.spanCount} calls · ${u(s.totalTokens)} tokens`})),o=[{title:"Total Cost",value:d(l?.totalCost??0),status:(l?.totalCost??0)>0?"observe":"unknown",range:"Accumulated over the last 24 hours",icon:e.jsx(V,{className:"h-4 w-4"})},{title:"Token Volume",value:u(l?.totalTokens??0),status:(l?.totalTokens??0)>0?"within":"unknown",range:`${l?.totalSpans??0} model calls observed`,icon:e.jsx(E,{className:"h-4 w-4"})},{title:"Models in Rotation",value:String(a.length),status:a.length>0?"within":"unknown",range:`${i.length} providers contributing to spend`,icon:e.jsx(K,{className:"h-4 w-4"})}],m=v.useMemo(()=>[{accessorKey:"model",header:"Model",cell:({row:s})=>e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:s.original.model}),e.jsxs("div",{className:"mt-1 text-xs text-[var(--color-text-secondary)]",children:[s.original.spanCount," calls in the current window"]})]})},{accessorKey:"provider",header:"Provider",cell:({row:s})=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"h-2.5 w-2.5 rounded-full",style:{backgroundColor:b[s.original.provider]??"var(--color-accent)",boxShadow:`0 0 10px ${b[s.original.provider]??"var(--color-accent)"}`}}),e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-secondary)]",children:s.original.provider})]})},{accessorKey:"spanCount",header:"Calls",cell:({row:s})=>e.jsx("span",{className:"inline-flex items-center justify-center rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-0.5 font-mono text-xs text-[var(--color-text-secondary)]",children:s.original.spanCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalTokens",header:"Tokens",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:s.original.totalTokens.toLocaleString()}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalCost",header:"Cost",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:d(s.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"avgDuration",header:"Avg Duration",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:s.original.avgDuration?y(s.original.avgDuration):"-"}),meta:{className:"text-right",cellClassName:"text-right"}}],[a]);return h?e.jsxs("div",{className:"mx-auto max-w-[1760px] space-y-8",children:[e.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),e.jsx("div",{className:"grid grid-cols-1 gap-5 md:grid-cols-3",children:[...Array(3)].map((s,f)=>e.jsxs("div",{className:"metric-card",children:[e.jsx("div",{className:"skeleton-panel h-12 w-12 rounded-2xl"}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("div",{className:"skeleton-panel h-3 w-20 rounded-full"}),e.jsx("div",{className:"skeleton-panel h-8 w-28 rounded-full"})]})]},f))})]}):e.jsxs(L,{eyebrow:"Economic Layer",title:"Understand where every token is converting into spend.",description:"This surface should answer two questions immediately: which models are burning budget, and which providers are quietly dominating the bill.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(C,{}),e.jsxs("div",{className:"mt-5 space-y-4",children:[e.jsxs("div",{className:"deck-card deck-card--accent",children:[e.jsx("div",{className:"hud-label",children:"Highest model spend"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:a[0]?.model??"Awaiting traffic"}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:a[0]?`${d(a[0].totalCost)} across ${a[0].spanCount} calls`:"No model cost data yet"})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Provider spread"}),e.jsxs("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:[i.length," active providers"]}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:"Cost dominance becomes obvious here before it becomes expensive."})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsx("strong",{children:"24h"})]}),e.jsxs("span",{className:"pill-item",children:["models ",e.jsx("strong",{children:a.length})]}),e.jsxs("span",{className:"pill-item",children:["providers ",e.jsx("strong",{children:i.length})]}),e.jsxs("span",{className:"pill-item",children:["spend ",e.jsx("strong",{children:d(l?.totalCost??0)})]})]}),e.jsx(x.div,{variants:F.item,initial:"hidden",animate:"show",children:e.jsx(T,{cards:o,className:"max-w-none px-0 sm:px-0 lg:px-0 md:grid-cols-3 xl:grid-cols-3"})}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)]",children:[e.jsxs(x.div,{className:`${p} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.15,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Model ranking"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Cost by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(A,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsx("span",{children:"Spend concentration"})]})]}),c.length>0?e.jsx(_,{rows:c}):e.jsx(j,{title:"No cost data yet",description:"Model spend will stack up here as soon as traffic hits the collector.",className:"h-[320px]"})]}),e.jsxs(x.div,{className:`${p} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.2,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Provider mix"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Who is taking the budget"})]}),e.jsx(B,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),r.length>0?e.jsx(I,{segments:r,totalLabel:"24h spend",totalValue:d(l?.totalCost??0)}):e.jsx(j,{title:"No providers yet",description:"Provider allocation appears here as soon as at least one model call is captured.",className:"h-[260px]"})]})]}),a.length>0?e.jsxs(x.div,{className:`${p} overflow-hidden p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.25,duration:.35},children:[e.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Detailed ledger"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Breakdown by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(W,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[a.length," models"]})]})]}),e.jsx(q,{columns:m,data:a,sorting:t,onSortingChange:n})]}):e.jsx(x.div,{className:`${p} p-16`,initial:{opacity:0},animate:{opacity:1},children:e.jsx(j,{title:"No cost data yet",description:"Start making traced model calls and the economic layer will fill in automatically."})})]})}export{ae as default};
|
|
1
|
+
import{j as e,r as v,d as k}from"./query-DVWnIZNd.js";import{b as C,f as w}from"./index-BCjwgtkq.js";import{B as S,S as T}from"./statistics-with-status-grid-QCEOlWCN.js";import{S as $,a as M,b as D,c as P,d as g}from"./select-Dsu3r0h-.js";import{f as u,b as y,a as d,P as L}from"./format-BdzpxHjW.js";import{h as R,I as V,Z as E,a0 as K,a1 as A,O as B,a2 as W}from"./icons-BOLUIAKd.js";import{D as q}from"./DataTable-NGj_eAG3.js";import{E as j}from"./EmptyState-B8rSQL1S.js";import{p as b}from"./provider-colors-CTiHNYHs.js";import{c as x}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";function I({segments:t,totalLabel:n,totalValue:l}){const a=2*Math.PI*66,i=Math.max(t.reduce((r,o)=>r+o.value,0),1);let c=0;return e.jsxs("div",{className:"grid gap-6 lg:grid-cols-[280px_minmax(0,1fr)] lg:items-center",children:[e.jsxs("div",{className:"relative mx-auto h-[220px] w-[220px]",children:[e.jsxs("svg",{viewBox:"0 0 180 180",className:"h-full w-full -rotate-90",role:"img","aria-label":"Provider budget distribution",children:[e.jsx("circle",{cx:"90",cy:"90",r:66,fill:"none",stroke:"rgba(var(--ch-text-primary),0.12)",strokeWidth:"18"}),t.map(r=>{const o=r.value/i*a,m=-c;return c+=o,e.jsx("circle",{cx:"90",cy:"90",r:66,fill:"none",stroke:r.color,strokeWidth:"18",strokeLinecap:"round",strokeDasharray:`${o} ${a-o}`,strokeDashoffset:m,style:{filter:`drop-shadow(0 0 10px ${r.color}40)`}},r.label)})]}),e.jsxs("div",{className:"absolute inset-0 flex flex-col items-center justify-center rounded-full",children:[e.jsx("div",{className:"hud-label",children:n}),e.jsx("div",{className:"mt-2 text-2xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:l}),e.jsxs("div",{className:"mt-1 text-xs text-[var(--color-text-tertiary)]",children:[t.length," providers active"]})]})]}),e.jsx("div",{className:"space-y-3",children:t.map(r=>{const o=r.value/i*100;return e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.72),rgba(var(--ch-bg-base),0.9))] p-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"h-3 w-3 rounded-full",style:{backgroundColor:r.color,boxShadow:`0 0 12px ${r.color}50`}}),e.jsx("span",{className:"flex-1 text-sm font-medium capitalize text-[var(--color-text-primary)]",children:r.label}),e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-tertiary)]",children:[o.toFixed(0),"%"]})]}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.84)]",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${Math.max(o,6)}%`,background:`linear-gradient(90deg, ${r.color}, rgba(var(--ch-text-primary),0.72))`}})}),r.detail?e.jsx("div",{className:"mt-2 text-xs text-[var(--color-text-tertiary)]",children:r.detail}):null]},r.label)})})]})}const N={cost:{label:"Cost ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent-2), 0.95),rgba(var(--ch-accent), 0.92))]",value:t=>t.totalCost,formatter:t=>d(t)},latency:{label:"Latency ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-text-primary), 0.9),rgba(var(--ch-accent), 0.78))]",value:t=>t.avgDuration,formatter:t=>y(t)},tokens:{label:"Token ranking",barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent), 0.96),rgba(var(--ch-accent-2), 0.86))]",value:t=>t.totalTokens,formatter:t=>u(t)}};function _({rows:t}){const[n,l]=v.useState("cost"),h=v.useMemo(()=>{const a=N[n].value;return[...t].sort((i,c)=>a(c)-a(i)).map((i,c,r)=>{const o=Math.max(a(r[0]??i),1),m=a(i);return{...i,rank:c+1,metricValue:m,progress:Math.max(m/o*100,6)}})},[n,t]);return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3",children:[e.jsxs(S,{variant:"info",className:"border-[var(--color-accent)]/18 bg-[var(--color-accent)]/12 text-[var(--color-accent)]",children:[e.jsx(R,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"ranking live"})]}),e.jsxs($,{value:n,onValueChange:a=>l(a),children:[e.jsx(M,{className:"h-8 w-[170px] text-xs",children:e.jsx(D,{placeholder:"Select metric"})}),e.jsxs(P,{align:"end",children:[e.jsx(g,{value:"cost",children:"Cost ranking"}),e.jsx(g,{value:"latency",children:"Latency ranking"}),e.jsx(g,{value:"tokens",children:"Token ranking"})]})]})]}),e.jsx("div",{className:"space-y-3",children:h.map(a=>e.jsxs("div",{className:"rounded-[22px] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.78),rgba(var(--ch-bg-base),0.94))] p-4",children:[e.jsxs("div",{className:"flex items-start justify-between gap-4",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:["#",a.rank]}),e.jsx("div",{className:"truncate text-sm font-semibold text-[var(--color-text-primary)]",children:a.label})]}),e.jsxs("div",{className:"mt-1 flex flex-wrap items-center gap-2 text-xs text-[var(--color-text-secondary)]",children:[e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 uppercase tracking-[0.16em] text-[10px] text-[var(--color-text-secondary)]",children:a.provider}),e.jsxs("span",{children:[a.spanCount," calls"]}),e.jsxs("span",{children:[u(a.totalTokens)," tokens"]})]})]}),e.jsxs("div",{className:"text-right",children:[e.jsx("div",{className:"font-mono text-sm text-[var(--color-text-primary)]",children:N[n].formatter(a.metricValue)}),e.jsx("div",{className:"mt-1 text-[11px] text-[var(--color-text-tertiary)]",children:n==="cost"?y(a.avgDuration):d(a.totalCost)})]})]}),e.jsx("div",{className:"mt-3 h-2.5 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.82)]",children:e.jsx("div",{className:`h-full rounded-full ${N[n].barClassName}`,style:{width:`${a.progress}%`}})})]},`${a.provider}-${a.label}`))})]})}const p="dashboard-shell rounded-[var(--radius-card)]",F={item:{hidden:{opacity:0,y:20,scale:.97},show:{opacity:1,y:0,scale:1,transition:{duration:.4,ease:[.22,1,.36,1]}}}};function ae(){const[t,n]=v.useState([{id:"totalCost",desc:!0}]),{data:l,isLoading:h}=k({queryKey:["stats"],queryFn:()=>w(24)}),a=l?.byModel??[],i=l?.byProvider??[],c=a.slice(0,8).map(s=>({label:s.model,provider:s.provider,totalCost:s.totalCost,totalTokens:s.totalTokens,avgDuration:s.avgDuration??0,spanCount:s.spanCount})),r=i.map(s=>({label:s.provider,value:s.totalCost,color:b[s.provider]??"var(--color-accent)",detail:`${s.spanCount} calls · ${u(s.totalTokens)} tokens`})),o=[{title:"Total Cost",value:d(l?.totalCost??0),status:(l?.totalCost??0)>0?"observe":"unknown",range:"Accumulated over the last 24 hours",icon:e.jsx(V,{className:"h-4 w-4"})},{title:"Token Volume",value:u(l?.totalTokens??0),status:(l?.totalTokens??0)>0?"within":"unknown",range:`${l?.totalSpans??0} model calls observed`,icon:e.jsx(E,{className:"h-4 w-4"})},{title:"Models in Rotation",value:String(a.length),status:a.length>0?"within":"unknown",range:`${i.length} providers contributing to spend`,icon:e.jsx(K,{className:"h-4 w-4"})}],m=v.useMemo(()=>[{accessorKey:"model",header:"Model",cell:({row:s})=>e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:s.original.model}),e.jsxs("div",{className:"mt-1 text-xs text-[var(--color-text-secondary)]",children:[s.original.spanCount," calls in the current window"]})]})},{accessorKey:"provider",header:"Provider",cell:({row:s})=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"h-2.5 w-2.5 rounded-full",style:{backgroundColor:b[s.original.provider]??"var(--color-accent)",boxShadow:`0 0 10px ${b[s.original.provider]??"var(--color-accent)"}`}}),e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-secondary)]",children:s.original.provider})]})},{accessorKey:"spanCount",header:"Calls",cell:({row:s})=>e.jsx("span",{className:"inline-flex items-center justify-center rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-0.5 font-mono text-xs text-[var(--color-text-secondary)]",children:s.original.spanCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalTokens",header:"Tokens",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:s.original.totalTokens.toLocaleString()}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalCost",header:"Cost",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:d(s.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"avgDuration",header:"Avg Duration",cell:({row:s})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:s.original.avgDuration?y(s.original.avgDuration):"-"}),meta:{className:"text-right",cellClassName:"text-right"}}],[a]);return h?e.jsxs("div",{className:"mx-auto max-w-[1760px] space-y-8",children:[e.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),e.jsx("div",{className:"grid grid-cols-1 gap-5 md:grid-cols-3",children:[...Array(3)].map((s,f)=>e.jsxs("div",{className:"metric-card",children:[e.jsx("div",{className:"skeleton-panel h-12 w-12 rounded-2xl"}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("div",{className:"skeleton-panel h-3 w-20 rounded-full"}),e.jsx("div",{className:"skeleton-panel h-8 w-28 rounded-full"})]})]},f))})]}):e.jsxs(L,{eyebrow:"Economic Layer",title:"Understand where every token is converting into spend.",description:"This surface should answer two questions immediately: which models are burning budget, and which providers are quietly dominating the bill.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(C,{}),e.jsxs("div",{className:"mt-5 space-y-4",children:[e.jsxs("div",{className:"deck-card deck-card--accent",children:[e.jsx("div",{className:"hud-label",children:"Highest model spend"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:a[0]?.model??"Awaiting traffic"}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:a[0]?`${d(a[0].totalCost)} across ${a[0].spanCount} calls`:"No model cost data yet"})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Provider spread"}),e.jsxs("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:[i.length," active providers"]}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:"Cost dominance becomes obvious here before it becomes expensive."})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsx("strong",{children:"24h"})]}),e.jsxs("span",{className:"pill-item",children:["models ",e.jsx("strong",{children:a.length})]}),e.jsxs("span",{className:"pill-item",children:["providers ",e.jsx("strong",{children:i.length})]}),e.jsxs("span",{className:"pill-item",children:["spend ",e.jsx("strong",{children:d(l?.totalCost??0)})]})]}),e.jsx(x.div,{variants:F.item,initial:"hidden",animate:"show",children:e.jsx(T,{cards:o,className:"max-w-none px-0 sm:px-0 lg:px-0 md:grid-cols-3 xl:grid-cols-3"})}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)]",children:[e.jsxs(x.div,{className:`${p} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.15,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Model ranking"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Cost by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(A,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsx("span",{children:"Spend concentration"})]})]}),c.length>0?e.jsx(_,{rows:c}):e.jsx(j,{title:"No cost data yet",description:"Model spend will stack up here as soon as traffic hits the collector.",className:"h-[320px]"})]}),e.jsxs(x.div,{className:`${p} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.2,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Provider mix"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Who is taking the budget"})]}),e.jsx(B,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),r.length>0?e.jsx(I,{segments:r,totalLabel:"24h spend",totalValue:d(l?.totalCost??0)}):e.jsx(j,{title:"No providers yet",description:"Provider allocation appears here as soon as at least one model call is captured.",className:"h-[260px]"})]})]}),a.length>0?e.jsxs(x.div,{className:`${p} overflow-hidden p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.25,duration:.35},children:[e.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Detailed ledger"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Breakdown by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(W,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[a.length," models"]})]})]}),e.jsx(q,{columns:m,data:a,sorting:t,onSortingChange:n})]}):e.jsx(x.div,{className:`${p} p-16`,initial:{opacity:0},animate:{opacity:1},children:e.jsx(j,{title:"No cost data yet",description:"Start making traced model calls and the economic layer will fill in automatically."})})]})}export{ae as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as $,j as e,d as K}from"./query-DVWnIZNd.js";import{c as ve,L as be,u as ye,a as Ne,B as ce,b as we,f as ke,d as Se,e as Ce}from"./index-DG2eF3M2.js";import{G as _e}from"./GettingStartedPanel-Cn46fQ1w.js";import{f as Y,a as M,P as $e,b as Te,c as de}from"./format-zoXqpaOb.js";import{B as Pe,S as Le}from"./statistics-with-status-grid-tcb9SpIY.js";import{h as E,i as Ae,j as Me,k as Ie,d as De,l as me,G as He,X as Ve,m as qe,n as Fe,T as xe,o as Oe,g as Ge,O as Re}from"./icons-BOLUIAKd.js";import{A as We,a as J,b as ee,c as re}from"./accordion-CC_sxDZ8.js";import{S as G,a as R,b as W,c as B,d as P}from"./select-BJEJvQo4.js";import{P as he,C as Be}from"./CommandBar-CBRbPbgc.js";import{E as z}from"./EmptyState-xDl-M9Rz.js";import{P as ze}from"./ProviderBadge-Cs31007s.js";import{c as ge}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";const V=720,ae=320,h={top:24,right:16,bottom:42,left:16};function Ee(a){if(typeof a=="number")return new Date(a).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"});const t=Number(a);return!Number.isNaN(t)&&String(a).length>=10?new Date(t).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):String(a)}function ue(a){if(typeof a=="number")return a;if(!a)return 0;const t=Number(a);return Number.isFinite(t)?t:0}function se(a){if(a.length===0)return"";if(a.length===1)return`M ${a[0].x} ${a[0].y}`;let t=`M ${a[0].x} ${a[0].y}`;for(let m=0;m<a.length-1;m+=1){const i=a[m],c=a[m+1];if(!(i&&c))continue;const g=(i.x+c.x)/2;t+=` C ${g} ${i.y}, ${g} ${c.y}, ${c.x} ${c.y}`}return t}function Xe(a,t){if(a.length===0)return"";const m=se(a),i=a[a.length-1],c=a[0];return i&&c?`${m} L ${i.x} ${t} L ${c.x} ${t} Z`:""}function Ue({data:a,xDataKey:t,primaryDataKey:m,secondaryDataKey:i}){const c=$.useId().replace(/:/g,""),[g,N]=$.useState(Math.max(0,a.length-1)),s=$.useMemo(()=>{const l=V-h.left-h.right,x=ae-h.top-h.bottom,u=h.top+x,b=Math.max(a.length-1,1),p=a.map(n=>ue(n[m])),o=i?a.map(n=>ue(n[i])):[],I=Math.max(...p,...o.length>0?o:[0],1),f=a.map((n,j)=>{const O=h.left+l*j/b,H=p[j]??0,k=o.length>0?o[j]??0:void 0,S=C=>u-C/I*x;return{index:j,x:O,yPrimary:S(H),ySecondary:k===void 0?void 0:S(k),label:Ee(n[t]),primaryValue:H,secondaryValue:k}}),X=se(f.map(n=>({x:n.x,y:n.yPrimary}))),F=Xe(f.map(n=>({x:n.x,y:n.yPrimary})),u),D=i&&f.some(n=>n.ySecondary!==void 0)?se(f.map(n=>({x:n.x,y:n.ySecondary??u}))):"",w=Math.max(1,Math.floor(f.length/5)),U=f.filter((n,j)=>j===0||j===f.length-1||j%w===0);return{chartInnerWidth:l,chartInnerHeight:x,baselineY:u,maxValue:I,points:f,primaryPath:X,primaryArea:F,secondaryPath:D,ticks:U,gridLines:[.25,.5,.75].map(n=>h.top+x*n)}},[a,m,i,t]),d=s.points[Math.min(g,s.points.length-1)];return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[e.jsxs(Pe,{variant:"info",className:"border-[var(--color-accent)]/18 bg-[var(--color-accent)]/12 text-[var(--color-accent)]",children:[e.jsx(E,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"live trend"})]}),d?e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx("div",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]",children:d.label}),e.jsx("div",{className:"rounded-full border border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/12 px-3 py-1.5 font-mono text-xs text-[var(--color-text-primary)]",children:d.primaryValue.toLocaleString(void 0,{maximumFractionDigits:4})}),i&&d.secondaryValue!==void 0&&e.jsx("div",{className:"rounded-full border border-[var(--color-accent)]/18 bg-[var(--color-accent)]/10 px-3 py-1.5 font-mono text-xs text-[var(--color-text-primary)]",children:d.secondaryValue.toLocaleString(void 0,{maximumFractionDigits:4})})]}):null]}),e.jsxs("div",{className:"relative overflow-hidden rounded-[24px] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-surface),0.74),rgba(var(--ch-bg-base),0.96))] p-3",children:[e.jsx("div",{className:"pointer-events-none absolute inset-x-0 top-0 h-24 bg-[radial-gradient(circle_at_top,rgba(var(--ch-accent), 0.16),transparent_60%)]"}),e.jsxs("svg",{"aria-hidden":"true",className:"h-[320px] w-full",viewBox:`0 0 ${V} ${ae}`,children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:`line-fill-${c}`,x1:"0",x2:"0",y1:"0",y2:"1",children:[e.jsx("stop",{offset:"0%",stopColor:"var(--color-accent-2)",stopOpacity:"0.38"}),e.jsx("stop",{offset:"100%",stopColor:"var(--color-accent-2)",stopOpacity:"0"})]}),e.jsxs("linearGradient",{id:`line-stroke-${c}`,x1:"0",x2:"1",y1:"0",y2:"0",children:[e.jsx("stop",{offset:"0%",stopColor:"var(--color-accent-2)"}),e.jsx("stop",{offset:"100%",stopColor:"var(--color-accent)"})]}),e.jsxs("filter",{id:`line-glow-${c}`,x:"-30%",y:"-30%",width:"160%",height:"160%",children:[e.jsx("feGaussianBlur",{stdDeviation:"9",result:"blur"}),e.jsxs("feMerge",{children:[e.jsx("feMergeNode",{in:"blur"}),e.jsx("feMergeNode",{in:"SourceGraphic"})]})]})]}),s.gridLines.map(l=>e.jsx("line",{x1:h.left,x2:V-h.right,y1:l,y2:l,stroke:"rgba(var(--ch-text-primary),0.16)",strokeDasharray:"4 8"},l)),e.jsx("line",{x1:h.left,x2:V-h.right,y1:s.baselineY,y2:s.baselineY,stroke:"rgba(var(--ch-text-primary),0.2)"}),s.primaryArea?e.jsx("path",{d:s.primaryArea,fill:`url(#line-fill-${c})`,opacity:"0.95"}):null,s.secondaryPath?e.jsx("path",{d:s.secondaryPath,fill:"none",stroke:"var(--color-text-primary)",strokeLinecap:"round",strokeLinejoin:"round",strokeOpacity:"0.55",strokeWidth:"2"}):null,s.primaryPath?e.jsxs(e.Fragment,{children:[e.jsx("path",{d:s.primaryPath,fill:"none",filter:`url(#line-glow-${c})`,stroke:"url(#line-stroke-${chartId})",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2.75"}),e.jsx("path",{d:s.primaryPath,fill:"none",stroke:"rgba(var(--ch-text-primary),0.16)",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1"})]}):null,d?e.jsxs(e.Fragment,{children:[e.jsx("line",{x1:d.x,x2:d.x,y1:h.top,y2:s.baselineY,stroke:"rgba(var(--ch-accent), 0.24)",strokeDasharray:"4 6"}),e.jsx("circle",{cx:d.x,cy:d.yPrimary,fill:"var(--color-text-primary)",r:"5",stroke:"var(--color-accent)",strokeWidth:"3"})]}):null,s.ticks.map(l=>e.jsx("text",{x:l.x,y:ae-12,fill:"rgba(var(--ch-text-primary),0.74)",fontSize:"11",textAnchor:"middle",children:l.label},`${l.index}-${l.label}`)),s.points.map((l,x)=>{const u=s.points[x-1],b=s.points[x+1],p=u?(u.x+l.x)/2:h.left,o=b?(b.x+l.x)/2:V-h.right;return e.jsx("rect",{x:p,y:h.top,width:Math.max(o-p,8),height:s.chartInnerHeight,fill:"transparent",onFocus:()=>N(l.index),onMouseEnter:()=>N(l.index)},l.index)})]}),e.jsxs("div",{className:"mt-3 grid gap-3 sm:grid-cols-3",children:[e.jsx(te,{label:"Peak",value:s.maxValue.toLocaleString(void 0,{maximumFractionDigits:4})}),e.jsx(te,{label:"Samples",value:s.points.length.toLocaleString()}),e.jsx(te,{label:"Current",value:(d?.primaryValue??0).toLocaleString(void 0,{maximumFractionDigits:4})})]})]})]})}function te({label:a,value:t}){return e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:[e.jsx("div",{className:"hud-label",children:a}),e.jsx("div",{className:"mt-2 font-mono text-sm text-[var(--color-text-primary)]",children:t})]})}function Qe(a){return a<.01?{color:"var(--color-accent)",background:"var(--color-accent-soft)",border:"var(--border-default)",shadow:"0 0 18px rgba(var(--ch-accent), 0.14)"}:a<.1?{color:"var(--color-text-primary)",background:"rgba(var(--ch-text-primary), 0.05)",border:"var(--border-dim)",shadow:"none"}:a<=1?{color:"var(--color-warning)",background:"rgba(var(--ch-warning), 0.08)",border:"rgba(var(--ch-warning), 0.24)",shadow:"0 0 18px rgba(var(--ch-warning), 0.14)"}:{color:"var(--color-error)",background:"rgba(var(--ch-error), 0.08)",border:"rgba(var(--ch-error), 0.24)",shadow:"0 0 18px rgba(var(--ch-error), 0.16)"}}function fe({value:a,size:t="md",className:m}){const i=Qe(a);return e.jsxs("span",{className:ve("badge justify-center",t==="sm"?"px-2.5 py-[2px] text-[10px]":"px-3 py-[3px] text-[11px]",m),style:{color:i.color,background:i.background,borderColor:i.border,boxShadow:i.shadow},children:["$",a.toFixed(4)]})}function Ze(a){return a<1e3?`${Math.round(a)}ms`:`${(a/1e3).toFixed(1)}s`}function Ke(a){return a>=1e3?`${(a/1e3).toFixed(1)}k`:`${a}`}function Ye(a){return a==="active"?{dot:e.jsx("span",{"aria-hidden":"true",className:"live-dot",style:{display:"inline-block"}}),label:"active"}:a==="warning"?{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-warning)",boxShadow:"0 0 6px rgba(var(--ch-warning), 0.55)"}}),label:"warning"}:a==="error"?{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-error)",boxShadow:"0 0 6px rgba(var(--ch-error), 0.48)"}}),label:"error"}:{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-accent-2)",boxShadow:"0 0 6px rgba(var(--ch-accent-2), 0.38)"}}),label:"complete"}}function Je({trace:a,selected:t=!1,onSelect:m,onClick:i,href:c,index:g=0,className:N}){const s=Ye(a.status),d="grid w-full grid-cols-[auto_auto_minmax(0,1.5fr)_minmax(0,0.8fr)_minmax(72px,0.5fr)_minmax(80px,0.7fr)_minmax(94px,0.6fr)_minmax(86px,0.6fr)_minmax(96px,0.7fr)] items-center gap-3 px-4 py-3 text-left hover:bg-[rgba(var(--ch-text-primary),0.02)]",l=e.jsxs(e.Fragment,{children:[m?e.jsx("span",{onClick:x=>{x.stopPropagation(),m(a.id)},className:"inline-flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-dim)] bg-transparent text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-accent)]",children:t?e.jsx(Ae,{className:"h-4 w-4"}):e.jsx(Me,{className:"h-4 w-4"})}):e.jsx("span",{className:"w-0"}),e.jsxs("div",{className:"flex items-center gap-2",children:[s.dot,e.jsx("span",{className:"mono-label text-[var(--color-text-secondary)]",children:s.label})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate text-[14px] font-medium text-[var(--color-text-primary)]",children:a.name}),e.jsx("div",{className:"mono-label mt-1 truncate",children:a.when})]}),e.jsx("div",{className:"mono-value truncate text-[var(--color-text-secondary)]",children:a.id.slice(0,10)}),e.jsx("div",{className:"mono-value justify-self-end",children:a.spans}),e.jsx("div",{className:"mono-value justify-self-end",children:Ke(a.tokens)}),e.jsx("div",{className:"justify-self-end",children:e.jsx(fe,{value:a.cost,size:"sm"})}),e.jsx("div",{className:"mono-value justify-self-end text-[var(--color-text-secondary)]",children:Ze(a.duration)}),e.jsx("div",{className:"mono-label justify-self-end text-[var(--color-text-secondary)]",children:a.when})]});return e.jsxs(ge.div,{initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:{duration:.28,delay:g*.04,ease:[.16,1,.3,1]},className:ve("relative overflow-hidden rounded-[var(--radius-panel)] border transition-[background-color,border-color,transform] duration-[var(--duration-base)] ease-[var(--ease-out)] hover:-translate-y-[1px]",N),style:{borderColor:t?"var(--border-default)":"var(--border-dim)",background:t?"var(--color-accent-dim)":"linear-gradient(180deg, rgba(var(--ch-text-primary), 0.02), rgba(var(--ch-text-primary), 0.01))"},children:[t?e.jsx("div",{"aria-hidden":"true",className:"absolute inset-y-2 left-0 w-[2px] rounded-full",style:{background:"var(--color-accent)"}}):null,c&&!m?e.jsx(be,{to:c,onClick:()=>i?.(a.id),className:d,children:l}):e.jsx("button",{type:"button",onClick:()=>i?.(a.id),className:d,children:l})]})}const q="dashboard-shell rounded-[var(--radius-card)]",pe=[12,25,50,100];function hr(){const a=ye(),[t,m]=Ne(),i=t.get("q")??"",c=$.useDeferredValue(i),g=t.get("provider")??"",N=t.get("status"),s=N==="ok"||N==="error"?N:"",d=Number(t.get("periodHours")??"24"),l=Number(t.get("pageSize")??"12"),x=pe.includes(l)?l:12,u=Math.max(1,Number(t.get("page")??"1")||1),b=(u-1)*x,p=$.useMemo(()=>({limit:x,offset:b,q:c.trim()||void 0,provider:g||void 0,status:s||void 0,periodHours:he.some(r=>r.value===d)?d:24}),[c,x,b,d,g,s]),{data:o}=K({queryKey:["stats",p.periodHours],queryFn:()=>ke(p.periodHours??24)}),{data:I,isLoading:f}=K({queryKey:["traces",p],queryFn:()=>Se(p)}),{data:X}=K({queryKey:["insights"],queryFn:Ce,refetchInterval:6e4}),F=X?.insights??[],D=I?.traces??[],w=I?.total??0,U=Math.max(1,Math.ceil(w/x)),[n,j]=$.useState(null),[O,H]=$.useState("desc");function k(r){n===r?H(y=>y==="asc"?"desc":"asc"):(j(r),H("desc"))}const S=$.useMemo(()=>n?[...D].sort((r,y)=>{const A=r[n]??0,T=y[n]??0;return O==="asc"?A-T:T-A}):D,[D,n,O]),C=o?.byProvider[0],L=S[0],oe=[...new Set(o?.byProvider.map(r=>r.provider)??[])],v=o?.costOverTime.map(r=>({timestamp:r.timestamp,cost:r.cost}))??[],ne=o&&o.totalSpans>0?o.totalCost/o.totalSpans:0,Q=Math.round((o?.errorRate??0)*100),je=[{title:"Trace Volume",value:Y(o?.totalTraces??0),status:(o?.totalTraces??0)>0?"within":"unknown",range:`${o?.totalSpans??0} spans in window`,icon:e.jsx(Ie,{className:"h-4 w-4"})},{title:"Token Throughput",value:Y(o?.totalTokens??0),status:(o?.totalTokens??0)>0?"within":"unknown",range:"Token load across active filter window",icon:e.jsx(De,{className:"h-4 w-4"})},{title:"Spend Velocity",value:M(o?.totalCost??0),status:ne>0?"observe":"unknown",range:`${M(ne)} avg per call`,icon:e.jsx(E,{className:"h-4 w-4"})},{title:"Risk Surface",value:`${Q}%`,status:Q>=8?"exceed":Q>=3?"observe":"within",range:`${o?.errorCount??0} failing calls`,icon:e.jsx(me,{className:"h-4 w-4"})}],ie=i.length>0||g.length>0||s.length>0||p.periodHours!==24;function _(r,y=!0){m(A=>{const T=new URLSearchParams(A);for(const[le,Z]of Object.entries(r))Z===void 0||Z===""?T.delete(le):T.set(le,String(Z));return y&&T.delete("page"),T},{replace:!0})}return e.jsxs($e,{eyebrow:"Flight Deck",title:"Read the behavior of every model call like a live system.",description:"LLMTap should feel like a live operator console, not a half-finished devtool. This view keeps spend movement, provider pressure, queue state, and the latest traces readable in one sweep.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(we,{}),e.jsxs("div",{className:"mt-4 grid gap-3",children:[e.jsxs("div",{className:"deck-card deck-card--accent",children:[e.jsx("div",{className:"hud-label",children:"Dominant provider"}),e.jsxs("div",{className:"mt-2 flex items-center justify-between",children:[e.jsx("div",{className:"capitalize text-[var(--color-text-primary)]",style:{fontFamily:"var(--font-operator)",fontSize:"30px",fontWeight:700,lineHeight:"0.92",letterSpacing:"-0.04em"},children:C?.provider??"Awaiting traffic"}),e.jsx(Re,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:C?`${C.spanCount} calls, ${M(C.totalCost)} spend`:"No provider activity yet"})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Latest trace"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:L?.name??"No recent traces"}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:L?`${de(L.startTime)} / ${L.spanCount} spans`:"Start sending spans to populate the deck"})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsxs("strong",{children:[p.periodHours,"h"]})]}),e.jsxs("span",{className:"pill-item",children:["providers ",e.jsx("strong",{children:oe.length||0})]}),e.jsxs("span",{className:"pill-item",children:["traces ",e.jsx("strong",{children:w})]}),e.jsxs("span",{className:"pill-item",children:["status ",e.jsx("strong",{children:o?.errorCount?"watching":"stable"})]})]}),e.jsx(Le,{cards:je,className:"max-w-none px-0 sm:px-0 lg:px-0"}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.5fr)_minmax(320px,0.95fr)]",children:[e.jsxs("section",{className:`${q} p-5 sm:p-6`,children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Economic pulse"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Cost gradient"})]}),e.jsxs("div",{className:"status-chip",children:[e.jsx(He,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[p.periodHours,"h window"]})]})]}),v.length>0?e.jsxs("div",{className:"surface-strong overflow-hidden rounded-[var(--radius-card)] p-4",children:[e.jsx(Ue,{data:v,xDataKey:"timestamp",primaryDataKey:"cost"}),e.jsxs("div",{className:"mt-4 grid gap-3 sm:grid-cols-3",children:[e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Latest"}),e.jsx("div",{className:"mt-2 text-lg font-semibold text-[var(--color-text-primary)]",children:M(v.at(-1)?.cost??0)})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Peak"}),e.jsx("div",{className:"mt-2 text-lg font-semibold text-[var(--color-text-primary)]",children:M(Math.max(...v.map(r=>r.cost),0))})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Change"}),e.jsxs("div",{className:`mt-2 text-lg font-semibold ${(v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)>=0?"text-[var(--color-accent)]":"text-[var(--color-text-primary)]"}`,children:[(v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)>=0?"+":"-",M(Math.abs((v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)))]})]})]})]}):e.jsx(z,{title:"No cost movement yet",description:"This turns into a live spend curve as soon as the collector receives traced calls.",className:"min-h-[320px]"})]}),e.jsxs("section",{className:`${q} p-5 sm:p-6`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Provider pressure"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Allocation by provider"})]}),e.jsx("div",{className:"space-y-4",children:(o?.byProvider??[]).length>0?(o?.byProvider??[]).map(r=>{const y=(o?.totalCost??0)>0?r.totalCost/(o?.totalCost??1)*100:0;return e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx(ze,{provider:r.provider}),e.jsxs("div",{className:"text-[length:var(--text-caption)] text-[var(--color-text-secondary)]",children:[r.spanCount," calls / ",Y(r.totalTokens)," tokens"]})]}),e.jsxs("div",{className:"text-right",children:[e.jsx(fe,{value:r.totalCost,size:"sm"}),e.jsx("div",{className:"text-[length:var(--text-caption)] text-[var(--color-text-tertiary)]",children:Te(r.avgDuration)})]})]}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.84)]",children:e.jsx(ge.div,{className:"h-full w-full origin-left rounded-full bg-[linear-gradient(90deg,var(--color-accent-2),var(--color-accent))]",initial:{scaleX:0},animate:{scaleX:Math.max(y,4)/100},transition:{duration:.5,ease:"easeOut"}})})]},r.provider)}):e.jsx(z,{title:"No provider activity yet",description:"Allocation bands appear here once the collector receives instrumented traffic.",className:"min-h-[320px]"})})]})]}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.45fr)_minmax(320px,0.85fr)]",children:[e.jsxs("section",{className:`${q} p-4 sm:p-5`,children:[e.jsxs("div",{className:"surface-strong mb-4 rounded-[var(--radius-card)] p-4",children:[e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Search console"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Trace dispatch queue"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"status-chip",children:[w," matches"]}),e.jsxs("button",{type:"button",onClick:()=>_({q:void 0,provider:void 0,status:void 0,periodHours:void 0}),disabled:!ie,className:"status-chip transition-all duration-[--duration-normal] hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(Ve,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]})]}),e.jsxs("div",{className:"mt-4 grid gap-3 xl:grid-cols-[minmax(0,1.7fr)_repeat(3,minmax(0,0.7fr))]",children:[e.jsx(Be,{value:i,onChange:r=>_({q:r||void 0}),placeholder:"Search traces, models, providers, errors"}),e.jsxs(G,{value:g||"__all__",onValueChange:r=>_({provider:r==="__all__"?void 0:r}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{placeholder:"All providers"})}),e.jsxs(B,{children:[e.jsx(P,{value:"__all__",children:"All providers"}),oe.map(r=>e.jsx(P,{value:r,children:r},r))]})]}),e.jsxs(G,{value:s||"__all__",onValueChange:r=>_({status:r==="__all__"?void 0:r}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{placeholder:"All states"})}),e.jsxs(B,{children:[e.jsx(P,{value:"__all__",children:"All states"}),e.jsx(P,{value:"ok",children:"Healthy only"}),e.jsx(P,{value:"error",children:"Errors only"})]})]}),e.jsxs(G,{value:String(p.periodHours??24),onValueChange:r=>_({periodHours:Number(r)===24?void 0:Number(r)}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{})}),e.jsx(B,{children:he.map(r=>e.jsx(P,{value:String(r.value),children:r.label},r.value))})]})]})]}),f?e.jsx(z,{title:"Loading trace queue",description:"The latest calls are being assembled into the dispatch surface.",className:"min-h-[280px]"}):S.length===0&&!ie?e.jsx(_e,{}):S.length===0?e.jsx(z,{title:"No traces match these filters",description:"Try adjusting the search term, provider filter, or time window.",className:"min-h-[280px]"}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs("div",{className:"grid grid-cols-[auto_auto_minmax(0,1.5fr)_minmax(0,0.8fr)_minmax(72px,0.5fr)_minmax(80px,0.7fr)_minmax(94px,0.6fr)_minmax(86px,0.6fr)_minmax(96px,0.7fr)] gap-3 px-4 py-2 text-[11px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:[e.jsx("span",{}),e.jsx("span",{children:"State"}),e.jsx("span",{children:"Trace"}),e.jsx("span",{children:"ID"}),e.jsx("button",{type:"button",onClick:()=>k("spanCount"),className:"justify-self-end",children:"Spans"}),e.jsx("button",{type:"button",onClick:()=>k("totalTokens"),className:"justify-self-end",children:"Tokens"}),e.jsx("button",{type:"button",onClick:()=>k("totalCost"),className:"justify-self-end",children:"Cost"}),e.jsx("span",{className:"justify-self-end",children:"Duration"}),e.jsx("button",{type:"button",onClick:()=>k("startTime"),className:"justify-self-end",children:"When"})]}),S.map((r,y)=>e.jsx(Je,{index:y,trace:{id:r.traceId,name:r.name,status:r.status==="ok"?"complete":"error",spans:r.spanCount,tokens:r.totalTokens,cost:r.totalCost,duration:r.totalDuration??0,when:de(r.startTime)},href:`/trace/${r.traceId}`,onClick:A=>a(`/trace/${A}`)},r.traceId))]}),e.jsxs("div",{className:"mt-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"text-[length:var(--text-caption)] text-[var(--color-text-tertiary)]",children:w>0?`Showing ${b+1}-${Math.min(b+S.length,w)} of ${w}`:"Awaiting traces"}),e.jsxs(G,{value:String(x),onValueChange:r=>_({pageSize:Number(r)===12?void 0:Number(r)}),children:[e.jsx(R,{className:"w-auto rounded-xl px-2 py-1.5 text-[length:var(--text-caption)]",children:e.jsx(W,{})}),e.jsx(B,{children:pe.map(r=>e.jsxs(P,{value:String(r),children:[r," / page"]},r))})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(ce,{variant:"outline",size:"sm",onClick:()=>_({page:u>2?u-1:void 0},!1),disabled:u<=1,children:[e.jsx(qe,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Previous"})]}),e.jsxs(ce,{variant:"outline",size:"sm",onClick:()=>_({page:u+1},!1),disabled:u>=U,children:[e.jsx("span",{children:"Next"}),e.jsx(Fe,{className:"h-3.5 w-3.5"})]})]})]})]})]}),e.jsxs("section",{className:`${q} p-5`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Intelligence layer"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Insights"})]}),e.jsx("div",{className:"space-y-4",children:F.length>0?F.map(r=>e.jsxs("div",{className:`rounded-2xl border p-4 ${r.severity==="critical"?"border-[var(--color-text-primary)]/18 bg-[var(--color-text-primary)]/8":r.severity==="warning"?"border-[var(--color-accent-2)]/18 bg-[var(--color-accent-2)]/8":"border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)]"}`,children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[r.type==="cost_anomaly"&&e.jsx(xe,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),r.type==="error_pattern"&&e.jsx(me,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),r.type==="model_recommendation"&&e.jsx(Oe,{className:"h-4 w-4 text-[var(--color-accent)]"}),r.type==="token_waste"&&e.jsx(E,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),r.title]}),r.metric&&e.jsx("span",{className:"shrink-0 rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 font-mono text-[length:var(--text-hud)] text-[var(--color-text-tertiary)]",children:r.metric})]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:r.description})]},r.id)):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(Ge,{className:"h-4 w-4 text-[var(--color-accent)]"}),"Health read"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:(o?.errorRate??0)>.05?"Error rate is elevated. Start with the most recent failed trace and inspect provider or tool payloads.":"Error pressure is currently low. Use this window to compare provider cost drift and latency patterns."})]}),e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(E,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),"Spend insight"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:C?`${C.provider} currently leads cost share. If that is unexpected, inspect the filtered queue for bursty workflows.`:"Provider concentration will appear here once traces land."})]}),e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(xe,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),"Queue focus"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:L?`Latest traffic is "${L.name}". Open it to inspect hierarchy, timing, and payload shape.`:"No active traces yet. Generate a request through an instrumented client to validate the pipeline."})]})]})})]})]}),e.jsxs("section",{className:`${q} p-5 sm:p-6`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Operator Briefing"}),e.jsx("h2",{className:"page-section-title mt-1",children:"What this surface is telling you"})]}),e.jsxs(We,{defaultValue:["queue-health"],multiple:!0,children:[e.jsxs(J,{value:"queue-health",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What should I check first when I open LLMTap?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Start with the economic pulse, dominant provider, and latest trace. That combination tells you whether traffic is flowing, whether one provider is dominating spend, and which trace should be inspected first."})]}),e.jsxs(J,{value:"traces-vs-economics",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"When do I move from Overview to Traces or Economics?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Use Traces when something looks operationally wrong and you need the exact request timeline. Use Economics when behavior is healthy but budget concentration or model mix looks suspicious."})]}),e.jsxs(J,{value:"healthy-window",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What does a healthy window look like?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Healthy windows show steady cost movement, low risk surface, no sudden provider concentration shifts, and a queue of recent traces that stays readable instead of spiking with failures."})]})]})]})]})}export{hr as default};
|
|
1
|
+
import{r as $,j as e,d as K}from"./query-DVWnIZNd.js";import{c as ve,L as be,u as ye,a as Ne,B as ce,b as we,f as ke,d as Se,e as Ce}from"./index-BCjwgtkq.js";import{G as _e}from"./GettingStartedPanel-Cn46fQ1w.js";import{f as Y,a as M,P as $e,b as Te,c as de}from"./format-BdzpxHjW.js";import{B as Pe,S as Le}from"./statistics-with-status-grid-QCEOlWCN.js";import{h as E,i as Ae,j as Me,k as Ie,d as De,l as me,G as He,X as Ve,m as qe,n as Fe,T as xe,o as Oe,g as Ge,O as Re}from"./icons-BOLUIAKd.js";import{A as We,a as J,b as ee,c as re}from"./accordion-BbWMmUmi.js";import{S as G,a as R,b as W,c as B,d as P}from"./select-Dsu3r0h-.js";import{P as he,C as Be}from"./CommandBar-CTVjcTSb.js";import{E as z}from"./EmptyState-B8rSQL1S.js";import{P as ze}from"./ProviderBadge-Qtp_Hf66.js";import{c as ge}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";const V=720,ae=320,h={top:24,right:16,bottom:42,left:16};function Ee(a){if(typeof a=="number")return new Date(a).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"});const t=Number(a);return!Number.isNaN(t)&&String(a).length>=10?new Date(t).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):String(a)}function ue(a){if(typeof a=="number")return a;if(!a)return 0;const t=Number(a);return Number.isFinite(t)?t:0}function se(a){if(a.length===0)return"";if(a.length===1)return`M ${a[0].x} ${a[0].y}`;let t=`M ${a[0].x} ${a[0].y}`;for(let m=0;m<a.length-1;m+=1){const i=a[m],c=a[m+1];if(!(i&&c))continue;const g=(i.x+c.x)/2;t+=` C ${g} ${i.y}, ${g} ${c.y}, ${c.x} ${c.y}`}return t}function Xe(a,t){if(a.length===0)return"";const m=se(a),i=a[a.length-1],c=a[0];return i&&c?`${m} L ${i.x} ${t} L ${c.x} ${t} Z`:""}function Ue({data:a,xDataKey:t,primaryDataKey:m,secondaryDataKey:i}){const c=$.useId().replace(/:/g,""),[g,N]=$.useState(Math.max(0,a.length-1)),s=$.useMemo(()=>{const l=V-h.left-h.right,x=ae-h.top-h.bottom,u=h.top+x,b=Math.max(a.length-1,1),p=a.map(n=>ue(n[m])),o=i?a.map(n=>ue(n[i])):[],I=Math.max(...p,...o.length>0?o:[0],1),f=a.map((n,j)=>{const O=h.left+l*j/b,H=p[j]??0,k=o.length>0?o[j]??0:void 0,S=C=>u-C/I*x;return{index:j,x:O,yPrimary:S(H),ySecondary:k===void 0?void 0:S(k),label:Ee(n[t]),primaryValue:H,secondaryValue:k}}),X=se(f.map(n=>({x:n.x,y:n.yPrimary}))),F=Xe(f.map(n=>({x:n.x,y:n.yPrimary})),u),D=i&&f.some(n=>n.ySecondary!==void 0)?se(f.map(n=>({x:n.x,y:n.ySecondary??u}))):"",w=Math.max(1,Math.floor(f.length/5)),U=f.filter((n,j)=>j===0||j===f.length-1||j%w===0);return{chartInnerWidth:l,chartInnerHeight:x,baselineY:u,maxValue:I,points:f,primaryPath:X,primaryArea:F,secondaryPath:D,ticks:U,gridLines:[.25,.5,.75].map(n=>h.top+x*n)}},[a,m,i,t]),d=s.points[Math.min(g,s.points.length-1)];return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[e.jsxs(Pe,{variant:"info",className:"border-[var(--color-accent)]/18 bg-[var(--color-accent)]/12 text-[var(--color-accent)]",children:[e.jsx(E,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"live trend"})]}),d?e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx("div",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)]",children:d.label}),e.jsx("div",{className:"rounded-full border border-[var(--color-accent-2)]/20 bg-[var(--color-accent-2)]/12 px-3 py-1.5 font-mono text-xs text-[var(--color-text-primary)]",children:d.primaryValue.toLocaleString(void 0,{maximumFractionDigits:4})}),i&&d.secondaryValue!==void 0&&e.jsx("div",{className:"rounded-full border border-[var(--color-accent)]/18 bg-[var(--color-accent)]/10 px-3 py-1.5 font-mono text-xs text-[var(--color-text-primary)]",children:d.secondaryValue.toLocaleString(void 0,{maximumFractionDigits:4})})]}):null]}),e.jsxs("div",{className:"relative overflow-hidden rounded-[24px] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-surface),0.74),rgba(var(--ch-bg-base),0.96))] p-3",children:[e.jsx("div",{className:"pointer-events-none absolute inset-x-0 top-0 h-24 bg-[radial-gradient(circle_at_top,rgba(var(--ch-accent), 0.16),transparent_60%)]"}),e.jsxs("svg",{"aria-hidden":"true",className:"h-[320px] w-full",viewBox:`0 0 ${V} ${ae}`,children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:`line-fill-${c}`,x1:"0",x2:"0",y1:"0",y2:"1",children:[e.jsx("stop",{offset:"0%",stopColor:"var(--color-accent-2)",stopOpacity:"0.38"}),e.jsx("stop",{offset:"100%",stopColor:"var(--color-accent-2)",stopOpacity:"0"})]}),e.jsxs("linearGradient",{id:`line-stroke-${c}`,x1:"0",x2:"1",y1:"0",y2:"0",children:[e.jsx("stop",{offset:"0%",stopColor:"var(--color-accent-2)"}),e.jsx("stop",{offset:"100%",stopColor:"var(--color-accent)"})]}),e.jsxs("filter",{id:`line-glow-${c}`,x:"-30%",y:"-30%",width:"160%",height:"160%",children:[e.jsx("feGaussianBlur",{stdDeviation:"9",result:"blur"}),e.jsxs("feMerge",{children:[e.jsx("feMergeNode",{in:"blur"}),e.jsx("feMergeNode",{in:"SourceGraphic"})]})]})]}),s.gridLines.map(l=>e.jsx("line",{x1:h.left,x2:V-h.right,y1:l,y2:l,stroke:"rgba(var(--ch-text-primary),0.16)",strokeDasharray:"4 8"},l)),e.jsx("line",{x1:h.left,x2:V-h.right,y1:s.baselineY,y2:s.baselineY,stroke:"rgba(var(--ch-text-primary),0.2)"}),s.primaryArea?e.jsx("path",{d:s.primaryArea,fill:`url(#line-fill-${c})`,opacity:"0.95"}):null,s.secondaryPath?e.jsx("path",{d:s.secondaryPath,fill:"none",stroke:"var(--color-text-primary)",strokeLinecap:"round",strokeLinejoin:"round",strokeOpacity:"0.55",strokeWidth:"2"}):null,s.primaryPath?e.jsxs(e.Fragment,{children:[e.jsx("path",{d:s.primaryPath,fill:"none",filter:`url(#line-glow-${c})`,stroke:"url(#line-stroke-${chartId})",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2.75"}),e.jsx("path",{d:s.primaryPath,fill:"none",stroke:"rgba(var(--ch-text-primary),0.16)",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1"})]}):null,d?e.jsxs(e.Fragment,{children:[e.jsx("line",{x1:d.x,x2:d.x,y1:h.top,y2:s.baselineY,stroke:"rgba(var(--ch-accent), 0.24)",strokeDasharray:"4 6"}),e.jsx("circle",{cx:d.x,cy:d.yPrimary,fill:"var(--color-text-primary)",r:"5",stroke:"var(--color-accent)",strokeWidth:"3"})]}):null,s.ticks.map(l=>e.jsx("text",{x:l.x,y:ae-12,fill:"rgba(var(--ch-text-primary),0.74)",fontSize:"11",textAnchor:"middle",children:l.label},`${l.index}-${l.label}`)),s.points.map((l,x)=>{const u=s.points[x-1],b=s.points[x+1],p=u?(u.x+l.x)/2:h.left,o=b?(b.x+l.x)/2:V-h.right;return e.jsx("rect",{x:p,y:h.top,width:Math.max(o-p,8),height:s.chartInnerHeight,fill:"transparent",onFocus:()=>N(l.index),onMouseEnter:()=>N(l.index)},l.index)})]}),e.jsxs("div",{className:"mt-3 grid gap-3 sm:grid-cols-3",children:[e.jsx(te,{label:"Peak",value:s.maxValue.toLocaleString(void 0,{maximumFractionDigits:4})}),e.jsx(te,{label:"Samples",value:s.points.length.toLocaleString()}),e.jsx(te,{label:"Current",value:(d?.primaryValue??0).toLocaleString(void 0,{maximumFractionDigits:4})})]})]})]})}function te({label:a,value:t}){return e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] px-4 py-3",children:[e.jsx("div",{className:"hud-label",children:a}),e.jsx("div",{className:"mt-2 font-mono text-sm text-[var(--color-text-primary)]",children:t})]})}function Qe(a){return a<.01?{color:"var(--color-accent)",background:"var(--color-accent-soft)",border:"var(--border-default)",shadow:"0 0 18px rgba(var(--ch-accent), 0.14)"}:a<.1?{color:"var(--color-text-primary)",background:"rgba(var(--ch-text-primary), 0.05)",border:"var(--border-dim)",shadow:"none"}:a<=1?{color:"var(--color-warning)",background:"rgba(var(--ch-warning), 0.08)",border:"rgba(var(--ch-warning), 0.24)",shadow:"0 0 18px rgba(var(--ch-warning), 0.14)"}:{color:"var(--color-error)",background:"rgba(var(--ch-error), 0.08)",border:"rgba(var(--ch-error), 0.24)",shadow:"0 0 18px rgba(var(--ch-error), 0.16)"}}function fe({value:a,size:t="md",className:m}){const i=Qe(a);return e.jsxs("span",{className:ve("badge justify-center",t==="sm"?"px-2.5 py-[2px] text-[10px]":"px-3 py-[3px] text-[11px]",m),style:{color:i.color,background:i.background,borderColor:i.border,boxShadow:i.shadow},children:["$",a.toFixed(4)]})}function Ze(a){return a<1e3?`${Math.round(a)}ms`:`${(a/1e3).toFixed(1)}s`}function Ke(a){return a>=1e3?`${(a/1e3).toFixed(1)}k`:`${a}`}function Ye(a){return a==="active"?{dot:e.jsx("span",{"aria-hidden":"true",className:"live-dot",style:{display:"inline-block"}}),label:"active"}:a==="warning"?{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-warning)",boxShadow:"0 0 6px rgba(var(--ch-warning), 0.55)"}}),label:"warning"}:a==="error"?{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-error)",boxShadow:"0 0 6px rgba(var(--ch-error), 0.48)"}}),label:"error"}:{dot:e.jsx("span",{"aria-hidden":"true",className:"inline-block h-[6px] w-[6px] rounded-full",style:{background:"var(--color-accent-2)",boxShadow:"0 0 6px rgba(var(--ch-accent-2), 0.38)"}}),label:"complete"}}function Je({trace:a,selected:t=!1,onSelect:m,onClick:i,href:c,index:g=0,className:N}){const s=Ye(a.status),d="grid w-full grid-cols-[auto_auto_minmax(0,1.5fr)_minmax(0,0.8fr)_minmax(72px,0.5fr)_minmax(80px,0.7fr)_minmax(94px,0.6fr)_minmax(86px,0.6fr)_minmax(96px,0.7fr)] items-center gap-3 px-4 py-3 text-left hover:bg-[rgba(var(--ch-text-primary),0.02)]",l=e.jsxs(e.Fragment,{children:[m?e.jsx("span",{onClick:x=>{x.stopPropagation(),m(a.id)},className:"inline-flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-dim)] bg-transparent text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-accent)]",children:t?e.jsx(Ae,{className:"h-4 w-4"}):e.jsx(Me,{className:"h-4 w-4"})}):e.jsx("span",{className:"w-0"}),e.jsxs("div",{className:"flex items-center gap-2",children:[s.dot,e.jsx("span",{className:"mono-label text-[var(--color-text-secondary)]",children:s.label})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate text-[14px] font-medium text-[var(--color-text-primary)]",children:a.name}),e.jsx("div",{className:"mono-label mt-1 truncate",children:a.when})]}),e.jsx("div",{className:"mono-value truncate text-[var(--color-text-secondary)]",children:a.id.slice(0,10)}),e.jsx("div",{className:"mono-value justify-self-end",children:a.spans}),e.jsx("div",{className:"mono-value justify-self-end",children:Ke(a.tokens)}),e.jsx("div",{className:"justify-self-end",children:e.jsx(fe,{value:a.cost,size:"sm"})}),e.jsx("div",{className:"mono-value justify-self-end text-[var(--color-text-secondary)]",children:Ze(a.duration)}),e.jsx("div",{className:"mono-label justify-self-end text-[var(--color-text-secondary)]",children:a.when})]});return e.jsxs(ge.div,{initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:{duration:.28,delay:g*.04,ease:[.16,1,.3,1]},className:ve("relative overflow-hidden rounded-[var(--radius-panel)] border transition-[background-color,border-color,transform] duration-[var(--duration-base)] ease-[var(--ease-out)] hover:-translate-y-[1px]",N),style:{borderColor:t?"var(--border-default)":"var(--border-dim)",background:t?"var(--color-accent-dim)":"linear-gradient(180deg, rgba(var(--ch-text-primary), 0.02), rgba(var(--ch-text-primary), 0.01))"},children:[t?e.jsx("div",{"aria-hidden":"true",className:"absolute inset-y-2 left-0 w-[2px] rounded-full",style:{background:"var(--color-accent)"}}):null,c&&!m?e.jsx(be,{to:c,onClick:()=>i?.(a.id),className:d,children:l}):e.jsx("button",{type:"button",onClick:()=>i?.(a.id),className:d,children:l})]})}const q="dashboard-shell rounded-[var(--radius-card)]",pe=[12,25,50,100];function hr(){const a=ye(),[t,m]=Ne(),i=t.get("q")??"",c=$.useDeferredValue(i),g=t.get("provider")??"",N=t.get("status"),s=N==="ok"||N==="error"?N:"",d=Number(t.get("periodHours")??"24"),l=Number(t.get("pageSize")??"12"),x=pe.includes(l)?l:12,u=Math.max(1,Number(t.get("page")??"1")||1),b=(u-1)*x,p=$.useMemo(()=>({limit:x,offset:b,q:c.trim()||void 0,provider:g||void 0,status:s||void 0,periodHours:he.some(r=>r.value===d)?d:24}),[c,x,b,d,g,s]),{data:o}=K({queryKey:["stats",p.periodHours],queryFn:()=>ke(p.periodHours??24)}),{data:I,isLoading:f}=K({queryKey:["traces",p],queryFn:()=>Se(p)}),{data:X}=K({queryKey:["insights"],queryFn:Ce,refetchInterval:6e4}),F=X?.insights??[],D=I?.traces??[],w=I?.total??0,U=Math.max(1,Math.ceil(w/x)),[n,j]=$.useState(null),[O,H]=$.useState("desc");function k(r){n===r?H(y=>y==="asc"?"desc":"asc"):(j(r),H("desc"))}const S=$.useMemo(()=>n?[...D].sort((r,y)=>{const A=r[n]??0,T=y[n]??0;return O==="asc"?A-T:T-A}):D,[D,n,O]),C=o?.byProvider[0],L=S[0],oe=[...new Set(o?.byProvider.map(r=>r.provider)??[])],v=o?.costOverTime.map(r=>({timestamp:r.timestamp,cost:r.cost}))??[],ne=o&&o.totalSpans>0?o.totalCost/o.totalSpans:0,Q=Math.round((o?.errorRate??0)*100),je=[{title:"Trace Volume",value:Y(o?.totalTraces??0),status:(o?.totalTraces??0)>0?"within":"unknown",range:`${o?.totalSpans??0} spans in window`,icon:e.jsx(Ie,{className:"h-4 w-4"})},{title:"Token Throughput",value:Y(o?.totalTokens??0),status:(o?.totalTokens??0)>0?"within":"unknown",range:"Token load across active filter window",icon:e.jsx(De,{className:"h-4 w-4"})},{title:"Spend Velocity",value:M(o?.totalCost??0),status:ne>0?"observe":"unknown",range:`${M(ne)} avg per call`,icon:e.jsx(E,{className:"h-4 w-4"})},{title:"Risk Surface",value:`${Q}%`,status:Q>=8?"exceed":Q>=3?"observe":"within",range:`${o?.errorCount??0} failing calls`,icon:e.jsx(me,{className:"h-4 w-4"})}],ie=i.length>0||g.length>0||s.length>0||p.periodHours!==24;function _(r,y=!0){m(A=>{const T=new URLSearchParams(A);for(const[le,Z]of Object.entries(r))Z===void 0||Z===""?T.delete(le):T.set(le,String(Z));return y&&T.delete("page"),T},{replace:!0})}return e.jsxs($e,{eyebrow:"Flight Deck",title:"Read the behavior of every model call like a live system.",description:"LLMTap should feel like a live operator console, not a half-finished devtool. This view keeps spend movement, provider pressure, queue state, and the latest traces readable in one sweep.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(we,{}),e.jsxs("div",{className:"mt-4 grid gap-3",children:[e.jsxs("div",{className:"deck-card deck-card--accent",children:[e.jsx("div",{className:"hud-label",children:"Dominant provider"}),e.jsxs("div",{className:"mt-2 flex items-center justify-between",children:[e.jsx("div",{className:"capitalize text-[var(--color-text-primary)]",style:{fontFamily:"var(--font-operator)",fontSize:"30px",fontWeight:700,lineHeight:"0.92",letterSpacing:"-0.04em"},children:C?.provider??"Awaiting traffic"}),e.jsx(Re,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:C?`${C.spanCount} calls, ${M(C.totalCost)} spend`:"No provider activity yet"})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Latest trace"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:L?.name??"No recent traces"}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:L?`${de(L.startTime)} / ${L.spanCount} spans`:"Start sending spans to populate the deck"})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsxs("strong",{children:[p.periodHours,"h"]})]}),e.jsxs("span",{className:"pill-item",children:["providers ",e.jsx("strong",{children:oe.length||0})]}),e.jsxs("span",{className:"pill-item",children:["traces ",e.jsx("strong",{children:w})]}),e.jsxs("span",{className:"pill-item",children:["status ",e.jsx("strong",{children:o?.errorCount?"watching":"stable"})]})]}),e.jsx(Le,{cards:je,className:"max-w-none px-0 sm:px-0 lg:px-0"}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.5fr)_minmax(320px,0.95fr)]",children:[e.jsxs("section",{className:`${q} p-5 sm:p-6`,children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Economic pulse"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Cost gradient"})]}),e.jsxs("div",{className:"status-chip",children:[e.jsx(He,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[p.periodHours,"h window"]})]})]}),v.length>0?e.jsxs("div",{className:"surface-strong overflow-hidden rounded-[var(--radius-card)] p-4",children:[e.jsx(Ue,{data:v,xDataKey:"timestamp",primaryDataKey:"cost"}),e.jsxs("div",{className:"mt-4 grid gap-3 sm:grid-cols-3",children:[e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Latest"}),e.jsx("div",{className:"mt-2 text-lg font-semibold text-[var(--color-text-primary)]",children:M(v.at(-1)?.cost??0)})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Peak"}),e.jsx("div",{className:"mt-2 text-lg font-semibold text-[var(--color-text-primary)]",children:M(Math.max(...v.map(r=>r.cost),0))})]}),e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Change"}),e.jsxs("div",{className:`mt-2 text-lg font-semibold ${(v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)>=0?"text-[var(--color-accent)]":"text-[var(--color-text-primary)]"}`,children:[(v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)>=0?"+":"-",M(Math.abs((v.at(-1)?.cost??0)-(v.at(-2)?.cost??v.at(-1)?.cost??0)))]})]})]})]}):e.jsx(z,{title:"No cost movement yet",description:"This turns into a live spend curve as soon as the collector receives traced calls.",className:"min-h-[320px]"})]}),e.jsxs("section",{className:`${q} p-5 sm:p-6`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Provider pressure"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Allocation by provider"})]}),e.jsx("div",{className:"space-y-4",children:(o?.byProvider??[]).length>0?(o?.byProvider??[]).map(r=>{const y=(o?.totalCost??0)>0?r.totalCost/(o?.totalCost??1)*100:0;return e.jsxs("div",{className:"surface-muted rounded-[var(--radius-panel)] p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx(ze,{provider:r.provider}),e.jsxs("div",{className:"text-[length:var(--text-caption)] text-[var(--color-text-secondary)]",children:[r.spanCount," calls / ",Y(r.totalTokens)," tokens"]})]}),e.jsxs("div",{className:"text-right",children:[e.jsx(fe,{value:r.totalCost,size:"sm"}),e.jsx("div",{className:"text-[length:var(--text-caption)] text-[var(--color-text-tertiary)]",children:Te(r.avgDuration)})]})]}),e.jsx("div",{className:"mt-3 h-2 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.84)]",children:e.jsx(ge.div,{className:"h-full w-full origin-left rounded-full bg-[linear-gradient(90deg,var(--color-accent-2),var(--color-accent))]",initial:{scaleX:0},animate:{scaleX:Math.max(y,4)/100},transition:{duration:.5,ease:"easeOut"}})})]},r.provider)}):e.jsx(z,{title:"No provider activity yet",description:"Allocation bands appear here once the collector receives instrumented traffic.",className:"min-h-[320px]"})})]})]}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-[minmax(0,1.45fr)_minmax(320px,0.85fr)]",children:[e.jsxs("section",{className:`${q} p-4 sm:p-5`,children:[e.jsxs("div",{className:"surface-strong mb-4 rounded-[var(--radius-card)] p-4",children:[e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Search console"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Trace dispatch queue"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"status-chip",children:[w," matches"]}),e.jsxs("button",{type:"button",onClick:()=>_({q:void 0,provider:void 0,status:void 0,periodHours:void 0}),disabled:!ie,className:"status-chip transition-all duration-[--duration-normal] hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-accent),0.06)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(Ve,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Clear"})]})]})]}),e.jsxs("div",{className:"mt-4 grid gap-3 xl:grid-cols-[minmax(0,1.7fr)_repeat(3,minmax(0,0.7fr))]",children:[e.jsx(Be,{value:i,onChange:r=>_({q:r||void 0}),placeholder:"Search traces, models, providers, errors"}),e.jsxs(G,{value:g||"__all__",onValueChange:r=>_({provider:r==="__all__"?void 0:r}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{placeholder:"All providers"})}),e.jsxs(B,{children:[e.jsx(P,{value:"__all__",children:"All providers"}),oe.map(r=>e.jsx(P,{value:r,children:r},r))]})]}),e.jsxs(G,{value:s||"__all__",onValueChange:r=>_({status:r==="__all__"?void 0:r}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{placeholder:"All states"})}),e.jsxs(B,{children:[e.jsx(P,{value:"__all__",children:"All states"}),e.jsx(P,{value:"ok",children:"Healthy only"}),e.jsx(P,{value:"error",children:"Errors only"})]})]}),e.jsxs(G,{value:String(p.periodHours??24),onValueChange:r=>_({periodHours:Number(r)===24?void 0:Number(r)}),children:[e.jsx(R,{className:"w-full rounded-2xl py-3",children:e.jsx(W,{})}),e.jsx(B,{children:he.map(r=>e.jsx(P,{value:String(r.value),children:r.label},r.value))})]})]})]}),f?e.jsx(z,{title:"Loading trace queue",description:"The latest calls are being assembled into the dispatch surface.",className:"min-h-[280px]"}):S.length===0&&!ie?e.jsx(_e,{}):S.length===0?e.jsx(z,{title:"No traces match these filters",description:"Try adjusting the search term, provider filter, or time window.",className:"min-h-[280px]"}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"space-y-2.5",children:[e.jsxs("div",{className:"grid grid-cols-[auto_auto_minmax(0,1.5fr)_minmax(0,0.8fr)_minmax(72px,0.5fr)_minmax(80px,0.7fr)_minmax(94px,0.6fr)_minmax(86px,0.6fr)_minmax(96px,0.7fr)] gap-3 px-4 py-2 text-[11px] uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]",children:[e.jsx("span",{}),e.jsx("span",{children:"State"}),e.jsx("span",{children:"Trace"}),e.jsx("span",{children:"ID"}),e.jsx("button",{type:"button",onClick:()=>k("spanCount"),className:"justify-self-end",children:"Spans"}),e.jsx("button",{type:"button",onClick:()=>k("totalTokens"),className:"justify-self-end",children:"Tokens"}),e.jsx("button",{type:"button",onClick:()=>k("totalCost"),className:"justify-self-end",children:"Cost"}),e.jsx("span",{className:"justify-self-end",children:"Duration"}),e.jsx("button",{type:"button",onClick:()=>k("startTime"),className:"justify-self-end",children:"When"})]}),S.map((r,y)=>e.jsx(Je,{index:y,trace:{id:r.traceId,name:r.name,status:r.status==="ok"?"complete":"error",spans:r.spanCount,tokens:r.totalTokens,cost:r.totalCost,duration:r.totalDuration??0,when:de(r.startTime)},href:`/trace/${r.traceId}`,onClick:A=>a(`/trace/${A}`)},r.traceId))]}),e.jsxs("div",{className:"mt-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"text-[length:var(--text-caption)] text-[var(--color-text-tertiary)]",children:w>0?`Showing ${b+1}-${Math.min(b+S.length,w)} of ${w}`:"Awaiting traces"}),e.jsxs(G,{value:String(x),onValueChange:r=>_({pageSize:Number(r)===12?void 0:Number(r)}),children:[e.jsx(R,{className:"w-auto rounded-xl px-2 py-1.5 text-[length:var(--text-caption)]",children:e.jsx(W,{})}),e.jsx(B,{children:pe.map(r=>e.jsxs(P,{value:String(r),children:[r," / page"]},r))})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(ce,{variant:"outline",size:"sm",onClick:()=>_({page:u>2?u-1:void 0},!1),disabled:u<=1,children:[e.jsx(qe,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Previous"})]}),e.jsxs(ce,{variant:"outline",size:"sm",onClick:()=>_({page:u+1},!1),disabled:u>=U,children:[e.jsx("span",{children:"Next"}),e.jsx(Fe,{className:"h-3.5 w-3.5"})]})]})]})]})]}),e.jsxs("section",{className:`${q} p-5`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Intelligence layer"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Insights"})]}),e.jsx("div",{className:"space-y-4",children:F.length>0?F.map(r=>e.jsxs("div",{className:`rounded-2xl border p-4 ${r.severity==="critical"?"border-[var(--color-text-primary)]/18 bg-[var(--color-text-primary)]/8":r.severity==="warning"?"border-[var(--color-accent-2)]/18 bg-[var(--color-accent-2)]/8":"border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)]"}`,children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[r.type==="cost_anomaly"&&e.jsx(xe,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),r.type==="error_pattern"&&e.jsx(me,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),r.type==="model_recommendation"&&e.jsx(Oe,{className:"h-4 w-4 text-[var(--color-accent)]"}),r.type==="token_waste"&&e.jsx(E,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),r.title]}),r.metric&&e.jsx("span",{className:"shrink-0 rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 font-mono text-[length:var(--text-hud)] text-[var(--color-text-tertiary)]",children:r.metric})]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:r.description})]},r.id)):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(Ge,{className:"h-4 w-4 text-[var(--color-accent)]"}),"Health read"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:(o?.errorRate??0)>.05?"Error rate is elevated. Start with the most recent failed trace and inspect provider or tool payloads.":"Error pressure is currently low. Use this window to compare provider cost drift and latency patterns."})]}),e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(E,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),"Spend insight"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:C?`${C.provider} currently leads cost share. If that is unexpected, inspect the filtered queue for bursty workflows.`:"Provider concentration will appear here once traces land."})]}),e.jsxs("div",{className:"surface-muted rounded-2xl p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--color-text-primary)]",children:[e.jsx(xe,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),"Queue focus"]}),e.jsx("p",{className:"text-sm leading-6 text-[var(--color-text-secondary)]",children:L?`Latest traffic is "${L.name}". Open it to inspect hierarchy, timing, and payload shape.`:"No active traces yet. Generate a request through an instrumented client to validate the pipeline."})]})]})})]})]}),e.jsxs("section",{className:`${q} p-5 sm:p-6`,children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Operator Briefing"}),e.jsx("h2",{className:"page-section-title mt-1",children:"What this surface is telling you"})]}),e.jsxs(We,{defaultValue:["queue-health"],multiple:!0,children:[e.jsxs(J,{value:"queue-health",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What should I check first when I open LLMTap?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Start with the economic pulse, dominant provider, and latest trace. That combination tells you whether traffic is flowing, whether one provider is dominating spend, and which trace should be inspected first."})]}),e.jsxs(J,{value:"traces-vs-economics",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"When do I move from Overview to Traces or Economics?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Use Traces when something looks operationally wrong and you need the exact request timeline. Use Economics when behavior is healthy but budget concentration or model mix looks suspicious."})]}),e.jsxs(J,{value:"healthy-window",className:"border-[var(--border-dim)]",children:[e.jsx(ee,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What does a healthy window look like?"}),e.jsx(re,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Healthy windows show steady cost movement, low risk surface, no sudden provider concentration shifts, and a queue of recent traces that stays readable instead of spiking with failures."})]})]})]})]})}export{hr as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,j as e,e as H,f as x,h as M,i as I,k as z}from"./query-DVWnIZNd.js";import{S as p,a as v,b as u,c as h,d as f}from"./select-
|
|
1
|
+
import{r as i,j as e,e as H,f as x,h as M,i as I,k as z}from"./query-DVWnIZNd.js";import{S as p,a as v,b as u,c as h,d as f}from"./select-Dsu3r0h-.js";import{c as n}from"./index-BCjwgtkq.js";import{E as A}from"./EmptyState-B8rSQL1S.js";import{a4 as E,a5 as G,a6 as L,u as F,a7 as _,a8 as B,Q as U,a9 as O}from"./icons-BOLUIAKd.js";const j=i.forwardRef(({className:o,...t},s)=>e.jsx("div",{className:"relative w-full overflow-x-auto",children:e.jsx("table",{ref:s,className:n("w-full caption-bottom text-sm",o),...t})}));j.displayName="Table";const y=i.forwardRef(({className:o,...t},s)=>e.jsx("thead",{ref:s,className:n("[&_tr]:border-b [&_tr]:border-[var(--border-dim)]",o),...t}));y.displayName="TableHeader";const N=i.forwardRef(({className:o,...t},s)=>e.jsx("tbody",{ref:s,className:n("[&_tr:last-child]:border-0",o),...t}));N.displayName="TableBody";const Q=i.forwardRef(({className:o,...t},s)=>e.jsx("tfoot",{ref:s,className:n("border-t border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.68)] font-medium [&>tr]:last:border-b-0",o),...t}));Q.displayName="TableFooter";const g=i.forwardRef(({className:o,...t},s)=>e.jsx("tr",{ref:s,className:n("border-b border-[rgba(var(--ch-text-primary),0.06)] transition-colors hover:bg-[rgba(var(--ch-bg-surface),0.54)] data-[state=selected]:bg-[rgba(var(--ch-accent),0.08)]",o),...t}));g.displayName="TableRow";const w=i.forwardRef(({className:o,...t},s)=>e.jsx("th",{ref:s,className:n("h-10 px-3 text-left align-middle text-xs font-semibold uppercase tracking-wider text-[var(--color-text-tertiary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",o),...t}));w.displayName="TableHead";const C=i.forwardRef(({className:o,...t},s)=>e.jsx("td",{ref:s,className:n("px-3 py-3 align-middle text-[var(--color-text-secondary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",o),...t}));C.displayName="TableCell";const q=i.forwardRef(({className:o,...t},s)=>e.jsx("caption",{ref:s,className:n("mt-4 text-sm text-[var(--color-text-tertiary)]",o),...t}));q.displayName="TableCaption";function Z({columns:o,data:t,sorting:s,onSortingChange:S,emptyState:T,rowClassName:b,onRowClick:m}){const[R,P]=i.useState({}),[D,k]=i.useState({pageIndex:0,pageSize:10}),l=H({data:t,columns:o,state:{sorting:s??[],columnVisibility:R,pagination:D},onSortingChange:S,onColumnVisibilityChange:P,onPaginationChange:k,getCoreRowModel:z(),getSortedRowModel:I(),getPaginationRowModel:M(),manualPagination:!1});return t.length===0?T??e.jsx(A,{title:"No rows available",description:"This surface will populate when LLMTap receives matching data for the current view."}):e.jsxs("div",{className:"dashboard-shell relative overflow-hidden rounded-[calc(var(--radius-panel)+8px)]",children:[e.jsx("div",{className:"pointer-events-none absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,rgba(var(--ch-accent),0.28),transparent)]"}),e.jsx("div",{className:"pointer-events-none absolute -left-20 top-0 h-40 w-40 rounded-full bg-[var(--color-accent)]/8 blur-3xl"}),e.jsx("div",{className:"pointer-events-none absolute -right-16 bottom-0 h-36 w-36 rounded-full bg-[var(--color-accent-2)]/8 blur-3xl"}),e.jsxs("div",{className:"relative z-10 flex flex-wrap items-center justify-between gap-3 border-b border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.025)] px-4 py-3.5 sm:px-5",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Operator ledger"}),e.jsxs("div",{className:"mt-1 font-mono text-xs text-[var(--color-text-secondary)]",children:[t.length," visible rows"]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"badge hidden md:inline-flex",children:"dense mode"}),e.jsx(E,{className:"h-4 w-4 text-[var(--color-text-tertiary)]"}),e.jsxs(p,{value:l.getAllColumns().filter(r=>r.getIsVisible()).length.toString(),onValueChange:r=>{const a=Number(r);l.getAllColumns().filter(d=>d.getCanHide()&&typeof d.accessorFn<"u").forEach((d,V)=>{d.toggleVisibility(V<a)})},children:[e.jsx(v,{className:"h-8 w-42.5 rounded-[var(--radius-panel)] border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-xs text-[var(--color-text-secondary)]",children:e.jsx(u,{placeholder:"Visible columns"})}),e.jsx(h,{children:[2,3,4,5,6,7,8].map(r=>e.jsxs(f,{value:r.toString(),children:["Show ",r," columns"]},r))})]})]})]}),e.jsx("div",{className:"relative max-h-[62vh] overflow-auto",children:e.jsxs(j,{className:"min-w-195 w-full table-auto text-[13px]",children:[e.jsx(y,{className:"sticky top-0 z-20 bg-[rgba(var(--ch-bg-base),0.96)] backdrop-blur-xl",children:l.getHeaderGroups().map(r=>e.jsx(g,{className:"border-b border-[var(--border-dim)] bg-[linear-gradient(90deg,rgba(var(--ch-bg-panel),0.8),rgba(var(--ch-bg-base),0.98),rgba(var(--ch-bg-panel),0.8))] hover:bg-[linear-gradient(90deg,rgba(var(--ch-bg-panel),0.8),rgba(var(--ch-bg-base),0.98),rgba(var(--ch-bg-panel),0.8))]",children:r.headers.map(a=>{const c=a.column.getCanSort(),d=a.column.getIsSorted();return e.jsx(w,{className:n("h-12 whitespace-nowrap border-b border-[var(--border-dim)] px-4 text-[10px] font-semibold tracking-[0.18em] text-[var(--color-text-tertiary)]",a.column.columnDef.meta&&typeof a.column.columnDef.meta=="object"&&"className"in a.column.columnDef.meta?String(a.column.columnDef.meta.className):void 0),children:a.isPlaceholder?null:c?e.jsxs("button",{type:"button",onClick:a.column.getToggleSortingHandler(),className:"inline-flex items-center gap-1.5 transition-colors hover:text-[var(--color-text-primary)]",children:[x(a.column.columnDef.header,a.getContext()),d==="asc"?e.jsx(G,{className:"h-3 w-3"}):d==="desc"?e.jsx(L,{className:"h-3 w-3"}):e.jsx(F,{className:"h-3 w-3 opacity-35"})]}):x(a.column.columnDef.header,a.getContext())},a.id)})},r.id))}),e.jsx(N,{children:l.getRowModel().rows.map(r=>e.jsx(g,{onClick:m?()=>m(r):void 0,className:n("group border-b border-[var(--border-dim)] bg-transparent transition-colors odd:bg-[rgba(var(--ch-text-primary),0.012)] hover:bg-[rgba(var(--ch-accent),0.035)]",m?"cursor-pointer":void 0,typeof b=="function"?b(r):b),children:r.getVisibleCells().map((a,c)=>e.jsx(C,{className:n("border-b border-[var(--border-dim)] px-4 py-3.5 align-middle transition-colors duration-200 group-hover:border-[var(--color-accent)]/10",c===0?"pl-5":void 0,c===r.getVisibleCells().length-1?"pr-5":void 0,a.column.columnDef.meta&&typeof a.column.columnDef.meta=="object"&&"cellClassName"in a.column.columnDef.meta?String(a.column.columnDef.meta.cellClassName):void 0),children:x(a.column.columnDef.cell,a.getContext())},a.id))},r.id))})]})}),e.jsxs("div",{className:"relative z-10 flex items-center justify-between gap-3 border-t border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.02)] px-4 py-3 sm:px-5",children:[e.jsxs("div",{className:"hidden items-center gap-2 text-xs text-[var(--color-text-tertiary)] md:flex",children:[e.jsx("span",{children:"Rows per page"}),e.jsxs(p,{value:String(l.getState().pagination.pageSize),onValueChange:r=>l.setPageSize(Number(r)),children:[e.jsx(v,{className:"h-8 w-20 rounded-[var(--radius-panel)] border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-xs",children:e.jsx(u,{})}),e.jsx(h,{side:"top",children:[10,20,30,40,50].map(r=>e.jsx(f,{value:String(r),children:r},r))})]})]}),e.jsxs("div",{className:"text-xs font-medium text-[var(--color-text-secondary)]",children:["Page ",l.getState().pagination.pageIndex+1," of ",l.getPageCount()||1]}),e.jsxs("div",{className:"ml-auto flex items-center gap-1.5",children:[e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>l.setPageIndex(0),disabled:!l.getCanPreviousPage(),"aria-label":"Go to first page",children:e.jsx(_,{className:"h-4 w-4"})}),e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>l.previousPage(),disabled:!l.getCanPreviousPage(),"aria-label":"Go to previous page",children:e.jsx(B,{className:"h-4 w-4"})}),e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>l.nextPage(),disabled:!l.getCanNextPage(),"aria-label":"Go to next page",children:e.jsx(U,{className:"h-4 w-4"})}),e.jsx("button",{type:"button",className:"inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.72)] text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)] disabled:cursor-not-allowed disabled:opacity-40",onClick:()=>l.setPageIndex(l.getPageCount()-1),disabled:!l.getCanNextPage(),"aria-label":"Go to last page",children:e.jsx(O,{className:"h-4 w-4"})})]})]})]})}export{Z as D};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as r}from"./query-DVWnIZNd.js";import{B as n,c as l}from"./index-
|
|
1
|
+
import{j as r}from"./query-DVWnIZNd.js";import{B as n,c as l}from"./index-BCjwgtkq.js";function c({label:t="AWAITING DATA",title:o,description:a,action:e,className:i}){return r.jsxs("div",{className:l("flex min-h-[220px] flex-col items-center justify-center rounded-[var(--radius-panel)] border border-dashed px-6 py-10 text-center",i),style:{borderColor:"var(--border-dim)",animation:"empty-state-border 3s var(--ease-out) infinite alternate",background:"linear-gradient(180deg, rgba(var(--ch-text-primary), 0.015), rgba(var(--ch-accent), 0.02))"},children:[r.jsx("div",{className:"mb-4 flex h-11 w-11 items-center justify-center rounded-full border border-[var(--border-default)] bg-[var(--color-accent-dim)]",children:r.jsxs("svg",{width:"22",height:"22",viewBox:"0 0 22 22","aria-hidden":"true",children:[r.jsx("circle",{cx:"11",cy:"11",r:"8",fill:"none",stroke:"var(--color-accent)",strokeOpacity:"0.45",strokeWidth:"1.5",style:{animation:"breathe 2.8s var(--ease-out) infinite"}}),r.jsx("circle",{cx:"11",cy:"11",r:"2.5",fill:"var(--color-accent)",style:{filter:"drop-shadow(var(--glow-dot))"}})]})}),t?r.jsx("div",{className:"mono-label",children:t}):null,r.jsx("div",{className:"mt-2 text-[16px] font-medium text-[var(--color-text-primary)]",children:o}),a?r.jsx("div",{className:"mt-2 max-w-[34rem] text-[13px] leading-6 text-[var(--color-text-secondary)]",children:a}):null,e?r.jsx(n,{type:"button",variant:"outline",onClick:e.onClick,className:"mt-5 rounded-[var(--radius-panel)] border-[var(--border-default)] bg-transparent text-[var(--color-text-primary)] transition-colors duration-[var(--duration-base)] ease-[var(--ease-out)] hover:border-[var(--border-bright)] hover:bg-[var(--color-accent-dim)]",children:e.label}):null]})}export{c as E};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as v,d as y,j as e}from"./query-DVWnIZNd.js";import{b as N,f as b}from"./index-
|
|
1
|
+
import{r as v,d as y,j as e}from"./query-DVWnIZNd.js";import{b as N,f as b}from"./index-BCjwgtkq.js";import{D as f}from"./DataTable-NGj_eAG3.js";import{b as c,f as d,a as m,P as C}from"./format-BdzpxHjW.js";import{E as x}from"./EmptyState-B8rSQL1S.js";import{N as k}from"./number-ticker-4lK1KASk.js";import{p as u}from"./provider-colors-CTiHNYHs.js";import{c as i}from"./motion-CSeNjKbZ.js";import{y as w,x as D,d as M}from"./icons-BOLUIAKd.js";import"./ui-BFiKdTjl.js";import"./select-Dsu3r0h-.js";const r="dashboard-shell rounded-[var(--radius-card)]";function g({rows:t,valueFormatter:o,barClassName:l}){const n=Math.max(...t.map(s=>s.value),1);return e.jsx("div",{className:"space-y-4",children:t.map(s=>e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.78),rgba(var(--ch-bg-base),0.94))] p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-4",children:[e.jsx("span",{className:"truncate text-sm font-medium text-[var(--color-text-primary)]",children:s.name}),e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:o(s.value)})]}),e.jsx("div",{className:"mt-3 h-2.5 overflow-hidden rounded-full bg-[rgba(var(--ch-bg-base),0.82)]",children:e.jsx(i.div,{className:`h-full rounded-full ${l}`,initial:{width:0},animate:{width:`${Math.max(s.value/n*100,6)}%`},transition:{duration:.45,ease:"easeOut"}})})]},s.name))})}function I(){const[t,o]=v.useState([{id:"totalCost",desc:!0}]),{data:l,isLoading:n}=y({queryKey:["stats",168],queryFn:()=>b(168)}),s=l?.byModel??[],h=s.map(a=>({name:a.model.length>20?`${a.model.slice(0,18)}...`:a.model,value:a.avgDuration})).filter(a=>a.value>0).slice(0,8),p=s.map(a=>({name:a.model.length>20?`${a.model.slice(0,18)}...`:a.model,value:a.totalTokens})).filter(a=>a.value>0).slice(0,8),j=v.useMemo(()=>[{accessorKey:"model",header:"Model",cell:({row:a})=>e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"truncate font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:a.original.model}),e.jsxs("div",{className:"mt-1 text-xs text-[var(--color-text-secondary)]",children:[a.original.avgDuration?c(a.original.avgDuration):"No latency yet"," average latency"]})]})},{accessorKey:"provider",header:"Provider",cell:({row:a})=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"h-2.5 w-2.5 rounded-full",style:{backgroundColor:u[a.original.provider]??"var(--color-accent)",boxShadow:`0 0 10px ${u[a.original.provider]??"var(--color-accent)"}`}}),e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-[var(--color-text-secondary)]",children:a.original.provider})]})},{accessorKey:"spanCount",header:"Calls",cell:({row:a})=>e.jsx("span",{className:"inline-flex items-center justify-center rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.04)] px-2.5 py-0.5 font-mono text-xs text-[var(--color-text-secondary)]",children:a.original.spanCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalTokens",header:"Tokens",cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:d(a.original.totalTokens)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalCost",header:"Cost",cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:m(a.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"avgDuration",header:"Avg Latency",cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:a.original.avgDuration?c(a.original.avgDuration):"-"}),meta:{className:"text-right",cellClassName:"text-right"}},{id:"costPerCall",header:"Cost/Call",accessorFn:a=>a.spanCount>0?a.totalCost/a.spanCount:0,cell:({row:a})=>e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:a.original.spanCount>0?m(a.original.totalCost/a.original.spanCount):"-"}),meta:{className:"text-right",cellClassName:"text-right"}}],[]);return n?e.jsxs("div",{className:"mx-auto max-w-[1760px] space-y-8",children:[e.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),e.jsx("div",{className:"skeleton-panel h-80 rounded-[24px]"})]}):e.jsxs(C,{eyebrow:"Model Intelligence",title:"Every model. Every metric. One surface.",description:"Compare cost, token volume, latency, and call frequency across all models in your rotation. Identify the models consuming the most budget and the ones delivering the best performance.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(N,{}),e.jsxs("div",{className:"mt-5 space-y-4",children:[e.jsxs("div",{className:"deck-card deck-card--accent",children:[e.jsx("div",{className:"hud-label",children:"Models active"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:e.jsx(k,{value:s.length})}),e.jsxs("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:["Across ",new Set(s.map(a=>a.provider)).size," providers"]})]}),e.jsxs("div",{className:"deck-card",children:[e.jsx("div",{className:"hud-label",children:"Highest cost model"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:s[0]?.model??"No data"}),e.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:s[0]?m(s[0].totalCost):"-"})]})]})]}),children:[e.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[e.jsxs("span",{className:"pill-item",children:["window ",e.jsx("strong",{children:"168h"})]}),e.jsxs("span",{className:"pill-item",children:["models ",e.jsx("strong",{children:s.length})]}),e.jsxs("span",{className:"pill-item",children:["providers ",e.jsx("strong",{children:new Set(s.map(a=>a.provider)).size})]}),e.jsxs("span",{className:"pill-item",children:["tokens ",e.jsx("strong",{children:d(l?.totalTokens??0)})]})]}),s.length>0?e.jsxs(e.Fragment,{children:[e.jsxs(i.div,{className:`${r} overflow-hidden p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{duration:.35},children:[e.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3 px-1",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Model roster"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Performance by model"})]}),e.jsxs("span",{className:"status-chip",children:[e.jsx(w,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsxs("span",{children:[s.length," models"]})]})]}),e.jsx(f,{columns:j,data:s,sorting:t,onSortingChange:o})]}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-2",children:[e.jsxs(i.div,{className:`${r} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.1,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Latency profile"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Average latency by model"})]}),e.jsx(D,{className:"h-4 w-4 text-[var(--color-accent)]"})]}),h.length>0?e.jsx(g,{rows:h,valueFormatter:c,barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent-2),0.95),rgba(var(--ch-accent),0.78))]"}):e.jsx(x,{title:"No latency data available yet",description:"Latency lanes appear once calls have enough timing data to compare across models.",className:"h-[280px]"})]}),e.jsxs(i.div,{className:`${r} p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.15,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"hud-label",children:"Token distribution"}),e.jsx("h2",{className:"page-section-title mt-1",children:"Token volume by model"})]}),e.jsx(M,{className:"h-4 w-4 text-[var(--color-accent-2)]"})]}),p.length>0?e.jsx(g,{rows:p,valueFormatter:d,barClassName:"bg-[linear-gradient(90deg,rgba(var(--ch-accent),0.95),rgba(var(--ch-accent-2),0.78))]"}):e.jsx(x,{title:"No token distribution data available yet",description:"Token lanes appear once captured model traffic reaches the collector.",className:"h-[280px]"})]})]})]}):e.jsx("div",{className:`${r} p-16`,children:e.jsx(x,{title:"No models tracked yet",description:"Start sending traced API calls and model metrics will populate automatically."})})]})}export{I as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as t}from"./query-DVWnIZNd.js";import{c}from"./index-
|
|
1
|
+
import{j as t}from"./query-DVWnIZNd.js";import{c}from"./index-BCjwgtkq.js";function s({provider:r,active:o=!0,size:a="md",className:e}){return t.jsx("span",{className:c("badge capitalize transition-[border-color,background-color,color,text-shadow] duration-[var(--duration-base)] ease-[var(--ease-out)] hover:border-[var(--border-default)]",a==="sm"?"px-2.5 py-[2px] text-[10px]":"px-3 py-[3px] text-[11px]",e),style:o?{background:"var(--color-accent-dim)",borderColor:"var(--border-default)",color:"var(--color-accent)",textShadow:"0 0 10px rgba(var(--ch-accent), 0.18)"}:{background:"transparent",borderColor:"var(--border-invisible)",color:"var(--color-text-tertiary)"},children:r})}export{s as P};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{r as m,d as v,j as s}from"./query-DVWnIZNd.js";import{L as g,b as N,s as j}from"./index-
|
|
1
|
+
import{r as m,d as v,j as s}from"./query-DVWnIZNd.js";import{L as g,b as N,s as j}from"./index-BCjwgtkq.js";import{D as f}from"./DataTable-NGj_eAG3.js";import{c as o,f as y,a as l,P as b}from"./format-BdzpxHjW.js";import{E as C}from"./EmptyState-B8rSQL1S.js";import{N as S}from"./number-ticker-4lK1KASk.js";import{M as k,T as w,a3 as T}from"./icons-BOLUIAKd.js";import{c as K}from"./motion-CSeNjKbZ.js";import"./ui-BFiKdTjl.js";import"./select-Dsu3r0h-.js";const d="dashboard-shell rounded-[var(--radius-card)]";function R(){const[x,h]=m.useState([{id:"lastSeen",desc:!0}]),{data:i,isLoading:p}=v({queryKey:["sessions"],queryFn:()=>j(168)}),t=i?.sessions??[],a=i?.total??0,n=t.reduce((e,r)=>e+r.totalCost,0),c=t.reduce((e,r)=>e+r.traceCount,0),u=m.useMemo(()=>[{accessorKey:"sessionId",header:"Session ID",cell:({row:e})=>s.jsxs(g,{to:`/traces?q=${encodeURIComponent(e.original.sessionId)}`,className:"group inline-flex min-w-0 items-center gap-3",children:[s.jsx("span",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] text-[var(--color-accent)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-accent)]",children:s.jsx(k,{className:"h-4 w-4"})}),s.jsxs("span",{className:"min-w-0",children:[s.jsx("span",{className:"block truncate font-mono text-sm font-semibold text-[var(--color-text-primary)] transition-colors hover:text-[var(--color-accent)]",children:e.original.sessionId.length>28?`${e.original.sessionId.slice(0,26)}...`:e.original.sessionId}),s.jsxs("span",{className:"mt-1 block text-xs text-[var(--color-text-secondary)]",children:["Last active ",o(e.original.lastSeen)]})]})]})},{accessorKey:"traceCount",header:"Traces",cell:({row:e})=>s.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:e.original.traceCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"spanCount",header:"Spans",cell:({row:e})=>s.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:e.original.spanCount}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalTokens",header:"Tokens",cell:({row:e})=>s.jsx("span",{className:"font-mono text-sm text-[var(--color-text-secondary)]",children:y(e.original.totalTokens)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"totalCost",header:"Cost",cell:({row:e})=>s.jsx("span",{className:"font-mono text-sm font-semibold text-[var(--color-text-primary)]",children:l(e.original.totalCost)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"errorCount",header:"Errors",cell:({row:e})=>e.original.errorCount>0?s.jsxs("span",{className:"inline-flex items-center gap-1 rounded-full border border-[var(--color-text-primary)]/20 bg-[var(--color-text-primary)]/10 px-2 py-0.5 text-xs font-bold text-[var(--color-text-primary)]",children:[s.jsx(w,{className:"h-3 w-3"}),e.original.errorCount]}):s.jsx("span",{className:"font-mono text-sm text-[var(--color-text-tertiary)]",children:"0"}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"firstSeen",header:"First Seen",cell:({row:e})=>s.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:o(e.original.firstSeen)}),meta:{className:"text-right",cellClassName:"text-right"}},{accessorKey:"lastSeen",header:"Last Active",cell:({row:e})=>s.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:o(e.original.lastSeen)}),meta:{className:"text-right",cellClassName:"text-right"}}],[]);return p?s.jsxs("div",{className:"mx-auto max-w-[1760px] space-y-8",children:[s.jsx("div",{className:"skeleton-panel h-44 rounded-[28px]"}),s.jsx("div",{className:"skeleton-panel h-80 rounded-[24px]"})]}):s.jsxs(b,{eyebrow:"Session Fabric",title:"Multi-turn conversations, grouped and measured.",description:"Sessions collect related traces into logical units. Track total cost and token volume across entire user conversations, multi-step agent runs, or workflow pipelines.",aside:s.jsxs("div",{className:"insight-panel",children:[s.jsx(N,{}),s.jsxs("div",{className:"mt-5 space-y-4",children:[s.jsxs("div",{className:"deck-card deck-card--accent",children:[s.jsx("div",{className:"hud-label",children:"Active sessions"}),s.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:s.jsx(S,{value:a})}),s.jsxs("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:[c," traces across all sessions"]})]}),s.jsxs("div",{className:"deck-card",children:[s.jsx("div",{className:"hud-label",children:"Session spend"}),s.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:l(n)}),s.jsx("div",{className:"mt-2 text-sm text-[var(--color-text-secondary)]",children:"Combined cost across visible sessions"})]})]})]}),children:[s.jsxs("div",{className:"pill-strip w-fit max-w-full overflow-x-auto",children:[s.jsxs("span",{className:"pill-item",children:["window ",s.jsx("strong",{children:"168h"})]}),s.jsxs("span",{className:"pill-item",children:["sessions ",s.jsx("strong",{children:a})]}),s.jsxs("span",{className:"pill-item",children:["traces ",s.jsx("strong",{children:c})]}),s.jsxs("span",{className:"pill-item",children:["spend ",s.jsx("strong",{children:l(n)})]})]}),t.length>0?s.jsxs(K.div,{className:`${d} overflow-hidden p-5`,initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{duration:.35},children:[s.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3 px-1",children:[s.jsxs("div",{children:[s.jsx("div",{className:"hud-label",children:"Session registry"}),s.jsx("h2",{className:"page-section-title mt-1",children:"Tracked sessions"})]}),s.jsxs("span",{className:"status-chip",children:[s.jsx(T,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),s.jsxs("span",{children:[a," sessions"]})]})]}),s.jsx(f,{columns:u,data:t,sorting:x,onSortingChange:h})]}):s.jsx("div",{className:`${d} p-16`,children:s.jsxs("div",{className:"space-y-6",children:[s.jsx(C,{title:"No sessions tracked yet",description:"Sessions appear when you pass a `sessionId` to the SDK. This groups related traces into logical conversations or workflows."}),s.jsx("pre",{className:"mx-auto mt-5 max-w-lg rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-text-primary),0.03)] p-5 text-left font-mono text-sm text-[var(--color-text-secondary)]",children:`import { init } from "@llmtap/sdk";
|
|
2
2
|
|
|
3
3
|
init({ sessionId: "user-session-123" });`})]})})]})}export{R as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{r as o,j as e,u as Ce,d as Se}from"./query-DVWnIZNd.js";import{c as p,v as oe,t as c,w as ke,x as Te,b as Pe,y as De,z as Re,A as Oe,C as Ae}from"./index-DG2eF3M2.js";import{G as Me}from"./GettingStartedPanel-Cn46fQ1w.js";import{A as Le,a as g,b as y,c as f}from"./accordion-CC_sxDZ8.js";import{P as Ee,c as ae}from"./format-zoXqpaOb.js";import{S as $e,a as Fe,b as Ie,c as Ue,d as b}from"./select-BJEJvQo4.js";import{j as Be,k as ze,l as le,m as ne,n as ce,o as ie,A as de,p as xe}from"./ui-BFiKdTjl.js";import{c as x}from"./motion-CSeNjKbZ.js";import{aa as Je,z as S,U as Ke,E as k,ab as We,R as qe,D as He,X as re,ac as Qe,ad as Ve,S as Ge,ae as _e,af as Xe}from"./icons-BOLUIAKd.js";const te=Be,Ye=ze,pe=o.forwardRef(({className:t,...s},l)=>e.jsx(xe,{className:p("fixed inset-0 z-50 bg-[rgba(var(--ch-bg-base),0.74)] backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",t),...s,ref:l}));pe.displayName=xe.displayName;const A=o.forwardRef(({className:t,...s},l)=>e.jsxs(Ye,{children:[e.jsx(pe,{}),e.jsx(le,{ref:l,className:p("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[24px] border border-[var(--border-default)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.98),rgba(var(--ch-bg-base),0.99))] p-6 shadow-[0_40px_100px_rgba(0,0,0,0.5)] backdrop-blur-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",t),...s})]}));A.displayName=le.displayName;const M=({className:t,...s})=>e.jsx("div",{className:p("flex flex-col gap-1.5 text-center sm:text-left",t),...s});M.displayName="AlertDialogHeader";const L=({className:t,...s})=>e.jsx("div",{className:p("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",t),...s});L.displayName="AlertDialogFooter";const E=o.forwardRef(({className:t,...s},l)=>e.jsx(ne,{ref:l,className:p("text-lg font-semibold text-[var(--color-text-primary)]",t),...s}));E.displayName=ne.displayName;const $=o.forwardRef(({className:t,...s},l)=>e.jsx(ce,{ref:l,className:p("text-sm text-[var(--color-text-secondary)]",t),...s}));$.displayName=ce.displayName;const F=o.forwardRef(({className:t,...s},l)=>e.jsx(de,{ref:l,className:p(oe(),t),...s}));F.displayName=de.displayName;const I=o.forwardRef(({className:t,...s},l)=>e.jsx(ie,{ref:l,className:p(oe({variant:"outline"}),t),...s}));I.displayName=ie.displayName;function se(t){if(t===0)return"0 B";const s=["B","KB","MB","GB"],l=Math.min(Math.floor(Math.log(t)/Math.log(1024)),s.length-1);return`${(t/Math.pow(1024,l)).toFixed(l===0?0:1)} ${s[l]}`}function j({label:t,value:s,mono:l}){return e.jsxs("div",{className:"flex items-center justify-between gap-4 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:t}),e.jsx("span",{className:`text-sm font-medium text-[var(--color-text-primary)] ${l?"font-mono":""}`,children:s})]})}function ca(){const t=Ce(),[s,l]=o.useState(!1),[me,U]=o.useState(!1),[N,B]=o.useState(!1),[he,z]=o.useState(null),[w,J]=o.useState([]),[ue,T]=o.useState(!1),[i,h]=o.useState({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""}),[v,be]=o.useState("30"),[ve,K]=o.useState(!1),[P,W]=o.useState(null),[q,H]=o.useState(!1),[D,ge]=o.useState(""),[R,ye]=o.useState("llmtap"),[Q,V]=o.useState(!1),[O,C]=o.useState(null),[G,_]=o.useState(!1),[fe,X]=o.useState(!1),[je,Y]=o.useState(!1),{data:n}=Se({queryKey:["db-info"],queryFn:Ae});async function Ne(){l(!0);try{await De(),U(!0),t.invalidateQueries(),c.success("Trace data cleared",{description:"The local collector database has been reset."}),setTimeout(()=>U(!1),3e3)}catch(a){c.error("Reset failed",{description:a instanceof Error?a.message:String(a)})}finally{l(!1)}}async function Z(a){H(!0);try{const r=await Re(a);W(r.deletedSpans),K(!0),t.invalidateQueries(),c.success("Retention applied",{description:r.deletedSpans>0?`Deleted ${r.deletedSpans} old spans.`:"No spans needed cleanup for the selected window."}),setTimeout(()=>{K(!1),W(null)},4e3)}catch(r){c.error("Retention failed",{description:r instanceof Error?r.message:String(r)})}finally{H(!1)}}async function ee(a){B(!0);try{const r=await Oe(a),u=new Blob([r],{type:a==="json"?"application/json":"text/csv"}),d=URL.createObjectURL(u),m=document.createElement("a");m.href=d,m.download=`llmtap-traces-${new Date().toISOString().slice(0,10)}.${a}`,document.body.appendChild(m),m.click(),document.body.removeChild(m),URL.revokeObjectURL(d),c.success(`Exported ${a.toUpperCase()}`,{description:"Trace data was downloaded successfully."})}catch(r){c.error("Export failed",{description:r instanceof Error?r.message:String(r)})}finally{B(!1)}}function we(a,r){navigator.clipboard.writeText(a).catch(()=>{}),z(r),c.success("Copied to clipboard",{description:"Database path copied."}),setTimeout(()=>z(null),2e3)}return e.jsxs(e.Fragment,{children:[e.jsxs(Ee,{eyebrow:"Control Panel",title:"Configure, export, and manage your local collector.",description:"This is the operational side of LLMTap: local storage, exports, retention, and recovery controls. Nothing here should feel cryptic.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(Pe,{}),e.jsx("div",{className:"mt-4 space-y-3",children:e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Database"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:n?se(n.sizeBytes):"..."}),e.jsxs("div",{className:"mt-1 text-sm text-[var(--color-text-secondary)]",children:[n?.spanCount??0," spans stored"]})]})})]}),children:[e.jsx(Me,{compact:!0}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-2",children:[e.jsxs("div",{className:"space-y-5",children:[e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(Je,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Database status"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(j,{label:"Size on disk",value:n?se(n.sizeBytes):"-"}),e.jsx(j,{label:"Total spans",value:String(n?.spanCount??0),mono:!0}),e.jsx(j,{label:"Total traces",value:String(n?.traceCount??0),mono:!0}),e.jsx(j,{label:"Journal mode",value:n?.walMode?.toUpperCase()??"-",mono:!0}),e.jsx(j,{label:"Data range",value:n?.oldestSpan&&n?.newestSpan?`${ae(n.oldestSpan)} to ${ae(n.newestSpan)}`:"No data"}),e.jsxs("div",{className:"flex items-center justify-between gap-4 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:"Storage path"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"max-w-[220px] truncate font-mono text-xs text-[var(--color-text-secondary)]",children:n?.path??"-"}),n?.path&&e.jsx("button",{type:"button",onClick:()=>we(n.path,"path"),className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] p-1.5 text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",children:he==="path"?e.jsx(S,{className:"h-3 w-3 text-[var(--color-accent)]"}):e.jsx(Ke,{className:"h-3 w-3"})})]})]})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.06,duration:.35},children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Settings FAQ"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Before you change the collector"})]}),e.jsxs(Le,{defaultValue:["local-data"],multiple:!0,children:[e.jsxs(g,{value:"local-data",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What stays local on this machine?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"The collector database, exports, retention operations, replay tools, and diagnostics stay local first. LLMTap only sends traces outward when you explicitly export or forward them."})]}),e.jsxs(g,{value:"retention",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What happens when I apply retention?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Retention deletes stored spans older than the selected window immediately. If you need a rollback point, run a backup first and then apply retention."})]}),e.jsxs(g,{value:"backup-restore",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"When should I backup, export, or restore?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Use export for analysis outside LLMTap, backup before aggressive cleanup or experiments, and restore when you need to return the collector to a known-good local state quickly."})]}),e.jsxs(g,{value:"otlp",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"Does OTLP forwarding make LLMTap cloud-only?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"No. LLMTap still runs locally. OTLP forwarding is an explicit send step for traces you choose to push into another backend like Tempo, Jaeger, Datadog, or Honeycomb."})]}),e.jsxs(g,{value:"empty-dashboard",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What do I do if the dashboard is still empty?"}),e.jsxs(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:["Run one real model request from the app you wrapped, then refresh this page. If nothing appears, run",e.jsx("code",{className:"mx-1 rounded-full bg-[rgba(var(--ch-bg-surface),0.78)] px-2 py-0.5 font-mono text-[var(--color-text-primary)]",children:"npx llmtap doctor"}),"in the instrumented project to check the collector, SDK install, and local database path."]})]})]})]})]}),e.jsxs("div",{className:"space-y-5",children:[e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.1,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(k,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Export data"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Download all trace data for offline analysis, backup, or migration."}),e.jsxs("div",{className:"flex gap-3",children:[e.jsxs("button",{type:"button",onClick:()=>ee("json"),disabled:N,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(k,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:N?"Exporting...":"Export JSON"})]}),e.jsxs("button",{type:"button",onClick:()=>ee("csv"),disabled:N,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(k,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:N?"Exporting...":"Export CSV"})]})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.15,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(We,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Reset data"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Permanently delete all stored traces and spans. This action cannot be undone."}),e.jsx("button",{type:"button",onClick:()=>X(!0),disabled:s,className:"inline-flex items-center gap-2 rounded-full border border-[var(--color-error)]/24 bg-[var(--color-error)]/10 px-4 py-2.5 text-sm font-medium text-[var(--color-error)] transition-colors hover:border-[var(--color-error)]/36 hover:bg-[var(--color-error)]/16 disabled:cursor-not-allowed disabled:opacity-50",children:me?e.jsxs(e.Fragment,{children:[e.jsx(S,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("span",{children:"Data cleared"})]}):e.jsxs(e.Fragment,{children:[e.jsx(qe,{className:`h-4 w-4 ${s?"animate-spin":""}`}),e.jsx("span",{children:s?"Resetting...":"Reset all data"})]})})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.2,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(He,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Pricing override generator"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Build the SDK snippet for custom or private model pricing. These entries are not applied automatically inside the dashboard and they do not rewrite already captured trace costs."}),w.length>0&&e.jsx("div",{className:"mb-4 space-y-2",children:w.map((a,r)=>e.jsxs("div",{className:"flex items-center justify-between gap-3 rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.32)] px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-secondary)]",children:a.provider}),e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-primary)]",children:a.model})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-secondary)]",children:["$",a.inputCostPer1M,"/M in"]}),e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-secondary)]",children:["$",a.outputCostPer1M,"/M out"]}),e.jsx("button",{type:"button",onClick:()=>J(u=>u.filter((d,m)=>m!==r)),className:"rounded-lg border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] p-1.5 text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",children:e.jsx(re,{className:"h-3 w-3"})})]})]},`${a.provider}-${a.model}`))}),ue?e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-4",children:[e.jsx("input",{value:i.provider,onChange:a=>h(r=>({...r,provider:a.target.value})),placeholder:"Provider",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.model,onChange:a=>h(r=>({...r,model:a.target.value})),placeholder:"Model name",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.inputCostPer1M,onChange:a=>h(r=>({...r,inputCostPer1M:a.target.value})),placeholder:"Input $/M",type:"number",step:"0.01",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.outputCostPer1M,onChange:a=>h(r=>({...r,outputCostPer1M:a.target.value})),placeholder:"Output $/M",type:"number",step:"0.01",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"})]}),e.jsxs("div",{className:"mt-3 flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>{i.provider&&i.model&&i.inputCostPer1M&&i.outputCostPer1M&&(J(a=>[...a,{...i}]),c.success("Pricing snippet added",{description:`${i.provider}/${i.model} was added to the generated SDK snippet.`}),h({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""}),T(!1))},className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(S,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Add"})]}),e.jsxs("button",{type:"button",onClick:()=>{T(!1),h({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""})},className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(re,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Cancel"})]})]})]}):e.jsxs("button",{type:"button",onClick:()=>T(!0),className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(Qe,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Add pricing snippet"})]}),w.length>0&&e.jsxs("div",{className:"mt-4 rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"SDK code to paste into your app"}),e.jsx("p",{className:"mb-3 text-xs leading-relaxed text-[var(--color-text-secondary)]",children:"Put this next to your LLMTap initialization or provider setup so future traces use your custom prices."}),e.jsx("pre",{className:"font-mono text-xs leading-relaxed text-[var(--color-text-primary)]",children:`import { setPricing } from "@llmtap/sdk";
|
|
1
|
+
import{r as o,j as e,u as Ce,d as Se}from"./query-DVWnIZNd.js";import{c as p,v as oe,t as c,w as ke,x as Te,b as Pe,y as De,z as Re,A as Oe,C as Ae}from"./index-BCjwgtkq.js";import{G as Me}from"./GettingStartedPanel-Cn46fQ1w.js";import{A as Le,a as g,b as y,c as f}from"./accordion-BbWMmUmi.js";import{P as Ee,c as ae}from"./format-BdzpxHjW.js";import{S as $e,a as Fe,b as Ie,c as Ue,d as b}from"./select-Dsu3r0h-.js";import{j as Be,k as ze,l as le,m as ne,n as ce,o as ie,A as de,p as xe}from"./ui-BFiKdTjl.js";import{c as x}from"./motion-CSeNjKbZ.js";import{aa as Je,z as S,U as Ke,E as k,ab as We,R as qe,D as He,X as re,ac as Qe,ad as Ve,S as Ge,ae as _e,af as Xe}from"./icons-BOLUIAKd.js";const te=Be,Ye=ze,pe=o.forwardRef(({className:t,...s},l)=>e.jsx(xe,{className:p("fixed inset-0 z-50 bg-[rgba(var(--ch-bg-base),0.74)] backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",t),...s,ref:l}));pe.displayName=xe.displayName;const A=o.forwardRef(({className:t,...s},l)=>e.jsxs(Ye,{children:[e.jsx(pe,{}),e.jsx(le,{ref:l,className:p("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[24px] border border-[var(--border-default)] bg-[linear-gradient(180deg,rgba(var(--ch-bg-panel),0.98),rgba(var(--ch-bg-base),0.99))] p-6 shadow-[0_40px_100px_rgba(0,0,0,0.5)] backdrop-blur-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",t),...s})]}));A.displayName=le.displayName;const M=({className:t,...s})=>e.jsx("div",{className:p("flex flex-col gap-1.5 text-center sm:text-left",t),...s});M.displayName="AlertDialogHeader";const L=({className:t,...s})=>e.jsx("div",{className:p("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",t),...s});L.displayName="AlertDialogFooter";const E=o.forwardRef(({className:t,...s},l)=>e.jsx(ne,{ref:l,className:p("text-lg font-semibold text-[var(--color-text-primary)]",t),...s}));E.displayName=ne.displayName;const $=o.forwardRef(({className:t,...s},l)=>e.jsx(ce,{ref:l,className:p("text-sm text-[var(--color-text-secondary)]",t),...s}));$.displayName=ce.displayName;const F=o.forwardRef(({className:t,...s},l)=>e.jsx(de,{ref:l,className:p(oe(),t),...s}));F.displayName=de.displayName;const I=o.forwardRef(({className:t,...s},l)=>e.jsx(ie,{ref:l,className:p(oe({variant:"outline"}),t),...s}));I.displayName=ie.displayName;function se(t){if(t===0)return"0 B";const s=["B","KB","MB","GB"],l=Math.min(Math.floor(Math.log(t)/Math.log(1024)),s.length-1);return`${(t/Math.pow(1024,l)).toFixed(l===0?0:1)} ${s[l]}`}function j({label:t,value:s,mono:l}){return e.jsxs("div",{className:"flex items-center justify-between gap-4 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:t}),e.jsx("span",{className:`text-sm font-medium text-[var(--color-text-primary)] ${l?"font-mono":""}`,children:s})]})}function ca(){const t=Ce(),[s,l]=o.useState(!1),[me,U]=o.useState(!1),[N,B]=o.useState(!1),[he,z]=o.useState(null),[w,J]=o.useState([]),[ue,T]=o.useState(!1),[i,h]=o.useState({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""}),[v,be]=o.useState("30"),[ve,K]=o.useState(!1),[P,W]=o.useState(null),[q,H]=o.useState(!1),[D,ge]=o.useState(""),[R,ye]=o.useState("llmtap"),[Q,V]=o.useState(!1),[O,C]=o.useState(null),[G,_]=o.useState(!1),[fe,X]=o.useState(!1),[je,Y]=o.useState(!1),{data:n}=Se({queryKey:["db-info"],queryFn:Ae});async function Ne(){l(!0);try{await De(),U(!0),t.invalidateQueries(),c.success("Trace data cleared",{description:"The local collector database has been reset."}),setTimeout(()=>U(!1),3e3)}catch(a){c.error("Reset failed",{description:a instanceof Error?a.message:String(a)})}finally{l(!1)}}async function Z(a){H(!0);try{const r=await Re(a);W(r.deletedSpans),K(!0),t.invalidateQueries(),c.success("Retention applied",{description:r.deletedSpans>0?`Deleted ${r.deletedSpans} old spans.`:"No spans needed cleanup for the selected window."}),setTimeout(()=>{K(!1),W(null)},4e3)}catch(r){c.error("Retention failed",{description:r instanceof Error?r.message:String(r)})}finally{H(!1)}}async function ee(a){B(!0);try{const r=await Oe(a),u=new Blob([r],{type:a==="json"?"application/json":"text/csv"}),d=URL.createObjectURL(u),m=document.createElement("a");m.href=d,m.download=`llmtap-traces-${new Date().toISOString().slice(0,10)}.${a}`,document.body.appendChild(m),m.click(),document.body.removeChild(m),URL.revokeObjectURL(d),c.success(`Exported ${a.toUpperCase()}`,{description:"Trace data was downloaded successfully."})}catch(r){c.error("Export failed",{description:r instanceof Error?r.message:String(r)})}finally{B(!1)}}function we(a,r){navigator.clipboard.writeText(a).catch(()=>{}),z(r),c.success("Copied to clipboard",{description:"Database path copied."}),setTimeout(()=>z(null),2e3)}return e.jsxs(e.Fragment,{children:[e.jsxs(Ee,{eyebrow:"Control Panel",title:"Configure, export, and manage your local collector.",description:"This is the operational side of LLMTap: local storage, exports, retention, and recovery controls. Nothing here should feel cryptic.",aside:e.jsxs("div",{className:"insight-panel",children:[e.jsx(Pe,{}),e.jsx("div",{className:"mt-4 space-y-3",children:e.jsxs("div",{className:"rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"hud-label",children:"Database"}),e.jsx("div",{className:"mt-2 text-lg font-medium text-[var(--color-text-primary)]",children:n?se(n.sizeBytes):"..."}),e.jsxs("div",{className:"mt-1 text-sm text-[var(--color-text-secondary)]",children:[n?.spanCount??0," spans stored"]})]})})]}),children:[e.jsx(Me,{compact:!0}),e.jsxs("div",{className:"grid gap-5 xl:grid-cols-2",children:[e.jsxs("div",{className:"space-y-5",children:[e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(Je,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Database status"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(j,{label:"Size on disk",value:n?se(n.sizeBytes):"-"}),e.jsx(j,{label:"Total spans",value:String(n?.spanCount??0),mono:!0}),e.jsx(j,{label:"Total traces",value:String(n?.traceCount??0),mono:!0}),e.jsx(j,{label:"Journal mode",value:n?.walMode?.toUpperCase()??"-",mono:!0}),e.jsx(j,{label:"Data range",value:n?.oldestSpan&&n?.newestSpan?`${ae(n.oldestSpan)} to ${ae(n.newestSpan)}`:"No data"}),e.jsxs("div",{className:"flex items-center justify-between gap-4 rounded-[var(--radius-panel)] border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsx("span",{className:"text-sm text-[var(--color-text-secondary)]",children:"Storage path"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"max-w-[220px] truncate font-mono text-xs text-[var(--color-text-secondary)]",children:n?.path??"-"}),n?.path&&e.jsx("button",{type:"button",onClick:()=>we(n.path,"path"),className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] p-1.5 text-[var(--color-text-secondary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",children:he==="path"?e.jsx(S,{className:"h-3 w-3 text-[var(--color-accent)]"}):e.jsx(Ke,{className:"h-3 w-3"})})]})]})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.06,duration:.35},children:[e.jsxs("div",{className:"mb-5",children:[e.jsx("div",{className:"hud-label",children:"Settings FAQ"}),e.jsx("h2",{className:"mt-1 text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Before you change the collector"})]}),e.jsxs(Le,{defaultValue:["local-data"],multiple:!0,children:[e.jsxs(g,{value:"local-data",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What stays local on this machine?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"The collector database, exports, retention operations, replay tools, and diagnostics stay local first. LLMTap only sends traces outward when you explicitly export or forward them."})]}),e.jsxs(g,{value:"retention",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What happens when I apply retention?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Retention deletes stored spans older than the selected window immediately. If you need a rollback point, run a backup first and then apply retention."})]}),e.jsxs(g,{value:"backup-restore",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"When should I backup, export, or restore?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"Use export for analysis outside LLMTap, backup before aggressive cleanup or experiments, and restore when you need to return the collector to a known-good local state quickly."})]}),e.jsxs(g,{value:"otlp",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"Does OTLP forwarding make LLMTap cloud-only?"}),e.jsx(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:"No. LLMTap still runs locally. OTLP forwarding is an explicit send step for traces you choose to push into another backend like Tempo, Jaeger, Datadog, or Honeycomb."})]}),e.jsxs(g,{value:"empty-dashboard",className:"border-[var(--border-dim)]",children:[e.jsx(y,{className:"text-base text-[var(--color-text-primary)] hover:no-underline",children:"What do I do if the dashboard is still empty?"}),e.jsxs(f,{className:"leading-6 text-[var(--color-text-secondary)]",children:["Run one real model request from the app you wrapped, then refresh this page. If nothing appears, run",e.jsx("code",{className:"mx-1 rounded-full bg-[rgba(var(--ch-bg-surface),0.78)] px-2 py-0.5 font-mono text-[var(--color-text-primary)]",children:"npx llmtap doctor"}),"in the instrumented project to check the collector, SDK install, and local database path."]})]})]})]})]}),e.jsxs("div",{className:"space-y-5",children:[e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.1,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(k,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Export data"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Download all trace data for offline analysis, backup, or migration."}),e.jsxs("div",{className:"flex gap-3",children:[e.jsxs("button",{type:"button",onClick:()=>ee("json"),disabled:N,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(k,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:N?"Exporting...":"Export JSON"})]}),e.jsxs("button",{type:"button",onClick:()=>ee("csv"),disabled:N,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)] disabled:cursor-not-allowed disabled:opacity-50",children:[e.jsx(k,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:N?"Exporting...":"Export CSV"})]})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.15,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(We,{className:"h-4 w-4 text-[var(--color-text-primary)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Reset data"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Permanently delete all stored traces and spans. This action cannot be undone."}),e.jsx("button",{type:"button",onClick:()=>X(!0),disabled:s,className:"inline-flex items-center gap-2 rounded-full border border-[var(--color-error)]/24 bg-[var(--color-error)]/10 px-4 py-2.5 text-sm font-medium text-[var(--color-error)] transition-colors hover:border-[var(--color-error)]/36 hover:bg-[var(--color-error)]/16 disabled:cursor-not-allowed disabled:opacity-50",children:me?e.jsxs(e.Fragment,{children:[e.jsx(S,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("span",{children:"Data cleared"})]}):e.jsxs(e.Fragment,{children:[e.jsx(qe,{className:`h-4 w-4 ${s?"animate-spin":""}`}),e.jsx("span",{children:s?"Resetting...":"Reset all data"})]})})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.2,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(He,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Pricing override generator"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Build the SDK snippet for custom or private model pricing. These entries are not applied automatically inside the dashboard and they do not rewrite already captured trace costs."}),w.length>0&&e.jsx("div",{className:"mb-4 space-y-2",children:w.map((a,r)=>e.jsxs("div",{className:"flex items-center justify-between gap-3 rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] px-4 py-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"rounded-full border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.32)] px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.16em] text-[var(--color-text-secondary)]",children:a.provider}),e.jsx("span",{className:"font-mono text-sm text-[var(--color-text-primary)]",children:a.model})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-secondary)]",children:["$",a.inputCostPer1M,"/M in"]}),e.jsxs("span",{className:"font-mono text-xs text-[var(--color-text-secondary)]",children:["$",a.outputCostPer1M,"/M out"]}),e.jsx("button",{type:"button",onClick:()=>J(u=>u.filter((d,m)=>m!==r)),className:"rounded-lg border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.72)] p-1.5 text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--border-default)] hover:text-[var(--color-text-primary)]",children:e.jsx(re,{className:"h-3 w-3"})})]})]},`${a.provider}-${a.model}`))}),ue?e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-4",children:[e.jsx("input",{value:i.provider,onChange:a=>h(r=>({...r,provider:a.target.value})),placeholder:"Provider",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.model,onChange:a=>h(r=>({...r,model:a.target.value})),placeholder:"Model name",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.inputCostPer1M,onChange:a=>h(r=>({...r,inputCostPer1M:a.target.value})),placeholder:"Input $/M",type:"number",step:"0.01",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{value:i.outputCostPer1M,onChange:a=>h(r=>({...r,outputCostPer1M:a.target.value})),placeholder:"Output $/M",type:"number",step:"0.01",className:"rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"})]}),e.jsxs("div",{className:"mt-3 flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:()=>{i.provider&&i.model&&i.inputCostPer1M&&i.outputCostPer1M&&(J(a=>[...a,{...i}]),c.success("Pricing snippet added",{description:`${i.provider}/${i.model} was added to the generated SDK snippet.`}),h({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""}),T(!1))},className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(S,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Add"})]}),e.jsxs("button",{type:"button",onClick:()=>{T(!1),h({provider:"",model:"",inputCostPer1M:"",outputCostPer1M:""})},className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(re,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Cancel"})]})]})]}):e.jsxs("button",{type:"button",onClick:()=>T(!0),className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)]",children:[e.jsx(Qe,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Add pricing snippet"})]}),w.length>0&&e.jsxs("div",{className:"mt-4 rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"SDK code to paste into your app"}),e.jsx("p",{className:"mb-3 text-xs leading-relaxed text-[var(--color-text-secondary)]",children:"Put this next to your LLMTap initialization or provider setup so future traces use your custom prices."}),e.jsx("pre",{className:"font-mono text-xs leading-relaxed text-[var(--color-text-primary)]",children:`import { setPricing } from "@llmtap/sdk";
|
|
2
2
|
${w.map(a=>`setPricing("${a.provider}", "${a.model}", ${a.inputCostPer1M}, ${a.outputCostPer1M});`).join(`
|
|
3
3
|
`)}`})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.25,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(Ve,{className:"h-4 w-4 text-[var(--color-accent-2)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"Data retention"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Configure how long trace data is kept. Older traces will be automatically cleaned up."}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs($e,{value:v,onValueChange:a=>be(a),children:[e.jsx(Fe,{className:"w-[160px] rounded-2xl py-3",children:e.jsx(Ie,{})}),e.jsxs(Ue,{children:[e.jsx(b,{value:"7",children:"7 days"}),e.jsx(b,{value:"14",children:"14 days"}),e.jsx(b,{value:"30",children:"30 days"}),e.jsx(b,{value:"90",children:"90 days"}),e.jsx(b,{value:"365",children:"1 year"}),e.jsx(b,{value:"0",children:"Keep forever"})]})]}),e.jsx("button",{type:"button",onClick:async()=>{const a=parseInt(v,10);if(a>0){Y(!0);return}await Z(a)},disabled:q,className:"status-chip transition-colors hover:border-[var(--border-default)] hover:bg-[rgba(var(--ch-bg-surface),0.84)] disabled:cursor-not-allowed disabled:opacity-50",children:ve?e.jsxs(e.Fragment,{children:[e.jsx(S,{className:"h-3.5 w-3.5 text-[var(--color-accent)]"}),e.jsx("span",{children:P!==null&&P>0?`Cleaned ${P} spans`:"Applied"})]}):e.jsx("span",{children:q?"Applying...":"Apply now"})})]}),e.jsxs("p",{className:"mt-3 text-xs text-[var(--color-text-tertiary)]",children:["This immediately deletes spans older than the selected period. For automatic enforcement on every startup, use ",e.jsxs("code",{className:"rounded bg-[rgba(var(--ch-bg-surface),0.72)] px-1.5 py-0.5 font-mono text-[var(--color-text-secondary)]",children:["llmtap start --retention ",v]}),"."]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.27,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(Ge,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"OpenTelemetry Export"})]}),e.jsx("p",{className:"mb-4 text-sm text-[var(--color-text-secondary)]",children:"Export spans in OTLP format for Datadog, Grafana Tempo, Jaeger, Honeycomb, or any OTLP-compatible backend."}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("button",{type:"button",disabled:G,onClick:async()=>{_(!0);try{const a=await ke(1e3,R),r=new Blob([a],{type:"application/json"}),u=URL.createObjectURL(r),d=document.createElement("a");d.href=u,d.download="llmtap-export.otlp.json",document.body.appendChild(d),d.click(),document.body.removeChild(d),URL.revokeObjectURL(u),c.success("OTLP export downloaded",{description:"The collector export was saved as OTLP JSON."})}catch(a){c.error("Export failed",{description:a instanceof Error?a.message:String(a)})}finally{_(!1)}},className:"flex items-center gap-2 rounded-2xl border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/10 px-4 py-2.5 text-sm font-medium text-[var(--color-accent)] transition-colors hover:bg-[var(--color-accent)]/20",children:[e.jsx(k,{className:"h-3.5 w-3.5"}),G?"Exporting...":"Download OTLP JSON"]}),e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"Forward to OTLP endpoint"}),e.jsxs("div",{className:"flex flex-col gap-3 sm:flex-row",children:[e.jsx("input",{type:"text",value:D,onChange:a=>{ge(a.target.value),C(null)},placeholder:"http://localhost:4318/v1/traces",className:"flex-1 rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("input",{type:"text",value:R,onChange:a=>ye(a.target.value),placeholder:"service name",className:"w-32 rounded-xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-base),0.36)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-disabled)] focus:border-[var(--border-bright)] focus:outline-none"}),e.jsx("button",{type:"button",disabled:!D||Q,onClick:async()=>{V(!0),C(null);try{const a=await Te(D,{service:R});C(`Forwarded ${a.spanCount} spans`),c.success("OTLP forward complete",{description:`Forwarded ${a.spanCount} spans to the target endpoint.`})}catch(a){C(`Error: ${a instanceof Error?a.message:String(a)}`),c.error("OTLP forward failed",{description:a instanceof Error?a.message:String(a)})}finally{V(!1)}},className:"rounded-xl border border-[var(--color-accent)]/20 bg-[var(--color-accent)]/10 px-4 py-2 text-sm font-medium text-[var(--color-accent)] transition-colors hover:bg-[var(--color-accent)]/20 disabled:opacity-40",children:Q?"Sending...":"Send"})]}),O&&e.jsx("p",{className:`mt-2 text-xs ${O.startsWith("Error")?"text-[var(--color-text-primary)]":"text-[var(--color-accent)]"}`,children:O})]}),e.jsxs("p",{className:"text-xs text-[var(--color-text-tertiary)]",children:["CLI: ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-surface),0.72)] px-1.5 py-0.5 font-mono text-[var(--color-text-secondary)]",children:"llmtap export --format otlp --endpoint http://localhost:4318/v1/traces"})]})]})]}),e.jsxs(x.div,{className:"dashboard-shell rounded-[26px] px-5 py-5",initial:{opacity:0,y:16},animate:{opacity:1,y:0},transition:{delay:.3,duration:.35},children:[e.jsxs("div",{className:"mb-5 flex items-center gap-2",children:[e.jsx(_e,{className:"h-4 w-4 text-[var(--color-accent)]"}),e.jsx("h2",{className:"text-xl font-semibold tracking-[-0.04em] text-[var(--color-text-primary)]",children:"First-run help"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:[e.jsx(Xe,{className:"h-3.5 w-3.5 text-[var(--color-accent-2)]"}),"Where the wrap code belongs"]}),e.jsx("p",{className:"text-xs leading-relaxed text-[var(--color-text-secondary)]",children:"Edit the file in your app where you already create the provider client. That is usually a backend route, agent runner, worker, or script. You do not change code inside this dashboard."})]}),e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"How to verify the setup"}),e.jsxs("p",{className:"text-xs leading-relaxed text-[var(--color-text-secondary)]",children:["After you make one real model call, a new trace should appear on the Overview or Traces page within a few seconds. If nothing appears, run"," ",e.jsx("code",{className:"rounded bg-[rgba(var(--ch-bg-surface),0.72)] px-1.5 py-0.5 font-mono text-[var(--color-text-primary)]",children:"npx llmtap doctor"})," ","from the app you are instrumenting."]})]}),e.jsxs("div",{className:"rounded-2xl border border-[var(--border-dim)] bg-[rgba(var(--ch-bg-surface),0.74)] p-4",children:[e.jsx("div",{className:"mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]",children:"Useful local operations"}),e.jsx("pre",{className:"font-mono text-xs leading-relaxed text-[var(--color-text-primary)]",children:`npx llmtap doctor
|
|
4
4
|
npx llmtap backup
|