feat(tui): make Context and Token Usage sidebar sections collapsible

[IamCoder18]

Issue

Closes #11985

Context

The TUI session sidebar was inconsistent: Modified Files / LSP / MCP / Todo / Background Processes already collapsed on header click, but Context and the three Token Usage sub-sections (Token Usage, Terminal Bench 2.0, Models) were always expanded. This made the sidebar noisier than necessary on long sessions and forced users to scan past content they couldn't hide.

This change brings those sections in line with the existing collapsible pattern (header click toggles a indicator, content collapses, an inline one-line summary stays visible when folded) so the sidebar behaves predictably. The Balance section is intentionally left alone as it is not part of the scrollable sidebar (it's part of the footer).

Implementation

• packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx uses the same createSignal + Show toggle pattern that's already in files.tsx / lsp.tsx / mcp.tsx / todo.tsx. When folded, the header collapses to a single Context (N tokens · X% used · $Y spent) summary so the user still sees the three numbers without the three rows of vertical space.

• packages/opencode/src/kilocode/plugins/sidebar-usage.tsx extracts a local Collapsible helper above View (theme + title + optional collapsedLabel + children) so the boilerplate isn't duplicated three times. Each of the three sub-sections is wrapped:

  • Token Usage: collapsed label is Cost $X · In N · Out M (uses usage()?.totals).
  • Terminal Bench 2.0: collapsed label is the score + cost/attempt pair from the terminalBench model metadata.
  • Models: no extra summary — Models (N) already encodes the count in the title, matching what MCP does (MCP (N active[, M errors])).

I deliberately did not promote Collapsible into the shared packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/ directory alongside the upstream-owned plugins. The other sidebar plugins already implement the same pattern inline with length > 2 guards; unifying them would touch shared upstream code (touching merge surface for very little user-visible benefit) without affecting any user-visible behavior.

Balance (packages/opencode/src/kilocode/plugins/sidebar-footer.tsx) is intentionally not modified.

Screenshots / Video

2026-07-06.16-53-18.mp4

How to Test

Manual/local verification

• Verified manually by collapsing and expanding the sections
• Verified the summary updates in real time.

Reviewer test steps

1. Open (or start) a session and watch the left sidebar populate.
2. Click the ▼ Context header — confirm it flips to ▶ and the body rows collapse into a one-line summary; click again to re-expand.
3. Repeat for Token Usage, Terminal Bench 2.0 (visible when the current model has terminalBench metadata), and Models. Each must toggle independently.
4. Verify summary updates in real time.

Checklist

• Issue linked above, or exception explained
• Tests/verification described
• Screenshots/video included for visual changes, or marked N/A
• Changeset considered for user-facing changes
• I personally reviewed the diff and can explain the changes, including any AI-assisted work.

Get in Touch

Discord: @IamCoder18

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

The incremental diff since the last review consists solely of splitting the arrow indicator into its own <text> element in context.tsx, matching the sibling files.tsx/lsp.tsx/mcp.tsx/todo.tsx collapsible pattern. This resolves the previously flagged suggestion about the unused gap={1}. No new bugs, security, performance, or fork-hygiene issues found.

Files Reviewed (2 files)

• packages/tui/src/feature-plugins/sidebar/context.tsx
• .changeset/collapsible-context-sidebar.md

Previous Review Summaries (4 snapshots, latest commit 7d16c5f)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 7d16c5f)

Status: 1 Issue Found | Recommendation: Merge (optional cleanup)

The branch was rebased/restructured since the last review — the diff now touches only packages/tui/src/feature-plugins/sidebar/context.tsx (plus the changeset). The previously reviewed packages/opencode/src/kilocode/plugins/sidebar-usage.tsx is no longer part of this PR's diff, so the earlier JSX import suggestion on that file no longer applies here.

The collapsible toggle added to context.tsx is correctly wrapped in kilocode_change markers (shared upstream path) and mirrors the existing files.tsx/lsp.tsx/mcp.tsx/todo.tsx collapsible pattern. One minor implementation inconsistency was found.

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	1

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
packages/tui/src/feature-plugins/sidebar/context.tsx	51	Arrow indicator is inlined via a literal trailing space instead of its own <text> child, leaving the box's gap={1} unused; sibling sections split the arrow into its own element

Files Reviewed (2 files)

• packages/tui/src/feature-plugins/sidebar/context.tsx - 1 issue
• .changeset/collapsible-context-sidebar.md

Fix these issues in Kilo Cloud

Previous review (commit 0a6204a)

Status: No Issues Found | Recommendation: Merge

Re-verified against current HEAD (0a6204a). No new commits since the last review; the diff still consists solely of the collapsible-section feature in context.tsx (correctly wrapped in kilocode_change markers as a shared upstream file) and the Collapsible helper extraction in sidebar-usage.tsx (kilo-owned path, no markers needed, JSX now imported as type JSX). No bugs, security, performance, fork-hygiene, or style issues found in the changed lines.

Files Reviewed (2 files)

• packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx
• packages/opencode/src/kilocode/plugins/sidebar-usage.tsx

Previous review (commit 8c23c97)

Status: No Issues Found | Recommendation: Merge

The previous JSX import suggestion has been addressed (now import { ..., type JSX } from "solid-js"). The new commit also adds kilocode_change markers to the shared context.tsx changes, which is the correct convention for modifications to non-kilocode upstream files. No new bugs, fork-hygiene, or style issues found in the incremental diff.

Files Reviewed (2 files)

• packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx
• packages/opencode/src/kilocode/plugins/sidebar-usage.tsx

Previous review (commit e4ce4b7)

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	1

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
packages/opencode/src/kilocode/plugins/sidebar-usage.tsx	2	JSX imported as a value but only used as a type; codebase convention is type JSX

The collapsible pattern added to context.tsx and the new Collapsible helper in sidebar-usage.tsx closely mirror the existing toggle pattern already used in files.tsx / lsp.tsx / mcp.tsx / todo.tsx (same ▼/▶ header-click toggle + inline collapsed summary), so no fork-hygiene or behavioral concerns found. context.tsx is a shared (non-kilocode) path, but this addition doesn't need kilocode_change markers since it extends a pattern that's already native/unmarked in the sibling upstream sidebar files.

Note: this is a user-facing UI change (new collapsible sections) with no changeset in .changeset/. Worth adding one per the contributing guide, though not a blocker.

Fix these issues in Kilo Cloud

Files Reviewed (2 files)

• packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx
• packages/opencode/src/kilocode/plugins/sidebar-usage.tsx - 1 issue

---

_{Reviewed by claude-sonnet-5 · Input: 14 · Output: 2.6K · Cached: 268.2K}

_{Review guidance: REVIEW.md from base branch main}

[lambertjosh]

Thanks @IamCoder18 - this LGTM but want to have another review first.

[johnnyeric]

Hey @IamCoder18, sorry for the late review. The change looks good. Since this PR was opened, Token Usage, Models, and Terminal Bench have already been made collapsible on main, and the Context sidebar code has moved to packages/tui.

Could you update the branch with the latest main, resolve the conflicts, and apply the change to the remaining sections? Please also add a patch changeset for this user-facing change. Thanks!

[IamCoder18]

Yes, sure

[IamCoder18]

@johnnyeric Done. The change now only makes Context collapsible, and shows a short summary of context percent and cost when collapsed.

[johnnyeric]

Thanks for addressing it! Just merged.