ds
Agent
Top bar

Top bar

The 36px bar: breadcrumbs, the turn state, a centred command field and panel toggles.

Light

Dark

390px, dark

Show code

<header class="topbar">
  <div class="topbar-lead">
    <nav class="crumbs" aria-label="Breadcrumb">
      <a class="crumb" href="#">axon</a>
      <span class="crumb-sep" aria-hidden="true">/</span>
      <span class="crumb" aria-current="page">Retry queue fix</span>
    </nav>
    <span class="topbar-state" data-state="running">Running</span>
  </div>
  <button class="topbar-search" type="button" aria-keyshortcuts="Control+K"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg><span>Search or run a command</span><kbd class="kbd">Ctrl K</kbd></button>
  <div class="topbar-actions">
    <button class="btn ghost icon xs" type="button" aria-label="Toggle terminal" aria-pressed="false" data-tip="Toggle terminal" data-tip-pos="bottom"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></svg></button>
    <button class="btn ghost icon xs" type="button" aria-label="Toggle sidebar" aria-pressed="true" data-tip="Toggle sidebar" data-tip-pos="bottom"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg></button>
    <button class="btn ghost icon xs" type="button" aria-label="Toggle inspector" aria-pressed="true" data-tip="Toggle inspector" data-tip-pos="bottom"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg></button>
    <button class="btn ghost icon xs" type="button" aria-label="Settings" data-tip="Settings" data-tip-pos="bottom"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><circle cx="12" cy="12" r="4"/></svg></button>
  </div>
</header>

The top bar is 36px over the main column. Where you are sits on the left: the project, the session title and the turn state as a dot and a word. The command field is in the middle and stays centred, because the left and right groups split the free space evenly. Panel toggles and settings sit on the right as 28px ghost buttons, pressed when their panel is open.

It folds by its own width, not the window's. Under 40rem the command field becomes a search icon (its words stay in the accessible name). Under 28rem only the session title is left of the breadcrumb.

Long titles

Light

Dark

Show code

<header class="topbar">
  <div class="topbar-lead">
    <nav class="crumbs" aria-label="Breadcrumb">
      <a class="crumb" href="#">axon</a>
      <span class="crumb-sep" aria-hidden="true">/</span>
      <span class="crumb" aria-current="page">Move the retry drain out of the checkout transaction and keep the row lock under 50 ms</span>
    </nav>
    <span class="topbar-state" data-state="waiting">Needs approval</span>
  </div>
  <button class="topbar-search" type="button" aria-keyshortcuts="Control+K"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg><span>Search or run a command</span><kbd class="kbd">Ctrl K</kbd></button>
  <div class="topbar-actions">
    <button class="btn ghost icon xs" type="button" aria-label="Toggle terminal" aria-pressed="false" data-tip="Toggle terminal" data-tip-pos="bottom"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></svg></button>
    <button class="btn ghost icon xs" type="button" aria-label="Toggle sidebar" aria-pressed="true" data-tip="Toggle sidebar" data-tip-pos="bottom"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg></button>
    <button class="btn ghost icon xs" type="button" aria-label="Toggle inspector" aria-pressed="true" data-tip="Toggle inspector" data-tip-pos="bottom"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg></button>
    <button class="btn ghost icon xs" type="button" aria-label="Settings" data-tip="Settings" data-tip-pos="bottom"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><circle cx="12" cy="12" r="4"/></svg></button>
  </div>
</header>

Only the current crumb shrinks, with an ellipsis; the project and the state never do. Put the full title in the window title or the session row, not a tooltip.

Turn state

Light

Dark

Code

<span class="topbar-state" data-state="idle">Idle</span>
<span class="topbar-state" data-state="running">Running</span>
<span class="topbar-state" data-state="waiting">Needs approval</span>
<span class="topbar-state" data-state="error">Failed</span>
<span class="topbar-state" data-state="ok">Done</span>

One pill, five words. Running pulses its dot; reduced motion stops it. The colour follows the word, never replaces it.

A real field, and disabled

Light

Dark

390px, dark

Show code

<header class="topbar">
  <div class="topbar-lead">
    <button class="btn ghost icon xs" type="button" aria-label="Show the sidebar" aria-pressed="false"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg></button>
    <nav class="crumbs" aria-label="Breadcrumb"><span class="crumb" aria-current="page">Settings</span></nav>
  </div>
  <label class="topbar-search"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg><input type="search" placeholder="Filter settings" aria-label="Filter settings" /></label>
  <div class="topbar-actions">
    <button class="btn ghost icon xs" type="button" aria-label="Close settings"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
  </div>
</header>
<header class="topbar">
  <div class="topbar-lead"><nav class="crumbs" aria-label="Breadcrumb"><span class="crumb" aria-current="page">Offline</span></nav><span class="topbar-state" data-state="error">Disconnected</span></div>
  <button class="topbar-search" type="button" disabled><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg><span>Search is offline</span><kbd class="kbd">Ctrl K</kbd></button>
  <div class="topbar-actions"><button class="btn ghost icon xs" type="button" aria-label="Settings"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><circle cx="12" cy="12" r="4"/></svg></button></div>
</header>

Where the bar filters the page in place, wrap a real input in label.topbar-search; it takes the focus ring when the input has focus. A button field that cannot open, such as while offline, is disabled and says why.

API

Class	On	What it does
`.topbar`	header	The 36px bar. A size container, so it folds by its own width.
`.topbar-lead`	div	The left group: crumbs, the turn state, a leading toggle. Takes half the free space.
`.topbar-actions`	div	The right group: 28px ghost icon buttons. Takes the other half; never shrinks below its buttons.
`.topbar-search`	button, label	The centred command field, up to 20rem. A button opens the palette; a label wraps a real input.
`.topbar-state`	span	A dot and a word in a 20px pill.
`data-state`	.topbar-state	`running`, `waiting`, `error`, `ok`. No value reads as idle.
`.crumbs`	nav, ol	The breadcrumb list. In the top bar it is sans, 12px, on one line.
`.crumb`	a, button, span	One crumb, 24px high. Text truncates at 12rem; wrap it in a span when the crumb has an icon.
`aria-current="page"`	.crumb	The current crumb: ink, 560, and the one that shrinks.
`.crumb-sep`	span, svg	A separator you write yourself, a slash or a chevron icon. The list slash is then dropped.

Show the turn state as a word next to the title.
Mark the open panels with aria-pressed on their toggles.
Keep one sidebar toggle in the top bar as well as in the rail.

Don't

A second row of tabs under the top bar.
Putting the model or the token count here. They belong to the composer and the status bar.
A search field wider than 20rem.

Accessibility

Use a header for the bar and a nav with aria-label="Breadcrumb" for the crumbs. The current crumb has aria-current="page".
Every icon button has an aria-label; toggles add aria-pressed. The command field declares its shortcut with aria-keyshortcuts.
When the field folds to an icon its words move off screen but stay in the accessible name.
Under coarse pointers the bar is 44px and its buttons and field 36px.