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

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 Summaries (2 snapshots, latest commit 8c23c97)

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

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: 26 · Output: 11.4K · Cached: 737.2K}

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

[lambertjosh]

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