[feat] Put the Advanced drawer on a section rail - #6520
Open
ashrafchowdury wants to merge 7 commits into
Open
Conversation
The three Advanced groups were stacked accordions in an 880px drawer, so auditing a configuration meant opening and closing them one at a time. Design 1a replaces them with the same section rail the tool and trigger drawers use: Permissions / Execution / Build kit, one panel at a time, in a 560px drawer. RailField gains a stacked layout, selected through a context so the sandbox, Claude and Pi permission controls keep rendering their own rows unchanged. The build-kit block drops its accordion chrome for a plain panel with the enable switch in its header.
Drop the header icon, the "Draft — applies on save" footer note and the Build kit rail's amber dot: each restated something the drawer already shows, and together they crowded a panel whose job is to stay quiet. Run the rail divider the full height of the body so it meets the header and footer rules instead of floating between them, and close up the space around the rail — the drawer's side inset drops to 12px (the vertical 16 stays, since that is what the divider's bleed negates), the gap to the divider to 8px, and the toggles' own side padding to 8px. The footer note came off SectionDrawer's default, so the Model drawer loses it and takes the same insets.
ChipsInput offered its suggestions through a native <datalist>, which draws an unstyled OS popup, opens on the browser's terms rather than the field's, and can't be driven from our own keyboard handling. The box also reserved 24px on the right for a caret it never drew. Build the list here instead, on the Popover + role=listbox + aria-activedescendant pattern Combobox already uses: it opens on focus, filters as you type, hides values already chipped, and takes arrows, Enter and Escape. Free text still chips on Enter — the options are suggestions, not a closed set — and the caret (with its inset) now appears only where there are suggestions to show. The input lives in the popover's ANCHOR, so every click and focus inside the field reads as an interaction OUTSIDE the layer and would dismiss the list on the tail of the very click that opened it. Guard both outside paths on whether the event came from the field, and focus the input by hand off the box chrome rather than letting the browser do it mid-gesture. Escape is swallowed while the list is open so it closes the list and not the drawer around it. Shared by the permission fields, SchemaForm and ParameterNodeEditor.
…d its caption The item row's name was semibold at 13px, which read as a heading in a list of them and competed with the panel titles above it — drop it to normal weight. The build kit's enable switch was the default size while every per-tool switch under it is small, so the block's master control looked heavier than the rows it governs. Match them. Cut the build-kit caption from three lines to two: the heading already says "playground", and the tools list below says what the kit holds, so the caption only has to place the tools and say they never ship. ItemRow is shared, so the tools, subagents, skills and MCP lists take the lighter name too.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (4)
Included review availability: Your plan provides up to 8 included reviews per hour; 3 remain after this review. 📝 SummarySummary by CodeRabbit
WalkthroughThe PR updates agent configuration drawers with dynamic sizing, rail-based advanced panels, stacked field layouts, and a plain build-kit layout. It also replaces ChangesAgent configuration drawer
Chip input suggestions
Estimated code review effort: 3 (Moderate) | ~25 minutes Merge Risk: ⚪ Minimal · up to This updates agent configuration drawer layouts and chip suggestions, including keyboard-accessible changed-field detail controls. No concrete current-head merge-blocking risk remains. Sequence Diagram(s)Advanced drawer flowsequenceDiagram
participant AgentTemplateControl
participant useModelHarness
participant SectionRail
participant SectionDrawer
AgentTemplateControl->>useModelHarness: read advanced panels and drawer width
useModelHarness->>SectionRail: render active advanced panel navigation
SectionRail->>useModelHarness: select panel
useModelHarness->>SectionDrawer: provide active panel body
Chip suggestion flowsequenceDiagram
participant User
participant ChipsInput
participant Popover
User->>ChipsInput: type query or use arrow keys
ChipsInput->>Popover: update filtered suggestion list
User->>Popover: select suggestion or press Enter
Popover->>ChipsInput: return selected value
ChipsInput->>ChipsInput: add chip and update input state
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |
At 132px the rail's labels sat tight against their icons with the column ending well short of the panel it introduces. 16px more gives the three labels room without taking a meaningful bite out of the panel.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
web/packages/agenta-entity-ui/src/gatewayTool/components/schemaFormControls.tsx (1)
240-247: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse one short line for each new code comment. As per coding guidelines, “At most ONE short line per comment.”
Also applies to: 273-274, 321-323, 333-334, 390-391, 414-415
Source: Coding guidelines
web/packages/agenta-entity-ui/src/drawers/shared/RailField.tsx (1)
30-31: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winApply the one-line comment rule to all new source comments.
Shorten each listed multi-line comment to one short line.
web/packages/agenta-entity-ui/src/drawers/shared/RailField.tsx#L30-L31: shorten theFieldLayoutContextcomment.web/packages/agenta-entity-ui/src/drawers/shared/SectionRail.tsx#L43-L47: shorten thebleeddocumentation.web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useModelHarness.tsx#L766-L768: shorten the rail-panel comment.web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useModelHarness.tsx#L845-L847: shorten the divider comment.web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useModelHarness.tsx#L859-L860: shorten the focus-filter comment.
As per coding guidelines, “Hard rule. At most ONE short line per comment.”Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Team
Run ID: 3a45dd4a-aec8-4337-a8ea-127e1529850a
📒 Files selected for processing (11)
web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/SectionDrawer.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/BuildKitSection.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/ItemRow.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useBuildKit.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useModelHarness.tsxweb/packages/agenta-entity-ui/src/drawers/shared/RailField.tsxweb/packages/agenta-entity-ui/src/drawers/shared/SectionRail.tsxweb/packages/agenta-entity-ui/src/drawers/shared/index.tsweb/packages/agenta-entity-ui/src/gatewayTool/components/schemaFormControls.tsxweb/storybook/stories/entity-ui/BuildKitSection.stories.tsx
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.
The changed-label trigger was a span with role="button", which sets the ARIA contract without making the element focusable. Keyboard users could neither open the committed-value popover nor reach its Restore button. Use a real button, stripped to the label's own type and colour, with a focus-visible ring so it shows where the focus lands.
web/AGENTS.md sets a hard one-short-line rule for in-code comments, and this branch added several multi-line blocks narrating why. Trim them to a line each, keeping only the two that record a real trap: the popover anchor Radix reads as "outside", and the drawer padding the rail's bleed negates.
Contributor
Railway Preview Environment
|
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Context
The Advanced drawer stacked its three groups (Permissions, Execution, Build kit) as accordions in an 880px drawer, so auditing a configuration meant opening and closing them one at a time. Design 1a replaces that with the same section rail the tool and trigger drawers already use.
Two things surfaced while building it. The drawer's chrome kept restating what the panel already showed, and the permission fields offered their suggestions through a native
<datalist>, which the browser draws in its own style and opens on its own terms.Changes
The rail. Permissions / Execution / Build kit now sit in a left rail beside one panel at a time, in a 560px drawer.
RailFieldgains a stacked layout, selected through a context, so the sandbox, Claude and Pi permission controls keep rendering their own rows unchanged. The build-kit block drops its accordion chrome for a plain panel with the enable switch in its header.SectionRailalso gains ableedprop that runs the divider past the drawer's vertical body padding, so it meets the header and footer rules instead of floating between them.The chrome. Dropped the header icon, the "Draft — applies on save" footer note and the Build kit rail's amber dot. Each restated something already on screen. The drawer's side inset goes from 16px to 12px, the rail-to-divider gap from 12px to 8px, and the rail toggles' side padding from 10px to 8px. The footer note came off
SectionDrawer's default, so the Model drawer loses it and takes the same insets.The chip inputs.
ChipsInputoffered its suggestions through a native<datalist>. That draws an unstyled OS popup, opens on the browser's terms rather than the field's, and cannot be driven from our own keyboard handling. The box also reserved 24px on the right for a caret it never drew.Before:
After: a
Popoverwith arole=listboxpanel andaria-activedescendant, the same patternComboboxuses. It opens on focus, filters as you type, hides values already chipped, and takes arrows, Enter and Escape.One trap worth naming for the reviewer. The input lives in the popover's anchor, not its content, so every click and focus inside the field reads to Radix as an interaction outside the layer. Without a guard, the list dismissed on the tail of the very click that opened it.
onPointerDownOutsideandonFocusOutsidenow check whether the event came from the field, and the input is focused by hand on mousedown rather than by the browser mid-gesture.Free text still chips on Enter. The options are suggestions, not a closed set.
Row typography.
ItemRow's name drops from semibold to normal weight; at 13px it read as a heading in a list of them. The build kit's enable switch was the default size while every per-tool switch under it is small, so they now match. The build-kit caption goes from three lines to two.ItemRowis shared, so the tools, subagents, skills and MCP lists take the lighter name too.Tests
pnpm lint-fixandtsc --noEmiton@agenta/entity-uiare both clean.r, and produces chips from both a clicked suggestion and free text.What to QA
rand it narrows. Click a suggestion and it becomes a chip.Bash(npm run:*), and press Enter. It still becomes a chip.SectionRail. Their toggles are 2px tighter on each side but should otherwise look and behave as before.Preview