Uai Blocks Run Summary

Component

About

A summary of completed agent work with stats, changed artifacts, warnings, and next actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Uai Blocks Run Summary to your project and fits it to your theme.

Code

How Uai Blocks Run Summary is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"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>
  );
}

function SourceSpecimen(){return <RunSummaryPreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}