token-trace-manager 0.7.0

package/lib/tui-config.mjs

@@ -0,0 +1,429 @@
+// Discovery e rewrite da config de cada TUI, para o `ttm link <tui>`.
+//
+// Princípio: o ttm descobre a base URL que o TUI JÁ usa (env var ou arquivo
+// de config), vira upstream dela, e reescreve a config do TUI pra apontar pro
+// ttm — um comando, sem editar config.json à mão. Assim, quem já redireciona
+// o Claude Code pra um compatível-anthropic da z.ai/GLM continua batendo lá,
+// só que com contagem de tokens no meio.
+//
+// O protocolo é propriedade do TUI (dialeto que ele EMITE), não do upstream:
+// mesmo apontando pra z.ai, o Claude Code continua emitindo Messages →
+// protocol 'anthropic'. Isso resolve a incerteza de protocolo do redirect.
+
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+
+export const AUTOLINKABLE_TUIS = ['claude-code', 'codex', 'opencode', 'gemini-cli']
+
+// Default upstream quando o TUI não tem redirect prévio (aponta pro vendor
+// real daquele TUI). Usado só pra registrar o target — não é batido em teste.
+const DEFAULT_UPSTREAM = {
+  'claude-code': 'https://api.anthropic.com',
+  codex: 'https://api.openai.com',
+  opencode: 'https://api.anthropic.com', // opencode fala Anthropic por default
+  'gemini-cli': 'https://generativelanguage.googleapis.com',
+}
+
+// ---------------------------------------------------------------------------
+// helpers de JSON settings (claude-code, opencode)
+// ---------------------------------------------------------------------------
+
+function readJsonFile(p) {
+  try {
+    return JSON.parse(fs.readFileSync(p, 'utf8'))
+  } catch {
+    return null
+  }
+}
+
+function writeJsonAtomic(p, obj) {
+  fs.mkdirSync(path.dirname(p), { recursive: true })
+  const tmp = p + '.tmp'
+  fs.writeFileSync(tmp, JSON.stringify(obj, null, 2))
+  try {
+    fs.renameSync(tmp, p)
+  } catch {
+    // Windows: rename sobre existente pode falhar (EPERM) — fallback
+    try { fs.unlinkSync(p) } catch {}
+    fs.renameSync(tmp, p)
+  }
+}
+
+function settingsEnvRead(filePath, key) {
+  const j = readJsonFile(filePath)
+  return j?.env?.[key] ?? null
+}
+
+function settingsEnvSet(filePath, key, value) {
+  const j = readJsonFile(filePath) ?? {}
+  if (!j.env || typeof j.env !== 'object') j.env = {}
+  j.env[key] = value
+  writeJsonAtomic(filePath, j)
+}
+
+function settingsEnvRemove(filePath, key) {
+  const j = readJsonFile(filePath)
+  if (!j?.env) return
+  delete j.env[key]
+  writeJsonAtomic(filePath, j)
+}
+
+// ---------------------------------------------------------------------------
+// TOML mínimo (codex ~/.codex/config.toml) — só o necessário p/ base_url
+// ---------------------------------------------------------------------------
+
+function parseTomlSections(text) {
+  // Retorna [{ header, body, start }]; header '' = top-level.
+  const lines = text.split('\n')
+  const sections = []
+  let cur = { header: '', body: [], start: 0 }
+  sections.push(cur)
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const m = /^\s*\[([^\]]+)\]\s*$/.exec(line)
+    if (m) {
+      cur = { header: m[1], body: [], start: i }
+      sections.push(cur)
+    } else {
+      cur.body.push(line)
+    }
+  }
+  return sections
+}
+
+function tomlTopLevelKey(text, key) {
+  for (const line of text.split('\n')) {
+    const m = new RegExp(`^\\s*${key}\\s*=\\s*"([^"]*)"\\s*$`).exec(line)
+    if (m) return m[1]
+  }
+  return null
+}
+
+function tomlSectionKey(text, section, key) {
+  const sections = parseTomlSections(text)
+  const s = sections.find(x => x.header === section)
+  if (!s) return null
+  for (const line of s.body) {
+    const m = new RegExp(`^\\s*${key}\\s*=\\s*"([^"]*)"\\s*$`).exec(line)
+    if (m) return m[1]
+  }
+  return null
+}
+
+function tomlSetSectionKey(text, section, key, value) {
+  const sections = parseTomlSections(text)
+  const s = sections.find(x => x.header === section)
+  if (!s) {
+    // cria a seção no fim
+    const prefix = text && !text.endsWith('\n') ? '\n' : ''
+    return text + `${prefix}[${section}]\n${key} = "${value}"\n`
+  }
+  // procura a linha do key dentro do body e substitui
+  const lines = text.split('\n')
+  let inSection = false
+  let sectionStart = -1
+  let keyLineIdx = -1
+  for (let i = 0; i < lines.length; i++) {
+    const m = /^\s*\[([^\]]+)\]\s*$/.exec(lines[i])
+    if (m) {
+      inSection = m[1] === section
+      if (inSection && sectionStart === -1) sectionStart = i
+      continue
+    }
+    if (inSection) {
+      const km = new RegExp(`^(\\s*)${key}\\s*=\\s*".*"\\s*$`).exec(lines[i])
+      if (km) {
+        keyLineIdx = i
+        break
+      }
+    }
+  }
+  if (keyLineIdx >= 0) {
+    lines[keyLineIdx] = `${key} = "${value}"`
+    return lines.join('\n')
+  }
+  // insere logo após o header da seção
+  if (sectionStart >= 0) {
+    lines.splice(sectionStart + 1, 0, `${key} = "${value}"`)
+    return lines.join('\n')
+  }
+  return text
+}
+
+function tomlRemoveSectionKey(text, section, key) {
+  const lines = text.split('\n')
+  let inSection = false
+  const out = []
+  for (const line of lines) {
+    const m = /^\s*\[([^\]]+)\]\s*$/.exec(line)
+    if (m) {
+      inSection = m[1] === section
+      out.push(line)
+      continue
+    }
+    if (inSection && new RegExp(`^\\s*${key}\\s*=\\s*".*"\\s*$`).exec(line)) continue
+    out.push(line)
+  }
+  return out.join('\n')
+}
+
+// ---------------------------------------------------------------------------
+// Discovery por TUI
+// ---------------------------------------------------------------------------
+
+export function discoverTui(tui, { cwd = process.cwd() } = {}) {
+  if (!AUTOLINKABLE_TUIS.includes(tui)) {
+    return { supported: false, tui }
+  }
+
+  if (tui === 'claude-code') {
+    const envVar = 'ANTHROPIC_BASE_URL'
+    const authEnv = process.env.ANTHROPIC_AUTH_TOKEN ? 'ANTHROPIC_AUTH_TOKEN' : 'ANTHROPIC_API_KEY'
+    const repoPath = path.join(cwd, '.claude', 'settings.json')
+    const globalPath = path.join(os.homedir(), '.claude', 'settings.json')
+    if (process.env[envVar]) {
+      return {
+        tui,
+        baseUrl: process.env[envVar],
+        source: 'env',
+        canWriteBack: false,
+        writeTarget: null,
+        repoWriteTarget: repoPath,
+        envVar,
+        authEnv,
+        protocol: 'anthropic',
+        defaultUpstream: DEFAULT_UPSTREAM[tui],
+      }
+    }
+    const repoVal = settingsEnvRead(repoPath, envVar)
+    if (repoVal) {
+      return {
+        tui,
+        baseUrl: repoVal,
+        source: 'settings-repo',
+        canWriteBack: true,
+        writeTarget: repoPath,
+        repoWriteTarget: repoPath,
+        envVar,
+        authEnv,
+        protocol: 'anthropic',
+        defaultUpstream: DEFAULT_UPSTREAM[tui],
+      }
+    }
+    const globalVal = settingsEnvRead(globalPath, envVar)
+    if (globalVal) {
+      return {
+        tui,
+        baseUrl: globalVal,
+        source: 'settings-global',
+        canWriteBack: true,
+        writeTarget: globalPath,
+        repoWriteTarget: repoPath,
+        envVar,
+        authEnv,
+        protocol: 'anthropic',
+        defaultUpstream: DEFAULT_UPSTREAM[tui],
+      }
+    }
+    return {
+      tui,
+      baseUrl: null,
+      source: 'default',
+      canWriteBack: true,
+      writeTarget: globalPath,
+      repoWriteTarget: repoPath,
+      envVar,
+      authEnv,
+      protocol: 'anthropic',
+      defaultUpstream: DEFAULT_UPSTREAM[tui],
+    }
+  }
+
+  if (tui === 'codex') {
+    const p = path.join(os.homedir(), '.codex', 'config.toml')
+    const envVar = 'OPENAI_BASE_URL'
+    const authEnv = 'OPENAI_API_KEY'
+    // 1) env var (Codex honors OPENAI_BASE_URL em alguns setups)
+    if (process.env[envVar]) {
+      return {
+        tui, baseUrl: process.env[envVar], source: 'env', canWriteBack: false,
+        writeTarget: null, repoWriteTarget: null, envVar, authEnv,
+        protocol: 'openai', defaultUpstream: DEFAULT_UPSTREAM[tui],
+      }
+    }
+    let txt = ''
+    try {
+      txt = fs.readFileSync(p, 'utf8')
+    } catch {
+      return {
+        tui, baseUrl: null, source: 'default', canWriteBack: true,
+        writeTarget: p, repoWriteTarget: null, envVar, authEnv,
+        protocol: 'openai', defaultUpstream: DEFAULT_UPSTREAM[tui],
+      }
+    }
+    const active = tomlTopLevelKey(txt, 'model_provider')
+    let section = active ? `model_providers.${active}` : null
+    if (!section) {
+      // primeira seção model_providers.* que aparecer
+      const m = /\[model_providers\.([^.\]]+)\]/.exec(txt)
+      section = m ? `model_providers.${m[1]}` : null
+    }
+    const base = section ? tomlSectionKey(txt, section, 'base_url') : null
+    return {
+      tui,
+      baseUrl: base ?? null,
+      source: base ? 'config.toml' : 'default',
+      canWriteBack: Boolean(section),
+      writeTarget: p,
+      repoWriteTarget: null,
+      envVar,
+      authEnv,
+      protocol: 'openai',
+      defaultUpstream: DEFAULT_UPSTREAM[tui],
+      tomlSection: section,
+    }
+  }
+
+  if (tui === 'opencode') {
+    const envVar = null
+    const authEnv = null
+    const repoPath = path.join(cwd, 'opencode.json')
+    const globalPath = path.join(os.homedir(), '.config', 'opencode', 'opencode.json')
+    const tryFile = (p) => {
+      const j = readJsonFile(p)
+      if (!j?.provider) return null
+      for (const [name, prov] of Object.entries(j.provider)) {
+        const base = prov?.options?.baseURL
+        if (base) return { name, base, file: p }
+      }
+      return null
+    }
+    const found = tryFile(repoPath) || tryFile(globalPath)
+    if (found) {
+      return {
+        tui,
+        baseUrl: found.base,
+        source: 'opencode.json',
+        canWriteBack: true,
+        writeTarget: found.file,
+        repoWriteTarget: repoPath,
+        envVar,
+        authEnv,
+        protocol: found.name === 'openai' ? 'openai' : 'anthropic',
+        defaultUpstream: DEFAULT_UPSTREAM[tui],
+        opencodeProvider: found.name,
+      }
+    }
+    return {
+      tui,
+      baseUrl: null,
+      source: 'default',
+      canWriteBack: true,
+      writeTarget: repoPath,
+      repoWriteTarget: repoPath,
+      envVar,
+      authEnv,
+      protocol: 'anthropic',
+      defaultUpstream: DEFAULT_UPSTREAM[tui],
+      opencodeProvider: 'anthropic',
+    }
+  }
+
+  if (tui === 'gemini-cli') {
+    const envVar = 'GOOGLE_GEMINI_BASE_URL'
+    const authEnv = 'GEMINI_API_KEY'
+    const val = process.env[envVar]
+    return {
+      tui,
+      baseUrl: val ?? null,
+      source: val ? 'env' : 'default',
+      canWriteBack: false, // gemini-cli é só-env: ttm não pode persistir
+      writeTarget: null,
+      repoWriteTarget: null,
+      envVar,
+      authEnv,
+      protocol: 'gemini',
+      defaultUpstream: DEFAULT_UPSTREAM[tui],
+    }
+  }
+
+  return { supported: false, tui }
+}
+
+// ---------------------------------------------------------------------------
+// Rewrite (escrever nova base URL no TUI) — só quando canWriteBack
+// ---------------------------------------------------------------------------
+
+export function writeTuiBaseUrl(tui, newUrl, { writeTarget, cwd = process.cwd() } = {}) {
+  if (tui === 'claude-code') {
+    settingsEnvSet(writeTarget, 'ANTHROPIC_BASE_URL', newUrl)
+    return { ok: true, writeTarget }
+  }
+  if (tui === 'codex') {
+    const d = discoverTui(tui, { cwd })
+    const section = d.tomlSection || 'model_providers.ttm'
+    let txt = ''
+    try {
+      txt = fs.readFileSync(writeTarget, 'utf8')
+    } catch {
+      txt = `model_provider = "ttm"\n\n[${section}]\nname = "OpenAI via ttm"\nwire_api = "responses"\nenv_key = "OPENAI_API_KEY"\n`
+    }
+    txt = tomlSetSectionKey(txt, section, 'base_url', newUrl)
+    fs.mkdirSync(path.dirname(writeTarget), { recursive: true })
+    fs.writeFileSync(writeTarget, txt)
+    return { ok: true, writeTarget }
+  }
+  if (tui === 'opencode') {
+    const d = discoverTui(tui, { cwd })
+    const prov = d.opencodeProvider || 'anthropic'
+    const j = readJsonFile(writeTarget) ?? {}
+    if (!j.provider || typeof j.provider !== 'object') j.provider = {}
+    if (!j.provider[prov]) j.provider[prov] = { options: {} }
+    if (!j.provider[prov].options) j.provider[prov].options = {}
+    j.provider[prov].options.baseURL = newUrl
+    writeJsonAtomic(writeTarget, j)
+    return { ok: true, writeTarget, provider: prov }
+  }
+  return { ok: false, reason: 'TUI só-env (use o export impresso)' }
+}
+
+export function restoreTuiBaseUrl(tui, { original, source, writeTarget, cwd = process.cwd() } = {}) {
+  if (source === 'env' || source === 'default' && !writeTarget) {
+    return { ok: false, reason: 'fonte só-env/default — não dá pra restaurar via arquivo' }
+  }
+  if (tui === 'claude-code') {
+    if (original === null) settingsEnvRemove(writeTarget, 'ANTHROPIC_BASE_URL')
+    else settingsEnvSet(writeTarget, 'ANTHROPIC_BASE_URL', original)
+    return { ok: true, writeTarget }
+  }
+  if (tui === 'codex') {
+    const d = discoverTui(tui, { cwd })
+    const section = d.tomlSection
+    if (!section) return { ok: false, reason: 'seção do provider não encontrada' }
+    let txt = ''
+    try {
+      txt = fs.readFileSync(writeTarget, 'utf8')
+    } catch {
+      return { ok: false, reason: 'config.toml sumiu' }
+    }
+    if (original === null) txt = tomlRemoveSectionKey(txt, section, 'base_url')
+    else txt = tomlSetSectionKey(txt, section, 'base_url', original)
+    fs.writeFileSync(writeTarget, txt)
+    return { ok: true, writeTarget }
+  }
+  if (tui === 'opencode') {
+    const j = readJsonFile(writeTarget) ?? {}
+    const prov = j.provider ? Object.keys(j.provider)[0] : null
+    if (!prov) return { ok: false, reason: 'sem provider' }
+    if (original === null) {
+      delete j.provider[prov].options?.baseURL
+    } else {
+      if (!j.provider[prov].options) j.provider[prov].options = {}
+      j.provider[prov].options.baseURL = original
+    }
+    writeJsonAtomic(writeTarget, j)
+    return { ok: true, writeTarget, provider: prov }
+  }
+  return { ok: false, reason: 'TUI não-escritável' }
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "token-trace-manager",
+  "version": "0.7.0",
+  "private": false,
+  "type": "module",
+  "description": "Proxy local universal de rastreio de tokens de LLM para TUIs de código (Claude Code, Codex, OpenCode, Gemini CLI, Kilo...), com labels por tarefa, dashboard local e auto-link que preserva redirects prévios (z.ai/GLM/...).",
+  "license": "MIT",
+  "author": {
+    "name": "Mpaape",
+    "url": "https://github.com/Mpaape"
+  },
+  "homepage": "https://github.com/cloud104/token-trace-manager",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud104/token-trace-manager.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cloud104/token-trace-manager/issues"
+  },
+  "keywords": [
+    "tokens",
+    "llm",
+    "proxy",
+    "cost",
+    "dashboard",
+    "jira",
+    "mcp",
+    "claude-code",
+    "codex",
+    "opencode",
+    "gemini-cli",
+    "kilo",
+    "observability"
+  ],
+  "bin": {
+    "ttm": "bin/ttm.mjs"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "commands",
+    "templates",
+    ".claude-plugin",
+    ".mcp.json",
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node test/e2e.mjs",
+    "prepublishOnly": "npm test"
+  },
+  "engines": {
+    "node": ">=22.5"
+  }
+}

package/templates/config.html

@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>ttm — config</title>
+<style>
+  :root {
+    --page: #0d0d0d; --surface: #1a1a19; --ink: #f2f1ec; --ink-2: #c3c2b7; --muted: #898781;
+    --grid: #2c2c2a; --border: rgba(255,255,255,0.09);
+    --accent: #3987e5; --accent-dim: #86b6ef; --accent-wash: rgba(57,135,229,0.13);
+    --warning: #fab219; --good: #0ca30c; --err: #e66767;
+    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
+    --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
+  }
+  * { box-sizing: border-box; }
+  html { color-scheme: dark; }
+  body {
+    margin: 0;
+    background:
+      repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
+      var(--page);
+    color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.5;
+  }
+  .wrap { max-width: 860px; margin: 0 auto; padding: 0 28px 56px; }
+  .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
+  .brand .mark { font-family: var(--mono); font-weight: 700; font-size: 15px; }
+  .brand .mark::before { content: "▮▯▮ "; color: var(--accent); letter-spacing: -0.12em; margin-right: 2px; }
+  .nav { display: flex; gap: 4px; }
+  .nav a { color: var(--muted); text-decoration: none; font-size: 12px; padding: 5px 12px; border-radius: 6px; }
+  .nav a:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
+  .nav a.active { color: var(--accent-dim); background: var(--accent-wash); font-weight: 600; }
+  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
+  .card h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
+  p { color: var(--ink-2); margin: 6px 0; }
+  .hint { color: var(--muted); font-size: 12px; }
+  input[type="number"] {
+    background: var(--page); border: 1px solid var(--border); border-radius: 7px;
+    color: var(--ink); padding: 7px 10px; font-size: 13px; width: 110px; font-family: var(--mono);
+  }
+  input:focus { outline: none; border-color: var(--accent); }
+  button {
+    background: var(--accent-wash); border: 1px solid rgba(57,135,229,0.5); border-radius: 7px;
+    color: var(--accent-dim); padding: 7px 16px; font-size: 12.5px; cursor: pointer; font-family: var(--sans);
+  }
+  button:hover { background: rgba(57,135,229,0.22); color: var(--ink); }
+  button.danger { background: rgba(230,103,103,0.1); border-color: rgba(230,103,103,0.45); color: var(--err); }
+  button.danger:hover { background: rgba(230,103,103,0.2); }
+  button.ghost { background: none; border-color: var(--border); color: var(--ink-2); }
+  .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
+  .fb { font-size: 12px; font-family: var(--mono); }
+  .fb.ok { color: var(--good); }
+  .fb.err { color: var(--err); }
+  dl { display: grid; grid-template-columns: 190px 1fr; gap: 6px 14px; margin: 0; font-size: 12.5px; }
+  dt { color: var(--muted); }
+  dd { margin: 0; font-family: var(--mono); color: var(--ink-2); word-break: break-all; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="topbar">
+    <div class="brand"><span class="mark">ttm</span></div>
+    <nav class="nav">
+      <a href="/dashboard">Visão geral</a>
+      <a href="/traces">Traces</a>
+      <a href="/config" class="active">Config</a>
+    </nav>
+  </div>
+
+  <div class="card">
+    <h2>Retenção dos traces</h2>
+    <p>Traces detalhados (mensagem a mensagem) são mantidos pelo período abaixo. Ao expirar, cada trace é <strong>somado no histórico diário por tarefa</strong> e só então apagado — o total pro seu ticket nunca se perde, só o detalhe.</p>
+    <div class="row">
+      <label for="ret">manter por</label>
+      <input type="number" id="ret" min="0" max="8760" step="1" />
+      <span class="hint">horas (0 = nunca apagar)</span>
+      <button id="save-ret">salvar</button>
+      <span class="fb" id="ret-fb"></span>
+    </div>
+    <div class="row">
+      <button class="ghost" id="purge-now">rodar limpeza da retenção agora</button>
+      <span class="fb" id="purge-fb"></span>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>Conteúdo das chamadas</h2>
+    <p>Com isto ligado, request/response de cada chamada ficam em JSONs locais (<code>payloads/</code>) e a página Traces mostra o que houve dentro da sessão, mensagem a mensagem. Seguem a <strong>mesma retenção</strong> dos traces. Chaves de API nunca são gravadas.</p>
+    <div class="row">
+      <label><input type="checkbox" id="store-payloads" /> armazenar conteúdo das chamadas</label>
+      <span class="fb" id="sp-fb"></span>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>Apagar dados</h2>
+    <p class="hint">Ações imediatas e irreversíveis — o proxy continua funcionando normalmente depois.</p>
+    <div class="row">
+      <button class="danger" id="del-events">apagar todos os traces (mantém o histórico por tarefa)</button>
+      <button class="danger" id="del-everything">apagar TUDO (traces + histórico)</button>
+      <span class="fb" id="del-fb"></span>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>Resumo da configuração</h2>
+    <dl id="summary"></dl>
+    <p class="hint" style="margin-top:12px">Arquivo: <code>~/.claude/plugins/data/token-trace-manager/config.json</code> — porta, targets, pricing.override.json e export OTel/Langfuse são editados lá (ver README).</p>
+  </div>
+</div>
+
+  <script id="report-data" type="application/json">"__REPORT_DATA__"</script>
+  <script>
+    const cfg = JSON.parse(document.getElementById('report-data').textContent)
+
+    document.getElementById('ret').value = cfg.retentionHours
+    const sp = document.getElementById('store-payloads')
+    sp.checked = cfg.storePayloads
+    sp.addEventListener('change', async () => {
+      try {
+        const r = await post('/api/settings', { storePayloads: sp.checked })
+        fb('sp-fb', r.storePayloads ? 'ligado' : 'desligado — novos payloads não serão gravados', true)
+      } catch (e) {
+        sp.checked = !sp.checked
+        fb('sp-fb', e.message, false)
+      }
+    })
+
+    const dl = document.getElementById('summary')
+    const rows = [
+      ['versão', 'v' + cfg.version],
+      ['porta', String(cfg.port) + ' (só 127.0.0.1)'],
+      ['retenção de traces', cfg.retentionHours === 0 ? 'nunca apagar' : cfg.retentionHours + 'h'],
+      ['label padrão', cfg.defaultLabel ?? '(nenhum)'],
+      ['conteúdo das chamadas', cfg.storePayloads ? 'armazenado (payloads/, segue a retenção)' : 'desligado'],
+      ['injeção include_usage', cfg.injectUsage ? 'ligada' : 'desligada'],
+      ['export OTel/Langfuse', cfg.otelOn ? 'ligado' : 'desligado (nenhum byte sai da máquina)'],
+      ['targets', Object.entries(cfg.targets).map(([k, t]) => `/${k} → ${t.targetUrl}`).join('\n')],
+    ]
+    for (const [k, v] of rows) {
+      const dt = document.createElement('dt')
+      dt.textContent = k
+      const dd = document.createElement('dd')
+      dd.textContent = v
+      dd.style.whiteSpace = 'pre-line'
+      dl.append(dt, dd)
+    }
+
+    function fb(id, msg, ok) {
+      const el = document.getElementById(id)
+      el.textContent = msg
+      el.className = 'fb ' + (ok ? 'ok' : 'err')
+      setTimeout(() => (el.textContent = ''), 4000)
+    }
+
+    async function post(path, body) {
+      const res = await fetch(path, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json.error || 'HTTP ' + res.status)
+      return json
+    }
+
+    document.getElementById('save-ret').addEventListener('click', async () => {
+      const hours = Number(document.getElementById('ret').value)
+      try {
+        const r = await post('/api/retention', { hours })
+        fb('ret-fb', r.retentionHours === 0 ? 'salvo: nunca apagar' : `salvo: ${r.retentionHours}h`, true)
+      } catch (e) {
+        fb('ret-fb', e.message, false)
+      }
+    })
+
+    document.getElementById('purge-now').addEventListener('click', async () => {
+      try {
+        const r = await post('/api/purge', { mode: 'expired' })
+        fb('purge-fb', r.note ?? `${r.purged} trace(s) agregados e apagados`, true)
+      } catch (e) {
+        fb('purge-fb', e.message, false)
+      }
+    })
+
+    document.getElementById('del-events').addEventListener('click', async () => {
+      if (!confirm('Apagar TODOS os traces detalhados? O histórico agregado por tarefa é mantido.')) return
+      try {
+        const r = await post('/api/purge', { mode: 'events' })
+        fb('del-fb', `${r.deleted} registro(s) apagados`, true)
+      } catch (e) {
+        fb('del-fb', e.message, false)
+      }
+    })
+
+    document.getElementById('del-everything').addEventListener('click', async () => {
+      if (!confirm('Apagar TUDO — traces E histórico por tarefa? Não tem volta.')) return
+      if (!confirm('Confirmação final: apagar todo o banco de uso?')) return
+      try {
+        const r = await post('/api/purge', { mode: 'everything' })
+        fb('del-fb', `${r.deleted} registro(s) apagados`, true)
+      } catch (e) {
+        fb('del-fb', e.message, false)
+      }
+    })
+  </script>
+</body>
+</html>