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

PR 4/4 in a stack to unify agent settings pages.

What

Merges the separate Limits and Usage pages into a single Spend page with three CollapsibleSection cards.

Why

The Limits and Usage pages were closely related — limits configure spend caps, usage shows who is spending against those caps — but lived on separate routes with no cross-references. Combining them into a single "Spend" page gives admins a single place to configure limits and immediately see the effect on usage, without navigating between tabs.

Changes

AgentSettingsSpendPage — container component. Uses mutate() (not mutateAsync) for all mutations so the view component never deals with promises or try/catch. Upsert success callbacks (form resets) are passed via onSuccess in the mutation call options rather than awaited in the view.

AgentSettingsSpendPageView — ~900 line view with 3 CollapsibleSection cards:

1. Default spend limit — deployment-wide cap with enable toggle, period selector, dollar amount input. Uses DefaultLimitController (render-prop) to isolate form state so the card can remount via key without losing parent state.
2. Group limits — per-group overrides table with inline add/edit/delete.
3. Per-user spend — user override management + paginated usage table with search, date range picker, and drill-in to ChatCostSummaryView for per-user breakdowns.

SpendDrillInView — extracted from the main view into its own component to reduce nesting. Handles the back button, user profile card, loading/error states, and ChatCostSummaryView rendering. Uses key={selectedUser.id} to remount ChatCostSummaryView when the selected user changes, which naturally resets internal pagination state.

formatUsageDateRange — added to utils/dateRange.ts (extending the utility from PR 3). Formats date ranges as "MMM D – MMM D, YYYY", subtracting 1 day from exclusive-midnight end dates.

Router — /agents/settings/limits and /agents/settings/usage routes removed, replaced by /agents/settings/spend.

Sidebar — "Limits" + "Usage" merged into "Spend" (WalletIcon), "Analytics" renamed to "Insights".

Deleted files — AgentSettingsLimitsPage, AgentSettingsUsagePageView, LimitsTab/LimitsTab.tsx, LimitsTab/index.ts. The sub-components (DefaultLimitSection, GroupLimitsSection, UserOverridesSection) gain hideHeader props and are reused inside CollapsibleSection cards.

Stories — 6 stories with play functions: full view with all sections, empty users, drill-in, drill-in + back, refetch overlay, and config loading state.

Stack

1. CollapsibleSection + shared fixes (feat(site): add CollapsibleSection component and shared utilities #23990)
2. Behavior page CollapsibleSection cards (feat(site): wrap behavior page sections in CollapsibleSection cards #23991)
3. Analytics DateRangePicker (feat(site): add DateRangePicker to analytics page #23992)
4. ➡️ This PR — Unified Spend page