Skip to content

Rich dashboard viewer with tabs, token tracking, system prompt splitter, classic/enhanced mode toggle#2

Open
rachadaccoumeh wants to merge 1 commit into
ljw1004:mainfrom
rachadaccoumeh:main
Open

Rich dashboard viewer with tabs, token tracking, system prompt splitter, classic/enhanced mode toggle#2
rachadaccoumeh wants to merge 1 commit into
ljw1004:mainfrom
rachadaccoumeh:main

Conversation

@rachadaccoumeh

Copy link
Copy Markdown

Hello. thanks for this very helpful project.
I did use this project and it is very helpful. It just misses something. Make it more visually and directly filter things to make it easier. So here we are:

Replaces the minimal

Details tree renderer with a full-featured dashboard viewer while keeping the legacy tree as a toggleable option.
Changes

  • viewer.js: Complete rewrite (~49KB, 905 lines) with:
  • Enhanced/Classic mode toggle (persisted in localStorage, default Enhanced)
  • Summary stats bar (input/output/cache tokens, tool calls, turns, errors)
  • Conversation tab: collapsible turns with per-turn token chips (in/out/cache/tools), tool-use callouts, error highlights
  • System tab: auto-splits system prompt on markdown headers and <available_skills> blocks; renders skills as structured list with name, description, location
  • Tools tab: all tool declarations with JSON schema preview
  • Usage tab: stat cards + per-turn bar charts (input/cache_read/output) + system-section breakdown by char count
  • Raw tab: collapsible JSON tree per raw event
  • Dark/light theme toggle (persisted)
  • Classic mode defines window.buildNode for backward compat
  • index.ts: unchanged — reads viewer.js at trace-creation time via readFileSync
  • AGENTS.md, README.md: updated with viewer docs and dev workflow
  • Fixes: buildModel now skips [meta] requests for tools/system extraction; body background covers full viewport
    How it works
  • Zero external dependencies, no build step, works via file:// directly
  • JSONL parsed from trailing <!-- comment node
  • CSS injected via JS (<style id="otv-styles">) so it works both embedded and as external <script src="viewer.js">
  • Place viewer.js next to any .html trace to override the embedded viewer (no regeneration needed)
    Testing
  • Verified on 3 trace files (70KB, 793KB, 28MB with 150+ turns and 122 tool calls)
  • All tabs render correctly in both modes
  • npm run typecheck and npm run lint pass cleanly
  • No console errors

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant