feat(tui): collapsible sidebar with compact usage overview

[Zireael]

Summary

The Magic Context sidebar in OpenCode's TUI can now be collapsed into a compact 3-line view by clicking the header. This frees up sidebar space while keeping the most essential context information visible at a glance.

Suggestion 1 (I didn't implement this, but it could be a good idea): consider sorting the context categories by their size in context window. Currently the categories are displayed in static order (System ->Compartments ->Memories -> Conversation ->Tool Calls ->Tool Defs), which is also okay when you don't want to see categories jumping up and down because of re-sorting. But having an option to see a list of 'heaviest' categories taking space in context window would be preferable to some people.
Suggestion 2: Is there a separate category for 'Skills Defs', or are they bundled together with 'Tool Defs'? Skill definitions can bloat the context window as much as tool/MCP definitions, when you have too many packed in the .agents/ folders.

What changed

• Collapse via header click — clicking the Magic Context header toggles between the full expanded sidebar and a compact summary. The collapsed header shows real-time context usage (percentage and absolute tokens) instead of the brand title.
• State persisted across restarts — collapsed/expanded state is stored in api.kv, so it survives session restarts and window reloads.
• Compact color-coded token bar — the segmented usage bar shrinks to a single row with proportional flexGrow-based segments, filling the full sidebar width. Includes a "Free" segment (dim gray ░) for unused context, with token-count labels overlaid on wide-enough segments.
• Smart status line — the third line prioritises active operations: historian compacting, dreamer running, pending queue, or an at-rest summary of compartments/facts/memories.
• No visual gap — the <box marginTop={1}> wrapper that created a blank line between the collapsed header and the status bar is removed.

Under the hood, the bar rendering changed from fixed-character fill ("█".repeat(w)) to flexGrow-proportional segment boxes with backgroundColor, so the bar naturally stretches to the full row width regardless of the sidebar's rendered size.

---

Summary by cubic

Make the Magic Context sidebar collapsible with a compact 3‑line overview that frees space while keeping usage visible. Compact bar labels are now configurable via tui.compact_bar in magic-context.jsonc; collapse state persists across restarts.

• New Features

  • Click the header to toggle collapse/expand (shows ▶/▼); expanded view is unchanged.
  • Collapsed header shows usage vs threshold and token counts (e.g., 47.5% / 65%, 111K / 180K).
  • Compact color‑coded bar fills the full width, adds a dim “Free” segment; width‑aware labels with optional “Free” suffix and thresholds from tui.compact_bar (label_threshold, free_label_threshold, show_free_label).
  • Smart status line prioritizes active work (historian, dreamer, queue) or shows compartment/fact/memory counts.
  • Added tui.sidebar.collapse_default and tui.compact_bar defaults to the schema; manual toggles still persist via KV and override defaults.

• Refactors

  • Replaced fixed-character bar with flexGrow segment boxes; removed the blank line under the header in collapsed mode.
  • Extracted helpers to sidebar-utils.ts (compactTokens, collapsedStatusLine, collapsedUsageLine) with tests in sidebar-utils.test.ts; reads config and threads options into the compact bar.

^{Written for commit af386db. Summary will update on new commits. Review in cubic}

[cubic-dev-ai]

No issues found across 3 files

_{Re-trigger cubic}

[ualtinok]

This is very good idea, was thinking something similar but couldn't decide which information to keep in condensed mode. Will look into your PR and test it out.

[Zireael]

This is very good idea, was thinking something similar but couldn't decide which information to keep in condensed mode. Will look into your PR and test it out.

Thanks!
The labels aren't always perfectly centered, I know - limitation of text based ui where 'pixels' are columns and rows of text.
For the third line showing 'smart' information I made a guess what's the most useful and important. I threw in few things in there as proof of concept. I was thinking that token usage would be useful to see, but I'm using separate plugins to see that, so left it out (the feature came out just before this PR).
Alas, if you have aspirations, I haven't seen a plugin (yet) that properly displays information about input tokens, output tokens, cache % hit rate, cost per message, tokens/per second (time to first token, last message burst and sustained tok/s) etc. Probably not the info for this particular plugin, but maybe you can use it somehow.

Fun fact, it is possible to display borders around boxes, but no one seems to fence off their plugin's real estate area 🤔

Tip 1: I think I have seen a way to make it so that people don't have to put your plugin two times in opencode.jsonc and tui.jsonc. Most normies don't even know tui.jsonc exists 😃
Hmm, found it! I think this, placed in package.json would do the trick:

	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"import": "./dist/index.js"
		},
		"./tui": {
			"types": "./src/tui/index.tsx",
			"import": "./src/tui/index.tsx"
		}
	},
	"oc-plugin": [
		"server",
		"tui"
	],

Tip 2: I had an idea a while back but haven't tested it yet. Since you can click on TUI sidebar to collapse/expand a section, why not put there some buttons to execute actions done normally by slash commands? Or toggling some features on/off.
Maybe Opencode doesn't expose correct hooks for that (yet), but I think it would be a useful feature.
Also, I wonder if it is possible to make tabbed views so you can click on different tabs to cycle through information subpages...
Anyway, feel free to refactor as needed (and introduce this PR in your other plugins 😉 )