Sidebars look simple until you add collapse state, mobile drawer behavior, nested groups, badges, active-route highlighting, and an agent that wants to navigate. By the time you bolt on persistence and a11y, you've written 400 lines of code for "a list of links."

Compound layout primitive with Sidebar.Group and Sidebar.Item children. Items take icons, badges, and active state; groups expand and collapse. Stable handles on each item make agent navigation (via the MCP bridge) deterministic.

Drop <Sidebar> in your layout shell, list Sidebar.Item entries inside one or more Sidebar.Group sections, and wire the active prop to the current route. The Inertia + react-fancy app shell already does this; copy the pattern from the showcase.