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
feat(frontend): playground foundation in /m behind the developer view switch (1 of 8) - #8012
For the release after v0.128.3. Do not merge into v0.128.3.
Context
This is part 1 of 8 for the prompt playground in /m. The playground lets a developer edit and run a prompt app. It ships hidden, under the view id playground. Users do not see it until the developer view switch turns it on.
Changes
Adds the route apps/[app_id]/playground. The route loads with next/dynamic inside the developer view gate, so the shared app shell does not load it.
Adds the screen parts: a header, a resizable split on desktop, and a Configuration / Generations switch on phones.
The run pane is a placeholder. Later PRs fill it in.
Adds load, error, and not-found states.
Agent apps redirect away from the playground.
Adds a leave guard. It warns before a user leaves with an unsaved draft.
DrillInBridgeProvider no longer needs sessionId.
Structure that later PRs follow
Panels live at @agenta/playground-ui/panels/<name>. One ./panels/* entry in the export map of that package's package.json covers them. The change adds no dependency.
usePlaygroundSelection is the hook for the playground selection.
PlaygroundScreen, PlaygroundWorkspace, and PlaygroundSplit are the screen parts.
Speed
speed:check passes.
The route's first load is 1324.9 KB gzip. This PR adds a budget row for the route.
The on-demand playground code is 165.7 KB gzip.
A new script, scripts/speed/antd-in-route.mjs, checks that the route adds no antd beyond the app shell.
The app shell already reaches antd through some dynamic imports. Someone is auditing that separately, so this PR does not change it.
Checks
Types for /m, /w, and /playground-ui.
Full mobile test suite. Two tests fail, and both also fail on the release branch: agentPermissions.render.test.tsx and membersTabRoleChange.render.test.tsx.
Playground tests.
Review
Review round 2 rated Low for correctness, slop, and naming.
Notes
The Storybook config gained an @ alias to web/mobile/src. It also gained a Tailwind source path for /m.
Open problem: an agent app with an unsaved draft shows the leave dialog on redirect. No link reaches the playground for agent apps yet, so no user hits this today.
Added a prompt playground with a configuration editor, revision selection, and responsive layouts for desktop and mobile.
Added Form, JSON, and YAML configuration views, plus loading and error states with retry.
Added unsaved-change warnings when leaving the playground.
Bug Fixes
Improved navigation warnings so in-page selection changes don’t trigger an unnecessary confirmation.
Ensured committed workflow revisions are selected in the correct session.
Adds a mobile app playground route for prompt apps. The route loads and selects workflow revisions, displays a responsive configuration and generations workspace, and supports draft navigation warnings. The change also adds shared configuration-panel components, tests, Storybook stories, and build checks.
Changes: App playground
Layer / File(s)
Summary
Revision selection and URL state web/mobile/src/features/playground/usePlaygroundSelection.ts, web/mobile/src/features/playground/playgroundUrl.ts, web/mobile/tests/unit/playgroundSelection.test.tsx
The selection hook reads revision IDs from the URL, filters revisions, selects a latest revision when needed, and synchronizes eligible selections back to the URL. Tests cover selection, cleanup, and retry behavior.
Adds a revision-aware configuration panel with draft and deployment details, view selection, and a hydration skeleton. Tests and stories cover saved revisions, drafts, hydration, and JSON view selection.
Adds the playground route and responsive workspace. Revision commits use a caller-provided callback. Dirty non-shallow navigation prompts for confirmation, while shallow navigation does not.
Adds a route-specific Ant Design source check and gzip budget. Adds restricted imports for playground panel files, Storybook configuration for mobile sources, and playground stories.
sequenceDiagram
participant PlaygroundPage
participant PlaygroundScreen
participant usePlaygroundSelection
participant WorkflowQueries
participant PlaygroundWorkspace
participant ConfigPanel
PlaygroundPage->>PlaygroundScreen: pass workspace, project, and app IDs
PlaygroundScreen->>usePlaygroundSelection: read app and revision selection
usePlaygroundSelection->>WorkflowQueries: query app and selected revisions
WorkflowQueries-->>usePlaygroundSelection: return query results
usePlaygroundSelection-->>PlaygroundScreen: return status and primary revision
PlaygroundScreen->>PlaygroundWorkspace: render selected revision
PlaygroundWorkspace->>ConfigPanel: pass revision ID and view mode
Loading
Merge Risk: Low · previous review 877e2
The playground is mergeable with bounded risk, but its phone story and release check do not enforce their intended coverage, and revision URL state can be wrong after an abandoned render. Address these before relying on those checks.
Pre-merge checks: 4 · 1
Failed checks: 1 warning
Check name
Status
Explanation
Resolution
Docstring Coverage
Docstring coverage is 0.00% which is insufficient. The required threshold is 60.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed checks: 4 passed
Check name
Status
Explanation
Title check
The title clearly identifies the playground foundation as the main change and states that it is gated behind the developer view switch. The part number adds minor noise but does not obscure the change…
Description check
The description directly explains the hidden playground route, its screen components, loading behavior, leave guard, provider change, performance checks, and testing status.
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: Title check
Explanation
The title clearly identifies the playground foundation as the main change and states that it is gated behind the developer view switch. The part number adds minor noise but does not obscure the change.
Full details: Docstring Coverage
Explanation
Docstring coverage is 0.00% which is insufficient. The required threshold is 60.00%. 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 2 functions across 34 files. (3 skipped: 3 unsupported.)
Resolution
Write docstrings for the functions missing them to satisfy the coverage threshold.
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; 5 remain after this review.
Require the phone-only Generations switch in ReadyPhone.
ReadyPhone sets no phone viewport. Its play function also skips the click when the Generations radio is absent, so the story passes at desktop width without exercising the phone switch. The switch appears only below the md breakpoint, so a desktop render can pass as phone coverage. Set a phone viewport, and wait for the radio so that a missing switch fails the story.
The reason will be displayed to describe this comment to others. Learn more.
Minor · Maintainability & Code Quality · Quick win
Supported by static analysis
Script executed:
#!/bin/bash# Inspect release-check invocations without building or running repository code.
rg -n -C2 --glob 'package.json' --glob '*.yml' --glob '*.yaml' \
--glob '*.mjs' --glob 'Dockerfile*' \
'antd-in-route\.mjs|speed:check|scripts/speed/check\.mjs'.
Repository: Agenta-AI/agenta
Length of output: 3584
Script executed:
printf'%s\n''--- workflow ---'
nl -ba .github/workflows/17-check-mobile.yml | sed -n '185,250p'printf'%s\n''--- mobile package scripts ---'
nl -ba web/mobile/package.json | sed -n '1,32p'printf'%s\n''--- scanner entrypoint and output assumptions ---'
nl -ba web/mobile/scripts/speed/antd-in-route.mjs | sed -n '1,45p;90,120p'printf'%s\n''--- all workflow/script references ---'
rg -n -F --glob '.github/workflows/**' --glob 'web/**''antd-in-route.mjs'.||test"$?" -eq 1
Repository: Agenta-AI/agenta
Length of output: 10187
Script executed:
nl -ba web/mobile/scripts/speed/antd-in-route.mjs | sed -n '33,95p'
Repository: Agenta-AI/agenta
Length of output: 3087
Run the Ant Design scan in the required mobile release check.
The mobile CI workflow runs speed/check.mjs, but it does not run antd-in-route.mjs. The speed:check package script also does not chain the scan. Therefore, a transitive Ant Design import can pass the current mobile build, lint, and speed checks without this route-specific check.
Add antd-in-route.mjs to the required post-build mobile check. Preserve the scanner's server/pages/<route>/react-loadable-manifest.json input, or run the scanner against the complete build output, so dynamic-import chunks are included.
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}
For the release after v0.128.3. Do not merge into v0.128.3.
Context
This is part 1 of 8 for the prompt playground in /m. The playground lets a developer edit and run a prompt app. It ships hidden, under the view id
playground. Users do not see it until the developer view switch turns it on.Changes
apps/[app_id]/playground. The route loads withnext/dynamicinside the developer view gate, so the shared app shell does not load it.DrillInBridgeProviderno longer needssessionId.Structure that later PRs follow
@agenta/playground-ui/panels/<name>. One./panels/*entry in the export map of that package'spackage.jsoncovers them. The change adds no dependency.usePlaygroundSelectionis the hook for the playground selection.PlaygroundScreen,PlaygroundWorkspace, andPlaygroundSplitare the screen parts.Speed
speed:checkpasses.scripts/speed/antd-in-route.mjs, checks that the route adds no antd beyond the app shell.Checks
agentPermissions.render.test.tsxandmembersTabRoleChange.render.test.tsx.Review
Notes
@alias toweb/mobile/src. It also gained a Tailwind source path for /m.