# Agent card

One agent's job at a glance: its state in words, how far along it is, and the one thing to do next.

A block: a ready-made arrangement of components, to copy into a project. Its own classes carry the `site-` prefix; rename it to your project's own. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Built from: Card, Spinner, Badge, Icon, Meter, Button.

## Examples

### Usage

Working: the spinner and the info badge, the meter in the series color, and what the agent does now.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-agent-card"
  aria-labelledby="agent-working"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-agent-card__top">
        <span class="site-agent-card__eyebrow">WEBSITE</span>
        <span
          role="status"
          class="smbk-spinner smbk-spinner--size-sm smbk-spinner--tone-subtle"
          aria-hidden="true"
        >
          <span class="smbk-spinner__ring" aria-hidden="true"></span>
          <span class="smbk-spinner__label">Working</span>
        </span>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-info smbk-badge--size-sm">
          <span class="smbk-badge__label">Working</span>
        </span>
      </div>
      <h3
        class="site-agent-card__title"
        id="agent-working"
      >#124 Pricing page: settle the wording</h3>
      <p class="site-agent-card__meta">
        <i
          class="ph ph-clock smbk-icon smbk-icon--size-xs site-agent-card__icon"
          aria-hidden="true"
        ></i>
        <span>1 h 12</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>step 214</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>$29.40</span>
      </p>
      <div class="smbk-meter smbk-meter--tone-series smbk-progress site-agent-card__meter">
        <div
          class="smbk-progress__track"
          role="meter"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="60"
          aria-valuetext="60% done"
          aria-labelledby="agent-working"
        >
          <span class="smbk-progress__fill" style="width:60%"></span>
        </div>
      </div>
      <p class="site-agent-card__note">Now: writing the plan comparison table</p>
      <div class="site-agent-card__footer">
        <span class="site-agent-card__job">Agent job · worktree</span>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-ghost smbk-btn--size-sm"
          aria-describedby="agent-working"
        >
          <span class="smbk-btn__label">Open</span>
        </button>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-outline smbk-btn--size-sm"
          aria-describedby="agent-working"
        >
          <i class="ph ph-stop smbk-icon smbk-icon--size-md smbk-btn__icon" aria-hidden="true"></i>
          <span class="smbk-btn__label">Stop</span>
        </button>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Spinner } from './design-system/components/spinner/spinner.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Icon } from './design-system/components/icon/icon.js';
import { Meter } from './design-system/components/meter/meter.js';
import { Button } from './design-system/components/button/button.js';

<Card layout="compact" className="site-agent-card" aria-labelledby="agent-working">
  <CardBody type="slot">
    <div className="site-agent-card__top">
      <span className="site-agent-card__eyebrow">WEBSITE</span>
      <Spinner size="sm" tone="subtle" aria-hidden="true">Working</Spinner>
      <Badge tone="info" size="sm">Working</Badge>
    </div>
    <h3 className="site-agent-card__title" id="agent-working">#124 Pricing page: settle the wording</h3>
    <p className="site-agent-card__meta">
      <Icon className="site-agent-card__icon" name="Clock" size="xs" />
      <span>1 h 12</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>step 214</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>$29.40</span>
    </p>
    <Meter className="site-agent-card__meter" tone="series" value={60} aria-labelledby="agent-working" aria-valuetext="60% done" />
    <p className="site-agent-card__note">Now: writing the plan comparison table</p>
    <div className="site-agent-card__footer">
      <span className="site-agent-card__job">Agent job · worktree</span>
      <Button tone="ghost" size="sm" aria-describedby="agent-working">Open</Button>
      <Button tone="outline" size="sm" leadingIcon="Stop" aria-describedby="agent-working">Stop</Button>
    </div>
  </CardBody>
</Card>
```

### Waiting on you

Waiting on you: the warning edge, the question in a warning box, and one brand button to answer it.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact smbk-card--warning-edge site-agent-card"
  aria-labelledby="agent-waiting"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-agent-card__top">
        <span class="site-agent-card__eyebrow">WEBSITE</span>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-warning smbk-badge--size-sm">
          <span class="smbk-badge__label">Asks you</span>
        </span>
      </div>
      <h3
        class="site-agent-card__title"
        id="agent-waiting"
      >#124 Pricing page: settle the wording</h3>
      <p class="site-agent-card__meta">
        <i
          class="ph ph-clock smbk-icon smbk-icon--size-xs site-agent-card__icon"
          aria-hidden="true"
        ></i>
        <span>1 h 12</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>step 214</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>$29.40</span>
      </p>
      <p class="site-agent-card__note site-agent-card__note--tone-warning">Which wording should the pricing page use: “from $9” or “$9 and up”?</p>
      <div class="site-agent-card__footer">
        <span class="site-agent-card__job">Agent job · worktree</span>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-brand smbk-btn--size-sm"
          aria-describedby="agent-waiting"
        >
          <i
            class="ph ph-arrow-u-up-left smbk-icon smbk-icon--size-md smbk-btn__icon"
            aria-hidden="true"
          ></i>
          <span class="smbk-btn__label">Answer</span>
        </button>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Icon } from './design-system/components/icon/icon.js';
import { Button } from './design-system/components/button/button.js';

<Card layout="compact" warning-edge className="site-agent-card" aria-labelledby="agent-waiting">
  <CardBody type="slot">
    <div className="site-agent-card__top">
      <span className="site-agent-card__eyebrow">WEBSITE</span>
      <Badge tone="warning" size="sm">Asks you</Badge>
    </div>
    <h3 className="site-agent-card__title" id="agent-waiting">#124 Pricing page: settle the wording</h3>
    <p className="site-agent-card__meta">
      <Icon className="site-agent-card__icon" name="Clock" size="xs" />
      <span>1 h 12</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>step 214</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>$29.40</span>
    </p>
    <p className="site-agent-card__note site-agent-card__note--tone-warning">Which wording should the pricing page use: “from $9” or “$9 and up”?</p>
    <div className="site-agent-card__footer">
      <span className="site-agent-card__job">Agent job · worktree</span>
      <Button tone="brand" size="sm" leadingIcon="ArrowUUpLeft" aria-describedby="agent-waiting">Answer</Button>
    </div>
  </CardBody>
</Card>
```

### Queued

Queued: the gray badge, no meter yet, and its place in line.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-agent-card"
  aria-labelledby="agent-queued"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-agent-card__top">
        <span class="site-agent-card__eyebrow">WEBSITE</span>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-default smbk-badge--size-sm">
          <span class="smbk-badge__label">Queued</span>
        </span>
      </div>
      <h3
        class="site-agent-card__title"
        id="agent-queued"
      >#125 Pricing page: add the yearly plans</h3>
      <p class="site-agent-card__meta">
        <i
          class="ph ph-clock smbk-icon smbk-icon--size-xs site-agent-card__icon"
          aria-hidden="true"
        ></i>
        <span>waits</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>0 steps</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>$0</span>
      </p>
      <p class="site-agent-card__note">Starts when a place frees up · 2nd in line</p>
      <div class="site-agent-card__footer">
        <span class="site-agent-card__job">Agent job · waits for #124</span>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-ghost smbk-btn--size-sm"
          aria-describedby="agent-queued"
        >
          <i
            class="ph ph-arrow-up smbk-icon smbk-icon--size-md smbk-btn__icon"
            aria-hidden="true"
          ></i>
          <span class="smbk-btn__label">Move up</span>
        </button>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Icon } from './design-system/components/icon/icon.js';
import { Button } from './design-system/components/button/button.js';

<Card layout="compact" className="site-agent-card" aria-labelledby="agent-queued">
  <CardBody type="slot">
    <div className="site-agent-card__top">
      <span className="site-agent-card__eyebrow">WEBSITE</span>
      <Badge size="sm">Queued</Badge>
    </div>
    <h3 className="site-agent-card__title" id="agent-queued">#125 Pricing page: add the yearly plans</h3>
    <p className="site-agent-card__meta">
      <Icon className="site-agent-card__icon" name="Clock" size="xs" />
      <span>waits</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>0 steps</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>$0</span>
    </p>
    <p className="site-agent-card__note">Starts when a place frees up · 2nd in line</p>
    <div className="site-agent-card__footer">
      <span className="site-agent-card__job">Agent job · waits for #124</span>
      <Button tone="ghost" size="sm" leadingIcon="ArrowUp" aria-describedby="agent-queued">Move up</Button>
    </div>
  </CardBody>
</Card>
```

### Finished

Finished: the meter full in the success color, and what the agent left behind.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-agent-card"
  aria-labelledby="agent-finished"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-agent-card__top">
        <span class="site-agent-card__eyebrow">WEBSITE</span>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-success smbk-badge--size-sm">
          <span class="smbk-badge__label">Finished</span>
        </span>
      </div>
      <h3
        class="site-agent-card__title"
        id="agent-finished"
      >#121 Contact form: check every field</h3>
      <p class="site-agent-card__meta">
        <i
          class="ph ph-clock smbk-icon smbk-icon--size-xs site-agent-card__icon"
          aria-hidden="true"
        ></i>
        <span>48 min</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>step 96</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>$11.20</span>
      </p>
      <div class="smbk-meter smbk-meter--tone-success smbk-progress site-agent-card__meter">
        <div
          class="smbk-progress__track"
          role="meter"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="100"
          aria-valuetext="Done"
          aria-labelledby="agent-finished"
        >
          <span class="smbk-progress__fill" style="width:100%"></span>
        </div>
      </div>
      <p class="site-agent-card__note">Pull Request #79 opened · 4 checks passed</p>
      <div class="site-agent-card__footer">
        <span class="site-agent-card__job">Agent job · worktree</span>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-secondary smbk-btn--size-sm"
          aria-describedby="agent-finished"
        >
          <i
            class="ph ph-arrow-square-out smbk-icon smbk-icon--size-md smbk-btn__icon"
            aria-hidden="true"
          ></i>
          <span class="smbk-btn__label">Open</span>
        </button>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Icon } from './design-system/components/icon/icon.js';
import { Meter } from './design-system/components/meter/meter.js';
import { Button } from './design-system/components/button/button.js';

<Card layout="compact" className="site-agent-card" aria-labelledby="agent-finished">
  <CardBody type="slot">
    <div className="site-agent-card__top">
      <span className="site-agent-card__eyebrow">WEBSITE</span>
      <Badge tone="success" size="sm">Finished</Badge>
    </div>
    <h3 className="site-agent-card__title" id="agent-finished">#121 Contact form: check every field</h3>
    <p className="site-agent-card__meta">
      <Icon className="site-agent-card__icon" name="Clock" size="xs" />
      <span>48 min</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>step 96</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>$11.20</span>
    </p>
    <Meter className="site-agent-card__meter" tone="success" value={100} aria-labelledby="agent-finished" aria-valuetext="Done" />
    <p className="site-agent-card__note">Pull Request #79 opened · 4 checks passed</p>
    <div className="site-agent-card__footer">
      <span className="site-agent-card__job">Agent job · worktree</span>
      <Button tone="secondary" size="sm" leadingIcon="ArrowSquareOut" aria-describedby="agent-finished">Open</Button>
    </div>
  </CardBody>
</Card>
```

### Failed

Failed: why it stopped, in a danger box, and a button to try again.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-agent-card"
  aria-labelledby="agent-failed"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-agent-card__top">
        <span class="site-agent-card__eyebrow">WEBSITE</span>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-danger smbk-badge--size-sm">
          <span class="smbk-badge__label">Failed</span>
        </span>
      </div>
      <h3
        class="site-agent-card__title"
        id="agent-failed"
      >#122 Footer: move the links into columns</h3>
      <p class="site-agent-card__meta">
        <i
          class="ph ph-clock smbk-icon smbk-icon--size-xs site-agent-card__icon"
          aria-hidden="true"
        ></i>
        <span>22 min</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>step 41</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>$4.80</span>
      </p>
      <p class="site-agent-card__note site-agent-card__note--tone-danger">Stopped: 3 checks failed</p>
      <div class="site-agent-card__footer">
        <span class="site-agent-card__job">Agent job · worktree</span>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-secondary smbk-btn--size-sm"
          aria-describedby="agent-failed"
        >
          <i
            class="ph ph-arrow-clockwise smbk-icon smbk-icon--size-md smbk-btn__icon"
            aria-hidden="true"
          ></i>
          <span class="smbk-btn__label">Retry</span>
        </button>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Icon } from './design-system/components/icon/icon.js';
import { Button } from './design-system/components/button/button.js';

<Card layout="compact" className="site-agent-card" aria-labelledby="agent-failed">
  <CardBody type="slot">
    <div className="site-agent-card__top">
      <span className="site-agent-card__eyebrow">WEBSITE</span>
      <Badge tone="danger" size="sm">Failed</Badge>
    </div>
    <h3 className="site-agent-card__title" id="agent-failed">#122 Footer: move the links into columns</h3>
    <p className="site-agent-card__meta">
      <Icon className="site-agent-card__icon" name="Clock" size="xs" />
      <span>22 min</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>step 41</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>$4.80</span>
    </p>
    <p className="site-agent-card__note site-agent-card__note--tone-danger">Stopped: 3 checks failed</p>
    <div className="site-agent-card__footer">
      <span className="site-agent-card__job">Agent job · worktree</span>
      <Button tone="secondary" size="sm" leadingIcon="ArrowClockwise" aria-describedby="agent-failed">Retry</Button>
    </div>
  </CardBody>
</Card>
```

### In a grid

Cards side by side, as many as the room allows; the one that needs you is the only one with an edge.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact smbk-card--warning-edge site-agent-card"
  aria-labelledby="agent-grid-1"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-agent-card__top">
        <span class="site-agent-card__eyebrow">SHOP</span>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-warning smbk-badge--size-sm">
          <span class="smbk-badge__label">Asks you</span>
        </span>
      </div>
      <h3
        class="site-agent-card__title"
        id="agent-grid-1"
      >#58 Checkout: name the delivery options</h3>
      <p class="site-agent-card__meta">
        <i
          class="ph ph-clock smbk-icon smbk-icon--size-xs site-agent-card__icon"
          aria-hidden="true"
        ></i>
        <span>35 min</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>step 70</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>$6.10</span>
      </p>
      <p class="site-agent-card__note site-agent-card__note--tone-warning">Should “Express” promise next-day delivery?</p>
      <div class="site-agent-card__footer">
        <span class="site-agent-card__job">Agent job · worktree</span>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-brand smbk-btn--size-sm"
          aria-describedby="agent-grid-1"
        >
          <i
            class="ph ph-arrow-u-up-left smbk-icon smbk-icon--size-md smbk-btn__icon"
            aria-hidden="true"
          ></i>
          <span class="smbk-btn__label">Answer</span>
        </button>
      </div>
    </div>
  </div>
</article>
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-agent-card"
  aria-labelledby="agent-grid-2"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-agent-card__top">
        <span class="site-agent-card__eyebrow">BLOG</span>
        <span
          role="status"
          class="smbk-spinner smbk-spinner--size-sm smbk-spinner--tone-subtle"
          aria-hidden="true"
        >
          <span class="smbk-spinner__ring" aria-hidden="true"></span>
          <span class="smbk-spinner__label">Working</span>
        </span>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-info smbk-badge--size-sm">
          <span class="smbk-badge__label">Working</span>
        </span>
      </div>
      <h3 class="site-agent-card__title" id="agent-grid-2">#31 Archive: add the year pages</h3>
      <p class="site-agent-card__meta">
        <i
          class="ph ph-clock smbk-icon smbk-icon--size-xs site-agent-card__icon"
          aria-hidden="true"
        ></i>
        <span>12 min</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>step 18</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>$2.40</span>
      </p>
      <div class="smbk-meter smbk-meter--tone-series smbk-progress site-agent-card__meter">
        <div
          class="smbk-progress__track"
          role="meter"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="25"
          aria-valuetext="25% done"
          aria-labelledby="agent-grid-2"
        >
          <span class="smbk-progress__fill" style="width:25%"></span>
        </div>
      </div>
      <p class="site-agent-card__note">Now: listing the posts of each year</p>
      <div class="site-agent-card__footer">
        <span class="site-agent-card__job">Agent job · worktree</span>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-ghost smbk-btn--size-sm"
          aria-describedby="agent-grid-2"
        >
          <span class="smbk-btn__label">Open</span>
        </button>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-outline smbk-btn--size-sm"
          aria-describedby="agent-grid-2"
        >
          <i class="ph ph-stop smbk-icon smbk-icon--size-md smbk-btn__icon" aria-hidden="true"></i>
          <span class="smbk-btn__label">Stop</span>
        </button>
      </div>
    </div>
  </div>
</article>
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-agent-card"
  aria-labelledby="agent-grid-3"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-agent-card__top">
        <span class="site-agent-card__eyebrow">BLOG</span>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-default smbk-badge--size-sm">
          <span class="smbk-badge__label">Queued</span>
        </span>
      </div>
      <h3
        class="site-agent-card__title"
        id="agent-grid-3"
      >#32 Archive: link each year from the footer</h3>
      <p class="site-agent-card__meta">
        <i
          class="ph ph-clock smbk-icon smbk-icon--size-xs site-agent-card__icon"
          aria-hidden="true"
        ></i>
        <span>waits</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>0 steps</span>
        <span class="site-agent-card__dot" aria-hidden="true">·</span>
        <span>$0</span>
      </p>
      <p class="site-agent-card__note">Starts when #31 is done</p>
      <div class="site-agent-card__footer">
        <span class="site-agent-card__job">Agent job · waits for #31</span>
        <button
          type="button"
          class="smbk-btn smbk-btn--tone-ghost smbk-btn--size-sm"
          aria-describedby="agent-grid-3"
        >
          <i
            class="ph ph-arrow-up smbk-icon smbk-icon--size-md smbk-btn__icon"
            aria-hidden="true"
          ></i>
          <span class="smbk-btn__label">Move up</span>
        </button>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Icon } from './design-system/components/icon/icon.js';
import { Button } from './design-system/components/button/button.js';
import { Spinner } from './design-system/components/spinner/spinner.js';
import { Meter } from './design-system/components/meter/meter.js';

<Card layout="compact" warning-edge className="site-agent-card" aria-labelledby="agent-grid-1">
  <CardBody type="slot">
    <div className="site-agent-card__top">
      <span className="site-agent-card__eyebrow">SHOP</span>
      <Badge tone="warning" size="sm">Asks you</Badge>
    </div>
    <h3 className="site-agent-card__title" id="agent-grid-1">#58 Checkout: name the delivery options</h3>
    <p className="site-agent-card__meta">
      <Icon className="site-agent-card__icon" name="Clock" size="xs" />
      <span>35 min</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>step 70</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>$6.10</span>
    </p>
    <p className="site-agent-card__note site-agent-card__note--tone-warning">Should “Express” promise next-day delivery?</p>
    <div className="site-agent-card__footer">
      <span className="site-agent-card__job">Agent job · worktree</span>
      <Button tone="brand" size="sm" leadingIcon="ArrowUUpLeft" aria-describedby="agent-grid-1">Answer</Button>
    </div>
  </CardBody>
</Card>
<Card layout="compact" className="site-agent-card" aria-labelledby="agent-grid-2">
  <CardBody type="slot">
    <div className="site-agent-card__top">
      <span className="site-agent-card__eyebrow">BLOG</span>
      <Spinner size="sm" tone="subtle" aria-hidden="true">Working</Spinner>
      <Badge tone="info" size="sm">Working</Badge>
    </div>
    <h3 className="site-agent-card__title" id="agent-grid-2">#31 Archive: add the year pages</h3>
    <p className="site-agent-card__meta">
      <Icon className="site-agent-card__icon" name="Clock" size="xs" />
      <span>12 min</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>step 18</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>$2.40</span>
    </p>
    <Meter className="site-agent-card__meter" tone="series" value={25} aria-labelledby="agent-grid-2" aria-valuetext="25% done" />
    <p className="site-agent-card__note">Now: listing the posts of each year</p>
    <div className="site-agent-card__footer">
      <span className="site-agent-card__job">Agent job · worktree</span>
      <Button tone="ghost" size="sm" aria-describedby="agent-grid-2">Open</Button>
      <Button tone="outline" size="sm" leadingIcon="Stop" aria-describedby="agent-grid-2">Stop</Button>
    </div>
  </CardBody>
</Card>
<Card layout="compact" className="site-agent-card" aria-labelledby="agent-grid-3">
  <CardBody type="slot">
    <div className="site-agent-card__top">
      <span className="site-agent-card__eyebrow">BLOG</span>
      <Badge size="sm">Queued</Badge>
    </div>
    <h3 className="site-agent-card__title" id="agent-grid-3">#32 Archive: link each year from the footer</h3>
    <p className="site-agent-card__meta">
      <Icon className="site-agent-card__icon" name="Clock" size="xs" />
      <span>waits</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>0 steps</span>
      <span className="site-agent-card__dot" aria-hidden="true">·</span>
      <span>$0</span>
    </p>
    <p className="site-agent-card__note">Starts when #31 is done</p>
    <div className="site-agent-card__footer">
      <span className="site-agent-card__job">Agent job · waits for #31</span>
      <Button tone="ghost" size="sm" leadingIcon="ArrowUp" aria-describedby="agent-grid-3">Move up</Button>
    </div>
  </CardBody>
</Card>
```

## Purpose

Shows one agent's job on a board or an overview: which project it works in, the task, how long it has run and what it has cost, how far along it is, and the action that fits its state. Five states: working, waiting on you, queued, finished and failed.

## Anatomy

- The card, the Card component in its compact layout, its slot body holding the rest. Waiting on you adds the card's warning edge.
- The top line: the project in the small code style, then the state as a small badge; while working, a small spinner before it.
- The title, the task, in the small body style's medium weight.
- The details line: a clock icon and the time, the step and the cost, apart by quiet dots.
- The meter, the Meter component, while the agent works (the series color) and once it has finished (the success color).
- The note: what the agent does now, or why it waits. A question to you sits in a warning box, a failure in a danger box.
- The footer, under a quiet line: the kind of job, then its buttons.

## When to use

- On a board or an overview of agents at work, where a reader scans for the one that needs them.

## When not to use

- For a long list of jobs. Use a table, with the state in a column.
- For one agent's whole story. Use a page or a side panel, with the card's details at its top.

## Behavior

The page sets the state: the badge and its words, the edge, the meter's tone, the note's box and the buttons. The block takes no focus of its own; its buttons do. When the room runs out, the job's words in the footer wrap and the buttons keep their size.

## Accessibility

### What it does for you

- The card is an article named by its title.
- The state is said in words in the badge, never only by the edge or the meter's color.
- While working, the spinner is hidden from assistive technology, since the badge already says "Working".
- The meter is named by the title, its value in words, such as "60% done".
- Each button is described by the title, so "Stop" on a board of cards says which agent it stops.

### What you must do

- Make the title a heading at the level the page needs, and give it an id of its own that the card, the meter and every button point at.
- Announce a change of state from the page: the card does not.

### How to test

- With a screen reader, move through a board: each card is read as an article by its title, its state in words, and "Stop" says which agent it stops.
- In a forced-color mode, the state still reads in the badge's words.
- With text at 200% and the page 320 pixels wide, the job's words in the footer wrap and the buttons keep their size.

### Keyboard

| Key | What it does |
|---|---|
| Tab | Moves focus to each of the card's buttons in turn. The card itself takes no focus. |
| Enter or Space | Presses the focused button. |

## Usage rules

### Do

- Ask the question in the note, in full, so the reader can answer without opening the job.
- Give each state one main action.

### Don't

- Show that an agent waits on you by the edge alone.
- Put more than two buttons in the footer.

## Stylesheet

```css
/* site-agent-card — Agent card, a block: one agent's job at a glance, its state in words, how far along it is
 * and what to do next. Copy it into your project and rename site- to your project's own prefix. The frame is the
 * Card component in its compact layout, the waiting state with its warning edge; the badge, spinner, meter and
 * buttons are the system's own. The block draws only the lines inside the card's body and the footer's line. */

.site-agent-card__top,
.site-agent-card__meta,
.site-agent-card__footer {
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
}

.site-agent-card__eyebrow {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-code-sm-font-family);
  font-size: var(--smbk-typography-code-sm-font-size);
  font-weight: var(--smbk-typography-code-sm-font-weight);
  line-height: var(--smbk-typography-code-sm-line-height);
  letter-spacing: var(--smbk-typography-code-sm-letter-spacing);
}

.site-agent-card__title {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-body-sm-medium-font-family);
  font-size: var(--smbk-typography-body-sm-medium-font-size);
  font-weight: var(--smbk-typography-body-sm-medium-font-weight);
  line-height: var(--smbk-typography-body-sm-medium-line-height);
  letter-spacing: var(--smbk-typography-body-sm-medium-letter-spacing);
}

.site-agent-card__meta,
.site-agent-card__note,
.site-agent-card__job {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-xs-font-family);
  font-size: var(--smbk-typography-body-xs-font-size);
  font-weight: var(--smbk-typography-body-xs-font-weight);
  line-height: var(--smbk-typography-body-xs-line-height);
  letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}

.site-agent-card__meta {
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.site-agent-card__icon {
  flex: none;
  color: var(--smbk-color-icon-subtle);
}

.site-agent-card__dot {
  color: var(--smbk-color-text-subtlest);
}

/* The question or the failure, said in a box of its tone's subtle color. */
.site-agent-card__note--tone-warning,
.site-agent-card__note--tone-danger {
  padding: var(--smbk-space-inset-sm);
  border-radius: var(--smbk-radius-control-md);
}

.site-agent-card__note--tone-warning {
  background: var(--smbk-color-feedback-warning-surface-subtle);
  color: var(--smbk-color-feedback-warning-text-on-subtle);
}

.site-agent-card__note--tone-danger {
  background: var(--smbk-color-feedback-danger-surface-subtle);
  color: var(--smbk-color-feedback-danger-text-on-subtle);
}

/* The footer: a quiet line above it, the same room above and below the line, then the job and its actions. When
   the room runs out the job's words wrap; the buttons keep their size. */
.site-agent-card__footer {
  padding-block-start: var(--smbk-space-inset-lg);
  border-block-start: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}

.site-agent-card__job {
  flex: 1 1 auto;
  min-width: 0;
}

.site-agent-card__footer > :not(.site-agent-card__job) {
  flex: none;
}
```