AgentDashboard

A combined overview panel for managing SMRT agent schedules. Displays stats, schedule list, and recent run history in a unified interface.

Installation

typescript

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

Basic Usage

Display agent schedules with stats overview.

svelte

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

  let schedules: AgentScheduleData[] = $state([]);
  let loading = $state(true);

  // Fetch schedules from your API
  $effect(() => {
    fetchSchedules().then((data) => {
      schedules = data;
      loading = false;
    });
  });
</script>

<AgentDashboard
  {schedules}
  {loading}
  onScheduleClick={(schedule) => goto(`/agents/${schedule.id}`)}
  onCreateSchedule={() => goto('/agents/new')}
/>

With Run History

Include recent run history for a complete overview.

svelte

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

  let schedules: AgentScheduleData[] = $state([]);
  let recentHistory: AgentRunHistoryEntry[] = $state([]);
</script>

<AgentDashboard
  {schedules}
  {recentHistory}
  onHistoryEntryClick={(entry) => console.log('View run:', entry.id)}
/>

With All Callbacks

Handle all user interactions for complete control.

svelte

<AgentDashboard
  {schedules}
  {recentHistory}
  onScheduleClick={(schedule) => goto(`/agents/${schedule.id}`)}
  onEnable={async (schedule) => {
    await api.enableSchedule(schedule.id);
    await refreshSchedules();
  }}
  onDisable={async (schedule) => {
    await api.disableSchedule(schedule.id);
    await refreshSchedules();
  }}
  onDelete={async (schedule) => {
    if (confirm('Delete this schedule?')) {
      await api.deleteSchedule(schedule.id);
      await refreshSchedules();
    }
  }}
  onRunNow={async (schedule) => {
    await api.triggerRun(schedule.id);
    toast.success('Agent run triggered');
  }}
  onCreateSchedule={() => goto('/agents/new')}
/>

Stats Displayed

The dashboard automatically calculates and displays:

Total Schedules - Count of all schedules
Active - Schedules with active status (green)
Running Now - Currently executing runs (blue)
Total Runs - Sum of all runs across schedules
Success Rate - Overall success percentage
Errors - Schedules with error status (red, shown if > 0)

Props

Prop	Type	Default	Description
`schedules` *	`AgentScheduleData[]`	-	Array of all agent schedules
`recentHistory`	`AgentRunHistoryEntry[]`	`[]`	Recent run history entries to display
`loading`	`boolean`	`false`	Show loading state
`onScheduleClick`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when a schedule is clicked
`onEnable`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when enable is clicked
`onDisable`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when disable is clicked
`onDelete`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when delete is clicked
`onRunNow`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when run now is clicked
`onCreateSchedule`	`() => void`	`undefined`	Callback when create button is clicked
`onHistoryEntryClick`	`(entry: AgentRunHistoryEntry) => void`	`undefined`	Callback when a history entry is clicked

TypeScript

typescript

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

interface AgentScheduleData {
  id: string;
  agentType: string;
  agentId: string | null;
  agentConfig: Record<string, unknown>;
  cron: string;
  timezone: string;
  enabled: boolean;
  status: ScheduleStatus;  // 'active' | 'paused' | 'disabled' | 'error'
  lastRun: Date | string | null;
  nextRun: Date | string | null;
  lastStatus: RunStatus | null;  // 'success' | 'failed'
  lastError: string | null;
  runCount: number;
  successCount: number;
  failureCount: number;
  maxConcurrent: number;
  runningCount: number;
  timeout: number;
  method: string;
  methodArgs: Record<string, unknown>;
  createdAt: Date | string;
  updatedAt: Date | string;
}

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

Helper Functions

The module exports several helper functions for formatting.

typescript

import {
  formatCronExpression,
  formatRelativeTime,
  formatDuration,
  calculateSuccessRate,
  getScheduleStatusVariant,
  getRunStatusVariant
} from '@happyvertical/smrt-agents/svelte';

// Convert cron to human-readable
formatCronExpression('0 2 * * *');  // "Daily at 2:00"

// Format relative time
formatRelativeTime(new Date());  // "just now"
formatRelativeTime(schedule.nextRun);  // "in 2h"

// Format duration
formatDuration(45000);  // "45.0s"

// Get success rate as number
calculateSuccessRate(schedule);  // 0.95

// Get badge variant
getScheduleStatusVariant('active');  // 'success'
getRunStatusVariant('failed');  // 'error'