Skip to content

feat(site): unify agent settings pages with CollapsibleSection cards#23970

Closed
DanielleMaywood wants to merge 1 commit into
mainfrom
danielle/merge-spend-pages
Closed

feat(site): unify agent settings pages with CollapsibleSection cards#23970
DanielleMaywood wants to merge 1 commit into
mainfrom
danielle/merge-spend-pages

Conversation

@DanielleMaywood

@DanielleMaywood DanielleMaywood commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

🤖 This PR was written by Coder Agent on behalf of Danielle Maywood 🤖

Unifies agent settings UI around a consistent CollapsibleSection card 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 CollapsibleSection cards instead of flat <h3> headers with <hr> dividers. Admin sections show AdminBadge inline 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. Uses items-center for title-only headers, items-start when a description is present. Action slot stops propagation so interactive controls don't toggle the section.

Other changes:

  • URL-based DateRangePicker on the personal Analytics page
  • Sidebar: "Limits" + "Usage" → "Spend", "Analytics" → "Insights"
  • Standardized space-y-6 layout across all agent settings pages
  • AvatarData: added min-w-0 to flex containers so truncation works in constrained layouts
  • Conversation titles in drill-down tables truncate with tooltip on hover
  • User names in spend table truncate with tooltip on hover
Implementation details

Navigation

Before After
Limits (/agents/settings/limits) Spend (/agents/settings/spend)
Usage (/agents/settings/usage) (redirects to Spend)

Deleted files

  • AgentSettingsLimitsPage.tsx, AgentSettingsUsagePage.tsx, AgentSettingsUsagePageView.tsx
  • AgentSettingsUsagePageView.stories.tsx
  • LimitsTab/LimitsTab.tsx, LimitsTab/index.ts

Key decisions

  • border-solid required on all visible borders (codebase convention)
  • No bg-surface-secondary on CollapsibleSection cards (per design review)
  • Tables bleed via -mx-4 only on Analytics page; Spend/drill-down tables use default Table styling
  • Sub-components gained hideHeader?: boolean to suppress built-in headers when wrapped in CollapsibleSection
  • AdminBadge has ml-auto — neutralized in CollapsibleSection with [&>*]:ml-0 wrapper

@github-actions github-actions Bot added the community Pull Requests and issues created by the community. label Apr 2, 2026
@DanielleMaywood DanielleMaywood changed the title feat(site/AgentsPage): merge Limits + Usage into unified Spend page feat(site): merge agent settings Limits + Usage into unified Spend page Apr 2, 2026
@DanielleMaywood DanielleMaywood force-pushed the danielle/merge-spend-pages branch 15 times, most recently from f5a49d2 to 47c1e4d Compare April 2, 2026 13:54
@DanielleMaywood DanielleMaywood changed the title feat(site): merge agent settings Limits + Usage into unified Spend page feat(site): unify agent settings pages with CollapsibleSection cards Apr 2, 2026
@DanielleMaywood DanielleMaywood force-pushed the danielle/merge-spend-pages branch 6 times, most recently from 352131b to dd25adc Compare April 2, 2026 17:14
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.
@DanielleMaywood DanielleMaywood force-pushed the danielle/merge-spend-pages branch from dd25adc to 5262cc7 Compare April 2, 2026 17:24

Copy link
Copy Markdown
Contributor Author

Superseded by stacked PRs:

  1. feat(site): add CollapsibleSection component and shared utilities #23990 — CollapsibleSection + shared fixes
  2. feat(site): wrap behavior page sections in CollapsibleSection cards #23991 — Behavior page CollapsibleSection cards
  3. feat(site): add DateRangePicker to analytics page #23992 — Analytics DateRangePicker
  4. feat(site): merge Limits + Usage into unified Spend page #23993 — Unified Spend page

@github-actions github-actions Bot locked and limited conversation to collaborators Apr 2, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

community Pull Requests and issues created by the community.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant