/* global React, Icon */
/* ============================================================
DetailPanel — drawer do agente
Tabs: Visão geral · Execuções · Prompt (versionado+diff) ·
Modelo · MCPs (teste de conexão simulado)
============================================================ */
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;
const Icon = window.Icon;
const TraceView = window.TraceView, Badge = window.Badge;
// ---- LCS line diff ----
function lineDiff(oldT, newT) {
const a = oldT.split("\n"), b = newT.split("\n");
const m = a.length, n = b.length;
const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
for (let i = m - 1; i >= 0; i--) for (let j = n - 1; j >= 0; j--)
dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
const out = []; let i = 0, j = 0;
while (i < m && j < n) {
if (a[i] === b[j]) { out.push({ t: "ctx", text: a[i] }); i++; j++; }
else if (dp[i + 1][j] >= dp[i][j + 1]) { out.push({ t: "del", text: a[i] }); i++; }
else { out.push({ t: "add", text: b[j] }); j++; }
}
while (i < m) out.push({ t: "del", text: a[i++] });
while (j < n) out.push({ t: "add", text: b[j++] });
return out;
}
const diffCounts = (d) => ({ add: d.filter((x) => x.t === "add").length, del: d.filter((x) => x.t === "del").length });
const nowStamp = () => {
const d = new Date();
const p = (x) => String(x).padStart(2, "0");
return `${p(d.getDate())}/${p(d.getMonth() + 1)}/${d.getFullYear()} ${p(d.getHours())}:${p(d.getMinutes())}`;
};
function seedVersions(agent) {
return agent.versions.map((ver, idx) => {
let text = agent.prompt;
if (idx > 0) {
const ls = agent.prompt.split("\n");
let removed = 0;
for (let k = ls.length - 1; k >= 0 && removed < idx; k--) { if (ls[k].trim()) { ls.splice(k, 1); removed++; } }
text = ls.join("\n");
}
return { ...ver, text };
});
}
// ---------- small UI bits ----------
function StatTile({ t, label, value, sub, icon, valueColor }) {
return (
{label}
{value}
{sub &&
{sub}
}
);
}
function ResultRow({ r, t }) {
const dot = window.AgentData.STATUS[r.status].orb;
return (
{r.title}
{r.time}
{r.summary}
{window.AgentData.fmtTokens(r.tokens)} tok
{r.dur}
);
}
// ---------- TABS ----------
function OverviewTab({ agent, t }) {
const { fmtBRL, fmtTokens, fmtNum, STATUS } = window.AgentData;
const m = agent.metrics;
const isLocal = agent.llm === "llama";
const sucColor = STATUS[agent.status].orb;
return (
Resultados recentes
ver tudo
{agent.recent.map((r, i) => )}
);
}
function RunsTab({ agent, t, dark }) {
const { fmtBRL, fmtTokens, TRACES } = window.AgentData;
const [open, setOpen] = useStateP(agent.runs[0] ? agent.runs[0].id : null);
useEffectP(() => setOpen(agent.runs[0] ? agent.runs[0].id : null), [agent.id]);
const trace = TRACES[agent.id] || [];
return (
Histórico de execuções de hoje. Clique numa linha para abrir o trace passo a passo — cada chamada de modelo e MCP, com tokens e onde falhou.
ExecuçãoGatilhoDuraçãoTokensStatus
{agent.runs.map((r) => {
const S = window.AgentData.STATUS[r.status];
const isOpen = open === r.id;
return (
setOpen(isOpen ? null : r.id)} style={{ display: "grid", gridTemplateColumns: "1.25fr 1.5fr 0.7fr 0.8fr 0.7fr 18px", padding: "11px 12px", fontSize: 11.5, alignItems: "center", cursor: "pointer", background: isOpen ? t.trayBg : "transparent" }}>
{r.id}
{r.trigger}
{r.dur}
{fmtTokens(r.tokens)}
{S.label}
{isOpen && (
TRACE · {r.id}custo {fmtBRL(r.cost)} · {trace.length} passos
)}
);
})}
);
}
function PlaygroundTab({ agent, t, dark }) {
const { LLMS } = window.AgentData;
const SAMPLES = {
nf: "NF-e 35260412345678000190550010000004121000004120\nFornecedor: Distribuidora Souza LTDA\nValor total: R$ 4.218,90 · CFOP 5102 · ICMS 18%",
concilia: "Extrato 12/04: -R$ 1.250,00 · PIX FORNECEDOR X\nLançamento ERP: NF 412 · R$ 1.250,00 · 11/04\nConta sugerida?",
triagem: "Currículo: João Silva · 5 anos em contabilidade fiscal,\nCRC ativo, Excel avançado, experiência com SPED.\nVaga: Analista Contábil Pleno",
contratos: "Contratar: Maria Andrade · CLT · R$ 4.200,00\nCargo: Analista Fiscal Jr · início 01/07/2026 · Campinas",
atendimento: "Cliente: \"Meu DAS do Simples venceu ontem, o que faço agora? Tem multa?\"",
};
const OUT = {
nf: '{ "tipo": "NFe", "chave": "3526…4120", "cfop": "5102",\n "valor_total": 4218.90, "icms": 759.40,\n "operacao": "entrada/mercadoria", "divergencias": [] }',
concilia: '{ "match": true, "confianca": 0.94,\n "conta": "1.1.02 · Bancos", "diferenca_dias": 1,\n "acao": "conciliar_automatico" }',
triagem: '{ "score": 88, "recomendacao": "avançar",\n "fortes": ["SPED", "CRC ativo"], "lacunas": ["IFRS"],\n "vies_detectado": false }',
contratos: '{ "template": "CLT", "clausulas": 12, "lgpd": true,\n "status": "minuta_para_revisao",\n "proximo": "aprovacao_humana" }',
atendimento: '{ "resposta": "Há multa de 0,33%/dia + juros Selic.\n Posso emitir a guia atualizada?", "escalar": true,\n "registro_crm": "ok" }',
};
const [input, setInput] = useStateP(SAMPLES[agent.id]);
const [cmp, setCmp] = useStateP("single");
const [phase, setPhase] = useStateP("idle");
useEffectP(() => { setInput(SAMPLES[agent.id]); setPhase("idle"); }, [agent.id]);
const run = () => { setPhase("running"); setTimeout(() => setPhase("done"), 1300); };
const cur = LLMS[agent.llm], fb = LLMS[agent.fallback];
const ResultCard = ({ model, label, variant }) => {
const out = OUT[agent.id];
return (
{model.name}
{label && {label}}
{out}
{variant === "b" ? "3,4k" : "2,9k"} tok·{variant === "b" ? (model.costOut === 0 ? "R$ 0,00" : "R$ 0,04") : (model.costOut === 0 ? "R$ 0,00" : "R$ 0,03")}·{variant === "b" ? "1,8 s" : "1,1 s"}
);
};
return (
Rode o agente com uma entrada de exemplo sem afetar produção. Compare versões de prompt ou modelos lado a lado antes de promover.
Entrada de exemplo