[Schedules 7/8] Schedule creation/edit form with visual frequency builder

[sre-helmcode]

Implementation Order: 7 of 8

Depends on: #22 (list page)
Feature: Schedules — Recurring automated tasks for AI agent teams

Summary

Build the schedule creation and editing form with a powerful but user-friendly visual frequency builder. This is the core UX of the feature — it must feel intuitive for non-technical users while being powerful enough for advanced scheduling.

Page: src/pages/ScheduleBuilderPage.tsx

Form Structure (single page, not wizard steps)

┌─────────────────────────────────────────────────────────┐
│ New Schedule                                            │
│                                                         │
│ Name                                                    │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Weekly Tourism News Post                            │ │
│ └─────────────────────────────────────────────────────┘ │
│                                                         │
│ Team                                                    │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Marketing Team                              ▼       │ │
│ └─────────────────────────────────────────────────────┘ │
│                                                         │
│ Prompt                                                  │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Generate a blog post about the latest tourism       │ │
│ │ news in Canary Islands. Include key statistics,     │ │
│ │ trends, and a catchy headline suitable for social   │ │
│ │ media.                                              │ │
│ └─────────────────────────────────────────────────────┘ │
│                                                         │
│ ┌─ Frequency ──────────────────────────────────────── ┐ │
│ │                                                     │ │
│ │ Repeat  [Weekly ▼]                                  │ │
│ │                                                     │ │
│ │ On      [Mon] [Tue] [Wed] [Thu] [Fri] [Sat] [Sun]  │ │
│ │          ^^^                                        │ │
│ │ At      [09] : [00]   Timezone [Europe/Madrid ▼]    │ │
│ │                                                     │ │
│ │ Preview: "Every Monday at 9:00 AM (Europe/Madrid)"  │ │
│ └─────────────────────────────────────────────────────┘ │
│                                                         │
│ ⚠️ Executions have a timeout of 1 hour. If your task   │
│    requires more time, contact your administrator.      │
│                                                         │
│                          [Cancel]  [Create Schedule]    │
└─────────────────────────────────────────────────────────┘

Visual Frequency Builder

The builder adapts based on the "Repeat" selection:

Repeat options:

Selection	Additional Controls	Example Output
Every hour	At minute: [00▼]	0 * * * *
Every N hours	Every [2▼] hours, starting at [00:00▼]	0 */2 * * *
Daily	At [09:00▼]	0 9 * * *
Weekly	Day buttons (multi-select) + At [09:00▼]	0 9 * * 1
Monthly	Day of month [1st▼] + At [09:00▼]	0 9 1 * *

Day selector (Weekly mode):

• Pill-style buttons for Mon-Sun
• Multi-select: can pick Mon+Wed+Fri → "Every Monday, Wednesday, and Friday at 9:00 AM"
• Visual feedback: selected days highlighted in blue

Time picker:

• Two dropdowns: Hour (00-23) and Minute (00, 15, 30, 45)
• 24h format displayed, but preview shows 12h format for readability

Timezone selector:

• Dropdown with common timezones grouped by region
• Default: browser's timezone (detected via Intl.DateTimeFormat().resolvedOptions().timeZone)
• Show UTC offset: "Europe/Madrid (UTC+1)"

Live preview:

• Below the builder, show the human-readable description that updates in real-time
• Example: "Every Monday and Friday at 9:00 AM (Europe/Madrid)"
• Also show: "Next run: Monday, March 3, 2026 at 9:00 AM"

Team Selector

• Dropdown populated from GET /api/teams
• Show team name + agent count
• Only show teams that are in stopped status (can't schedule a team that's already running manually)... actually, show all teams but warn if team is currently running

Prompt Field

• Large textarea (min 4 rows, auto-expand)
• Placeholder: "Describe what you want the team to do..."
• Character count indicator (optional)

Timeout Warning

• Info/warning banner below the form
• Text: "Executions have a timeout of 1 hour. If your task requires more time, contact your administrator."
• Style: subtle amber/yellow info box

Edit Mode

• Same form, pre-populated with existing schedule data
• Title changes to "Edit Schedule"
• Button changes to "Save Changes"
• Navigate via /schedules/:id/edit or inline from detail page

Cron Expression Generator

Utility function buildCronExpression(config):

interface FrequencyConfig {
  repeat: 'hourly' | 'every_n_hours' | 'daily' | 'weekly' | 'monthly';
  minute?: number;
  hour?: number;
  hoursInterval?: number;
  daysOfWeek?: number[]; // 0=Sun, 1=Mon, ..., 6=Sat
  dayOfMonth?: number;
}

function buildCronExpression(config: FrequencyConfig): string
function parseFrequencyConfig(cron: string): FrequencyConfig // for edit mode

Acceptance Criteria

• ScheduleBuilderPage with full form
• Visual frequency builder with all 5 repeat modes
• Day-of-week multi-select pill buttons
• Time picker (hour + minute dropdowns)
• Timezone selector with auto-detection
• Live preview of human-readable schedule + next run time
• Team selector dropdown
• Prompt textarea
• Timeout warning banner
• Generates valid cron expression from visual builder
• Edit mode: parses cron expression back to visual builder state
• Form validation (name required, team required, prompt required)
• Loading and error states
• Unit tests for cron builder/parser
• Unit tests for form interactions