Merge upstream v0.4.0 into Gitea fork

components/ai-elements/message.tsx

@@ -38,7 +38,7 @@ import {
   type PluginConfig,
 } from "streamdown";
 import { mdComponents } from "@/components/md-blocks";
-import { transformMathDelimiters } from "@/src/core";
+import { repairMathForDisplay, transformMathDelimiters } from "@/src/core";
 
 export type MessageProps = HTMLAttributes<HTMLDivElement> & {
   from: LhViewMessage["role"];
@@ -362,6 +362,12 @@ export const streamdownPlugins = {
   math: createMathPlugin({ singleDollarTextMath: true }),
 } as unknown as PluginConfig;
 
+// Remend's incomplete-HTML heuristic mistakes `<b` in `$a<b$` for a
+// partial tag and deletes the remaining source before math can tokenize.
+// Preserve that text (unfinished prose HTML may show literally); Streamdown's
+// separate sanitization/hardening and all other Markdown repairs stay enabled.
+export const streamdownRemend = { htmlTags: false };
+
 export const MessageResponse = memo(
   ({ className, children, ...props }: MessageResponseProps) => {
     const { t } = useI18n();
@@ -385,6 +391,7 @@ export const MessageResponse = memo(
         translations={translations}
         components={mdComponents}
         plugins={streamdownPlugins}
+        remend={streamdownRemend}
         {...props}
       >
         {content}
@@ -398,6 +405,16 @@ export const MessageResponse = memo(
 
 MessageResponse.displayName = "MessageResponse";
 
+/** Recovery is a tool-text presentation concern, not a shape/answer-data
+ * transform. Ordinary assistant/user prose keeps MessageResponse unchanged. */
+export function ToolContentResponse({ children, ...props }: MessageResponseProps) {
+  return (
+    <MessageResponse {...props}>
+      {typeof children === "string" ? repairMathForDisplay(children) : children}
+    </MessageResponse>
+  );
+}
+
 export type MessageToolbarProps = ComponentProps<"div">;
 
 export const MessageToolbar = ({

components/ai-elements/reasoning.tsx

@@ -25,7 +25,7 @@ import {
 import { Streamdown } from "streamdown";
 
 import { transformMathDelimiters } from "@/src/core";
-import { streamdownPlugins } from "./message";
+import { streamdownPlugins, streamdownRemend } from "./message";
 import { mdComponents } from "@/components/md-blocks";
 import { Shimmer } from "./shimmer";
 
@@ -212,7 +212,7 @@ export const ReasoningContent = memo(
       )}
       {...props}
     >
-      <Streamdown components={mdComponents} plugins={streamdownPlugins}>
+      <Streamdown components={mdComponents} plugins={streamdownPlugins} remend={streamdownRemend}>
         {transformMathDelimiters(children)}
       </Streamdown>
     </CollapsibleContent>

components/answered-card.tsx

@@ -6,10 +6,11 @@ import { useState } from "react";
 import { ConfidenceRail } from "@/components/confidence-rail";
 import { GlyphMark } from "@/components/ui/glyph-mark";
 import { ThinkingBlock } from "@/components/thinking-block";
+import { PathText } from "@/components/file-path-chip";
 import { cn } from "@/lib/utils";
-import { MessageResponse } from "@/components/ai-elements/message";
+import { ToolContentResponse } from "@/components/ai-elements/message";
 import type { QuestionAnswerData } from "@/src/core";
-import { parseAskInput, parseQuizInput } from "@/src/core";
+import { answerForPresentation, parseAskInput, parseQuizInput } from "@/src/core";
 
 /**
  * Static rendering of an answered question (tool part in `output-available`).
@@ -21,8 +22,9 @@ import { parseAskInput, parseQuizInput } from "@/src/core";
  * client — the card reveals his answer, the committed correct answer, and
  * the explanation, with NO verdict chips (owner ruling 2026-09-27).
  */
-export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; input?: unknown }) {
+export function AnsweredCard({ answer: savedAnswer, input }: { answer: QuestionAnswerData; input?: unknown }) {
 	const { t } = useI18n();
+	const answer = answerForPresentation(savedAnswer, input);
 	const [whyOpen, setWhyOpen] = useState(false); // the tucked explanation (predictions, owner 2026-10-03)
 	if (answer.dismissed) {
 		return (
@@ -88,13 +90,13 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
 					))}
 			</div>
 			<div className="mb-3 font-medium">
-				<MessageResponse>{answer.questionText}</MessageResponse>
+				<ToolContentResponse>{answer.questionText}</ToolContentResponse>
 			</div>
 			{parsedDetails && (
 				// The details line, same paint as the pending dock (owner,
 				// 2026-10-12): full markdown, LaTeX included.
 				<div className="mb-3 text-sm text-muted-foreground">
-					<MessageResponse>{parsedDetails}</MessageResponse>
+					<ToolContentResponse>{parsedDetails}</ToolContentResponse>
 				</div>
 			)}
 
@@ -133,14 +135,14 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
 									</span>
 								)}
 								<span className={cn(!sel && "text-muted-foreground")}>
-									<MessageResponse>{opt.label}</MessageResponse>
+									<ToolContentResponse>{opt.label}</ToolContentResponse>
 									{descByIndex.get(opt.index) && (
 										// Ask-option subtext (owner, 2026-10-12): same markdown path
 										// as the pending dock — LaTeX included. Quiz options carry
 										// none (owner ruling 2026-09-26); the map stays empty for them.
-										<MessageResponse className="lh-prose block text-xs text-muted-foreground">
+										<ToolContentResponse className="lh-prose block text-xs text-muted-foreground">
 											{descByIndex.get(opt.index)}
-										</MessageResponse>
+										</ToolContentResponse>
 									)}
 								</span>
 							</div>
@@ -154,13 +156,13 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
 							data-testid="answered-other"
 							className="flex items-center gap-2 rounded-lg border border-primary bg-accent px-3 py-1.5"
 						>
-							<span>“{answer.other}”</span>
+							<span>“<PathText text={answer.other} />”</span>
 						</div>
 					)}
 				</div>
 			)}
 
-			{answer.text && <div className="lh-prose mt-2 whitespace-pre-wrap">“{answer.text}”</div>}
+			{answer.text && <div className="lh-prose mt-2 whitespace-pre-wrap">“<PathText text={answer.text} />”</div>}
 
 			{/* The confidence record (owner round 6): the slider's rail, disc
 			    removed — the missing handle itself says "this is a record, not a
@@ -213,9 +215,9 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
 					{whyOpen && (
 						<div className="mt-1.5 rounded-lg bg-muted py-2 text-sm text-foreground/50">
 							<span className="font-medium text-muted-foreground">{t("Why:")}{" "}</span>
-							{/* The markdown wrapper must go truly inline — a block <p> after the
-							   "Why:" label created the oversized leading gap (owner's fix list). */}
-							<MessageResponse className="inline [&_p]:inline [&_p]:m-0">{answer.explanation}</MessageResponse>
+							{/* Keep the first paragraph beside the label, not every paragraph:
+							   later paragraphs must retain their recovered document structure. */}
+							<ToolContentResponse className="inline [&>p:first-child]:inline [&>p:first-child]:m-0">{answer.explanation}</ToolContentResponse>
 						</div>
 					)}
 				</div>
@@ -227,7 +229,7 @@ export function AnsweredCard({ answer, input }: { answer: QuestionAnswerData; in
 			{isExplain && answer.committed && (
 				<div className="mt-3 rounded-lg bg-muted py-2 text-sm text-muted-foreground">
 					<span className="font-medium text-foreground">{t("The answer:")}{" "}</span>
-					<MessageResponse className="inline [&_p]:inline [&_p]:m-0">{answer.committed}</MessageResponse>
+					<ToolContentResponse className="inline [&>p:first-child]:inline [&>p:first-child]:m-0">{answer.committed}</ToolContentResponse>
 				</div>
 			)}
 		</div>

components/artifacts/dispatch-card.tsx

@@ -17,7 +17,7 @@ import { BrailleSpinner } from "@/components/braille-spinner";
  *
  *   job unknown → "dispatched" pulse (the jobs feed hasn't seen it yet)
  *   running     → live activity card (activity line + elapsed)
- *   done/error  → quiet one-liner ("delivered" / "failed") — the artifact
+ *   done/error  → quiet one-liner ("finished" / "failed") — the artifact
  *                 itself arrives in the steer message right below, so the
  *                 box must not duplicate it.
  */
@@ -57,7 +57,7 @@ export function DispatchCard({ toolCallId, kind }: { toolCallId: string; kind: J
 		>
 			{failed ? <XIcon className="size-3.5 text-red-500" /> : <CheckIcon className="size-3.5" />}
 			<span className="font-medium uppercase tracking-wide">{t(label)}</span>
-			<span>{failed ? t("failed") : t("delivered")}</span>
+			<span>{failed ? t("failed") : t("finished")}</span>
 		</div>
 	);
 }

components/artifacts/svg-image.tsx

@@ -0,0 +1,37 @@
+/** Two display-only repairs for inputs the old HTML embedding accepted.
+ * Do not rewrite stored artifacts/downloads or attempt general XML repair.
+ * Comments, CDATA and processing instructions are copied verbatim. */
+export function svgImageSource(svg: string): string {
+	let foundRoot = false;
+	return svg.replace(
+		/<!--[\s\S]*?(?:-->|$)|<!\[CDATA\[[\s\S]*?(?:\]\]>|$)|<\?[\s\S]*?(?:\?>|$)|<\/?[a-zA-Z](?:[^<>"']|"[^"]*"|'[^']*')*>|&nbsp;/g,
+		(token) => {
+			if (token.startsWith("<!--") || token.startsWith("<![CDATA[") || token.startsWith("<?")) return token;
+			if (!foundRoot && /^<svg(?=[\s/>])/i.test(token)) {
+				foundRoot = true;
+				// Consume complete attribute values, so text mentioning xmlns
+				// inside a different attribute cannot masquerade as a declaration.
+				const attrs = token.matchAll(/\s([^\s=/>]+)(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?/g);
+				const hasNamespace = Array.from(attrs).some((attr) => attr[1] === "xmlns");
+				if (!hasNamespace) token = token.replace(/^<svg/i, '$& xmlns="http://www.w3.org/2000/svg"');
+			}
+			return token.replace(/&nbsp;/g, "&#160;");
+		},
+	);
+}
+
+/** Keep generated SVG in an image document, outside the app's CSS and ID scope.
+ * This is a display boundary, not a sanitizer for the original SVG download. */
+export function SvgImage({
+	svg,
+	className,
+	width,
+}: {
+	svg: string;
+	className?: string;
+	width?: number;
+}) {
+	// The source is already an in-memory vector image; no Next image optimization.
+	// eslint-disable-next-line @next/next/no-img-element
+	return <img src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgImageSource(svg))}`} alt="Figure" className={className} width={width} draggable={false} />;
+}

components/artifacts/visual-card.tsx

@@ -10,6 +10,7 @@ import { Toggle } from "@/components/settings/controls";
 import { useSessionMermaid } from "@/components/session-overlay";
 import { downloadFile } from "@/components/artifacts/download";
 import { DispatchCard } from "@/components/artifacts/dispatch-card";
+import { SvgImage } from "@/components/artifacts/svg-image";
 import type { ArtifactPartProps, VisualResult } from "@/src/core";
 
 /**
@@ -18,22 +19,10 @@ import type { ArtifactPartProps, VisualResult } from "@/src/core";
  * the chat view's jobs feed). The SVG itself renders from the steer message
  * (sub-agent result delivery) via VisualOutputCard.
  *
- * The SVG is model-authored for the learner's own machine (their own teacher
- * wrote it, verified by looking) — dangerouslySetInnerHTML is acceptable
- * here, with a cheap hygiene pass (sanitizeSvg: strip <script> blocks, on*
- * handlers, and javascript:/data:text/html URLs) since it lands in the
- * app's DOM.
+ * Both display modes use an SVG image document: generated markup and its
+ * styles never join the app's DOM. Downloads still contain the original SVG.
  */
 
-/** Cheap SVG hygiene — not a full sanitizer, just removing the obvious exec vectors. */
-export function sanitizeSvg(svg: string): string {
-	return svg
-		.replace(/<script[\s\S]*?<\/script\s*>/gi, "")
-		.replace(/<script[^>]*\/?>/gi, "")
-		.replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
-		.replace(/(href|xlink:href)\s*=\s*(?:"\s*(?:javascript|data:text\/html)[^"]*"|'\s*(?:javascript|data:text\/html)[^']*'|(?:javascript|data:text\/html)[^\s>]*)/gi, "");
-}
-
 /** The svg root's DECLARED width in px, when there is one — the natural
  *  size the card displays at instead of stretching to full width (owner,
  *  2026-10-07). %, em, "auto", or a missing attribute → null (the caller
@@ -123,13 +112,18 @@ export function VisualOutputCard({
 			<div
 				className={
 					natural !== null
-						? "w-fit max-w-full overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:max-w-full"
-						: "w-full overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:w-full"
+						? "w-fit max-w-full overflow-hidden rounded-lg bg-white"
+						: "w-full overflow-hidden rounded-lg bg-white"
 				}
 				style={{ filter: inverted ? "invert(1) hue-rotate(180deg)" : undefined }}
-				dangerouslySetInnerHTML={{ __html: sanitizeSvg(result.svg) }}
 				data-testid="visual-svg"
-			/>
+			>
+				<SvgImage
+					svg={result.svg}
+					width={natural ?? undefined}
+					className={natural !== null ? "block h-auto max-w-full" : "block h-auto w-full"}
+				/>
+			</div>
 			<div className="mt-2 flex items-center justify-between gap-2">
 				<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Figure")}</div>
 				<div className="flex items-center gap-1.5">

components/chat.tsx

@@ -7,7 +7,7 @@ import { useChatSession } from "@/components/session";
 import { visibleQueuedSteers } from "@/components/session-core";
 import { SetupDialog } from "@/components/setup-dialog";
 import { Hint } from "@/components/ui/hint";
-import { useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
+import { useModelSetup, selectedModelUnavailable, openModelPicker, ZeroKeysPill } from "@/components/setup-cta";
 import { useStickToBottomContext, type StickToBottomContext } from "use-stick-to-bottom";
 import {
 	Conversation,
@@ -16,6 +16,7 @@ import {
 	ConversationScrollButton,
 } from "@/components/ai-elements/conversation";
 import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
+import { PathText } from "@/components/file-path-chip";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
 import { Shimmer } from "@/components/ai-elements/shimmer";
 import { BrailleSpinner } from "@/components/braille-spinner";
@@ -28,6 +29,8 @@ import { Composer } from "@/components/composer";
 import { useEnterSubmits } from "@/components/enter-submits";
 import { blurAfterPointerClick } from "@/components/focus-hygiene";
 import { dockStateKey } from "@/components/dock-state-key";
+import { clearOpeningPrompt, readOpeningPromptEntry, stashOpeningPrompt, OPENING_PROMPT_FAILURE } from "@/components/opening-prompt";
+import { forwardDockWheel, useDockHeight } from "@/components/dock-height";
 import { QueuedSteersBody, type QueuedSteerLine } from "@/components/queued-steers";
 import { DictationBar, finishDictation, joinDictation, useDictation } from "@/components/dictation";
 import { useFieldCycle } from "@/components/field-cycle";
@@ -37,10 +40,10 @@ import { useServerEvent, useServerResync } from "@/components/server-events";
 import {
 	isProviderKeyRefusal,
 	firstSourceTextParts,
+	cliContextWindowOf,
 	messageAnchorId,
 	textPartMessageId,
 	kbdEventForAction as kbdEventForChat,
-	needsContinuation,
 	type ChatInput,
 	type ChatSettings,
 	type LhMessage,
@@ -59,7 +62,7 @@ import { PracticeDock } from "@/components/practice-dock";
 import { ThinkingCard, type PracticeThinkingData } from "@/components/practice-cards";
 import { GraphContextCard, type GraphContextData } from "@/components/graph-context-card";
 import { TopBar } from "@/components/top-bar";
-import type { ArtifactPartProps, JobRecord, Phase3, QuestionAnswerData, TurnUsage, SessionPricing } from "@/src/core";
+import type { ArtifactPartProps, JobRecord, Phase3, QuestionAnswerData, QuestionFormDraft, TurnUsage, SessionPricing } from "@/src/core";
 import type { LhViewMessage } from "@/src/core";
 import { PhaseChip, PhaseDivider } from "@/components/phase-divider";
 import {
@@ -68,9 +71,12 @@ import {
 	type CompactionDividerData,
 } from "@/components/compaction-divider";
 import { CoverageRing } from "@/components/extraction-coverage";
+import { Button } from "@/components/ui/button";
 import {
 	activeProblemOf,
+	pendingQuestionOf,
 	dismissedAnswer,
+	endsInFailedTurn,
 	findPendingToolCall,
 	phaseAt3,
 	phaseTimeline,
@@ -80,8 +86,6 @@ import {
 } from "@/src/core";
 import { ReadingThinkingField } from "@/components/reading-thinking";
 import { currentUserThinkingOpen, setAllUserThinkingOpen } from "@/components/thinking-block";
-import { slotsConfigured, type ModelsSettings } from "@/src/core";
-import { useSettingsSaved } from "@/components/settings-signal";
 
 /** One width for everything: transcript, cards, and the bottom blob share this column. */
 /**
@@ -164,6 +168,18 @@ export function parseProviderKeyRefusal(message: string | undefined): boolean {
 	}
 }
 
+/** Retry sends no composer text. Its refusal must not resurrect the draft
+ * from an earlier, already-durable text send over today's unsent composer.
+ * Retire that fallback synchronously, never when the async Retry settles:
+ * a later ordinary send may own a new recovery draft by then. */
+export function retryFailedResponse(
+	send: (input: ChatInput) => void,
+	submittedDraft: { current: string | null },
+): void {
+	submittedDraft.current = null;
+	void send({ type: "retry" });
+}
+
 /** useLayoutEffect that is silent during SSR (client components still render on the server in Next). */
 const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 
@@ -200,6 +216,7 @@ export function Chat({
 	chatId,
 	title,
 	initialMessages,
+	initialError,
 	initialPrompt,
 	initiallyInFlight,
 	initiallyCompacting = false,
@@ -209,6 +226,8 @@ export function Chat({
 	chatId: string;
 	title: string;
 	initialMessages: LhMessage[];
+	/** Memory-only settlement notice supplied on reopening. */
+	initialError?: string;
 	/** The session kind (practice sessions, owner 2026-10-04): practice
 	 *  renders no phase chip (no probe→teach arc applies) and a Practice
 	 *  tag rides the header instead. */
@@ -239,8 +258,8 @@ export function Chat({
 	// (core/view.ts projectView); sends are ONE explicit input event each
 	// ({chatId, input} — the stash indirection died with the SDK), and the
 	// turn stream is the VERBATIM AgentEvent passthrough the server emits.
-	const { messages, nativeMessages, contextTokens, send, steer, steerQueue, submitAnswer, dismissQuestion, dismissProblem, setMessages, adoptRecord, status, error, stop, clearError, resumeStream, setReattachSettled } =
-		useChatSession({ chatId, initialMessages, initiallyInFlight });
+	const { messages, nativeMessages, hasConfirmedConversation, contextTokens, send, continueIfOwed, steer, steerQueue, submitAnswer, dismissQuestion, dismissProblem, questionDraft, saveQuestionDraft, setMessages, adoptRecord, status, error, stop, clearError, resumeStream, setReattachSettled } =
+		useChatSession({ chatId, initialMessages, initialError, initiallyInFlight });
 
 	const sessionFindScopeRef = useRef<HTMLDivElement | null>(null);
 	const scrollContextRef = useRef<StickToBottomContext | null>(null);
@@ -249,16 +268,6 @@ export function Chat({
 	// The reattach settled terminal → the sync-and-continue seam (below).
 	setReattachSettled(() => reattachSettledRef.current());
 
-	// New chat with a topic: send the first message exactly once
-	// (initialPromptOwed — the pure gate, pinned in the test suite).
-	const sentInitial = useRef(false);
-	useEffect(() => {
-		if (!sentInitial.current && initialPromptOwed(initialMessages, initialPrompt)) {
-			sentInitial.current = true;
-			void send({ type: "text", text: initialPrompt! });
-		}
-	}, [initialPrompt, initialMessages, send]);
-
 	// A turn running server-side, attached to no live view of ours (navigate
 	// away mid-turn, or a wake turn discovered mid-session): the reattach
 	// stream is the primary channel (resumeStream — the same rendering path
@@ -410,6 +419,7 @@ export function Chat({
 				void dismissQuestion(
 					p.toolCallId,
 					reading ? { ...answer, readingThinking: reading } : answer,
+					p.key,
 				);
 				if (busyRef.current) abortInFlightTurn();
 				return;
@@ -437,13 +447,11 @@ export function Chat({
 	useEffect(() => {
 		if (mountContinuation.current) return;
 		mountContinuation.current = true;
-		if (!turnInFlight && status === "ready" && needsContinuation(initialMessages)) {
-			void send({ type: "continue" });
-		}
+		if (!turnInFlight) continueIfOwed(initialMessages);
 		// mount-only by design (turnInFlight read at initial value)
 	}, []);
 
-	const pending = findPendingToolCall(messages);
+	const pending = findPendingToolCall(messages, pendingQuestionOf(nativeMessages));
 	// The abort handler reads the pending question from a ref (the window
 	// listener is mount-scoped; the value it needs is render-scoped).
 	const pendingRef = useRef(pending);
@@ -461,7 +469,6 @@ export function Chat({
 	const busy = localStream || turnInFlight;
 	const busyRef = useRef(busy);
 	busyRef.current = busy;
-
 	// The attach handoff (stream-reattach wave): the moment a resumed
 	// stream takes over the rendering — the SDK left "ready", so
 	// submitted/streaming means chunks are flowing — localStream covers
@@ -533,12 +540,14 @@ export function Chat({
 		readingThinkingRef.current = "";
 		setReadingThinking("");
 	}, []);
-	const pendingQuestionId = pending?.toolCallId ?? null;
+	const pendingQuestionId = pending?.key ?? null;
 	useEffect(() => {
-		// A new pending question never inherits the previous one's draft.
-		readingThinkingRef.current = "";
-		setReadingThinking("");
-	}, [pendingQuestionId]);
+		// Different calls never share a draft; a failed submission of THIS
+		// call restores the reading channel alongside the form's snapshot.
+		const reading = pendingQuestionId ? questionDraft(pendingQuestionId)?.readingThinking ?? "" : "";
+		readingThinkingRef.current = reading;
+		setReadingThinking(reading);
+	}, [pendingQuestionId, questionDraft]);
 
 	// The phase at every message (one linear fold): the transcript draws a
 	// color-coded dotted divider at each boundary; the header chip reads the
@@ -555,31 +564,79 @@ export function Chat({
 		textRef.current = v;
 		setText(v);
 	}, []);
-	// The BYOK setup flow (owner, 2026-09-22): the persistent CTA and the
-	// refusal interception share one SetupDialog mount. `configured` is
-	// seeded server-side (slotsConfigured on the record) and flips on Save.
-	const [configured, setConfigured] = useState(initialConfigured);
-	// The zero-keys truth (zero-keys wave): no provider key = the pill
-	// takes precedence over the models CTA (keys come first in the chain).
-	// Reads once on mount, re-reads on the "keys" signal.
-	const zeroKeys = useZeroKeys();
-	// Cross-surface freshness (fix wave): another surface's models write —
-	// setup save, composer pick, a settings write — re-reads the record so
-	// the setup CTA appears/disappears live (it used to lag until reload).
-	useSettingsSaved((section) => {
-		if (section !== "models") return;
-		fetch("/api/settings")
-			.then((r) => r.json() as Promise<{ settings?: { models?: ModelsSettings } | null } | null>)
-			.then((body) => setConfigured(slotsConfigured(body?.settings?.models)))
-			.catch(() => {});
-	});
+	// Saved slot completeness is live, but the session's selected route
+	// comes from its own ordinary model control, never today's Strong pin.
+	const { catalog, configured, zeroKeys } = useModelSetup(initialConfigured);
+	const catalogRef = useRef(catalog);
+	catalogRef.current = catalog;
+	const [selectedModel, setSelectedModel] = useState<string | undefined>();
 	const [setupOpen, setSetupOpen] = useState(false);
 	/** The last explicitly-sent draft (composer send): the
 	 *  refusal flow restores it into the composer, where it waits for the
 	 *  learner to re-send (Save never auto-sends, owner 2026-10-09).
 	 *  Auto-continuations (probe answers) never set it — their refusal
-	 *  opens the dialog with no replay. */
+	 *  opens recovery with no replay. */
 	const draftRef = useRef<string | null>(null);
+	const openingDraftRef = useRef<string | null>(null);
+	const [openingError, setOpeningError] = useState(false);
+	const openingMountedRef = useRef(false);
+	useEffect(() => {
+		openingMountedRef.current = true;
+		return () => { openingMountedRef.current = false; };
+	}, []);
+
+	const deliverOpeningPrompt = useCallback((prompt: string) => {
+		openingDraftRef.current = prompt;
+		// Persist uncertainty BEFORE the POST: another mount must restore,
+		// not race the still-arriving request. No storage means no auto-send.
+		if (!stashOpeningPrompt(chatId, prompt, true)) {
+			applyText(prompt);
+			setOpeningError(true);
+			return;
+		}
+		setOpeningError(false);
+		draftRef.current = prompt; // The existing 503 flow must restore it too.
+		applyText("");
+		void send({ type: "text", text: prompt }, () => {
+			clearOpeningPrompt(chatId);
+			openingDraftRef.current = null;
+			if (draftRef.current === prompt) draftRef.current = null;
+		}).then(accepted => {
+			if (!accepted && openingMountedRef.current && openingDraftRef.current === prompt && !textRef.current) {
+				applyText(prompt);
+			}
+		});
+	}, [chatId, send, applyText]);
+
+	const sentInitial = useRef(false);
+	useEffect(() => {
+		if (sentInitial.current) return;
+		sentInitial.current = true;
+		const entry = readOpeningPromptEntry(chatId);
+		const prompt = initialPrompt || entry?.text; // Legacy links still work.
+		if (!initialPromptOwed(initialMessages, prompt)) {
+			if (initialMessages.some(m => m.role === "user" || m.role === "assistant")) clearOpeningPrompt(chatId);
+			return;
+		}
+		openingDraftRef.current = prompt!;
+		if (entry?.attempted || initiallyInFlight) {
+			applyText(prompt!); // Interrupted start: the learner explicitly resends.
+			return;
+		}
+		deliverOpeningPrompt(prompt!);
+	}, [chatId, initialPrompt, initialMessages, initiallyInFlight, deliverOpeningPrompt, applyText]);
+
+	useEffect(() => {
+		if (!hasConfirmedConversation) return;
+		clearOpeningPrompt(chatId);
+		// A later canonical read may confirm a lost acknowledgment. Clear
+		// only the unchanged recovered draft, never the learner's newer work.
+		const opening = openingDraftRef.current;
+		if (opening !== null && textRef.current === opening) applyText("");
+		if (draftRef.current === opening) draftRef.current = null;
+		openingDraftRef.current = null;
+		setOpeningError(false);
+	}, [chatId, hasConfirmedConversation, applyText]);
 
 	// THE BYOK REFUSAL (owner, 2026-09-22): a send that lands the server's
 	// 503 models_not_configured envelope renders as the SETUP FLOW, never
@@ -594,8 +651,9 @@ export function Chat({
 		if (!error) return;
 		const missing = parseModelsRefusal(error.message);
 		// The key-refusal twin (zero-keys wave): a pinned model whose
-		// provider key is gone gets the SAME treatment — revert-draft and
-		// open setup (the dialog derives to its first-key stage on its own).
+		// provider key is gone also restores the draft. With another provider
+		// connected, repair belongs to the ordinary current-session picker;
+		// otherwise setup derives its exclusive provider/loading stage.
 		const keyRefused = parseProviderKeyRefusal(error.message);
 		if (!missing && !keyRefused) return; // a real error keeps the honest banner
 		// ORDER MATTERS: clearError() flips this effect's own dep (`error`)
@@ -615,7 +673,8 @@ export function Chat({
 				draftRef.current = null;
 			}
 			clearError();
-			setSetupOpen(true);
+			if (keyRefused && catalogRef.current?.providers.some((p) => p.keyPresent)) openModelPicker();
+			else setSetupOpen(true);
 		})();
 		return () => {
 			cancelled = true;
@@ -635,10 +694,10 @@ export function Chat({
 	const cycleChatFields = useCallback((): readonly HTMLElement[] => {
 		const pick = (sel: string) => Array.from(document.querySelectorAll<HTMLElement>(sel));
 		return [
-			...pick('[data-testid="reading-thinking-field"] textarea'),
-			...pick('[data-testid="question-dock"] textarea'),
-			...pick('[data-testid="practice-dock"] textarea'),
-			...pick('[data-testid="composer"] textarea'),
+			...pick('[data-testid="reading-thinking-field"] [data-file-path-input]'),
+			...pick('[data-testid="question-dock"] [data-file-path-input]'),
+			...pick('[data-testid="practice-dock"] [data-file-path-input]'),
+			...pick('[data-testid="composer"] [data-file-path-input]'),
 		];
 	}, []);
 	useFieldCycle(cycleChatFields);
@@ -653,7 +712,7 @@ export function Chat({
 	 * composer: with a question pending the Composer is unmounted, the ref
 	 * is null, and the thinking field is left alone by design. */
 	const dictationWasActiveRef = useRef(false);
-	const composerInputRef = useRef<HTMLTextAreaElement>(null);
+	const composerInputRef = useRef<HTMLDivElement>(null);
 	useEffect(() => {
 		if (dictation.active) {
 			dictationWasActiveRef.current = true;
@@ -682,6 +741,12 @@ export function Chat({
 	// server's registry mutex is the structural gate; this is the
 	// affordance).
 	const [compacting, setCompacting] = useState(initiallyCompacting);
+	// A failed model response (issue #110): Retry keeps the saved input
+	// and completed work, without another learner message. Offered from
+	// "error" too: a dropped stream leaves the model there, and send()
+	// recovers from it. Later compaction requires new input instead.
+	const retryable = (status === "ready" || status === "error") && !busy && !compacting && endsInFailedTurn(nativeMessages);
+	const retryFailedTurn = () => retryFailedResponse(send, draftRef);
 	const canSend =
 		(text.trim().length > 0 || dictation.active) && !pending && !activeProblem && !compacting;
 
@@ -720,20 +785,20 @@ export function Chat({
 	const syncFromServer = useCallback(async () => {
 		const res = await fetch(`/api/chats/${chatId}`);
 		if (!res.ok) return;
-		const record = (await res.json()) as { messages?: LhMessage[]; turns?: TurnUsage[]; pricing?: SessionPricing };
+		const record = (await res.json()) as { messages?: LhMessage[]; turns?: TurnUsage[]; pricing?: SessionPricing; turnError?: string };
 		if (Array.isArray(record.turns)) setTurns(record.turns);
 		setPricing(record.pricing);
 		if (!Array.isArray(record.messages)) return;
-		setMessages(record.messages);
+		setMessages(record.messages, record.turnError);
 		// The continuation seam (contracts.ts protocol §4): a job result
 		// landing in the record leaves the agent owing a continuation — the
 		// record ENDS on un-consumed results, the dock owns no question, and
 		// nothing runs. The native fold (needsContinuation) is the old SDK
 		// lastAssistantMessageIsCompleteWithToolCalls check.
-		if (status === "ready" && needsContinuation(record.messages)) {
-			void send({ type: "continue" });
-		}
-	}, [chatId, setMessages, send, status]);
+		// Current model truth also guards retained/live failures: canonical
+		// sync must never automatically replace a reply that failed to save.
+		continueIfOwed(record.messages);
+	}, [chatId, setMessages, continueIfOwed]);
 
 	// The settled terminal's other half (stream-reattach wave): the
 	// transport resolved turn-settled — no turn running, the record is
@@ -908,8 +973,8 @@ export function Chat({
 		// (endTurn emits from onFinish before the response terminates, so the
 		// SSE frame reliably beats [DONE]) — the handler below cannot sync
 		// there, it flags instead, and THIS flip consumes the flag: the record
-		// is guaranteed durable (endTurn fires only after persistTurn, the S2
-		// ordering law), so replacing the view onto it absorbs the tail's
+		// reflects durable truth (a failed settlement retains its notice,
+		// not its unsaved reply), so replacing the view absorbs the tail's
 		// streamed c_-id copies into base under their server ids. Without
 		// this the tail kept those copies forever and the next send's
 		// steer-adoption window rendered them a second time. The wake handoff
@@ -1146,6 +1211,18 @@ export function Chat({
 		if (busy || pending || compacting) return;
 		const t = textRef.current.trim();
 		if (!t) return;
+		if (zeroKeys) {
+			setSetupOpen(true);
+			return;
+		}
+		if (selectedModelUnavailable(catalog, selectedModel)) {
+			openModelPicker();
+			return; // No optimistic send and no change to the learner's draft.
+		}
+		if (openingDraftRef.current !== null) {
+			deliverOpeningPrompt(t);
+			return;
+		}
 		draftRef.current = t; // the refusal flow's preserve-and-replay seam
 		applyText("");
 		void send({ type: "text", text: t });
@@ -1434,7 +1511,7 @@ export function Chat({
 												    rail as the thinking rows — one quote geometry. */}
 												<div className="font-medium uppercase tracking-wide text-muted-foreground">{t("You")}</div>
 												<div className="lh-prose whitespace-pre-wrap text-foreground">
-													{m.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n")}
+													<PathText text={m.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n")} />
 												</div>
 											</div>
 									) : (
@@ -1572,9 +1649,15 @@ export function Chat({
 										{t("THINKING…")}</Shimmer>
 								</span>
 							)}
+							{openingError && <p role="alert" className="text-sm text-destructive">{OPENING_PROMPT_FAILURE}</p>}
 							{error && (
-								<div className="rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm">
-									{t("Something went wrong:")}{" "}{t(error.message)}
+								<div className="flex items-center justify-between gap-3 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm">
+									<span>{t("Something went wrong:")}{" "}{t(error.message)}</span>
+									{retryable && (
+										<Button variant="outline" size="xs" data-testid="retry-failed-turn" onClick={retryFailedTurn}>
+											{t("Retry")}
+										</Button>
+									)}
 								</div>
 							)}
 						</div>
@@ -1594,10 +1677,13 @@ export function Chat({
 				    fold) and NEVER overlaps the composer. */}
 				<DockOverlay
 					pending={pending}
+					initialQuestionDraft={pending ? questionDraft(pending.key)?.form : undefined}
+					onSaveQuestionDraft={(form) => { if (pending) saveQuestionDraft(pending.key, { form }); }}
 					practice={activeProblem}
 					compactionRunning={compacting}
 					onSubmitThinking={submitThinking}
 					chatId={chatId}
+					onModelChange={setSelectedModel}
 					plan={hasPlan ? <PlanMarginalia messages={messages} /> : undefined}
 					onOpenPlan={() => setPlanOpen(true)}
 					requiresReveal={requiresReveal}
@@ -1606,6 +1692,7 @@ export function Chat({
 					phase={phases.at(-1) ?? "probe"}
 					turns={turns}
 					contextTokens={contextTokens}
+					cliContextWindow={cliContextWindowOf(nativeMessages)}
 					pricing={pricing}
 					onReserve={setDockReserve}
 					dictationSlot={<DictationBar dictation={dictation} />}
@@ -1660,9 +1747,11 @@ export function Chat({
 						// ride the same callback (QuestionAnswerData.dismissed). The
 						// reading-thinking draft rides along (owner 2026-10-03) — the
 						// check answer is its only carrier.
+						saveQuestionDraft(pending.key, { readingThinking: readingThinkingRef.current });
 						const reading = readingThinkingRef.current.trim() || undefined;
-						clearReadingThinking();
-						submitAnswer(pending.tool, pending.toolCallId, reading ? { ...output, readingThinking: reading } : output);
+						// The pending-id effect clears this only when the question
+						// actually leaves. An offline preflight keeps the draft visible.
+						submitAnswer(pending.tool, pending.toolCallId, reading ? { ...output, readingThinking: reading } : output, pending.key);
 					}}
 				/>
 				</Conversation>
@@ -1698,7 +1787,6 @@ export function Chat({
 			onClose={() => setSetupOpen(false)}
 			onDone={() => {
 				setSetupOpen(false);
-				setConfigured(true);
 				// Save only saves (owner ruling 2026-10-09): the draft went
 				// home into the composer at refusal time and STAYS there —
 				// the learner sends it themselves.
@@ -1749,7 +1837,8 @@ export function Chat({
  *  2026-10-02 abort chain proper (question before turn). */
 export type EscAbortTarget = "mermaid" | "plan" | "setup" | "question" | "problem" | "turn" | null;
 	/**
- * Does the ?prompt topic still owe its first send? The gate is "no real
+ * Does the opening topic still owe its first send? The topic is the
+ * server's ?prompt= or the sessionStorage stash. The gate is "no real
  * conversation yet" (no user/assistant message) — NOT emptiness: a
  * session started with map picks carries a graph-context MARKER as
  * message[0], and that scaffolding must never swallow the first send
@@ -1818,6 +1907,8 @@ export function shouldStampGeometryMute(nextH: number, prevH: number, pending: b
 
 function DockOverlay({
 	pending,
+	initialQuestionDraft,
+	onSaveQuestionDraft,
 	practice,
 	compactionRunning,
 	onSubmitThinking,
@@ -1827,10 +1918,12 @@ function DockOverlay({
 	phase,
 	turns,
 	contextTokens,
+	cliContextWindow,
 	pricing,
 	composer,
 	onSubmitAnswer,
 	chatId,
+	onModelChange,
 	onReserve,
 	plan,
 	onOpenPlan,
@@ -1839,7 +1932,9 @@ function DockOverlay({
 	setupCta,
 	queuedSteers,
 }: {
-	pending: ReturnType<typeof findPendingToolCall>;
+	pending: ReturnType<typeof pendingQuestionOf>;
+	initialQuestionDraft?: QuestionFormDraft;
+	onSaveQuestionDraft: (draft: QuestionFormDraft) => void;
 	/** Compaction running for this chat (round 14) — the docks' submit
 	 *  affordance gate (the server's registry is the real one). */
 	compactionRunning: boolean;
@@ -1860,11 +1955,13 @@ function DockOverlay({
 	/** The session's usage log — the stats bar beneath the composer folds it. */
 	turns: TurnUsage[];
 	contextTokens: number | null;
+	cliContextWindow: ReturnType<typeof cliContextWindowOf>;
 	pricing?: SessionPricing;
 	composer: React.ReactNode;
 	onSubmitAnswer: (output: QuestionAnswerData) => void;
 	/** The model control's pass-through (the stats bar hosts it). */
 	chatId: string;
+	onModelChange: (model: string | undefined) => void;
 	/** Reports the dock's settled height (block + gradient) — ChatView's
 	 *  dockReserve state feeds the transcript's spacer from it. */
 	onReserve: (h: number) => void;
@@ -1903,7 +2000,7 @@ function DockOverlay({
 	const [revealed, setRevealed] = useState(false);
 	const revealPending = requiresReveal && !revealed;
 
-	const pendingId = pending?.toolCallId ?? null;
+	const pendingId = pending?.key ?? null;
 	const initialPendingRef = useRef(pendingId);
 
 	// Teach-question ARRIVAL state, applied during render — BEFORE the
@@ -1960,6 +2057,17 @@ function DockOverlay({
 	const revealedRef = useRef(revealed);
 	revealedRef.current = revealed;
 
+	const blockRef = useRef<HTMLDivElement>(null);
+	const viewportRef = useRef<HTMLDivElement>(null);
+	const bodyRef = useRef<HTMLDivElement>(null);
+	const shellRef = useRef<HTMLDivElement>(null);
+	const contentRef = useRef<HTMLDivElement>(null);
+	const mode = pending
+		? `question:${pending.key}`
+		: practice
+			? `practice:${practice.toolCallId}`
+			: "chat";
+
 	// The plan marginalia's flank width (owner, plan-placement round): from
 	// the DOCK container's right edge to the block's right edge — the bare
 	// diagram's canvas. Tracked LIVE by a ResizeObserver on the block
@@ -1998,28 +2106,33 @@ function DockOverlay({
 		return () => ro.disconnect();
 	}, []);
 
+	// The reserve grows immediately, but never shrinks while a question or
+	// practice problem owns the dock: shrinking flow space could pin a nearby
+	// learner back to the bottom. Composer mode may give space back.
+	const reserveRef = useRef(0);
+	const offer = useCallback((blockH: number) => {
+		const next = blockH + GRADIENT_H;
+		if (next <= reserveRef.current + 0.5 && pendingRef.current) return;
+		// Stamp growth at the source, including child-only field resizes, so
+		// stick-to-bottom's catch-up is not mistaken for the learner leaving.
+		if (shouldStampGeometryMute(next, reserveRef.current, pendingRef.current)) geometryAtRef.current = Date.now();
+		reserveRef.current = next;
+		onReserve(next);
+	}, [onReserve]);
+
 	// The overlay must not paint over the scroller's scrollbar (owner, scroll
 	// round 2): the scroller reserves symmetric gutters (scrollbar-gutter:
 	// stable both-edges), so inset the overlay's right edge by the gutter —
 	// zero on macOS overlay scrollbars, the real width on classic platforms.
-	// The same measure owns the QUESTION/PROBLEM HEIGHT CAP (owner round,
-	// 2026-10-05): the old fixed fractions (55dvh / 40vh) cut long problems
-	// off absurdly short — the cap is now the AVAILABLE COLUMN (the
-	// scroller already starts below the top bar) minus a 2rem breathing
-	// gap, carried as --dock-max-h for the docks' scroll areas.
+	// Budget the whole solid dock, leaving only its question area flexible.
+	// The hook measures natural, visible content before the morph/reserve
+	// effect below. Short windows scroll the reading/question/answer body;
+	// the stats/model toolbar remains outside that overflow viewport.
 	const [sbInset, setSbInset] = useState(0);
-	const [dockMaxH, setDockMaxH] = useState<number | null>(null);
-	useEffect(() => {
-		const el = scrollRef.current;
-		if (!el) return;
-		const measure = () => {
-			setSbInset(Math.round((el.offsetWidth - el.clientWidth) / 2));
-			setDockMaxH(Math.max(el.clientHeight - 32, 160));
-		};
-		measure();
-		window.addEventListener("resize", measure);
-		return () => window.removeEventListener("resize", measure);
-	}, [scrollRef]);
+	useDockHeight({
+		scrollRef, blockRef, viewportRef, bodyRef, shellRef, contentRef,
+		expanded, enabled: !!pending || !!practice, mode, onScrollbarInset: setSbInset, onHeight: offer,
+	});
 
 	// GROWTH MUTE (owner round, 2026-10-05 — the generation churn): during a
 	// live turn the transcript content grows and stick-to-bottom chases it;
@@ -2055,48 +2168,11 @@ function DockOverlay({
 		const root = blockRef.current;
 		const el = scrollRef.current;
 		if (!root || !el) return;
-		const canScroll = (n: HTMLElement, dir: number) => {
-			if (n.scrollHeight - n.clientHeight < 2) return false; // not scrollable
-			return dir < 0 ? n.scrollTop > 0 : n.scrollTop < n.scrollHeight - n.clientHeight - 0.5;
-		};
-		const onWheel = (e: WheelEvent) => {
-			if (e.deltaY === 0) return;
-			for (let n = e.target as HTMLElement | null; n && n !== root; n = n.parentElement) {
-				if (n instanceof HTMLElement && canScroll(n, e.deltaY)) return; // native
-			}
-			e.preventDefault();
-			el.scrollTop += e.deltaY * (e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? el.clientHeight : 1);
-		};
+		const onWheel = (e: WheelEvent) => forwardDockWheel(e, root, el);
 		root.addEventListener("wheel", onWheel, { passive: false });
 		return () => root.removeEventListener("wheel", onWheel);
 	}, [scrollRef]);
 
-	// ── The reserve: the spacer's height, reported upward ──
-	// Grows immediately (typing, new variants). NEVER drops while a question
-	// is open — a shrinking reserved tail is scroll geometry and the browser
-	// clamp would pin a nearby learner to the bottom (the old oscillation).
-	// In chat mode drops apply (the composer's typing shrink is today's
-	// harmless in-flow behavior; nothing auto-expands there).
-	const reserveRef = useRef(0);
-	const blockRef = useRef<HTMLDivElement>(null);
-	const offer = (blockH: number) => {
-		const next = blockH + GRADIENT_H;
-		if (next <= reserveRef.current + 0.5 && pendingRef.current) return; // fold immunity
-		// Reserve GROWTH is the phantom-scroll SOURCE (flicker round,
-		// 2026-09-26): the spacer's height lands in this commit, the smooth
-		// catch-up lags it by the growth amount, and the position machine
-		// used to read that lag as the learner leaving — form → bar → form
-		// (the dictation flush, reproduced d≈152 > COLLAPSE_DIST). Stamp the
-		// mute right where the spacer grows: it covers the scroll events of
-		// THIS growth no matter how long after the field stretched (the
-		// field grows on its own render; the offer lands on the NEXT
-		// DockOverlay render — ~1s apart live). Shrinks never stamp (the
-		// fold's own give-back must not self-mute the re-expand).
-		if (shouldStampGeometryMute(next, reserveRef.current, pendingRef.current)) geometryAtRef.current = Date.now();
-		reserveRef.current = next;
-		onReserve(next);
-	};
-
 	// Explicit expand (bar click): the smooth scroll to the bottom takes
 	// hundreds of ms, during which the position is still legitimately inside
 	// the collapse zone — the machine would instantly re-collapse the dock
@@ -2198,11 +2274,6 @@ function DockOverlay({
 		if (b) offer(b.getBoundingClientRect().height);
 	};
 
-	const mode = pending
-		? `question:${pending.toolCallId}`
-		: practice
-			? `practice:${practice.toolCallId}`
-			: "chat";
 	// The opening variant of a session appears instantly — the fade/rise is
 	// reserved for mid-session transitions.
 	const initialModeRef = useRef(mode);
@@ -2210,11 +2281,9 @@ function DockOverlay({
 	// Height morph: animate the shell from its previous height to its new one
 	// whenever the variant (chat ↔ question ↔ collapsed bar) changes. Typing
 	// growth keeps the same stateKey and is NOT animated.
-	const shellRef = useRef<HTMLDivElement>(null);
 	// The fold's CONTENT fade (owner round, 2026-10-05): the shell height
 	// morphs, but the bar↔form content used to hard-swap. A WAAPI fade/rise
 	// on the toggle — no remount, so the question form's state survives.
-	const contentRef = useRef<HTMLDivElement>(null);
 	const prevExpandedForFadeRef = useRef(expanded);
 	useIsoLayoutEffect(() => {
 		if (prevExpandedForFadeRef.current === expanded) return;
@@ -2262,8 +2331,10 @@ function DockOverlay({
 	return (
 		<div className="pointer-events-none absolute inset-x-0 bottom-0" style={{ right: sbInset }}>
 			<div className="h-24 bg-gradient-to-t from-background via-background/85 to-transparent" />
-			<div ref={blockRef} className="relative bg-background pb-5" style={{ "--dock-max-h": dockMaxH ? `${dockMaxH}px` : undefined } as React.CSSProperties}>
+			<div ref={blockRef} className="relative bg-background pb-5">
 				<div className={DOCK}>
+					<div ref={viewportRef} data-dock-viewport="" className="pointer-events-auto">
+					<div ref={bodyRef}>
 					{setupCta}
 					{/* The queued-steer indicator (owner spec 2026-10-03): quiet
 					    one-liners above the shell - right-aligned to where its corner
@@ -2292,11 +2363,13 @@ function DockOverlay({
 						/>
 					)}
 					<div ref={shellRef} className="pointer-events-auto overflow-hidden rounded-2xl border bg-card shadow-lg">
+						{/* Include descendant margins (notably practice thinking's
+						    bottom margin) in the natural content measurement. */}
 						<div
-						ref={contentRef}
-						key={mode}
-						className={mode === initialModeRef.current ? undefined : "dock-variant"}
-					>
+							ref={contentRef}
+							key={mode}
+							className={mode === initialModeRef.current ? "flow-root" : "flow-root dock-variant"}
+						>
 							{pending ? (
 								<QuestionDock
 									toolName={pending.tool as "quiz" | "probe" | "ask_user_question" | "explain" | "recall"}
@@ -2307,6 +2380,8 @@ function DockOverlay({
 									phase={phase}
 									onExpand={expandAndReveal}
 									onSubmit={onSubmitAnswer}
+									initialDraft={initialQuestionDraft}
+									onSaveDraft={onSaveQuestionDraft}
 									onEscape={dictationCancel}
 									dictationClaim={!revealPending}
 									compactionRunning={compactionRunning}
@@ -2329,15 +2404,19 @@ function DockOverlay({
 							)}
 						</div>
 					</div>
+					</div>
+					</div>
 					{/* The stats row: beneath the composer/question shell, not
 					    flush to the screen bottom — static height, outside the
 					    morphing shell so it never joins a height animation. */}
 					<StatsBar
 						turns={turns}
 						contextTokens={contextTokens}
+						cliContextWindow={cliContextWindow}
 						pricing={pricing}
 						dictationSlot={dictationSlot}
 						chatId={chatId}
+						onModelChange={onModelChange}
 					/>
 					{/* The scroll-down disc (moved here from the Conversation,
 					    owner refinement round 2026-09-24): anchored to the BLOCK's

components/composer.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "@/components/i18n";
 import { ArrowRightIcon, CornerDownLeftIcon, SquareIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Hint } from "@/components/ui/hint";
+import { PathInput } from "@/components/path-input";
 
 /**
  * The chat composer — content row ONLY (the persistent rounded shell lives in
@@ -61,7 +62,7 @@ export function Composer({
 	autoFocus?: boolean;
 	/** The page's handle to the textarea — the dictation-end focus (owner,
 	 *  2026-10-01): a run ending hands the cursor to the bare composer. */
-	inputRef?: React.RefObject<HTMLTextAreaElement | null>;
+	inputRef?: React.RefObject<HTMLDivElement | null>;
 	/** Escape while a dictation runs stops it (STT wave, 2026-09-17). No-op
 	 *  when absent — Esc otherwise means nothing in the composer. */
 	onEscape?: () => void;
@@ -93,10 +94,11 @@ export function Composer({
 				act();
 			}}
 		>
-			<textarea
+			<PathInput
 				ref={inputRef}
 				value={value}
-				onChange={(e) => onChange(e.target.value)}
+				onValueChange={onChange}
+				defaultDropTarget
 				onKeyDown={(e) => {
 					// Esc ends dictation before anything else Esc might someday mean
 					// here (the dictate decisions: click-again or Esc to stop).
@@ -118,7 +120,6 @@ export function Composer({
 				}}
 				placeholder={t(placeholder)}
 				autoFocus={autoFocus}
-				rows={1}
 				className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 			/>
 			{/* The button follows the text (owner report 2026-10-03): while

components/dictation-language.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { LanguageSelect, useI18n } from "@/components/i18n";
+import { SettingsRow } from "@/components/settings/controls";
+import { useDictationActive } from "@/components/dictation-state";
+
+/** Settings and the composer share the fork's general.sttLanguage preference. */
+export function DictationLanguageSetting() {
+	const { t } = useI18n();
+	const active = useDictationActive();
+	return <SettingsRow label={t("Speech recognition language")} testid="row-dictation-language" dimmed={active}>
+		<LanguageSelect field="sttLanguage" disabled={active} />
+	</SettingsRow>;
+}

components/dictation-preference.ts

@@ -0,0 +1,132 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import {
+	FACTORY_SETTINGS, isDictationLanguage, sanitizeUserSettings,
+	type DictationLanguage, type UserSettings,
+} from "@/src/core";
+import { notifySettingsSaved, onSettingsSaved } from "@/components/settings-signal";
+
+const INITIAL = { language: undefined as DictationLanguage | undefined, saving: false, error: null as string | null };
+
+/** One confirmed preference and one write in flight, shared by every surface.
+ * The factory keeps transport tests isolated without a second persistence path.
+ */
+export function createDictationLanguageStore(request: typeof fetch, saved: () => void = () => {}) {
+	let snapshot = INITIAL;
+	let reading: Promise<DictationLanguage> | null = null;
+	let writing: Promise<boolean> | null = null;
+	let revision = 0;
+	let needsRead = true;
+	const listeners = new Set<() => void>();
+	const publish = (patch: Partial<typeof INITIAL>) => {
+		snapshot = { ...snapshot, ...patch };
+		for (const listener of listeners) listener();
+	};
+
+	function load(refresh = false): Promise<DictationLanguage> {
+		if (writing) return getLanguage();
+		if (reading && !refresh) return reading;
+		if (!refresh && !needsRead && snapshot.language !== undefined) return Promise.resolve(snapshot.language);
+		const version = ++revision;
+		needsRead = true;
+		reading = Promise.resolve().then(async () => {
+			try {
+				const res = await request("/api/settings");
+				if (!res.ok) throw new Error();
+				const body = await res.json() as { settings: UserSettings | null };
+				if (!("settings" in body)) throw new Error();
+				const record = sanitizeUserSettings(body.settings);
+				if (body.settings !== null && record === null) throw new Error();
+				if (version !== revision) return getLanguage();
+				const language = record?.dictation?.language ?? FACTORY_SETTINGS.dictation.language;
+				needsRead = false;
+				publish({ language, error: null });
+				return language;
+			} catch {
+				if (version !== revision) return getLanguage();
+				const message = "Could not load dictation language. Try again.";
+				publish({ error: message });
+				throw new Error(message);
+			} finally {
+				if (version === revision) reading = null;
+			}
+		});
+		return reading;
+	}
+
+	function save(language: DictationLanguage): Promise<boolean> {
+		// A different selection must never inherit the previous write's success.
+		if (writing || snapshot.language === undefined) return Promise.resolve(false);
+		revision++;
+		reading = null;
+		writing = Promise.resolve().then(async () => {
+			try {
+				const res = await request("/api/settings/dictation", {
+					method: "PUT", headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ language }),
+				});
+				if (!res.ok) throw new Error();
+				const body = await res.json() as { settings: UserSettings };
+				const confirmed = body.settings?.dictation?.language;
+				if (!isDictationLanguage(confirmed)) throw new Error();
+				needsRead = false;
+				publish({ language: confirmed, error: null });
+				saved();
+				return true;
+			} catch {
+				publish({ error: "Could not save dictation language. Try again." });
+				return false;
+			} finally {
+				writing = null;
+				publish({ saving: false });
+			}
+		});
+		publish({ saving: true, error: null });
+		return writing;
+	}
+
+	async function getLanguage(): Promise<DictationLanguage> {
+		for (;;) {
+			if (writing) await writing;
+			else if (reading) await reading;
+			else if (needsRead || snapshot.language === undefined) await load();
+			else return snapshot.language;
+		}
+	}
+
+	return {
+		load, save, getLanguage,
+		getSnapshot: () => snapshot,
+		getServerSnapshot: () => INITIAL,
+		subscribe(listener: () => void) { listeners.add(listener); return () => { listeners.delete(listener); }; },
+	};
+}
+
+let announcingSave = false;
+const store = createDictationLanguageStore((...args) => fetch(...args), () => {
+	// All our readers already received the confirmed PUT response. Keep the
+	// repo's notification contract without depending on a redundant GET.
+	announcingSave = true;
+	try { notifySettingsSaved("dictation"); } finally { announcingSave = false; }
+});
+let readers = 0;
+let stopSignals: (() => void) | undefined;
+
+function subscribe(listener: () => void) {
+	const off = store.subscribe(listener);
+	if (readers++ === 0) {
+		stopSignals = onSettingsSaved((section) => {
+			if (section === "dictation" && !announcingSave) void store.load(true).catch(() => {});
+		});
+		// A confirmed preference lives for the window, not the page. Navigation
+		// and reopening Settings must not add a new network failure point.
+		void store.getLanguage().catch(() => {});
+	}
+	return () => { off(); if (--readers === 0) { stopSignals?.(); stopSignals = undefined; } };
+}
+
+export function useDictationLanguage() {
+	const snapshot = useSyncExternalStore(subscribe, store.getSnapshot, store.getServerSnapshot);
+	return { ...snapshot, load: store.load, save: store.save, getLanguage: store.getLanguage };
+}

components/dictation-state.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+// The keyboard chain needs a synchronous answer; settings also subscribe
+// so the language control locks from connecting until cleanup completes.
+let active = false;
+const listeners = new Set<() => void>();
+
+export function isDictationActive(): boolean { return active; }
+
+export function setDictationActive(next: boolean): void {
+	if (active === next) return;
+	active = next;
+	for (const listener of listeners) listener();
+}
+
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => { listeners.delete(listener); };
+}
+
+export function useDictationActive(): boolean {
+	return useSyncExternalStore(subscribe, isDictationActive, () => false);
+}

components/dictation.tsx

@@ -6,6 +6,8 @@ import { useSettingsDialog } from "@/components/settings/settings-dialog";
 import { DEFAULT_STT_MODEL, OPENROUTER_STT_MODEL, STT_MAX_AUDIO_BYTES, WAV_HEADER_BYTES, dictationUrl, dictationWav, type SttModel, type SttLanguage } from "@/src/core";
 import { LanguageSelect, useI18n } from "@/components/i18n";
 import { Hint } from "@/components/ui/hint";
+import { setDictationActive } from "@/components/dictation-state";
+export { isDictationActive } from "@/components/dictation-state";
 
 /**
  * Voice dictation — direct Deepgram streaming or whole-recording OpenRouter STT.
@@ -201,15 +203,16 @@ export function rmsToMeter(rms: number): number {
  * window, one pending question, one target at a time.
  */
 let questionTarget: ((text: string) => void) | null = null;
+let composerTarget: ((text: string) => void) | null = null;
 
-/* Is a dictation run live on this page? The Esc chain (keyboard wave A,
- * components/keyboard-shortcuts.tsx) needs a SYNCHRONOUS answer — the
- * stop handler can't report back through a CustomEvent. Set at start(),
- * cleared in cleanup() (every terminal path runs through cleanup). */
-let dictationActiveFlag = false;
-
-export function isDictationActive(): boolean {
-	return dictationActiveFlag;
+/** File references use the very same default destination as dictation,
+ * including claims whose dock is currently collapsed. A focused editor can
+ * insert at its caret instead; callers use this only as the fallback. */
+export function appendToPrimaryInput(text: string): boolean {
+	const target = questionTarget ?? composerTarget;
+	if (!target) return false;
+	target(text);
+	return true;
 }
 
 /* The finisher registry: submit paths FAR from the hook's owner (the
@@ -295,7 +298,13 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 	const upload = useRef<AbortController | null>(null);
 	const drain = useRef<(() => void) | null>(null);
 	const stopping = useRef(false);
-	const [phase, setPhase] = useState<DictationPhase>("idle");
+	const captureDrained = useRef(false);
+	const [phase, setPhaseState] = useState<DictationPhase>("idle");
+	const phaseRef = useRef<DictationPhase>("idle");
+	const setPhase = useCallback((next: DictationPhase) => {
+		phaseRef.current = next;
+		setPhaseState(next);
+	}, []);
 	const [error, setError] = useState<string | null>(null);
 	/** Latest RMS from the worklet — the meter samples this (dictate pattern). */
 	const levelRef = useRef(0);
@@ -303,6 +312,13 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 	 *  retarget (composer↔question) is honored on the very next final. */
 	const appendRef = useRef(append);
 	appendRef.current = append;
+	useEffect(() => {
+		const target = (text: string) => appendRef.current(text);
+		composerTarget = target;
+		return () => {
+			if (composerTarget === target) composerTarget = null;
+		};
+	}, []);
 
 	// Live machinery (non-render values). The MediaStream tracks stop and
 	// the per-run nodes disconnect on teardown; the socket is recreated per
@@ -337,7 +353,7 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 	}, []);
 
 	/** Full teardown of one run's machinery. Idempotent; generation-guarded by callers. */
-	const cleanup = useCallback(() => {
+	const cleanup = useCallback((warmNext = true) => {
 		genRef.current++;
 		upload.current?.abort();
 		upload.current = null;
@@ -346,7 +362,7 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 		audioFrames.current = [];
 		audioBytes.current = 0;
 		stopping.current = false;
-		dictationActiveFlag = false;
+		setDictationActive(false);
 		setDictating(false);
 		flush(); // the deferred transcript appears when the run ends (owner round 2)
 		if (safetyRef.current) {
@@ -375,7 +391,7 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 		for (const w of waitersRef.current.splice(0)) w();
 		// Pre-mint for the next run (mitigation D) — best-effort; a keyless
 		// page just doesn't warm.
-		if (selected.current.model === DEFAULT_STT_MODEL) warmTokens.refresh();
+		if (warmNext && selected.current.model === DEFAULT_STT_MODEL) warmTokens.refresh();
 	}, []);
 
 	/** Open the Deepgram socket and wire its messages. `gen` guards staleness. */
@@ -394,7 +410,11 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 				// faster-than-realtime sends.
 				for (const frame of pendingRef.current) ws.send(frame);
 				pendingRef.current = [];
-				setPhase("recording");
+				if (!stopping.current) setPhase("recording");
+				else if (captureDrained.current) {
+					try { ws.send(JSON.stringify({ type: "CloseStream" })); }
+					catch { cleanup(); }
+				}
 			});
 			ws.addEventListener("message", (ev) => {
 				if (gen !== genRef.current) return;
@@ -444,6 +464,7 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 	);
 
 	const start = useCallback(async () => {
+		if (phaseRef.current !== "idle") return;
 		// Pin the complete configuration once; reconnects must retain both language and hints.
 		recordingUrl.current = selectedUrl.current;
 		recordingConfig.current = { ...selected.current };
@@ -451,8 +472,9 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 		audioFrames.current = [];
 		audioBytes.current = 0;
 		stopping.current = false;
+		captureDrained.current = false;
 		setDictating(true);
-		dictationActiveFlag = true;
+		setDictationActive(true);
 		setError(null);
 		setPhase("connecting");
 		reconnectsRef.current = 0;
@@ -567,7 +589,7 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 
 	const stop = useCallback(() => {
 		const gen = genRef.current;
-		if (phase !== "recording" && phase !== "connecting") return;
+		if (phaseRef.current !== "recording" && phaseRef.current !== "connecting") return;
 		if (stopping.current) return;
 		stopping.current = true;
 		setPhase("stopping");
@@ -615,47 +637,54 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 			})();
 			return;
 		}
-		workletRef.current?.disconnect();
-		workletRef.current = null;
-
-		const ws = wsRef.current;
-		if (ws && ws.readyState === WebSocket.OPEN) {
+		const worklet = workletRef.current;
+		if (!worklet) { cleanup(); return; }
+		// Bound Stop even if a token/handshake never arrives. While connecting,
+		// the socket's open handler sends queued PCM before CloseStream.
+		safetyRef.current = setTimeout(() => {
+			if (gen === genRef.current) cleanup();
+		}, 3000);
+		void (async () => {
 			try {
-				ws.send(JSON.stringify({ type: "CloseStream" }));
-			} catch {
+				await new Promise<void>((resolve, reject) => {
+					const timer = setTimeout(() => { drain.current = null; reject(new Error("Could not finish microphone capture")); }, 2000);
+					drain.current = () => { clearTimeout(timer); resolve(); };
+					worklet.port.postMessage({ type: "flush" });
+				});
+				if (gen !== genRef.current) return;
+				worklet.disconnect();
+				workletRef.current = null;
+				captureDrained.current = true;
+				const ws = wsRef.current;
+				if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "CloseStream" }));
+			} catch (error) {
+				if (gen !== genRef.current) return;
+				setError(error instanceof Error ? error.message : "Could not finish microphone capture");
 				cleanup();
-				return;
 			}
-			// Deepgram flushes remaining finals then closes; if it never
-			// does, the safety net ends the run anyway (dictate pattern).
-			safetyRef.current = setTimeout(() => {
-				if (gen === genRef.current) cleanup();
-			}, 3000);
-		} else {
-			cleanup();
-		}
-	}, [phase, cleanup]);
+		})();
+	}, [cleanup]);
 
 	const cancel = useCallback(() => {
-		if (phase === "idle") return;
+		if (phaseRef.current === "idle") return;
 		// Discard first, teardown second — cleanup() flushes, and the now-empty
 		// buffer makes that flush a no-op. Also kills a "stopping" run: the
 		// flush already underway is abandoned (its timer is cleared inside).
 		bufferRef.current = [];
 		cleanup();
-	}, [phase, cleanup]);
+	}, [cleanup]);
 
 	const finish = useCallback((): Promise<void> => {
 		return new Promise((resolve) => {
-			if (phase === "idle") {
+			if (phaseRef.current === "idle") {
 				resolve();
 				return;
 			}
 			waitersRef.current.push(resolve);
 			// "stopping" is already ending — the waiter just rides to cleanup.
-			if (phase === "recording" || phase === "connecting") stop();
+			if (phaseRef.current === "recording" || phaseRef.current === "connecting") stop();
 		});
-	}, [phase, stop]);
+	}, [stop]);
 
 	// Publish finish() for the sibling subtrees (the pending question's
 	// dock) — registered for as long as this page owns the hook.
@@ -667,10 +696,10 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 	}, [finish]);
 
 	const toggle = useCallback(() => {
-		if (phase === "idle") void start();
-		else if (phase === "recording" || phase === "connecting") stop();
+		if (phaseRef.current === "idle") void start();
+		else if (phaseRef.current === "recording" || phaseRef.current === "connecting") stop();
 		// "stopping" presses are ignored — the flush is in flight.
-	}, [phase, start, stop]);
+	}, [start, stop]);
 
 	// Shortcut seams (keyboard wave A): ⌘D toggles from anywhere on the
 	// page; the Esc chain lands here as a CANCEL (owner, round 3). Each
@@ -680,9 +709,9 @@ export function useDictation({ append }: { append: (text: string) => void }): Di
 		if ((general.sttModel ?? DEFAULT_STT_MODEL) === DEFAULT_STT_MODEL) warmTokens.refresh();
 	}, [general.sttModel]);
 	useEffect(() => () => {
-		// Navigation cancels a pending upload and releases the microphone without inserting text.
+		// Navigation cancels every pending await/upload without inserting into another page.
 		bufferRef.current = [];
-		cleanup();
+		cleanup(false);
 	}, [cleanup]);
 	useEffect(() => {
 		window.addEventListener("lh:kbd-toggle-dictation", toggle);
@@ -772,10 +801,7 @@ export function DictationBar({ dictation }: { dictation: Dictation }) {
 		return (
 			<div className="flex w-full min-w-0 items-center gap-1.5">
 			<Hint
-				// Errored: the button span truncates the line — the tooltip is its
-				// full reveal (the keyless line KEEPS "Deepgram" — owner overrule:
-				// it's the Keys row label, the truth the user needs). Otherwise the
-				// quiet label + the live ⌘D binding.
+				// The error line truncates in the button; its tooltip reveals it.
 				label={error ? t(error) : t("Dictate")}
 				action={error ? undefined : "toggle-dictation"}
 				side="top"
@@ -792,10 +818,8 @@ export function DictationBar({ dictation }: { dictation: Dictation }) {
 					}}
 					aria-label={error ? t("Dictation failed: {v0}", { v0: t(error) }) : t("Start dictation")}
 					data-testid="dictation-toggle"
-				// Same blurring as the floating chrome (owner, fix wave round 3),
-			// but lower opacity — the mic stays quieter than the model pills.
-			className="flex h-7 w-full items-center justify-center gap-1.5 rounded-md border border-border/50 bg-card/50 text-xs text-muted-foreground/70 shadow-lg backdrop-blur transition-colors hover:border-border hover:text-muted-foreground"
-			>
+					className="flex h-7 w-full items-center justify-center gap-1.5 rounded-md border border-border/50 bg-card/50 text-xs text-muted-foreground/70 shadow-lg backdrop-blur transition-colors hover:border-border hover:text-muted-foreground"
+				>
 					<MicIcon className="size-3.5" />
 					<span className="max-w-full truncate">{error ? t(error) : t("Dictate")}</span>
 				</button>
@@ -811,12 +835,7 @@ export function DictationBar({ dictation }: { dictation: Dictation }) {
 
 	return (
 		<div className="flex w-full min-w-0 items-center gap-2" data-testid="dictation-bar">
-			<Hint
-				// The owner flagged this copy good ("Stop dictation (Esc)") —
-				// kept verbatim; only the machinery moved to the styled tooltip.
-				label={t("Stop dictation (Esc)")}
-				side="top"
-			>
+			<Hint label={t("Stop dictation (Esc)")} side="top">
 				<button
 					type="button"
 					onClick={toggle}

components/dock-height.ts

@@ -0,0 +1,157 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, type RefObject } from "react";
+
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export interface DockHeightMeasurements {
+	columnHeight: number;
+	/** Stats/toolbar and block padding, outside the scrolling viewport. */
+	outsideHeight: number;
+	/** Everything in the viewport except the animated shell. */
+	beforeShellHeight: number;
+	shellBorderHeight: number;
+	/** Natural content height, not the shell's animated/clamped height. */
+	contentHeight: number;
+	/** Null when collapsed, in chat mode, or showing malformed input. */
+	questionHeight: number | null;
+	questionPaddingHeight: number;
+}
+
+export function dockHeightBudget(m: DockHeightMeasurements) {
+	const available = Math.max(m.columnHeight - 32, 0);
+	const viewportMaxHeight = Math.max(available - m.outsideHeight, 0);
+	const shellMaxHeight = Math.max(viewportMaxHeight - m.beforeShellHeight, 0);
+	const naturalHeight = m.beforeShellHeight + m.shellBorderHeight + m.contentHeight;
+	const questionMaxHeight = m.questionHeight === null
+		? null
+		: Math.max(viewportMaxHeight - (naturalHeight - m.questionHeight), 0);
+	// A cap smaller than the question's padding leaves no content viewport.
+	// Deliberately uncap the question and scroll the whole content instead;
+	// do not confuse a measured zero with an unmeasured CSS fallback.
+	const scrollWholeContent = questionMaxHeight === null
+		? naturalHeight > viewportMaxHeight
+		: questionMaxHeight <= m.questionPaddingHeight;
+	return { viewportMaxHeight, shellMaxHeight, questionMaxHeight, scrollWholeContent };
+}
+
+interface DockHeightElements {
+	column: HTMLElement;
+	block: HTMLElement;
+	viewport: HTMLElement;
+	body: HTMLElement;
+	shell: HTMLElement;
+	content: HTMLElement;
+}
+
+const pixels = (value: string) => Number.parseFloat(value) || 0;
+
+/** Read natural geometry before writing any constraints. Cancel the shell's
+ * animated height out of both ancestor measurements, then substitute its
+ * natural content and borders. This stays valid during a WAAPI height morph
+ * and when the outer viewport is already capped. */
+export function syncDockHeight(elements: DockHeightElements, expanded: boolean) {
+	const { column, block, viewport, body, shell, content } = elements;
+	// QuestionDock keeps a laid-out form in an invisible h-0 wrapper;
+	// PracticeDock removes its form. Neither hidden form is a height input.
+	const question = expanded ? content.querySelector<HTMLElement>("[data-dock-scroll-area]") : null;
+	const height = (el: HTMLElement) => el.getBoundingClientRect().height;
+	const shellStyle = getComputedStyle(shell);
+	const questionStyle = question ? getComputedStyle(question) : null;
+	const budget = dockHeightBudget({
+		columnHeight: column.clientHeight,
+		outsideHeight: Math.max(height(block) - height(viewport), 0),
+		beforeShellHeight: Math.max(height(body) - height(shell), 0),
+		shellBorderHeight: pixels(shellStyle.borderTopWidth) + pixels(shellStyle.borderBottomWidth),
+		contentHeight: height(content),
+		questionHeight: question ? height(question) : null,
+		questionPaddingHeight: questionStyle
+			? pixels(questionStyle.paddingTop) + pixels(questionStyle.paddingBottom)
+			: 0,
+	});
+	if (budget.questionMaxHeight === null) block.style.removeProperty("--dock-max-h");
+	else block.style.setProperty("--dock-max-h", budget.scrollWholeContent ? "none" : `${budget.questionMaxHeight}px`);
+	viewport.style.maxHeight = `${budget.viewportMaxHeight}px`;
+	// Overflow is visible in normal layouts: keep the shell's shadow intact.
+	// The stats/model toolbar is a sibling, never inside this overflow box.
+	viewport.style.overflowY = budget.scrollWholeContent ? "auto" : "visible";
+	// Clamp animated starting heights too, so a previous tall variant cannot
+	// paint above the column while morphing into a constrained layout.
+	shell.style.maxHeight = budget.scrollWholeContent ? "none" : `${budget.shellMaxHeight}px`;
+	return budget;
+}
+
+interface DockHeightRefs {
+	scrollRef: RefObject<HTMLElement | null>;
+	blockRef: RefObject<HTMLDivElement | null>;
+	viewportRef: RefObject<HTMLDivElement | null>;
+	bodyRef: RefObject<HTMLDivElement | null>;
+	shellRef: RefObject<HTMLDivElement | null>;
+	contentRef: RefObject<HTMLDivElement | null>;
+}
+
+export function useDockHeight({
+	scrollRef, blockRef, viewportRef, bodyRef, shellRef, contentRef,
+	expanded, enabled, mode, onScrollbarInset, onHeight,
+}: DockHeightRefs & {
+	expanded: boolean;
+	enabled: boolean;
+	/** Reconnect observers when the keyed content node/scroll area changes. */
+	mode: string;
+	onScrollbarInset: (inset: number) => void;
+	/** Settled visible block height, fed through the existing reserve policy. */
+	onHeight: (height: number) => void;
+}) {
+	const measure = useCallback(() => {
+		const column = scrollRef.current;
+		const block = blockRef.current;
+		const viewport = viewportRef.current;
+		const body = bodyRef.current;
+		const shell = shellRef.current;
+		const content = contentRef.current;
+		if (!column || !block || !viewport || !body || !shell || !content) return;
+		onScrollbarInset(Math.round((column.offsetWidth - column.clientWidth) / 2));
+		if (enabled) syncDockHeight({ column, block, viewport, body, shell, content }, expanded);
+		else {
+			block.style.removeProperty("--dock-max-h");
+			viewport.style.removeProperty("max-height");
+			viewport.style.removeProperty("overflow-y");
+			shell.style.removeProperty("max-height");
+		}
+		// ResizeObserver runs even when only a child field changed and React
+		// did not rerender DockOverlay. Keep its transcript reserve current,
+		// but never report a mid-morph height.
+		if (shell.getAnimations().length === 0) onHeight(block.getBoundingClientRect().height);
+	}, [scrollRef, blockRef, viewportRef, bodyRef, shellRef, contentRef, expanded, enabled, onScrollbarInset, onHeight]);
+
+	// Imperative constraints land before the overlay's later layout effect
+	// measures its morph target/reserve, and before paint (including reveal).
+	useIsoLayoutEffect(measure);
+	useIsoLayoutEffect(() => {
+		const observer = new ResizeObserver(measure);
+		for (const el of [scrollRef.current, blockRef.current, viewportRef.current, bodyRef.current, contentRef.current]) {
+			if (el) observer.observe(el);
+		}
+		const question = expanded ? contentRef.current?.querySelector("[data-dock-scroll-area]") : null;
+		if (question) observer.observe(question);
+		window.addEventListener("resize", measure);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", measure);
+		};
+	}, [measure, mode, expanded, scrollRef, blockRef, viewportRef, bodyRef, contentRef]);
+}
+
+/** Overlay and transcript are siblings. Keep native scrolling in an actual
+ * scroll container (including the short-window viewport), then forward only
+ * at its edge. overflow:hidden/visible boxes cannot consume the wheel. */
+export function forwardDockWheel(event: WheelEvent, root: HTMLElement, transcript: HTMLElement) {
+	if (event.deltaY === 0) return;
+	for (let n = event.target as HTMLElement | null; n && n !== root; n = n.parentElement) {
+		if (!(n instanceof HTMLElement) || !/^(auto|scroll)$/.test(getComputedStyle(n).overflowY)) continue;
+		if (n.scrollHeight - n.clientHeight < 2) continue;
+		if (event.deltaY < 0 ? n.scrollTop > 0 : n.scrollTop < n.scrollHeight - n.clientHeight - 0.5) return;
+	}
+	event.preventDefault();
+	transcript.scrollTop += event.deltaY * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? transcript.clientHeight : 1);
+}

components/file-path-chip.tsx

@@ -0,0 +1,62 @@
+import React, { Fragment } from "react";
+import {
+	File,
+	FileArchive,
+	FileAudio,
+	FileCode,
+	FileImage,
+	FileSpreadsheet,
+	FileText,
+	FileVideo,
+} from "lucide-react";
+import { filePathLabel, parseFilePaths } from "@/src/core";
+
+function fileIcon(label: string) {
+	const extension = label.split(".").at(-1)?.toLowerCase();
+	if (/^(png|jpe?g|gif|webp|svg|bmp|tiff?|avif|heic)$/.test(extension ?? "")) return FileImage;
+	if (/^(mp3|wav|ogg|flac|m4a|aac)$/.test(extension ?? "")) return FileAudio;
+	if (/^(mp4|mov|webm|mkv|avi)$/.test(extension ?? "")) return FileVideo;
+	if (/^(zip|gz|tar|bz2|xz|7z|rar)$/.test(extension ?? "")) return FileArchive;
+	if (/^(csv|tsv|xlsx?|ods)$/.test(extension ?? "")) return FileSpreadsheet;
+	if (/^(js|jsx|ts|tsx|py|rb|rs|go|c|cpp|h|java|json|html|css|sh|yaml|yml)$/.test(extension ?? "")) return FileCode;
+	if (/^(pdf|txt|md|mdx|rtf|docx?|odt|tex|epub)$/.test(extension ?? "")) return FileText;
+	return File;
+}
+
+export interface FilePathChipProps {
+	path: string;
+	/** Editors can make the chip atomic; transcript renderers can omit this. */
+	contentEditable?: false;
+	className?: string;
+}
+
+/** Pure presentation: no links, open actions, HTML injection or path probing. */
+export function FilePathChip({ path, contentEditable, className }: FilePathChipProps) {
+	const label = filePathLabel(path);
+	const Icon = fileIcon(label);
+	return (
+		<span
+			role="img"
+			aria-label={path}
+			title={path}
+			contentEditable={contentEditable}
+			className={`inline-flex max-w-full items-center gap-1 rounded border bg-muted/50 px-1.5 py-0.5 align-middle text-sm${className ? ` ${className}` : ""}`}
+		>
+			<Icon aria-hidden="true" className="size-3.5 shrink-0" />
+			<span className="min-w-0 truncate">{label}</span>
+		</span>
+	);
+}
+
+/** Ordinary learner text stays ordinary text; only quoted paths become chips. */
+export function PathText({ text }: { text: string }) {
+	return (
+		<>
+			{parseFilePaths(text).map((part) => (
+				<Fragment key={part.start}>
+					{part.kind === "path" ? <FilePathChip path={part.path} /> : part.text}
+				</Fragment>
+			))}
+		</>
+	);
+}

components/file-path-drop-zone.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { FileSymlinkIcon, XIcon } from "lucide-react";
+import { quoteFilePath } from "@/src/core";
+import { appendToPrimaryInput } from "@/components/dictation";
+import { INSERT_FILE_PATHS_EVENT } from "@/components/path-input";
+
+const BROWSER_NOTICE = "Local file paths can only be attached in the desktop app. You can paste a full path instead.";
+
+/** The content area only: the sidebar is deliberately outside this zone.
+ * Existing files stay where they are; only quoted path strings enter drafts. */
+export function FilePathDropZone({ children, className }: { children: React.ReactNode; className?: string }) {
+	const root = useRef<HTMLElement>(null);
+	const depth = useRef(0);
+	const [dragging, setDragging] = useState(false);
+	const [notice, setNotice] = useState("");
+	const hasFiles = (event: React.DragEvent) => Array.from(event.dataTransfer.types).includes("Files");
+	const clearDrag = () => { depth.current = 0; setDragging(false); };
+	useEffect(() => {
+		// The sidebar remains a non-target, but dropping a file there must not
+		// navigate the app away. No indicator or attachment is produced there.
+		const preventOutsideNavigation = (event: DragEvent) => {
+			if (Array.from(event.dataTransfer?.types ?? []).includes("Files")
+				&& event.target instanceof Node && !root.current?.contains(event.target)) event.preventDefault();
+		};
+		window.addEventListener("dragover", preventOutsideNavigation);
+		window.addEventListener("drop", preventOutsideNavigation);
+		return () => {
+			window.removeEventListener("dragover", preventOutsideNavigation);
+			window.removeEventListener("drop", preventOutsideNavigation);
+		};
+	}, []);
+	return (
+		<main
+			ref={root}
+			className={className}
+			data-testid="file-path-drop-zone"
+			onDragEnter={(event) => {
+				if (!hasFiles(event)) return;
+				event.preventDefault();
+				depth.current++;
+				setDragging(true);
+				setNotice("");
+			}}
+			onDragOver={(event) => {
+				if (!hasFiles(event)) return;
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "copy";
+			}}
+			onDragLeave={(event) => {
+				if (!hasFiles(event)) return;
+				depth.current = Math.max(0, depth.current - 1);
+				if (depth.current === 0) setDragging(false);
+			}}
+			onDragEnd={clearDrag}
+			onDrop={(event) => {
+				if (!hasFiles(event)) return;
+				event.preventDefault();
+				event.stopPropagation();
+				clearDrag();
+				const resolve = window.lh?.getPathForFile;
+				if (!resolve) { setNotice(BROWSER_NOTICE); return; }
+				// Directories are not file references. This check uses drag metadata,
+				// never a server request or a new filesystem capability.
+				const entries = Array.from(event.dataTransfer.items).filter((item) => item.kind === "file");
+				const paths: string[] = [];
+				let skipped = 0;
+				for (const [index, file] of Array.from(event.dataTransfer.files).entries()) {
+					try {
+						if (entries[index]?.webkitGetAsEntry?.()?.isDirectory) { skipped++; continue; }
+						const path = resolve(file);
+						quoteFilePath(path); // Same rooted-path validity rule as typed chips.
+						paths.push(path);
+					} catch { skipped++; }
+				}
+				if (paths.length === 0) {
+					setNotice("No local file paths were available. Drop existing files from your computer.");
+					return;
+				}
+				const focused = document.activeElement?.closest<HTMLElement>("[data-file-path-input]");
+				if (focused && event.currentTarget.contains(focused)) {
+					focused.dispatchEvent(new CustomEvent(INSERT_FILE_PATHS_EVENT, { detail: paths }));
+				} else if (!appendToPrimaryInput(paths.map(quoteFilePath).join(" "))) {
+					setNotice("Open a chat to attach file paths.");
+					return;
+				}
+				setNotice(skipped ? "Some dropped items had no available file path." : "");
+			}}
+		>
+			{children}
+			{dragging && (
+				<div data-testid="file-path-drop-indicator" className="pointer-events-none absolute inset-2 z-50 flex items-center justify-center rounded-xl border-2 border-dashed border-primary bg-background/85 p-6 text-center backdrop-blur-sm">
+					<div className="flex max-w-md flex-col items-center gap-3">
+						<FileSymlinkIcon className="size-8 text-primary" aria-hidden />
+						<span className="font-ui text-sm">{window.lh?.getPathForFile ? "Drop to attach file paths" : BROWSER_NOTICE}</span>
+					</div>
+				</div>
+			)}
+			{notice && <div role="status" className="absolute bottom-2 left-1/2 z-50 flex max-w-[90%] -translate-x-1/2 items-center gap-2 rounded-md border bg-card px-3 py-2 font-ui text-xs shadow-sm">
+				<span>{notice}</span>
+				<button type="button" aria-label="Dismiss attachment notice" onClick={() => setNotice("")} className="shrink-0 rounded-sm p-1 hover:bg-accent"><XIcon className="size-3" aria-hidden /></button>
+			</div>}
+		</main>
+	);
+}

components/home.tsx

@@ -9,11 +9,14 @@ import { GraphView } from "@/components/graph-view";
 import { MinimalHome } from "@/components/minimal-home";
 import { SetupDialog } from "@/components/setup-dialog";
 import { ComposerActions, NodePickerControl } from "@/components/composer-actions";
-import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
+import { useModelSetup, selectedModelUnavailable, openModelPicker, ZeroKeysPill } from "@/components/setup-cta";
 import { DictationBar, joinDictation, useDictation } from "@/components/dictation";
 import { useFieldCycle } from "@/components/field-cycle";
 import { SidebarToggle } from "@/components/sidebar";
 import { StatsBar } from "@/components/stats-bar";
+import { OPENING_PROMPT_FAILURE } from "@/components/opening-prompt";
+import { PathInput } from "@/components/path-input";
+import { SessionStarter } from "@/components/start-session";
 import type { TurnUsage } from "@/src/core";
 
 /**
@@ -44,15 +47,8 @@ export function Home({
 	// start until the user has picked all three slots — no defaults for
 	// 33 providers. The dock shows the CTA while unconfigured; submitting
 	// a topic opens the setup dialog WITH THE DRAFT PRESERVED (Save
-	// stores the slots and the queued message sends).
-	const [configured, setConfigured] = useState(initialConfigured);
-	// The zero-keys truth (zero-keys wave): no provider key = the pill
-	// takes precedence over the models CTA (keys come first in the chain).
-	const zeroKeys = useZeroKeys();
-	// The strong slot's keyless truth (pre-send key guards, owner interlude
-	// 2026-09-25): keys may exist generally while the STRONG slot's pinned
-	// provider has none — the same skip-everything treatment on send.
-	const strongKeyless = useStrongKeyless();
+	// stores slots only; the learner sends the message themselves).
+	const { catalog, configured, zeroKeys } = useModelSetup(initialConfigured);
 	const [setupOpen, setSetupOpen] = useState(false);
 	// Voice dictation (STT wave, 2026-09-17): finals append at the end of the
 	// topic draft; the strip lives in the stats bar's middle slot.
@@ -66,10 +62,13 @@ export function Home({
 		},
 	});
 	const [busy, setBusy] = useState(false);
+	const startingRef = useRef(false);
+	const starterRef = useRef(new SessionStarter());
+	const [startError, setStartError] = useState(false);
 	/* Run end focuses the topic input (owner, 2026-10-01): the hands are on
 	 * the keyboard from the stop. Falling edge only; this surface's only
 	 * dictation target IS this textarea, so no case-split is needed. */
-	const topicInputRef = useRef<HTMLTextAreaElement>(null);
+	const topicInputRef = useRef<HTMLDivElement>(null);
 	// Tab navigates INTO the topic composer (owner, keyboard round
 	// 2026-10-06): the only text field on this surface — and home's
 	// composer is its OWN textarea, not the shared Composer component,
@@ -115,7 +114,7 @@ export function Home({
 	};
 	const begin = async () => {
 		const t = topicRef.current.trim();
-		if (!t || busy) return;
+		if (!t || startingRef.current) return;
 		// Unconfigured: the send INTERCEPTS into the setup flow (the draft
 		// stays in the textarea; the learner sends it after Save).
 		if (!configured) {
@@ -126,36 +125,37 @@ export function Home({
 		// models case guards BEFORE creation; the key cases must too — a
 		// refused first send would otherwise leave an orphan error-shell
 		// chat in the sidebar (the 503 lands only after POST /api/chats
-		// already created the record). Same skip-everything-and-open-setup
-		// treatment; the server's 503 gate remains the belt for /chat/[id]
-		// sessions.
-		if (zeroKeys || strongKeyless) {
+		// already created the record). Zero providers opens connection setup;
+		// an unavailable selection with another provider opens its ordinary
+		// picker. The server's admission gate remains the belt.
+		if (zeroKeys) {
 			setSetupOpen(true);
 			return;
 		}
+		const strong = catalog?.slots.strong?.model;
+		if (selectedModelUnavailable(catalog, strong ? `${strong.provider}:${strong.id}` : undefined)) {
+			openModelPicker();
+			return; // Preserve the draft and never create an orphan session.
+		}
+		startingRef.current = true;
 		setBusy(true);
+		setStartError(false);
 		try {
 			// The map context (owner, 2026-10-04): picks in EITHER mode ride
 			// the CREATION as graphContext — the server writes a
 			// graph-context marker as message[0] (a separate custom message
 			// before the learner's first user message, propositions + the
 			// chains among them); the prompt stays the learner's own words.
-			const res = await fetch("/api/chats", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
-					title: t,
-					...(mode === "practice" ? { kind: "practice" } : {}),
-					...(practiceProps.length > 0 ? { graphContext: { propositions: practiceProps } } : {}),
-				}),
-			});
-			const { id } = (await res.json()) as { id: string };
-			// No settings PUT on create (per-session models, owner
-			// 2026-09-28): the SERVER stamps the newborn from the strong
-			// slot — the same default this surface's model control edits.
-			router.push(`/chat/${id}?prompt=${encodeURIComponent(t)}`);
+			const target = await starterRef.current.start({
+				title: t,
+				...(mode === "practice" ? { kind: "practice" } : {}),
+				...(practiceProps.length > 0 ? { graphContext: { propositions: practiceProps } } : {}),
+			}, fetch, JSON.stringify(catalog?.slots.strong));
+			router.push(target);
 		} catch {
+			startingRef.current = false;
 			setBusy(false);
+			setStartError(true);
 		}
 	};
 
@@ -243,6 +243,7 @@ export function Home({
 							)
 						)}
 					/>
+					{startError && <p role="alert" className="mb-2 text-sm text-destructive">{OPENING_PROMPT_FAILURE}</p>}
 					<form
 						className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
 					onSubmit={(e) => {
@@ -250,13 +251,14 @@ export function Home({
 						void start();
 					}}
 				>
-					<textarea
+					<PathInput
 						ref={topicInputRef}
 						value={topic}
-						onChange={(e) => {
-							topicRef.current = e.target.value;
-							setTopic(e.target.value);
+						onValueChange={(value) => {
+							topicRef.current = value;
+							setTopic(value);
 						}}
+						defaultDropTarget
 						onKeyDown={(e) => {
 							// Esc ends dictation (the dictate decisions: click-again or
 							// Esc) — stopPropagation claims it (keyboard wave A) so
@@ -274,7 +276,6 @@ export function Home({
 						}}
 						placeholder={mode === "practice" ? t("What do you want to practice?") : t("What do you want to learn?")}
 						autoFocus
-						rows={1}
 						className="field-sizing-content lh-input max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 					/>
 					{/* No tooltip on the start square — the ↵ glyph is the
@@ -328,7 +329,6 @@ export function Home({
 				open={setupOpen}
 				onClose={() => setSetupOpen(false)}
 				onDone={() => {
-					setConfigured(true);
 					setSetupOpen(false);
 					// Save only saves: the draft waits in the composer.
 				}}

components/model-catalog.ts

@@ -0,0 +1,54 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { ModelCatalogResponse } from "@/src/core";
+import { onSettingsSaved } from "@/components/settings-signal";
+
+// Shared stale-while-revalidate catalog. Metadata refreshes retain the last
+// good snapshot; connection changes clear selectable models immediately.
+let catalogCache: ModelCatalogResponse | undefined;
+let catalogError = false;
+let catalogInflight: Promise<void> | undefined;
+let catalogGeneration = 0;
+let stopCatalogSignals: (() => void) | undefined;
+const catalogReaders = new Set<() => void>();
+const publishCatalog = () => { for (const reader of catalogReaders) reader(); };
+
+function fetchCatalog(revalidate = false): void {
+	if (revalidate) { catalogGeneration++; catalogInflight = undefined; }
+	if (catalogInflight) return;
+	const generation = catalogGeneration;
+	catalogError = false;
+	publishCatalog();
+	catalogInflight = fetch("/api/models")
+		.then((r) => { if (!r.ok) throw new Error(`catalog request failed: ${r.status}`); return r.json() as Promise<ModelCatalogResponse>; })
+		.then((c) => {
+			if (generation === catalogGeneration) { catalogCache = c; catalogError = false; publishCatalog(); }
+		})
+		.catch(() => {
+			if (generation === catalogGeneration) { catalogError = true; publishCatalog(); }
+		})
+		.finally(() => { if (generation === catalogGeneration) catalogInflight = undefined; });
+}
+
+export function useModelCatalog(): { catalog: ModelCatalogResponse | undefined; failed: boolean; refresh: () => void } {
+	const [snapshot, setSnapshot] = useState(() => ({ catalog: catalogCache, failed: catalogError }));
+	useEffect(() => {
+		const first = catalogReaders.size === 0;
+		const read = () => setSnapshot({ catalog: catalogCache, failed: catalogError });
+		catalogReaders.add(read);
+		if (first) {
+			stopCatalogSignals = onSettingsSaved((section) => {
+				if (section === "keys" || section === "claudeCode") {
+					catalogGeneration++; catalogInflight = undefined; catalogCache = undefined;
+					fetchCatalog();
+				} else if (section === "models") fetchCatalog(true);
+			});
+			fetchCatalog(true);
+		} else fetchCatalog();
+		read();
+		return () => { catalogReaders.delete(read); if (!catalogReaders.size) { stopCatalogSignals?.(); stopCatalogSignals = undefined; } };
+	}, []);
+	const refresh = useCallback(() => fetchCatalog(true), []);
+	return { ...snapshot, refresh };
+}

components/model-picker.tsx

@@ -10,61 +10,17 @@ import { ModelMenuList, ThinkingMenuList } from "@/components/settings/model-men
 import { composeSlotModel } from "@/components/settings/agent-section";
 import { MenuShell } from "@/components/menu-shell";
 import { Hint } from "@/components/ui/hint";
-import { notifySettingsSaved, onSettingsSaved, useSettingsSaved } from "@/components/settings-signal";
+import { notifySettingsSaved, useSettingsSaved } from "@/components/settings-signal";
+import { useModelCatalog } from "@/components/model-catalog";
+export { useModelCatalog } from "@/components/model-catalog";
 import { defaultOrderLevel, populateLevel, THINKING_LABEL } from "@/components/thinking-default";
 
-/** GET /api/models is cached per page load for instant menu opens, but
- *  the federation is LIVE per call — keys saved mid-session widen the
- *  catalog immediately server-side. ModelControl therefore re-fetches on
- *  every model-menu open (stale-while-revalidate: the cached list shows
- *  instantly, the fresh one swaps in while the menu is open). */
-let catalogCache: ModelCatalogResponse | undefined;
-let catalogInflight: Promise<void> | undefined;
-let catalogGeneration = 0;
-let stopCatalogSignals: (() => void) | undefined;
-const catalogReaders = new Set<() => void>();
-const publishCatalog = () => { for (const reader of catalogReaders) reader(); };
-function fetchCatalog(revalidate = false): void {
-	if (revalidate) { catalogGeneration++; catalogInflight = undefined; }
-	if (catalogInflight) return;
-	const generation = catalogGeneration;
-	catalogInflight = fetch("/api/models")
-		.then((r) => { if (!r.ok) throw new Error(`catalog request failed: ${r.status}`); return r.json() as Promise<ModelCatalogResponse>; })
-		.then((c) => { if (generation === catalogGeneration) { catalogCache = c; publishCatalog(); } })
-		.catch(() => { /* existing unavailable/usage-only posture, no retry timer */ })
-		.finally(() => { if (generation === catalogGeneration) catalogInflight = undefined; });
-}
-export function useModelCatalog(): { catalog: ModelCatalogResponse | undefined; refresh: () => void } {
-	const [catalog, setCatalog] = useState(catalogCache);
-	useEffect(() => {
-		const first = catalogReaders.size === 0;
-		const read = () => setCatalog(catalogCache);
-		catalogReaders.add(read);
-		if (first) {
-			stopCatalogSignals = onSettingsSaved((section) => {
-				if (section === "keys") {
-					catalogGeneration++; catalogInflight = undefined; catalogCache = undefined;
-					publishCatalog(); fetchCatalog();
-				} else if (section === "models") fetchCatalog(true);
-			});
-			fetchCatalog(true);
-		} else fetchCatalog();
-		read();
-		return () => { catalogReaders.delete(read); if (!catalogReaders.size) { stopCatalogSignals?.(); stopCatalogSignals = undefined; } };
-	}, []);
-	const refresh = useCallback(() => fetchCatalog(true), []);
-	return { catalog, refresh };
-}
-
-/** provider:id → contextWindow over the cached catalog — the client-side
- *  twin of the server's catalogContextLimits join (context-meter
- *  amendment, owner 2026-09-23: pi's live catalog is the ONLY limit
- *  source — no hardcoded fallback exists anywhere, so a model missing
- *  from the index reads limit-null and the meter renders usage-only,
- *  the honest-render precedent). Consumed by the stats bar: the same
- *  cached /api/models fetch the picker rides feeds the denominator. */
+/** provider:id → known contextWindow over the cached catalog, mirroring
+ * the server's catalogContextLimits join. CLI aliases have no global
+ * denominator: the stats bar uses that session's actual CLI report instead.
+ * Missing limits always render usage-only, without a hardcoded fallback. */
 export function catalogLimits(catalog: Pick<ModelCatalogResponse, "models">): Map<string, number> {
-	return new Map(catalog.models.map((m) => [`${m.provider}:${m.id}`, m.contextWindow]));
+	return new Map(catalog.models.flatMap((m) => m.contextWindow === null ? [] : [[`${m.provider}:${m.id}`, m.contextWindow] as const]));
 }
 
 /**
@@ -87,7 +43,9 @@ export function ModelControl({ chatId, onModelChange }: { chatId?: string; onMod
 	const { t } = useI18n();
 	const { catalog, refresh } = useModelCatalog();
 	const [models, setModels] = useState<ModelsSettings | undefined>();
-	const [session, setSession] = useState<ChatSettings | undefined>();
+	// A successful read with no settings is a legacy session; undefined
+	// means no session record is known yet, not permission to inherit Strong.
+	const [session, setSession] = useState<{ settings?: ChatSettings }>();
 	const [open, setOpen] = useState<"model" | "thinking" | null>(null);
 	const [error, setError] = useState<string | null>(null);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -102,8 +60,8 @@ export function ModelControl({ chatId, onModelChange }: { chatId?: string; onMod
 	const readRecord = useCallback(() => {
 		if (chatId) {
 			fetch(`/api/chats/${chatId}`)
-				.then((r) => r.json() as Promise<{ settings?: ChatSettings }>)
-				.then((body) => setSession(body.settings))
+				.then((r) => { if (!r.ok) throw new Error(`session read failed: ${r.status}`); return r.json() as Promise<{ settings?: ChatSettings }>; })
+				.then((body) => setSession({ settings: body.settings }))
 				.catch(() => {
 					/* same read-only posture as a models-section failure */
 				});
@@ -127,15 +85,17 @@ export function ModelControl({ chatId, onModelChange }: { chatId?: string; onMod
 	});
 
 	// Dual-bound truth: chat mode displays the session's own record,
-	// falling back to the strong slot for legacy unstamped sessions —
-	// EXACTLY what resolveConversationSpec runs. Draft mode is the strong
-	// slot itself.
+	// falling back to Strong only for a successfully read legacy unstamped
+	// session — EXACTLY what resolveConversationSpec runs. An unresolved or
+	// failed record read must not report a provisional global preference as
+	// this session's identity (including to the Send guard). Draft mode is
+	// the strong slot itself.
 	const strong = models?.strong;
 	const override: ChatSettings | undefined = chatId
-		? {
-				model: session?.model ?? strong?.model,
-				thinkingLevel: session?.thinkingLevel ?? strong?.thinkingLevel,
-			}
+		? session ? {
+				model: session.settings?.model ?? strong?.model,
+				thinkingLevel: session.settings?.thinkingLevel ?? strong?.thinkingLevel,
+			} : undefined
 		: strong;
 	const effectiveId = override?.model?.id;
 	const effectiveProvider = override?.model?.provider;
@@ -239,7 +199,7 @@ export function ModelControl({ chatId, onModelChange }: { chatId?: string; onMod
 					return;
 				}
 				const stored = (await res.json().catch(() => null)) as { settings?: ChatSettings } | null;
-				setSession(stored?.settings ?? next);
+				setSession({ settings: stored?.settings ?? next });
 				setOpen(null);
 			} catch {
 				setError("Could not reach the server — try again.");
@@ -318,10 +278,7 @@ export function ModelControl({ chatId, onModelChange }: { chatId?: string; onMod
 	return (
 		<div ref={containerRef} className="relative flex items-center gap-1.5" data-testid="model-control">
 			<Hint
-				// Trimmed (owner, subtlety round 2026-09-25): "Model selector"
-				// — the long sentence was way too much. ⌘K opens this same
-				// menu (registry, override-aware).
-				label={t("Model selector")}
+				label={effectiveId ? `${effectiveProvider ? `${effectiveProvider}:` : ""}${effectiveId}` : t("Model selector")}
 				action="open-model-picker"
 				side="bottom"
 			>

components/new-session.tsx

@@ -10,10 +10,12 @@ import { DictationBar, joinDictation, useDictation } from "@/components/dictatio
 import { useFieldCycle } from "@/components/field-cycle";
 import { SidebarToggle } from "@/components/sidebar";
 import { SetupDialog } from "@/components/setup-dialog";
-import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
+import { useModelSetup, selectedModelUnavailable, openModelPicker, ZeroKeysPill } from "@/components/setup-cta";
 import { StatsBar } from "@/components/stats-bar";
 import { ChainTableOverlay } from "@/components/chain-table.tsx";
 import { ComposerActions, NodePickerControl } from "@/components/composer-actions";
+import { OPENING_PROMPT_FAILURE } from "@/components/opening-prompt";
+import { SessionStarter } from "@/components/start-session";
 import type { ChatSettings, GraphSnapshot } from "@/src/core";
 
 /** The draft's pick set (owner round 10): the SAME shape the home pick
@@ -35,18 +37,18 @@ export type DraftPick = { id: string; name: string; statement: string };
 const DOCK = "mx-auto w-full max-w-[46rem] px-4";
 
 /**
- * The draft's whole behavior as one pure seam: create the session (title =
- * the first message), persist the lifted pre-chat settings, return the push
- * target — /chat/<id>?prompt=<msg> — whose initialPrompt path delivers the
- * message as turn 1. Injected fetch/router so tests pin the contract.
- * Returns null on empty text; rethrows on transport failure (the caller's
- * busy flag resets).
+ * Create, safely hand over the full opening text, then return a short
+ * /chat/<id> target. Storage/creation failures leave the caller's draft
+ * intact. A per-composer starter reuses an already-created session on an
+ * unchanged retry. The server stamps settings at birth; no settings PUT.
  */
 export async function startDraftSession(
 	text: string,
 	fetchLike: typeof fetch,
 	mode?: "practice",
 	picks?: readonly DraftPick[],
+	starter = new SessionStarter(),
+	settingsIdentity?: string,
 ): Promise<string | null> {
 	const t = text.trim();
 	if (!t) return null;
@@ -54,19 +56,13 @@ export async function startDraftSession(
 	// from the pick bar creates its session WITH the graph context — the
 	// same contract as the home screen's practice send (the marker with
 	// [id] name: statement lines, target validation's truth set).
-	const res = await fetchLike("/api/chats", {
-		method: "POST",
-		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify(
-			mode === "practice"
-				? { title: t, kind: "practice", ...(picks && picks.length > 0 ? { graphContext: { propositions: picks } } : {}) }
-				: { title: t },
-		),
-	});
-	const { id } = (await res.json()) as { id: string };
-	// No settings PUT on create (per-session models, owner 2026-09-28):
-	// the SERVER stamps the newborn from the strong slot.
-	return `/chat/${id}?prompt=${encodeURIComponent(t)}`;
+	return starter.start(
+		mode === "practice"
+			? { title: t, kind: "practice", ...(picks && picks.length > 0 ? { graphContext: { propositions: picks } } : {}) }
+			: { title: t },
+		fetchLike,
+		settingsIdentity,
+	);
 }
 
 /** The pure shell (no router) — the render-test seam: the draft view's
@@ -79,6 +75,7 @@ export function DraftShell({
 	text,
 	onChange,
 	onSend,
+	startError = false,
 	setupCta,
 	mode = "teach",
 	picks = [],
@@ -90,6 +87,7 @@ export function DraftShell({
 	text: string;
 	onChange: (v: string) => void;
 	onSend: () => void;
+	startError?: boolean;
 	/** The practice draft (owner, 2026-10-04): ?mode=practice — the
 	 *  created session carries kind:"practice" and the copy changes
 	 *  (the practice agent opens; no probing). */
@@ -119,7 +117,7 @@ export function DraftShell({
 	// Tab navigates INTO the composer (owner, keyboard round 2026-10-06):
 	// the only text field on this surface — the cycle's whole chain.
 	const cycleComposer = useCallback((): readonly HTMLElement[] =>
-		Array.from(document.querySelectorAll<HTMLElement>('[data-testid="composer"] textarea')),
+		Array.from(document.querySelectorAll<HTMLElement>('[data-testid="composer"] [data-file-path-input]')),
 		[]);
 	useFieldCycle(cycleComposer);
 	const dictation = useDictation({
@@ -143,7 +141,7 @@ export function DraftShell({
 	};
 	/* Run end focuses the composer (owner, 2026-10-01): the hands are on
 	 * the keyboard from the stop — falling edge of `active` only. */
-	const composerInputRef = useRef<HTMLTextAreaElement>(null);
+	const composerInputRef = useRef<HTMLDivElement>(null);
 	const dictationWasActiveRef = useRef(false);
 	useEffect(() => {
 		if (dictation.active) {
@@ -193,6 +191,7 @@ export function DraftShell({
 									)}
 									setup={setupCta}
 								/>
+								{startError && <p role="alert" className="pointer-events-auto mb-2 text-sm text-destructive">{OPENING_PROMPT_FAILURE}</p>}
 								<div className="pointer-events-auto overflow-hidden rounded-2xl border bg-card shadow-lg">
 									<Composer
 										busy={busy}
@@ -247,6 +246,9 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
 		setText(v);
 	};
 	const [busy, setBusy] = useState(false);
+	const startingRef = useRef(false);
+	const starterRef = useRef(new SessionStarter());
+	const [startError, setStartError] = useState(false);
 	// THE PICK BAR (owner round 10): the draft's lifted pick set + the
 	// snapshot the standalone chain-table picker reads. Lazy — the graph
 	// is fetched on FIRST open only, then reused.
@@ -279,19 +281,12 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
 	// 33 providers, chats cannot start. The draft stays in the textarea;
 	// Save stores the slots and never sends (owner ruling 2026-10-09) —
 	// the learner sends the draft themselves.
-	const [configured, setConfigured] = useState(initialConfigured);
-	// The zero-keys truth (zero-keys wave): no provider key = the pill
-	// takes precedence over the models CTA (keys come first in the chain).
-	const zeroKeys = useZeroKeys();
-	// The strong slot's keyless truth (pre-send key guards, owner interlude
-	// 2026-09-25): keys may exist generally while the STRONG slot's pinned
-	// provider has none — the same skip-everything treatment on send.
-	const strongKeyless = useStrongKeyless();
+	const { catalog, configured, zeroKeys } = useModelSetup(initialConfigured);
 	const [setupOpen, setSetupOpen] = useState(false);
 
 	const send = useCallback(() => {
 		const draft = textRef.current.trim();
-		if (!draft || busy) return;
+		if (!draft || startingRef.current) return;
 		if (!configured) {
 			setSetupOpen(true);
 			return;
@@ -299,25 +294,39 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
 		// The pre-send KEY guards (owner interlude, no-orphan-chats): guard
 		// BEFORE startDraftSession creates the record — a refused first
 		// send would otherwise leave an orphan error-shell chat in the
-		// sidebar. Same skip-everything-and-open-setup treatment; the
-		// server's 503 gate remains the belt for /chat/[id] sessions.
-		if (zeroKeys || strongKeyless) {
+		// sidebar. Zero providers opens connection setup; an unavailable
+		// selection with another provider opens the ordinary Strong picker.
+		// The server's admission gate remains the belt.
+		if (zeroKeys) {
 			setSetupOpen(true);
 			return;
 		}
+		const strong = catalog?.slots.strong?.model;
+		if (selectedModelUnavailable(catalog, strong ? `${strong.provider}:${strong.id}` : undefined)) {
+			openModelPicker();
+			return; // The learner replaces it explicitly, then sends again.
+		}
+		startingRef.current = true;
 		setBusy(true);
-		void startDraftSession(draft, fetch, mode === "practice" ? "practice" : undefined, mode === "practice" ? picksRef.current : undefined)
+		setStartError(false);
+		void startDraftSession(draft, fetch, mode === "practice" ? "practice" : undefined, mode === "practice" ? picksRef.current : undefined,
+			starterRef.current, JSON.stringify(catalog?.slots.strong))
 			.then((target) => {
 				if (target) router.push(target);
-				else setBusy(false);
+				else { startingRef.current = false; setBusy(false); }
 			})
-			.catch(() => setBusy(false));
-	}, [busy, router, configured, zeroKeys, strongKeyless]);
+			.catch(() => {
+				startingRef.current = false;
+				setBusy(false);
+				setStartError(true);
+			});
+	}, [router, configured, zeroKeys, catalog, mode]);
 
 	return (
 		<>
 			<DraftShell
 				busy={busy}
+				startError={startError}
 				text={text}
 				onChange={applyText}
 				onSend={send}
@@ -372,7 +381,6 @@ export function NewSession({ initialConfigured, mode = "teach" }: { initialConfi
 				open={setupOpen}
 				onClose={() => setSetupOpen(false)}
 				onDone={() => {
-					setConfigured(true);
 					setSetupOpen(false);
 					// Save only saves (owner ruling 2026-10-09): the draft
 					// waits in the composer; the learner sends it.

components/opening-prompt.ts

@@ -0,0 +1,59 @@
+/**
+ * Same-tab handover of a new session's full opening text. Never put the
+ * message in the navigation URL: long query payloads can be rejected before
+ * the chat page loads. Storage is required for automatic delivery, not an
+ * optional best-effort side effect of navigating away from the source draft.
+ */
+export const OPENING_PROMPT_FAILURE = "Couldn’t open the session. Your message is still here. Try sending again.";
+
+export interface OpeningPrompt {
+	text: string;
+	/** Written BEFORE sending. A later mount restores a draft, never reposts. */
+	attempted: boolean;
+}
+
+const keyFor = (id: string) => `lh.openingPrompt.${id}`;
+
+export function stashOpeningPrompt(id: string, text: string, attempted = false): boolean {
+	try {
+		const value = JSON.stringify({ text, attempted } satisfies OpeningPrompt);
+		// Catch both the storage getter and its methods (quota/security errors).
+		const storage = globalThis.sessionStorage;
+		storage.setItem(keyFor(id), value);
+		return storage.getItem(keyFor(id)) === value;
+	} catch {
+		return false;
+	}
+}
+
+export function readOpeningPromptEntry(id: string): OpeningPrompt | undefined {
+	try {
+		const value = globalThis.sessionStorage.getItem(keyFor(id));
+		if (!value) return undefined;
+		try {
+			const entry: unknown = JSON.parse(value);
+			if (entry && typeof entry === "object" && "text" in entry && typeof entry.text === "string" &&
+				entry.text.length > 0 && "attempted" in entry && typeof entry.attempted === "boolean") {
+				return { text: entry.text, attempted: entry.attempted };
+			}
+		} catch { /* Old raw-text stashes have no proof that sending never began. */ }
+		return { text: value, attempted: true };
+	} catch {
+		return undefined;
+	}
+}
+
+export function readOpeningPrompt(id: string): string | undefined {
+	return readOpeningPromptEntry(id)?.text;
+}
+
+export function clearOpeningPrompt(id: string): boolean {
+	try {
+		globalThis.sessionStorage.removeItem(keyFor(id));
+		return true;
+	} catch {
+		// Canonical conversation/acknowledgment remains the truth. A later
+		// mount with real conversation can try cleanup again; never crash it.
+		return false;
+	}
+}

components/path-input-dom.ts

@@ -0,0 +1,257 @@
+import { parseFilePaths, quoteFilePath } from "@/src/core";
+
+/** Tokens store their complete source, not their abbreviated visual label. */
+export const PATH_SOURCE_ATTRIBUTE = "data-file-path-source";
+/** Presentation-only line box for the caret after a final model newline. */
+export const PATH_CARET_ATTRIBUTE = "data-file-path-caret";
+export type TextSelection = { anchor: number; focus: number };
+export type DOMPoint = { node: Node; offset: number };
+type Segment = { text: string; start: DOMPoint; end: DOMPoint; node?: Text; token?: Element };
+
+function childIndex(node: Node): number {
+	return Array.prototype.indexOf.call(node.parentNode!.childNodes, node);
+}
+
+/** Browser editing can leave BR/block nodes; never use innerText (layout/whitespace dependent). */
+function segments(root: HTMLElement): Segment[] {
+	const result: Segment[] = [];
+	function walk(node: Node) {
+		if (node.nodeType === 3) {
+			const text = node as Text;
+			result.push({ text: text.data, start: { node, offset: 0 }, end: { node, offset: text.length }, node: text });
+			return;
+		}
+		if (node.nodeType !== 1) return;
+		const element = node as Element;
+		if (element.hasAttribute(PATH_CARET_ATTRIBUTE)) return;
+		const raw = element.getAttribute(PATH_SOURCE_ATTRIBUTE);
+		if (raw !== null) {
+			const index = childIndex(node);
+			result.push({ text: raw, start: { node: node.parentNode!, offset: index }, end: { node: node.parentNode!, offset: index + 1 }, token: element });
+			return;
+		}
+		if (element.tagName === "BR") {
+			// Chromium's lone BR is an empty editor/paragraph placeholder.
+			if (node.parentNode?.childNodes.length === 1) return;
+			const index = childIndex(node);
+			result.push({ text: "\n", start: { node: node.parentNode!, offset: index }, end: { node: node.parentNode!, offset: index + 1 } });
+			return;
+		}
+		Array.from(node.childNodes).forEach((child, index) => {
+			const block = child.nodeType === 1 && /^(DIV|P)$/.test((child as Element).tagName);
+			const previous = node.childNodes[index - 1];
+			const previousBlock = previous?.nodeType === 1 && /^(DIV|P)$/.test((previous as Element).tagName);
+			if (index > 0 && (block || previousBlock)) {
+				result.push({ text: "\n", start: { node, offset: index }, end: { node, offset: index } });
+			}
+			walk(child);
+		});
+	}
+	walk(root);
+	return result;
+}
+
+export function readPathInput(root: HTMLElement): string {
+	return segments(root).map((part) => part.text).join("");
+}
+
+/** Map a logical UTF-16 offset to a DOM boundary, snapping a chip interior atomically. */
+export function pathInputPoint(root: HTMLElement, offset: number): DOMPoint {
+	const parts = segments(root);
+	const trailing = root.lastChild;
+	if (trailing?.nodeType === 1 && (trailing as Element).hasAttribute(PATH_CARET_ATTRIBUTE)
+		&& offset >= parts.reduce((length, part) => length + part.text.length, 0)) {
+		// A text-node endpoint after its final newline has no line box in Chromium.
+		// The boundary immediately before this BR is on the visible final line.
+		return { node: root, offset: childIndex(trailing) };
+	}
+	let remaining = Math.max(0, offset);
+	for (const part of parts) {
+		if (remaining <= part.text.length) {
+			if (part.node) return { node: part.node, offset: remaining };
+			return remaining <= part.text.length / 2 ? part.start : part.end;
+		}
+		remaining -= part.text.length;
+	}
+	return { node: root, offset: root.childNodes.length };
+}
+
+/** Works without Range: useful in DOM test environments as well as real Selection. */
+export function pathInputOffset(root: HTMLElement, node: Node, offset: number): number | null {
+	if (node !== root && !root.contains(node)) return null;
+	let total = 0;
+	for (const part of segments(root)) {
+		if (part.node === node) return total + Math.min(Math.max(0, offset), part.text.length);
+		if (part.token?.contains(node)) {
+			// A mouse/programmatic selection can end inside a noneditable label.
+			// Keep distinct interior endpoints so atomicPathRange expands copy/cut
+			// to the complete source instead of leaking the abbreviated filename.
+			let visualOffset = node.nodeType === 3 ? offset : Array.from(node.childNodes).slice(0, offset).reduce((length, child) => length + (child.textContent?.length ?? 0), 0);
+			let cursor = node;
+			while (cursor !== part.token) {
+				let sibling = cursor.previousSibling;
+				while (sibling) { visualOffset += sibling.textContent?.length ?? 0; sibling = sibling.previousSibling; }
+				cursor = cursor.parentNode!;
+			}
+			const visualLength = part.token.textContent?.length ?? 0;
+			return total + (visualLength ? Math.round(Math.min(visualLength, visualOffset) / visualLength * part.text.length) : 0);
+		}
+		if (part.start.node === node && part.start.offset >= offset) return total;
+		if (part.end.node === node && part.end.offset <= offset) {
+			total += part.text.length;
+			continue;
+		}
+		// A boundary in an ancestor is before/after every descendant segment.
+		let ancestor: Node = part.node ?? part.token ?? part.start.node;
+		while (ancestor.parentNode && ancestor.parentNode !== node) ancestor = ancestor.parentNode;
+		if (ancestor.parentNode === node && childIndex(ancestor) >= offset) return total;
+		total += part.text.length;
+	}
+	return total;
+}
+
+/** Validate a browser beforeinput StaticRange before projecting its exact endpoints. */
+export function pathInputStaticRange(root: HTMLElement, range: Pick<StaticRange, "startContainer" | "startOffset" | "endContainer" | "endOffset">): TextSelection | null {
+	function valid(node: Node, offset: number) {
+		return (node === root || root.contains(node)) && Number.isInteger(offset) && offset >= 0
+			&& offset <= (node.nodeType === 3 ? (node as Text).length : node.childNodes.length);
+	}
+	if (!valid(range.startContainer, range.startOffset) || !valid(range.endContainer, range.endOffset)) return null;
+	const anchor = pathInputOffset(root, range.startContainer, range.startOffset);
+	const focus = pathInputOffset(root, range.endContainer, range.endOffset);
+	return anchor === null || focus === null || anchor >= focus ? null : { anchor, focus };
+}
+
+export function readPathSelection(root: HTMLElement): TextSelection | null {
+	const selection = root.ownerDocument.getSelection?.();
+	if (!selection?.anchorNode || !selection.focusNode) return null;
+	const anchor = pathInputOffset(root, selection.anchorNode, selection.anchorOffset);
+	const focus = pathInputOffset(root, selection.focusNode, selection.focusOffset);
+	return anchor === null || focus === null ? null : { anchor, focus };
+}
+
+export function restorePathSelection(root: HTMLElement, selection: TextSelection): void {
+	const browserSelection = root.ownerDocument.getSelection?.();
+	if (!browserSelection) return;
+	const anchor = pathInputPoint(root, selection.anchor);
+	const focus = pathInputPoint(root, selection.focus);
+	browserSelection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+}
+
+/** Returns portal hosts. React owns only their visual contents, never the editable tree. */
+export function renderPathInput(root: HTMLElement, value: string): Array<{ host: HTMLElement; path: string }> {
+	const document = root.ownerDocument;
+	const fragment = document.createDocumentFragment();
+	const chips: Array<{ host: HTMLElement; path: string }> = [];
+	for (const part of parseFilePaths(value)) {
+		if (part.kind === "text") {
+			fragment.append(document.createTextNode(part.text));
+		} else {
+			const host = document.createElement("span");
+			host.contentEditable = "false";
+			host.setAttribute("contenteditable", "false");
+			host.setAttribute(PATH_SOURCE_ATTRIBUTE, part.text);
+			fragment.append(host);
+			chips.push({ host, path: part.path });
+		}
+	}
+	// Empty boundary text nodes allow a caret immediately before/after an atomic chip.
+	if (!fragment.firstChild || fragment.firstChild.nodeType !== 3) fragment.prepend(document.createTextNode(""));
+	if (fragment.lastChild?.nodeType !== 3) fragment.append(document.createTextNode(""));
+	if (value.endsWith("\n")) {
+		// pre-wrap alone collapses the final empty line. This BR supplies its
+		// height/caret without adding a second newline to the stored source.
+		const caret = document.createElement("br");
+		caret.setAttribute(PATH_CARET_ATTRIBUTE, "");
+		caret.setAttribute("aria-hidden", "true");
+		fragment.append(caret);
+	}
+	root.replaceChildren(fragment);
+	root.dataset.empty = value.length === 0 ? "true" : "false";
+	return chips;
+}
+
+export function clampPathSelection(value: string, selection: TextSelection): TextSelection {
+	const clamp = (offset: number) => Math.min(value.length, Math.max(0, offset));
+	return { anchor: clamp(selection.anchor), focus: clamp(selection.focus) };
+}
+
+/** A selection intersecting any part of a chip edits/copies that complete source. */
+export function atomicPathRange(value: string, selection: TextSelection): { start: number; end: number } {
+	const clamped = clampPathSelection(value, selection);
+	let start = Math.min(clamped.anchor, clamped.focus);
+	let end = Math.max(clamped.anchor, clamped.focus);
+	for (const part of parseFilePaths(value)) {
+		if (part.kind !== "path") continue;
+		if (start > part.start && start < part.end) start = part.start;
+		if (end > part.start && end < part.end) end = part.end;
+	}
+	return { start, end };
+}
+
+export function replacePathSelection(value: string, selection: TextSelection, text: string) {
+	const { start, end } = atomicPathRange(value, selection);
+	return { value: value.slice(0, start) + text + value.slice(end), selection: { anchor: start + text.length, focus: start + text.length } };
+}
+
+export function insertFilePaths(value: string, selection: TextSelection, paths: string[]) {
+	const { start, end } = atomicPathRange(value, selection);
+	const text = paths.map(quoteFilePath).join(" ");
+	if (!text) return { value, selection };
+	const before = start > 0 && !/\s/.test(value[start - 1]!) ? " " : "";
+	const after = end < value.length && !/\s/.test(value[end]!) ? " " : "";
+	return replacePathSelection(value, selection, before + text + after);
+}
+
+export function adjacentPathRange(value: string, selection: TextSelection, direction: "backward" | "forward"): TextSelection | null {
+	if (selection.anchor !== selection.focus) return selection;
+	const caret = selection.focus;
+	for (const part of parseFilePaths(value)) {
+		if (part.kind === "path" && (direction === "backward" ? caret > part.start && caret <= part.end : caret >= part.start && caret < part.end)) {
+			return { anchor: part.start, focus: part.end };
+		}
+	}
+	return null;
+}
+
+export type PathEditSnapshot = { value: string; selection: TextSelection };
+
+/** Match the text input value sanitization algorithm: remove CR/LF, not spaces. */
+export function normalizePathInputValue(value: string, singleLine: boolean): string {
+	return singleLine ? value.replace(/[\r\n]/g, "") : value;
+}
+
+export function normalizePathEdit(snapshot: PathEditSnapshot, singleLine: boolean): PathEditSnapshot {
+	if (!singleLine) return snapshot;
+	const selection = clampPathSelection(snapshot.value, snapshot.selection);
+	return {
+		value: normalizePathInputValue(snapshot.value, true),
+		selection: {
+			anchor: normalizePathInputValue(snapshot.value.slice(0, selection.anchor), true).length,
+			focus: normalizePathInputValue(snapshot.value.slice(0, selection.focus), true).length,
+		},
+	};
+}
+
+/** Independent of the browser's DOM undo stack (normalization replaces native nodes). */
+export class PathInputHistory {
+	private undoStack: PathEditSnapshot[] = [];
+	private redoStack: PathEditSnapshot[] = [];
+	push(snapshot: PathEditSnapshot) {
+		this.undoStack.push({ value: snapshot.value, selection: { ...snapshot.selection } });
+		this.redoStack = [];
+	}
+	reset() { this.undoStack = []; this.redoStack = []; }
+	undo(current: PathEditSnapshot): PathEditSnapshot | null {
+		const previous = this.undoStack.pop();
+		if (!previous) return null;
+		this.redoStack.push(current);
+		return previous;
+	}
+	redo(current: PathEditSnapshot): PathEditSnapshot | null {
+		const next = this.redoStack.pop();
+		if (!next) return null;
+		this.undoStack.push(current);
+		return next;
+	}
+}

components/path-input.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { FilePathChip } from "./file-path-chip";
+import { cn } from "../lib/utils";
+import {
+	adjacentPathRange, atomicPathRange, clampPathSelection, insertFilePaths,
+	normalizePathEdit, normalizePathInputValue, pathInputStaticRange, PathInputHistory, readPathInput, readPathSelection, renderPathInput,
+	replacePathSelection, restorePathSelection,
+	type PathEditSnapshot, type TextSelection,
+} from "./path-input-dom";
+
+export const INSERT_FILE_PATHS_EVENT = "lh:insert-file-paths";
+export type PathInputProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "defaultValue" | "onChange"> & {
+	value: string;
+	onValueChange: (value: string) => void;
+	placeholder?: string;
+	autoFocus?: boolean;
+	defaultDropTarget?: boolean;
+	/** Native text-input semantics: strip CR/LF and leave Enter to the caller. */
+	singleLine?: boolean;
+};
+
+type ChipHost = { host: HTMLElement; path: string };
+type Controller = {
+	external: (value: string) => void;
+	remember: () => void;
+};
+
+/**
+ * A controlled plaintext editor. Only the source string is state; chips are atomic
+ * views of it. React never reconciles the editable DOM after a native mutation.
+ */
+export const PathInput = React.forwardRef<HTMLDivElement, PathInputProps>(function PathInput({
+	value, onValueChange, placeholder, autoFocus, defaultDropTarget = false, singleLine = false, className,
+	onKeyDown, onFocus, onBlur, onInput, onPaste, onCopy, onCut,
+	onCompositionStart, onCompositionEnd, ...props
+}, forwardedRef) {
+	const rootRef = React.useRef<HTMLDivElement>(null);
+	const controllerRef = React.useRef<Controller | null>(null);
+	const callbacks = React.useRef({ onValueChange, singleLine });
+	const composing = React.useRef(false);
+	const [chips, setChips] = React.useState<ChipHost[]>([]);
+	// Keep this text child immutable: SSR/hydration gets the complete draft,
+	// while subsequent React renders leave the browser-owned editable DOM alone.
+	const initial = React.useRef({ value: normalizePathInputValue(value, singleLine), autoFocus, singleLine });
+
+	React.useImperativeHandle(forwardedRef, () => rootRef.current!, []);
+	React.useLayoutEffect(() => { callbacks.current = { onValueChange, singleLine }; }, [onValueChange, singleLine]);
+
+	React.useLayoutEffect(() => {
+		const root = rootRef.current!;
+		const document = root.ownerDocument;
+		let current = normalizePathInputValue(initial.current.value, initial.current.singleLine);
+		let saved: TextSelection = { anchor: current.length, focus: current.length };
+		let beforeEdit: PathEditSnapshot | null = null;
+		let compositionStart: PathEditSnapshot | null = null;
+		let pendingExternal: string | null = null;
+		let pendingPaths: string[] = [];
+		let pendingPaste: string[] = [];
+		let mounted = true;
+		const history = new PathInputHistory();
+
+		function remember() {
+			if (document.activeElement !== root) return;
+			const selection = readPathSelection(root);
+			if (selection) saved = selection;
+		}
+		function snapshot(): PathEditSnapshot {
+			return { value: current, selection: { ...saved } };
+		}
+		function paint(selection: TextSelection, restore: boolean) {
+			setChips(renderPathInput(root, current));
+			saved = clampPathSelection(current, selection);
+			if (restore) restorePathSelection(root, saved);
+		}
+		function change(next: PathEditSnapshot, record = true, before = snapshot(), notify = true) {
+			next = normalizePathEdit(next, callbacks.current.singleLine);
+			if (next.value === current) { paint(next.selection, document.activeElement === root); return; }
+			if (record) history.push(before);
+			current = next.value;
+			paint(next.selection, document.activeElement === root);
+			if (notify) callbacks.current.onValueChange(current);
+		}
+		function replace(text: string) {
+			remember();
+			change(replacePathSelection(current, saved, text));
+		}
+		function travel(direction: "undo" | "redo") {
+			remember();
+			const next = history[direction](snapshot());
+			if (next) change(next, false);
+		}
+		function stage(paths: string[]) {
+			if (composing.current) { pendingPaths.push(...paths); return; }
+			remember();
+			// Global drop may have moved focus: saved selection is still authoritative.
+			let next: PathEditSnapshot;
+			try { next = insertFilePaths(current, saved, paths); }
+			catch { return; } // Invalid event payloads never mutate learner text.
+			change(next);
+			root.focus();
+			restorePathSelection(root, saved);
+		}
+		function insertEvent(event: Event) {
+			const paths: unknown = (event as CustomEvent<unknown>).detail;
+			if (Array.isArray(paths) && paths.every((path) => typeof path === "string")) stage(paths);
+		}
+		function beforeInput(event: InputEvent) {
+			if (composing.current || event.isComposing) return;
+			remember();
+			beforeEdit = snapshot();
+			if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
+				event.preventDefault();
+				travel(event.inputType === "historyUndo" ? "undo" : "redo");
+			} else if (event.inputType === "insertParagraph" || event.inputType === "insertLineBreak") {
+				event.preventDefault();
+				if (!callbacks.current.singleLine) replace("\n");
+			} else if (event.inputType.startsWith("format") || event.inputType === "insertHTML") {
+				event.preventDefault();
+			} else if (event.inputType === "deleteByCut") {
+				// The cut handler owns both the full-source clipboard and deletion.
+				// Never perform a second deletion if a browser also sends beforeinput.
+				event.preventDefault();
+			} else if (/^delete(?:(?:Word|SoftLine|HardLine)(?:Backward|Forward)|EntireSoftLine)$/.test(event.inputType)) {
+				// Modifier keys have platform-specific word/visual-line semantics.
+				// Only the browser knows that extent; never substitute an adjacent chip.
+				let targets: StaticRange[] = [];
+				try { targets = event.getTargetRanges?.() ?? []; } catch { /* Native fallback below. */ }
+				const range = targets.length === 1 ? pathInputStaticRange(root, targets[0]!) : null;
+				if (range && event.cancelable) {
+					event.preventDefault();
+					// replacePathSelection expands any intersected chip atomically.
+					change(replacePathSelection(current, range, ""));
+				}
+				// Missing/invalid/non-single targets: native edit + input projection owns it.
+			} else if (event.inputType.startsWith("delete")) {
+				const range = adjacentPathRange(current, saved, event.inputType.includes("Backward") ? "backward" : "forward");
+				if (range) {
+					event.preventDefault();
+					change(replacePathSelection(current, range, ""));
+				}
+			}
+		}
+		function input() {
+			if (composing.current) {
+				root.dataset.empty = normalizePathInputValue(readPathInput(root), callbacks.current.singleLine).length === 0 ? "true" : "false";
+				return;
+			}
+			const nextValue = readPathInput(root);
+			const selection = readPathSelection(root) ?? saved;
+			const previous = beforeEdit ?? snapshot();
+			beforeEdit = null;
+			change({ value: nextValue, selection }, true, previous);
+		}
+		function keyDown(event: KeyboardEvent) {
+			if (composing.current || event.isComposing || event.keyCode === 229) return;
+			// Shift+Delete is native Cut on Windows/Linux, not forward deletion.
+			// Let the browser dispatch cut so our clipboard handler can own it.
+			if (event.key === "Delete" && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) return;
+			remember();
+			if ((event.metaKey || event.ctrlKey) && !event.altKey && (event.key.toLowerCase() === "z" || event.key.toLowerCase() === "y")) {
+				event.preventDefault();
+				travel(event.key.toLowerCase() === "y" || event.shiftKey ? "redo" : "undo");
+			} else if ((event.key === "Backspace" || event.key === "Delete") && !event.metaKey && !event.ctrlKey && !event.altKey) {
+				const range = adjacentPathRange(current, saved, event.key === "Backspace" ? "backward" : "forward");
+				if (range) {
+					event.preventDefault();
+					change(replacePathSelection(current, range, ""));
+				}
+			}
+		}
+		function paste(event: ClipboardEvent) {
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			const text = event.clipboardData?.getData("text/plain") ?? "";
+			// Image/file/HTML-only clipboard contents are not text replacement.
+			if (text === "") return;
+			if (composing.current) pendingPaste.push(text);
+			else replace(text);
+		}
+		function copy(event: ClipboardEvent) {
+			if (event.defaultPrevented) return;
+			remember();
+			if (saved.anchor === saved.focus || !event.clipboardData) return;
+			const { start, end } = atomicPathRange(current, saved);
+			event.clipboardData.setData("text/plain", current.slice(start, end));
+			event.preventDefault();
+			if (event.type === "cut" && !composing.current) change(replacePathSelection(current, saved, ""));
+		}
+		function startComposition() {
+			remember();
+			composing.current = true;
+			compositionStart = snapshot();
+		}
+		function endComposition() {
+			// Some browsers send the final input immediately AFTER compositionend.
+			queueMicrotask(() => {
+				if (!mounted) return;
+				let nextValue = readPathInput(root);
+				let selection = readPathSelection(root) ?? saved;
+				const previous = compositionStart ?? snapshot();
+				const reset = pendingExternal !== null && !pendingExternal.startsWith(previous.value);
+				const nativeChanged = normalizePathInputValue(nextValue, callbacks.current.singleLine) !== current;
+				const notify = pendingExternal === null || (!reset && nativeChanged);
+				if (pendingExternal !== null) {
+					if (pendingExternal.startsWith(previous.value)) {
+						nextValue += pendingExternal.slice(previous.value.length);
+					} else {
+						nextValue = pendingExternal;
+						selection = clampPathSelection(nextValue, selection);
+					}
+				}
+				pendingExternal = null;
+				compositionStart = null;
+				beforeEdit = null;
+				composing.current = false;
+				if (reset) history.reset();
+				change({ value: nextValue, selection }, !reset, previous, notify);
+				if (pendingPaste.length) { const text = pendingPaste.join(""); pendingPaste = []; replace(text); }
+				if (pendingPaths.length) { const paths = pendingPaths; pendingPaths = []; stage(paths); }
+			});
+		}
+		controllerRef.current = {
+			remember,
+			external(next) {
+				next = normalizePathInputValue(next, callbacks.current.singleLine);
+				if (composing.current) { pendingExternal = next; return; }
+				if (next === current) return;
+				remember();
+				const previous = snapshot();
+				// Dictation appends are undoable; a controlled reset starts fresh history.
+				if (next && next.startsWith(current)) history.push(previous);
+				else history.reset();
+				const selection = saved.anchor === current.length && saved.focus === current.length
+					? { anchor: next.length, focus: next.length } : clampPathSelection(next, saved);
+				current = next;
+				paint(selection, document.activeElement === root);
+			},
+		};
+		paint(saved, false);
+		if (initial.current.autoFocus) { root.focus(); restorePathSelection(root, saved); }
+		root.addEventListener(INSERT_FILE_PATHS_EVENT, insertEvent);
+		root.addEventListener("beforeinput", beforeInput);
+		root.addEventListener("input", input);
+		root.addEventListener("keydown", keyDown);
+		root.addEventListener("paste", paste);
+		root.addEventListener("copy", copy);
+		root.addEventListener("cut", copy);
+		root.addEventListener("compositionstart", startComposition);
+		root.addEventListener("compositionend", endComposition);
+		document.addEventListener("selectionchange", remember);
+		return () => {
+			mounted = false;
+			composing.current = false;
+			controllerRef.current = null;
+			root.removeEventListener(INSERT_FILE_PATHS_EVENT, insertEvent);
+			root.removeEventListener("beforeinput", beforeInput);
+			root.removeEventListener("input", input);
+			root.removeEventListener("keydown", keyDown);
+			root.removeEventListener("paste", paste);
+			root.removeEventListener("copy", copy);
+			root.removeEventListener("cut", copy);
+			root.removeEventListener("compositionstart", startComposition);
+			root.removeEventListener("compositionend", endComposition);
+			document.removeEventListener("selectionchange", remember);
+		};
+	}, []);
+
+	React.useLayoutEffect(() => { controllerRef.current?.external(value); }, [value, singleLine]);
+
+	return <>
+		<div
+			{...props}
+			ref={rootRef}
+			role="textbox"
+			aria-label={props["aria-label"] ?? placeholder}
+			aria-multiline={singleLine ? "false" : "true"}
+			aria-placeholder={placeholder}
+			contentEditable
+			suppressContentEditableWarning
+			data-file-path-input=""
+			data-empty={initial.current.value.length === 0 ? "true" : "false"}
+			data-file-path-default={defaultDropTarget ? "" : undefined}
+			data-placeholder={placeholder}
+			className={cn("block w-full min-w-0 outline-none data-[empty=true]:before:pointer-events-none data-[empty=true]:before:text-muted-foreground data-[empty=true]:before:content-[attr(data-placeholder)]", singleLine ? "whitespace-pre break-normal overflow-x-auto overflow-y-hidden" : "whitespace-pre-wrap break-words overflow-y-auto", className)}
+			onKeyDown={(event) => {
+				if (composing.current || event.nativeEvent.isComposing || event.keyCode === 229) { event.stopPropagation(); return; }
+				onKeyDown?.(event);
+			}}
+			onFocus={(event) => { controllerRef.current?.remember(); onFocus?.(event); }}
+			onBlur={(event) => { controllerRef.current?.remember(); onBlur?.(event); }}
+			onInput={onInput}
+			onPaste={onPaste}
+			onCopy={onCopy}
+			onCut={onCut}
+			onCompositionStart={onCompositionStart}
+			onCompositionEnd={onCompositionEnd}
+		>{initial.current.value}</div>
+		{chips.map(({ host, path }) => createPortal(<FilePathChip path={path} contentEditable={false} />, host))}
+	</>;
+});

components/practice-cards.tsx

@@ -2,9 +2,9 @@
 import { useI18n } from "@/components/i18n";
 
 
-import { MessageResponse } from "@/components/ai-elements/message";
+import { ToolContentResponse } from "@/components/ai-elements/message";
 import { cn } from "@/lib/utils";
-import { repairMathForDisplay, type ArtifactPartProps } from "@/src/core";
+import type { ArtifactPartProps } from "@/src/core";
 
 /**
  * The practice transcript cards (practice sessions, owner design
@@ -69,7 +69,7 @@ export function ProblemCard({ part }: ArtifactPartProps) {
 		<div data-testid="problem-card" className="lh-card-enter my-1 rounded-xl border bg-card p-4">
 			<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Problem")}</div>
 			<div className="lh-prose text-[15px]">
-				<MessageResponse>{repairMathForDisplay(statement)}</MessageResponse>
+				<ToolContentResponse>{statement}</ToolContentResponse>
 			</div>
 		</div>
 	);
@@ -135,7 +135,7 @@ export function ConcludeCard({ part }: ArtifactPartProps) {
 			    (owner round 3): the same quiet 50% register as quiz explanations. */}
 			{verdict.length > 0 && (
 				<div className="text-sm text-foreground/50">
-					<MessageResponse>{repairMathForDisplay(verdict)}</MessageResponse>
+					<ToolContentResponse>{verdict}</ToolContentResponse>
 				</div>
 			)}
 			{/* Then the divider, then the labeled model solution (Slice G: the
@@ -146,7 +146,7 @@ export function ConcludeCard({ part }: ArtifactPartProps) {
 					<div>
 						<div className="mb-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Model solution")}</div>
 						<div className="lh-prose text-[15px]">
-							<MessageResponse>{repairMathForDisplay(reveal)}</MessageResponse>
+							<ToolContentResponse>{reveal}</ToolContentResponse>
 						</div>
 					</div>
 				</>

components/practice-dock.tsx

@@ -4,12 +4,12 @@ import { useI18n } from "@/components/i18n";
 
 import { useCallback, useRef, useState } from "react";
 import { ChevronRightIcon } from "lucide-react";
-import { MessageResponse } from "@/components/ai-elements/message";
+import { ToolContentResponse } from "@/components/ai-elements/message";
 import { Button } from "@/components/ui/button";
 import { joinDictation, useDictationTarget } from "@/components/dictation";
 import { useEnterSubmits } from "@/components/enter-submits";
+import { PathInput } from "@/components/path-input";
 import { cn } from "@/lib/utils";
-import { repairMathForDisplay } from "@/src/core";
 
 /**
  * The practice dock (practice sessions, owner design 2026-10-04): an
@@ -109,10 +109,10 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
 			    cards' label row — owner round, 2026-10-05) + the statement,
 			    markdown + LaTeX rendered, capped by the measured column
 			    (--dock-max-h; the old fixed 40vh cut long problems short). */}
-			<div className="max-h-[var(--dock-max-h,40vh)] overflow-y-auto px-4 pt-3 pb-2">
+			<div data-dock-scroll-area="" className="max-h-[var(--dock-max-h,40vh)] overflow-y-auto px-4 pt-3 pb-2">
 				<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">{t("Problem")}</div>
 				<div className="lh-prose text-[15px]">
-					<MessageResponse>{typeof input.statement === "string" ? repairMathForDisplay(input.statement) : input.statement}</MessageResponse>
+					<ToolContentResponse>{input.statement}</ToolContentResponse>
 				</div>
 			</div>
 
@@ -123,12 +123,13 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
 				className="m-1.5 rounded-[10px] border border-border/70 bg-background/60 transition-colors focus-within:border-primary/50"
 			>
 				<div className="px-2.5 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-					{t("YOUR THINKING")}</div>
-				<textarea
+					{t("YOUR THINKING")}
+				</div>
+				<PathInput
 					value={thinking}
-					onChange={(e) => {
-						thinkingRef.current = e.target.value;
-						setThinking(e.target.value);
+					onValueChange={(value) => {
+						thinkingRef.current = value;
+						setThinking(value);
 					}}
 					onKeyDown={(e) => {
 						// Esc ends dictation — stopPropagation claims it (the
@@ -147,7 +148,6 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
 						}
 					}}
 					placeholder={t("Work here, think out loud.")}
-					rows={4}
 					className={cn(
 						"field-sizing-content lh-input max-h-64 min-h-16 w-full resize-none bg-transparent px-2.5 pb-2 outline-none placeholder:text-muted-foreground",
 					)}

components/question-dock.tsx

@@ -7,10 +7,12 @@ import { ArrowDownIcon, ChevronRightIcon, PlayIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { finishDictation, isDictationActive, joinDictation, useDictationTarget } from "@/components/dictation";
 import { useEnterSubmits } from "@/components/enter-submits";
-import { MessageResponse } from "@/components/ai-elements/message";
+import { PathInput } from "@/components/path-input";
+import { ToolContentResponse } from "@/components/ai-elements/message";
 import { cn } from "@/lib/utils";
 import {
 	buildAnswer,
+	repairMathForDisplay,
 	normalizeQuizType,
 	CONFIDENCE_STOPS,
 	DEFAULT_CONFIDENCE_INDEX,
@@ -30,6 +32,7 @@ import {
 	type DockSelection,
 	type ExplainToolInput,
 	type QuestionAnswerData,
+	type QuestionFormDraft,
 	type QuestionData,
 	type QuestionMode,
 	type QuizToolInput,
@@ -73,6 +76,9 @@ export interface QuestionDockProps {
 	reveal?: boolean;
 	onExpand: () => void;
 	onSubmit: (output: QuestionAnswerData) => void;
+	/** Restore only this call's unconfirmed submission after recovery. */
+	initialDraft?: QuestionFormDraft;
+	onSaveDraft?: (draft: QuestionFormDraft) => void;
 	/** Escape in a question field stops dictation (STT wave) — threaded
 	 *  from the page that owns the dictation hook. */
 	onEscape?: () => void;
@@ -102,6 +108,8 @@ export function QuestionDock({
 	reveal = false,
 	onExpand,
 	onSubmit,
+	initialDraft,
+	onSaveDraft,
 	onEscape,
 	phase = "probe",
 	dictationClaim = true,
@@ -157,6 +165,8 @@ export function QuestionDock({
 					phase={phase}
 					active={expanded}
 					onSubmit={onSubmit}
+					initialDraft={initialDraft}
+					onSaveDraft={onSaveDraft}
 					onEscape={onEscape}
 					dictationClaim={dictationClaim}
 					compactionRunning={compactionRunning}
@@ -168,7 +178,7 @@ export function QuestionDock({
 
 /** A plain-text teaser of a question for the collapsed bar: unwrap math, flatten common LaTeX. */
 function teaserText(q: string): string {
-	return q
+	return repairMathForDisplay(q)
 		.replace(/\\\(([\s\S]*?)\\\)/g, "$1") // \(...\) inline math
 		.replace(/\\\[([\s\S]*?)\\\]/g, "$1") // \[...\] display math
 		.replace(/\$\$?([^$]*)\$\$?/g, "$1") // standard $...$/$$...$$ math
@@ -253,6 +263,8 @@ function QuestionDockForm({
 	phase = "probe",
 	active,
 	onSubmit,
+	initialDraft,
+	onSaveDraft,
 	onEscape,
 	dictationClaim = true,
 	compactionRunning = false,
@@ -315,22 +327,22 @@ function QuestionDockForm({
 	// single-select displaces, multi-select coexists — picking the ask
 	// "Other…" row in a multi-select must never clear already-picked
 	// options, and picking an option must never clear a typed custom answer.
-	const [sel, setSel] = useState<DockSelection>(emptyDockSelection());
+	const [sel, setSel] = useState<DockSelection>(() => initialDraft?.selection ?? emptyDockSelection());
 	// The learner's transfer channel — thinking, never "a note".
-	const [thinking, setThinking] = useState("");
-	const [other, setOther] = useState("");
-	const [text, setText] = useState("");
+	const [thinking, setThinking] = useState(initialDraft?.thinking ?? "");
+	const [other, setOther] = useState(initialDraft?.other ?? "");
+	const [text, setText] = useState(initialDraft?.text ?? "");
 	/* Refs MIRROR the two dictation-target fields ("nothing gets lost"
 	 * round, owner 2026-10-01): the run's flush lands via setState, which
 	 * a closure waiting through `await finishDictation()` cannot observe
 	 * in time — submit reads these, kept current at every write site. */
-	const thinkingTextRef = useRef("");
-	const answerTextRef = useRef("");
+	const thinkingTextRef = useRef(initialDraft?.thinking ?? "");
+	const answerTextRef = useRef(initialDraft?.text ?? "");
 	// Confidence (owner, 2026-10-01): an index into CONFIDENCE_STOPS,
 	// resting at 50 — a real coin flip by definition, untouched or
 	// deliberate (the same number, the same meaning). The dock unmounts
 	// between questions, so each question starts fresh at 50.
-	const [confIdx, setConfIdx] = useState<number>(DEFAULT_CONFIDENCE_INDEX);
+	const [confIdx, setConfIdx] = useState<number>(initialDraft?.confidenceIndex ?? DEFAULT_CONFIDENCE_INDEX);
 	const selectMode: SelectMode = qd.mode === "multi-select" ? "multi-select" : "single-select";
 
 	// The PRIMARY dictation input (owner, STT round 1): while a question
@@ -394,6 +406,15 @@ function QuestionDockForm({
 			// "untouched"); buildAnswer drops it on "I don't know".
 			confidence: kind === "quiz" ? CONFIDENCE_STOPS[confIdx] : undefined,
 		};
+		// Snapshot before optimistic submission unmounts the form. Ref values
+		// include the dictation finals that just landed, unlike stale closures.
+		onSaveDraft?.({
+			selection: { ...sel, selected: new Set(sel.selected) },
+			thinking: thinkingTextRef.current,
+			other,
+			text: answerTextRef.current,
+			confidenceIndex: confIdx,
+		});
 		onSubmit(buildAnswer(qd, req, toolName));
 	};
 
@@ -423,8 +444,8 @@ function QuestionDockForm({
 	   expanded — collapsed, the bar's native Enter expands it. */
 	const [kbdIdx, setKbdIdx] = useState<number | null>(null);
 	const rootRef = useRef<HTMLDivElement>(null);
-	const otherInputRef = useRef<HTMLInputElement>(null);
-	const thinkingRef = useRef<HTMLTextAreaElement>(null);
+	const otherInputRef = useRef<HTMLDivElement>(null);
+	const thinkingRef = useRef<HTMLDivElement>(null);
 	// One row past the options is the trailing row: quiz → don't-know,
 	// ask → Other (a question never has both). Text mode (ask/explain)
 	// has no rows — the composer IS the answer surface.
@@ -457,7 +478,7 @@ function QuestionDockForm({
 	const focusRow = (idx: number) => {
 		const row = rootRef.current?.querySelector(`[data-kbdrow="${idx}"]`) as HTMLElement | null;
 		if (!row) return;
-		const el = (row.querySelector("input") as HTMLElement | null) ?? row;
+		const el = (row.querySelector("input, [data-file-path-input]") as HTMLElement | null) ?? row;
 		el.focus();
 	};
 
@@ -548,7 +569,7 @@ function QuestionDockForm({
 			{/* Question area — scrolls internally if very tall; the bottom row stays put.
 			    Capped by the measured column (--dock-max-h; the old fixed 55dvh cut
 			    long questions short — owner round, 2026-10-05). */}
-			<div data-session-find-root="" className="max-h-[var(--dock-max-h,55dvh)] overflow-y-auto px-4 pt-3">
+			<div data-dock-scroll-area="" data-session-find-root="" className="max-h-[var(--dock-max-h,55dvh)] overflow-y-auto px-4 pt-3">
 				<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
 					{toolName === "probe"
 						? t("Probe")
@@ -564,11 +585,11 @@ function QuestionDockForm({
 					{qd.mode === "multi-select" && t(" · select all that apply")}
 				</div>
 				<div className="mb-3 font-medium">
-					<MessageResponse>{qd.question}</MessageResponse>
+					<ToolContentResponse>{qd.question}</ToolContentResponse>
 				</div>
 				{qd.context && (
 					<div className="mb-3 text-sm text-muted-foreground">
-						<MessageResponse>{qd.context}</MessageResponse>
+						<ToolContentResponse>{qd.context}</ToolContentResponse>
 					</div>
 				)}
 
@@ -604,7 +625,7 @@ function QuestionDockForm({
 										)}
 									</span>
 									<span>
-										<MessageResponse>{opt.label}</MessageResponse>
+										<ToolContentResponse>{opt.label}</ToolContentResponse>
 										{kind !== "quiz" && opt.description && (
 											// Option subtext renders in Source Sans 3 (owner's mockup);
 											// the "I don't know" copy stays JetBrains Mono. QUIZ options render
@@ -613,9 +634,9 @@ function QuestionDockForm({
 											// records must not leak either. Same MessageResponse path as the
 											// label (owner, 2026-10-12): descriptions are full markdown —
 											// LaTeX included — not plain text.
-											<MessageResponse className="lh-prose block text-xs text-muted-foreground">
+											<ToolContentResponse className="lh-prose block text-xs text-muted-foreground">
 												{opt.description}
-											</MessageResponse>
+											</ToolContentResponse>
 										)}
 									</span>
 								</button>
@@ -680,11 +701,12 @@ function QuestionDockForm({
 										</span>
 									)}
 								</span>
-								<input
+								<PathInput
 									ref={otherInputRef}
+									singleLine
 									value={other}
-									onChange={(e) => {
-										setOther(e.target.value);
+									onValueChange={(value) => {
+										setOther(value);
 										// Typing selects the row — displacing in
 										// single-select, alongside the siblings in multi.
 										setSel((prev) => (prev.otherSelected ? prev : toggleOther(selectMode, prev)));
@@ -834,11 +856,11 @@ function QuestionDockForm({
 						{qd.mode === "text" ? t("Your answer") : t("YOUR THINKING")}
 					</div>
 					{qd.mode === "text" ? (
-						<textarea
+						<PathInput
 							value={text}
-							onChange={(e) => {
-								answerTextRef.current = e.target.value;
-								setText(e.target.value);
+							onValueChange={(value) => {
+								answerTextRef.current = value;
+								setText(value);
 							}}
 							onKeyDown={(e) => {
 								// Esc ends dictation (the dictate decisions: click-again
@@ -858,16 +880,15 @@ function QuestionDockForm({
 								}
 							}}
 							placeholder={t("Type your answer…")}
-							rows={1}
 							className="field-sizing-content lh-input max-h-48 min-h-10 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground"
 						/>
 					) : (
-						<textarea
+						<PathInput
 							ref={thinkingRef}
 							value={thinking}
-							onChange={(e) => {
-								thinkingTextRef.current = e.target.value;
-								setThinking(e.target.value);
+							onValueChange={(value) => {
+								thinkingTextRef.current = value;
+								setThinking(value);
 							}}
 							onKeyDown={(e) => {
 								// Esc ends dictation (the dictate decisions: click-again
@@ -888,7 +909,6 @@ function QuestionDockForm({
 								}
 							}}
 							placeholder={t("Why this answer? Whatever comes to mind.")}
-							rows={1}
 							className={cn(
 								"field-sizing-content lh-input max-h-48 w-full resize-none bg-transparent px-2.5 py-2 outline-none placeholder:text-muted-foreground/70",
 								// Phase-scaled prominence: teaching invites depth,

components/reading-thinking.tsx

@@ -4,6 +4,7 @@ import { useI18n } from "@/components/i18n";
 
 import { useCallback } from "react";
 import { joinDictation, useDictationTarget } from "@/components/dictation";
+import { PathInput } from "@/components/path-input";
 
 /**
  * The reading-thinking field (owner design 2026-10-03, "two questions per
@@ -55,10 +56,11 @@ export function ReadingThinkingField({
 			className="pointer-events-auto mb-2 rounded-2xl border bg-card/60 px-3 py-2 transition-colors focus-within:border-primary/50"
 		>
 			<div className="pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-				{t("Thinking while reading")}</div>
-			<textarea
+				{t("Thinking while reading")}
+			</div>
+			<PathInput
 				value={value}
-				onChange={(e) => onChange(e.target.value)}
+				onValueChange={onChange}
 				/* py-0.5 (owner round, 2026-10-07): the scrollbar fix. Source
 				   Sans 3's font box is 22px at 16px; lh-input's 1.25 leading
 				   gives a 20px line box — the content area sticks 1px below the
@@ -97,7 +99,6 @@ export function ReadingThinkingField({
 					}
 				}}
 				placeholder={t("Whatever comes to mind as you read.")}
-				rows={1}
 				className="field-sizing-content lh-input max-h-40 w-full resize-none bg-transparent py-0.5 outline-none placeholder:text-muted-foreground/70"
 			/>
 		</div>

components/server-events.tsx

@@ -116,6 +116,9 @@ export function wireSource(source: NotifySource, hub: ReturnType<typeof createNo
 
 const EventsContext = createContext<ReturnType<typeof createNotifyHub> | null>(null);
 
+/** Transport adapters may also be mounted in isolation with an injected bridge. */
+export function useNotifyHub() { return useContext(EventsContext); }
+
 export function ServerEventsProvider({ children, connect }: { children: ReactNode; connect?: () => NotifySource }) {
 	const hub = useMemo(() => createNotifyHub(), []);
 	useEffect(() => wireSource((connect ?? openEventsChannel)(), hub), [hub, connect]);

components/session-core.ts

@@ -17,6 +17,8 @@ import type { AgentEvent } from "@earendil-works/pi-agent-core";
 import type { ToolResultMessage } from "@earendil-works/pi-ai";
 import {
 	needsContinuation,
+	pendingQuestionOf,
+	failedResponseAtEnd,
 	measuredContextTokens,
 	newAnswerResult,
 	newNextMessage,
@@ -30,6 +32,7 @@ import {
 	type LhViewMessage,
 	type LiveExecution,
 	type QuestionAnswerData,
+	type QuestionDraft,
 } from "../src/core";
 
 export type SessionStatus = "ready" | "submitted" | "streaming" | "error";
@@ -78,13 +81,25 @@ async function turnInFlight(model: SessionModel): Promise<boolean | null> {
 	}
 }
 
-/** One wire event off the SSE body: parsed JSON, or the [DONE] terminal. */
-async function* sseEvents(reader: ReadableStreamDefaultReader<Uint8Array>): AsyncGenerator<Record<string, unknown>> {
+const STREAM_DROPPED = "The connection dropped before the turn completed.";
+
+/** Mark transport failures without confusing JSON/application bugs with drops. */
+class StreamReadError extends Error {
+	constructor(cause: unknown) {
+		super(cause instanceof Error ? cause.message : String(cause), { cause });
+	}
+}
+
+/** Wire events; return true ONLY for the explicit completion marker. */
+async function* sseEvents(reader: ReadableStreamDefaultReader<Uint8Array>): AsyncGenerator<Record<string, unknown>, boolean> {
 	const decoder = new TextDecoder();
 	let buf = "";
 	for (;;) {
-		const { done, value } = await reader.read();
-		if (done) return;
+		let chunk: ReadableStreamReadResult<Uint8Array>;
+		try { chunk = await reader.read(); }
+		catch (err) { throw new StreamReadError(err); }
+		const { done, value } = chunk;
+		if (done) return false;
 		buf += decoder.decode(value, { stream: true });
 		for (;;) {
 			const end = buf.indexOf("\n\n");
@@ -94,7 +109,7 @@ async function* sseEvents(reader: ReadableStreamDefaultReader<Uint8Array>): Asyn
 			const dataLine = event.split("\n").find((l) => l.startsWith("data: "));
 			if (!dataLine) continue;
 			const data = dataLine.slice("data: ".length);
-			if (data === "[DONE]") return;
+			if (data === "[DONE]") return true;
 			yield JSON.parse(data) as Record<string, unknown>;
 		}
 	}
@@ -103,12 +118,13 @@ async function* sseEvents(reader: ReadableStreamDefaultReader<Uint8Array>): Asyn
 /** The dangling question call's tool name (the optimistic answer result's
  *  toolName — the server stamps the same from its own record scan). */
 export function pendingCallTool(messages: readonly LhMessage[], toolCallId: string): string | null {
-	for (const m of messages) {
-		if ((m as { role?: string }).role !== "assistant") continue;
-		const content = (m as { content?: unknown }).content;
-		if (!Array.isArray(content)) continue;
-		for (const block of content as Array<{ type?: string; id?: string; name?: string }>) {
-			if (block.type === "toolCall" && block.id === toolCallId) return block.name ?? null;
+	// Match projection's newest-occurrence pairing for pre-uniquifier records.
+	for (let mi = messages.length - 1; mi >= 0; mi--) {
+		const m = messages[mi]!;
+		if (m.role !== "assistant") continue;
+		for (let bi = m.content.length - 1; bi >= 0; bi--) {
+			const block = m.content[bi]!;
+			if (block.type === "toolCall" && block.id === toolCallId) return block.name;
 		}
 	}
 	return null;
@@ -164,6 +180,8 @@ function sameDetails(a: unknown, b: unknown): boolean {
 export interface SessionState {
 	messages: LhViewMessage[];
 	nativeMessages: LhMessage[];
+	/** Server-read history only; optimistic bubbles are not delivery proof. */
+	hasConfirmedConversation: boolean;
 	/** Completed conversation usage; null after compaction or before first usage. */
 	contextTokens: number | null;
 	status: SessionStatus;
@@ -196,6 +214,8 @@ export function visibleQueuedSteers(
 export interface SessionModelOptions extends SessionModelDeps {
 	chatId: string;
 	initialMessages: LhMessage[];
+	/** Retained, memory-only server failure when reopening a session. */
+	initialError?: string;
 	/** Fires on every state change (the hook re-renders). */
 	onChange?: () => void;
 	/** The reattach settled terminal (turn-settled): no turn running, the
@@ -220,6 +240,9 @@ export class SessionModel {
 	// at every full sync; the write-ahead absorbs the optimistic entries.
 	private base: LhMessage[];
 	private tail: LhMessage[] = [];
+	private questionDrafts = new Map<string, QuestionDraft>();
+	/** Only learner answers submitted through send(), never silent dismissals. */
+	private unconfirmedAnswers = new Map<string, string>();
 	// The live turn's execution layer (view model mid-turn states):
 	private executions = new Map<string, LiveExecution>();
 	private streamingIds = new Set<string>();
@@ -229,17 +252,24 @@ export class SessionModel {
 	private statusValue: SessionStatus = "ready";
 	/** Request/loop failures are transient; provider failures derive from messages. */
 	private errorValue: { message: string } | null = null;
+	/** Dismissing a banner must not authorize an automatic replacement turn. */
+	private automaticContinuationBlocked = false;
 	/** A completed failure from THIS consume, not the previous attempt's record. */
 	private liveFailureId: string | null = null;
 	// The single live consume (POST response or reattach stream): a newer
 	// consume cancels the older — one reader at a time.
 	private consumeAbort: AbortController | null = null;
+	/** Retain the latest request across stop(): an opening POST still owns
+	 * its refusal after view detachment, but never after a newer request. */
+	private latestRequest: AbortController | null = null;
 	/** Synchronous ready check for the gate (send/read mount logic). */
 	readyRef = true;
 
 	constructor(opts: SessionModelOptions) {
 		this.chatId = opts.chatId;
 		this.base = opts.initialMessages;
+		this.errorValue = opts.initialError === undefined ? null : { message: opts.initialError };
+		this.automaticContinuationBlocked = opts.initialError !== undefined;
 		// BOUND: the browser's native fetch is a Window method — storing it
 		// unbound makes every call throw "Illegal invocation" in the browser
 		// (Node's undici doesn't care, so the tests never saw it). Always go
@@ -262,18 +292,19 @@ export class SessionModel {
 				? { executions: this.executions, inFlight: true, streamingIds: this.streamingIds }
 				: undefined;
 		const messages = [...this.base, ...this.tail];
-		const latest = messages.at(-1);
-		// One rule for live and restored failures: only the final completed
-		// assistant can own the banner. While trying again, hide the old
-		// failure from the first Thinking frame, but show a new failure at end.
+		const latest = failedResponseAtEnd(messages);
+		// Presentation/compaction markers do not resolve a failure. While
+		// trying again, hide the old banner from the first Thinking frame,
+		// but show a new completed failure from this consume immediately.
 		const providerError =
-			latest?.role === "assistant" && latest.stopReason === "error" &&
+			latest !== undefined &&
 			!this.incompleteUsageIds.has(latest.id) && (!live || latest.id === this.liveFailureId)
 				? { message: latest.errorMessage ?? "An error occurred." }
 				: null;
 		return {
 			messages: projectView(messages, live),
 			nativeMessages: messages,
+			hasConfirmedConversation: this.base.some(m => m.role === "user" || m.role === "assistant"),
 			contextTokens: measuredContextTokens(messages, this.incompleteUsageIds),
 			status: this.statusValue,
 			error: this.errorValue ?? providerError,
@@ -300,6 +331,7 @@ export class SessionModel {
 
 	private setError(message: string | null): void {
 		this.errorValue = message === null ? null : { message };
+		if (message !== null) this.automaticContinuationBlocked = true;
 		this.onChange?.();
 	}
 
@@ -346,6 +378,12 @@ export class SessionModel {
 		}
 		const agent = event as unknown as AgentEvent;
 		switch (agent.type) {
+			case "agent_start":
+				// Positive evidence of a new/replayed server-owned turn. Any
+				// later failure in that replay blocks continuation again.
+				this.automaticContinuationBlocked = false;
+				if (this.errorValue !== null) this.setError(null);
+				return false;
 			case "message_start":
 			case "message_update":
 			case "message_end": {
@@ -445,18 +483,28 @@ export class SessionModel {
 
 	/** Consume one SSE body to its [DONE] terminal. The turn-settled
 	 *  terminal (stream-route only) fires the settle hook and ends. */
-	async consumeStream(res: Response, controller = this.consumeAbort): Promise<void> {
+	async consumeStream(res: Response, controller = this.consumeAbort, allowRecovery = true): Promise<void> {
 		if (!res.body) throw new Error("The turn stream body is empty.");
 		const reader = res.body.getReader();
 		let sawEvent = false;
+		let sawDone = false;
 		try {
-			for await (const event of sseEvents(reader)) {
+			const events = sseEvents(reader);
+			for (;;) {
+				let next: IteratorResult<Record<string, unknown>, boolean>;
+				try { next = await events.next(); }
+				catch (err) {
+					if (err instanceof StreamReadError) break;
+					throw err;
+				}
 				if (this.consumeAbort !== controller) return;
+				if (next.done) { sawDone = next.value; break; }
+				const event = next.value;
 				if (event.type === "turn-settled") {
 					// The raced-settle terminal: no turn to attach to — the
 					// record is current; the settle hook refetches.
-					await reader.cancel().catch(() => {});
-					if (this.consumeAbort === controller) this.onReattachSettled?.();
+					sawDone = true;
+					this.onReattachSettled?.();
 					return;
 				}
 				const acted = this.applyWireEvent(event);
@@ -466,14 +514,32 @@ export class SessionModel {
 				}
 			}
 		} finally {
+			await reader.cancel().catch(() => {});
+			reader.releaseLock();
 			// A cancelled consume may finish after its replacement has entered
 			// Thinking. Only the current owner can settle shared state.
 			if (this.consumeAbort === controller) {
 				this.streamingIds = new Set();
 				this.executions = new Map();
-				if (this.statusValue !== "error") this.setStatus("ready");
+				if (sawDone && this.statusValue !== "error") this.setStatus("ready");
 			}
 		}
+		if (this.consumeAbort !== controller || sawDone) return;
+		if (!allowRecovery) throw new StreamReadError(new Error(STREAM_DROPPED));
+		// One read-only recovery: refresh the canonical base, then replay the
+		// SAME server-owned turn. Never resend the learner's input.
+		await this.resumeStream(true, false);
+	}
+
+	private async fetchView(url: string, signal: AbortSignal, recoveringDrop: boolean): Promise<Response> {
+		try {
+			const res = await this.fetch(url, { signal });
+			if (recoveringDrop && !res.ok) throw new Error((await res.text()) || STREAM_DROPPED);
+			return res;
+		} catch (err) {
+			if (recoveringDrop && !signal.aborted) throw new StreamReadError(err);
+			throw err;
+		}
 	}
 
 	/**
@@ -489,10 +555,11 @@ export class SessionModel {
 	 * lands on top. The stream then replays the turn from its first event
 	 * through the SAME consume path.
 	 */
-	async resumeStream(refetchRecordFirst = true): Promise<void> {
+	async resumeStream(refetchRecordFirst = true, allowRecovery = true): Promise<void> {
 		this.consumeAbort?.abort();
 		const controller = new AbortController();
 		this.consumeAbort = controller;
+		this.latestRequest = controller;
 		// REPLAY ONTO A CLEAN SLATE (owner, optimistic round 3, 2026-10-02):
 		// the reattach stream replays the turn from its FIRST event — an
 		// aborted earlier attempt (React StrictMode's simulated remount)
@@ -519,16 +586,27 @@ export class SessionModel {
 		this.setStatus("submitted");
 		try {
 			if (refetchRecordFirst) {
-				const recordRes = await this.fetch(`/api/chats/${encodeURIComponent(this.chatId)}`, {
-					signal: controller.signal,
-				});
+				const recordRes = await this.fetchView(`/api/chats/${encodeURIComponent(this.chatId)}`, controller.signal, !allowRecovery);
 				if (this.consumeAbort !== controller) return;
 				if (recordRes.ok) {
-					const record = (await recordRes.json()) as { messages?: LhMessage[] };
+					let text: string;
+					try { text = await recordRes.text(); }
+					catch (err) {
+						if (!allowRecovery && !controller.signal.aborted) throw new StreamReadError(err);
+						throw err;
+					}
+					// Parse outside the transport catch: malformed JSON is a
+					// contract bug, not a connection-drop diagnostic.
+					const record = JSON.parse(text) as { messages?: LhMessage[]; turnError?: string };
 					if (this.consumeAbort !== controller) return;
 					if (Array.isArray(record.messages)) {
 						this.mutate(() => {
 							this.base = record.messages!;
+							if (record.turnError !== undefined) {
+								this.errorValue = { message: record.turnError };
+								this.automaticContinuationBlocked = true;
+							}
+							this.forgetResolvedDrafts(record.messages!);
 							this.incompleteUsageIds.clear();
 							this.tail = [];
 						});
@@ -543,15 +621,19 @@ export class SessionModel {
 					});
 				}
 			}
-			const res = await this.fetch(`/api/chats/${encodeURIComponent(this.chatId)}/stream`, {
-				signal: controller.signal,
-			});
+			const res = await this.fetchView(`/api/chats/${encodeURIComponent(this.chatId)}/stream`, controller.signal, !allowRecovery);
 			if (this.consumeAbort !== controller) return;
 			if (!res.ok) throw new Error((await res.text()) || "Failed to attach to the running turn.");
-			await this.consumeStream(res, controller);
+			await this.consumeStream(res, controller, allowRecovery);
 		} catch (err) {
-			if (this.consumeAbort !== controller || (err as Error).name === "AbortError") return; // a newer consume won
-			this.setError((err as Error).message);
+			if (this.consumeAbort !== controller || controller.signal.aborted) return; // intentionally cancelled
+			// A failed record read can leave the optimistic answer in the tail.
+			// Restore its Submit affordance; the next attempt reconciles first.
+			this.mutate(() => {
+				this.tail = this.tail.filter(m => !this.unconfirmedAnswers.has(m.id));
+				this.unconfirmedAnswers.clear();
+			});
+			this.setError(!allowRecovery && err instanceof StreamReadError ? STREAM_DROPPED : (err as Error).message);
 			this.setStatus("error");
 		}
 	}
@@ -562,13 +644,51 @@ export class SessionModel {
 	 * POST + consume. Ready-gated: one turn per client at a time (the
 	 * server's 409 + identity retry covers the wake-race window).
 	 */
-	async send(input: ChatInput): Promise<void> {
-		if (!this.readyRef) return;
+	async send(input: ChatInput, onAccepted?: () => void, questionKey?: string): Promise<boolean> {
+		const recovering = this.statusValue === "error";
+		if (!this.readyRef && !recovering) return false;
+		const subject = input.type === "answer" ? pendingQuestionOf([...this.base, ...this.tail]) : null;
+		// A render-scoped answer must not move to another occurrence sharing
+		// its id. This identity is local only; the server's wire is unchanged.
+		if (input.type === "answer" && questionKey !== undefined &&
+			(subject?.key !== questionKey || subject.toolCallId !== input.toolCallId)) return false;
+		const expectedKey = questionKey ?? (input.type === "answer" && subject?.toolCallId === input.toolCallId ? subject.key : undefined);
 		this.consumeAbort?.abort();
 		const controller = new AbortController();
 		this.consumeAbort = controller;
+		this.latestRequest = controller;
 		this.setError(null);
 		this.setStatus("submitted");
+		if (recovering && input.type === "answer") {
+			try {
+				const res = await this.fetch(`/api/chats/${encodeURIComponent(this.chatId)}`, { signal: controller.signal });
+				if (this.consumeAbort !== controller) return false;
+				if (!res.ok) throw new Error((await res.text()) || "An error occurred.");
+				const record = await res.json() as { messages?: LhMessage[]; turnInFlight?: boolean; turnError?: string };
+				if (this.consumeAbort !== controller) return false;
+				// No verified record/liveness: retain the draft and never guess
+				// whether a lost acknowledgement meant the input was accepted.
+				if (!Array.isArray(record.messages) || typeof record.turnInFlight !== "boolean") throw new Error("An error occurred.");
+				this.setMessages(record.messages, record.turnError);
+				if (record.turnInFlight) {
+					await this.resumeStream(false);
+					return false;
+				}
+				const current = pendingQuestionOf(record.messages);
+				if (current?.toolCallId !== input.toolCallId || (expectedKey !== undefined && current.key !== expectedKey)) {
+					// The call already resolved, or no longer owns the dock. Adopt
+					// truth, never POST that answer a second time.
+					this.setStatus("ready");
+					return false;
+				}
+			} catch (err) {
+				if (this.consumeAbort !== controller || controller.signal.aborted) return false;
+				this.setError((err as Error).message);
+				this.setStatus("error");
+				return false;
+			}
+		}
+		if (input.type !== "continue") this.automaticContinuationBlocked = false;
 		// The optimistic appends — exactly the messages the server's
 		// write-ahead will persist (inputAppends), with LOCAL ids so
 		// adoption can tell them from the record's absorbed copies.
@@ -585,11 +705,14 @@ export class SessionModel {
 			optimistic.push({ ...newNextMessage(), id: localId() });
 		} else if (input.type === "answer") {
 			const tool = pendingCallTool([...this.base, ...this.tail], input.toolCallId) ?? "quiz";
-			optimistic.push({ ...newAnswerResult(input.toolCallId, tool, input.answer), id: localId() });
+			const result = { ...newAnswerResult(input.toolCallId, tool, input.answer), id: localId() };
+			optimistic.push(result);
+			this.unconfirmedAnswers.set(result.id, expectedKey ?? input.toolCallId);
 		}
 		if (optimistic.length > 0) this.mutate(() => {
 			this.tail = [...this.tail, ...optimistic];
 		});
+		let accepted = false;
 		try {
 			// SUBMITS ARE NOT ABORTABLE BY VIEW TEARDOWN (owner, 2026-10-10 —
 			// the dead-session-start postmortem): the POST must NOT ride
@@ -605,16 +728,24 @@ export class SessionModel {
 			// connection is Diet A's whole job.
 			const res = await this.postInputEvent(input);
 			if (res.status === 409) {
-				this.setError("A turn is already running — try again in a moment.");
-				this.setStatus("error");
-				return;
+				throw new Error("A turn is already running — try again in a moment.");
 			}
 			if (!res.ok) {
-				// Refusal envelopes (503 BYOK/key gates) and 400s: the RAW body
-				// text rides the error message — the banner shows it, and the
-				// page's refusal flow JSON-parses the envelope out of it.
-				throw new Error((await res.text()) || `The send failed (${res.status}).`);
+				// Keep model/key refusal envelopes verbatim: the page's refusal
+				// flow parses them. Retry's 400s are ordinary user-facing
+				// guidance, so show their error text without JSON syntax.
+				let message = (await res.text()) || `The send failed (${res.status}).`;
+				if (input.type === "retry" && res.status === 400) {
+					try {
+						const refusal = JSON.parse(message) as { error?: unknown } | null;
+						if (typeof refusal?.error === "string" && refusal.error.length > 0) message = refusal.error;
+					} catch { /* Non-envelope failures keep their original text. */ }
+				}
+				throw new Error(message);
 			}
+			accepted = true;
+			// Opening-message handover ends at acceptance, not stream completion.
+			onAccepted?.();
 			// CONNECTION DIET B (owner, 2026-10-10 — parallel-session freeze
 			// postmortem): the POST acknowledges and closes; there is no stream
 			// on this response to consume. Attach through the SAME reattach wire
@@ -626,12 +757,37 @@ export class SessionModel {
 			// A stop() or a newer send/consume won while the ack was in
 			// flight: the turn is live server-side either way — do not attach
 			// a stream from a view that is gone or superseded.
-			if (this.consumeAbort !== controller) return;
+			if (this.consumeAbort !== controller) return true;
 			await this.resumeStream(true);
+			return true;
 		} catch (err) {
-			if ((err as Error).name === "AbortError") return; // stop() or a newer consume won
+			const failedOpening = input.type === "text" && onAccepted !== undefined && !accepted;
+			if (failedOpening) {
+				// The POST outlives stop(), including StrictMode's cleanup. Remove
+				// only its own failed optimistic bubble even if a newer request
+				// won; never touch canonical messages or another attempt's tail.
+				const ids = new Set(optimistic.map(m => m.id));
+				this.mutate(() => { this.tail = this.tail.filter(m => !ids.has(m.id)); });
+			}
+			const detachedOpening = failedOpening && this.consumeAbort === null && this.latestRequest === controller;
+			if ((this.consumeAbort !== controller || controller.signal.aborted) && !detachedOpening) return accepted;
+			// A detached opening refusal must still reach the replayed mount's
+			// existing setup recovery. A newer send/reattach ALWAYS owns errors
+			// and status instead, even if that request has since been stopped.
+			// Ordinary text and answer teardown behavior stays unchanged.
+			if (input.type === "answer") {
+				const ids = new Set(optimistic.map(m => m.id));
+				this.mutate(() => {
+					this.tail = this.tail.filter(m => !ids.has(m.id));
+					for (const id of ids) this.unconfirmedAnswers.delete(id);
+				});
+			}
 			this.setError((err as Error).message);
 			this.setStatus("error");
+			// true means we observed this POST's acknowledgment. false does
+			// NOT prove non-delivery: a network failure may hide acceptance.
+			// Opening-message callers restore a draft, never automatically retry.
+			return accepted;
 		}
 	}
 
@@ -679,9 +835,9 @@ export class SessionModel {
 
 	/** The answer path (the dock): the answer IS the question call's tool
 	 *  result (fork 1), riding as its input event. */
-	submitAnswer(tool: string, toolCallId: string, output: QuestionAnswerData): Promise<void> {
+	submitAnswer(tool: string, toolCallId: string, output: QuestionAnswerData, questionKey?: string): Promise<void> {
 		void tool;
-		return this.send({ type: "answer", toolCallId, answer: output });
+		return this.send({ type: "answer", toolCallId, answer: output }, undefined, questionKey).then(() => undefined);
 	}
 
 	/** The dismissal path (owner design 2026-10-03, "A2"): the skipped
@@ -690,8 +846,10 @@ export class SessionModel {
 	 * user's choice; the next plain send is the wake. On failure the
 	 * durable record wins: the error surfaces, the record-changed sync
 	 * (or any later refetch) replaces the optimistic append with truth. */
-	async dismissQuestion(toolCallId: string, answer: QuestionAnswerData): Promise<void> {
+	async dismissQuestion(toolCallId: string, answer: QuestionAnswerData, questionKey?: string): Promise<void> {
 		if (!this.readyRef) return;
+		const subject = pendingQuestionOf([...this.base, ...this.tail]);
+		if (questionKey !== undefined && (subject?.key !== questionKey || subject.toolCallId !== toolCallId)) return;
 		const tool = pendingCallTool([...this.base, ...this.tail], toolCallId) ?? "quiz";
 		this.mutate(() => {
 			this.tail = [...this.tail, { ...newAnswerResult(toolCallId, tool, answer), id: localId() }];
@@ -740,10 +898,34 @@ export class SessionModel {
 		this.setStatus("ready");
 	}
 
+	/** Submission snapshots outlive the dock, not the session mount. */
+	questionDraft(questionKey: string): QuestionDraft | undefined {
+		return this.questionDrafts.get(questionKey);
+	}
+
+	saveQuestionDraft(questionKey: string, draft: Partial<QuestionDraft>): void {
+		this.questionDrafts.set(questionKey, { ...this.questionDrafts.get(questionKey), ...draft });
+	}
+
+	private forgetResolvedDrafts(record: readonly LhMessage[]): void {
+		const pendingKey = pendingQuestionOf(record)?.key;
+		for (const key of this.questionDrafts.keys()) {
+			if (key !== pendingKey) this.questionDrafts.delete(key);
+		}
+		for (const [id, key] of this.unconfirmedAnswers) {
+			if (key !== pendingKey) this.unconfirmedAnswers.delete(id);
+		}
+	}
+
 	/** Full snapshot swap (the idle settle sync — server canon). */
-	setMessages(record: LhMessage[]): void {
+	setMessages(record: LhMessage[], turnError?: string): void {
 		this.mutate(() => {
 			this.base = record;
+			if (turnError !== undefined) {
+				this.errorValue = { message: turnError };
+				this.automaticContinuationBlocked = true;
+			}
+			this.forgetResolvedDrafts(record);
 			this.incompleteUsageIds.clear();
 			this.tail = [];
 			this.streamingMessageId = null; // the tail (and its slot) is gone
@@ -763,10 +945,19 @@ export class SessionModel {
 		if (baseAbsorbed) return; // not a pure append — the idle full sync is the net
 		this.mutate(() => {
 			this.base = record;
+			this.forgetResolvedDrafts(record);
 			this.tail = this.tail.filter((m) => !absorbed(m, record));
 		});
 	}
 
+	/** Automatic mount/sync continuation is never permission to retry a
+	 * failed turn. Read current model truth, not a stale React closure. */
+	async continueIfOwed(record: readonly LhMessage[]): Promise<void> {
+		if (this.statusValue === "ready" && !this.automaticContinuationBlocked && this.getState().error === null && needsContinuation(record)) {
+			await this.send({ type: "continue" });
+		}
+	}
+
 	/** The mount/sync continuation fold (native-messages.ts). */
 	static needsContinuation = needsContinuation;
 

components/session-find-dom.ts

@@ -4,7 +4,7 @@ import { findSessionTextMatches } from "@/src/core";
  * hidden/unmounted sections do not. Never walk embedded documents or drafts.
  * Do NOT exclude aria-hidden globally: KaTeX's VISIBLE HTML uses it too. */
 const EXCLUDED = [
-	"script", "style", "noscript", "textarea", "input", "select", "iframe", "canvas",
+	"script", "style", "noscript", "textarea", "input", "select", "iframe", "canvas", '[contenteditable="true"]',
 	"title", "defs", "metadata", "desc", ".katex-mathml", ".sr-only", "[hidden]",
 	"[data-session-find-exclude]", "[data-lh-menu]", '[role="menu"]', '[role="dialog"]', '[role="tooltip"]',
 ].join(",");

components/session-overlay.tsx

@@ -9,6 +9,7 @@ import { fitGraphView, fitZoomFor, zoomedGraphView, type Viewport } from "@/comp
 import { renderMermaid } from "@/components/mermaid-render";
 import { MermaidError } from "@/components/mermaid-error";
 import { Hint } from "@/components/ui/hint";
+import { SvgImage } from "@/components/artifacts/svg-image";
 
 /**
  * SESSION-SCOPED OVERLAYS (owner wave, 2026-09-19): the "fullscreen"
@@ -272,22 +273,24 @@ export function MermaidOverlay({
 										: "transform 180ms ease-out, opacity 160ms ease-out",
 							}}
 						>
-							{/* data-lh-overlay-chart: globals.css pins the svg to the
-							    wrapper's width (kills mermaid's inline max-width cap)
-							    so the wrapper IS the natural-size box the fit math
-							    centers. FIGURE MODE: a white stage (the figure's
-							    backing law — models draw for a white page) with the
-							    caller's invert filter riding it, exactly like the
-							    in-card holder. */}
-							<div
-								data-lh-overlay-chart
-								className={cn(
-									"[&_svg]:h-auto [&_svg]:w-full",
-									rawSvg !== undefined && "bg-white",
-								)}
-								style={rawSvg !== undefined && inverted ? { filter: "invert(1) hue-rotate(180deg)" } : undefined}
-								dangerouslySetInnerHTML={{ __html: svg }}
-							/>
+							{/* Figures share the card's image boundary and white backing.
+							    Mermaid keeps its inline renderer; globals.css removes
+							    its max-width cap so it fills the natural-size box. */}
+							{rawSvg !== undefined ? (
+								<div
+									data-lh-overlay-chart
+									className="bg-white"
+									style={inverted ? { filter: "invert(1) hue-rotate(180deg)" } : undefined}
+								>
+									<SvgImage svg={svg} className="block h-auto w-full" />
+								</div>
+							) : (
+								<div
+									data-lh-overlay-chart
+									className="[&_svg]:h-auto [&_svg]:w-full"
+									dangerouslySetInnerHTML={{ __html: svg }}
+								/>
+							)}
 						</div>
 						<div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-2">
 							<span className="text-xs text-muted-foreground/60">{t("Drag to pan · scroll to zoom")}</span>

components/session.ts

@@ -22,16 +22,18 @@ export interface UseChatSessionOptions {
 	chatId: string;
 	/** The native record seed (server-rendered page or a full sync). */
 	initialMessages: LhMessage[];
+	/** Transient settlement failure retained by the server, not the transcript. */
+	initialError?: string;
 	/** Reattach on mount: a turn is running server-side with no live view. */
 	initiallyInFlight?: boolean;
 }
 
-export function useChatSession({ chatId, initialMessages, initiallyInFlight }: UseChatSessionOptions) {
+export function useChatSession({ chatId, initialMessages, initialError, initiallyInFlight }: UseChatSessionOptions) {
 	// The model is per-mount (chatId-keyed component); onChange forces the
 	// re-render. The ref pattern keeps it stable across renders.
 	const modelRef = useRef<SessionModel | null>(null);
 	if (modelRef.current === null) {
-		modelRef.current = new SessionModel({ chatId, initialMessages });
+		modelRef.current = new SessionModel({ chatId, initialMessages, initialError });
 	}
 	const model = modelRef.current;
 	// The render VERSION — bumped by every model change, so the state memo
@@ -100,22 +102,25 @@ export function useChatSession({ chatId, initialMessages, initiallyInFlight }: U
 		[model],
 	);
 
-	const send = useCallback((input: ChatInput) => void model.send(input), [model]);
+	const send = useCallback((input: ChatInput, onAccepted?: () => void) => model.send(input, onAccepted), [model]);
+	const continueIfOwed = useCallback((record: readonly LhMessage[]) => void model.continueIfOwed(record), [model]);
 	const steer = useCallback((text: string) => void model.steer(text), [model]);
 	const submitAnswer = useCallback(
-		(tool: string, toolCallId: string, output: QuestionAnswerData) =>
-			void model.submitAnswer(tool, toolCallId, output),
+		(tool: string, toolCallId: string, output: QuestionAnswerData, questionKey?: string) =>
+			void model.submitAnswer(tool, toolCallId, output, questionKey),
 		[model],
 	);
 	const dismissQuestion = useCallback(
-		(toolCallId: string, answer: QuestionAnswerData) => void model.dismissQuestion(toolCallId, answer),
+		(toolCallId: string, answer: QuestionAnswerData, questionKey?: string) => void model.dismissQuestion(toolCallId, answer, questionKey),
 		[model],
 	);
 	const dismissProblem = useCallback(
 		(problemCallId: string) => void model.dismissProblem(problemCallId),
 		[model],
 	);
-	const setMessages = useCallback((record: LhMessage[]) => model.setMessages(record), [model]);
+	const questionDraft = useCallback((questionKey: string) => model.questionDraft(questionKey), [model]);
+	const saveQuestionDraft = useCallback((questionKey: string, draft: Parameters<SessionModel["saveQuestionDraft"]>[1]) => model.saveQuestionDraft(questionKey, draft), [model]);
+	const setMessages = useCallback((record: LhMessage[], turnError?: string) => model.setMessages(record, turnError), [model]);
 	const adoptRecord = useCallback((record: LhMessage[]) => model.adoptRecord(record), [model]);
 	const stop = useCallback(() => model.stop(), [model]);
 	const clearError = useCallback(() => model.clearError(), [model]);
@@ -124,15 +129,19 @@ export function useChatSession({ chatId, initialMessages, initiallyInFlight }: U
 	return {
 		messages: state.messages,
 		nativeMessages: state.nativeMessages,
+		hasConfirmedConversation: state.hasConfirmedConversation,
 		contextTokens: state.contextTokens,
 		status: state.status,
 		error: state.error,
 		steerQueue: state.steerQueue,
 		send,
+		continueIfOwed,
 		steer,
 		submitAnswer,
 		dismissQuestion,
 		dismissProblem,
+		questionDraft,
+		saveQuestionDraft,
 		setMessages,
 		adoptRecord,
 		stop,

components/settings-signal.ts

@@ -20,7 +20,7 @@ export const SETTINGS_SAVED_EVENT = "lh:settings-saved";
 // "keys" joined the roster (zero-keys wave, 2026-09-25): keys-section
 // dispatches it after save AND delete — deletions used to be invisible to
 // the zero-keys pill and the setup dialog's auto-advance.
-export type SettingsSection = "general" | "keys" | "agent" | "models" | "appearance" | "graph" | "compaction";
+export type SettingsSection = "general" | "keys" | "agent" | "models" | "appearance" | "graph" | "compaction" | "dictation" | "claudeCode";
 
 /** Writers call this after the PUT resolves ok — never before (a failed
  *  write notifies nothing; the record is unchanged). */
@@ -47,4 +47,4 @@ export function useSettingsSaved(handler: (section: SettingsSection) => void): v
 	const saved = useRef(handler);
 	saved.current = handler;
 	useEffect(() => onSettingsSaved((section) => saved.current(section)), []);
-}
+}

components/settings/agent-section.tsx

@@ -57,6 +57,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { MenuShell } from "@/components/menu-shell";
 import { useSettingsSaved } from "@/components/settings-signal";
 import { defaultOrderLevel, populateLevel } from "@/components/thinking-default";
+import { useModelCatalog } from "@/components/model-catalog";
+import { Hint } from "@/components/ui/hint";
 import type React from "react";
 import {
 	COMPACTION_THRESHOLD_FLOOR,
@@ -65,7 +67,6 @@ import {
 	type AgentSettings,
 	type CompactionSettings,
 	type GraphSettings,
-	type ModelCatalogEntry,
 	type ModelSlotName,
 	type ModelsSettings,
 } from "@/src/core";
@@ -73,8 +74,7 @@ import type { ThinkingLevel } from "@earendil-works/pi-agent-core";
 import { prettyModel } from "@/components/usage-format";
 import { cn } from "@/lib/utils";
 import { ZapIcon } from "lucide-react";
-import { Hint } from "@/components/ui/hint";
-import { SettingsGroup, SettingsRow, Toggle, CommitInput } from "./controls.tsx";
+import { SettingsGroup, SettingsRow, SettingsMenuTrigger, Toggle, CommitInput } from "./controls.tsx";
 import { ModelMenuList, ThinkingMenuList } from "./model-menu";
 import { ChatGPTBackgroundAccess } from "./chatgpt-connection";
 import { NativeSubscriptionBackgroundAccess } from "./subscription-connections";
@@ -105,15 +105,6 @@ interface SegmentInfo {
 	shared: boolean;
 }
 
-/** The GET /api/models response fields this section consumes. */
-interface ModelsBody {
-	models: ModelCatalogEntry[];
-	/** The three tiers' RESOLVED pins (BYOK: NULL per unset tier — no
-	 *  factory floor) — machinery only (the thinking list fallback); the
-	 *  rows' displays read the record override, never a phantom pin. */
-	slots: Record<ModelSlotName, { model: { provider: string; id: string }; thinkingLevel?: string } | null>;
-}
-
 /** Compose: one tool toggled, the rest of the section carried verbatim.
  *  Pure — exported for tests. */
 export function composeTool(agent: AgentSettings | undefined, id: string, on: boolean): AgentSettings {
@@ -247,8 +238,10 @@ function MenuTrigger({
 	onClick,
 	widthClass,
 	disabled,
+	hint,
 }: {
 	value: string;
+	hint?: string;
 	/** What the trigger shows when there is no override ("Default"). */
 	emptyLabel: string;
 	ariaLabel: string;
@@ -264,9 +257,9 @@ function MenuTrigger({
 	disabled?: boolean;
 }) {
 	const { t } = useI18n();
-	return (
-		<button
-			type="button"
+	const button = (
+		<SettingsMenuTrigger
+			value={t(value || emptyLabel)}
 			aria-label={ariaLabel}
 			aria-expanded={open}
 			disabled={disabled}
@@ -274,16 +267,11 @@ function MenuTrigger({
 			onClick={() => {
 				if (!disabled) onClick();
 			}}
-			className={`flex h-7 max-w-full items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors ${
-				disabled ? "cursor-not-allowed" : "hover:border-muted-foreground/50"
-			} ${widthClass}`}
-		>
-			<span className="min-w-0 flex-1 truncate">{t(value || emptyLabel)}</span>
-			<span aria-hidden className="text-muted-foreground">
-				▾
-			</span>
-		</button>
+			unavailable={disabled}
+			className={widthClass}
+		/>
 	);
+	return hint ? <Hint label={hint}>{button}</Hint> : button;
 }
 
 /* The section's dropdowns all mount the shared MenuShell (fix wave chunk
@@ -319,19 +307,19 @@ export function AgentSection({
 	onCompactionChange: (next: CompactionSettings) => void;
 }) {
 	const { t } = useI18n();
-	const [catalog, setCatalog] = useState<ModelCatalogEntry[] | null>(null);
 	const [savingModels, setSavingModels] = useState(false);
 	const [modelsError, setModelsError] = useState<string | null>(null);
 	const updateModels = async (next: ModelsSettings) => {
 		if (savingModels) return;
-		setSavingModels(true); setModelsError(null);
+		setSavingModels(true);
+		setModelsError(null);
 		try { await onModelsChange(next); }
 		catch { setModelsError("Could not save model settings"); }
 		finally { setSavingModels(false); }
 	};
-	/** The three tiers' resolved pins — GET /api/models `slots`. The rows'
-	 *  Default hints and thinking lists resolve from it. */
-	const [slots, setSlots] = useState<ModelsBody["slots"] | null>(null);
+	const { catalog: body, failed: catalogFailed, refresh: refreshCatalog } = useModelCatalog();
+	const catalog = body?.models;
+	const slots = body?.slots;
 	/** The live search state (/api/search) — the row's reason line. */
 	const [search, setSearch] = useState<{ available: boolean; engine: string | null; reason: string } | null>(null);
 	/** Which search engines have a key (/api/keys) — the no-keys-anywhere
@@ -366,28 +354,9 @@ export function AgentSection({
 			.catch(() => {});
 	}, []);
 
-	// The catalog (federated: keyed providers only), the resolved slots,
-	// the prompt segments, and the search engines' key presence — one
-	// fetch each per section mount. The models read ALSO re-runs on the
-	// cross-surface signal (fix wave: another surface's write re-reads
-	// into the slot rows live).
-	const modelsRequest = useRef(0);
-	const modelsMounted = useRef(false);
-	const readModels = useCallback((connectionChanged = false) => {
-		const request = ++modelsRequest.current;
-		if (connectionChanged) setCatalog(null);
-		fetch("/api/models")
-			.then((r) => { if (!r.ok) throw new Error("Catalog unavailable"); return r.json(); })
-			.then((body: ModelsBody) => {
-				if (!modelsMounted.current || request !== modelsRequest.current) return;
-				setCatalog(body.models);
-				setSlots(body.slots);
-			})
-			.catch(() => { if (modelsMounted.current && request === modelsRequest.current) setCatalog(null); });
-	}, []);
-
+	// The shared catalog seeds the first frame and refreshes per mount and
+	// keys/models signal. Settings props still own saved selections/levels.
 	useSettingsSaved((section) => {
-		if (section === "models" || section === "keys") readModels(section === "keys");
 		// THE state-echo root cause: the prompt switches write through the
 		// agent section, but this view (the toggles' truth) never re-read —
 		// the settings-saved law (every reader re-reads) was missing this
@@ -396,8 +365,6 @@ export function AgentSection({
 	});
 
 	useEffect(() => {
-		modelsMounted.current = true;
-		readModels();
 		fetch("/api/settings/prompts")
 			.then((r) => r.json())
 			.then((body: { prober: SegmentInfo[]; teacher: SegmentInfo[] }) => setPrompts(body))
@@ -413,7 +380,6 @@ export function AgentSection({
 				setEngineKeys(present);
 			})
 			.catch(() => {});
-		return () => { modelsMounted.current = false; modelsRequest.current++; };
 	}, []);
 
 	// The reason line re-reads /api/search AFTER an engine write lands —
@@ -657,9 +623,6 @@ export function AgentSection({
 					const chosen = coord ? catalog?.find((m) => m.id === coord.id && m.provider === coord.provider) : undefined;
 					const levels = chosen ? chosen.supportedLevels : THINKING_LEVELS;
 					const thisMenuOpen = openMenu?.target === slot ? openMenu.kind : null;
-					// Vision slots pick from image-capable models only.
-					const slotCatalog =
-						slot === "vision" ? catalog?.filter((m) => m.input.includes("image")) : catalog;
 					return (
 						<SettingsRow
 							key={slot}
@@ -720,9 +683,10 @@ export function AgentSection({
 										menuClass="flex w-[22rem] flex-col rounded-xl border border-border bg-card p-2 text-xs shadow-xl"
 									>
 										<ModelMenuList
-											models={slotCatalog ?? undefined}
+											models={catalog ?? undefined}
 											effectiveId={modelId}
 											effectiveProvider={provider}
+											vision={slot === "vision"}
 											onPick={(entry) => {
 												// Auto-populate (chunk 2, owner: "populate everywhere"): the
 												// fresh pick writes a level — the stored one rides as-is

components/settings/appearance-section.tsx

@@ -43,7 +43,7 @@ import { MenuShell } from "@/components/menu-shell";
 import { Hint } from "@/components/ui/hint";
 import { useAppearance } from "./appearance.tsx";
 import { FontMenuList } from "./model-menu";
-import { CommitInput, SettingsRow, ThinSelect, Toggle } from "./controls.tsx";
+import { CommitInput, SettingsMenuTrigger, SettingsRow, ThinSelect, Toggle } from "./controls.tsx";
 
 /** The factory reading family — the DEFAULT row's identity (unset =
  *  this). Exported for tests. */
@@ -213,29 +213,22 @@ export function AppearanceSection({
 				testid="row-font"
 			>
 				<span ref={fontMenuOpen ? menuAnchorRef : undefined} className="relative flex items-center gap-2">
-					{/* The MenuTrigger look (agent-section's collapsed
-					    select — it lives unexported there, so the
-					    classes ride inline; the searchable machine is
-					    the shared part). The tooltip rides the CLOSED
-					    button ONLY (owner ruling 2026-09-26: never while
+					{/* The shared Agent/Appearance collapsed-menu trigger.
+					    The tooltip rides the CLOSED button ONLY
+					    (owner ruling 2026-09-26: never while
 					    the dropdown is out — it popped over the open
 					    menu when the wrap covered the whole anchor
 					    span). */}
 					{(() => {
 						const triggerButton = (
-							<button
-								type="button"
+							<SettingsMenuTrigger
+								value={appearance?.fontFamily || DEFAULT_READING_FONT}
 								aria-label={t("Reading font")}
 								aria-expanded={fontMenuOpen}
 								data-testid="font-trigger"
 								onClick={openFontMenu}
-								className="flex h-7 min-w-20 items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50"
-							>
-								<span className="min-w-0 flex-1 truncate">{appearance?.fontFamily || (language === "ru" ? "Noto Sans" : DEFAULT_READING_FONT)}</span>
-								<span aria-hidden className="text-muted-foreground">
-									▾
-								</span>
-							</button>
+								className="min-w-20"
+							/>
 						);
 						return fontMenuOpen ? (
 							triggerButton

components/settings/chatgpt-connection.tsx

@@ -7,8 +7,10 @@ import type { ChatGPTStatus } from "@/src/core";
 import { ConnectionDialog, ConnectionFooter, ConnectionRow } from "./connection-controls";
 import { Button } from "@/components/ui/button";
 import { Toggle } from "./controls";
+import { useChatGPTBridge } from "./subscription-client";
 
 export const CHATGPT_NOTICE = "LearnHarness stores your ChatGPT account details and credentials in an unencrypted local file on this device. When this connection is used, relevant conversation context, learning material, and tool results are sent directly to OpenAI. ChatGPT plan limits apply; any additional credits are authorized and managed in ChatGPT, not LearnHarness.";
+export function chatGPTNotice(web = false): string { return web ? `${CHATGPT_NOTICE.replace("on this device", "on the machine running LearnHarness")} Complete ChatGPT sign-in in a browser on that same machine.` : CHATGPT_NOTICE; }
 export const CHATGPT_BACKGROUND_HINT = "Background work counts toward your ChatGPT plan usage.";
 const BACKGROUND_LABEL = "Allow background use for all ChatGPT accounts";
 const REVOCATION_WARNING = "Account disconnected locally. Remote revocation could not be confirmed.";
@@ -44,6 +46,8 @@ const Context = createContext({
  * are used; account IDs remain control values, never displayed account labels. */
 export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 	const { t } = useI18n();
+	const bridge = useChatGPTBridge();
+	const web = typeof window !== "undefined" && bridge !== window.lh?.chatgpt;
 	const [status, setStatus] = useState<ChatGPTStatus>(empty);
 	const [dialog, setDialog] = useState<Dialog | null>(null);
 	const [busy, setBusy] = useState(false);
@@ -82,14 +86,14 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 			if (attempt.backgroundDirty && next.allowBackgroundUse !== attempt.background) {
 				operation.current = "change";
 				const request = ++statusSequence.current;
-				const result: unknown = await window.lh!.chatgpt!.consent(attempt.background);
+				const result: unknown = await bridge!.consent(attempt.background);
 				if (!owns(attempt)) return;
 				if (!isStatus(result)) { setError(replyError(result)); finish(attempt); return; }
 				replyFailure = result.error;
 				let saved: ChatGPTStatus | null;
 				if (request !== statusSequence.current) {
 					const refresh = ++statusSequence.current;
-					const value: unknown = await window.lh!.chatgpt!.status();
+					const value: unknown = await bridge!.status();
 					if (!owns(attempt)) return;
 					saved = refresh === statusSequence.current ? publishStatus(value) : statusRef.current;
 				} else saved = publishStatus(result);
@@ -123,7 +127,6 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 	};
 	useEffect(() => {
 		mounted.current = true;
-		const bridge = window.lh?.chatgpt;
 		const refresh = async () => {
 			const request = ++statusSequence.current;
 			try {
@@ -134,7 +137,7 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 		void refresh();
 		const off = bridge?.onChange(() => void refresh());
 		return () => { mounted.current = false; generation.current++; loginAttempt.current = null; off?.(); };
-	}, []);
+	}, [bridge]);
 
 	const managed = dialog?.kind === "manage" ? status.accounts.find((a) => a.id === dialog.accountId) ?? dialog.account : undefined;
 	const managedPresent = !!managed && status.accounts.some((a) => a.id === managed.id);
@@ -164,13 +167,13 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 			// Keep cancellation serialized even after login's pending IPC reply.
 			operation.current = "cancel"; setBusy(true);
 			const request = ++statusSequence.current;
-			void window.lh?.chatgpt?.cancel().then(async (value: unknown) => {
+			void bridge?.cancel().then(async (value: unknown) => {
 				if (!mounted.current || generation.current !== intent) return;
 				if (!isStatus(value)) { setError(replyError(value)); return; }
 				let next: ChatGPTStatus | null;
 				if (request !== statusSequence.current) {
 					const refresh = ++statusSequence.current;
-					const current: unknown = await window.lh!.chatgpt!.status();
+					const current: unknown = await bridge!.status();
 					if (!mounted.current || generation.current !== intent) return;
 					next = refresh === statusSequence.current ? publishStatus(current) : statusRef.current;
 				} else next = publishStatus(value);
@@ -198,7 +201,7 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 			let next: ChatGPTStatus | null;
 			if (request !== statusSequence.current) {
 				const refresh = ++statusSequence.current;
-				const current: unknown = await window.lh!.chatgpt!.status();
+				const current: unknown = await bridge!.status();
 				if (!mounted.current || intent !== generation.current) return;
 				next = refresh === statusSequence.current ? publishStatus(current) : statusRef.current;
 			} else next = publishStatus(value);
@@ -217,7 +220,6 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 		finally { if (intent === generation.current) { operation.current = null; if (mounted.current) setBusy(false); } }
 	}
 	async function login() {
-		const bridge = window.lh?.chatgpt;
 		const owner = dialogRef.current;
 		if (!bridge || operation.current || !status.available || status.pending || owner?.kind !== "connect") return;
 		const attempt: LoginAttempt = { generation: ++generation.current, dialog: owner, registration, background, backgroundDirty, pending: false, phase: "starting" };
@@ -244,7 +246,6 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 		// No finally: pending OAuth outlives this IPC promise. Only its status
 		// completion, failure, or explicit cancellation releases the attempt.
 	}
-	const bridge = typeof window !== "undefined" ? window.lh?.chatgpt : undefined;
 	const context = {
 		status, busy, error: warning ? null : visibleError, inlineError: dialog || warning ? null : visibleError, warning: dialog?.kind === "warning" ? null : warning,
 		connect: openConnect,
@@ -265,7 +266,7 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 			</> : dialog.kind === "manage" && dialog.confirm ? <div data-testid="chatgpt-disconnect-confirmation">
 				<p className="mt-3 text-sm font-semibold text-red-400">{t(CHATGPT_DISCONNECT_COPY.title)}</p>
 				<p className="mt-3 text-xs text-foreground">{managed?.email || t("ChatGPT account")}</p>
-				<p className="mt-3 text-xs text-muted-foreground">{t(CHATGPT_DISCONNECT_COPY.body)}</p>
+				<p className="mt-3 text-xs text-muted-foreground">{t(web ? CHATGPT_DISCONNECT_COPY.body.replace("from this device", "from the machine running LearnHarness") : CHATGPT_DISCONNECT_COPY.body)}</p>
 				{context.error && <p role="alert" className="mt-3 text-xs text-red-400">{t(context.error)}</p>}
 				<div className="mt-4 flex items-center justify-end gap-2">
 					<Button variant="ghost" size="sm" disabled={busy} onClick={close}>{t("Cancel")}</Button>
@@ -280,7 +281,7 @@ export function ChatGPTUIProvider({ children }: { children: React.ReactNode }) {
 						</select>
 						{registration && <Button variant="ghost" size="xs" disabled={busy} onClick={() => context.manage(registration)}>{t("Manage…")}</Button>}
 					</div>}
-					<p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="chatgpt-privacy-notice">{t(CHATGPT_NOTICE)}</p>
+					<p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="chatgpt-privacy-notice">{t(chatGPTNotice(web))}</p>
 				</> : null}
 				<div className={`mt-4 flex items-center gap-3 text-xs text-foreground ${busy && operation.current === "change" && status.available && !status.pending ? "[&>button:disabled]:cursor-auto" : ""}`} data-testid="chatgpt-global-background">
 					<Toggle label={t(BACKGROUND_LABEL)} checked={dialog.kind === "connect" ? background : status.allowBackgroundUse} disabled={busy || status.pending || !status.available} onChange={(enabled) => {
@@ -331,13 +332,13 @@ function AccountDialog({ children, onClose, busy }: { children: React.ReactNode;
 }
 
 /** Shared compact settings/setup row; account selection precedes the quiet action. */
-export function ChatGPTConnection(_props: { setup?: boolean } = {}) {
+export function ChatGPTConnection({ labelClassName }: { setup?: boolean; labelClassName?: string } = {}) {
 	const { t } = useI18n();
 	const ui = useContext(Context);
 	const active = ui.status.accounts.find((a) => a.id === ui.status.activeId && a.connected);
 	const accounts = ui.status.accounts.filter((a) => a.connected);
 	return <div className="flex flex-col gap-2" data-testid="chatgpt-connection">
-		<ConnectionRow label="ChatGPT" actionTestid={active ? undefined : "chatgpt-login"} action={active ? t("Manage…") : t("Connect")} disabled={!ui.status.available || ui.busy || ui.status.pending} onAction={() => active ? ui.manage(active.id) : ui.connect()}>
+		<ConnectionRow label="ChatGPT" labelClassName={labelClassName} actionTestid={active ? undefined : "chatgpt-login"} action={active ? t("Manage…") : t("Connect")} disabled={!ui.status.available || ui.busy || ui.status.pending} onAction={() => active ? ui.manage(active.id) : ui.connect()}>
 			{active && <select aria-label={t("ChatGPT account")} value={active.id} disabled={ui.busy || ui.status.pending} onChange={(event) => ui.select(event.target.value)} className="min-w-0 rounded-sm border border-border bg-background px-2 py-1 text-xs text-foreground">
 				{accounts.map((a) => <option key={a.id} value={a.id}>{a.email || t("ChatGPT account")}</option>)}
 			</select>}

components/settings/claude-code-status.tsx

@@ -0,0 +1,117 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { CLAUDE_CODE_MINIMUM_VERSION, type ClaudeCodeStatus, type UserSettings } from "@/src/core";
+import { notifySettingsSaved, useSettingsSaved } from "@/components/settings-signal";
+import { Button } from "@/components/ui/button";
+import { Toggle } from "./controls";
+
+export function claudeCodeStatusLabel(status: ClaudeCodeStatus | null): string {
+	switch (status?.state) {
+		case "not-found": return "Not found";
+		case "meets-minimum": return `Version ${status.version} · meets minimum`;
+		case "update-required": return `Version ${status.version} · update required`;
+		default: return "Version could not be checked";
+	}
+}
+
+export function ClaudeCodeInstallationStatus() {
+	const [enabled, setEnabled] = useState(false);
+	const [loaded, setLoaded] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [status, setStatus] = useState<ClaudeCodeStatus | null>(null);
+	const [busy, setBusy] = useState(false);
+	const request = useRef<AbortController | null>(null);
+	const settingsRead = useRef<AbortController | null>(null);
+	const settingsWrite = useRef<AbortController | null>(null);
+
+	const read = useCallback(async () => {
+		settingsRead.current?.abort();
+		const controller = new AbortController();
+		settingsRead.current = controller;
+		setLoaded(false);
+		try {
+			const response = await fetch("/api/settings", { cache: "no-store", signal: controller.signal });
+			if (!response.ok) throw new Error("settings unavailable");
+			const body = await response.json() as { settings: UserSettings | null };
+			if (!controller.signal.aborted) {
+				setEnabled(body.settings?.claudeCode?.enabled === true);
+				setLoaded(true);
+				setError(null);
+			}
+		} catch {
+			if (!controller.signal.aborted) setError("Could not load Claude Code settings.");
+		}
+	}, []);
+	useEffect(() => {
+		void read();
+		return () => { settingsRead.current?.abort(); settingsWrite.current?.abort(); };
+	}, [read]);
+	useSettingsSaved((section) => { if (section === "claudeCode") void read(); });
+
+	const save = async (next: boolean) => {
+		const controller = new AbortController();
+		settingsWrite.current = controller;
+		settingsRead.current?.abort();
+		setSaving(true);
+		setError(null);
+		try {
+			const response = await fetch("/api/settings/claudeCode", { method: "PUT", headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ enabled: next }), signal: controller.signal });
+			if (!response.ok) throw new Error("settings write failed");
+			const body = await response.json() as { settings: UserSettings };
+			if (typeof body.settings?.claudeCode?.enabled !== "boolean") throw new Error("invalid settings response");
+			if (!controller.signal.aborted) {
+				setEnabled(body.settings.claudeCode.enabled);
+				notifySettingsSaved("claudeCode");
+			}
+		} catch {
+			if (!controller.signal.aborted) setError("Could not save Claude Code settings.");
+		} finally {
+			if (!controller.signal.aborted) setSaving(false);
+		}
+	};
+
+	const refresh = useCallback(async () => {
+		if (!enabled) return;
+		request.current?.abort();
+		const controller = new AbortController();
+		request.current = controller;
+		setBusy(true);
+		try {
+			const response = await fetch("/api/claude-code", { cache: "no-store", signal: controller.signal, headers: { "x-learnharness-claude-code": "1" } });
+			if (!response.ok) throw new Error("status unavailable");
+			const value = await response.json() as ClaudeCodeStatus;
+			if (!["not-found", "meets-minimum", "update-required", "version-unchecked"].includes(value.state)
+				|| value.minimumVersion !== CLAUDE_CODE_MINIMUM_VERSION
+				|| (value.version !== null && (typeof value.version !== "string" || !/^\d+\.\d+\.\d+$/.test(value.version)))) throw new Error("invalid status");
+			if (!controller.signal.aborted) setStatus(value);
+		} catch {
+			if (!controller.signal.aborted) setStatus(null);
+		} finally {
+			if (!controller.signal.aborted) setBusy(false);
+		}
+	}, [enabled]);
+	useEffect(() => {
+		if (enabled) void refresh();
+		else { request.current?.abort(); setStatus(null); setBusy(false); }
+		return () => request.current?.abort();
+	}, [enabled, refresh]);
+
+	return <div className="space-y-2" data-testid="claude-code-installation">
+		<div className="flex items-center gap-3">
+			<span className="font-prose text-(length:--lh-prose-size) text-foreground">Claude Code</span>
+			<Toggle label="Claude Code" checked={enabled} disabled={!loaded || saving} onChange={(next) => void save(next)} />
+		</div>
+		{error && <p role="alert" className="text-xs text-red-400">{error}</p>}
+		{enabled && <>
+			<div className="flex flex-wrap items-center gap-3">
+				<span role="status" className="text-xs text-muted-foreground">{busy ? "Checking…" : claudeCodeStatusLabel(status)}</span>
+				<Button type="button" size="xs" variant="outline" className="cursor-pointer disabled:cursor-not-allowed" disabled={busy} onClick={() => void refresh()} data-testid="claude-code-check-again">Check again</Button>
+			</div>
+			<p className="text-xs leading-relaxed text-muted-foreground"><strong className="font-medium">Install and authenticate Claude Code in your terminal, then select a Claude Code model here.</strong> LearnHarness starts it when needed—no background process required.</p>
+			<p className="text-xs leading-relaxed text-muted-foreground">Checks installation/version only—not authentication, model access, or quota. Claude Code controls billing. Requires v{CLAUDE_CODE_MINIMUM_VERSION}+. <a href="https://code.claude.com/docs/en/setup" target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:text-foreground">Setup ↗</a></p>
+			<p className="text-xs leading-relaxed text-muted-foreground">Verify AI claims independently—they may be inaccurate, incomplete, misleading, or outdated.</p>
+		</>}
+	</div>;
+}

components/settings/connection-controls.tsx

@@ -6,12 +6,12 @@ import { createPortal } from "react-dom";
 import { useBackdropDismiss } from "@/components/backdrop-dismiss";
 import { Button } from "@/components/ui/button";
 
-export function ConnectionRow({ label, action, disabled, onAction, children, testid, actionTestid }: { label: string; action: string; disabled: boolean; onAction: () => void; children?: React.ReactNode; testid?: string; actionTestid?: string }) {
-	const { t } = useI18n();
+export function ConnectionRow({ label, action, actionVariant, disabled, onAction, children, testid, actionTestid, labelClassName }: { label: string; action: string; actionVariant?: "outline" | "ghost"; disabled: boolean; onAction: () => void; children?: React.ReactNode; testid?: string; actionTestid?: string; labelClassName?: string }) {
+	const variant = actionVariant ?? (action === "Connect" ? "outline" : "ghost");
 	return <div className="flex flex-wrap items-center gap-3" data-testid={testid}>
-		<span className="font-ui text-xs text-foreground">{label}</span>
+		<span className={labelClassName ?? "font-ui text-xs text-foreground"}>{label}</span>
 		{children}
-		<Button type="button" size="xs" variant={action === t("Connect") ? "outline" : "ghost"} className={`cursor-pointer disabled:cursor-not-allowed ${action === t("Connect") ? "" : "text-muted-foreground hover:text-foreground"}`} data-testid={actionTestid} disabled={disabled} onClick={onAction}>{action}</Button>
+		<Button type="button" size="xs" variant={variant} className={`cursor-pointer disabled:cursor-not-allowed ${variant === "outline" ? "" : "text-muted-foreground hover:text-foreground"}`} data-testid={actionTestid} disabled={disabled} onClick={onAction}>{action}</Button>
 	</div>;
 }
 

components/settings/controls.tsx

@@ -11,7 +11,7 @@ import { useI18n } from "@/components/i18n";
  * control together) and the control itself locks — the row owns the dim.
  */
 
-import { useState, type ReactNode } from "react";
+import { useState, type ComponentPropsWithRef, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 /** A section block: pronounced mono heading + content. */
@@ -68,7 +68,7 @@ export function SettingsRow({
 	className,
 }: {
 	label: string;
-	hint?: string;
+	hint?: ReactNode;
 	children: React.ReactNode;
 	testid?: string;
 	/** Dependency graying, graph-view style: the whole row dims when the
@@ -81,13 +81,37 @@ export function SettingsRow({
 		<div data-testid={testid} className={cn("flex items-center justify-between gap-4 py-1", dimmed && "opacity-40", className)}>
 			<span className="min-w-0">
 				<span className="block font-prose text-(length:--lh-prose-size)">{t(label)}</span>
-				{hint && <span className="block text-xs text-muted-foreground/70">{t(hint)}</span>}
+				{hint && <span className="block text-xs text-muted-foreground/70">{typeof hint === "string" ? t(hint) : hint}</span>}
 			</span>
 			{children}
 		</div>
 	);
 }
 
+/** The existing Agent/Appearance collapsed-menu look, shared with dictation.
+ * `unavailable` preserves callers that gate clicks without native disabling;
+ * `disabled` retains native button semantics where the caller requires them. */
+export function SettingsMenuTrigger({
+	value, unavailable, disabled, className, ...props
+}: Omit<ComponentPropsWithRef<"button">, "value" | "children"> & {
+	value: string;
+	unavailable?: boolean;
+}) {
+	return <button
+		type="button"
+		{...props}
+		disabled={disabled}
+		className={cn(
+			"flex h-7 items-center gap-1 rounded-sm border border-border bg-background px-1.5 font-ui text-xs text-foreground transition-colors",
+			disabled || unavailable ? "cursor-not-allowed" : "hover:border-muted-foreground/50",
+			className,
+		)}
+	>
+		<span className="min-w-0 flex-1 truncate">{value}</span>
+		<span aria-hidden className="text-muted-foreground">▾</span>
+	</button>;
+}
+
 /** The on/off switch — a plain button in the switch role. */
 export function Toggle({
 	checked,

components/settings/keys-section.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { translator, type Translator } from "@/src/core";
-import { useI18n } from "@/components/i18n";
+import { LanguageSelect, useI18n } from "@/components/i18n";
 
 /**
  * The Keys section (wave-5 polish, 2026-09-21 — owner design): a MINIMAL
@@ -27,9 +27,19 @@ import { useI18n } from "@/components/i18n";
  */
 
 import { useEffect, useRef, useState } from "react";
-import { AUTH_KEYS, type AuthKeyStatus } from "@/src/core";
-import { SettingsGroup } from "./controls.tsx";
+import {
+	AUTH_KEYS,
+	CUSTOM_MODEL_DEFAULT_CONTEXT_WINDOW,
+	CUSTOM_MODEL_DEFAULT_MAX_TOKENS,
+	CUSTOM_PROVIDER,
+	normalizeBaseUrl,
+	type AuthKeyStatus,
+	type CustomModel,
+	type CustomModelOverride,
+} from "@/src/core";
+import { SettingsGroup, SettingsRow } from "./controls.tsx";
 import { SubscriptionConnections } from "./subscription-connections.tsx";
+import { ClaudeCodeInstallationStatus } from "./claude-code-status.tsx";
 import { ProviderMenuList } from "./model-menu.tsx";
 import { MenuShell } from "@/components/menu-shell";
 import { notifySettingsSaved } from "@/components/settings-signal";
@@ -47,12 +57,40 @@ interface KeysResponse {
 	providers?: ProviderKeyInfo[];
 }
 
+/** The custom endpoint's non-secret status (GET /api/custom-provider). */
+interface CustomStatus {
+	keyReuseRequired: boolean;
+	revision: string;
+	authMode: "keyless" | "apiKey";
+	keySource: "env" | "file" | "none";
+	baseUrl: string;
+	models: CustomModel[];
+	/** User pins by model id (context / max output / thinking). */
+	overrides: Record<string, CustomModelOverride>;
+	manualModels: string[];
+	keyPresent: boolean;
+}
+
+async function readCustomStatus(inspectKey = false): Promise<CustomStatus> {
+	const response = await fetch(`/api/custom-provider${inspectKey ? "?authMode=apiKey" : ""}`);
+	if (!response.ok) throw new Error("Unable to load custom configuration.");
+	const cp = await response.json() as Partial<CustomStatus>;
+	return { keyReuseRequired: Boolean(cp.keyReuseRequired), revision: response.headers.get("etag") ?? "", authMode: cp.authMode ?? "keyless", keySource: cp.keySource ?? "none", baseUrl: cp.baseUrl ?? "", models: cp.models ?? [], overrides: cp.overrides ?? {}, manualModels: cp.manualModels ?? [], keyPresent: Boolean(cp.keyPresent) };
+}
+
 /** The curated tools group, pinned by id (the catalog owns the copy;
  *  these ids are the contract). Derived from the catalog (search wave,
  *  2026-09-20: the Google CSE pair retired, Tavily + Brave joined) — the
  *  section can never drift from core/auth-keys.ts again. */
 const TOOL_IDS = AUTH_KEYS.map((k) => k.id) as readonly string[];
 
+/** The custom endpoint's synthetic Add-provider entry (offered only while unconfigured). */
+export const CUSTOM_PROVIDER_INFO: ProviderKeyInfo = {
+	id: CUSTOM_PROVIDER.id,
+	envVar: CUSTOM_PROVIDER.envVar,
+	label: CUSTOM_PROVIDER.label,
+};
+
 /** The classification driving the table groups. Pure — exported for
  *  tests. OpenRouter is un-pinned (wave-5 owner ruling): no synthesis,
  *  no special row — it rides the same provider classification. */
@@ -85,6 +123,10 @@ export function classifyKeys(
 	const unknownRows: AuthKeyStatus[] = [];
 	for (const s of statuses) {
 		if (isTool(s.id)) continue;
+		// The custom endpoint's key has its OWN home (the Custom endpoint
+		// section), so it never shows here — not as a provider row, not as an
+		// "other stored variable".
+		if (s.id === CUSTOM_PROVIDER.envVar) continue;
 		if (providerEnv.has(s.id) || (!s.info && providers === undefined)) providerRows.push(s);
 		else if (!s.info) unknownRows.push(s);
 		// (pre-interlude catalogs: a curated-but-unclassified status still
@@ -99,6 +141,14 @@ export function classifyKeys(
 	};
 }
 
+/** A key row names its credential, not whichever provider sorts first.
+ * Pi exposes Zen and Go separately but both read OPENCODE_API_KEY. */
+export function providerKeyLabel(id: string, providers: readonly ProviderKeyInfo[] | undefined): string | undefined {
+	const matches = providers?.filter((p) => p.envVar === id);
+	if (matches?.some((p) => p.id === "opencode") && matches.some((p) => p.id === "opencode-go")) return "OpenCode (Zen / Go)";
+	return matches?.[0]?.label;
+}
+
 /** The minimal status line, e.g. "…ab12 · 64 chars" (" · env" marks an
  *  environment-owned value — the row itself is read-only then). Pure. */
 export function keyStatusLine(status: AuthKeyStatus, t: Translator = translator("en")): string {
@@ -291,7 +341,7 @@ function AddProviderRow({
 				onClick={() => setOpen((v) => !v)}
 				className="flex w-full items-center justify-between gap-3 rounded-sm px-1 py-1.5 text-left font-ui text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
 			>
-				<span>{t("+ Add provider key")}</span>
+				<span>+ Add a provider</span>
 				{addable.length > 0 && <span className="font-mono text-[11px]">{addable.length}</span>}
 			</button>
 			{open && (
@@ -328,6 +378,7 @@ export function KeysSection({
 	const { t } = useI18n();
 	const [statuses, setStatuses] = useState<AuthKeyStatus[] | null>(null);
 	const [providers, setProviders] = useState<ProviderKeyInfo[] | undefined>(undefined);
+	const followedProvider = useRef<string | null>(null);
 	const [loading, setLoading] = useState(true);
 	/** The unfolded row (its id), null = all folded. Seeded by the
 	 *  deep-link (initialRow) and re-followed when it retargets. */
@@ -335,34 +386,49 @@ export function KeysSection({
 	/** The paste editor for a freshly chosen Add-provider target. */
 	const [adding, setAdding] = useState<ProviderKeyInfo | null>(null);
 	const [addError, setAddError] = useState<string | null>(null);
-	const followedProvider = useRef<string | null>(null);
+	/** The custom endpoint's status + whether its connect editor is open. */
+	const [custom, setCustom] = useState<CustomStatus | null>(null);
+	const [addingCustom, setAddingCustom] = useState(false);
 
 	// Escape folds any open editor (unfolded row or the Add-provider paste)
 	// WITHOUT closing the dialog. Claimed at document CAPTURE phase — the
 	// only stopPropagation that outruns both the input's React handler and
 	// the dialog's window-level listener.
 	useEffect(() => {
-		if (openRow === null && adding === null) return;
+		if (openRow === null && adding === null && !addingCustom) return;
 		const onKeyDown = (e: KeyboardEvent) => {
 			if (e.key !== "Escape") return;
+			// A language dropdown above this editor in the dismissal stack owns
+			// the first Escape; do not swallow it at document capture phase.
+			if (document.querySelector('[data-testid="dictation-language-menu"], [data-testid="language-select-sttLanguage-menu"]')) return;
 			e.preventDefault();
 			e.stopPropagation();
 			setOpenRow(null);
 			setAdding(null);
+			setAddingCustom(false);
 		};
 		document.addEventListener("keydown", onKeyDown, true);
 		return () => document.removeEventListener("keydown", onKeyDown, true);
-	}, [openRow, adding]);
+	}, [openRow, adding, addingCustom]);
 
-	const reload = () =>
-		fetch("/api/keys")
-			.then((r) => r.json())
-			.then((body: KeysResponse) => {
-				setStatuses(body.keys ?? []);
-				if (body.providers) setProviders(body.providers);
-			})
-			.catch(() => setStatuses([]))
-			.finally(() => setLoading(false));
+	const reload = async () => {
+		try {
+			const body = (await fetch("/api/keys").then((r) => r.json())) as KeysResponse;
+			setStatuses(body.keys ?? []);
+			if (body.providers) setProviders(body.providers);
+		} catch {
+			setStatuses([]);
+		} finally {
+			setLoading(false);
+		}
+		// Best-effort and independent: the custom endpoint's status must never
+		// blank the provider-key list above if its fetch fails.
+		try {
+			setCustom(await readCustomStatus());
+		} catch {
+			/* custom status unavailable — leave it unset */
+		}
+	};
 
 	useEffect(() => {
 		void reload();
@@ -409,6 +475,17 @@ export function KeysSection({
 		notifySettingsSaved("keys");
 	}
 
+	/** Forget the custom endpoint (config + key server-side), same rhythm as
+	 *  deleteKey: fire, re-read, broadcast so the catalog narrows everywhere. */
+	async function disconnectCustom(revision: string): Promise<string | null> {
+		const res = await fetch("/api/custom-provider", { method: "DELETE", headers: { "content-type": "application/json", "if-match": revision }, body: JSON.stringify({}) }).catch(() => null);
+		if (!res?.ok) return res ? ((await res.json().catch(() => ({}))).error ?? "Disconnect failed.") : "Disconnect failed. Check your connection.";
+		setAddingCustom(false);
+		await reload();
+		notifySettingsSaved("keys");
+		return null;
+	}
+
 	if (loading || statuses === null) {
 		return <p className="px-6 py-5 text-xs text-muted-foreground/70">{t("Loading keys…")}</p>;
 	}
@@ -430,7 +507,7 @@ export function KeysSection({
 				{providerRows.map((status) => (
 					<KeyTableRow
 						key={status.id}
-						label={providers?.find((p) => p.envVar === status.id)?.label ?? status.info?.label ?? status.id}
+						label={providerKeyLabel(status.id, providers) ?? status.info?.label ?? status.id}
 						docsUrl={status.info?.docsUrl}
 						status={status}
 						expanded={openRow === status.id}
@@ -445,12 +522,50 @@ export function KeysSection({
 						testid={`key-${status.id.toLowerCase()}`}
 					/>
 				))}
+				{custom?.baseUrl && (
+					<CustomEndpointRow
+						status={custom}
+						expanded={addingCustom}
+						onToggle={() => setAddingCustom((v) => !v)}
+					/>
+				)}
+				{addingCustom && (
+					<CustomEndpointEditor
+						revision0={custom?.revision ?? ""}
+						authMode0={custom?.authMode ?? "keyless"}
+						keySource0={custom?.keySource ?? "none"}
+						keyReuseRequired0={custom?.keyReuseRequired ?? false}
+						onReload={async () => { await reload(); setAddingCustom(false); }}
+						baseUrl0={custom?.baseUrl ?? ""}
+						keyPresent={custom?.keyPresent ?? false}
+						models={custom?.models ?? []}
+						overrides={custom?.overrides ?? {}}
+						manualModels0={custom?.manualModels ?? []}
+						onSaved={async () => {
+							setAddingCustom(false);
+							await reload();
+							notifySettingsSaved("keys");
+						}}
+						onPinsSaved={async () => {
+							await reload();
+							notifySettingsSaved("keys");
+						}}
+						onDelete={disconnectCustom}
+						onCancel={() => setAddingCustom(false)}
+					/>
+				)}
 				{providers !== undefined && (
 					<AddProviderRow
-						addable={addable}
+						addable={custom?.baseUrl ? addable : [...addable, CUSTOM_PROVIDER_INFO]}
 						onPick={(p) => {
-							setAdding(p);
 							setAddError(null);
+							if (p.id === CUSTOM_PROVIDER.id) {
+								setAdding(null);
+								setAddingCustom(true);
+							} else {
+								setAddingCustom(false);
+								setAdding(p);
+							}
 						}}
 					/>
 				)}
@@ -472,7 +587,11 @@ export function KeysSection({
 				<SubscriptionConnections />
 			</SettingsGroup>
 
-			{(["Dictation", "Search"] as const).map((label) => <SettingsGroup key={label} label={label} testid={label === "Dictation" ? "group-dictation" : "group-search"}>
+			<SettingsGroup label={t("External CLI")} testid="group-external-cli">
+				<ClaudeCodeInstallationStatus />
+			</SettingsGroup>
+
+			{(["Dictation", "Search"] as const).map((label) => <SettingsGroup key={label} label={t(label)} testid={label === "Dictation" ? "group-dictation" : "group-search"}>
 				{toolRows.filter((status) => label === "Dictation" ? status.id === "DEEPGRAM_API_KEY" : status.id !== "DEEPGRAM_API_KEY").map((status) => (
 					<KeyTableRow
 						key={status.id}
@@ -491,6 +610,17 @@ export function KeysSection({
 						testid={`key-${status.id.toLowerCase()}`}
 					/>
 				))}
+				{label === "Dictation" && <>
+					<SettingsRow label={t("Speech recognition language")} testid="row-dictation-language"><LanguageSelect field="sttLanguage" /></SettingsRow>
+					<p data-testid="dictation-setup-hint" className="px-1 text-[11px] leading-relaxed text-muted-foreground/70">
+						Create a <a
+							href="https://console.deepgram.com/"
+							target="_blank"
+							rel="noreferrer"
+							className="underline underline-offset-2 hover:text-foreground"
+						>Deepgram API key</a> with the Member role or higher, then add it above.
+					</p>
+				</>}
 			</SettingsGroup>)}
 
 		</>
@@ -550,3 +680,373 @@ function AddProviderEditor({
 		</>
 	);
 }
+
+/** One donor editor for first setup and Settings; setup omits offline pin and
+ * disconnect controls, while authentication/revisions/manual IDs stay identical. */
+export function CustomEndpointSetup({ onSaved }: { onSaved: () => void | Promise<void> }) {
+	const { t } = useI18n();
+	const [status, setStatus] = useState<CustomStatus | null>(null);
+	const [error, setError] = useState(false);
+	async function reload() {
+		try { setStatus(await readCustomStatus()); setError(false); }
+		catch { setError(true); }
+	}
+	useEffect(() => { void reload(); }, []);
+	if (!status || error) return <div className="text-xs">{t(error ? "Unable to load custom configuration." : "Loading custom configuration…")}{error && <button onClick={() => void reload()}>{t("Retry")}</button>}</div>;
+	return <CustomEndpointEditor key={status.revision} setup revision0={status.revision} authMode0={status.authMode} keySource0={status.keySource} keyReuseRequired0={status.keyReuseRequired} baseUrl0={status.baseUrl} keyPresent={status.keyPresent} models={status.models} overrides={status.overrides} manualModels0={status.manualModels} onSaved={onSaved} onPinsSaved={reload} onReload={reload} onCancel={reload} />;
+}
+
+/** The custom endpoint's status row (shown once configured); clicking re-opens the editor. */
+function CustomEndpointRow({
+	status,
+	expanded,
+	onToggle,
+}: {
+	status: CustomStatus;
+	expanded: boolean;
+	onToggle: () => void;
+}) {
+	const { t } = useI18n();
+	const count = status.models.length;
+	const line = `${status.baseUrl} · ${count} model${count === 1 ? "" : "s"} · ${status.authMode === "keyless" ? "keyless" : status.keyPresent ? "API key" : "API key missing"}`;
+	return (
+		<div data-testid="custom-endpoint-row">
+			<button
+				type="button"
+				data-testid="custom-endpoint-row-btn"
+				aria-expanded={expanded}
+				onClick={onToggle}
+				className="flex w-full items-center justify-between gap-3 rounded-sm px-1 py-1.5 text-left cursor-pointer transition-colors hover:bg-accent/50"
+			>
+				<span className="font-ui text-xs text-foreground">{t("Custom endpoint")}</span>
+				<span data-testid="custom-endpoint-status" className="max-w-[60%] truncate font-mono text-[11px] text-muted-foreground">
+					{line}
+				</span>
+			</button>
+		</div>
+	);
+}
+
+/** A pin row's raw input state — "" means "no pin": the endpoint's own value,
+ *  then the compiled default, decides. `reasoning` is tri-state. */
+interface PinDraft {
+	context: string;
+	maxTokens: string;
+	reasoning: "" | "on" | "off";
+}
+
+const pinDraft = (pin: CustomModelOverride | undefined): PinDraft => ({
+	context: pin?.context === undefined ? "" : String(pin.context),
+	maxTokens: pin?.maxTokens === undefined ? "" : String(pin.maxTokens),
+	reasoning: pin?.reasoning === undefined ? "" : pin.reasoning ? "on" : "off",
+});
+
+/** One draft row per discovered model, seeded from the stored pins. */
+function draftsFor(
+	models: readonly CustomModel[],
+	overrides: Record<string, CustomModelOverride>,
+): Record<string, PinDraft> {
+	return Object.fromEntries(models.map((m) => [m.id, pinDraft(overrides[m.id])]));
+}
+
+/** Drafts → the PATCH payload (replace-whole): a blank field sends nothing and
+ *  a fully blank model is absent — which IS the un-pin. */
+function pinsPayload(drafts: Record<string, PinDraft>): Record<string, CustomModelOverride> {
+	const out: Record<string, CustomModelOverride> = {};
+	for (const [id, d] of Object.entries(drafts)) {
+		const pin: CustomModelOverride = {};
+		if (d.context.trim()) pin.context = Number(d.context);
+		if (d.maxTokens.trim()) pin.maxTokens = Number(d.maxTokens);
+		if (d.reasoning !== "") pin.reasoning = d.reasoning === "on";
+		if (Object.keys(pin).length) Object.defineProperty(out, id, { value: pin, enumerable: true });
+	}
+	return out;
+}
+
+/** testids must survive ids carrying slashes, colons, dots. */
+const pinTestid = (prefix: string, id: string) => `${prefix}-${id.replace(/[^a-z0-9-]/gi, "_")}`;
+
+/** The custom endpoint's connect editor: base URL + key → POST /api/custom-provider
+ *  (validate + discover + register), and the per-model limits form → PATCH (pins,
+ *  no probe, so it works with the local server switched off). Image capability is
+ *  detected automatically. */
+function CustomEndpointEditor({
+	setup = false,
+	revision0, authMode0, keySource0, keyReuseRequired0, onReload,
+	baseUrl0,
+	keyPresent: initialKeyPresent,
+	models,
+	overrides,
+	manualModels0,
+	onSaved,
+	onPinsSaved,
+	onCancel,
+	onDelete,
+}: {
+	setup?: boolean;
+	revision0: string;
+	authMode0: "keyless" | "apiKey";
+	keySource0: "env" | "file" | "none";
+	keyReuseRequired0: boolean;
+	onReload: () => void | Promise<void>;
+	baseUrl0: string;
+	keyPresent: boolean;
+	/** The discovered models — one limits row each. */
+	models: readonly CustomModel[];
+	/** Their stored user pins. */
+	overrides: Record<string, CustomModelOverride>;
+	manualModels0: readonly string[];
+	onSaved: () => void | Promise<void>;
+	/** Pins saved — the editor stays open (a form, not a connect). */
+	onPinsSaved: () => void | Promise<void>;
+	onCancel: () => void;
+	onDelete?: (revision: string) => Promise<string | null>;
+}) {
+	const { t } = useI18n();
+	const [revision, setRevision] = useState(revision0);
+	const [authMode, setAuthMode] = useState(authMode0);
+	const [keySource, setKeySource] = useState(keySource0);
+	const [keyPresent, setKeyPresent] = useState(initialKeyPresent);
+	const [keyReuseRequired, setKeyReuseRequired] = useState(keyReuseRequired0);
+	const [authLoading, setAuthLoading] = useState(false);
+	const [reuseKey, setReuseKey] = useState(false);
+	useEffect(() => {
+		if (authMode !== "apiKey") return;
+		let cancelled = false;
+		setAuthLoading(true);
+		readCustomStatus(true).then((status) => {
+			if (cancelled) return;
+			setKeySource(status.keySource);
+			setKeyPresent(status.keyPresent);
+			setKeyReuseRequired(status.keyReuseRequired);
+			if (status.keySource === "env") setKey("");
+		}).catch(() => { if (!cancelled) setError("Unable to inspect effective key. Reload configuration and retry."); })
+			.finally(() => { if (!cancelled) setAuthLoading(false); });
+		return () => { cancelled = true; };
+	}, [authMode]);
+	const [baseUrl, setBaseUrl] = useState(baseUrl0);
+	const [key, setKey] = useState("");
+	const [keyTouched, setKeyTouched] = useState(false);
+	const [manualModels, setManualModels] = useState(manualModels0.join(", "));
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	// The limits form: edited drafts over the stored pins, plus the last saved
+	// payload as the dirty baseline (the server's echo is what gets stored).
+	const [drafts, setDrafts] = useState<Record<string, PinDraft>>(() => draftsFor(models, overrides));
+	const [baseline, setBaseline] = useState(() => JSON.stringify(pinsPayload(draftsFor(models, overrides))));
+	const [pinsBusy, setPinsBusy] = useState(false);
+	const [pinsError, setPinsError] = useState<string | null>(null);
+	const changedTarget = normalizeBaseUrl(baseUrl) !== normalizeBaseUrl(baseUrl0);
+	const canConnect = Boolean(baseUrl.trim()) && (authMode === "keyless" || (!authLoading && ((Boolean(key.trim()) && keySource !== "env") || (keyPresent && (!(changedTarget || keyReuseRequired) || reuseKey)))));
+
+	const draftOf = (m: CustomModel): PinDraft => drafts[m.id] ?? pinDraft(overrides[m.id]);
+	const setDraft = (m: CustomModel, patch: Partial<PinDraft>) =>
+		setDrafts((prev) => ({ ...prev, [m.id]: { ...draftOf(m), ...patch } }));
+	const current = Object.fromEntries(models.map((m) => [m.id, draftOf(m)])) as Record<string, PinDraft>;
+	const dirty = JSON.stringify(pinsPayload(current)) !== baseline;
+
+	async function savePins() {
+		if (pinsBusy || busy || !dirty) return;
+		setPinsBusy(true);
+		setPinsError(null);
+		const res = await fetch("/api/custom-provider", {
+			method: "PATCH",
+			headers: { "content-type": "application/json", "if-match": revision },
+			body: JSON.stringify({ overrides: pinsPayload(current) }),
+		}).catch(() => null);
+		if (!res || !res.ok) {
+			const b = (await res?.json().catch(() => ({}))) as { error?: string } | undefined;
+			setPinsError(res ? (b?.error ?? `Save failed (${res.status})`) : "Save failed. Check your connection.");
+			setPinsBusy(false);
+			return;
+		}
+		setRevision(res.headers.get("etag") ?? revision);
+		// The server's stored map is the truth — echo it back.
+		const body = (await res.json().catch(() => null)) as { overrides?: Record<string, CustomModelOverride> } | null;
+		const next = draftsFor(models, body?.overrides ?? pinsPayload(current));
+		setDrafts(next);
+		setBaseline(JSON.stringify(pinsPayload(next)));
+		await onPinsSaved();
+		setPinsBusy(false);
+	}
+
+	async function save() {
+		if (busy || pinsBusy || !canConnect) return;
+		setBusy(true);
+		setError(null);
+		const res = await fetch("/api/custom-provider", {
+			method: "POST",
+			headers: { "content-type": "application/json", "if-match": revision },
+			body: JSON.stringify({ baseUrl, authMode, reuseKey, manualModels, ...(authMode === "apiKey" && keyTouched && key.trim() && keySource !== "env" ? { key } : {}) }),
+		}).catch(() => null);
+		if (!res || !res.ok) {
+			const b = (await res?.json().catch(() => ({}))) as { error?: string } | undefined;
+			setError(res ? (b?.error ?? `Connect failed (${res.status})`) : "Connect failed. Check your connection.");
+			setBusy(false);
+			return;
+		}
+		await onSaved();
+		setBusy(false);
+	}
+
+	return (
+		<div data-testid="custom-endpoint-editor" className="flex flex-col gap-2 rounded-sm px-1 py-1.5">
+			<div className="flex items-center gap-2">
+				<span className="shrink-0 font-ui text-xs text-foreground">{t("Custom endpoint")}</span>
+				<input
+					type="text"
+					value={baseUrl}
+					onChange={(e) => setBaseUrl(e.target.value)}
+					placeholder={t("Base URL, e.g. http://localhost:11434/v1")}
+					aria-label={t("Custom endpoint base URL")}
+					data-testid="custom-baseurl-input"
+					disabled={busy}
+					autoFocus
+					className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
+				/>
+			</div>
+			<input
+				type="text"
+				value={manualModels}
+				onChange={(e) => setManualModels(e.target.value)}
+				placeholder={t("Model IDs, comma-separated — optional, needed when the endpoint has no /models list")}
+				aria-label={t("Custom endpoint model IDs")}
+				data-testid="custom-models-input"
+				disabled={busy}
+				className="h-7 min-w-0 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
+			/>
+			<label className="flex items-center gap-2 text-xs">{t("Authentication")}
+				<select aria-label={t("Custom endpoint authentication")} data-testid="custom-auth-mode" value={authMode} disabled={busy || pinsBusy} onChange={(e) => { setAuthMode(e.target.value as "keyless" | "apiKey"); setReuseKey(false); }}>
+					<option value="keyless">{t("Keyless")}</option><option value="apiKey">{t("API key")}</option>
+				</select>
+			</label>
+			{authMode === "apiKey" && keySource === "env" && <p className="text-[11px] text-muted-foreground" data-testid="custom-env-owned">{t("Environment supplies the effective key. Change the environment to replace it.")}</p>}
+			{authMode === "apiKey" && keyPresent && (changedTarget || keyReuseRequired) && <label className="text-[11px]"><input type="checkbox" data-testid="custom-reuse-key" checked={reuseKey} onChange={(e) => setReuseKey(e.target.checked)} /> {t("Allow reuse of the effective existing key for this URL")}</label>}
+			<div className="flex items-center gap-2">
+				{authMode === "apiKey" && <input
+					type="password"
+					value={key}
+					onChange={(e) => {
+						setKey(e.target.value);
+						setKeyTouched(true);
+						if (!e.target.value.trim()) setAuthMode("keyless");
+					}}
+					placeholder={keyPresent ? "Leave blank to keep effective key" : "API key"}
+					aria-label={t("Custom endpoint API key")}
+					data-testid="custom-key-input"
+					disabled={busy || pinsBusy || keySource === "env"}
+					className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
+				/>}
+				<button
+					type="button"
+					onClick={() => void save()}
+					disabled={busy || pinsBusy || !canConnect}
+					data-testid="custom-save"
+					className="shrink-0 text-xs text-foreground underline-offset-2 hover:underline disabled:text-muted-foreground/40 disabled:no-underline"
+				>
+					{busy ? "Connecting…" : "Connect"}
+				</button>
+				<button
+					type="button"
+					onClick={onCancel}
+					disabled={busy}
+					data-testid="custom-cancel"
+					className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
+				>
+					{t("Cancel")}
+				</button>
+				{/* Disconnect rides beside Connect, exactly the stored-key rows' Delete:
+				    quiet text, one click, no confirm — and only once there IS an
+				    endpoint (a fresh add has nothing to delete). */}
+				{onDelete && baseUrl0.trim() && (
+					<button
+						type="button"
+						onClick={async () => { setBusy(true); const err = await onDelete(revision); if (err) setError(err); setBusy(false); }}
+						disabled={busy || pinsBusy}
+						data-testid="custom-delete"
+						className="shrink-0 text-xs text-muted-foreground/70 underline-offset-2 hover:text-red-500 hover:underline"
+					>
+						{t("Disconnect")}
+					</button>
+				)}
+			</div>
+			{!setup && models.length > 0 && (
+				<div className="flex flex-col gap-1" data-testid="custom-pins">
+					<div className="flex max-h-56 flex-col gap-1 overflow-y-auto pr-1">
+						{models.map((m) => {
+							const d = draftOf(m);
+							return (
+								<div key={m.id} className="flex items-center gap-2" data-testid={pinTestid("custom-pin-row", m.id)}>
+									<span className="min-w-0 flex-1 truncate font-mono text-[11px] text-foreground" title={m.id}>
+										{m.id}
+										<span className="block text-[10px] text-muted-foreground">{t("Context:")} {d.context.trim() ? "user pin" : m.context ? `reported ${m.context}` : `fallback ${CUSTOM_MODEL_DEFAULT_CONTEXT_WINDOW}`} {t("· Output:")} {d.maxTokens.trim() ? "user pin" : m.maxTokens ? `reported ${m.maxTokens}` : `fallback ${CUSTOM_MODEL_DEFAULT_MAX_TOKENS}`}</span>
+									</span>
+									<input
+										type="text"
+										inputMode="numeric"
+										value={d.context}
+										onChange={(e) => setDraft(m, { context: e.target.value })}
+										placeholder={String(m.context ?? CUSTOM_MODEL_DEFAULT_CONTEXT_WINDOW)}
+										aria-label={`${m.id} context window in tokens`}
+										data-testid={pinTestid("custom-pin-context", m.id)}
+										disabled={pinsBusy}
+										className="h-7 w-20 shrink-0 rounded-sm border border-border bg-background px-1.5 text-right font-mono text-[11px] text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
+									/>
+									<input
+										type="text"
+										inputMode="numeric"
+										value={d.maxTokens}
+										onChange={(e) => setDraft(m, { maxTokens: e.target.value })}
+										placeholder={String(m.maxTokens ?? CUSTOM_MODEL_DEFAULT_MAX_TOKENS)}
+										aria-label={`${m.id} max output tokens`}
+										data-testid={pinTestid("custom-pin-maxtokens", m.id)}
+										disabled={pinsBusy}
+										className="h-7 w-20 shrink-0 rounded-sm border border-border bg-background px-1.5 text-right font-mono text-[11px] text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
+									/>
+									<select
+										value={d.reasoning}
+										onChange={(e) => setDraft(m, { reasoning: e.target.value as PinDraft["reasoning"] })}
+										aria-label={`${m.id} reasoning effort support`}
+										data-testid={pinTestid("custom-pin-reasoning", m.id)}
+										disabled={pinsBusy}
+										className="h-7 shrink-0 rounded-sm border border-border bg-background px-1 font-ui text-[11px] text-foreground outline-none focus:border-muted-foreground/50"
+									>
+										<option value="">{t("Reasoning effort: Use reported")}</option>
+										<option value="on">{t("Reasoning effort: Supported")}</option>
+										<option value="off">{t("Reasoning effort: Not supported")}</option>
+									</select>
+								</div>
+							);
+						})}
+					</div>
+					<div className="flex items-center gap-2">
+						{pinsError && (
+							<p role="alert" data-testid="custom-pins-error" className="text-[11px] text-red-500">
+								{pinsError}
+							</p>
+						)}
+						<button
+							type="button"
+							onClick={() => void savePins()}
+							disabled={pinsBusy || !dirty}
+							data-testid="custom-pins-save"
+							className="ml-auto shrink-0 text-xs text-foreground underline-offset-2 hover:underline disabled:text-muted-foreground/40 disabled:no-underline"
+						>
+							{pinsBusy ? "Saving…" : "Save limits"}
+						</button>
+					</div>
+				</div>
+			)}
+			<div className="flex flex-col gap-1 text-[11px] text-muted-foreground" data-testid="custom-help">
+				{!setup && models.length > 0 && <p data-testid="custom-budget-help">{t("Budget pins do not resize backend context. Blank uses reported limits, then fallback (8192 context / 4096 output). Custom pricing is unknown.")}</p>}
+				<p data-testid="custom-reasoning-help">{t("Reasoning support is a capability declaration. The effort picker’s Off may not disable a custom backend’s default thinking.")}</p>
+			</div>
+			{(error || pinsError) && <button type="button" data-testid="custom-reload" onClick={() => void onReload()} className="text-left text-xs underline">{t("Reload configuration")}</button>}
+			{error && (
+				<p role="alert" data-testid="custom-error" className="text-xs text-red-500">
+					{error}
+				</p>
+			)}
+		</div>
+	);
+}

components/settings/model-menu.tsx

@@ -23,10 +23,12 @@ import { useI18n } from "@/components/i18n";
 
 import { useEffect, useRef, useState } from "react";
 import type { ModelCatalogEntry } from "@/src/core";
-import { fuzzyScore, subscriptionLabel } from "@/src/core";
+import { CLAUDE_CODE_PROVIDER, CUSTOM_PROVIDER, fuzzyScore, subscriptionLabel } from "@/src/core";
 import { formatTokens } from "@/components/usage-format";
+import { SearchMenuList } from "./search-menu-list";
 
 function priceLabel(cost: ModelCatalogEntry["cost"]): string {
+	if (!cost) return "Unpriced";
 	const fmt = (n: number) => `$${n < 1 ? n.toFixed(2).replace(/0$/, "") : n.toFixed(2)}`;
 	return `${fmt(cost.input)}/${fmt(cost.output)}`;
 }
@@ -40,6 +42,7 @@ export function ModelMenuList({
 	effectiveProvider,
 	onPick,
 	footer,
+	vision,
 }: {
 	/** The full catalog — undefined while it loads. */
 	models: ModelCatalogEntry[] | undefined;
@@ -54,92 +57,47 @@ export function ModelMenuList({
 	onPick: (entry: ModelCatalogEntry) => void;
 	/** Quiet footer note under the list (context-specific). */
 	footer?: string;
+	/** Vision slot: only image-capable models are selectable — plus every
+	 *  custom-endpoint model, whose capability the endpoint may not report.
+	 *  Image-capable ones float to the top. */
+	vision?: boolean;
 }) {
-	const { t, language } = useI18n();
-	const [query, setQuery] = useState("");
-	const [menuIdx, setMenuIdx] = useState<number | null>(null);
-	const searchRef = useRef<HTMLInputElement>(null);
-	const listRef = useRef<HTMLUListElement>(null);
-
-	useEffect(() => {
-		searchRef.current?.focus();
-	}, []);
-
-	// Keep the arrow-walked result visible in the scrolling list.
-	useEffect(() => {
-		if (menuIdx === null) return;
-		listRef.current?.querySelector(`[data-idx="${menuIdx}"]`)?.scrollIntoView({ block: "nearest" });
-	}, [menuIdx]);
-
-	// The filtered, ranked model list.
-	const results = (models ?? [])
-		.map((m) => ({ m, s: fuzzyScore(query, m.provider, m.id, m.name) }))
-		.filter((r) => r.s !== null)
-		.sort((a, b) => b.s! - a.s! || a.m.id.localeCompare(b.m.id))
-		.map((r) => r.m);
-
+	const { t } = useI18n();
+	// Vision slot: built-ins must report image input; custom-endpoint models
+	// stay selectable (the endpoint may not report a modality). Image-capable
+	// ones float to the top of the list.
+	const visionItems = vision
+		? models?.filter((m) => m.input.includes("image") || m.provider === CUSTOM_PROVIDER.id)
+		: models;
 	return (
 		<>
-			<input
-				ref={searchRef}
-				data-testid="model-search"
-				value={query}
-				onChange={(e) => {
-					setQuery(e.target.value);
-					setMenuIdx(null); // new query → the walk restarts on Enter/↓
-				}}
-				onKeyDown={(e) => {
-					if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-						e.preventDefault();
-						e.stopPropagation();
-						if (results.length === 0) return;
-						setMenuIdx((i) =>
-							e.key === "ArrowDown"
-								? Math.min((i ?? -1) + 1, results.length - 1)
-								: Math.max((i ?? results.length) - 1, 0),
-						);
-					} else if (e.key === "Enter") {
-						const chosen = results[menuIdx ?? 0];
-						if (chosen) {
-							e.preventDefault();
-							e.stopPropagation();
-							onPick(chosen);
-						}
-					}
-				}}
+			<SearchMenuList
+				items={visionItems}
+				itemKey={(m) => `${m.provider}/${m.id}`}
+				searchTerms={(m) => [m.provider, m.id, m.name]}
+				compare={(a, b) => a.id.localeCompare(b.id)}
+				prioritize={vision ? (m) => m.input.includes("image") : undefined}
+				isSelected={(m) => m.id === effectiveId && m.provider === (effectiveProvider ?? m.provider)}
+				onPick={onPick}
+				searchTestid="model-search"
+				listTestid="model-list"
+				optionTestid={(m) => `model-option-${m.id.replace(/[^a-z0-9-]/gi, "_")}`}
 				placeholder={t("Search models…")}
-				className="lh-input mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
+				loading={t("Loading models…")}
+				empty={t("No models match.")}
+				renderItem={(m) => <>
+					<span className="flex items-center justify-between gap-2">
+						<span className="truncate text-card-foreground">{m.name}</span>
+						<span className="shrink-0 tabular-nums text-muted-foreground" title={t(m.provider === CLAUDE_CODE_PROVIDER ? "Billing is determined by your Claude Code configuration; LearnHarness does not estimate it." : subscriptionLabel(`${m.provider}:${m.id}`) ? "Subscription connection" : m.cost ? "USD per 1M tokens in/out" : "Price unavailable")}>
+							{t(m.provider === CLAUDE_CODE_PROVIDER ? "CLI billing" : subscriptionLabel(`${m.provider}:${m.id}`) ?? priceLabel(m.cost))}
+						</span>
+					</span>
+					<span className="flex items-center justify-between gap-2 text-muted-foreground">
+						<span className="truncate">{subscriptionLabel(`${m.provider}:${m.id}`) ? t("{v0} (subscription)", { v0: subscriptionLabel(`${m.provider}:${m.id}`) }) : m.provider} · {m.id}</span>
+						<span className="shrink-0 tabular-nums">{m.contextWindow === null ? "—" : formatTokens(m.contextWindow)}</span>
+					</span>
+				</>}
 			/>
-			{!models && <div className="px-2 py-3 text-center text-muted-foreground">{t("Loading models…")}</div>}
-			{models && results.length === 0 && (
-				<div className="px-2 py-3 text-center text-muted-foreground">{t("No models match.")}</div>
-			)}
-			<ul ref={listRef} data-testid="model-list" className="flex max-h-72 flex-col overflow-y-auto px-1">
-				{results.map((m, i) => (
-					<li key={`${m.provider}/${m.id}`}>
-						<button
-							type="button"
-							data-testid={`model-option-${m.id.replace(/[^a-z0-9-]/gi, "_")}`}
-							data-idx={i}
-							onClick={() => onPick(m)}
-							className={`flex w-full flex-col gap-0.5 rounded-lg px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted ${
-								i === menuIdx ? "bg-accent/40 ring-1 ring-inset ring-border" : ""
-							}${m.id === effectiveId && m.provider === (effectiveProvider ?? m.provider) && i !== menuIdx ? " bg-muted/60" : ""}`}
-						>
-							<span className="flex items-center justify-between gap-2">
-								<span className="truncate text-card-foreground">{m.name}</span>
-								<span className="shrink-0 tabular-nums text-muted-foreground" title={subscriptionLabel(`${m.provider}:${m.id}`) ? t("Subscription connection") : t("USD per 1M tokens in/out")}>
-									{subscriptionLabel(`${m.provider}:${m.id}`) ?? priceLabel(m.cost)}
-								</span>
-							</span>
-							<span className="flex items-center justify-between gap-2 text-muted-foreground">
-								<span className="truncate">{subscriptionLabel(`${m.provider}:${m.id}`) ? t("{v0} (subscription)", { v0: subscriptionLabel(`${m.provider}:${m.id}`) }) : m.provider} · {m.id}</span>
-								<span className="shrink-0 tabular-nums">{formatTokens(m.contextWindow, language)}</span>
-							</span>
-						</button>
-					</li>
-				))}
-			</ul>
 			{footer && (
 				<div className="mt-1 border-t px-2 pt-1.5 text-xs text-muted-foreground">{footer}</div>
 			)}

components/settings/search-menu-list.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { fuzzyScore } from "@/src/core";
+
+/** The model picker's search, arrow-walk, row styling and scrolling machine.
+ * Models and dictation languages supply only their catalog and row content.
+ * The caller owns the shared MenuShell and dismissal behavior. */
+export function SearchMenuList<T>({
+	items, itemKey, searchTerms, compare, prioritize, isSelected, onPick, renderItem,
+	searchTestid, listTestid, optionTestid, placeholder, ariaLabel, loading, empty,
+	disabled = false,
+}: {
+	items: readonly T[] | undefined;
+	itemKey: (item: T) => string;
+	searchTerms: (item: T) => string[];
+	compare?: (a: T, b: T) => number;
+	/** Optional grouping key: items it answers true for sort ahead of the
+	 *  rest, fuzzy rank still deciding within each group (a stable partition,
+	 *  never a filter — nothing is hidden). */
+	prioritize?: (item: T) => boolean;
+	isSelected: (item: T) => boolean;
+	onPick: (item: T) => void;
+	renderItem: (item: T) => ReactNode;
+	searchTestid: string;
+	listTestid: string;
+	optionTestid: (item: T) => string;
+	placeholder: string;
+	ariaLabel?: string;
+	loading?: string;
+	empty: string;
+	disabled?: boolean;
+}) {
+	const [query, setQuery] = useState("");
+	const [menuIdx, setMenuIdx] = useState<number | null>(null);
+	const searchRef = useRef<HTMLInputElement>(null);
+	const listRef = useRef<HTMLUListElement>(null);
+
+	useEffect(() => { searchRef.current?.focus(); }, []);
+	useEffect(() => {
+		if (menuIdx === null) return;
+		listRef.current?.querySelector(`[data-idx="${menuIdx}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [menuIdx]);
+
+	const results = (items ?? [])
+		.map((item) => ({ item, score: fuzzyScore(query, ...searchTerms(item)) }))
+		.filter((result) => result.score !== null)
+		.sort(
+			(a, b) =>
+				(prioritize ? Number(prioritize(b.item)) - Number(prioritize(a.item)) : 0) ||
+				b.score! - a.score! ||
+				(compare?.(a.item, b.item) ?? 0),
+		)
+		.map(({ item }) => item);
+
+	return <>
+		<input
+			type="text"
+			ref={searchRef}
+			data-testid={searchTestid}
+			aria-label={ariaLabel}
+			value={query}
+			disabled={disabled}
+			onChange={(event) => { setQuery(event.target.value); setMenuIdx(null); }}
+			onKeyDown={(event) => {
+				if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+					event.preventDefault();
+					event.stopPropagation();
+					if (disabled || results.length === 0) return;
+					setMenuIdx((i) => event.key === "ArrowDown"
+						? Math.min((i ?? -1) + 1, results.length - 1)
+						: Math.max((i ?? results.length) - 1, 0));
+				} else if (event.key === "Enter") {
+					const chosen = results[menuIdx ?? 0];
+					if (!disabled && chosen !== undefined) {
+						event.preventDefault();
+						event.stopPropagation();
+						onPick(chosen);
+					}
+				}
+			}}
+			placeholder={placeholder}
+			className="lh-input mb-1.5 w-full rounded-lg border bg-background px-2 py-1.5 text-foreground outline-none focus:ring-1 focus:ring-ring"
+		/>
+		{!items && loading && <div className="px-2 py-3 text-center text-muted-foreground">{loading}</div>}
+		{items && results.length === 0 && <div className="px-2 py-3 text-center text-muted-foreground">{empty}</div>}
+		<ul ref={listRef} data-testid={listTestid} className="flex max-h-72 flex-col overflow-y-auto px-1">
+			{results.map((item, i) => <li key={itemKey(item)}>
+				<button
+					type="button"
+					data-testid={optionTestid(item)}
+					data-idx={i}
+					disabled={disabled}
+					onClick={() => onPick(item)}
+					className={`flex w-full flex-col gap-0.5 rounded-lg px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted ${
+						i === menuIdx ? "bg-accent/40 ring-1 ring-inset ring-border" : ""
+					}${isSelected(item) && i !== menuIdx ? " bg-muted/60" : ""}`}
+				>{renderItem(item)}</button>
+			</li>)}
+		</ul>
+	</>;
+}

components/settings/settings-dialog.tsx

@@ -41,7 +41,8 @@ import {
 } from "@/src/core";
 import { LanguageSelect, SttModelSelect, SttPreferredLanguages, useI18n } from "@/components/i18n";
 import { useAppearance } from "./appearance.tsx";
-import { SettingsSection, SettingsRow, Toggle } from "./controls.tsx";
+import { SettingsGroup, SettingsRow, SettingsSection } from "./controls.tsx";
+import { UpdateSettings } from "./update-settings.tsx";
 import { AgentSection } from "./agent-section.tsx";
 import type { ModelsSettings } from "@/src/core";
 import { MENU_CLOSE_EVENT, MENU_OPEN_EVENT } from "@/components/menu-shell";
@@ -77,10 +78,6 @@ const DialogContext = createContext<{ open: (section?: string, row?: string) =>
 /** AppShell-level mount: the sidebar row and the mod+, chord call this.
  *  `open(section)` lands the dialog on a specific section (the first-run
  *  setup flow deep-links to Keys when no provider key exists yet). */
-/** The auto-update row's hint (tooltip wave): honest user language — no
- *  stream vocabulary. Exported for the copy pin (tooltip-mechanism test). */
-export const AUTO_UPDATE_HINT = "Automatic updates arrive in an upcoming release";
-
 export function SettingsDialogProvider({
 	children,
 }: {
@@ -94,6 +91,7 @@ export function SettingsDialogProvider({
 		setLandOnRow(row ?? null);
 		setShow(true);
 	}, []);
+	useEffect(() => window.lh?.onOpenSettings?.((section) => open(section)), [open]);
 	return (
 		<ChatGPTUIProvider><NativeSubscriptionUIProvider><DialogContext.Provider value={{ open }}>
 			{children}
@@ -367,20 +365,15 @@ export function SettingsDialogBody({
 									title={t("General")}
 									testid="section-general"
 								>
-									<SettingsRow label={t("Interface language")} testid="row-language"><LanguageSelect field="language" /></SettingsRow>
-									<SettingsRow
-										label={t("Auto-update")}
-										hint={AUTO_UPDATE_HINT}
-										testid="row-auto-update"
-									>
-										<Toggle
-											checked={general.autoUpdate ?? true}
-											label={t("auto update")}
-											onChange={(on) =>
-												void write("general", { autoUpdate: on })
-											}
-										/>
-									</SettingsRow>
+									<SettingsGroup label={t("Language")} testid="group-language">
+										<SettingsRow label={t("Interface language")} testid="row-language"><LanguageSelect field="language" /></SettingsRow>
+									</SettingsGroup>
+									<UpdateSettings
+										autoUpdate={general.autoUpdate ?? true}
+										onAutoUpdateChange={(on) =>
+											void write("general", { autoUpdate: on })
+										}
+									/>
 								</SettingsSection>
 							)}
 							{active === "stt" && (

components/settings/subscription-client.ts

@@ -0,0 +1,77 @@
+"use client";
+
+import { useMemo } from "react";
+import type { ChatGPTControlBridge, ChatGPTStatus, NativeSubscriptionControlBridge, NativeSubscriptionProviderId, NativeSubscriptionStatus } from "@/src/core";
+import { useNotifyHub, type createNotifyHub } from "@/components/server-events";
+
+type Hub = ReturnType<typeof createNotifyHub> | null;
+type Reply<T> = { value: T; browserAction?: string; error?: string };
+const PATH = "/api/subscriptions";
+const headers = { "Content-Type": "application/json", "x-learnharness-subscriptions": "1" };
+
+async function status() {
+	const response = await fetch(PATH, { headers, cache: "no-store" });
+	if (!response.ok) throw new Error("Subscription status is unavailable.");
+	return response.json() as Promise<{ chatgpt: ChatGPTStatus; native: NativeSubscriptionStatus[] }>;
+}
+async function control<T>(providerId: string, op: string, fields: Record<string, unknown> = {}): Promise<Reply<T>> {
+	const response = await fetch(PATH, { method: "POST", headers, body: JSON.stringify({ providerId, op, ...fields }) });
+	if (!response.ok) throw new Error("The subscription connection could not be changed.");
+	return response.json() as Promise<Reply<T>>;
+}
+function onChange(hub: Hub, listener: () => void): () => void {
+	const offEvent = hub?.subscribe("subscriptions-changed", listener);
+	const offResync = hub?.onResync(listener);
+	return () => { offEvent?.(); offResync?.(); };
+}
+/** Reserve the new tab synchronously in the click gesture. Only a one-use
+ * same-origin action URL enters app JS; provider URLs remain in the owner.
+ * Electron dev has no tabs: its narrow main-process opener performs this step. */
+async function withBrowser<T>(action: () => Promise<Reply<T>>): Promise<T> {
+	const external = window.lh?.subscriptionTransport === "web" ? window.lh.openSubscriptionBrowser : undefined;
+	const tab = external ? null : window.open("about:blank", "_blank");
+	if (!external && !tab) throw new Error("Allow a sign-in tab to open, then try again.");
+	if (tab) tab.opener = null;
+	try {
+		const reply = await action();
+		if (reply.browserAction) {
+			if (!/^\/api\/subscriptions\/browser\?id=[0-9a-f-]{36}$/.test(reply.browserAction)) throw new Error("Invalid sign-in action.");
+			if (external) await external(reply.browserAction);
+			else if (tab && !tab.closed) tab.location.href = reply.browserAction;
+			else throw new Error("The sign-in tab was closed. Cancel and try again.");
+		} else tab?.close();
+		return reply.value;
+	} catch (error) { tab?.close(); throw error; }
+}
+export function createWebChatGPTBridge(hub: Hub): ChatGPTControlBridge {
+	const call = async (op: string, fields?: Record<string, unknown>) => (await control<ChatGPTStatus>("chatgpt", op, fields)).value;
+	return {
+		status: async () => (await status()).chatgpt,
+		login: (id) => withBrowser(() => control<ChatGPTStatus>("chatgpt", "login", { id })),
+		cancel: () => call("cancel"), select: (id) => call("select", { id }),
+		disconnect: (id) => call("disconnect", { id }), logout: (id) => call("logout", { id }),
+		consent: (enabled) => call("consent", { enabled }),
+		onChange: (listener) => onChange(hub, listener),
+	};
+}
+export function createWebNativeBridge(hub: Hub): NativeSubscriptionControlBridge {
+	const call = async (providerId: NativeSubscriptionProviderId, op: string, fields?: Record<string, unknown>) => { await control(providerId, op, fields); };
+	return {
+		status: async () => (await status()).native,
+		login: (providerId, enabled) => call(providerId, "login", { enabled }),
+		cancel: (providerId) => call(providerId, "cancel"),
+		respond: (providerId, attemptId, promptId, value) => call(providerId, "respond", { attemptId, promptId, value }),
+		open: async (providerId, attemptId, actionId) => { await withBrowser(() => control(providerId, "open", { attemptId, actionId })); },
+		retry: (providerId) => call(providerId, "retry"), disconnect: (providerId) => call(providerId, "disconnect"),
+		consent: (providerId, enabled) => call(providerId, "consent", { enabled }),
+		onChange: (listener) => onChange(hub, listener),
+	};
+}
+export function useChatGPTBridge(): ChatGPTControlBridge | undefined {
+	const hub = useNotifyHub();
+	return useMemo(() => typeof window === "undefined" ? undefined : window.lh?.subscriptionTransport !== "web" && window.lh?.chatgpt ? window.lh.chatgpt : createWebChatGPTBridge(hub), [hub]);
+}
+export function useNativeSubscriptionBridge(): NativeSubscriptionControlBridge | undefined {
+	const hub = useNotifyHub();
+	return useMemo(() => typeof window === "undefined" ? undefined : window.lh?.subscriptionTransport !== "web" && window.lh?.subscriptions ? window.lh.subscriptions : createWebNativeBridge(hub), [hub]);
+}

components/settings/subscription-connections.tsx

@@ -9,17 +9,32 @@ import { notifySettingsSaved } from "@/components/settings-signal";
 import { ConnectionDialog, ConnectionFooter, ConnectionRow } from "./connection-controls";
 import { ChatGPTConnection } from "./chatgpt-connection";
 import { Toggle } from "./controls";
+import { useNativeSubscriptionBridge } from "./subscription-client";
 
 export const COPILOT_POLICY_NOTICE = "Pi's native Copilot sign-in may enable additional models whose policy is not yet configured. Models explicitly disabled by policy are not enabled. Organization restrictions still apply.";
 export const SUBSCRIPTION_BACKGROUND_HINT = "Allow LearnHarness helper agents and automatic follow-ups to use this connection.";
-export function subscriptionNotice(label: string, t: Translator = translator("en")): string { return t("Your prompts, tool results, and relevant session context are sent to {v0} to run the work you select. Credentials are stored locally in an owner-only plaintext file. Provider terms, data-use policies, and plan limits apply. This connection never falls back to an API key.", { v0: label }); }
-export function subscriptionDisconnectCopy(label: string, t: Translator = translator("en")): string { return t("Disconnect {v0} from LearnHarness? This stops work using this connection and removes its saved credentials from this device. It does not cancel your subscription or revoke access at the provider. Saved model choices will remain unavailable until you reconnect or change them.", { v0: label }); }
+export function subscriptionNotice(label: string, webOrTranslator: boolean | Translator = false, translate: Translator = translator("en")): string {
+	const web = typeof webOrTranslator === "boolean" && webOrTranslator;
+	const t = typeof webOrTranslator === "function" ? webOrTranslator : translate;
+	return t(web
+		? "Your prompts, tool results, and relevant session context are sent to {v0} to run the work you select. Credentials are stored on the machine running LearnHarness in an owner-only plaintext file. Provider terms, data-use policies, and plan limits apply. This connection never falls back to an API key."
+		: "Your prompts, tool results, and relevant session context are sent to {v0} to run the work you select. Credentials are stored locally in an owner-only plaintext file. Provider terms, data-use policies, and plan limits apply. This connection never falls back to an API key.", { v0: label });
+}
+export function subscriptionDisconnectCopy(label: string, webOrTranslator: boolean | Translator = false, translate: Translator = translator("en")): string {
+	const web = typeof webOrTranslator === "boolean" && webOrTranslator;
+	const t = typeof webOrTranslator === "function" ? webOrTranslator : translate;
+	return t(web
+		? "Disconnect {v0} from LearnHarness? This stops work using this connection and removes its saved credentials from the machine running LearnHarness. It does not cancel your subscription or revoke access at the provider. Saved model choices will remain unavailable until you reconnect or change them."
+		: "Disconnect {v0} from LearnHarness? This stops work using this connection and removes its saved credentials from this device. It does not cancel your subscription or revoke access at the provider. Saved model choices will remain unavailable until you reconnect or change them.", { v0: label });
+}
 export function emptySubscriptionStatus(providerId: NativeSubscriptionProviderId): NativeSubscriptionStatus { return { providerId, available: false, connected: false, pending: false, allowBackgroundUse: true, connectionId: null, epoch: 0, authorityRevision: 0, revision: 0 }; }
 const Context = createContext({ statuses: [] as NativeSubscriptionStatus[], busy: false, open: (_providerId: NativeSubscriptionProviderId) => {} });
 const CONTROL_ERROR = "The connection could not be changed. Try again.";
 
 export function NativeSubscriptionUIProvider({ children }: { children: React.ReactNode }) {
 	const { t } = useI18n();
+	const bridge = useNativeSubscriptionBridge();
+	const web = typeof window !== "undefined" && bridge !== window.lh?.subscriptions;
 	const [statuses, setStatuses] = useState<NativeSubscriptionStatus[]>([]);
 	const [dialog, setDialog] = useState<NativeSubscriptionProviderId | null>(null);
 	const [view, setView] = useState<"notice" | "connection" | "manage">("notice");
@@ -34,7 +49,7 @@ export function NativeSubscriptionUIProvider({ children }: { children: React.Rea
 	async function refresh() {
 		const request = ++sequence.current;
 		try {
-			const values = await window.lh?.subscriptions?.status();
+			const values = await bridge?.status();
 			if (!mounted.current || request !== sequence.current || !Array.isArray(values)) return;
 			const accepted = NATIVE_SUBSCRIPTIONS.map(({ providerId }) => {
 				const next = values.find((s) => s.providerId === providerId), old = statusesRef.current.find((s) => s.providerId === providerId);
@@ -45,10 +60,10 @@ export function NativeSubscriptionUIProvider({ children }: { children: React.Rea
 	}
 	useEffect(() => {
 		mounted.current = true; void refresh();
-		const off = window.lh?.subscriptions?.onChange(() => { void refresh(); notifySettingsSaved("keys"); });
+		const off = bridge?.onChange(() => { void refresh(); notifySettingsSaved("keys"); });
 		return () => { mounted.current = false; generation.current++; off?.(); };
 		// The root-lifetime subscriber reads current state through refs.
-	}, []);
+	}, [bridge]);
 	useEffect(() => { setPromptValue(""); }, [prompt?.id]);
 	function open(providerId: NativeSubscriptionProviderId) {
 		if (operation || statusesRef.current.some((s) => s.pending)) return;
@@ -66,7 +81,6 @@ export function NativeSubscriptionUIProvider({ children }: { children: React.Rea
 	function close() {
 		if (!dialog || busy) return;
 		if (confirm) { setConfirm(false); setError(null); return; }
-		const bridge = window.lh?.subscriptions;
 		if ((status?.pending || operation === "login") && bridge) { void control(() => bridge.cancel(dialog), true); return; }
 		generation.current++; setDialog(null); setError(null);
 	}
@@ -75,24 +89,22 @@ export function NativeSubscriptionUIProvider({ children }: { children: React.Rea
 		generation.current++; setError(null); setConfirm(false); setBackground(status.allowBackgroundUse); setBackgroundDirty(false); setView("notice");
 	}
 	async function login() {
-		const bridge = window.lh?.subscriptions;
 		if (!dialog || !bridge || operation || !status?.available) return;
 		const owner = ++generation.current; setOperation("login"); setError(null);
 		try { await bridge.login(dialog, backgroundDirty ? background : undefined); await refresh(); if (mounted.current && generation.current === owner) setDialog(null); }
 		catch { if (mounted.current && generation.current === owner) setError("Sign-in did not complete. Try connecting again."); }
 		finally { if (mounted.current && generation.current === owner) setOperation(null); }
 	}
-	const bridge = typeof window === "undefined" ? undefined : window.lh?.subscriptions;
 	return <Context.Provider value={{ statuses, busy: !!operation, open }}>
 		{children}
 		{dialog && descriptor && status && <ConnectionDialog key={`${dialog}:${view}:${confirm}`} label={t("{v0} connection", { v0: descriptor.label })} testid="subscription-connection-dialog" backdropTestid="subscription-dialog-backdrop" busy={busy} onClose={close}>
 			<h2 className="text-sm font-semibold text-foreground">{descriptor.label}</h2>
 			{confirm ? <>
-				<p className="mt-3 text-sm font-semibold text-red-400">{t("Disconnect")}{" "}{descriptor.label}?</p>
-				<p className="mt-3 text-xs leading-relaxed text-muted-foreground">{subscriptionDisconnectCopy(descriptor.label, t)}</p>
+				<p className="mt-3 text-sm font-semibold text-red-400">{t("Disconnect {v0}?", { v0: descriptor.label })}</p>
+				<p className="mt-3 text-xs leading-relaxed text-muted-foreground">{subscriptionDisconnectCopy(descriptor.label, web, t)}</p>
 			</> : view === "notice" ? <>
-				<p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="subscription-privacy-notice">{subscriptionNotice(descriptor.label, t)}</p>
-				{dialog === "github-copilot" && <p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="copilot-policy-notice">{t(COPILOT_POLICY_NOTICE)}</p>}
+				<p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="subscription-privacy-notice">{subscriptionNotice(descriptor.label, web, t)}</p>
+				{dialog === "github-copilot" && <p className="mt-3 text-xs leading-relaxed text-muted-foreground" data-testid="copilot-policy-notice">{COPILOT_POLICY_NOTICE}</p>}
 			</> : <>
 				<div className="mt-4 flex items-center gap-3 text-xs text-foreground">
 					<Toggle label={t("Allow background use")} checked={management ? status.allowBackgroundUse : background} disabled={busy || !!operation || status.pending || !status.available} onChange={(enabled) => { setBackground(enabled); if (management && bridge) void control(() => bridge.consent(dialog, enabled)); else setBackgroundDirty(true); }} />
@@ -123,17 +135,20 @@ export function NativeSubscriptionUIProvider({ children }: { children: React.Rea
 	</Context.Provider>;
 }
 
-export function NativeSubscriptionConnection({ providerId }: { providerId: NativeSubscriptionProviderId }) {
+export function NativeSubscriptionConnection({ providerId, labelClassName }: { providerId: NativeSubscriptionProviderId; labelClassName?: string }) {
 	const { t } = useI18n();
 	const ui = useContext(Context), descriptor = NATIVE_SUBSCRIPTIONS.find((p) => p.providerId === providerId)!;
 	const status = ui.statuses.find((s) => s.providerId === providerId) ?? emptySubscriptionStatus(providerId);
 	return <div className="flex flex-col gap-2" data-testid={`${providerId}-connection`}>
-		<ConnectionRow label={descriptor.label} action={status.connectionId ? t("Manage…") : t("Connect")} disabled={ui.busy || !status.available || ui.statuses.some((s) => s.pending)} onAction={() => ui.open(providerId)} />
+		<ConnectionRow label={descriptor.label} labelClassName={labelClassName} action={status.connectionId ? t("Manage…") : t("Connect")} disabled={ui.busy || !status.available || ui.statuses.some((s) => s.pending)} onAction={() => ui.open(providerId)} />
 		{status.error && <p role="alert" className="text-xs text-red-400">{t(status.error)}</p>}
 	</div>;
 }
 export function SubscriptionConnections({ setup = false }: { setup?: boolean }) {
-	return <div className="space-y-3" data-testid="subscription-connections"><ChatGPTConnection setup={setup} />{NATIVE_SUBSCRIPTIONS.map((p) => <NativeSubscriptionConnection key={p.providerId} providerId={p.providerId} />)}</div>;
+	// Providers uses ordinary settings-label typography. The setup surface
+	// keeps its existing compact labels; dialogs and actions are untouched.
+	const labelClassName = setup ? undefined : "font-prose text-(length:--lh-prose-size) text-foreground";
+	return <div className="space-y-3" data-testid="subscription-connections"><ChatGPTConnection setup={setup} labelClassName={labelClassName} />{NATIVE_SUBSCRIPTIONS.map((p) => <NativeSubscriptionConnection key={p.providerId} providerId={p.providerId} labelClassName={labelClassName} />)}</div>;
 }
 export function NativeSubscriptionBackgroundAccess({ provider }: { provider: string | undefined }) {
 	const { t } = useI18n();

components/settings/update-settings.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { BrailleSpinner } from "@/components/braille-spinner";
+import { SettingsRow, Toggle } from "./controls.tsx";
+
+/** Observational snapshot from electron/main.cjs; never updater permission. */
+export type UpdateState = {
+	status: "idle" | "checking" | "downloading" | "up-to-date" | "downloaded" | "error" | "disabled";
+	version: string | null;
+	revision: number;
+};
+
+export const APP_VERSION = process.env.LH_VERSION ?? "";
+const HOMEPAGE = process.env.LH_HOMEPAGE ?? "";
+export const MANUAL_UPDATE_HINT = "Checking downloads available updates. Downloaded updates install when you quit the app.";
+export const AUTO_UPDATE_HINT = "Check at startup and every 24 hours. Turning this off does not stop updates already in progress or ready to install.";
+const UPDATE_ERROR = "Couldn’t check for updates. Try again later.";
+
+/** Subscribe before requesting the snapshot. IPC replies and pushes can
+ * cross; a revision prevents an older reply from hiding a newer event.
+ * The banner shares this read-only observer so late loads recover too. */
+export function useUpdateState() {
+	const [state, setState] = useState<UpdateState | null>(null);
+	const [failed, setFailed] = useState(false);
+	useEffect(() => {
+		const lh = window.lh;
+		if (!lh) return;
+		let live = true;
+		let revision = -1;
+		const accept = (next: UpdateState) => {
+			if (!live || next.revision < revision) return;
+			revision = next.revision;
+			setState(next);
+			setFailed(false);
+		};
+		const off = lh.onUpdateStatus?.(accept);
+		void lh.getUpdateState?.().then(accept).catch(() => {
+			if (live && revision === -1) setFailed(true);
+		});
+		return () => { live = false; off?.(); };
+	}, []);
+	return { state, failed };
+}
+
+export function updateStatusText(state: UpdateState | null): string | null {
+	switch (state?.status) {
+		case "checking": return "Checking for updates…";
+		case "downloading": return state.version ? `Downloading version ${state.version}…` : "Downloading an update…";
+		case "up-to-date": return "No newer version was found at the last check.";
+		case "downloaded": return `${state.version ? `Version ${state.version}` : "An update"} is ready. It will install when you quit the app.`;
+		case "error": return UPDATE_ERROR;
+		default: return null;
+	}
+}
+
+/** Version information is useful everywhere; update controls only belong
+ * to a shell with an available updater. Opening this row never checks. */
+export function UpdateSettings({
+	autoUpdate,
+	onAutoUpdateChange,
+	version = APP_VERSION,
+	homepage = HOMEPAGE,
+}: {
+	autoUpdate: boolean;
+	onAutoUpdateChange: (on: boolean) => void;
+	version?: string;
+	homepage?: string;
+}) {
+	const { state, failed } = useUpdateState();
+	const [checkFailed, setCheckFailed] = useState(false);
+	useEffect(() => setCheckFailed(false), [state]);
+	const active = state !== null && state.status !== "disabled";
+	const busy = state?.status === "checking" || state?.status === "downloading";
+	const status = state?.status === "downloaded" ? updateStatusText(state)
+		: failed || checkFailed ? UPDATE_ERROR : updateStatusText(state);
+	const releaseNotes = version && homepage ? `${homepage}/releases/tag/v${version}` : null;
+	const check = () => {
+		setCheckFailed(false);
+		void window.lh?.checkForUpdates?.().catch(() => setCheckFailed(true));
+	};
+
+	return (
+		<>
+			<SettingsRow
+				label={`Version ${version || "unknown"}`}
+				testid="row-version"
+				hint={
+					<>
+						{status && <span className="block" role="status" data-testid="update-status">{status}</span>}
+						{active && <span className="block">{MANUAL_UPDATE_HINT}</span>}
+						{releaseNotes && <a href={releaseNotes} target="_blank" rel="noopener noreferrer" className="underline-offset-2 hover:text-foreground hover:underline" data-testid="release-notes">Release notes</a>}
+					</>
+				}
+			>
+				{active && (state.status === "downloaded" ? (
+					<Button type="button" size="xs" className="cursor-pointer" data-testid="update-restart" onClick={() => window.lh?.installUpdate?.()}>Restart</Button>
+				) : (
+					<Button type="button" size="xs" variant="outline" className="cursor-pointer disabled:cursor-not-allowed" data-testid="update-check" disabled={busy} aria-busy={busy} onClick={check}>
+						{busy && <BrailleSpinner label={state.status === "downloading" ? "Downloading update" : "Checking for updates"} />}
+						Check for updates
+					</Button>
+				))}
+			</SettingsRow>
+			{active && (
+				<SettingsRow label="Automatic updates" hint={AUTO_UPDATE_HINT} testid="row-auto-update">
+					<Toggle checked={autoUpdate} label="auto update" onChange={onAutoUpdateChange} />
+				</SettingsRow>
+			)}
+		</>
+	);
+}

components/setup-cta.tsx

@@ -17,10 +17,10 @@ import { useI18n } from "@/components/i18n";
  * its own save), the same re-read pattern chat.tsx uses for "models".
  */
 
-import type { AuthKeyStatus } from "@/src/core";
+import { useEffect, useState } from "react";
+import { CUSTOM_PROVIDER, MODEL_SLOTS, type AuthKeyStatus, type ModelCatalogResponse } from "@/src/core";
 import { classifyKeys, type ProviderKeyInfo } from "@/components/settings/keys-section";
-import { useModelCatalog } from "@/components/model-picker";
-import type { ModelCatalogResponse } from "@/src/core";
+import { useModelCatalog } from "@/components/model-catalog";
 
 /** Pure: does a MODEL-PROVIDER key exist among the statuses? Reuses
  *  classifyKeys (the keys section's own classification — no drift):
@@ -31,7 +31,40 @@ export function hasProviderKey(
 	statuses: readonly AuthKeyStatus[],
 	providers: readonly ProviderKeyInfo[] | undefined,
 ): boolean {
-	return classifyKeys(statuses, providers).providerRows.some((s) => s.present);
+	// A stored custom-endpoint key counts too: classifyKeys drops it from
+	// providerRows (it has its own dedicated row), but a connected custom
+	// endpoint IS a way to run inference, so it clears the zero-keys gate.
+	return (
+		classifyKeys(statuses, providers).providerRows.some((s) => s.present) ||
+		statuses.some((s) => s.id === CUSTOM_PROVIDER.envVar && s.present)
+	);
+}
+
+/** Completeness is saved identity, not current provider availability. */
+export function savedSlotsConfigured(slots: ModelCatalogResponse["slots"] | undefined): boolean {
+	return MODEL_SLOTS.every((slot) => !!slots?.[slot]?.model);
+}
+
+/** Keep the last known completeness during connection invalidation, but
+ * follow ordinary slot repairs as soon as their shared snapshot arrives. */
+export function useModelSetup(initialConfigured: boolean) {
+	const { catalog } = useModelCatalog();
+	const [lastConfigured, setLastConfigured] = useState(initialConfigured);
+	const configured = catalog ? savedSlotsConfigured(catalog.slots) : lastConfigured;
+	useEffect(() => { if (catalog) setLastConfigured(savedSlotsConfigured(catalog.slots)); }, [catalog]);
+	return { catalog, configured, zeroKeys: catalog ? !catalog.providers.some((p) => p.keyPresent) : false };
+}
+
+/** A known unavailable route needs an explicit replacement, never an
+ * automatic provider/model substitution. Unknown metadata defers to the
+ * server's admission gate instead of declaring a route disconnected. */
+export function selectedModelUnavailable(catalog: ModelCatalogResponse | undefined, selected: string | undefined): boolean {
+	return !!catalog && !!selected && !catalog.models.some((m) => `${m.provider}:${m.id}` === selected);
+}
+
+/** Reuse the ordinary control (also opened by the existing keyboard action). */
+export function openModelPicker(): void {
+	window.dispatchEvent(new CustomEvent("lh:kbd-open-model-picker"));
 }
 
 /** The zero-keys truth for the calling page: TRUE only after a

components/setup-dialog.tsx

@@ -15,7 +15,8 @@ import { useI18n } from "@/components/i18n";
  * STAGED BY DEPENDENCY (owner, 2026-09-20: "first keys, then models —
  * there's no point presenting the model picker before the user has set a
  * key because there are no models to pick then"):
- *   Stage 1 — no keyed provider: a SELF-CONTAINED first-key screen
+ *   Unknown catalog — neutral loading (or error/Retry), never a key screen.
+ *   Stage 1 — no keyed provider or saved selection: a SELF-CONTAINED first-key screen
  *     (zero-keys wave, owner 2026-09-25): provider picker + one key
  *     input + save via PUT /api/keys/:id. The dialog STAYS MOUNTED —
  *     saving dispatches the "keys" signal, the fetch effect re-runs on
@@ -25,6 +26,9 @@ import { useI18n } from "@/components/i18n";
  *   Stage 2 — Strong → Cheap → Vision pickers over the FEDERATED catalog
  *     (keyed providers only), the vision slot filtered to image-capable
  *     models, in the app's shared dropdown language (ModelMenuList).
+ *     Saved disconnected selections and edits are retained internally in
+ *     the exclusive provider stage. Connecting with all slots already saved
+ *     closes setup; otherwise the pickers require only the missing slots.
  *     All three required (owner: no skip, no defaults); Save PUTs the
  *     models section and reports onDone(models).
  *
@@ -38,13 +42,15 @@ import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useBackdropDismiss } from "@/components/backdrop-dismiss";
 import type React from "react";
-import { type ModelCatalogEntry, type ModelSlotName, type ModelsSettings } from "@/src/core";
+import { type ModelCatalogEntry, type ModelSlotName, type ModelsSettings, CUSTOM_PROVIDER } from "@/src/core";
 import { prettyModel } from "@/components/usage-format";
 import { ModelMenuList } from "@/components/settings/model-menu";
 import { MenuShell } from "@/components/menu-shell";
 import { notifySettingsSaved, useSettingsSaved } from "@/components/settings-signal";
+import { useModelCatalog } from "@/components/model-catalog";
+import { savedSlotsConfigured } from "@/components/setup-cta";
 import { Hint } from "@/components/ui/hint";
-import { type ProviderKeyInfo } from "@/components/settings/keys-section";
+import { type ProviderKeyInfo, CUSTOM_PROVIDER_INFO, CustomEndpointSetup } from "@/components/settings/keys-section";
 import { ProviderMenuList } from "@/components/settings/model-menu";
 import { ChatGPTBackgroundAccess } from "@/components/settings/chatgpt-connection";
 import { NativeSubscriptionBackgroundAccess, SubscriptionConnections } from "@/components/settings/subscription-connections";
@@ -75,27 +81,26 @@ interface ModelsBody {
  *  (owner's dependency ordering). Exported for tests. */
 export function setupStage(
 	providers: { id: string; keyPresent: boolean }[] | null,
-): "keys" | "pickers" {
-	if (providers === null) return "keys"; // fetch failed → the honest fallback
+): "loading" | "keys" | "pickers" {
+	if (providers === null) return "loading";
 	return providers.some((p) => p.keyPresent) ? "pickers" : "keys";
 }
 
-/** Prefill (owner, BYOK wave 2026-09-22): each pinned tier opens with its
- *  pick — matched in the FEDERATED catalog (a lapsed key's pin does not
- *  prefill); unpinned tiers stay empty and carry the "needed" mark.
- *  First-run = nothing pinned → all three empty + marked. Exported pure
- *  for tests. */
+type ModelSelection = Pick<ModelCatalogEntry, "provider" | "id">;
+
+/** Saved identity is independent of selectable metadata. A disconnected
+ * pin still prefills; only the menu is restricted to the live catalog. */
 export function prefillFromSlots(
 	models: ModelCatalogEntry[],
 	slots: Record<ModelSlotName, { model: { provider: string; id: string } } | null> | undefined,
-): Partial<Record<ModelSlotName, ModelCatalogEntry>> {
-	const pre: Partial<Record<ModelSlotName, ModelCatalogEntry>> = {};
+): Partial<Record<ModelSlotName, ModelSelection>> {
+	const pre: Partial<Record<ModelSlotName, ModelSelection>> = {};
 	for (const slot of SLOT_ORDER) {
 		const pin = slots?.[slot];
 		const entry = pin?.model
 			? models.find((m) => m.provider === pin.model!.provider && m.id === pin.model!.id)
 			: undefined;
-		if (entry) pre[slot] = entry;
+		if (pin?.model) pre[slot] = entry ?? pin.model;
 	}
 	return pre;
 }
@@ -131,6 +136,8 @@ export function SetupKeysBody({
 	onValue,
 	onSave,
 	menuAnchor,
+	isCustom,
+	onCustomSaved,
 }: {
 	/** The full provider roster (GET /api/keys providers) — undefined
 	 *  while it loads; the picker renders an honest empty state then. */
@@ -148,6 +155,10 @@ export function SetupKeysBody({
 	onSave: () => void;
 	/** The MenuShell anchor — wired by the wrapper (its triggerRef). */
 	menuAnchor: React.RefObject<HTMLDivElement | null>;
+	/** Chosen provider is the custom endpoint: a base URL field joins the key
+	 *  field. All three optional so plain-key callers (and tests) stay unchanged. */
+	isCustom?: boolean;
+	onCustomSaved?: () => void;
 }) {
 	const { t } = useI18n();
 	return (
@@ -181,33 +192,35 @@ export function SetupKeysBody({
 						</MenuShell>
 					)}
 				</div>
-				{provider && (
-					<div className="flex max-w-96 items-center gap-2">
-						<input
-							type="text"
-							value={value}
-							onChange={(e) => onValue(e.target.value)}
-							onKeyDown={(e) => {
-								if (e.key === "Enter" && value.trim()) onSave();
-							}}
-							placeholder={t("Paste key…")}
-							aria-label={t("{v0} key", { v0: provider.label })}
-							data-testid="setup-key-input"
-							disabled={saving}
-							autoFocus
-							className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
-						/>
-						<button
-							type="button"
-							onClick={onSave}
-							disabled={saving || !value.trim()}
-							data-testid="setup-key-save"
-							className="shrink-0 rounded-sm border border-border bg-background px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-40"
-						>
-							{saving ? t("Saving…") : t("Save key")}
-						</button>
+				{provider && (isCustom ? <CustomEndpointSetup onSaved={onCustomSaved ?? onSave} /> : (
+					<div className="flex max-w-96 flex-col gap-2">
+						<div className="flex items-center gap-2">
+							<input
+								type="text"
+								value={value}
+								onChange={(e) => onValue(e.target.value)}
+								onKeyDown={(e) => {
+									if (e.key === "Enter" && value.trim()) onSave();
+								}}
+								placeholder={t("Paste key…")}
+								aria-label={t("{v0} key", { v0: provider.label })}
+								data-testid="setup-key-input"
+								disabled={saving}
+								autoFocus
+								className="h-7 min-w-0 flex-1 rounded-sm border border-border bg-background px-1.5 font-mono text-xs text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-muted-foreground/50"
+							/>
+							<button
+								type="button"
+								onClick={onSave}
+								disabled={saving || !value.trim()}
+								data-testid="setup-key-save"
+								className="shrink-0 rounded-sm border border-border bg-background px-3 py-1.5 font-ui text-xs text-foreground transition-colors hover:border-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-40"
+							>
+								{saving ? t("Saving…") : t("Save key")}
+							</button>
+						</div>
 					</div>
-				)}
+				))}
 				{error && (
 					<p role="alert" data-testid="setup-key-error" className="text-xs text-red-400">
 						{t(error)}
@@ -219,25 +232,39 @@ export function SetupKeysBody({
 	);
 }
 
-export function SetupDialog({
-	open,
-	onClose,
-	/** Saved: the models section landed; the caller marks configured (the
-	 *  draft stays put — save never sends). */
-	onDone,
-}: {
+function prefillLevels(body: ModelsBody | undefined): Partial<Record<ModelSlotName, ThinkingLevel>> {
+	const levels: Partial<Record<ModelSlotName, ThinkingLevel>> = {};
+	for (const slot of SLOT_ORDER) {
+		const pin = body?.slots?.[slot];
+		const entry = body?.models.find((m) => m.provider === pin?.model.provider && m.id === pin.model.id);
+		if (pin?.thinkingLevel !== undefined) levels[slot] = pin.thinkingLevel;
+		else if (entry) levels[slot] = prefillLevelFromPin(entry, pin);
+	}
+	return levels;
+}
+
+interface SetupDialogProps {
 	open: boolean;
 	onClose: () => void;
+	/** Saving never sends the caller's draft. */
 	onDone: (models: ModelsSettings) => void;
-}) {
+}
+
+export function SetupDialog(props: SetupDialogProps) {
+	// An open owns its draft. Mount-time cache seeding avoids a key-screen
+	// first frame, and reopening cannot reuse a previous open's edits.
+	return props.open ? <OpenSetupDialog {...props} /> : null;
+}
+
+function OpenSetupDialog({ onClose, onDone }: SetupDialogProps) {
 	const { t } = useI18n();
 	const backdropDismiss = useBackdropDismiss(onClose);
-	const [body, setBody] = useState<ModelsBody | null>(null);
-	const [failed, setFailed] = useState(false);
-	const [picked, setPicked] = useState<Partial<Record<ModelSlotName, ModelCatalogEntry>>>({});
-	/** Per-slot thinking level (chunk 2): populated from the ordering on
-	 *  every fresh model pick, editable — an explicit pick always wins. */
-	const [levels, setLevels] = useState<Partial<Record<ModelSlotName, ThinkingLevel>>>({});
+	const { catalog, failed, refresh } = useModelCatalog();
+	const providerStageSeen = useRef(false);
+	const connectionCloseRequested = useRef(false);
+	const [picked, setPicked] = useState(() => prefillFromSlots(catalog?.models ?? [], catalog?.slots));
+	const [levels, setLevels] = useState(() => prefillLevels(catalog));
+	const editedSlots = useRef(new Set<ModelSlotName>());
 	const [saving, setSaving] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 	const [openMenu, setOpenMenu] = useState<{ slot: ModelSlotName; kind: "model" | "thinking" } | null>(null);
@@ -252,64 +279,65 @@ export function SetupDialog({
 	const [keyError, setKeyError] = useState<string | null>(null);
 	const [keyMenuOpen, setKeyMenuOpen] = useState(false);
 	// Stage 1's provider-picker trigger wrapper — the shared shell's anchor.
-	// Declared with the other hooks: the early `if (!open) return null` sits
-	// below them all. (Stage 2's slot menus anchor by anchorTestid instead —
-	// see the slot MenuShell below for why a ref cannot work there.)
+	// Stage 2's slot menus anchor by anchorTestid instead — see the slot
+	// MenuShell below for why a freshly attached ref cannot work there.
 	const keyTriggerRef = useRef<HTMLDivElement>(null);
 
 	// The keys signal (zero-keys wave): keys-section saves/deletes AND
 	// THIS dialog's own first-key save dispatch it; the fetch effect below
-	// re-runs on it, so saving a key flips the stage to the pickers with
-	// the widened catalog — no restart, no Settings round-trip.
+	// re-runs on it, so saving a key widens the catalog. Incomplete saved
+	// slots advance to pickers; complete saved slots just close setup.
 	const [keysTick, setKeysTick] = useState(0);
 	useSettingsSaved((section) => {
 		if (section === "keys") setKeysTick((t) => t + 1);
 	});
 
-	// Fresh /api/models per open AND per keys change — a key saved a
-	// moment ago (stage 1's own screen) widens the pickers immediately.
 	useEffect(() => {
-		if (!open) return;
 		let cancelled = false;
-		setBody(null);
-		setPicked({});
-		setLevels({});
-		setError(null);
 		fetch("/api/keys")
 			.then((r) => r.json())
 			.then((b: { providers?: ProviderKeyInfo[] }) => { if (!cancelled) setKeyProviders(b.providers ?? []); })
 			.catch(() => { if (!cancelled) setKeyProviders([]); });
-		fetch("/api/models")
-			.then((r) => { if (!r.ok) throw new Error("Catalog unavailable"); return r.json(); })
-			.then((b: ModelsBody) => {
-				if (cancelled) return;
-				setBody(b);
-				setFailed(false);
-				// Prefill (owner, 2026-09-22): each pinned tier opens with its
-				// pick (matched in the FEDERATED catalog — a lapsed key's pin
-				// does not prefill); unpinned tiers stay empty and carry the
-				// "needed" mark. First-run = nothing pinned → all three marked.
-				const pre = prefillFromSlots(b.models, b.slots);
-				setPicked(pre);
-				// Levels prefill with the pins (chunk 2): stored level if still
-				// supported, else the ordering's level for the pinned model.
-				const preLevels: Partial<Record<ModelSlotName, ThinkingLevel>> = {};
-				for (const slot of SLOT_ORDER) {
-					const entry = pre[slot];
-					if (entry) preLevels[slot] = prefillLevelFromPin(entry, b.slots?.[slot]);
-				}
-				setLevels(preLevels);
-			})
-			.catch(() => { if (!cancelled) setFailed(true); });
 		return () => { cancelled = true; };
-	}, [open, keysTick]);
+	}, [keysTick]);
+
+	useEffect(() => {
+		if (!catalog) return;
+		const pre = prefillFromSlots(catalog.models, catalog.slots);
+		const preLevels = prefillLevels(catalog);
+		// Fresh metadata is always used, but a response cannot reset an
+		// edited slot, including a level chosen while the request was pending.
+		setPicked((prev) => {
+			const next = { ...prev };
+			for (const slot of SLOT_ORDER) if (!editedSlots.current.has(slot)) {
+				if (pre[slot]) next[slot] = pre[slot]; else delete next[slot];
+			}
+			return next;
+		});
+		setLevels((prev) => {
+			const next = { ...prev };
+			for (const slot of SLOT_ORDER) if (!editedSlots.current.has(slot)) {
+				if (preLevels[slot] !== undefined) next[slot] = preLevels[slot]; else delete next[slot];
+			}
+			return next;
+		});
+	}, [catalog]);
+
+	const stage = setupStage(catalog?.providers ?? null);
+	const closeAfterConnection = stage === "pickers" && providerStageSeen.current && savedSlotsConfigured(catalog?.slots);
+	useEffect(() => {
+		if (stage === "keys") providerStageSeen.current = true;
+		if (closeAfterConnection && !connectionCloseRequested.current) {
+			connectionCloseRequested.current = true;
+			onClose(); // Connection recovery is not a model-settings save.
+		}
+	}, [stage, closeAfterConnection, onClose]);
 
 	// Esc + outside-click — layered dismissal, closable WITHOUT
 	// configuring (browsing stays possible; the gate is the send
 	// interception, not this dialog). An open slot menu eats Esc first
 	// (and any click outside it); only a bare Esc closes the dialog.
 	useEffect(() => {
-		if (!open) return;
 		const onKey = (e: KeyboardEvent) => {
 			if (e.key !== "Escape") return;
 			// THE ONE-ESC LAW (owner, keyboard round 2026-10-06): claim at
@@ -344,26 +372,28 @@ export function SetupDialog({
 			document.removeEventListener("keydown", onKey);
 			document.removeEventListener("pointerdown", onPointerDown);
 		};
-	}, [open, onClose, openMenu, keyMenuOpen]);
+	}, [onClose, openMenu, keyMenuOpen]);
 
-	if (!open) return null;
+	// Do not briefly paint model pickers between successful connection and
+	// closing an already-configured setup. No saved model/thinking writes.
+	if (closeAfterConnection) return null;
 
-	const stage = failed ? "keys" : setupStage(body ? body.providers : null);
 	const allPicked = SLOT_ORDER.every((s) => picked[s]);
 
 	/** Stage 1's save: PUT the pasted key, dispatch the keys signal, and
-	 *  CLEAN the local screen — the signal re-fetch widens the catalog and
-	 *  the stage flips to the pickers on its own; the dialog stays mounted
-	 *  the whole way. Shape-gate 400s keep their user-facing line inline. */
+	 *  CLEAN the local key field. The fresh catalog decides whether to
+	 *  close recovery or advance to the missing model slots. Shape-gate
+	 *  400s keep their user-facing line inline. */
 	async function saveKey() {
-		if (!keyProvider || !keyValue.trim() || keySaving) return;
+		if (!keyProvider || keySaving) return;
+		if (!keyValue.trim()) return;
 		setKeySaving(true);
 		setKeyError(null);
 		const res = await fetch(`/api/keys/${encodeURIComponent(keyProvider.envVar)}`, {
-			method: "PUT",
-			headers: { "content-type": "application/json" },
-			body: JSON.stringify({ value: keyValue }),
-		}).catch(() => null);
+						method: "PUT",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({ value: keyValue }),
+					}).catch(() => null);
 		setKeySaving(false);
 		if (!res || !res.ok) {
 			const body = (await res?.json().catch(() => ({}))) as { error?: string } | undefined;
@@ -401,6 +431,22 @@ export function SetupDialog({
 		onDone(models);
 	}
 
+	const keysBody = <SetupKeysBody
+		providers={keyProviders ? [...keyProviders, CUSTOM_PROVIDER_INFO] : undefined}
+		provider={keyProvider}
+		value={keyValue}
+		saving={keySaving}
+		error={keyError}
+		menuOpen={keyMenuOpen}
+		menuAnchor={keyTriggerRef}
+		isCustom={keyProvider?.id === CUSTOM_PROVIDER.id}
+		onCustomSaved={() => { setKeyProvider(null); notifySettingsSaved("keys"); }}
+		onToggleMenu={() => setKeyMenuOpen((v) => !v)}
+		onPick={(p) => { setKeyProvider(p); setKeyMenuOpen(false); setKeyError(null); }}
+		onValue={setKeyValue}
+		onSave={() => void saveKey()}
+	/>;
+
 	return createPortal(
 		<div
 			className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
@@ -430,31 +476,15 @@ export function SetupDialog({
 </Hint>
 				</header>
 
-				{stage === "keys" ? (
-					<div className="flex flex-col px-6 py-5">
-						{failed ? (
-							<p className="text-sm text-foreground">
-								{t("Model catalog could not be loaded. Check the connection and retry.")}</p>
-						) : (
-							<SetupKeysBody
-								providers={keyProviders}
-								provider={keyProvider}
-								value={keyValue}
-								saving={keySaving}
-								error={t(keyError)}
-								menuOpen={keyMenuOpen}
-								menuAnchor={keyTriggerRef}
-								onToggleMenu={() => setKeyMenuOpen((v) => !v)}
-								onPick={(p) => {
-									setKeyProvider(p);
-									setKeyMenuOpen(false);
-									setKeyError(null);
-								}}
-								onValue={setKeyValue}
-								onSave={() => void saveKey()}
-							/>
-						)}
-					</div>
+				{failed && (
+					<p role="alert" data-testid="setup-catalog-error" className="px-6 py-3 text-sm text-foreground">
+						{t("Model catalog could not be loaded. Check the connection and retry.")} <button type="button" data-testid="setup-retry" className="underline" onClick={refresh}>{t("Retry")}</button>
+					</p>
+				)}
+				{stage === "loading" ? (
+					!failed && <p data-testid="setup-stage-loading" role="status" className="px-6 py-5 text-xs text-muted-foreground">Loading models…</p>
+				) : stage === "keys" ? (
+					<div className="flex flex-col px-6 py-5">{keysBody}</div>
 				) : (
 					<div className="flex flex-col gap-4 overflow-y-auto px-6 py-5" data-testid="setup-stage-pickers">
 						<p className="text-xs text-muted-foreground">
@@ -462,14 +492,18 @@ export function SetupDialog({
 						{SLOT_ORDER.map((slot) => {
 							const entry = picked[slot];
 							const level = levels[slot];
-							const levelsForEntry = entry?.supportedLevels ?? [];
-							const catalog =
-								slot === "vision" ? body?.models.filter((m) => m.input.includes("image")) : body?.models;
+							const metadata = catalog?.models.find((m) => m.id === entry?.id && m.provider === entry.provider);
+							// Unavailable metadata cannot erase or clamp a saved preference.
+							const levelsForEntry = metadata?.supportedLevels ?? (entry ? Object.keys(THINKING_LABEL) : []);
+							const available = catalog?.models ?? (failed ? [] : undefined);
+							const slotCatalog = slot === "vision"
+								? available?.filter((m) => m.input.includes("image") || m.provider === CUSTOM_PROVIDER.id)
+								: available;
 							return (
 								<div key={slot} data-testid={`setup-slot-${slot}`} className="flex flex-col gap-1.5">
 									<span className="flex items-center gap-1.5">
-										<span className="font-ui text-sm text-foreground">{t(SLOT_META[slot].label)}</span>
-										{!body?.slots?.[slot]?.model && !picked[slot] && (
+										<span className="font-ui text-sm text-foreground">{SLOT_META[slot].label}</span>
+										{!catalog?.slots?.[slot]?.model && !picked[slot] && (
 											<span
 												data-testid={`setup-needed-${slot}`}
 												className="rounded-sm border border-border px-1 py-0.5 text-[10px] font-normal tracking-wide text-muted-foreground"
@@ -481,6 +515,7 @@ export function SetupDialog({
 									{slot !== "strong" && <><ChatGPTBackgroundAccess provider={entry?.provider} /><NativeSubscriptionBackgroundAccess provider={entry?.provider} /></>}
 									<div className="flex items-center gap-2">
 										<div className="relative flex-1">
+											<Hint label={entry ? `${entry.provider}:${entry.id}` : "Pick a model…"}>
 											<button
 												type="button"
 												aria-label={t("{v0} model", { v0: SLOT_META[slot].label })}
@@ -494,6 +529,7 @@ export function SetupDialog({
 													▾
 												</span>
 											</button>
+											</Hint>
 											{/* Anchor by TESTID, not a ref (the settings-section pattern):
 											    React attaches a host element's ref AFTER its descendants'
 											    layout effects run, so a ref freshly attached in this same
@@ -512,10 +548,12 @@ export function SetupDialog({
 													menuClass="flex w-[22rem] flex-col rounded-xl border border-border bg-card p-2 text-xs shadow-xl"
 												>
 													<ModelMenuList
-														models={catalog}
+														models={slotCatalog}
 														effectiveId={entry?.id}
 														effectiveProvider={entry?.provider}
+														vision={slot === "vision"}
 														onPick={(m) => {
+															editedSlots.current.add(slot);
 															setPicked((prev) => ({ ...prev, [slot]: m }));
 															// Auto-populate (chunk 2, owner: "populate
 															// everywhere"): no explicit level → the
@@ -527,7 +565,7 @@ export function SetupDialog({
 															}));
 															setOpenMenu(null);
 														}}
-														footer={catalog && catalog.length === 0 ? t("No image-capable models. Add a provider key with access to a vision model.") : undefined}
+														footer={slotCatalog && slotCatalog.length === 0 && slot === "vision" ? "No image-capable models. Add a provider key with access to a vision model." : undefined}
 													/>
 												</MenuShell>
 											)}
@@ -563,6 +601,7 @@ export function SetupDialog({
 														levels={levelsForEntry.map(String)}
 														effectiveLevel={level}
 														onPick={(lv) => {
+															editedSlots.current.add(slot);
 															setLevels((prev) => ({ ...prev, [slot]: lv as ThinkingLevel }));
 															setOpenMenu(null);
 														}}

components/sidebar.tsx

@@ -52,6 +52,8 @@ const STORAGE_KEY = "lh:sidebar-open";
  * Mirrors SIDEBAR_AUTOCLOSE in electron/main.cjs — keep in sync.
  */
 import type { ChatGPTControlBridge, NativeSubscriptionControlBridge } from "@/src/core";
+import type { UpdateState } from "@/components/settings/update-settings.tsx";
+import { FilePathDropZone } from "@/components/file-path-drop-zone";
 const SIDEBAR_AUTOCLOSE = 928;
 
 // Module scope, guarded for SSR (the server has no navigator).
@@ -63,6 +65,11 @@ declare global {
 		lh?: {
 			/** Read-only host OS; determines the native-control gutter. */
 			platform?: string;
+			/** Resolve an OS-backed File without copying/uploading its contents. */
+			getPathForFile?: (file: File) => string;
+			/** External Next desktop-dev uses the server's web connections. */
+			subscriptionTransport?: "desktop" | "web";
+			openSubscriptionBrowser?: (action: string) => Promise<void>;
 			chatgpt?: ChatGPTControlBridge;
 			subscriptions?: NativeSubscriptionControlBridge;
 			expandWindow: () => void;
@@ -70,9 +77,13 @@ declare global {
 			onZoom?: (cb: (factor: number) => void) => () => void;
 			getZoom?: () => Promise<number>;
 			setLanguage?: (language: "en" | "ru") => void;
-			/** Auto-update channel (Wave C, 2026-10-10): "lh:update-status" pushes once a staged update exists. */
-			onUpdateStatus?: (cb: (status: { status: string; version: string | null }) => void) => () => void;
+			/** Observational update events and a snapshot for late subscribers. */
+			onUpdateStatus?: (cb: (status: UpdateState) => void) => () => void;
+			getUpdateState?: () => Promise<UpdateState>;
+			/** Explicit manual check also downloads and stages available updates. */
+			checkForUpdates?: () => Promise<void>;
 			installUpdate?: () => void;
+			onOpenSettings?: (cb: (section: string) => void) => () => void;
 		};
 	}
 }
@@ -941,7 +952,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 	return (
 		<SettingsDialogProvider>
 			<SessionsSidebar />
-			<main className="min-w-0 flex-1">{children}</main>
+			<FilePathDropZone className="relative min-w-0 flex-1">{children}</FilePathDropZone>
 			{/* The single document-level keydown listener (keyboard wave A) —
 			    after the content in the tree, but it's window-level so order only
 			    matters for the events it dispatches, never for DOM priority. */}

components/start-session.ts

@@ -0,0 +1,34 @@
+import { clearOpeningPrompt, OPENING_PROMPT_FAILURE, stashOpeningPrompt } from "./opening-prompt";
+
+interface SessionCreation {
+	title: string;
+	kind?: "practice";
+	graphContext?: { propositions: readonly { id: string; name: string; statement: string }[] };
+}
+
+/** Per source-composer instance. Retain a successful creation if storage
+ * fails, so an unchanged retry does not create another empty session.
+ * Changed text/context/settings is a different start, not a stale title.
+ */
+export class SessionStarter {
+	private created?: { identity: string; id: string };
+
+	async start(body: SessionCreation, fetchLike: typeof fetch, settingsIdentity?: string): Promise<string> {
+		const identity = JSON.stringify([body, settingsIdentity]);
+		if (this.created?.identity !== identity) {
+			if (this.created) clearOpeningPrompt(this.created.id);
+			this.created = undefined;
+			const res = await fetchLike("/api/chats", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(body),
+			});
+			if (!res.ok) throw new Error(OPENING_PROMPT_FAILURE);
+			const result = await res.json() as { id?: unknown };
+			if (typeof result.id !== "string" || !/^[A-Za-z0-9_-]+$/.test(result.id)) throw new Error(OPENING_PROMPT_FAILURE);
+			this.created = { identity, id: result.id };
+		}
+		if (!stashOpeningPrompt(this.created.id, body.title)) throw new Error(OPENING_PROMPT_FAILURE);
+		return `/chat/${this.created.id}`;
+	}
+}

components/stats-bar.tsx

@@ -2,8 +2,8 @@
 import { useI18n } from "@/components/i18n";
 
 
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { subscriptionLabels, subscriptionLabel, type Language, type SessionPricing, type TurnUsage } from "@/src/core";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { CLAUDE_CODE_PROVIDER, subscriptionLabels, subscriptionLabel, type cliContextWindowOf, type Language, type SessionPricing, type TurnUsage } from "@/src/core";
 import { formatTokens, formatUsd, planCostLabel, prettyModel } from "@/components/usage-format";
 import { ModelControl, catalogLimits, useModelCatalog } from "@/components/model-picker";
 
@@ -12,6 +12,15 @@ export function formatContextMeasurement(tokens: number | null, limit: number |
 	return limit === null ? numerator : `${numerator} / ${formatTokens(limit, language)}`;
 }
 
+/** CLI aliases have no global catalog limit: only this session's matching
+ * response can supply a denominator. Other providers keep their catalog join. */
+export function contextLimitForModel(model: string | undefined, limits: ReadonlyMap<string, number> | undefined,
+	cliWindow: ReturnType<typeof cliContextWindowOf> = null): number | null {
+	if (!model) return null;
+	if (model.startsWith(`${CLAUDE_CODE_PROVIDER}:`)) return cliWindow?.model === model ? cliWindow.tokens : null;
+	return limits?.get(model) ?? null;
+}
+
 /**
  * The below-composer stats bar (wave 4 observability): the session's
  * money/context footprint as one quiet row beneath the composer —
@@ -26,25 +35,31 @@ export function formatContextMeasurement(tokens: number | null, limit: number |
  * Spending arrives already priced by the server through Pi's catalog and
  * calculator. Missing cost stays "—", never fake zero. Context is a separate
  * completed-conversation measurement, never a money-log/summarizer fold or
- * transcript estimate. Its catalog denominator follows the selected model;
- * model changes preserve the numerator. Successful compaction clears it to ?.
+ * transcript estimate. Its denominator follows the selected model, from the
+ * catalog or the session's CLI report; model changes preserve the numerator.
+ * Successful compaction clears the numerator and any old CLI report.
  */
 export function StatsBar({
 	turns,
 	contextTokens = null,
+	cliContextWindow = null,
 	pricing,
 	dictationSlot,
 	chatId,
 	leadingSlot,
+	onModelChange,
 }: {
 	turns: TurnUsage[];
 	contextTokens?: number | null;
+	cliContextWindow?: ReturnType<typeof cliContextWindowOf>;
 	pricing?: SessionPricing;
 	/** The bound session (per-session models, owner 2026-09-28): present
 	 *  on the in-session bar — the model control binds THE SESSION'S own
 	 *  record; absent on the draft surfaces, where it binds the strong
 	 *  slot (the new-session default). */
 	chatId?: string;
+	/** The same effective identity the visible model control owns. */
+	onModelChange?: (model: string | undefined) => void;
 	/** The dictation strip (STT wave, 2026-09-17): the row's middle is dead
 	 *  space between the session data and the model control — the mic
 	 *  button lives there, and while recording the meter unfurls to fill
@@ -58,6 +73,10 @@ export function StatsBar({
 	const { t, language } = useI18n();
 	const [open, setOpen] = useState(false);
 	const [selectedModel, setSelectedModel] = useState<string | undefined>();
+	const modelChanged = useCallback((model: string | undefined) => {
+		setSelectedModel(model);
+		onModelChange?.(model);
+	}, [onModelChange]);
 	// Same dropdown discipline as the model control (owner, df4433f treatment,
 	// stats round 1): close on any pointerdown outside the bar or on Escape.
 	const barRef = useRef<HTMLDivElement>(null);
@@ -82,18 +101,19 @@ export function StatsBar({
 			document.removeEventListener("keydown", onKeyDown);
 		};
 	}, [open]);
-	// Catalog-only denominator; the picker reports its effective selection.
-	// Missing/pending catalog means usage-only, never a hardcoded maximum.
+	// The picker reports its effective selection. CLI windows are session-
+	// scoped; unknown metadata always means usage-only, never a guessed maximum.
 	const { catalog } = useModelCatalog();
 	const limits = useMemo(() => (catalog ? catalogLimits(catalog) : undefined), [catalog]);
-	const limit = selectedModel ? limits?.get(selectedModel) ?? null : null;
+	const limit = contextLimitForModel(selectedModel, limits, cliContextWindow);
 	const contextLabel = formatContextMeasurement(contextTokens, limit, language);
 	const { cost = 0, unpriced = turns.length, subscription = 0 } = pricing ?? {};
 	// Honest cost: show dollars only when at least one turn priced;
 	// otherwise "—" (never a fake $0.0000).
 	const pricedCount = turns.length - unpriced - subscription;
 	const providers = pricing?.subscriptionProviders ?? subscriptionLabels(turns.map((turn) => turn.model));
-	const costLabel = planCostLabel(pricedCount > 0 ? cost : null, providers, (value) => formatUsd(value, language));
+	const cliBilled = turns.some((turn) => turn.model.startsWith(`${CLAUDE_CODE_PROVIDER}:`));
+	const costLabel = planCostLabel(pricedCount > 0 ? cost : null, cliBilled ? [...providers, "CLI"] : providers, (value) => formatUsd(value, language));
 
 	return (
 		<div
@@ -146,6 +166,9 @@ export function StatsBar({
 									{contextLabel}
 								</span>
 							</div>
+							{selectedModel?.startsWith(`${CLAUDE_CODE_PROVIDER}:`) && (
+								<p>{t("Window reported by Claude Code; may be lower for auto-compaction.")}</p>
+							)}
 							<div className="flex justify-between gap-2">
 								<span>{subscription ? t("Usage") : t("Total cost")}</span>
 								<span className="tabular-nums text-card-foreground">{costLabel}</span>
@@ -172,7 +195,7 @@ export function StatsBar({
 												</span>
 												<span className="flex shrink-0 items-center gap-2 tabular-nums text-card-foreground">
 													<span className="text-muted-foreground">{turn.steps.length}{" "}{t("steps")}</span>
-													<span>{subscriptionLabel(turn.model) ?? (c === null ? "—" : formatUsd(c, language))}</span>
+													<span>{turn.model.startsWith(`${CLAUDE_CODE_PROVIDER}:`) ? "CLI" : subscriptionLabel(turn.model) ?? (c === null ? "—" : formatUsd(c, language))}</span>
 												</span>
 											</li>
 										);
@@ -193,7 +216,7 @@ export function StatsBar({
 			{/* The model + thinking control — one controller for the conversation
 			    agents (prober/teacher); the record's `turns` above still folds
 			    the ACTUAL models billed, regardless of what the picker says. */}
-			<ModelControl chatId={chatId} onModelChange={setSelectedModel} />
+			<ModelControl chatId={chatId} onModelChange={modelChanged} />
 		</div>
 	);
 }

components/thinking-block.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from "react";
 import { ChevronDownIcon } from "lucide-react";
 import { blurAfterPointerClick } from "@/components/focus-hygiene";
 import { cn } from "@/lib/utils";
+import { PathText } from "@/components/file-path-chip";
 
 /** The unified user-thinking row (owner round, 2026-10-05): ONE visual
  *  language for every surface where the learner's own thinking renders —
@@ -130,7 +131,7 @@ export function ThinkingBlock({
 				<ChevronDownIcon className={cn("size-4 shrink-0 transition-transform", open ? "rotate-180" : "rotate-0")} />
 			</button>
 			{open && (
-				<span className="lh-prose mt-1.5 block whitespace-pre-wrap text-[15px] italic text-foreground/50">{text}</span>
+				<span className="lh-prose mt-1.5 block whitespace-pre-wrap text-[15px] italic text-foreground/50"><PathText text={text} /></span>
 			)}
 		</div>
 	);

components/update-banner.tsx

@@ -5,33 +5,20 @@ import { useI18n } from "@/components/i18n";
 /**
  * The auto-update banner (Wave C, owner 2026-10-10: silent download +
  * restart-banner UX). The shell pushes "lh:update-status" once a staged
- * update exists (electron/main.cjs update-downloaded); this is the whole
- * renderer surface — a small fixed card, bottom-right, offering Restart.
+ * update exists (electron/main.cjs update-downloaded). Snapshot retrieval
+ * also covers a late load. The card offers Restart alongside Settings.
  * Browser builds have no window.lh and never see a push: renders null.
  *
  * No dismiss: a downloaded update installs on quit anyway
  * (autoInstallOnAppQuit); the banner is a courtesy, not a gate.
  */
 
-import { useEffect, useState } from "react";
-
-// The window.lh bridge type lives in components/sidebar.tsx (the incumbent
-// declare-global) — onUpdateStatus/installUpdate are declared there too.
-
-type UpdateStatus = { status: string; version: string | null };
+import { useUpdateState } from "@/components/settings/update-settings.tsx";
 
 export default function UpdateBanner() {
 	const { t } = useI18n();
-	const [ready, setReady] = useState<UpdateStatus | null>(null);
-
-	useEffect(() => {
-		// Absent bridge (browser / dev) → stays hidden forever.
-		return window.lh?.onUpdateStatus?.((s) => {
-			if (s?.status === "downloaded") setReady(s);
-		});
-	}, []);
-
-	if (!ready) return null;
+	const { state: ready } = useUpdateState();
+	if (ready?.status !== "downloaded") return null;
 	return (
 		<div
 			data-testid="update-banner"

components/usage-format.ts

@@ -32,25 +32,11 @@ export function splitQualified(id: string): { provider: string | null; id: strin
 	return { provider: id.slice(0, colon), id: id.slice(colon + 1) };
 }
 
-/**
- * "z-ai/glm-5.3-flash" → "glm-5.3-flash" — vendor prefix dropped, the
- * name KEPT EXACTLY as its provider writes it (dashes stay, no
- * auto-caps — owner rounds 4-5, 2026-10-05); a trailing all-digit
- * segment (OpenRouter's date suffix, "qwen3.8-max-0902") is dropped.
- * Quiet-chip friendly.
- *
- * With `qualified` (usage stamps are "provider:id", model-slots wave):
- * the provider rides as a quiet suffix — "glm-5.3-flash · openrouter" —
- * because with federation the same model via two providers is genuinely
- * different bookkeeping. Bare catalog ids are unchanged.
- */
+/** Model-only labels omit the vendor path, never versions, dates or variants.
+ * Only usage callers pass `qualified`: a bare catalog id's colon belongs to
+ * the model (e.g. :free), not a provider. Usage retains its provider suffix. */
 export function prettyModel(id: string, qualified = false): string {
-	const { provider, id: bare } = splitQualified(id);
+	const { provider, id: bare } = qualified ? splitQualified(id) : { provider: null, id };
 	const short = bare.includes("/") ? bare.slice(bare.lastIndexOf("/") + 1) : bare;
-	const parts = short.split("-");
-	const trimmed = /^\d+$/.test(parts[parts.length - 1] ?? "") ? parts.slice(0, -1) : parts;
-	// No auto-capitalization, dashes KEPT (owner rounds 4-5, 2026-10-05):
-	// model names render exactly as their providers write them.
-	const pretty = trimmed.join("-");
-	return qualified && provider ? `${pretty} · ${provider}` : pretty;
+	return provider ? `${short} · ${provider}` : short;
 }