AgentRunHistory

A table component displaying agent run history with status badges, duration, and error messages.

Installation

typescript

import { AgentRunHistory } from '@happyvertical/smrt-agents/svelte';

Basic Usage

Display run history for agents.

svelte

<script lang="ts">
  import { AgentRunHistory } from '@happyvertical/smrt-agents/svelte';
  import type { AgentRunHistoryEntry } from '@happyvertical/smrt-agents/svelte';

  let history: AgentRunHistoryEntry[] = $state([]);
  let loading = $state(true);

  $effect(() => {
    fetchHistory().then((data) => {
      history = data;
      loading = false;
    });
  });
</script>

<AgentRunHistory {history} {loading} />

With Click Handler

Navigate to run details on row click.

svelte

<AgentRunHistory
  {history}
  onEntryClick={(entry) => goto(`/agents/runs/${entry.id}`)}
/>

Custom Empty State

Provide a custom empty state with a snippet.

svelte

<AgentRunHistory {history}>
  {#snippet empty()}
    <div class="no-history">
      <p>No run history yet</p>
      <small>Run history will appear here after agents execute</small>
    </div>
  {/snippet}
</AgentRunHistory>

Columns Displayed

Status - Success/Failed badge
Agent - Agent type that ran
Started - Relative time when run started
Duration - How long the run took
Error - Error message if failed (truncated with tooltip)

Props

Prop	Type	Default	Description
`history` *	`AgentRunHistoryEntry[]`	-	Array of run history entries
`loading`	`boolean`	`false`	Show loading state
`onEntryClick`	`(entry: AgentRunHistoryEntry) => void`	`undefined`	Callback when a row is clicked
`empty`	`Snippet`	`undefined`	Custom empty state content

TypeScript

typescript

import { AgentRunHistory } from '@happyvertical/smrt-agents/svelte';
import type { AgentRunHistoryEntry, RunStatus } from '@happyvertical/smrt-agents/svelte';

interface AgentRunHistoryEntry {
  id: string;
  scheduleId: string;
  agentType: string;
  status: RunStatus;  // 'success' | 'failed'
  startedAt: Date | string;
  completedAt: Date | string | null;
  duration: number | null;  // milliseconds
  error: string | null;
}

interface AgentRunHistoryProps {
  history: AgentRunHistoryEntry[];
  loading?: boolean;
  onEntryClick?: (entry: AgentRunHistoryEntry) => void;
  empty?: Snippet;
}

Duration Formatting

Duration is automatically formatted based on length:

Under 1 second: 450ms
Under 1 minute: 45.0s
Under 1 hour: 5.2m
Over 1 hour: 2.5h