feat(frontend): agent config section drawers#4881
Merged
Merged
Conversation
Render the agent Instructions section like Tools/Skills: a file list (one AGENTS.md row today, structured for multiple defs) whose row opens a right-hand editor drawer instead of the always-expanded inline editor. The drawer hosts the markdown editor (its built-in source/render toggle gives Preview) plus a right rail of suggested-action scaffolds and a version-history skeleton. Edits live on a draft and apply on Save, matching the tools/skills drawer. The section + is inert until the backend stores multiple instruction files.
Align the instructions drawer with the mock. Add a MarkdownToolbar (heading, bold, italic, lists, link, inline code, quote) in @agenta/ui that drives the shared Lexical editor, and mount it above the editor when MarkdownEditor gets showToolbar. MarkdownEditor now supports a controlled/uncontrolled source vs rendered view, read-only mode, and a hidden built-in header so a host can supply its own chrome. The drawer gains a header Edit | Preview segmented: Edit shows the rich-text editor + toolbar, Preview shows a read-only render that can Expand to fill the drawer (hiding the rail). Adds @lexical/selection for block-type changes (heading/quote).
Widen the drawer (760 to 920) so the editor has room. Unify the toolbar and editor in a single border (the editor renders borderless inside) instead of two nested boxes. Drop the boxed-in look on the right rail: suggested actions and the version-history skeleton now sit as open sections separated by whitespace, and the Preview render is borderless. Adds a bordered prop to MarkdownEditor.
…nippets - Toolbar buttons preventDefault on mousedown so focus/selection stays in the editor (no more focus jumping out on click). - Move the toolbar into the editor's single bordered header instead of a second wrapper border, so the border no longer flashes on hover/focus. - Add a fill prop to MarkdownEditor; the drawer editor/preview now fill the drawer height instead of sizing to content. - Suggested actions append a heading plus a short prompt, not just a bare title. - Add a 'Writing a good AGENTS.md' callout in the rail for AGENTS.md.
- Make the view toggle a right-aligned text button (Markdown / Rich text) instead of an icon, matching the mock. - Bound the editor height and scroll the content area so the toolbar stays pinned with large content instead of being pushed out of view (drawer body no longer scrolls; the editor does). - Rewrite suggested snippets to drop a ready-to-edit starting point (a sentence plus example bullets) rather than instructions aimed at the author.
The toolbar only highlighted bold/italic/code. Track the current selection's block and list type too, so heading, quote, bulleted/numbered list, and link buttons light up when the caret is inside that formatting.
Render the toolbar as a fixed row above a scroll area this component owns (bounded by max-height on its own wrapper, not the editor's internal height var), so large content scrolls inside the box and the toolbar stays put instead of being pushed out of view. The editor is borderless inside the single wrapper border with its hover/focus border suppressed (no flash). The view toggle now sits hard-right via justify-between.
…awer The fill wrapper used max-height, so the box shrank to content and left empty space. Use a fixed height (calc(100vh - 152px), self-sized so it doesn't depend on the parent flex chain) so the editor box fills the drawer body and tall content scrolls inside it.
Add a lightweight MarkdownPreview (marked + DOMPurify, no Lexical editor) and use it on the AGENTS.md row: the preview now renders proper markdown clamped to a few lines, and a caret expands it to the full rendered content inline — no heavy editor instance in the panel. Row click still opens the edit drawer.
Use the shared HeightCollapse (CSS interpolate-size height transition) for the AGENTS.md row preview instead of an instant max-height toggle, so expanding to full content animates smoothly to auto height like the other drill-in sections.
Give the skill drawer's SKILL.md body the same formatting toolbar and rendered default as the instructions editor (showToolbar + defaultView rendered). Bundled files keep the code editor. The redundant filename header is dropped (the field is already labelled SKILL.md).
Add a maxHeight option to MarkdownEditor: the box is content-sized up to the cap, then the toolbar pins and the content scrolls inside (same pinned-toolbar/scroll behavior as the instructions drawer's fill, but capped since the skill editor is one field among others). Use maxHeight 360 for the skill SKILL.md body so it can't grow unbounded inside the scrolling form.
Add an onOpen variant to ConfigAccordionSection: the header acts as a button that opens a drawer (right chevron) instead of expanding inline. Wire the Model & harness and Advanced sections to open a shared SectionDrawer (whole-config snapshot on open, restored on Cancel = draft/Save feel). Move the Authentication block out of Model & harness into Advanced. Other sections (Instructions, Tools, Skills, MCP) keep expanding inline.
Replace the plain harness select in the Model & harness drawer with capability cards (providers, hosting/deployments, model count, per-card switch impact) and a real compatibility panel (current model/auth reachability + per-harness 'if you switch' effects), all derived from harnessCapabilities, plus a version-history skeleton. Falls back to the plain harness select when inspect capabilities aren't available.
Rebuild the Advanced drawer as two panels (consistent with Model & harness): grouped, explained sub-sections on the left (Authentication, Execution environment, Permissions) and the version-history skeleton on the right. Conditional bits are real — Claude permissions only on the Claude harness (with a pill), and a note that permission policy isn't used by Pi. Factor a shared versionHistorySkeleton. Advanced section now also appears when only auth applies.
Unselected harness cards had no background and fell back to the default button grey (ugly in dark mode); give them the same antd fill/border tokens as the auth radio cards so they adapt to the theme. Remove the 'Edit as JSON' toggle (and its now-dead model-JSON state/handlers/effect) from the Authentication section.
harness_capabilities only covers providers/connection/models/hosting, so the Model & harness compatibility panel reasons about the model + auth only, not about tools/skills/MCP — switching harness can silently leave unsupported tools. Record this (and the intended model-clear-on-switch behavior) in the design doc's 'Known gap' section and a code comment by the compatibility logic so it isn't forgotten when the backend extends the contract.
Stop the whole SectionDrawer body from scrolling: the body is overflow-hidden and the content is a full-height flex row, so the left settings panel and the right version-history panel each get their own overflow-y-auto and scroll independently. Applies to Model & harness and Advanced drawers.
Per Arda: stop auto-clearing the model when switching to a harness that can't reach it. Remove the harness-reset effect that wiped model/provider/connection; the model is kept and the compatibility panel flags it as not reachable so the user can pick a new one. Update the card + 'if you switch' copy from 'clears your model' to model-support wording. Auth-mode reset is unchanged. Doc updated.
… panel width, top-level collapse, agent badge)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds drawer-based agent config editing, shared markdown UI primitives, agent-mode playground UI changes, and agent chat updates for borders, scroll behavior, tool rendering, and attachments. Several design documents describing the new flows are also added. ChangesMarkdown UI Primitives
Agent Config Section Drawers
Playground Agent Mode UI
Agent Chat UI Cleanup
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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 |
… menu - PlaygroundConfigSection: the top-level "Agent" collapse suppression keyed only on the legacy `agent_config` marker, so after the agent-template rename it reappeared. Match both `agent-template` and `agent_config` (the markers AgentTemplateControl dispatches on). - PlaygroundVariantHeaderMenu: remove the Response (stream/batch) channel group from the kebab, plus its now-unused atoms/options/imports.
Agent mode is single-panel (no comparison grid), so the "Close panel" item (and its divider) doesn't apply — gate them on !isAgent. The kebab is just Revert / Delete in agent mode.
…ineering Bring the updated base — which now carries the big-agents merge (the agent-template redesign, the agent-chat perf refactor, and the PR #4881 review fixes) — into the scroll-engineering branch. Two conflicts, both in the agent chat slice: - AgentChatPanel: keep the SC render structure (active-turn min-h-full group, emergent pin) and drop base's duplicate post-map loading bubble; the SC inline loading bubble is now borderless (CR#1). - AgentChatConversation: keep base's useCallback handleRewind (perf) and graft in the themed modal.confirm (Modal.useModal); add `modal` to deps. SC engineering (animatePinTo, fade mask, MessageRow, scrollend anchoring) and big-agents' memo/stable-onRewind perf both intact. oss tsc at the pre-existing baseline; lint clean.
Fold the scroll-engineering work (SC-1–4 + smooth native-scroll pin/jump, top-edge fade mask, bubble fade-in, emergent min-h-full pin, attachment HeightCollapse, themed rewind modal) into the section-drawers PR instead of a separate PR. The scroll branch already carried this branch's base, so the merge is conflict-free.
Resync against the moving base (17 new commits, incl. the agent-chat
message-queue feature). One conflict, AgentChatPanel, resolved as an
integration of three systems in the composer:
- Scroll engineering (mine): kept the active-turn min-h-full grouping,
emergent pin (armBottomRef/animatePinTo), top-edge fade, MessageRow,
and the borderless inline loading.
- Message queue (big-agents): adopted the send-while-busy gate
(handleSubmit → submit), the footer with the queue pill + Stop button +
HITL "waiting for approval", and dropped `loading={busy}` so the Sender
can submit into the queue mid-stream.
- Attachments (mine): kept ComposerAttachments + the flatten wrapper +
HeightCollapse + disabled-at-max paperclip, replacing the old antd X
Attachments the queue branch still used.
Also kept the position-gated `stopped` render + themed rewind modal.
oss tsc at the pre-existing baseline; lint clean.
…n-drawers Resync against 3 further base commits. One FE conflict, AgentTemplateControl, where JP's cleanup collided with this branch's summary+drawer pattern: - Kept the drawer pattern (Model & harness, Instructions, Advanced render as summaries that open their drawers) — the point of this branch — over the inline content the cleanup rewrote. - Migrated the drawer bodies to the cleanup's nested schema: harness/sandbox/ runner now live as sub-objects (harness.kind, sandbox.kind, sandbox.permissions, runner.interactions.headless) written via setSection, replacing the old flat props (props.sandbox, props.permission_policy, config.sandbox) and setField. - Adopted the new model-JSON escape hatch (Edit-as-JSON for agent.llm) inside the Advanced Authentication card, and the first-class harness.permissions for Claude (dropping the orphaned harness_kwargs slice). Package tsc + oss tsc (593, baseline) + lint all clean.
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (4)
docs/design/agent-chat-scroll/review.md (2)
30-30: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse consistent spelling: "offscreen" or "off-screen".
The document mixes both variants. Pick one and use it throughout for consistency.
53-53: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse consistent spelling: "offscreen" or "off-screen".
Same inconsistency as line 30. Align with the chosen variant.
docs/design/agent-chat-tool-display/design.md (2)
34-34: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAdd language specifier to fenced code block.
The markdownlint warning (MD040) can be silenced by adding
textorasciidocto the opening fence:```textThis keeps the storyboard readable while satisfying the linter.
56-56: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAdd language specifier to fenced code block.
Same as line 34 — add
textto the opening fence to satisfy markdownlint MD040.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: bf33737a-3e10-4299-9056-c850c8d5410a
📒 Files selected for processing (12)
docs/design/agent-chat-attachments/design.mddocs/design/agent-chat-scroll/review.mddocs/design/agent-chat-tool-display/design.mdweb/oss/src/components/AgentChatSlice/AgentChatPanel.tsxweb/oss/src/components/AgentChatSlice/assets/attachments.tsweb/oss/src/components/AgentChatSlice/components/AgentChatConversation.tsxweb/oss/src/components/AgentChatSlice/components/AgentMessage.tsxweb/oss/src/components/AgentChatSlice/components/ComposerAttachments.tsxweb/oss/src/components/AgentChatSlice/components/ToolActivity.tsxweb/oss/src/components/AgentChatSlice/components/ToolPart.tsxweb/oss/src/components/Playground/Components/Menus/PlaygroundVariantHeaderMenu/index.tsxweb/oss/src/components/Playground/Components/PlaygroundHeader/index.tsx
💤 Files with no reviewable changes (9)
- web/oss/src/components/AgentChatSlice/assets/attachments.ts
- web/oss/src/components/AgentChatSlice/components/ComposerAttachments.tsx
- web/oss/src/components/AgentChatSlice/components/ToolActivity.tsx
- web/oss/src/components/Playground/Components/Menus/PlaygroundVariantHeaderMenu/index.tsx
- web/oss/src/components/AgentChatSlice/components/AgentMessage.tsx
- web/oss/src/components/Playground/Components/PlaygroundHeader/index.tsx
- web/oss/src/components/AgentChatSlice/components/AgentChatConversation.tsx
- web/oss/src/components/AgentChatSlice/components/ToolPart.tsx
- web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx
…roperty PR #4913 renamed the agent-template's top-level `model` schema property to `llm` (the nested `parameters.agent` restructure). This branch's drawer bodies still gated on `props.model`, so after the resync the model picker, the Authentication card, and the JSON escape hatch all rendered null — the Model & harness drawer showed only the harness cards. Repoint all six `props.model` gates to `props.llm`, and unwrap the picker schema to `props.llm.properties.model ?? props.llm` (matching the model value that already reads from `config.llm`).
…layout CR #4881: the tabs layout rendered each section's `content` inline, so the two drawer sections (Model & harness, Advanced) dropped their full two-panel drawer body — including the fixed-width version-history / compatibility side panel — directly into a tab, where that drawer chrome reads as out of place. Extract the inner controls (`modelHarnessControls`, `advancedControls`) so the wide drawer body and a new single-column `inlineContent` share them. Tabs now render `inlineContent ?? content`: just the controls, one column, no side panel. Accordion and cards keep the summary + open-drawer flow unchanged.
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx (1)
1209-1211: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winUse the harness kind schema for capability card labels.
props.harnessis the section object, while the enum labels live onharnessProps.kind; the current code can show raw IDs likepi_coreinstead of the configured display label.Proposed fix
- {enumLabel(props.harness, h) || h} + {enumLabel(harnessProps.kind, h) || h} ... - {enumLabel(props.harness, h) || h} + {enumLabel(harnessProps.kind, h) || h}Also applies to: 1329-1332
🧹 Nitpick comments (1)
web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx (1)
1137-1143: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace the fixed inline width style with Tailwind classes.
These skeleton widths are static, so they don’t need
style={{...}}.Proposed fix
- {[42, 32, 38].map((w, i) => ( + {["w-[42%]", "w-[32%]", "w-[38%]"].map((widthClass, i) => ( <div key={i} className="flex items-center gap-2"> <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--ag-c-EAEFF5,`#eaeff5`)]" /> <span - className="h-2 rounded bg-[var(--ag-c-EAEFF5,`#eaeff5`)]" - style={{width: `${w}%`}} + className={cn("h-2 rounded bg-[var(--ag-c-EAEFF5,`#eaeff5`)]", widthClass)} /> </div> ))}As per coding guidelines,
web/**/*.{ts,tsx,css}should prefer Tailwind utility classes over inlinestyle={{...}}.Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 05a26c73-5f22-496d-a3cb-b962b046e76d
📒 Files selected for processing (1)
web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/AgentTemplateControl.tsx
CR #4881 (14:43 incremental review): the capability cards read their display label from `enumLabel(props.harness, h)`, but after the nested-schema restructure `props.harness` is the section object — the enum labels live on `harnessProps.kind`. So the cards rendered raw ids (`pi_core`) instead of the configured labels. Repoint both call sites (1210, 1331). Also swap the version-history skeleton's inline `style={{width}}` for Tailwind width classes, per the web style guideline (prefer utilities over inline style).
dosubot
Bot
added
size:XXL
Contributor
Author
|
@coderabbitai resolve |
✅ Action performedComments resolved. Approval is disabled; enable |
This was referenced Jun 28, 2026
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 agent config panel rendered every section's full editor inline, so Instructions, Model & harness, and Advanced were always expanded at once. The panel read as crowded, and there was no room for richer per-section UX. Most of these configs change rarely, so keeping them fully open is the wrong default.
This PR extends the pattern already used for Tools and Skills (a compact summary in the panel, the real editing in a drawer) to the remaining sections, and trims the agent config chrome.
Branches off
big-agents; target isbig-agents.Changes
Instructions becomes a file list. Each file row opens an editor drawer built on
MarkdownEditorwith a markdown toolbar, an Edit/Preview toggle, and an Expand action. Rows render a real (sanitized) markdown preview via a new lightweightMarkdownPreviewin@agenta/ui. v1 ships the list over the singleagents_mdfield, structured so it scales to multiple files with no rework.Model & harness and Advanced are singletons, so the accordion header itself opens a drawer (
ConfigAccordionSectiongained anonOpenprop; a sharedSectionDrawerwraps the body). Draft/Save is a whole-config snapshot taken on open and restored on Cancel.Agent-only chrome cleanup (gated on the
agent_configschema marker, so the prompt and evaluator playgrounds are unchanged):Tests / notes
tscandeslintclean on@agenta/ui,@agenta/entity-ui, and the touched@agenta/ossfiles. The pre-existing@agenta/ossbaseline type errors onbig-agentsare unrelated and untouched.@agenta/entity-uihas no unit test infra, so verification is type/lint plus live QA.harness_capabilitiesfrom/inspectexposes model, provider, connection, and hosting, but not which tools, skills, or MCP servers a harness supports. So the compatibility panel reasons about the model and auth only. Tool/skill/MCP harness gating is deferred until the backend contract exists. Documented indocs/design/agent-config-section-drawers/design.md.What to QA