Agent rail

The portrait with its edit affordance, the tab strip, and one scrolling pane. The header and the strip stay put while the pane changes, so switching tabs never moves the agent's face. With onCollapse wired, a chevron floats over the rail's leading corner rather than sitting in the header, which is what keeps the portrait on the centre axis. The trailing corner is left to the host, because a rail seated at a card's edge is where the card's own controls end up. A chevron and not a cross, for the same reason: two crosses a few pixels apart read as two ways to dismiss the same thing. The way back in belongs to the host. Try the tabs, then collapse it.

The rail owns the shell, not what fills it. The four panes here are built from Notification item rows and Empty state, so an activity entry and a notification are the same row. A pane that spends most of its life empty is the point of the pattern: a quiet rail means nothing is waiting on a human.

The status line takes any of the five status roles, so the rail can say the agent is connected, retrying, or offline without a second component. With no profile at all the rail is tabs alone, for a product whose agent has no face of its own.

The strip is a content-sized Segmented control, which brings its tablist semantics, sliding pill and arrow-key traversal along. Labels, never glyphs alone: four unlabelled tabs are a guess for anyone who has not used the product before. That is also what sets the rail's width, and what rules the icons out here. An icon and its gap cost 28px a tab, so four icon-and-label tabs would need 423px, which is more room than a conversation's companion should take. Labels alone fit, and a host whose own labels do not gets a sideways scroll rather than a clipped last tab.