AgentScheduleList

A table display of scheduled agents showing status, cron schedule, last/next run times, success rate, and action buttons.

Installation

typescript

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

Basic Usage

Display a list of agent schedules.

svelte

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

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

<AgentScheduleList
  {schedules}
  onScheduleClick={(schedule) => goto(`/agents/${schedule.id}`)}
/>

With Action Handlers

Handle enable/disable and run now actions.

svelte

<AgentScheduleList
  {schedules}
  onEnable={async (schedule) => {
    await api.enableSchedule(schedule.id);
    await refreshSchedules();
  }}
  onDisable={async (schedule) => {
    await api.disableSchedule(schedule.id);
    await refreshSchedules();
  }}
  onRunNow={async (schedule) => {
    await api.triggerRun(schedule.id);
    toast.success('Agent run triggered');
  }}
/>

Read-Only Mode

Hide the actions column for display-only use.

svelte

<AgentScheduleList
  {schedules}
  showActions={false}
  onScheduleClick={(schedule) => goto(`/agents/${schedule.id}`)}
/>

Custom Empty State

Provide a custom empty state with a snippet.

svelte

<AgentScheduleList {schedules}>
  {#snippet empty()}
    <div class="custom-empty">
      <p>No scheduled agents yet</p>
      <Button onclick={() => goto('/agents/new')}>
        Create Your First Schedule
      </Button>
    </div>
  {/snippet}
</AgentScheduleList>

Columns Displayed

Status - Badge showing active/paused/disabled/error
Agent - Agent type, ID (truncated), and method
Schedule - Human-readable and raw cron expression
Last Run - Relative time with success/failed color
Next Run - Relative time until next execution
Success Rate - Percentage with color coding
Runs - Total count with running indicator
Actions - Enable/Disable and Run Now buttons

Props

Prop	Type	Default	Description
`schedules` *	`AgentScheduleData[]`	-	Array of schedules to display
`loading`	`boolean`	`false`	Show loading state
`showActions`	`boolean`	`true`	Show actions column
`onScheduleClick`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when a row is clicked
`onEnable`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when enable is clicked
`onDisable`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when disable is clicked
`onRunNow`	`(schedule: AgentScheduleData) => void`	`undefined`	Callback when run now is clicked
`empty`	`Snippet`	`undefined`	Custom empty state content

TypeScript

typescript

import { AgentScheduleList } from '@happyvertical/smrt-agents/svelte';
import type { AgentScheduleData } from '@happyvertical/smrt-agents/svelte';

interface AgentScheduleListProps {
  schedules: AgentScheduleData[];
  loading?: boolean;
  showActions?: boolean;
  onScheduleClick?: (schedule: AgentScheduleData) => void;
  onEnable?: (schedule: AgentScheduleData) => void;
  onDisable?: (schedule: AgentScheduleData) => void;
  onRunNow?: (schedule: AgentScheduleData) => void;
  empty?: Snippet;
}