AgentScheduleForm

A form component for creating and editing agent schedules. Includes cron presets, timezone selection, and validation.

Installation

typescript

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

Create Mode

Use for creating new agent schedules.

svelte

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

  let loading = $state(false);

  async function handleSubmit(data) {
    loading = true;
    await api.createSchedule(data);
    goto('/agents');
  }
</script>

<AgentScheduleForm
  {loading}
  onSubmit={handleSubmit}
  onCancel={() => goto('/agents')}
/>

Edit Mode

Pre-populate the form with existing schedule data.

svelte

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

  const { schedule } = $props();
</script>

<AgentScheduleForm
  editMode
  initialData={{
    agentType: schedule.agentType,
    agentId: schedule.agentId,
    cron: schedule.cron,
    timezone: schedule.timezone,
    enabled: schedule.enabled,
    maxConcurrent: schedule.maxConcurrent,
    timeout: schedule.timeout,
    method: schedule.method
  }}
  onSubmit={handleUpdate}
  onCancel={() => goto('/agents')}
/>

With Agent Type Dropdown

Provide a list of available agent types for selection.

svelte

<AgentScheduleForm
  agentTypes={['Praeco', 'Scraper', 'Indexer', 'Reporter']}
  onSubmit={handleSubmit}
/>

Form Fields

Agent Type (required) - Dropdown or text input
Agent ID (optional) - Specific instance ID
Method - Method to call on the agent (default: run)
Cron Schedule (required) - 5-field cron expression
Timezone - Schedule timezone
Max Concurrent - Maximum concurrent runs (1-10)
Timeout - Run timeout in milliseconds
Enabled - Whether to enable immediately

Cron Presets

The form includes quick-select presets for common schedules:

Every hour (0 * * * *)
Every 15 minutes (*/15 * * * *)
Daily at midnight (0 0 * * *)
Daily at 2 AM (0 2 * * *)
Weekly on Sunday (0 0 * * 0)
Monthly on 1st (0 0 1 * *)

Props

Prop	Type	Default	Description
`initialData`	`Partial<ScheduleFormData>`	`{}`	Initial form data for editing
`agentTypes`	`string[]`	`[]`	Available agent types for dropdown
`onSubmit`	`(data: ScheduleFormData) => void`	`undefined`	Callback when form is submitted
`onCancel`	`() => void`	`undefined`	Callback when cancel is clicked
`loading`	`boolean`	`false`	Show loading state and disable form
`editMode`	`boolean`	`false`	Show edit mode labels and button text

TypeScript

typescript

import { AgentScheduleForm } from '@happyvertical/smrt-agents/svelte';
import type { ScheduleFormData } from '@happyvertical/smrt-agents/svelte';

interface ScheduleFormData {
  agentType: string;
  agentId?: string;
  agentConfig?: Record<string, unknown>;
  cron: string;
  timezone?: string;
  enabled?: boolean;
  maxConcurrent?: number;
  timeout?: number;
  method?: string;
  methodArgs?: Record<string, unknown>;
}

interface AgentScheduleFormProps {
  initialData?: Partial<ScheduleFormData>;
  agentTypes?: string[];
  onSubmit?: (data: ScheduleFormData) => void;
  onCancel?: () => void;
  loading?: boolean;
  editMode?: boolean;
}