Agent form rework: header, template picker, 4-tab body + usage_statement#2107
Merged
Conversation
Drop the avatar/icon, back button, and template+category context bar; merge team and template into one i18n'd subtitle line. Page backdrop now surface-container, form card surface-main, no drop shadow — scoped to this modal via a new FullPageModal `background` prop so other full-page modals (PromptsPage, MermaidBlock, MarkdownPreviewModal) are unaffected. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Wrap the template browser's pod filter and card grid in a titled surface-container-high panel explaining the step. Restyle TemplateCard: name in --primary, category label as plain muted text instead of a colored pill. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Container background surface-container-low (was -high). Card border 1px outline-muted, outline-retreat on hover, no transition (instant). Category + pod labels moved from card header to footer. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Name -> body-large/--primary, description -> body-medium/--on-surface, category/pod labels -> label-small/--on-surface-muted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Base state was already surface-container; hover and selected states now use the same token instead of -high/-low, so only the border color/width signals interaction — no background shift. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Restructure the agent creation/edit form body around a full-width ButtonGroup tab strip (variant="radio", same pattern as the theme/language pickers) with 4 top-level tabs: Général (name/role/ description + every non-Prompts tuning field, preserving existing template ui.group taxonomy unchanged), Prompts, Outils, and a new Engagement tab holding a required "Cas d'usage" statement. Add usage_statement end to end: ManagedAgentTuning (stored in the existing tuning_json blob, no migration), ManagedAgentInstanceSummary, Create/UpdateAgentInstanceRequest (hard-required at creation, optional on update like `role` so the enable/disable toggle's partial PATCH is unaffected), CLI enroll command, duplicate-agent flow, and the self-test provisioning pipeline. Regenerated the control-plane OpenAPI client. Required-on-edit for pre-#2105 agents is enforced by the form (same pattern as display_name), not the API contract. Add a reusable fullWidth prop to the shared ButtonGroup/ButtonGroupItem atoms for the new tab strip. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Drop the surface-container background (transparent instead). Default border --outline-retreat, --outline on hover. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Add the standard 8% on-surface state layer on hover (--state-on-surface-hover), matching the pattern used across base components (Button, FolderRow, ...). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Tool name -> body-large/--on-surface, description -> body-medium/ --on-surface-retreat, matching the template card's typography pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
.header and .subForm are full-bleed children whose background reached the card's rounded border and relied on the parent's overflow: hidden to clip the corner. That clip uses a mask, not an actual rounded fill, so the border's antialiasing didn't composite cleanly with it — most visible as an uneven/thinner border right on the arc, more noticeable once :hover repaints the border color. Give each full-bleed child its own matching corner radius (inset by the border width) so the background is actually rounded there instead of being clipped square. .header covers all four corners when it's the only child, top-only when a config sub-form follows; .subForm (always last when present) covers the bottom two. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
More-menu icon color on-surface -> on-surface-retreat (matches the info button). Pull it closer to the card's top-right corner via a negative top/right margin canceling part of .agentInfo's padding, so it sits as close to its corner as the info button sits to the bottom-left one. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Icon-leading rows used --spacing-xs (8px) left padding; the agent card's more-menu (and every other icon-led MenuItem consumer) reads better at --spacing-s (12px). gap (--spacing-xs, 8px) and padding-right (--spacing-m, 16px) already matched the target values. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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
2 participants
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.
Summary
Multi-pass rework of the agent creation/edit form (
AgentFormModaland its sub-components), plus small consistency fixes to shared components discovered along the way.--surface-container, form card--surface-main, no drop shadow — scoped to this modal only via a newFullPageModalbackgroundprop.--surface-container-lowcontainer.TemplateCardrestyle: transparent background with a hover state layer, 1px--outline-retreat/--outlineborder, typography tokens (namebody-large/--primary, descriptionbody-medium/--on-surface, category/pod labelslabel-small/--on-surface-muted), category/pod moved to a footer, plus a corner-rendering fix onCapabilityCard(rounded full-bleed children instead of clipped-by-parent).usage_statement: the form body moves to a full-widthButtonGrouptab strip (Général / Prompts / Outils / Engagement). Général absorbs every non-Prompts tuning field (no templateui.groupchanges). New required "Cas d'usage" field, added end-to-end:ManagedAgentTuning/ManagedAgentInstanceSummary/Create·UpdateAgentInstanceRequest(stored in the existingtuning_jsonblob, no DB migration), CLI, duplicate-agent flow, self-test pipeline, OpenAPI regen.MenuItemicon-rowpadding-lefttoken fix (8px → 12px, affects every icon-led menu in the app, not just this one).Test plan
make code-quality(backend + frontend) — cleanmake test— backend 505/505, frontend 597/597usage_statementstaying optional onUpdateAgentInstanceRequestdoesn't break the partial-PATCH toggle), duplicate flow, light + dark themesusage_statementcontract treatment (datedCONTROL-PLANE-PRODUCT-CONTRACT.mdentry, no separate RFC — same precedent asroleAgent card redesign: origin/template line, agent role field, toolbar restructure #2076) matches what you'd want given its platform-safety framing🤖 Generated with Claude Code