feat(app): model backend picker on the spawn screen

Fetch the registered model backends (/claude/models) alongside the
fleet poll and offer the enabled ones in a Model select on the spawn
form, defaulting to the Claude subscription — the mobile counterpart of
the web dashboard's per-spawn dropdown. The select is hidden when no
backends are registered, and Select itself now takes value/label pairs
as well as bare strings.

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

app/src/components/Select.tsx

@@ -14,7 +14,11 @@ import { Icon } from "./Icon";
  * Leeworks Select, ported from components/forms/Select.jsx. Native <select>
  * has no cross-platform styling in RN, so the field opens a bottom sheet of
  * options — same visual field (value + chevron), real picking behavior.
+ * Options are either bare strings (value doubles as the label) or
+ * value/label pairs, matching the web dashboard's Select.
  */
+export type SelectOption = string | { value: string; label: string };
+
 export function Select({
   label,
   options,
@@ -22,13 +26,18 @@ export function Select({
   onChange,
 }: {
   label: string;
-  options: string[];
+  options: SelectOption[];
   value: string;
   onChange: (v: string) => void;
 }) {
   const { colors } = useTheme();
   const [open, setOpen] = useState(false);
 
+  const opts = options.map((o) =>
+    typeof o === "string" ? { value: o, label: o } : o,
+  );
+  const current = opts.find((o) => o.value === value);
+
   return (
     <View style={{ gap: 6 }}>
       <Text style={[styles.label, { color: colors.textHeading }]}>{label}</Text>
@@ -40,7 +49,7 @@ export function Select({
         ]}
       >
         <Text style={[text.body, { color: colors.textHeading, flex: 1 }]}>
-          {value}
+          {current?.label ?? value}
         </Text>
         <Icon name="chevronDown" size={16} color={colors.textMuted} />
       </Pressable>
@@ -54,13 +63,13 @@ export function Select({
               shadows.raised,
             ]}
           >
-            {options.map((opt) => {
+            {opts.map((opt) => {
-              const on = opt === value;
+              const on = opt.value === value;
               return (
                 <Pressable
-                  key={opt}
+                  key={opt.value}
                   onPress={() => {
-                    onChange(opt);
+                    onChange(opt.value);
                     setOpen(false);
                   }}
                   style={({ pressed }) => [
@@ -78,7 +87,7 @@ export function Select({
                       },
                     ]}
                   >
-                    {opt}
+                    {opt.label}
                   </Text>
                   {on && <Icon name="chevronRight" size={16} color={colors.textMuted} />}
                 </Pressable>

app/src/screens/SpawnScreen.tsx

@@ -18,14 +18,24 @@ import { useAppState } from "../state/AppState";
 export function SpawnScreen() {
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
-  const { go, projects, spawn } = useAppState();
+  const { go, projects, models, spawn } = useAppState();
 
   const projectIds = projects.map((p) => p.id);
   const [project, setProject] = useState("");
   const [task, setTask] = useState("");
+  const [model, setModel] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Same choice the web dashboard's spawn form offers: the Claude subscription by
+  // default, plus every enabled registered model backend.
+  const modelOptions = [
+    { value: "", label: "Claude (subscription)" },
+    ...models
+      .filter((m) => m.enabled)
+      .map((m) => ({ value: String(m.id), label: `${m.name} (${m.model})` })),
+  ];
+
   // Default to the first project once they load (or if the current pick vanished).
   useEffect(() => {
     if (projectIds.length > 0 && !projectIds.includes(project)) {
@@ -45,7 +55,7 @@ export function SpawnScreen() {
     setError(null);
     setBusy(true);
     try {
-      await spawn(project, task.trim());
+      await spawn(project, task.trim(), model ? Number(model) : null);
       go("fleet");
     } catch (e) {
       setError(e instanceof Error ? e.message : "Couldn’t spawn the agent.");
@@ -87,6 +97,15 @@ export function SpawnScreen() {
               </View>
             )}
 
+            {modelOptions.length > 1 ? (
+              <Select
+                label="Model"
+                options={modelOptions}
+                value={model}
+                onChange={setModel}
+              />
+            ) : null}
+
             <View>
               <Text style={[text.label, { color: colors.textHeading, marginBottom: 6 }]}>
                 Task

app/src/state/AppState.tsx

@@ -14,6 +14,7 @@ import {
   type ApiClient,
   type ApiError,
   type Checkmark,
+  type ClaudeModel,
   type LogEntry,
   type Project,
 } from "../api/client";
@@ -95,6 +96,8 @@ interface AppStateValue {
   loading: boolean;
   error: string | null;
   projects: Project[];
+  /* Registered model backends (the spawn/schedule dropdown next to the subscription). */
+  models: ClaudeModel[];
   waiting: WaitingItem[];
   recent: RecentItem[];
   counts: { running: number; waiting: number; done: number };
@@ -108,7 +111,7 @@ interface AppStateValue {
 
   // Mutations.
   sendAnswer: (text: string) => Promise<{ resumed: boolean; note?: string }>;
-  spawn: (project: string, task: string) => Promise<void>;
+  spawn: (project: string, task: string, modelId?: number | null) => Promise<void>;
   kill: (project: string, name: string) => Promise<void>;
 }
 
@@ -152,6 +155,7 @@ export function AppStateProvider({ children }: { children: React.ReactNode }) {
 
   // Fleet data.
   const [projects, setProjects] = useState<Project[]>([]);
+  const [models, setModels] = useState<ClaudeModel[]>([]);
   const [agentsByProject, setAgentsByProject] = useState<Record<string, Agent[]>>({});
   const [checkmarks, setCheckmarks] = useState<Record<string, Checkmark | null>>({});
   const [logsByAgent, setLogsByAgent] = useState<Record<string, LogEntry[]>>({});
@@ -166,6 +170,7 @@ export function AppStateProvider({ children }: { children: React.ReactNode }) {
 
   const resetData = useCallback(() => {
     setProjects([]);
+    setModels([]);
     setAgentsByProject({});
     setCheckmarks({});
     setLogsByAgent({});
@@ -190,6 +195,15 @@ export function AppStateProvider({ children }: { children: React.ReactNode }) {
       setError(null);
       const projs = await client.api<Project[]>("/projects");
 
+      // Model backends feed the spawn dropdown; an older server without the endpoint
+      // (404) just means "subscription only", so failures leave the list empty.
+      const modelList = await client
+        .api<ClaudeModel[]>("/claude/models")
+        .catch((e) => {
+          if (e instanceof AuthError) throw e;
+          return [] as ClaudeModel[];
+        });
+
       // Per-agent/per-project sub-requests are isolated: one flaky agent (a 500 on
       // its log, say) must not blank the whole fleet. A rejected AuthError still
       // propagates via onUnauthorized inside the client; here we just record the
@@ -249,6 +263,7 @@ export function AppStateProvider({ children }: { children: React.ReactNode }) {
       for (const [k, v] of logEntries) logMap[k] = v;
 
       setProjects(projs);
+      setModels(modelList);
       setAgentsByProject(abp);
       setCheckmarks(cmMap);
       setLogsByAgent(logMap);
@@ -424,11 +439,15 @@ export function AppStateProvider({ children }: { children: React.ReactNode }) {
   );
 
   const spawn = useCallback(
-    async (project: string, task: string) => {
+    async (project: string, task: string, modelId?: number | null) => {
       if (!client) throw new Error("not connected");
       const name = deriveAgentName(task);
       await client.api(`/projects/${enc(project)}/agents/spawn`, {
-        body: { name, ...(task.trim() ? { task: task.trim() } : {}) },
+        body: {
+          name,
+          ...(task.trim() ? { task: task.trim() } : {}),
+          ...(modelId != null ? { model_id: modelId } : {}),
+        },
       });
       await refresh();
     },
@@ -460,6 +479,7 @@ export function AppStateProvider({ children }: { children: React.ReactNode }) {
       loading,
       error,
       projects,
+      models,
       waiting,
       recent,
       counts,
@@ -483,6 +503,7 @@ export function AppStateProvider({ children }: { children: React.ReactNode }) {
       loading,
       error,
       projects,
+      models,
       waiting,
       recent,
       counts,