https://plataforma.bizzu.ai/assets/GestaoLlmObservabilidadePage-DtqvJOLv.js

1import{r,g as F,a as _,j as e,A as ee,L as $}from"./index-DJx_SGrm.js";import{C as k}from"./Card-CbP9CHZ-.js";var B;const E=((B=_.api)==null?void 0:B.baseUrl)||"https://api.bizzu.ai";function w(t){return t.toISOString().slice(0,10)}function te(t){const a=new Date;if(a.setHours(0,0,0,0),t==="hoje")return{start:a,end:new Date(a)};if(t==="ultimos7"){const n=new Date(a);return n.setDate(n.getDate()-6),n.setHours(0,0,0,0),{start:n,end:new Date(a)}}if(t==="esteMes"){const n=new Date(a.getFullYear(),a.getMonth(),1),l=new Date(a.getFullYear(),a.getMonth()+1,0);return l.setHours(0,0,0,0),{start:n,end:l}}return null}function J({status:t}){let a="bg-ds-surface-hover text-ds-text-secondary";return t==="success"?a="bg-ds-success-surface text-ds-success-text":t==="error"?a="bg-ds-danger-surface text-ds-danger-text":t==="retried"&&(a="bg-ds-warning-surface text-ds-warning-text"),e.jsx("span",{className:`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${a}`,children:t})}function se({trace:t}){const[a,n]=r.useState(!1),l=()=>{const i={model:t.model,stepName:t.stepName,status:t.status,createdAt:t.createdAt,latencyMs:t.latencyMs,promptTokens:t.promptTokens,completionTokens:t.completionTokens,estimatedCostUsd:Number(t.estimatedCost),systemInstruction:t.systemInstruction??null,prompt:t.prompt,response:t.response,errorMessage:t.errorMessage??null,metadata:t.metadata??null};navigator.clipboard.writeText(JSON.stringify(i,null,2)),n(!0),setTimeout(()=>n(!1),2e3)};return e.jsx("button",{type:"button",onClick:l,className:"rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel px-3 py-1.5 text-xs font-medium text-ds-text-secondary hover:bg-ds-surface-hover hover:text-ds-text-primary transition-colors",children:a?"✓ Copiado!":"Copiar JSON"})}function ae({trace:t,onClose:a,loading:n}){const l=ee(a);if(!t&&!n)return null;let i;return n?i=e.jsxs("div",{className:"flex flex-col items-center gap-3 py-8",children:[e.jsx($,{size:"lg"}),e.jsx("p",{className:"text-sm text-ds-text-secondary",children:"Carregando detalhes..."})]}):i=e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"grid gap-3 sm:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Step"}),e.jsx("p",{className:"mt-1 text-sm text-ds-text-primary",children:t.stepName})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Modelo"}),e.jsx("p",{className:"mt-1 text-sm text-ds-text-primary",children:t.model})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Status"}),e.jsx("div",{className:"mt-1",children:e.jsx(J,{status:t.status})})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Tokens"}),e.jsxs("p",{className:"mt-1 text-sm text-ds-text-primary [font-family:var(--ds-font-metric)]",children:[t.promptTokens," in / ",t.completionTokens," out"]})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Custo (USD)"}),e.jsxs("p",{className:"mt-1 text-sm text-ds-text-primary [font-family:var(--ds-font-metric)]",children:["$",Number(t.estimatedCost).toFixed(6)]})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Latência"}),e.jsxs("p",{className:"mt-1 text-sm text-ds-text-primary [font-family:var(--ds-font-metric)]",children:[t.latencyMs,"ms"]})]}),e.jsxs("div",{className:"sm:col-span-2",children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Data/Hora"}),e.jsx("p",{className:"mt-1 text-sm text-ds-text-primary [font-family:var(--ds-font-metric)]",children:new Date(t.createdAt).toLocaleString("pt-BR")})]})]}),t.systemInstruction&&e.jsxs("div",{children:[e.jsx("p",{className:"mb-1 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"System Instruction"}),e.jsx("pre",{className:"bg-ds-canvas rounded-[var(--ds-radius-control)] p-4 text-xs text-ds-text-secondary overflow-auto max-h-48 whitespace-pre-wrap",children:t.systemInstruction})]}),e.jsxs("div",{children:[e.jsx("p",{className:"mb-1 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Prompt"}),e.jsx("pre",{className:"bg-ds-canvas rounded-[var(--ds-radius-control)] p-4 text-xs text-ds-text-secondary overflow-auto max-h-64 whitespace-pre-wrap",children:t.prompt})]}),e.jsxs("div",{children:[e.jsx("p",{className:"mb-1 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Response"}),e.jsx("pre",{className:"bg-ds-canvas rounded-[var(--ds-radius-control)] p-4 text-xs text-ds-text-secondary overflow-auto max-h-64 whitespace-pre-wrap",children:t.response})]}),t.errorMessage&&e.jsxs("div",{children:[e.jsx("p",{className:"mb-1 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Erro"}),e.jsx("pre",{className:"bg-ds-danger-surface border border-ds-danger-border rounded-[var(--ds-radius-control)] p-4 text-xs text-ds-danger-text overflow-auto max-h-48 whitespace-pre-wrap",children:t.errorMessage})]}),t.metadata&&e.jsxs("div",{children:[e.jsx("p",{className:"mb-1 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Metadata"}),e.jsx("pre",{className:"bg-ds-canvas rounded-[var(--ds-radius-control)] p-4 text-xs text-ds-text-secondary overflow-auto max-h-48 whitespace-pre-wrap",children:JSON.stringify(t.metadata,null,2)})]})]}),e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/60",...l,children:e.jsxs("div",{className:"relative max-h-[80vh] w-full max-w-3xl overflow-auto rounded-[var(--ds-radius-card)] border border-ds-border bg-ds-panel p-6 shadow-[var(--ds-shadow-3)]",onClick:y=>y.stopPropagation(),children:[e.jsx("button",{type:"button",onClick:a,className:"absolute right-4 top-4 text-ds-text-secondary hover:text-ds-text-primary",children:"✕"}),e.jsxs("div",{className:"mb-4 flex items-center gap-3",children:[e.jsx("h2",{className:"text-lg font-bold text-ds-text-primary ",children:"Detalhes do Trace"}),t&&e.jsx(se,{trace:t})]}),i]})})}function ne(){const[t,a]=r.useState("dashboard"),[n,l]=r.useState(()=>w(new Date)),[i,y]=r.useState(()=>w(new Date)),[o,S]=r.useState(null),[Y,C]=r.useState(!0),[A,j]=r.useState(null),[x,D]=r.useState(null),[G,T]=r.useState(!1),[P,g]=r.useState(null),[m,p]=r.useState(1),[v,V]=r.useState(""),[u,q]=r.useState("all"),[z,M]=r.useState(null),[I,N]=r.useState(!1),O=r.useCallback(async()=>{const s=F();if(!s.Authorization){j("Não autenticado."),C(!1);return}C(!0),j(null);try{const d=await fetch(`${E}/gestao/llm-traces/dashboard?from=${n}&to=${i}`,{headers:s});if(!d.ok){const b=await d.json().catch(()=>({}));j(b.message||"Erro ao carregar dashboard."),S(null);return}const c=await d.json();S(c)}catch{j("Falha ao conectar. Tente novamente."),S(null)}finally{C(!1)}},[n,i]),H=r.useCallback(async()=>{const s=F();if(!s.Authorization){g("Não autenticado."),T(!1);return}T(!0),g(null);try{const d=new URLSearchParams({page:String(m),limit:"50"});v&&d.set("stepName",v),u&&u!=="all"&&d.set("status",u),d.set("from",n),d.set("to",i);const c=await fetch(`${E}/gestao/llm-traces?${d}`,{headers:s});if(!c.ok){const Z=await c.json().catch(()=>({}));g(Z.message||"Erro ao carregar traces."),D(null);return}const b=await c.json();D(b)}catch{g("Falha ao conectar. Tente novamente."),D(null)}finally{T(!1)}},[m,v,u,n,i]),K=r.useCallback(async s=>{const d=F();if(d.Authorization){N(!0);try{const c=await fetch(`${E}/gestao/llm-traces/${s}`,{headers:d});if(c.ok){const b=await c.json();M(b)}}catch{}finally{N(!1)}}},[]);r.useEffect(()=>{O()},[O]),r.useEffect(()=>{t==="traces"&&H()},[t,H]);const L=s=>{const d=te(s);d&&(l(w(d.start)),y(w(d.end)),p(1))},Q=s=>{M(null),N(!0),K(s)},W=r.useMemo(()=>!o||!o.byStep?[]:o.byStep.map(s=>

1s.stepName),[o]),R=x?Math.ceil(x.total/x.limit):1,U=s=>{const d="rounded-[var(--ds-radius-control)] px-4 py-2 text-sm font-medium transition-colors";return t===s?`${d} bg-ds-accent text-white`:`${d} border border-ds-border-subtle bg-ds-panel text-ds-text-secondary hover:bg-ds-surface-hover hover:text-ds-text-primary`};let h;Y?h=e.jsxs("div",{className:"mt-8 flex flex-col items-center gap-3 py-8",children:[e.jsx($,{size:"lg"}),e.jsx("p",{className:"text-sm text-ds-text-secondary",children:"Carregando dashboard..."})]}):A?h=e.jsx("div",{className:"mt-8 rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel px-4 py-3 text-sm text-ds-text-secondary",children:A}):o?h=e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",children:[e.jsxs(k,{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Total de chamadas"}),e.jsx("p",{className:"mt-2 text-2xl font-bold text-ds-text-primary [font-family:var(--ds-font-metric)]",children:o.totalCalls})]}),e.jsxs(k,{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Custo acumulado (USD)"}),e.jsxs("p",{className:"mt-2 text-2xl font-bold text-ds-text-primary [font-family:var(--ds-font-metric)]",children:["$",o.totalCost.toFixed(4)]})]}),e.jsxs(k,{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Latência média"}),e.jsxs("p",{className:"mt-2 text-2xl font-bold text-ds-text-primary [font-family:var(--ds-font-metric)]",children:[o.avgLatencyMs,"ms"]})]}),e.jsxs(k,{children:[e.jsx("p",{className:"text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Taxa de erro"}),e.jsxs("p",{className:"mt-2 text-2xl font-bold text-ds-text-primary [font-family:var(--ds-font-metric)]",children:[(o.errorRate*100).toFixed(1),"%"]})]})]}),o.byStep&&o.byStep.length>0&&e.jsxs("div",{className:"mt-6",children:[e.jsx("h2",{className:"text-lg font-bold text-ds-text-primary ",children:"Por Step"}),e.jsx("div",{className:"mt-4 overflow-x-auto rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel",children:e.jsxs("table",{className:"w-full min-w-[480px] text-left text-sm",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-ds-border-subtle",children:[e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Step"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Chamadas"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Tokens"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Custo (USD)"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Latência Média (ms)"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Erros"})]})}),e.jsx("tbody",{children:o.byStep.map(s=>e.jsxs("tr",{className:"border-b border-ds-border-subtle last:border-0",children:[e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.stepName}),e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.calls}),e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.tokens}),e.jsxs("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:["$",Number(s.cost).toFixed(4)]}),e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.avgLatencyMs}),e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.errorCount})]},s.stepName))})]})})]})]}):h=null;let f;G?f=e.jsxs("div",{className:"mt-8 flex flex-col items-center gap-3 py-8",children:[e.jsx($,{size:"lg"}),e.jsx("p",{className:"text-sm text-ds-text-secondary",children:"Carregando traces..."})]}):P?f=e.jsx("div",{className:"mt-8 rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel px-4 py-3 text-sm text-ds-text-secondary",children:P}):x&&x.data?f=e.jsxs("div",{className:"mt-6",children:[e.jsx("div",{className:"mt-4 overflow-x-auto rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel",children:e.jsxs("table",{className:"w-full min-w-[480px] text-left text-sm",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-ds-border-subtle",children:[e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Data/Hora"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Step"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Modelo"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Tokens (In)"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Tokens (Out)"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Custo"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Latência"}),e.jsx("th",{className:"px-4 py-3 text-xs font-medium text-ds-text-tertiary uppercase tracking-wide",children:"Status"})]})}),e.jsx("tbody",{children:x.data.map(s=>e.jsxs("tr",{onClick:()=>Q(s.id),className:"border-b border-ds-border-subtle last:border-0 cursor-pointer hover:bg-ds-surface-hover",children:[e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:new Date(s.createdAt).toLocaleStr

1ing("pt-BR")}),e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.stepName}),e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.model}),e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.promptTokens}),e.jsx("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:s.completionTokens}),e.jsxs("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:["$",Number(s.estimatedCost).toFixed(4)]}),e.jsxs("td",{className:"px-4 py-3 text-sm text-ds-text-secondary [font-family:var(--ds-font-metric)]",children:[s.latencyMs,"ms"]}),e.jsx("td",{className:"px-4 py-3 text-sm",children:e.jsx(J,{status:s.status})})]},s.id))})]})}),e.jsxs("div",{className:"mt-4 flex items-center justify-between",children:[e.jsx("button",{type:"button",disabled:m<=1,onClick:()=>p(s=>s-1),className:"rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel px-3 py-2 text-sm font-medium text-ds-text-secondary hover:bg-ds-surface-hover hover:text-ds-text-primary disabled:opacity-50",children:"Anterior"}),e.jsxs("span",{className:"text-sm text-ds-text-secondary",children:["Página ",m," de ",R]}),e.jsx("button",{type:"button",disabled:m>=R,onClick:()=>p(s=>s+1),className:"rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel px-3 py-2 text-sm font-medium text-ds-text-secondary hover:bg-ds-surface-hover hover:text-ds-text-primary disabled:opacity-50",children:"Próximo"})]})]}):f=null;const X=z||I;return e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-ds-text-primary ",children:"LLM Observabilidade"}),e.jsx("p",{className:"mt-2 text-sm text-ds-text-secondary",children:"Monitoramento de chamadas LLM, custos e performance."}),e.jsxs("div",{className:"mt-6 flex flex-wrap items-end gap-4",children:[e.jsxs("div",{children:[e.jsx("label",{htmlFor:"llm-obs-start",className:"block text-xs font-medium text-ds-text-tertiary uppercase tracking-wide mb-1",children:"Data inicial"}),e.jsx("input",{id:"llm-obs-start",type:"date",value:n,onChange:s=>l(s.target.value),className:"rounded-[var(--ds-radius-control)] border border-ds-border bg-ds-surface px-3 py-2 text-sm text-ds-text-primary [font-family:var(--ds-font-metric)]"})]}),e.jsxs("div",{children:[e.jsx("label",{htmlFor:"llm-obs-end",className:"block text-xs font-medium text-ds-text-tertiary uppercase tracking-wide mb-1",children:"Data final"}),e.jsx("input",{id:"llm-obs-end",type:"date",value:i,onChange:s=>y(s.target.value),className:"rounded-[var(--ds-radius-control)] border border-ds-border bg-ds-surface px-3 py-2 text-sm text-ds-text-primary [font-family:var(--ds-font-metric)]"})]}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{type:"button",onClick:()=>L("hoje"),className:"rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel px-3 py-2 text-sm font-medium text-ds-text-secondary hover:bg-ds-surface-hover hover:text-ds-text-primary",children:"Hoje"}),e.jsx("button",{type:"button",onClick:()=>L("ultimos7"),className:"rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel px-3 py-2 text-sm font-medium text-ds-text-secondary hover:bg-ds-surface-hover hover:text-ds-text-primary",children:"Últimos 7 dias"}),e.jsx("button",{type:"button",onClick:()=>L("esteMes"),className:"rounded-[var(--ds-radius-control)] border border-ds-border-subtle bg-ds-panel px-3 py-2 text-sm font-medium text-ds-text-secondary hover:bg-ds-surface-hover hover:text-ds-text-primary",children:"Este mês"})]})]}),e.jsxs("div",{className:"mt-6 flex gap-2",children:[e.jsx("button",{type:"button",onClick:()=>

1a("dashboard"),className:U("dashboard"),children:"Dashboard"}),e.jsx("button",{type:"button",onClick:()=>a("traces"),className:U("traces"),children:"Traces"})]}),t==="dashboard"&&h,t==="traces"&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mt-6 flex flex-wrap items-end gap-4",children:[e.jsxs("div",{children:[e.jsx("label",{htmlFor:"llm-step-filter",className:"block text-xs font-medium text-ds-text-tertiary uppercase tracking-wide mb-1",children:"Step"}),e.jsxs("select",{id:"llm-step-filter",value:v,onChange:s=>{V(s.target.value),p(1)},className:"rounded-[var(--ds-radius-control)] border border-ds-border bg-ds-surface px-3 py-2 text-sm text-ds-text-primary [font-family:var(--ds-font-metric)]",children:[e.jsx("option",{value:"",children:"Todos"}),W.map(s=>e.jsx("option",{value:s,children:s},s))]})]}),e.jsxs("div",{children:[e.jsx("label",{htmlFor:"llm-status-filter",className:"block text-xs font-medium text-ds-text-tertiary uppercase tracking-wide mb-1",children:"Status"}),e.jsxs("select",{id:"llm-status-filter",value:u,onChange:s=>{q(s.target.value),p(1)},className:"rounded-[var(--ds-radius-control)] border border-ds-border bg-ds-surface px-3 py-2 text-sm text-ds-text-primary [font-family:var(--ds-font-metric)]",children:[e.jsx("option",{value:"all",children:"Todos"}),e.jsx("option",{value:"success",children:"success"}),e.jsx("option",{value:"error",children:"error"}),e.jsx("option",{value:"retried",children:"retried"})]})]})]}),f]}),X&&e.jsx(ae,{trace:z,loading:I,onClose:()=>{M(null),N(!1)}})]})}export{ne as GestaoLlmObservabilidadePage};