Skip to content

feat(agents): Markdown toggle and token breakdown in Compare versions drawer - #353

Merged
cihanalagoz merged 1 commit into
mainfrom
ft/agent-compare-markdown-token-stats
Sep 29, 2026
Merged

cihanalagoz merged 1 commit into
mainfrom
ft/agent-compare-markdown-token-stats

Conversation

@Bor4brn

@Bor4brn Bor4brn commented Sep 29, 2026

Copy link
Copy Markdown
Contributor

Summary

The Compare versions drawer showed agent answers as raw text, so a structured answer (headings, lists, tables) was hard to read and compare. Its stats row showed only a total token count. This PR renders answers as Markdown by default, adds a toggle to switch to plain text, and adds an Input / Output / Cache token breakdown directly beneath the Tokens stat.

Changes

  • Markdown / Plain text toggle. Markdown is the default. One setting applies to both columns, so the two answers are always shown the same way, and it stays when you switch versions, press Reset, or close and reopen the drawer. User messages and error turns look the same as before.
  • Two-row stats. The first row is Latency, Cost, Tool calls and Tokens. Input, Output and Cache sit directly beneath Tokens, grouped by a divider. The layout responds to the column's width rather than the screen's, so in a narrow column the token group drops to its own full-width row.
  • Missing token data. A value that no answer reported shows — with a "Not reported by the model" tooltip, while a reported zero still shows 0. When an answer gives input and output but no total, the total is now calculated from them (before, the Tokens stat showed —). The Cache label's tooltip explains that cached tokens are already counted in Input.
  • Shared Markdown renderer. The session transcript's Markdown renderer is now a shared AgentMarkdown component, so both views look the same. It also brings back list bullets and numbers, which Tailwind's CSS reset was removing. The transcript had the same missing-bullets problem, so this fixes it there too.
  • Translations. All of the drawer's text, which was hard-coded English, now comes from the agents.compare translation keys in English and Turkish.
  • Scrollbar. The conversation scrollbar has its own space instead of covering the right edge of the message cards.
  • Tests. src/__tests__/unit/agent-compare-versions-stats.test.ts covers reading token usage from the response, "not reported" versus zero, the totals, the default display mode, and that Turkish has every English translation key.

Validation

  • npm run lint: 0 errors. There are 208 warnings elsewhere in the repo; none are in the changed files.
  • npx tsc --noEmit
  • Tests: ran the new test file and the related agent studio and session tests (84 passing). The full npm run test was not run.
  • npm run build
  • npm run docs:build: not run. No docs were changed.
  • Tested by hand at localhost against a real agent comparing v1 and v2: Markdown on and off, the stats layout, and the token breakdown.

Release Notes

  • Docs updated when behavior changed
  • Security-sensitive changes reviewed
  • License or policy files updated if repo-facing behavior changed

- Render agent responses as Markdown by default with a shared
  Markdown / Plain text toggle that applies to both columns and
  persists across version switches and resets.
- Reorganize stats into two rows: Latency, Cost, Tool calls and
  Tokens, with Input / Output / Cache directly beneath Tokens.
  Container-query layout stacks the token group on narrow columns.
- Show "—" for token values no answer reported, keeping reported
  zeros as 0; derive total from input + output when missing.
- Extract the transcript Markdown renderer into a shared
  AgentMarkdown component and restore list markers stripped by
  Tailwind preflight.
- Translate all drawer strings (en/tr).
- Add unit tests for usage parsing, totals and translation keys.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@Bor4brn
Bor4brn requested a review from a team September 29, 2026 12:34
@cihanalagoz
cihanalagoz merged commit 0691ffb into main Sep 29, 2026
5 checks passed
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.

2 participants