feat(sessions): context breakdown popover

[k11kirky]

Problem

The context usage indicator previously showed only a tooltip with raw token counts. Users had no way to see how their context window was being consumed across different categories (system prompt, tools, rules, skills, MCP, subagents, conversation).

Changes

• Replaced the tooltip on ContextUsageIndicator with a Radix Popover that opens a ContextBreakdownPopover panel when clicked.
• ContextBreakdownPopover displays the aggregate token count, percentage full, a visual progress bar, and a per-category breakdown with color-coded segments when breakdown data is available. Before the first response, a placeholder message is shown instead.
• The progress bar renders as a segmented, multi-color bar when breakdown data exists, or a single-color bar based on overall usage level otherwise.
• Extracted shared utilities (getOverallUsageColor, formatTokensCompact, and CONTEXT_CATEGORIES) into contextColors.ts so they can be reused across both components.
• The indicator text now also shows the percentage inline (e.g. 74K/200K · 37%).

How did you test this?

Added unit tests in ContextBreakdownPopover.test.tsx covering:

• Header rendering with aggregate token counts and percentage.
• Placeholder copy when breakdown data is null.
• Only non-zero categories appearing in the breakdown list.

Publish to changelog?

no

[k11kirky]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(billing): single-source usage via main-process relay #2358
• feat(agent): fill Skills/MCP/Rules categories in context breakdown #2357
• feat(sessions): context breakdown popover #2353 👈 (View in Graphite)
• feat(agent): emit per-category context token breakdown #2352
• feat(billing): threshold notification service with persisted dedupe #2351
• feat(billing): always-on Free sidebar bar with reset time #2350
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
apps/code/src/renderer/features/sessions/components/ContextUsageIndicator.tsx:27-32
`Popover.Trigger` renders a `<button>` element by default. Wrapping another `<button>` inside it produces a `<button>` inside a `<button>`, which is invalid HTML — browsers strip the outer element and break the Radix focus/aria wiring, so the popover may not open reliably and screen readers will see a confusing interactive structure. Add `asChild` so Radix reuses the inner button as the trigger directly.

```suggestion
      <Popover.Trigger asChild>
        <button
          type="button"
          className="flex cursor-pointer select-none items-center gap-1 bg-transparent"
          aria-label={`Context usage: ${percentage}%`}
        >
```

### Issue 2 of 2
apps/code/src/renderer/features/sessions/components/ContextBreakdownPopover.test.tsx:22-41
The first two tests render exactly the same component (`usageWith(null)`) — the `render` call is duplicated. Merging them into a single `null`-breakdown test (or using a parameterised table for `breakdown = null` vs `breakdown = {...}`) removes the redundancy and aligns with the team's preference for parameterised tests.

```suggestion
  it("renders the header and placeholder copy when breakdown is null", () => {
    render(
      <Theme>
        <ContextBreakdownPopover usage={usageWith(null)} />
      </Theme>,
    );
    expect(screen.getByText(/74K \/ 200K tokens/)).toBeInTheDocument();
    expect(screen.getByText("37% full")).toBeInTheDocument();
    expect(
      screen.getByText(/Detailed breakdown available after the first response/),
    ).toBeInTheDocument();
  });
```

_{Reviews (1): Last reviewed commit: "feat(sessions): context breakdown popove..." | Re-trigger Greptile}

[greptile-apps]

Popover.Trigger renders a <button> element by default. Wrapping another <button> inside it produces a <button> inside a <button>, which is invalid HTML — browsers strip the outer element and break the Radix focus/aria wiring, so the popover may not open reliably and screen readers will see a confusing interactive structure. Add asChild so Radix reuses the inner button as the trigger directly.

Suggested change

	<Popover.Trigger>
	<button
	type="button"
	className="flex cursor-pointer select-none items-center gap-1 bg-transparent"
	aria-label={`Context usage: ${percentage}%`}
	>
	<Popover.Trigger asChild>
	<button
	type="button"
	className="flex cursor-pointer select-none items-center gap-1 bg-transparent"
	aria-label={`Context usage: ${percentage}%`}
	>

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/sessions/components/ContextUsageIndicator.tsx
Line: 27-32

Comment:
`Popover.Trigger` renders a `<button>` element by default. Wrapping another `<button>` inside it produces a `<button>` inside a `<button>`, which is invalid HTML — browsers strip the outer element and break the Radix focus/aria wiring, so the popover may not open reliably and screen readers will see a confusing interactive structure. Add `asChild` so Radix reuses the inner button as the trigger directly.

```suggestion
      <Popover.Trigger asChild>
        <button
          type="button"
          className="flex cursor-pointer select-none items-center gap-1 bg-transparent"
          aria-label={`Context usage: ${percentage}%`}
        >
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

The first two tests render exactly the same component (usageWith(null)) — the render call is duplicated. Merging them into a single null-breakdown test (or using a parameterised table for breakdown = null vs breakdown = {...}) removes the redundancy and aligns with the team's preference for parameterised tests.

Suggested change

	it("renders the header with aggregate tokens", () => {
	render(
	<Theme>
	<ContextBreakdownPopover usage={usageWith(null)} />
	</Theme>,
	);
	expect(screen.getByText(/74K \/ 200K tokens/)).toBeInTheDocument();
	expect(screen.getByText("37% full")).toBeInTheDocument();
	});
	it("shows the placeholder copy when breakdown is missing", () => {
	render(
	<Theme>
	<ContextBreakdownPopover usage={usageWith(null)} />
	</Theme>,
	);
	expect(
	screen.getByText(/Detailed breakdown available after the first response/),
	).toBeInTheDocument();
	});
	it("renders the header and placeholder copy when breakdown is null", () => {
	render(
	<Theme>
	<ContextBreakdownPopover usage={usageWith(null)} />
	</Theme>,
	);
	expect(screen.getByText(/74K \/ 200K tokens/)).toBeInTheDocument();
	expect(screen.getByText("37% full")).toBeInTheDocument();
	expect(
	screen.getByText(/Detailed breakdown available after the first response/),
	).toBeInTheDocument();
	});

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/sessions/components/ContextBreakdownPopover.test.tsx
Line: 22-41

Comment:
The first two tests render exactly the same component (`usageWith(null)`) — the `render` call is duplicated. Merging them into a single `null`-breakdown test (or using a parameterised table for `breakdown = null` vs `breakdown = {...}`) removes the redundancy and aligns with the team's preference for parameterised tests.

```suggestion
  it("renders the header and placeholder copy when breakdown is null", () => {
    render(
      <Theme>
        <ContextBreakdownPopover usage={usageWith(null)} />
      </Theme>,
    );
    expect(screen.getByText(/74K \/ 200K tokens/)).toBeInTheDocument();
    expect(screen.getByText("37% full")).toBeInTheDocument();
    expect(
      screen.getByText(/Detailed breakdown available after the first response/),
    ).toBeInTheDocument();
  });
```

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!