feat(site): unify agent settings pages with CollapsibleSection cards#23970
Closed
DanielleMaywood wants to merge 1 commit into
Closed
feat(site): unify agent settings pages with CollapsibleSection cards#23970DanielleMaywood wants to merge 1 commit into
DanielleMaywood wants to merge 1 commit into
Conversation
f5a49d2 to
47c1e4d
Compare
352131b to
dd25adc
Compare
Merge the agent settings Limits and Usage pages into a single Spend page with collapsible card sections for default limits, group limits, and per-user spend. Add CollapsibleSection component, URL-based date range picker on Analytics page, redirect old routes, and standardize layout spacing across all agent settings pages.
dd25adc to
5262cc7
Compare
Contributor
Author
|
Superseded by stacked PRs:
|
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Unifies agent settings UI around a consistent
CollapsibleSectioncard pattern and merges the Limits + Usage pages into a single Spend page.Spend page (
/agents/settings/spend): merges the old Limits and Usage pages into one view with three collapsible sections — default spend limit, group limits, and per-user spend with drill-in. Old routes redirect.Behavior page: every section (Instructions, Context compaction, System Instructions, Virtual Desktop, Workspace Autostop, Kyleosophy) now uses
CollapsibleSectioncards instead of flat<h3>headers with<hr>dividers. Admin sections showAdminBadgeinline with the title. Toggle switches sit in the header action slot. Cancel/Save buttons are always visible (disabled when idle) for consistency.CollapsibleSection component: bordered card with clickable header (title, description, badge, action slots), chevron toggle,
<hr>divider. Usesitems-centerfor title-only headers,items-startwhen a description is present. Action slot stops propagation so interactive controls don't toggle the section.Other changes:
DateRangePickeron the personal Analytics pagespace-y-6layout across all agent settings pagesAvatarData: addedmin-w-0to flex containers so truncation works in constrained layoutsImplementation details
Navigation
/agents/settings/limits)/agents/settings/spend)/agents/settings/usage)Deleted files
AgentSettingsLimitsPage.tsx,AgentSettingsUsagePage.tsx,AgentSettingsUsagePageView.tsxAgentSettingsUsagePageView.stories.tsxLimitsTab/LimitsTab.tsx,LimitsTab/index.tsKey decisions
border-solidrequired on all visible borders (codebase convention)bg-surface-secondaryon CollapsibleSection cards (per design review)-mx-4only on Analytics page; Spend/drill-down tables use default Table stylinghideHeader?: booleanto suppress built-in headers when wrapped in CollapsibleSectionAdminBadgehasml-auto— neutralized in CollapsibleSection with[&>*]:ml-0wrapper