AgentPaneHeader

The title row of a pane: selection box, avatar, title, facts such as the branch, the state and the pane buttons. Pick it inside AgentPane; on a narrow pane the badges and buttons wrap instead of being cut.

AgentPaneHeader

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, AgentPaneHeader

Write migration notes for the new invoice numbering scheme and the credit note format

shop

Working

Shell

build server

Exited

Dark theme, AgentPaneHeader

Write migration notes for the new invoice numbering scheme and the credit note format

shop

Working

Shell

build server

Exited

High contrast theme, AgentPaneHeader

Write migration notes for the new invoice numbering scheme and the credit note format

shop

Working

Shell

build server

Exited

UsageLink to the section Usage

tsx

import { AgentPaneHeader } from '@skribly/ui/agents'

tsx

<AgentPaneHeader
  title={session.title}
  onRename={rename}
  renameLabel={t('rename')}
  selectLabel={t('selectForBroadcast')}
  isSelected={picked}
  onSelectedChange={setPicked}
  avatar={<AgentAvatar letters="C" />}
  state={<SessionStateChip state="working" label={t('state.working')} />}
  actions={<IconButton size="sm" label={t('close')}><X /></IconButton>}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The title is a heading (level 3 by default).
With onRename it is a button that reads the title, then renameLabel; pressing it opens a text field, Enter or leaving saves, Escape cancels, and focus returns to the title.
The selection box has its own name.
Long titles are cut on screen and read in full.
Every button is at least 24px.

This demo runs through axe in all three themes on every test run. See what the tests check.