Thread panel

The session history, one rail

Thread panel is the left edge of a chat or agent product: the brand, a new-thread action with its shortcut hint, standing controls, the grouped history, and the profile footer. It is fully controlled and surface-less, so the host owns the active thread, the navigation, and the band colour it sits on. It began as the agent workbench template's threads panel and graduated into the library once the shape proved out.

The full anatomy

Every section is optional and renders only when its props do. Here the panel carries all of them; clicking a thread moves the controlled selection, and the history is the one region that scrolls.

Skylark

Collapse to a rail

With onExpandedChange wired, the header grows a toggle and the panel folds to App sidebar's 64px icon rail: the panel animates its own width, labels fade under the sweeping clip, rows become circular icon buttons, and the history steps out of the way. Collapsed, the logo is the expand button. Try it.

Skylark

Threads alone

With nothing but groups, the panel is a bare history list. A flat list is one group with no label.

Timestamps on the trailing edge

Each thread can carry a small meta caption, the usual home for a relative time.

Rows as links

Give a thread an href and its row renders as a real anchor, with the active row announcing aria-current. Rendered this way the panel needs no callbacks at all, so it can come straight from a Server Component.