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 message editors fit their text and use the app font in /m - #8145
In /m developer mode, the playground's message editors now look like /w:
Messages use the app font at 13 px, not a code font (parity findings playground-font-01 and evaluators-pg-07). Before, every System, User and Assistant message, and the LLM judge prompt in the evaluator playground, rendered in the browser's monospace font at about 15 px.
Message boxes fit their text (playground-editor-height-01). Before, every message box was about 210 px tall, even for one line. System plus User took about 430 px in /m and about 190 px in /w. They now take about 160 px. In the chat pane, a full turn and the next empty User message now fit on one screen with the Run button visible. After one chat run with Mistral Small, the Run button sits at y=671 on a 900 px window. Before, it sat at y=1118, below the screen.
Message text lines up with the role label (playground-editor-align-01). Before, the text started about 8 px left of "System" or "User".
/m without developer mode does not change. The new rules apply only inside the playground, which only developer mode shows. The agent config and the trace drawer render the same editor, and they keep their current look.
Why it was broken, and the fix
Height: the shared editor theme (@agenta/ui/editor-theme.css) gives .editor-input a min-height: 150px. The editor overrides it with the Tailwind class min-h-[inherit]. In /w that class wins. In /m the theme file is imported without a CSS layer, and CSS outside a layer always beats Tailwind's layered classes, so the 150 px stayed.
Font: Tailwind's base styles give code the monospace font, and the editor's text view renders each message inside a <code>. /w resets that element to the app font in web/oss/src/styles/globals.css. /m had no reset.
Alignment: /w pads the role label and the text with the same 8 px inset (--ag-message-inline-pad). /m had no such rule.
The fix adds those rules to web/mobile/src/styles/globals.css, scoped to [data-playground]. PlaygroundWorkspace and EvaluatorPlaygroundWorkspace set that attribute on their root element. No shared package changes, so /w does not change.
Tests
mobile/tests/unit/playgroundEditorStyle.test.ts loads the real editor theme and the real /m globals.css and reads the computed style of a message editor. Inside the playground, the editor has no minimum height, the text uses the app font at 13 px, and the text and the role label share the same inset. Outside the playground, the same editor keeps its 150 px minimum height and its code font. Three of the four tests fail without the fix.
mobile/tests/unit/playgroundScreen.render.test.tsx checks that the config pane and the run pane are inside the [data-playground] element.
Checks: the /m type check passes. ESLint and Prettier pass on the changed files. The playground screen and evaluator playground tests pass.
Live check: I ran /m from this branch (local dev server behind a proxy to the QA stack) at 1440 px and 390 px. I checked the Capital finder completion playground, the Support bot chat playground (one chat turn and one completion run, both with Mistral Small) and the Answer correctness judge in the evaluator playground. There were no page errors.
Not in this PR
playground-prompt-header-01: no change needed. "Prompt Template" has the same weight (500) and size (14 px) in /w and /m. It looks lighter in /m only because /m uses the system font everywhere and /w uses Inter. Changing the app font is out of scope.
The trace drawer output keeps its current font. The trace drawer also opens outside developer mode, so changing it would change /m for users without developer mode.
The run results, inputs and the empty User box in the chat pane are in the next PR (results and rows).
Improved the appearance of playground chat editors with consistent text sizing, aligned message labels and content, and more compact spacing.
Kept editor styling outside the playground unchanged.
The playground workspace roots now carry a data-playground attribute. Global CSS uses that scope to format message editors, and tests check the scoped styles and workspace markup.
Changes: Playground editor styling
Layer / File(s)
Summary
Mark playground workspace roots web/mobile/src/features/playground/EvaluatorPlaygroundWorkspace.tsx, web/mobile/src/features/playground/PlaygroundWorkspace.tsx, web/mobile/tests/unit/playgroundScreen.render.test.tsx
Both workspace roots gain data-playground. A render test checks that the configuration panel and run pane are nested beneath an element with that attribute.
Style and verify playground editors web/mobile/src/styles/globals.css, web/mobile/tests/unit/playgroundEditorStyle.test.ts
Scoped CSS sets editor font size and inset, removes the input’s minimum height, and styles markdown editor content. The test checks the scoped styles and verifies that an unscoped editor retains its minimum height and monospace font.
Agenta-AI/agenta#8070: Adds EvaluatorPlaygroundWorkspace, which this change marks with data-playground.
Agenta-AI/agenta#8012: Adds the /m playground workspace, which this change marks with data-playground and scopes editor styles to.
Agenta-AI/agenta#8049: Adds a compare view that renders ChatMessage editors inside PlaygroundWorkspace, where the scoped styles apply.
Merge Risk: Low · up to 295ea
Markdown messages may appear slightly larger than intended, and the empty User box may shrink. These are bounded visual regressions that can be corrected without blocking merge.
Pre-merge checks: 5
Check name
Status
Explanation
Title check
The title identifies the playground editor height and font changes in /m.
Description check
The description explains the scoped playground editor styling and related tests.
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 4 files. (1 skipped: 1 unsupported.)
Finishing Touches
Generate docstrings
Commit to this branch
Create a new PR
Generate unit tests (beta)
Commit to this branch
Create a new PR
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.
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
Nitpick comments: 1
web/mobile/src/styles/globals.css: 1
562-570: Trivial · Maintainability & Code Quality · Low value
Shorten the CSS comment block.
The block is nine lines of prose that explain why. The repository rule allows at most one short line per comment. A longer comment is allowed only for a surprising constraint, and then a sentence or two at most. Cut the block to the one surprising constraint: the unlayered editor theme outranks Tailwind utilities, so min-height must be reset here.
As per coding guidelines: "Keep in-code comments terse. Hard rule. 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; 2 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}
What the user sees
In /m developer mode, the playground's message editors now look like /w:
/m without developer mode does not change. The new rules apply only inside the playground, which only developer mode shows. The agent config and the trace drawer render the same editor, and they keep their current look.
Why it was broken, and the fix
@agenta/ui/editor-theme.css) gives.editor-inputamin-height: 150px. The editor overrides it with the Tailwind classmin-h-[inherit]. In /w that class wins. In /m the theme file is imported without a CSS layer, and CSS outside a layer always beats Tailwind's layered classes, so the 150 px stayed.codethe monospace font, and the editor's text view renders each message inside a<code>. /w resets that element to the app font inweb/oss/src/styles/globals.css. /m had no reset.--ag-message-inline-pad). /m had no such rule.The fix adds those rules to
web/mobile/src/styles/globals.css, scoped to[data-playground].PlaygroundWorkspaceandEvaluatorPlaygroundWorkspaceset that attribute on their root element. No shared package changes, so /w does not change.Tests
mobile/tests/unit/playgroundEditorStyle.test.tsloads the real editor theme and the real /mglobals.cssand reads the computed style of a message editor. Inside the playground, the editor has no minimum height, the text uses the app font at 13 px, and the text and the role label share the same inset. Outside the playground, the same editor keeps its 150 px minimum height and its code font. Three of the four tests fail without the fix.mobile/tests/unit/playgroundScreen.render.test.tsxchecks that the config pane and the run pane are inside the[data-playground]element.Checks: the /m type check passes. ESLint and Prettier pass on the changed files. The playground screen and evaluator playground tests pass.
Live check: I ran /m from this branch (local dev server behind a proxy to the QA stack) at 1440 px and 390 px. I checked the Capital finder completion playground, the Support bot chat playground (one chat turn and one completion run, both with Mistral Small) and the Answer correctness judge in the evaluator playground. There were no page errors.
Not in this PR