# Run Summary

> Summarize completed work, changed artifacts, warnings, and next actions.

- Category: AI
- Kind: component
- Page: https://uaiblocks.dev/components/run-summary
- Registry item: https://uaiblocks.dev/r/run-summary.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/run-summary.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/run-summary.json
```

## Usage

```tsx
"use client";

import {
  RunSummary,
  RunSummaryAction,
  RunSummaryActions,
  RunSummaryArtifact,
  RunSummaryArtifactMeta,
  RunSummaryArtifactName,
  RunSummaryArtifacts,
  RunSummaryDescription,
  RunSummaryHeader,
  RunSummaryNextStep,
  RunSummaryNextSteps,
  RunSummaryStat,
  RunSummaryStats,
  RunSummaryTitle,
  type RunSummaryVariant,
  RunSummaryWarning,
  RunSummaryWarnings,
} from "@/components/ui/uai/run-summary";

export function RunSummaryPreview({ variant = "card" }: { variant?: RunSummaryVariant }) {
  return (
    <RunSummary variant={variant} outcome="partial">
      <RunSummaryHeader>
        <RunSummaryTitle>Migrated billing emails to the new template</RunSummaryTitle>
        <RunSummaryDescription>
          Finished in 4m 12s · 18 steps · branch billing/email-templates
        </RunSummaryDescription>
      </RunSummaryHeader>
      <RunSummaryStats>
        <RunSummaryStat label="Files changed">5</RunSummaryStat>
        <RunSummaryStat label="Tests">42 passed</RunSummaryStat>
        <RunSummaryStat label="Warnings">2</RunSummaryStat>
      </RunSummaryStats>
      <RunSummaryArtifacts label="Changed files (5)">
        <RunSummaryArtifact change="added">
          <RunSummaryArtifactName>emails/receipt.tsx</RunSummaryArtifactName>
          <RunSummaryArtifactMeta>+128</RunSummaryArtifactMeta>
        </RunSummaryArtifact>
        <RunSummaryArtifact change="added">
          <RunSummaryArtifactName>emails/refund-issued.tsx</RunSummaryArtifactName>
          <RunSummaryArtifactMeta>+96</RunSummaryArtifactMeta>
        </RunSummaryArtifact>
        <RunSummaryArtifact>
          <RunSummaryArtifactName>lib/billing/notify.ts</RunSummaryArtifactName>
          <RunSummaryArtifactMeta>+31 −44</RunSummaryArtifactMeta>
        </RunSummaryArtifact>
        <RunSummaryArtifact>
          <RunSummaryArtifactName>lib/billing/notify.test.ts</RunSummaryArtifactName>
          <RunSummaryArtifactMeta>+58 −12</RunSummaryArtifactMeta>
        </RunSummaryArtifact>
        <RunSummaryArtifact change="deleted">
          <RunSummaryArtifactName>templates/receipt.html</RunSummaryArtifactName>
          <RunSummaryArtifactMeta>−210</RunSummaryArtifactMeta>
        </RunSummaryArtifact>
      </RunSummaryArtifacts>
      <RunSummaryWarnings>
        <RunSummaryWarning>
          The Spanish receipt still uses the old footer. No translation for “VAT ID” was found.
        </RunSummaryWarning>
        <RunSummaryWarning>Snapshot tests were updated, not reviewed.</RunSummaryWarning>
      </RunSummaryWarnings>
      <RunSummaryNextSteps>
        <RunSummaryNextStep>Review the updated receipt snapshots.</RunSummaryNextStep>
        <RunSummaryNextStep>Add the Spanish “VAT ID” string to the locale file.</RunSummaryNextStep>
      </RunSummaryNextSteps>
      <RunSummaryActions>
        <RunSummaryAction>View diff</RunSummaryAction>
        <RunSummaryAction primary>Open pull request</RunSummaryAction>
      </RunSummaryActions>
    </RunSummary>
  );
}
```

## Anatomy

- `RunSummary`
  - `RunSummaryHeader`
    - `RunSummaryTitle`
    - `RunSummaryDescription`
  - `RunSummaryStats`
    - `RunSummaryStat`
  - `RunSummaryArtifacts`
    - `RunSummaryArtifact`
      - `RunSummaryArtifactName`
      - `RunSummaryArtifactMeta`
  - `RunSummaryWarnings`
    - `RunSummaryWarning`
  - `RunSummaryNextSteps`
    - `RunSummaryNextStep`
  - `RunSummaryActions`
    - `RunSummaryAction`

## Accessibility

- The summary is a section labelled by its title; the outcome icon carries a visually hidden outcome label.
- Artifacts, warnings, and next steps are lists labelled by their headings. Next steps are ordered.
- Each artifact announces its change type (added, modified, or deleted) as text, not only as an icon or strikethrough.