Skip to content

feat(studio): improve test details view layout#1017

Merged
christso merged 2 commits intomainfrom
feat/1014-studio-test-details-layout
Apr 9, 2026
Merged

feat(studio): improve test details view layout#1017
christso merged 2 commits intomainfrom
feat/1014-studio-test-details-layout

Conversation

@christso
Copy link
Copy Markdown
Collaborator

@christso christso commented Apr 9, 2026

Closes #1014

Summary

  • Scores moved into Checks tab — score summary (overall ScoreBar) and per-evaluator scores are now only visible when the Checks tab is active; they no longer appear when browsing Files or Feedback.
  • Tabs at the top — tab navigation is now immediately below a compact header, so the Monaco editor in the Files tab fills most of the screen.
  • Grader name pill on assertion cards — when per-evaluator assertion data is available, assertions are grouped by evaluator and each card shows the evaluator type as a small pill (e.g. llm-grader, is-json).
  • Compact header — shows testId, target, duration, and cost without cluttering the top with score bars.

Red / Green UAT

Red (before): Scores and evaluator score cards were rendered outside the tabs, appearing in every tab (Files, Feedback). Tabs appeared below a large score section, leaving little room for the editor. No grader name on assertion cards.

Green (after): Scores only appear in Checks tab. Tabs are at top. Files tab editor fills the full height. Assertion cards show a GraderPill badge on the right.

christso and others added 2 commits April 9, 2026 08:21
- Move scores/evaluator score cards inside Checks tab (hidden from other tabs)
- Put tab navigation at the top so Files tab editor fills maximum height
- Add grader-name pill to each assertion card (shows evaluator type)
- Group assertions by evaluator when per-score assertion data is available
- Compact header shows testId + metadata without score bars

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying agentv with  Cloudflare Pages  Cloudflare Pages

Latest commit: 2a8548e
Status: ✅  Deploy successful!
Preview URL: https://c82e0a83.agentv.pages.dev
Branch Preview URL: https://feat-1014-studio-test-detail.agentv.pages.dev

View logs

@christso
Copy link
Copy Markdown
Collaborator Author

christso commented Apr 9, 2026

E2E Verification

Red (before — main, port 3001)

Score summary + Evaluator Scores cards rendered above the Checks/Files tabs. Tabs buried halfway down the panel.

red-before

Key observations:

  • Score card appears before tab navigation
  • "Evaluator Scores" section appears before tabs
  • Files tab would also show the score cards (they're outside the tab area)

Green (after — worktree, port 3002)

Checks tab: Tabs at top → "Overall score" + "Evaluator Scores" cards inside tab → assertions grouped under LLM-GRADER section heading → each assertion card shows llm-grader pill badge.

Files tab: File tree + Monaco editor fills the panel. No score cards visible.

Acceptance signals verified:

  • ✅ Scores only appear in Checks tab
  • ✅ Tabs at top of the detail panel
  • ✅ Grader name pill (llm-grader) on each assertion card
  • ✅ Files tab editor fills available height with no score clutter

@christso christso marked this pull request as ready for review April 9, 2026 08:47
@christso christso merged commit 5785e58 into main Apr 9, 2026
4 checks passed
@christso christso deleted the feat/1014-studio-test-details-layout branch April 9, 2026 09:04
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.

feat: improve layout of test details view in agentv studio

1 participant