The Claude panel is panes, each scrolling on its own
Explore this workspace.
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
- Open the docked Claude panel and click any pane header to collapse it. The others take its space.
- 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:piesPies 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, not1 1 auto. Withautothe 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
disabledon 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.