Extend the model picker to schedules

schedules.model_id (migration 0013) pins every fired run of a recurring spawn
to a registered model backend, exactly like a hand-spawned agent: the worker
copies it into each firing's spawn payload, the launched agent records the pin,
and resumes stay on the same backend. The Schedules form gets the same Model
dropdown as the spawn form (Claude subscription by default), with a badge in
the schedules table. Create/update routes fail fast on a missing or disabled
backend so a stale selection bounces immediately instead of every firing
failing asynchronously in Activity; a backend deleted later still fails each
firing visibly rather than silently falling back to the subscription.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DzDofD7gP63WpeLG8vEdZu

frontend/components/sections/SchedulesSection.tsx

@@ -36,7 +36,7 @@ function intervalLabel(seconds: number): string {
   return `every ${seconds}s`;
 }
 
-const emptyForm = { name_prefix: "", task: "", interval: "3600", role: "" };
+const emptyForm = { name_prefix: "", task: "", interval: "3600", role: "", model_id: "" };
 
 export function SchedulesSection() {
   const s = useDashboard();
@@ -46,6 +46,21 @@ export function SchedulesSection() {
     () => s.projects.map((p) => ({ value: p.id, label: p.id })),
     [s.projects],
   );
+  /* Same choice the spawn form offers: Claude subscription by default, plus every
+   * enabled backend from the Claude page's Models tab. Every fired run spawns on it. */
+  const modelOpts = useMemo(
+    () => [
+      { value: "", label: "Claude (subscription)" },
+      ...s.claudeModels
+        .filter((m) => m.enabled)
+        .map((m) => ({ value: String(m.id), label: `${m.name} (${m.model})` })),
+    ],
+    [s.claudeModels],
+  );
+  const modelName = useMemo(() => {
+    const byId = new Map(s.claudeModels.map((m) => [m.id, m.name]));
+    return (id: number | null | undefined) => (id == null ? null : byId.get(id) ?? `#${id}`);
+  }, [s.claudeModels]);
 
   const create = async () => {
     const ok = await s.createSchedule(s.selectedProjectId, {
@@ -53,6 +68,7 @@ export function SchedulesSection() {
       task: form.task,
       interval_seconds: Number(form.interval),
       role: form.role,
+      model_id: form.model_id,
     });
     if (ok) setForm(emptyForm);
   };
@@ -107,6 +123,12 @@ export function SchedulesSection() {
                   onChange={(v) => setForm({ ...form, role: v })}
                   options={ROLE_OPTS}
                 />
+                <Select
+                  label="Model"
+                  value={form.model_id}
+                  onChange={(v) => setForm({ ...form, model_id: v })}
+                  options={modelOpts}
+                />
               </div>
               <div className="mt14">
                 <Textarea
@@ -167,6 +189,12 @@ export function SchedulesSection() {
                               <Badge tone="info">{sc.role}</Badge>
                             </>
                           ) : null}
+                          {sc.model_id != null ? (
+                            <>
+                              {" "}
+                              <Badge tone="warning">{modelName(sc.model_id)}</Badge>
+                            </>
+                          ) : null}
                         </td>
                         <td className="mono faint">{sc.project_id}</td>
                         <td className="nowrap">{intervalLabel(sc.interval_seconds)}</td>