` with DndContext and SortableContext:
+```tsx
+
+ s.type !== 'procedure_end').map(s => s.id)} strategy={verticalListSortingStrategy}>
+
+ {steps.map((step) => {
+ // ... existing rendering logic
+ })}
+
+
+
+```
+
+**Step 3: Make each step card sortable**
+
+For each step card (procedure_step collapsed, section_header collapsed), extract the card div into a `SortableStepCard` wrapper or apply `useSortable` inline.
+
+The simplest approach: create a small wrapper component inside StepList.tsx:
+
+```tsx
+function SortableStepWrapper({ id, children, disabled }: { id: string; children: ReactNode; disabled?: boolean }) {
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled })
+
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ }
+
+ return (
+
+ {/* Pass drag handle props to children via render prop or context */}
+ {typeof children === 'function'
+ ? children({ dragHandleProps: { ...attributes, ...listeners } })
+ : children}
+
+ )
+}
+```
+
+Actually, a simpler approach: apply useSortable directly to each card's GripVertical button. Wrap each step's outer `
` with `ref={setNodeRef}` and pass `{...attributes} {...listeners}` to the GripVertical button.
+
+For collapsed procedure_step cards (the main case), the existing `
` button at line 148 gets the sortable props:
+```tsx
+// Replace the GripVertical span/button:
+
+
+```
+
+For expanded steps (StepEditor), disable sorting (`disabled: true` in useSortable) since the user is editing.
+
+The `procedure_end` step should NOT be in the SortableContext items array (already excluded above) and should not have useSortable applied.
+
+**Step 4: Verify it builds**
+
+Run: `cd frontend && npm run build 2>&1 | tail -5`
+Expected: Clean build
+
+**Step 5: Commit**
+
+```bash
+git add frontend/src/components/procedural-editor/StepList.tsx
+git commit -m "feat: add drag-to-reorder steps with @dnd-kit"
+```
+
+---
+
+## Phase 5: Maintenance Schedule Section
+
+### Task 5: Create MaintenanceScheduleSection
+
+**Files:**
+- Create: `frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx`
+
+**Context:** This component renders only for maintenance flows. It shows a schedule builder for new flows (or flows without a schedule) and a collapsed summary for existing scheduled flows. It uses the existing `maintenanceSchedulesApi` from `frontend/src/api/maintenanceSchedules.ts` and `targetListsApi` from `frontend/src/api/targetLists.ts`. Types are in `frontend/src/types/maintenance.ts`.
+
+Read these files first:
+- `frontend/src/api/maintenanceSchedules.ts`
+- `frontend/src/api/targetLists.ts`
+- `frontend/src/types/maintenance.ts`
+
+**Step 1: Create the component**
+
+```tsx
+// frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
+import { useState, useEffect } from 'react'
+import { Calendar, Clock } from 'lucide-react'
+import { maintenanceSchedulesApi } from '@/api/maintenanceSchedules'
+import { targetListsApi } from '@/api/targetLists'
+import type { MaintenanceSchedule, TargetList } from '@/types'
+import { cn } from '@/lib/utils'
+import { toast } from '@/lib/toast'
+
+interface MaintenanceScheduleSectionProps {
+ treeId: string | null // null for new flows
+}
+
+const FREQUENCY_OPTIONS = [
+ { value: 'daily', label: 'Daily', cron: (hour: number, min: number) => `${min} ${hour} * * *` },
+ { value: 'weekly-mon', label: 'Weekly (Monday)', cron: (hour: number, min: number) => `${min} ${hour} * * 1` },
+ { value: 'weekly-fri', label: 'Weekly (Friday)', cron: (hour: number, min: number) => `${min} ${hour} * * 5` },
+ { value: 'monthly', label: 'Monthly (1st)', cron: (hour: number, min: number) => `${min} ${hour} 1 * *` },
+] as const
+
+const TIMEZONE_OPTIONS = [
+ 'UTC',
+ 'America/New_York',
+ 'America/Chicago',
+ 'America/Denver',
+ 'America/Los_Angeles',
+ 'Europe/London',
+ 'Europe/Berlin',
+ 'Asia/Tokyo',
+ 'Australia/Sydney',
+]
+
+export function MaintenanceScheduleSection({ treeId }: MaintenanceScheduleSectionProps) {
+ const [schedule, setSchedule] = useState(null)
+ const [targetLists, setTargetLists] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+ const [isSaving, setIsSaving] = useState(false)
+
+ // Form state
+ const [frequency, setFrequency] = useState('weekly-mon')
+ const [hour, setHour] = useState(9)
+ const [minute, setMinute] = useState(0)
+ const [timezone, setTimezone] = useState('UTC')
+ const [selectedTargetListId, setSelectedTargetListId] = useState('')
+
+ // Load existing schedule and target lists
+ useEffect(() => {
+ const load = async () => {
+ setIsLoading(true)
+ try {
+ const lists = await targetListsApi.list()
+ setTargetLists(lists)
+
+ if (treeId) {
+ try {
+ const existing = await maintenanceSchedulesApi.getForTree(treeId)
+ setSchedule(existing)
+ if (existing.target_list_id) {
+ setSelectedTargetListId(existing.target_list_id)
+ }
+ } catch {
+ // No schedule yet — that's fine
+ }
+ }
+ } catch {
+ // Target lists may not load — non-critical
+ } finally {
+ setIsLoading(false)
+ }
+ }
+ load()
+ }, [treeId])
+
+ const handleSaveSchedule = async () => {
+ if (!treeId) {
+ toast.error('Save the flow first before configuring a schedule')
+ return
+ }
+
+ setIsSaving(true)
+ try {
+ const freqOption = FREQUENCY_OPTIONS.find(f => f.value === frequency)
+ const cronExpression = freqOption?.cron(hour, minute) ?? `${minute} ${hour} * * 1`
+
+ if (schedule) {
+ const updated = await maintenanceSchedulesApi.update(schedule.id, {
+ cron_expression: cronExpression,
+ timezone,
+ target_list_id: selectedTargetListId || undefined,
+ })
+ setSchedule(updated)
+ toast.success('Schedule updated')
+ } else {
+ const created = await maintenanceSchedulesApi.create({
+ tree_id: treeId,
+ cron_expression: cronExpression,
+ timezone,
+ target_list_id: selectedTargetListId || undefined,
+ })
+ setSchedule(created)
+ toast.success('Schedule created')
+ }
+ } catch {
+ toast.error('Failed to save schedule')
+ } finally {
+ setIsSaving(false)
+ }
+ }
+
+ const selectedTargetList = targetLists.find(tl => tl.id === selectedTargetListId)
+
+ if (isLoading) {
+ return (
+ Loading schedule...
+ )
+ }
+
+ return (
+
+ {/* Frequency */}
+
+ Frequency
+ setFrequency(e.target.value)}
+ className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+ >
+ {FREQUENCY_OPTIONS.map(opt => (
+ {opt.label}
+ ))}
+
+
+
+ {/* Time */}
+
+
+ {/* Timezone */}
+
+ Timezone
+ setTimezone(e.target.value)}
+ className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+ >
+ {TIMEZONE_OPTIONS.map(tz => (
+ {tz}
+ ))}
+
+
+
+ {/* Target List */}
+ {targetLists.length > 0 && (
+
+ Target List (optional)
+ setSelectedTargetListId(e.target.value)}
+ className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+ >
+ None — manual targets only
+ {targetLists.map(tl => (
+ {tl.name} ({tl.targets.length} targets)
+ ))}
+
+
+ )}
+
+ {/* Save button */}
+
+
+ {!treeId && (
+
Save the flow first to configure a schedule.
+ )}
+
(null)
+const [scheduleTargetList, setScheduleTargetList] = useState(null)
+
+useEffect(() => {
+ if (!isMaintenance || !treeId) return
+ const loadSchedule = async () => {
+ try {
+ const s = await maintenanceSchedulesApi.getForTree(treeId)
+ setSchedule(s)
+ if (s.target_list_id) {
+ const tl = await targetListsApi.get(s.target_list_id)
+ setScheduleTargetList(tl)
+ }
+ } catch {
+ // No schedule — fine
+ }
+ }
+ loadSchedule()
+}, [isMaintenance, treeId])
+
+const scheduleSummary = getScheduleSummary(schedule, scheduleTargetList)
+```
+
+Add the collapsible schedule section after the Intake Form section and before the step list:
+```tsx
+{isMaintenance && (
+