traceforge/docs/example-report.html at main · Danultimate/traceforge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html><html><head><meta charset='utf-8'><title>TraceForge — true-elk</title><style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #0b1020; color: #e2e8f0; margin: 0; padding: 32px; }
.container { max-width: 1080px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 4px; }
.meta { color: #94a3b8; font-size: 13px; margin-bottom: 24px; }
.stats { display: flex; gap: 16px; flex-wrap: wrap; background: #111a35;
         border: 1px solid #1e293b; border-radius: 8px;
         padding: 16px; margin-bottom: 24px; }
.stat { display: flex; flex-direction: column; min-width: 110px; }
.stat .label { color: #94a3b8; font-size: 11px;
               text-transform: uppercase; letter-spacing: 0.05em; }
.stat .value { font-size: 18px; font-weight: 600; margin-top: 2px; }
.error-banner { background: #450a0a; border: 1px solid #991b1b;
                color: #fecaca; padding: 12px 16px; border-radius: 6px;
                margin-bottom: 16px; }
.span { background: #111a35; border: 1px solid #1e293b;
        border-left: 4px solid #4f46e5; border-radius: 6px;
        padding: 14px 16px; margin-bottom: 10px; }
.span.has-error { border-left-color: #dc2626; }
.span-header { display: flex; align-items: center; gap: 8px; }
.tag { font-size: 10px; padding: 2px 6px; border-radius: 3px;
       background: #1e293b; color: #94a3b8;
       text-transform: uppercase; letter-spacing: 0.05em; }
.name { font-weight: 600; color: #f1f5f9; }
.latency { color: #94a3b8; font-size: 12px; margin-left: auto; }
.detail { margin-top: 10px; font-size: 13px; color: #cbd5e1; }
.detail .row { margin: 4px 0; }
.detail .row .k { color: #94a3b8; display: inline-block; min-width: 92px; }
pre { background: #050816; border: 1px solid #1e293b; border-radius: 4px;
      padding: 10px 12px; color: #cbd5e1; font-size: 12px;
      overflow-x: auto; white-space: pre-wrap; word-break: break-word;
      max-height: 280px; overflow-y: auto; margin: 6px 0 0; }
.err-text { color: #fca5a5; }
details > summary { cursor: pointer; color: #94a3b8; font-size: 12px;
                    margin-top: 8px; }
footer { color: #64748b; font-size: 11px; text-align: center;
         margin-top: 32px; }
</style></head><body><div class='container'><h1>true-elk</h1><div class='meta'>01KS8EEEVS8ZPA1PCGXC0E349X · started 2026-05-22 18:16:31.865170 · TraceForge 0.2.0 (schema v1)</div><div class='stats'><div class='stat'><span class='label'>Duration</span><span class='value'>1ms</span></div><div class='stat'><span class='label'>Spans</span><span class='value'>6</span></div><div class='stat'><span class='label'>LLM calls</span><span class='value'>3</span></div><div class='stat'><span class='label'>Tool calls</span><span class='value'>2</span></div><div class='stat'><span class='label'>Tokens in</span><span class='value'>2280</span></div><div class='stat'><span class='label'>Tokens out</span><span class='value'>760</span></div><div class='stat'><span class='label'>Cost</span><span class='value'>$0.05</span></div><div class='stat'><span class='label'>Errors</span><span class='value'>0</span></div></div><div class='span' style='border-left-color:#4f46e5'><div class='span-header'><span class='tag' style='background:#4f46e5;color:white'>LLM</span><span class='name'>anthropic/claude-opus-4-7</span><span class='latency'>842ms</span></div><div class='detail'><div class='row'><span class='k'>provider</span>anthropic</div><div class='row'><span class='k'>model</span>claude-opus-4-7</div><div class='row'><span class='k'>tokens</span>1240 in / 380 out</div><div class='row'><span class='k'>cost</span>$0.05</div><details><summary>system prompt</summary><pre>You are a research planner. Output a 3-step plan as JSON.</pre></details><details><summary>messages</summary><pre>[
  {
    &quot;role&quot;: &quot;system&quot;,
    &quot;content&quot;: &quot;You are a research planner. Output a 3-step plan as JSON.&quot;
  },
  {
    &quot;role&quot;: &quot;user&quot;,
    &quot;content&quot;: &quot;Plan research on LLM agent observability frameworks&quot;
  }
]</pre></details><details open><summary>response</summary><pre>{&quot;steps&quot;: [&quot;Survey LangSmith / Helicone / Langfuse / OpenLLMetry&quot;, &quot;Compare span schemas and replay support&quot;, &quot;Summarise gaps and propose a minimal trace format&quot;]}</pre></details></div></div>
<div class='span' style='border-left-color:#0891b2'><div class='span-header'><span class='tag' style='background:#0891b2;color:white'>TOOL</span><span class='name'>parse_plan_json</span><span class='latency'>1ms</span></div><div class='detail'><div class='row'><span class='k'>tool</span>parse_plan_json</div><details><summary>input</summary><pre>{
  &quot;raw&quot;: &quot;{\&quot;steps\&quot;: [...]}&quot;
}</pre></details><details><summary>output</summary><pre>{
  &quot;steps&quot;: 3,
  &quot;parsed&quot;: true
}</pre></details></div></div>
<div class='span' style='border-left-color:#64748b'><div class='span-header'><span class='tag' style='background:#64748b;color:white'>CUSTOM</span><span class='name'>phase.research</span><span class='latency'>—</span></div><div class='detail'><details><summary>metadata</summary><pre>{
  &quot;step&quot;: 1,
  &quot;parallel&quot;: true
}</pre></details></div></div>
<div class='span' style='border-left-color:#4f46e5'><div class='span-header'><span class='tag' style='background:#4f46e5;color:white'>LLM</span><span class='name'>anthropic/claude-haiku-4-5</span><span class='latency'>190ms</span></div><div class='detail'><div class='row'><span class='k'>provider</span>anthropic</div><div class='row'><span class='k'>model</span>claude-haiku-4-5</div><div class='row'><span class='k'>tokens</span>620 in / 240 out</div><div class='row'><span class='k'>cost</span>$0.0018</div><details><summary>messages</summary><pre>[
  {
    &quot;role&quot;: &quot;user&quot;,
    &quot;content&quot;: &quot;For each tool, list strengths and limitations.&quot;
  }
]</pre></details><details open><summary>response</summary><pre>LangSmith: strong UI, vendor lock-in. Helicone: lightweight, less depth. Langfuse: OSS-first, growing ecosystem...</pre></details></div></div>
<div class='span has-error' style='border-left-color:#0891b2'><div class='span-header'><span class='tag' style='background:#0891b2;color:white'>TOOL</span><span class='name'>web_search</span><span class='latency'>2400ms</span></div><div class='detail'><div class='row err-text'><span class='k'>error</span>Connection timeout after 2.4s</div><div class='row'><span class='k'>tool</span>web_search</div><details><summary>input</summary><pre>{
  &quot;query&quot;: &quot;OpenLLMetry trace schema&quot;
}</pre></details></div></div>
<div class='span' style='border-left-color:#4f46e5'><div class='span-header'><span class='tag' style='background:#4f46e5;color:white'>LLM</span><span class='name'>openai/gpt-4o-mini</span><span class='latency'>520ms</span></div><div class='detail'><div class='row'><span class='k'>provider</span>openai</div><div class='row'><span class='k'>model</span>gpt-4o-mini</div><div class='row'><span class='k'>tokens</span>420 in / 140 out</div><div class='row'><span class='k'>cost</span>$0.0001</div><details><summary>messages</summary><pre>[
  {
    &quot;role&quot;: &quot;user&quot;,
    &quot;content&quot;: &quot;Synthesise findings into a final answer.&quot;
  }
]</pre></details><details open><summary>response</summary><pre>Across the four frameworks reviewed, the common gap is *replay*. None ship a deterministic re-execution loop with a mocked-LLM cache by default; most provide observability only. The minimal trace format proposed here records typed spans (LLM_CALL, TOOL_CALL, CUSTOM, ERROR) plus a manifest of aggregate counts, mirroring OTel conventions but with first-class LLM I/O and tool I/O slots.</pre></details></div></div><footer>Generated by TraceForge 0.2.0</footer></div></body></html>