# feat\(web\): redesign usage insights · PR \#7147 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/7147)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: merged

Source repository: pingdotgg/t3code

Source branch: ui-refresh/usage

Target branch: main

Head commit: 3fa0aedff1dad360959cfb31658c3243a01d5220

[Discussion and reviews](https://git.cafe/pingdotgg/t3code/pull/7147)

[Commits](https://git.cafe/pingdotgg/t3code/pull/7147/commits?format=markdown)

[Files changed](https://git.cafe/pingdotgg/t3code/pull/7147/diffs?format=markdown)

## Description

---

## What changed

- Reworks Usage around provider summaries, API cost estimates, hourly and daily curves, clamped hover details, and a simpler totals breakdown.
- Adds per-provider session counts while retaining source-fingerprint ownership so the same transcript directory is counted once across environments.
- Uses the shared workspace header from #7153, introduces a content frame shared by Settings and Usage, and adopts segmented controls.


## Screenshots

_Direct parent on the left; this PR on the right. Same viewport and copied application state._

<table>
<tr><th>Before</th><th>After</th></tr>
<tr>
<td><img src="https://github.com/user-attachments/assets/fd4150a7-58b8-4349-947f-e8e0b7eddf7c" alt="Usage page before" width="500"></td>
<td><img src="https://github.com/user-attachments/assets/327830af-b085-4ea7-bcff-4e57bf418c97" alt="Usage page after" width="500"></td>
</tr>
</table>
## Why

Usage was mixed with unrelated workspace, Pull Requests, terminal, and tool-call work. This layer keeps the presentation and its small shared aggregation change together for one review.

## Validation

- `UsageProviderChart` tests
- `usageMerge` tests, including duplicate-source ownership and empty-provider handling
- Affected-package typechecks
- Changed-file lint and formatting checks

## Stack order

1. #7153 workspace and navigation
2. #7147 Usage, this PR
3. #7148 Pull Requests
4. #7149 terminal
5. #7150 composer
6. #7151 tool lifecycle projection
7. #7152 tool activity UI

Built with GPT-5.6-sol in the Codex harness.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes usage aggregation (`ProviderTotals.sessions`, provider list shape) and a large Usage UI refactor; merge logic is tested but displayed totals/session labels depend on correct per-provider session attribution across environments.
> 
> **Overview**
> **Usage** moves metric, time window, and breakdown controls into the shared workspace header—segmented `ToggleGroup`s on large screens and compact `Select`s on small ones—with the active date range shown in the breadcrumb.
> 
> The page layout uses `WorkspacePageHeader` and `WorkspacePageContainer` (`wide`), simplifies the headline and provider sidebar (stable `PROVIDER_ORDER`, session counts, chart color dots; no metric-based reordering or share bars), trims the totals strip, and swaps custom bordered buttons for segmented toggles in the breakdown section.
> 
> **Shared UI:** new `WorkspacePageContainer` with `readable` / `wide` / `expanded` max-widths; Settings adopts it instead of local width classes. `Toggle` / `ToggleGroup` gain a **segmented** variant (default size when variant is segmented). `WorkspaceBreadcrumbSeparator` accepts an optional `className`.
> 
> **Data / chart:** `usageMerge` adds **`sessions` per provider** (from owned source `distinctSessions`, still deduped by fingerprint) and tests for empty-provider omission. `UsageProviderChart` repositions the hover tooltip from cursor-local coordinates (clamped, `ResizeObserver`); **`UsageChartLegend`** is removed.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 3fa0aedff1dad360959cfb31658c3243a01d5220. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- Macroscope's pull request summary starts here -->
<!-- Macroscope will only edit the content between these invisible markers, and the markers themselves will not be visible in the GitHub rendered markdown. -->
<!-- If you delete either of the start / end markers from your PR's description, Macroscope will append its summary at the bottom of the description. -->
> [!NOTE]
> ### Redesign the Usage Insights page with responsive controls, provider session counts, and unified header components
> - Replaces the Usage page layout with a breadcrumb header containing responsive metric/period controls (segmented toggles on desktop, selects on mobile), removing the in-chart legend and metric toggle
> - Adds per-provider session counts to `mergeUsage` output via a new `sessions` field on `ProviderTotals`; providers with no sessions and no usage are omitted from results
> - Simplifies the Totals section to show only label/value pairs, removing period averages, cache share details, and provider bar visualizations; providers now display in fixed `PROVIDER_ORDER`
> - Introduces shared layout primitives: `WorkspacePageHeader` (standardizes electron drag-region and native-control insets) and `WorkspacePageContainer` (standardized width presets), replacing bespoke header elements across chat, settings, and onboarding routes
> - Moves the settings sidebar Back button into a new `SidebarUtilityMenu` component shared with the main sidebar footer; the back action now prefers `window.history.back()` before falling back to navigating to `/`
> - Adds `segmented` size and variant to `Toggle`/`ToggleGroup` for the new control styling
> - Behavioral Change: `Metric` component no longer renders a detail line; `UsageSkeleton` no longer accepts a `resolution` prop
>
> <!-- Macroscope's review summary starts here -->
>
> <sup><a href="https://app.macroscope.com">Macroscope</a> summarized 8156179.</sup>
> <!-- Macroscope's review summary ends here -->
>
<!-- Macroscope's pull request summary ends here -->