dictation mechanics everywhere: graph view + new-session view

Consistency ruling (owner, 2026-10-01): the finish-first send and the run-end focus are properties of the COMPOSER, not of one page. - home (graph view, raw textarea): topicRef mirror; start() finishes dictation first (before the setup/key guards, so an intercepted draft is the complete one) then reads the mirror; the start square stays live while a run holds deferred speech; run end focuses the topic input. - new-session: the shell owns the dictation instance — handleSend wraps the parent's send with finish-first, the composer stays sendable during a run, and run end focuses it via the Composer's inputRef. The parent's send reads a textRef mirror (applyText at every write): the flush lands via setState after the shell's await, and the parent's closure must not read a stale draft.
2026-10-02 01:42:55 +03:00
parent 8460e96d6c
commit a99cbf3d90
2 changed files with 99 additions and 17 deletions
@@ -1,12 +1,12 @@
 "use client";

-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { CornerDownLeftIcon } from "lucide-react";
 import { GraphView } from "@/components/graph-view";
 import { SetupDialog } from "@/components/setup-dialog";
 import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
-import { DictationBar, useDictation } from "@/components/dictation";
+import { DictationBar, joinDictation, useDictation } from "@/components/dictation";
 import { SidebarToggle } from "@/components/sidebar";
 import { StatsBar } from "@/components/stats-bar";
 import type { TurnUsage } from "@/src/core";
@@ -20,6 +20,11 @@ import type { TurnUsage } from "@/src/core";
 export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 	const router = useRouter();
 	const [topic, setTopic] = useState("");
+	/* The topic MIRROR ("nothing gets lost" round, 2026-10-01 — same
+	 * mechanics as the chat composer, owner's consistency ruling): a
+	 * dictation flush lands via setState, invisible to a closure that
+	 * waited through `await finish()`. Kept current at every write. */
+	const topicRef = useRef("");
 	// First-run gate (model-slots wave, owner 2026-09-20): chats cannot
 	// start until the user has picked all three slots — no defaults for
 	// 33 providers. The dock shows the CTA while unconfigured; submitting
@@ -37,12 +42,43 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 	// 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.
 	const dictation = useDictation({
-		append: (t) => setTopic((v) => (v ? v.replace(/\s+$/, "") + " " + t : t)),
+		// Ref-first: the join reads the mirror so the send resuming after
+		// `await finish()` sees the dictated tail.
+		append: (t) => {
+			const v = joinDictation(topicRef.current, t);
+			topicRef.current = v;
+			setTopic(v);
+		},
 	});
 	const [busy, setBusy] = 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 dictationWasActiveRef = useRef(false);
+	useEffect(() => {
+		if (dictation.active) {
+			dictationWasActiveRef.current = true;
+		} else if (dictationWasActiveRef.current) {
+			dictationWasActiveRef.current = false;
+			topicInputRef.current?.focus();
+		}
+	}, [dictation.active]);

-	const start = async (force = false) => {
-		const t = topic.trim();
+	/* FINISH DICTATION FIRST (owner, 2026-10-01): Enter may arrive while a
+	 * run is live with the topic still deferred in the run's buffer — stop
+	 * the run, let the last finals land, THEN read the REF mirror (not the
+	 * state closure) and run. Applies before the setup/key guards too, so
+	 * an intercepted draft is the complete one. */
+	const start = (force = false) => {
+		if (!dictation.active) {
+			void begin(force);
+			return;
+		}
+		void dictation.finish().then(() => begin(force));
+	};
+	const begin = async (force = false) => {
+		const t = topicRef.current.trim();
 		if (!t || busy) return;
 		// Unconfigured: the send INTERCEPTS into the setup flow (the draft
 		// stays in the textarea; Save completes and this re-runs). `force`
@@ -141,8 +177,12 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 					}}
 				>
 					<textarea
+						ref={topicInputRef}
 						value={topic}
-						onChange={(e) => setTopic(e.target.value)}
+						onChange={(e) => {
+							topicRef.current = e.target.value;
+							setTopic(e.target.value);
+						}}
 						onKeyDown={(e) => {
 							// Esc ends dictation (the dictate decisions: click-again or
 							// Esc) — stopPropagation claims it (keyboard wave A) so
@@ -168,7 +208,7 @@ export function Home({ initialConfigured }: { initialConfigured: boolean }) {
 					<button
 						type="submit"
 						aria-label="Start session"
-						disabled={!topic.trim() || busy}
+						disabled={(!topic.trim() && !dictation.active) || busy}
 						className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-primary text-primary-foreground transition-colors hover:opacity-90 disabled:opacity-40"
 					>
 						<CornerDownLeftIcon className="size-5" />
@@ -1,10 +1,10 @@
 "use client";

-import { useCallback, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { useRouter } from "next/navigation";
 import { Conversation, ConversationContent, ConversationEmptyState } from "@/components/ai-elements/conversation";
 import { Composer } from "@/components/composer";
-import { DictationBar, useDictation } from "@/components/dictation";
+import { DictationBar, joinDictation, useDictation } from "@/components/dictation";
 import { TopBar } from "@/components/top-bar";
 import { SetupDialog } from "@/components/setup-dialog";
 import { useStrongKeyless, useZeroKeys, ZeroKeysPill } from "@/components/setup-cta";
@@ -52,6 +52,9 @@ export async function startDraftSession(

 /** The pure shell (no router) — the render-test seam: the draft view's
 *  visible surface, assembled from the same pieces a fresh chat shows. */
+/* FINISH-FIRST SEND + RUN-END FOCUS live in the shell (it owns the
+ * dictation instance); the truth of the text stays in the parent, whose
+ * send reads a REF mirror — see NewSession below. */
 export function DraftShell({
 	busy,
 	text,
@@ -68,12 +71,40 @@ export function DraftShell({
 	 *  NewSession, which owns the configured state and the SetupDialog. */
 	setupCta?: ReactNode;
 }) {
-	const canSend = text.trim().length > 0;
 	// Voice dictation (STT wave, 2026-09-17): finals append at the end of the
-	// draft text; the strip lives in the stats bar's middle slot.
+	// draft text (via the parent's onChange — the truth lives there); the
+	// strip lives in the stats bar's middle slot.
 	const dictation = useDictation({
-		append: (t) => onChange(text ? text.replace(/\s+$/, "") + " " + t : t),
+		append: (t) => onChange(joinDictation(text, t)),
 	});
+	// A LIVE dictation keeps the composer sendable ("nothing gets lost"
+	// round, owner 2026-10-01): the spoken text is deferred in the run's
+	// buffer — Enter must reach the finish-first send, not be gated out by
+	// an empty textarea. Nothing said → the send no-ops.
+	const canSend = text.trim().length > 0 || dictation.active;
+	/* FINISH DICTATION FIRST (owner, 2026-10-01): stop the run, let the
+	 * last finals land through onChange, THEN call the parent's send —
+	 * which reads its REF mirror, so the post-await timing of React's
+	 * re-render cannot eat the dictated tail. */
+	const handleSend = () => {
+		if (dictation.active) {
+			void dictation.finish().then(onSend);
+			return;
+		}
+		onSend();
+	};
+	/* 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 dictationWasActiveRef = useRef(false);
+	useEffect(() => {
+		if (dictation.active) {
+			dictationWasActiveRef.current = true;
+		} else if (dictationWasActiveRef.current) {
+			dictationWasActiveRef.current = false;
+			composerInputRef.current?.focus();
+		}
+	}, [dictation.active]);
 	return (
 		<div className="flex h-dvh">
 			<div className="flex min-w-0 flex-1 flex-col">
@@ -106,9 +137,10 @@ export function DraftShell({
 										busy={busy}
 										value={text}
 										onChange={onChange}
-										onSend={onSend}
+										onSend={handleSend}
 										onStop={() => {}}
 										canSend={canSend}
+										inputRef={composerInputRef}
 										autoFocus
 										onEscape={dictation.active ? dictation.cancel : undefined}
 										// The opening question, same as the graph view's new-session
@@ -134,6 +166,15 @@ export function DraftShell({
 export function NewSession({ initialConfigured }: { initialConfigured: boolean }) {
 	const router = useRouter();
 	const [text, setText] = useState("");
+	/* The draft MIRROR ("nothing gets lost" round, 2026-10-01): the shell's
+	 * finish-first send calls THIS send after the dictation flush — which
+	 * landed via setState and may not have re-rendered yet. The send reads
+	 * the mirror; every write keeps it current. */
+	const textRef = useRef("");
+	const applyText = (v: string) => {
+		textRef.current = v;
+		setText(v);
+	};
 	const [busy, setBusy] = useState(false);

 	// First-run gate (model-slots wave, owner 2026-09-20): the send
@@ -151,7 +192,8 @@ export function NewSession({ initialConfigured }: { initialConfigured: boolean }
 	const [setupOpen, setSetupOpen] = useState(false);

 	const send = useCallback((force = false) => {
-		if (!text.trim() || busy) return;
+		const draft = textRef.current.trim();
+		if (!draft || busy) return;
 		// `force` is the onDone path — the captured `configured` is still
 		// the pre-save value; the state update hasn't landed yet.
 		if (!configured && !force) {
@@ -169,20 +211,20 @@ export function NewSession({ initialConfigured }: { initialConfigured: boolean }
 			return;
 		}
 		setBusy(true);
-		void startDraftSession(text, fetch)
+		void startDraftSession(draft, fetch)
 			.then((target) => {
 				if (target) router.push(target);
 				else setBusy(false);
 			})
 			.catch(() => setBusy(false));
-	}, [text, busy, router, configured, zeroKeys, strongKeyless]);
+	}, [busy, router, configured, zeroKeys, strongKeyless]);

 	return (
 		<>
 			<DraftShell
 				busy={busy}
 				text={text}
-				onChange={setText}
+				onChange={applyText}
 				onSend={send}
 				setupCta={
 					zeroKeys ? (