feat: list models over RPC and pick model and reasoning on the start page

model.list returns the providers the server holds credentials for, with
each model's supported thinking levels, and the settings default for a
session anchored at hostDir. The app server proxies it as models.list.

The start page composer gets a model picker (provider rail, search,
provider logos) and a Reasoning picker in its bottom row. The settings
default stays in view, muted, when its provider has no credentials. The
picks are kept in localStorage and sent with the create request; without
them settings decide.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: sanchitrk

apps/server/src/contract.ts

@@ -1,5 +1,6 @@
 import { Schema } from "effect";
 import { Rpc, RpcGroup } from "effect/rpc";
+import { ModelList } from "@codeworksh/widget/codework";
 import { Event, EventTimeout, Publish, Request, Synced } from "@codeworksh/widget/event";
 
 /** A conversation with the agent, as listed under its project. */
@@ -26,6 +27,11 @@ export class CodeworkUnavailable extends Schema.TaggedError<CodeworkUnavailable>
 	message: Schema.String,
 }) {}
 
+/** The models could not be listed: a settings file or the model catalog is broken. */
+export class ModelsError extends Schema.TaggedError<ModelsError>()("Server.ModelsError", {
+	message: Schema.String,
+}) {}
+
 export const Layout = Schema.Literals(["tile", "monocle"]);
 export type Layout = typeof Layout.Type;
 
@@ -75,6 +81,12 @@ export const Api = RpcGroup.make(
 		success: Schema.Array(Project),
 		error: CodeworkUnavailable,
 	}),
+	/** The models a new session can use; `hostDir` is its folder, whose project settings apply. */
+	Rpc.make("models.list", {
+		payload: { hostDir: Schema.optionalKey(Schema.String) },
+		success: ModelList,
+		error: Schema.Union([CodeworkUnavailable, ModelsError]),
+	}),
 	Rpc.make("workspaces.list", {
 		success: Schema.Array(Workspace),
 	}),

apps/server/src/handlers.ts

@@ -1,6 +1,6 @@
 import { Effect } from "effect";
 import { Codework } from "./codework.ts";
-import { Contract, type Project } from "./contract.ts";
+import { Contract, ModelsError, type Project } from "./contract.ts";
 import { Event } from "./event.ts";
 import { Kv } from "./kv.ts";
 import { Workspaces } from "./workspaces.ts";
@@ -46,6 +46,21 @@ export const layer = Contract.Api.toLayer(
 				return byProject(sessions);
 			}),
 
+			// The catalog's own errors are kept apart from an unreachable server, so their detail shows.
+			"models.list": Effect.fn("models.list")(function* ({ hostDir }) {
+				const listed = yield* Codework.call((client) =>
+					client("model.list", hostDir === undefined ? {} : { hostDir }).pipe(
+						Effect.map((list) => ({ list })),
+						Effect.catchTags({
+							SettingsError: (error) => Effect.succeed({ failed: `${error.path}: ${error.detail}` }),
+							"Runner.ModelCatalogError": (error) => Effect.succeed({ failed: error.detail }),
+						}),
+					),
+				);
+				if ("failed" in listed) return yield* new ModelsError({ message: listed.failed });
+				return listed.list;
+			}),
+
 			"kv.get": ({ package: pkg, key }) => kv.get(pkg, key),
 			"kv.set": ({ package: pkg, key, value }) => kv.set(pkg, key, value),
 

apps/web/src/components/composer.tsx

@@ -19,6 +19,7 @@ export function Composer({
 	placeholder,
 	autoFocus,
 	compact = false,
+	controls,
 	actions,
 	tray,
 }: {
@@ -29,6 +30,8 @@ export function Composer({
 	readonly autoFocus?: boolean;
 	/** One line that grows with its text, for a composer sharing a frame with what it talks to. */
 	readonly compact?: boolean;
+	/** Pickers at the bottom left, such as the model; `actions` sit at the bottom right. */
+	readonly controls?: ReactNode;
 	readonly actions: ReactNode;
 	readonly tray?: ReactNode;
 }) {
@@ -56,10 +59,14 @@ export function Composer({
 						placeholder={placeholder}
 						aria-label="Prompt"
 						// Grows with its text, from four lines (one when compact) up to about nine, then scrolls.
-						className={`block max-h-52 w-full resize-none bg-transparent text-[14px] leading-relaxed text-ink outline-none [field-sizing:content] placeholder:text-ink-muted/60 ${compact ? "min-h-6" : "min-h-17.5"}`}
+						className={`block max-h-52 w-full resize-none bg-transparent text-[14px] leading-relaxed text-ink outline-none [field-sizing:content] placeholder:text-ink-muted/60 ${compact ? "min-h-6" : "min-h-19.5"}`}
 					/>
 				</div>
-				<div className={`flex items-center justify-end gap-2 ${compact ? "px-2.5 pb-2.5" : "px-4 pb-4"}`}>
+				<div className={`flex items-center gap-2 ${compact ? "px-2.5 pb-2.5" : "px-4 pb-4"}`}>
+					{/* Pulled left by a control's padding, so the first one's icon lines up with the prompt's text. */}
+					<div className="-ml-2.5 flex min-w-0 flex-1 items-center gap-1 text-[14px] font-medium text-ink-muted">
+						{controls}
+					</div>
 					{actions}
 				</div>
 			</form>
@@ -93,7 +100,7 @@ export function ComposerButton({
 			title={label}
 			disabled={disabled}
 			onClick={onClick}
-			className="grid size-8 place-items-center rounded-full bg-brand text-brand-ink shadow-xs transition-[opacity,scale] duration-150 enabled:hover:scale-105 disabled:opacity-30"
+			className="grid size-8 shrink-0 place-items-center rounded-full bg-brand text-brand-ink shadow-xs transition-[opacity,scale,filter] duration-150 enabled:hover:scale-105 enabled:hover:brightness-110 enabled:active:scale-100 disabled:opacity-64"
 		>
 			{children}
 		</button>

apps/web/src/landing/landing.tsx

@@ -17,6 +17,7 @@ import { makeHost } from "../kernel/host";
 import { sessionAddress } from "../widgets/session/address";
 import { Json, type Place as Where, topics } from "../widgets/session/schema";
 import { useOpenElsewhere } from "../wm/open";
+import { ModelPicker, ThinkingPicker, useChoice } from "./model";
 import { projectsAtom, SessionsSidebar, TitleBar } from "./sidebar";
 import { Wordmark } from "./wordmark";
 
@@ -25,9 +26,6 @@ const bridge = window.desktopBridge;
 const encodeCreate = Schema.encodeSync(Json.Create);
 const decodeCreated = Schema.decodeUnknownOption(Json.Created);
 
-// Until the start page has a provider and model selector, every new session uses this one.
-const MODEL = { provider: "openai-codex", id: "gpt-6-luna" };
-
 /** Where a new project lives: nowhere yet, only in memory, or a folder on disk. */
 type Place = { kind: "none" } | { kind: "memory" } | { kind: "folder"; path: string };
 
@@ -53,6 +51,11 @@ export function Landing() {
 	const [place, setPlace] = useState<Place>({ kind: "none" });
 	const [pending, setPending] = useState(false);
 	const [error, setError] = useState<string>();
+	// Remembered across restarts; an absent pick leaves it to settings.
+	const [choice, setChoice] = useChoice();
+	const { model, thinkingLevel: thinking } = choice;
+	// A folder's project settings may add models or change the default; memory has only the user's.
+	const hostDir = place.kind === "folder" ? place.path : undefined;
 
 	const canSend = place.kind !== "none" && query.trim() !== "" && !pending;
 
@@ -68,7 +71,8 @@ export function Landing() {
 					place: where,
 					messageId: crypto.randomUUID(),
 					text: query.trim(),
-					model: MODEL,
+					...(model === undefined ? {} : { model }),
+					...(thinking === undefined ? {} : { thinkingLevel: thinking }),
 				}),
 			})
 			.then((reply) => Option.getOrUndefined(decodeCreated(reply.payload)))
@@ -112,6 +116,21 @@ export function Landing() {
 							onChange={setQuery}
 							onSubmit={() => void send()}
 							placeholder="Ask for changes, send follow-ups, or attach images"
+							controls={
+								<>
+									<ModelPicker
+										hostDir={hostDir}
+										value={model}
+										onChange={(next) => setChoice({ ...choice, model: next })}
+									/>
+									<ThinkingPicker
+										hostDir={hostDir}
+										model={model}
+										value={thinking}
+										onChange={(level) => setChoice({ ...choice, thinkingLevel: level })}
+									/>
+								</>
+							}
 							actions={
 								<ComposerButton label="Send" disabled={!canSend}>
 									<ArrowUp className="size-4" strokeWidth={2} aria-hidden />