You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(frontend): playground header and toolbars like /w, no overlap in compare mode in /m - #8188
Stacked on #8182 (results and rows), which is stacked on #8145. The diff shrinks as those merge.
What the user sees
In /m developer mode, the playground's headers and toolbars now look like /w:
Compare mode no longer overlaps (parity finding playground-compare-overlap-01). Before, "Last modified" ran over the deploy icon and the draft dot sat on the Commit button. In a narrow panel the version, "Last modified" and the deployment dots now drop out, as in /w. The draft tag stays. The variant name truncates instead of pushing the buttons.
Page header (playground-page-header-01, decided: keep the app name in the title and Test set next to Run all). The order is now /w's: "New Evaluation" with the flask icon, a divider, "Evaluator ▾", then Compare. A connected evaluator shows as a green chip.
Revision toolbar (playground-config-toolbar-01). The order is now /w's: bordered variant select, version, status, Form, deploy (cloud icon), Commit (with its icon), ⋮. The Form select is 28 px tall like the buttons.
Draft tags are amber (playground-draft-tag-01) in the toolbar, as in /w.
The revision menu (playground-revision-menu-01) shows the deployment dots right after the version, not at the far edge.
⋮ menu: Delete is red (playground-more-menu-01).
Delete revision dialog (playground-confirm-style-01): a solid red Delete button and the revision name in bold.
Phone width (playground-narrow-01): the app name shows in full ("Capital finder") instead of one letter, and the Generations pane no longer repeats "Generations" under the pane switch.
Evaluator playground: the Draft tag is no longer hidden under Load Preset (evaluators-pg-01), the Run on flow chips and badges have their colours (evaluators-pg-03), and the evaluator's template ("LLM-as-a-judge") shows in the page header (evaluators-pg-06).
/m without developer mode does not change. Everything is in the playground's own files or in panels/*, which only the developer playground renders. The colour rules are scoped to [data-playground].
How
ConfigPanelHeader is a container (@container/config-header). Below 32rem it hides the version, "Last modified" and deployment dots. The details no longer shrink; the variant switcher truncates instead, so the draft tag is never covered.
The ⋮ menu also renders outside the page, so Delete uses the destructive colour /m does define.
The evaluator's template comes from the template catalog (evaluatorTemplatesMapAtom) and the key in the revision's URI. It sits in the page header, not in the toolbar as on /w: at the default split the toolbar has no room for it beside the draft tag, and a truncated tag read badly.
Tests
playgroundEditorStyle.test.ts: the draft and flow chip colours apply in the playground, and the success colour applies to a tag whose data-slot is a menu trigger.
The playground and variant dialog tests pass with the new markup (33 files, 342 tests, on the remote machine).
Checks: /m and @agenta/playground-ui type checks pass. ESLint and Prettier pass on the changed files. No /w file changed in this PR.
Live check: /m from this branch behind a proxy to the QA stack. 1440 px: the single view with a draft, the ⋮ menu, the revision menu, the add-tool popover, compare with two revisions, and the evaluator playground with a draft and the Run on menu. 390 px: the playground and its Generations pane. No page errors.
Not done
evaluators-pg-02 (Test set before an app is connected): not changed. In "Run on an app output" mode, before an app is picked, the run pane is the "Select an app" empty state. Loading a test set there would put rows on the evaluator alone, which then move when an app is picked. That needs its own change to how the rows follow the first node.
The "Edited" tag in the Commit dialog stays plain text. The dialog is shared with /w (@agenta/playground-ui/commit).
The /w revision menu greys out the open revision and uses 36 px rows. /m still highlights it and uses 28 px rows.
No actionable comments were generated in the recent review.
Summary
Summary by CodeRabbit
New Features
Evaluator names and revision details are easier to identify in the playground and output cards.
Added clearer output states, including a “No output yet” message before a run.
Improvements
Updated playground controls, testcase labels, and row actions for clearer navigation.
Refined editor sizing and typography, tag colors, and responsive layouts across the playground.
Updated deployment, commit, and deletion controls with clearer icons and styling.
The playground UI changes add evaluator labels, adjust headers and revision controls, and update run-result cards, row actions, and idle states. Playground-scoped styles apply to editor content and tags. Tests cover updated output presentation, labels, and scoped styling.
Changes: Playground UI
Layer / File(s)
Summary
Evaluator labels and node names web/mobile/src/features/playground/EvaluatorPlaygroundHeader.tsx, web/mobile/src/features/playground/EvaluatorPlaygroundWorkspace.tsx, web/mobile/src/features/playground/EvaluatorTypeTag.tsx, web/packages/agenta-playground-ui/src/hooks/usePlaygroundNodeLabels.ts, web/packages/agenta-playground-ui/src/components/ExecutionItems/...
The evaluator header accepts a type tag, and the evaluator workspace renders the matching name when available. The node-label hook moves to the hooks module, which execution views now import.
Playground headers and controls web/mobile/src/features/playground/PlaygroundHeader.tsx, web/mobile/src/features/playground/PlaygroundNewEvaluation.tsx, web/mobile/src/features/playground/PlaygroundWorkspace.tsx, web/packages/agenta-playground-ui/src/panels/config/*, web/packages/agenta-playground-ui/src/panels/evaluator/EvaluatorPicker.tsx, web/packages/agenta-playground-ui/src/panels/config/RevisionTree.tsx
The new-evaluation action moves into its own header prop. Playground and configuration controls receive responsive layout and styling changes, including updated action placement.
Run rows and result presentation web/packages/agenta-playground-ui/src/panels/runs/*, web/packages/agenta-playground-ui/src/panels/focus/FocusOutputs.tsx, web/packages/agenta-playground-ui/src/panels/compare/CompletionCompareRow.tsx, web/mobile/tests/unit/playgroundCompletionRuns.render.test.tsx, web/mobile/tests/unit/playgroundRunResult.render.test.tsx, web/mobile/tests/unit/playgroundRowSyncTag.render.test.tsx
Run results appear in revision cards with available labels, versions, and draft status. Row labels and action order change, and idle results use “No output yet.” Tests cover these updated states and labels.
Playground-scoped editor styles set typography, sizing, insets, and tag colors. Workspace and popover content receive the scope attribute. Input and run-result editors also receive sizing and layout changes, with tests for scoped styles.
Revision actions and deletion web/mobile/src/features/playground/RevisionActions.tsx, web/mobile/src/features/playground/RevisionMenu.tsx, web/mobile/src/features/variants/DeleteRevisionDialog.tsx
Commit and Deploy buttons use updated icons. Delete controls gain explicit destructive styling, and the confirmation displays the revision name and version separately.
Agenta-AI/agenta#8070: Adds the evaluator playground and its controls, which this PR further updates.
Agenta-AI/agenta#8145: Adds related playground-scoped editor styles and tests for editor styles and workspace scope.
Merge Risk: Minimal · up to 893e9
This is a UI alignment change for the playground with no evident functional or data risks in the supplied context. It looks safe to merge after the normal checks.
Pre-merge checks: 5
Check name
Status
Explanation
Title check
The title identifies the playground header, toolbar, and compare-mode layout changes.
Description check
The description covers the playground layout, styling, evaluator, and test changes.
Docstring Coverage
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 37 files.
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 0 remain after this review.
27-27: Trivial · Maintainability & Code Quality · Low value
Hover-only reveal needs a keyboard path that works with :focus-within.
On hover-capable devices the actions have opacity-0 until row-header hover or focus. The focus-within rule applies to this container, so it only works once a child already has focus. A keyboard user can still tab into the invisible buttons, and focus-within then reveals them. This is acceptable. The same container is also not revealed when the sibling fold button has focus. Use group-focus-within/row-header:opacity-100 to match the hover trigger.
Keep the selector comments to one short line each. The first block gives a lengthy layout history. The second block repeats the purpose of the scoped rules. As per coding guidelines: “At most ONE short line per comment”; longer comments are limited to a sentence or two for a surprising constraint.
52-53: Trivial · Maintainability & Code Quality · Heavy lift
Verify visible styles in a browser.
These checks inspect stylesheet values in jsdom. The minHeight assertion cannot show that a one-line editor shrinks. The background assertion compares var(--ag-colorSuccessBg), not a rendered green color. jsdom does not perform layout or render visual content. Keep the scope assertions here, and use a browser visual test for editor sizing and tag colors. (github.com)
State the fixture’s purpose in one short line. The current block narrates the expected styling and stylesheet setup. As per coding guidelines: “At most ONE short line per comment.”
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 3 remain after this review.
Dependent tests finished. Post /preview for manual review. Environment absence verified; retained storage requires separate provider accounting.
Post /preview as a new comment to request a one-hour preview. Repeating it while active does not extend the hour.
Preview data is disposable. Expiry is enforced by the next successful cleanup sweep, not an exact timer.
Environment deletion stops its compute. Provider-retained storage and permanent services may still be billed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Stacked on #8182 (results and rows), which is stacked on #8145. The diff shrinks as those merge.
What the user sees
In /m developer mode, the playground's headers and toolbars now look like /w:
/m without developer mode does not change. Everything is in the playground's own files or in
panels/*, which only the developer playground renders. The colour rules are scoped to[data-playground].How
ConfigPanelHeaderis a container (@container/config-header). Below 32rem it hides the version, "Last modified" and deployment dots. The details no longer shrink; the variant switcher truncates instead, so the draft tag is never covered.[data-slot="badge"], but a draft tag that opens a menu gets the menu'sdata-slot, so the toolbar draft stayed grey. The rules now match the classes under[data-playground], and add the tag colours the Run on chips use. The Run on popover renders outside the page, so it setsdata-playgrounditself.destructivecolour /m does define.evaluatorTemplatesMapAtom) and the key in the revision's URI. It sits in the page header, not in the toolbar as on /w: at the default split the toolbar has no room for it beside the draft tag, and a truncated tag read badly.Tests
playgroundEditorStyle.test.ts: the draft and flow chip colours apply in the playground, and the success colour applies to a tag whosedata-slotis a menu trigger.Checks: /m and
@agenta/playground-uitype checks pass. ESLint and Prettier pass on the changed files. No /w file changed in this PR.Live check: /m from this branch behind a proxy to the QA stack. 1440 px: the single view with a draft, the ⋮ menu, the revision menu, the add-tool popover, compare with two revisions, and the evaluator playground with a draft and the Run on menu. 390 px: the playground and its Generations pane. No page errors.
Not done
@agenta/playground-ui/commit).