npm - token-trace-manager - Versions diffs - 0.7.0 - Mend

token-trace-manager 0.7.0

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.

Files changed (30) hide show

package/.claude-plugin/marketplace.json +19 -0
package/.claude-plugin/plugin.json +18 -0
package/.mcp.json +8 -0
package/CHANGELOG.md +29 -0
package/LICENSE +21 -0
package/README.md +380 -0
package/bin/ttm.mjs +343 -0
package/commands/config.md +13 -0
package/commands/dashboard.md +7 -0
package/commands/link.md +12 -0
package/commands/setup.md +19 -0
package/commands/status.md +13 -0
package/lib/adapters.mjs +428 -0
package/lib/audit.mjs +238 -0
package/lib/config.mjs +135 -0
package/lib/daemon-client.mjs +139 -0
package/lib/daemon.mjs +614 -0
package/lib/db.mjs +444 -0
package/lib/link.mjs +152 -0
package/lib/mcp-server.mjs +275 -0
package/lib/otel-export.mjs +122 -0
package/lib/pricing.mjs +137 -0
package/lib/report-data.mjs +171 -0
package/lib/setup-snippets.mjs +201 -0
package/lib/traces-data.mjs +155 -0
package/lib/tui-config.mjs +429 -0
package/package.json +56 -0
package/templates/config.html +208 -0
package/templates/dashboard.html +629 -0
package/templates/traces.html +407 -0

package/templates/traces.html ADDED Viewed

@@ -0,0 +1,407 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>ttm — traces</title>
+<style>
+  :root {
+    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #211f1e;
+    --ink: #f2f1ec; --ink-2: #c3c2b7; --muted: #898781;
+    --grid: #2c2c2a; --baseline: #383835; --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", "JetBrains Mono", Menlo, Consolas, monospace;
+    --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
+    --c-anthropic: #3987e5; --c-openai: #199e70; --c-gemini: #c98500; --c-openrouter: #9085e9; --c-outro: #898781;
+  }
+  * { 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),
+      radial-gradient(1200px 400px at 50% -140px, rgba(57,135,229,0.07), transparent 70%),
+      var(--page);
+    color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.45;
+  }
+  .wrap { max-width: 1360px; 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: 16px; }
+  .brand { display: flex; align-items: baseline; gap: 10px; }
+  .brand .mark { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink); }
+  .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; }
+  .filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
+  .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--surface); }
+  .seg a { color: var(--ink-2); text-decoration: none; font-size: 12px; padding: 6px 13px; border-right: 1px solid var(--border); }
+  .seg a:last-child { border-right: 0; }
+  .seg a:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
+  .seg a.active { background: var(--accent-wash); color: var(--accent-dim); font-weight: 600; }
+  select, .filters input {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
+    color: var(--ink); padding: 6px 10px; font-size: 12px; font-family: var(--sans);
+  }
+  select:focus, .filters input:focus { outline: none; border-color: var(--accent); }
+  .count { color: var(--muted); font-size: 11px; font-family: var(--mono); margin-left: auto; }
+  details.session {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
+    margin-bottom: 10px; overflow: hidden;
+  }
+  details.session[open] { border-color: rgba(57,135,229,0.4); }
+  summary {
+    list-style: none; cursor: pointer; padding: 12px 16px;
+    display: grid; grid-template-columns: 16px minmax(120px, 1fr) 110px 150px 90px 170px 90px 110px;
+    gap: 12px; align-items: center;
+  }
+  summary::-webkit-details-marker { display: none; }
+  summary:hover { background: rgba(255,255,255,0.028); }
+  .tw { color: var(--muted); transition: transform 0.15s ease; font-size: 10px; }
+  details[open] .tw { transform: rotate(90deg); }
+  .s-label { font-family: var(--mono); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .s-label .none { color: var(--muted); font-weight: 400; }
+  .s-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
+  .s-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; white-space: nowrap; }
+  .s-num .dim, .dim { color: var(--muted); }
+  .provider { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
+  .provider .dot { width: 7px; height: 7px; border-radius: 50%; }
+  .msgs { border-top: 1px solid var(--grid); padding: 4px 16px 12px; overflow-x: auto; }
+  table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  th, td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
+  tbody tr:last-child td { border-bottom: 0; }
+  th { color: var(--muted); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; }
+  th:first-child, td:first-child { text-align: left; }
+  tr.call:hover td { background: rgba(255,255,255,0.028); }
+  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+  .flow { font-family: var(--mono); }
+  .flow .arr { color: var(--muted); margin: 0 4px; }
+  .pid { color: var(--muted); font-family: var(--mono); font-size: 10.5px; cursor: copy; }
+  .pid:hover { color: var(--accent-dim); }
+  .st { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
+  .st.err { background: var(--err); }
+  .empty { color: var(--muted); padding: 24px 4px; }
+  .note { color: var(--muted); font-size: 11px; margin: 10px 0 0; }
+  .view-btn {
+    background: none; border: 1px solid var(--border); border-radius: 5px;
+    color: var(--ink-2); cursor: pointer; font-size: 10.5px; padding: 3px 9px; font-family: var(--sans);
+  }
+  .view-btn:hover { border-color: var(--accent); color: var(--accent-dim); }
+  tr.payload-row td { background: var(--surface-2); padding: 0; }
+  .payload {
+    padding: 12px 16px; max-height: 460px; overflow: auto;
+    font-family: var(--mono); font-size: 11.5px; line-height: 1.55; text-align: left; white-space: pre-wrap; word-break: break-word;
+  }
+  .payload h4 { margin: 10px 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-dim); font-family: var(--sans); }
+  .payload h4:first-child { margin-top: 0; }
+  .payload .role { color: var(--warning); }
+  .payload .plain { color: var(--ink-2); }
+  #tip {
+    position: fixed; display: none; z-index: 10; pointer-events: none;
+    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
+    padding: 9px 12px; font-size: 11.5px; max-width: 380px;
+    box-shadow: 0 6px 24px rgba(0,0,0,0.55); font-family: var(--mono);
+  }
+  #tip .tv { font-weight: 700; font-size: 12.5px; color: var(--ink); }
+  #tip .tl { color: var(--muted); margin-top: 2px; }
+</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" class="active">Traces</a>
+      <a href="/config">Config</a>
+    </nav>
+  </div>
+  <div class="filters" id="filters">
+    <select id="f-target"><option value="">provedor: todos</option></select>
+    <select id="f-model"><option value="">modelo: todos</option></select>
+    <select id="f-client"><option value="">cliente: todos</option></select>
+    <input type="search" id="f-label" placeholder="tarefa (ex: PROJ-123)…" style="width:180px" />
+    <span class="count" id="count"></span>
+  </div>
+  <div id="sessions"></div>
+  <div id="tip"></div>
+</div>
+  <script id="report-data" type="application/json">"__REPORT_DATA__"</script>
+  <script>
+    const data = JSON.parse(document.getElementById('report-data').textContent)
+    function esc(s) {
+      return String(s).replace(/[&<>"']/g, c =>
+        ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c],
+      )
+    }
+    const nf = new Intl.NumberFormat('pt-BR')
+    function compact(n) {
+      n = n || 0
+      if (n >= 1e9) return (n / 1e9).toFixed(2).replace('.', ',') + 'B'
+      if (n >= 1e6) return (n / 1e6).toFixed(2).replace('.', ',') + 'M'
+      if (n >= 1e3) return (n / 1e3).toFixed(1).replace('.', ',') + 'k'
+      return nf.format(n)
+    }
+    const usd = n => '$' + (n || 0).toFixed(2)
+    const hm = ts => new Date(ts).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    const dm = ts => new Date(ts).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' })
+    const dur = ms => (ms < 60000 ? Math.round(ms / 1000) + 's' : Math.round(ms / 60000) + 'min')
+    const PC = { anthropic: 'var(--c-anthropic)', openai: 'var(--c-openai)', gemini: 'var(--c-gemini)', openrouter: 'var(--c-openrouter)' }
+    const pcolor = t => PC[t] || 'var(--c-outro)'
+    // ---- filtros (recarregam a página — o servidor refaz o recorte) ----
+    const params = new URLSearchParams(location.search)
+    const since = data.since || '24h'
+    const seg = document.createElement('div')
+    seg.className = 'seg'
+    for (const [val, text] of [['24h', 'Hoje'], ['7d', '7 dias'], ['30d', '30 dias'], ['all', 'Tudo']]) {
+      const a = document.createElement('a')
+      const p = new URLSearchParams(params)
+      p.set('since', val)
+      a.href = '?' + p.toString()
+      a.textContent = text
+      if (val === since) a.className = 'active'
+      seg.appendChild(a)
+    }
+    document.getElementById('filters').prepend(seg)
+    function fillSelect(id, options, param) {
+      const el = document.getElementById(id)
+      for (const o of options) {
+        const opt = document.createElement('option')
+        opt.value = o
+        opt.textContent = o
+        if (data.filters[param] === o) opt.selected = true
+        el.appendChild(opt)
+      }
+      el.addEventListener('change', () => {
+        const p = new URLSearchParams(location.search)
+        if (el.value) p.set(param, el.value)
+        else p.delete(param)
+        p.set('since', since)
+        location.search = p.toString()
+      })
+    }
+    fillSelect('f-target', data.filterOptions.targets, 'target')
+    fillSelect('f-model', data.filterOptions.models, 'model')
+    fillSelect('f-client', data.filterOptions.clients, 'client')
+    const fLabel = document.getElementById('f-label')
+    fLabel.value = data.filters.label ?? ''
+    fLabel.addEventListener('keydown', e => {
+      if (e.key !== 'Enter') return
+      const p = new URLSearchParams(location.search)
+      if (fLabel.value.trim()) p.set('label', fLabel.value.trim().toUpperCase())
+      else p.delete('label')
+      p.set('since', since)
+      location.search = p.toString()
+    })
+    document.getElementById('count').textContent =
+      `${data.sessionCount} sessões · ${data.callCount} mensagens no recorte` +
+      (data.truncated ? ` (mostrando ${data.sessions.length} sessões / ${data.callsShown} msgs)` : '')
+    // ---- tooltip (recibo do custo) ----
+    const tip = document.getElementById('tip')
+    function showTip(ev, lines) {
+      tip.replaceChildren(
+        ...lines.map(([cls, text]) => {
+          const d = document.createElement('div')
+          d.className = cls
+          d.textContent = text
+          return d
+        }),
+      )
+      tip.style.display = 'block'
+      const pad = 14
+      tip.style.left = Math.min(ev.clientX + pad, window.innerWidth - tip.offsetWidth - pad) + 'px'
+      tip.style.top = Math.min(ev.clientY + pad, window.innerHeight - tip.offsetHeight - pad) + 'px'
+    }
+    const hideTip = () => (tip.style.display = 'none')
+    // ---- sessões ----
+    const root = document.getElementById('sessions')
+    if (!data.sessions.length) {
+      root.innerHTML = '<div class="empty">Nenhuma sessão no recorte. Ajuste os filtros ou o período.</div>'
+    }
+    const callIndex = new Map() // "sid:idx" -> call
+    root.innerHTML = data.sessions
+      .map(s => {
+        const providers = s.targets
+          .map(t => `<span class="provider"><span class="dot" style="background:${pcolor(t)}"></span>${esc(t)}</span>`)
+          .join(' ')
+        const rows = s.calls
+          .map((c, j) => {
+            callIndex.set(`${s.id}:${j}`, c)
+            const lidos = c.input + c.cacheCreate + c.cacheRead
+            return `<tr class="call" data-k="${s.id}:${j}">
+              <td style="width:16px"><span class="st${c.status && c.status >= 400 ? ' err' : ''}"></span></td>
+              <td class="mono dim" style="font-size:11px">${hm(c.ts)}</td>
+              <td class="mono dim" style="font-size:11px">${esc(c.model ?? '?')}</td>
+              <td class="mono">${compact(c.input)}</td>
+              <td class="mono">${compact(c.cacheCreate)}${c.cacheCreate1h ? ' <span class="dim">1h</span>' : ''}</td>
+              <td class="mono">${compact(c.cacheRead)}</td>
+              <td class="mono" style="font-weight:600">${compact(c.output)}</td>
+              <td class="mono">${c.cost === null || c.cost === undefined ? '<span class="dim">s/ preço</span>' : usd(c.cost)}</td>
+              <td class="mono dim">${c.durationMs ? (c.durationMs / 1000).toFixed(1) + 's' : '—'}</td>
+              <td class="pid" data-pid="${esc(c.providerId ?? '')}" title="clique para copiar o id">${esc(c.providerId ?? '—')}</td>
+              <td>${c.payload ? `<button class="view-btn" data-id="${c.id}">conteúdo</button>` : '<span class="dim" style="font-size:10px">—</span>'}</td>
+            </tr>`
+          })
+          .join('')
+        return `<details class="session" ${data.sessions.length <= 3 ? 'open' : ''}>
+          <summary>
+            <span class="tw">▶</span>
+            <span class="s-label">${s.label ? esc(s.label) : '<span class="none">sem label</span>'}</span>
+            <span class="s-meta">${esc(s.client)}${s.repo ? ' · ' + esc(s.repo) + (s.branch ? '@' + esc(s.branch) : '') : ''}</span>
+            <span class="s-meta">${dm(s.start)} ${hm(s.start)} · ${dur(s.durationMs)}</span>
+            <span class="s-num">${nf.format(s.calls.length)} <span class="dim">msg</span></span>
+            <span class="s-num" title="${nf.format(s.tokensIn)} lidos / ${nf.format(s.tokensOut)} escritos">${compact(s.tokensIn)} <span class="dim">→</span> ${compact(s.tokensOut)}</span>
+            <span class="s-num">${usd(s.cost)}${s.costKnown ? '' : '*'}</span>
+            <span style="text-align:right">${providers}</span>
+          </summary>
+          <div class="msgs">
+            <table>
+              <thead><tr><th></th><th>Hora</th><th>Modelo</th><th>Entrada</th><th>Cache esc.</th><th>Cache lido</th><th>Saída</th><th>Custo</th><th>Dur.</th><th>ID no provedor</th><th></th></tr></thead>
+              <tbody>${rows}</tbody>
+            </table>
+          </div>
+        </details>`
+      })
+      .join('')
+    if (data.truncated) {
+      const n = document.createElement('div')
+      n.className = 'note'
+      n.textContent = `mostrando as ${data.sessions.length} sessões mais recentes — refine os filtros para ver o resto`
+      root.appendChild(n)
+    }
+    // recibo do custo no hover da mensagem
+    root.addEventListener('pointermove', e => {
+      const tr = e.target.closest('tr.call')
+      if (!tr) return hideTip()
+      const c = callIndex.get(tr.dataset.k)
+      if (!c) return hideTip()
+      const lines = [
+        ['tv', c.cost === null || c.cost === undefined ? 'custo indisponível (modelo sem preço)' : usd(c.cost)],
+        ['tl', (c.model ?? '?') + ' · ' + (c.client ?? '')],
+      ]
+      if (c.rates) {
+        const r = c.rates
+        const c1h = Math.min(c.cacheCreate1h, c.cacheCreate)
+        const c5m = c.cacheCreate - c1h
+        for (const [tok, rate, name] of [
+          [c.input, r.input, 'entrada'],
+          [c.cacheRead, r.cacheRead, 'cache lido'],
+          [c5m, r.cacheWrite5m, 'cache escrito 5m'],
+          [c1h, r.cacheWrite1h, 'cache escrito 1h'],
+          [c.output, r.output, 'saída'],
+        ]) {
+          if (tok > 0) lines.push(['tl', `${nf.format(tok)} × $${rate}/M = $${((tok / 1e6) * rate).toFixed(6)}  (${name})`])
+        }
+        lines.push(['tl', `tabela de preços de ${r.pricingDate}`])
+      } else {
+        lines.push(['tl', 'evento anterior ao recibo de taxas — sem decomposição'])
+      }
+      showTip(e, lines)
+    })
+    root.addEventListener('pointerleave', hideTip)
+    // "conteúdo": abre o payload da chamada (request/response) inline
+    function textOf(content) {
+      // content de mensagens pode ser string ou array de blocos
+      if (typeof content === 'string') return content
+      if (Array.isArray(content)) {
+        return content
+          .map(b => {
+            if (typeof b === 'string') return b
+            if (b?.type === 'text') return b.text ?? ''
+            if (b?.type === 'tool_result') return '[resultado de ferramenta]'
+            if (b?.type === 'tool_use') return `[chamada de ferramenta: ${b.name ?? '?'}]`
+            if (b?.type === 'image' || b?.type === 'input_image') return '[imagem]'
+            return `[${b?.type ?? 'bloco'}]`
+          })
+          .join('\n')
+      }
+      return content == null ? '' : JSON.stringify(content)
+    }
+    function renderPayload(container, p) {
+      const frag = document.createDocumentFragment()
+      const addH = txt => { const h = document.createElement('h4'); h.textContent = txt; frag.appendChild(h) }
+      const addP = (txt, cls) => {
+        const div = document.createElement('div')
+        if (cls) div.className = cls
+        div.textContent = txt
+        frag.appendChild(div)
+      }
+      const req = p.request ?? {}
+      if (req._truncado) addP(`request grande demais para armazenar (${req._bytes} bytes)`, 'plain')
+      const sys = textOf(req.system ?? (Array.isArray(req.input) ? null : undefined) ?? '')
+      if (sys) { addH('sistema'); addP(sys.length > 4000 ? sys.slice(0, 4000) + ' […]' : sys, 'plain') }
+      const msgs = req.messages ?? req.input ?? req.contents ?? []
+      if (Array.isArray(msgs) && msgs.length) {
+        addH(`mensagens (${msgs.length})`)
+        for (const m of msgs.slice(-30)) {
+          const role = m?.role ?? 'user'
+          const body = textOf(m?.content ?? m?.parts ?? m)
+          const div = document.createElement('div')
+          const r = document.createElement('span'); r.className = 'role'; r.textContent = role + ': '
+          div.appendChild(r); div.appendChild(document.createTextNode(body.length > 1500 ? body.slice(0, 1500) + ' […]' : body))
+          frag.appendChild(div)
+        }
+        if (msgs.length > 30) addP(`… ${msgs.length - 30} mensagens anteriores omitidas da visualização`, 'plain')
+      }
+      addH('resposta')
+      addP(p.response?.text ?? '(sem texto — só chamadas de ferramenta ou vazio)', 'plain')
+      container.replaceChildren(frag)
+    }
+    root.addEventListener('click', async e => {
+      const btn = e.target.closest('.view-btn')
+      if (!btn) return
+      const tr = btn.closest('tr')
+      const existing = tr.nextElementSibling
+      if (existing?.classList.contains('payload-row')) { existing.remove(); return }
+      const row = document.createElement('tr')
+      row.className = 'payload-row'
+      const td = document.createElement('td')
+      td.colSpan = tr.children.length
+      const box = document.createElement('div')
+      box.className = 'payload'
+      box.textContent = 'carregando…'
+      td.appendChild(box); row.appendChild(td)
+      tr.after(row)
+      try {
+        const res = await fetch(`/api/payload?id=${btn.dataset.id}`)
+        if (!res.ok) throw new Error((await res.json()).error)
+        renderPayload(box, await res.json())
+      } catch (err) {
+        box.textContent = 'erro: ' + err.message
+      }
+    })
+    // clique no id copia (para reconciliar com transcript/Console)
+    root.addEventListener('click', async e => {
+      const pid = e.target.closest('.pid')
+      if (!pid || !pid.dataset.pid) return
+      try {
+        await navigator.clipboard.writeText(pid.dataset.pid)
+        const old = pid.textContent
+        pid.textContent = 'copiado ✓'
+        setTimeout(() => (pid.textContent = old), 1200)
+      } catch {
+        /* clipboard indisponível */
+      }
+    })
+  </script>
+</body>
+</html>