ActorHeader
components/actor/Header.vue
The combined identity header an actor detail page opens with: one hairline-divided row of cells — identity (mark · name at text-38 · a subline of "vendor / kind / ● state" facts), the consumer's headline cells (ActorHeaderCell), and a Metadata key/value grid whose long tail hides behind "Show All Metadata". Owns only the chrome and the Show-All state; every fact, link and glyph is the consumer's composition.
Claude Code
Anthropic/cli/active
Security Score
82
Spend
$1,204.10
Metadata
Scenarios
empty — name only; no mark, cells or metadata
build-runner-7
minimal — name + one headline cell
claude-sonnet-4-6
Spend
$318.42
typical — AgentAvatar mark + subline + two cells + metadata with Show All
Cursor
Cursor
Anysphere/ide/idle
Runs
40
Spend
$96.07
Metadata
overflow — a 74-character name, a UxAvatar mark, and a 14-pair metadata list (open)
PN
priya-natarajan-payments-core-primary-workstation-with-a-very-long-hostname
person/Payments
Sessions
1,284
Metadata
Composition
ActorHeader — the agent-detail composition
<ActorHeader>
<template #mark><AgentPawn :state="pawnState" :size="64" :decorations="false" /></template>
<template #name>{{ a.name }}</template>
<template #subline>
<span>{{ vendorLabel(a.vendor) }}</span>
<span class="opacity-50">/</span>
<span>{{ a.kind }}</span>
</template>
<template #cells>
<ActorHeaderCell label="Security Score" center>
<div class="mt-1 text-24 font-bold leading-none text-content">{{ sec.score }}</div>
<DataSmile :value="sec.score" :size="80" :show-value="false" class="-mt-2" />
</ActorHeaderCell>
<ActorHeaderCell label="Spend" :value="fmtC(tk.cost)" />
</template>
<template #metadata>
<span class="text-content-subtle">User</span>
<span class="font-semi text-content">{{ a.user_email }}</span>
</template>
<template #metadataMore>
<span class="text-content-subtle">Version</span>
<span class="font-semi text-content">v{{ a.version }}</span>
</template>
</ActorHeader>components/actor/Header.vue
Usage
<ActorHeader
metadataLabel = "Metadata"
moreLabel = "Show All Metadata"
lessLabel = "Show less"
:open = "false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| metadataLabel | String | 'Metadata' | Label over the metadata key/value grid |
| moreLabel | String | 'Show All Metadata' | Toggle copy while the long tail is hidden |
| lessLabel | String | 'Show less' | Toggle copy while the long tail is shown |
| open | Boolean | false | Start with #metadataMore revealed |
Slots
| Slot | Description |
|---|---|
| mark | Identity mark beside the name — a pawn, avatar, glyph or icon (optional) |
| name | The actor's name (text-38 bold) |
| subline | Facts under the name in a text-14 subtle row — separate parts with <span class="opacity-50">/</span>; a state dot goes here too (optional) |
| cells | Headline cells — ActorHeaderCells. Rendered as a fragment so each is a direct child of the divide-x row |
| metadata | Always-visible key/value pairs (two spans per row) in the Metadata grid; the cell only renders when this slot is filled |
| metadataMore | Long-tail pairs revealed by the Show-All toggle; the toggle only renders when this slot is filled |