reattach round: attach-first handshake, honest Reattaching placeholder
This commit is contained in:
+20
-20
@@ -15,6 +15,7 @@ import {
|
||||
import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
|
||||
import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
|
||||
import { Shimmer } from "@/components/ai-elements/shimmer";
|
||||
import { BrailleSpinner } from "@/components/braille-spinner";
|
||||
import { LiveToolCard } from "@/components/artifacts/live-tool-card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { AnsweredCard } from "@/components/answered-card";
|
||||
@@ -185,7 +186,7 @@ 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, send, submitAnswer, setMessages, adoptRecord, status, error, stop, clearError, resumeStream, setReattachSettled } =
|
||||
const { messages, nativeMessages, send, submitAnswer, setMessages, adoptRecord, status, error, reattaching, stop, clearError, resumeStream, setReattachSettled } =
|
||||
useChatSession({ chatId, initialMessages, initiallyInFlight });
|
||||
|
||||
// The reattach settled terminal → the sync-and-continue seam (below).
|
||||
@@ -200,19 +201,6 @@ export function Chat({
|
||||
}
|
||||
}, [initialPrompt, initialMessages.length, send]);
|
||||
|
||||
// Reattach on mount (stream-reattach wave): a turn that outlived its
|
||||
// client (navigate away mid-turn, back while in flight) is re-entered
|
||||
// through the SAME rendering path as a live one — resumeStream() feeds
|
||||
// the replay burst (instant catch-up) then the live deltas into the
|
||||
// SDK's own chunk pipeline. Raced settle is the transport's turn-settled
|
||||
// terminal: onSettled refetches the record. No once-ref guard: every
|
||||
// mount resumes (the deps are stable — this fires once per mount), and
|
||||
// React StrictMode's dev double-mount ABORTS the first attempt at
|
||||
// dispose — the retry must be allowed to run.
|
||||
useEffect(() => {
|
||||
if (initiallyInFlight) void resumeStream();
|
||||
}, [resumeStream, initiallyInFlight]);
|
||||
|
||||
// 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
|
||||
@@ -1193,12 +1181,24 @@ export function Chat({
|
||||
2026-10-01): once a tool call starts writing, its LIVE card
|
||||
carries the activity inline — the old bottom tool-activity
|
||||
line retired rather than double-render. Same glimmer recipe
|
||||
as the thinking row: duration 1. */}
|
||||
{(status === "submitted" || turnInFlight) && (
|
||||
<Shimmer duration={1} className="text-sm">
|
||||
Thinking…
|
||||
</Shimmer>
|
||||
)}
|
||||
as the thinking row: duration 1. The REATTACH variant
|
||||
(reattach round 2026-10-02): while a fresh mount reattaches
|
||||
to a server-side turn, the placeholder says what is actually
|
||||
happening — Reattaching… + the working-state spinner —
|
||||
instead of a bare Thinking shimmer. */}
|
||||
{(status === "submitted" || turnInFlight) &&
|
||||
(reattaching ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<BrailleSpinner label="Reattaching to the running turn" />
|
||||
<Shimmer duration={1} className="text-sm">
|
||||
Reattaching…
|
||||
</Shimmer>
|
||||
</span>
|
||||
) : (
|
||||
<Shimmer duration={1} className="text-sm">
|
||||
Thinking…
|
||||
</Shimmer>
|
||||
))}
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm">
|
||||
Something went wrong: {error.message}
|
||||
|
||||
+37
-15
@@ -140,6 +140,10 @@ export interface SessionState {
|
||||
nativeMessages: LhMessage[];
|
||||
status: SessionStatus;
|
||||
error: { message: string } | null;
|
||||
/** A reattach handshake is in flight (resumeStream, no events yet):
|
||||
* the view shows the honest “Reattaching…” placeholder instead of a
|
||||
* bare Thinking shimmer (owner, reattach round 2026-10-02). */
|
||||
reattaching: boolean;
|
||||
}
|
||||
|
||||
export interface SessionModelOptions extends SessionModelDeps {
|
||||
@@ -174,6 +178,9 @@ export class SessionModel {
|
||||
private streamingMessageId: string | null = null;
|
||||
private statusValue: SessionStatus = "ready";
|
||||
private errorValue: { message: string } | null = null;
|
||||
/** True from resumeStream() entry until its first event / settle /
|
||||
* error — the handshake window (see SessionState.reattaching). */
|
||||
private reattachingValue = false;
|
||||
// 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;
|
||||
@@ -209,6 +216,7 @@ export class SessionModel {
|
||||
nativeMessages: [...this.base, ...this.tail],
|
||||
status: this.statusValue,
|
||||
error: this.errorValue,
|
||||
reattaching: this.reattachingValue,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -385,6 +393,7 @@ export class SessionModel {
|
||||
}
|
||||
if (!sawEvent) {
|
||||
sawEvent = true;
|
||||
this.reattachingValue = false; // first event: content, not a handshake
|
||||
if (this.statusValue !== "error") this.setStatus("streaming");
|
||||
}
|
||||
this.applyWireEvent(event);
|
||||
@@ -392,33 +401,43 @@ export class SessionModel {
|
||||
} finally {
|
||||
this.streamingIds = new Set();
|
||||
this.executions = new Map();
|
||||
this.reattachingValue = false; // settled/aborted: no handshake anymore
|
||||
if (this.statusValue !== "error") this.setStatus("ready");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reattach (the wake/handoff/mount path): a server-side turn with no
|
||||
* live view of ours. The record is refetched FIRST (write-ahead
|
||||
* adoption — the tail's optimistic entries are absorbed, its partial
|
||||
* stream content is about to be fully replayed), then the stream
|
||||
* replays the turn from its first event through the SAME consume path.
|
||||
* live view of ours. ATTACH-FIRST (owner, reattach round 2026-10-02):
|
||||
* a fresh-mount reattach passes refetchRecordFirst=false — the page
|
||||
* render just read the record, so the blocking record round-trip only
|
||||
* added handshake latency before the instant replay; the running
|
||||
* turn's partial lives solely in the server event log, and the replay
|
||||
* rebuilds it regardless of the refetch. Mid-session callers (the
|
||||
* handoff watch) keep the default: their base may trail the record,
|
||||
* and the refetch absorbs it (write-ahead adoption) before the replay
|
||||
* lands on top. The stream then replays the turn from its first event
|
||||
* through the SAME consume path.
|
||||
*/
|
||||
async resumeStream(): Promise<void> {
|
||||
async resumeStream(refetchRecordFirst = true): Promise<void> {
|
||||
this.consumeAbort?.abort();
|
||||
const controller = new AbortController();
|
||||
this.consumeAbort = controller;
|
||||
this.reattachingValue = true;
|
||||
this.setStatus("submitted");
|
||||
try {
|
||||
const recordRes = await this.fetch(`/api/chats/${encodeURIComponent(this.chatId)}`, {
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (recordRes.ok) {
|
||||
const record = (await recordRes.json()) as { messages?: LhMessage[] };
|
||||
if (Array.isArray(record.messages)) {
|
||||
this.mutate(() => {
|
||||
this.base = record.messages!;
|
||||
this.tail = [];
|
||||
});
|
||||
if (refetchRecordFirst) {
|
||||
const recordRes = await this.fetch(`/api/chats/${encodeURIComponent(this.chatId)}`, {
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (recordRes.ok) {
|
||||
const record = (await recordRes.json()) as { messages?: LhMessage[] };
|
||||
if (Array.isArray(record.messages)) {
|
||||
this.mutate(() => {
|
||||
this.base = record.messages!;
|
||||
this.tail = [];
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
const res = await this.fetch(`/api/chats/${encodeURIComponent(this.chatId)}/stream`, {
|
||||
@@ -428,6 +447,7 @@ export class SessionModel {
|
||||
await this.consumeStream(res);
|
||||
} catch (err) {
|
||||
if ((err as Error).name === "AbortError") return; // a newer consume won
|
||||
this.reattachingValue = false;
|
||||
this.setError((err as Error).message);
|
||||
this.setStatus("error");
|
||||
}
|
||||
@@ -445,6 +465,7 @@ export class SessionModel {
|
||||
const controller = new AbortController();
|
||||
this.consumeAbort = controller;
|
||||
this.setError(null);
|
||||
this.reattachingValue = false; // an aborted handshake is not a placeholder
|
||||
this.setStatus("submitted");
|
||||
// The optimistic appends — exactly the messages the server's
|
||||
// write-ahead will persist (inputAppends), with LOCAL ids so
|
||||
@@ -492,6 +513,7 @@ export class SessionModel {
|
||||
stop(): void {
|
||||
this.consumeAbort?.abort();
|
||||
this.consumeAbort = null;
|
||||
this.reattachingValue = false;
|
||||
this.streamingIds = new Set();
|
||||
this.streamingMessageId = null;
|
||||
this.executions = new Map();
|
||||
|
||||
@@ -49,8 +49,13 @@ export function useChatSession({ chatId, initialMessages, initiallyInFlight }: U
|
||||
}, [model, bump]);
|
||||
|
||||
// Reattach on mount (StrictMode-safe: a newer resume cancels the older).
|
||||
// ATTACH-FIRST (owner, reattach round 2026-10-02): the page render just
|
||||
// read the record — the blocking record refetch only added handshake
|
||||
// latency before the instant replay, so a fresh mount attaches
|
||||
// directly. This hook's effect is the SINGLE mount-reattach owner
|
||||
// (chat.tsx's duplicate was deleted with the same round).
|
||||
useEffect(() => {
|
||||
if (initiallyInFlight) void model.resumeStream();
|
||||
if (initiallyInFlight) void model.resumeStream(false);
|
||||
}, [initiallyInFlight, model]);
|
||||
|
||||
// The view + state, derived per model change from the model.
|
||||
@@ -81,6 +86,7 @@ export function useChatSession({ chatId, initialMessages, initiallyInFlight }: U
|
||||
nativeMessages: state.nativeMessages,
|
||||
status: state.status,
|
||||
error: state.error,
|
||||
reattaching: state.reattaching,
|
||||
send,
|
||||
submitAnswer,
|
||||
setMessages,
|
||||
|
||||
@@ -468,6 +468,54 @@ describe("resumeStream (the reattach path)", () => {
|
||||
assert.equal(m.getState().status, "ready");
|
||||
});
|
||||
|
||||
it("ATTACH-FIRST (owner, reattach round 2026-10-02): a fresh-mount reattach skips the blocking record refetch", async () => {
|
||||
const urls: string[] = [];
|
||||
globalThis.fetch = (async (input: RequestInfo | URL) => {
|
||||
const url = String(input);
|
||||
urls.push(url);
|
||||
if (url === "/api/chats/chat_x/stream")
|
||||
return sseResponse(
|
||||
{ type: "message_start", message: { role: "assistant", content: [{ type: "text", text: "hi" }] } },
|
||||
{ type: "message_end", message: { role: "assistant", content: [{ type: "text", text: "hi" }], stopReason: "stop" } },
|
||||
{ type: "agent_end", messages: [] },
|
||||
"[DONE]",
|
||||
);
|
||||
throw new Error(`unexpected fetch: ${url}`);
|
||||
}) as typeof globalThis.fetch;
|
||||
const m = model();
|
||||
await m.resumeStream(false);
|
||||
// one round-trip: straight to the stream — the page render already
|
||||
// read the record; the replay rebuilds the partial regardless.
|
||||
assert.deepEqual(urls, ["/api/chats/chat_x/stream"]);
|
||||
assert.equal(m.getState().status, "ready");
|
||||
// the mid-session caller (handoff watch) keeps the default refetch
|
||||
// (the earlier test in this block pins that order).
|
||||
});
|
||||
|
||||
it("reattaching is honest: true during the handshake, false once events flow", async () => {
|
||||
let release!: (r: Response) => void;
|
||||
const gate = new Promise<Response>((res) => (release = res));
|
||||
globalThis.fetch = (async (input: RequestInfo | URL) => {
|
||||
const url = String(input);
|
||||
if (url === "/api/chats/chat_x") return gate; // the record fetch hangs
|
||||
if (url === "/api/chats/chat_x/stream")
|
||||
return sseResponse(
|
||||
{ type: "message_start", message: { role: "assistant", content: [{ type: "text", text: "hi" }] } },
|
||||
{ type: "agent_end", messages: [] },
|
||||
"[DONE]",
|
||||
);
|
||||
throw new Error(`unexpected fetch: ${url}`);
|
||||
}) as typeof globalThis.fetch;
|
||||
const m = model();
|
||||
const p = m.resumeStream(); // runs sync to the first await (the gated fetch)
|
||||
assert.equal(m.getState().reattaching, true, "mid-handshake: the placeholder is Reattaching…");
|
||||
assert.equal(m.getState().status, "submitted");
|
||||
release(Response.json({ messages: [] }));
|
||||
await p;
|
||||
assert.equal(m.getState().reattaching, false, "first event landed: content, not a handshake");
|
||||
assert.equal(m.getState().status, "ready");
|
||||
});
|
||||
|
||||
it("turn-settled fires the settle hook and ends cleanly", async () => {
|
||||
let settled = 0;
|
||||
globalThis.fetch = (async (input: RequestInfo | URL) => {
|
||||
|
||||
Reference in New Issue
Block a user