All features

The Claude panel is panes, each scrolling on its own

Try the real interface

Explore this workspace.

Real Torbie UI · mock sessions
Tab bar
Loading Torbie…
Technical background

Four collapsible panes on VSCode's sidebar model, each with its own scroll container, the expanded ones sharing the panel's height. The settings page behind them is grouped to match, and a switch that depends on another is disabled rather than silently doing nothing.

The problem

The panel was one long scroll, so reaching plan usage meant scrolling past however many sessions were running, and a section growing pushed everything below it off the bottom. Its settings page was a 183-line flat list in which six switches silently did nothing whenever the one above them was off.

How it works

Four collapsible panes on VSCode's sidebar model — active session, waiting on you, other sessions, usage — each with its own header and its own scroll container, the expanded ones sharing the panel's height and a collapsed one costing exactly its header. The settings page becomes four accordion groups to match, with every dependent switch indented under the master that governs it and disabled when it is off.

Try it
  1. Open the docked Claude panel and click any pane header to collapse it. The others take its space.
  2. Open Settings → Claude → Panel contents and turn Active session off. The six rows beneath it grey out rather than staying live and inert.
Settings
  • claude.panel.usageView: pies

    Pies put both windows on one line, so an account costs one row instead of two.

Details
  • Not ng-bootstrap's accordion, deliberately: that sizes each body to its content and collapses by animating height. A pane here has to take a share of the panel and scroll inside it.
  • flex: 1 1 0, not 1 1 auto. With auto the panes split the height in proportion to how much content each holds, so one busy pane takes everything and the rest are reduced to their headers anyway — which is the problem this set out to fix.
  • Rows track by session id. Every poll builds fresh objects, so identity tracking re-created every row twice a second, dropping hover state and defeating the browser's scroll anchoring inside a pane that is now independently scrollable.
  • Waiting, Other sessions and Usage are deliberately not indented on the settings page: they are their own top-level sections and are governed by nothing above them.
  • Nothing sets disabled on an accordion item. That disables the item's own header, and every master switch lives inside the group it governs — so a disabled group could never be opened to switch it back on.
What this does not claim
  • Pane sizes are not draggable, unlike VSCode's. The expanded panes share the height evenly and that is all.
  • Which panes are open is per-machine browser storage, so it does not travel with Config Sync.
Source commits
Claude CodeAdded 2026-09-125 files+785 / −356 lines