fix(chat): render cached history before network sync

src/stores/chat/__tests__/chat-machine.transitions.test.ts

@@ -9,15 +9,6 @@ import {
 import { chatMachine } from "@/stores/chat/chat-machine";
 import type { ChatEvent } from "@/stores/chat/chat-events";
 
-interface LoadHistoryOutput {
-  messages: UiMessage[];
-  hasMore: boolean;
-  newOffset: number;
-  localOverwritten: boolean;
-  localCount: number;
-  networkCount: number;
-}
-
 interface LoadMoreHistoryOutput {
   messages: UiMessage[];
   hasMore: boolean;
@@ -94,14 +85,7 @@ function createTestChatMachine(
 ) {
   return chatMachine.provide({
     actors: {
-      loadHistory: fromPromise<LoadHistoryOutput>(async () => ({
-        messages: options.historyMessages ?? [],
-        hasMore: false,
-        newOffset: 0,
-        localOverwritten: true,
-        localCount: 0,
-        networkCount: 0,
-      })),
+      loadHistory: createLoadHistoryCallback(options.historyMessages ?? []),
       loadMoreHistory: fromPromise<LoadMoreHistoryOutput, { offset: number }>(
         async () => ({
           messages: [],
@@ -150,6 +134,35 @@ function createTestChatMachine(
   });
 }
 
+function createLoadHistoryCallback(
+  messages: UiMessage[],
+  networkMessages: UiMessage[] = messages,
+) {
+  return fromCallback<ChatEvent>(({ sendBack }) => {
+    sendBack({
+      type: "ChatLocalHistoryLoaded",
+      output: {
+        messages,
+        hasMore: false,
+        newOffset: messages.length,
+        localCount: messages.length,
+      },
+    });
+    sendBack({
+      type: "ChatNetworkHistoryLoaded",
+      output: {
+        messages: networkMessages,
+        hasMore: false,
+        newOffset: networkMessages.length,
+        localOverwritten: true,
+        localCount: messages.length,
+        networkCount: networkMessages.length,
+      },
+    });
+    return () => undefined;
+  });
+}
+
 describe("chatMachine transitions", () => {
   it("keeps guest logout disabled while allowing upgrade to user login", async () => {
     const actor = createActor(createTestChatMachine()).start();
@@ -187,6 +200,76 @@ describe("chatMachine transitions", () => {
     actor.stop();
   });
 
+  it("renders local history before network history sync finishes", async () => {
+    let resolveNetwork!: () => void;
+    const networkReleased = new Promise<void>((resolve) => {
+      resolveNetwork = resolve;
+    });
+    const localMessage: UiMessage = {
+      id: "local-msg",
+      content: "cached local message",
+      isFromAI: true,
+      date: "2026-07-02",
+    };
+    const networkMessage: UiMessage = {
+      id: "network-msg",
+      content: "fresh network message",
+      isFromAI: true,
+      date: "2026-07-02",
+    };
+    const machine = chatMachine.provide({
+      actors: {
+        loadHistory: fromCallback<ChatEvent>(({ sendBack }) => {
+          sendBack({
+            type: "ChatLocalHistoryLoaded",
+            output: {
+              messages: [localMessage],
+              hasMore: false,
+              newOffset: 1,
+              localCount: 1,
+            },
+          });
+          void networkReleased.then(() => {
+            sendBack({
+              type: "ChatNetworkHistoryLoaded",
+              output: {
+                messages: [networkMessage],
+                hasMore: false,
+                newOffset: 1,
+                localOverwritten: true,
+                localCount: 1,
+                networkCount: 1,
+              },
+            });
+          });
+          return () => undefined;
+        }),
+      },
+    });
+    const actor = createActor(machine).start();
+
+    actor.send({ type: "ChatUserLogin", token: "token" });
+    await waitFor(actor, (snapshot) =>
+      snapshot.matches({ userSession: "ready" }),
+    );
+
+    expect(actor.getSnapshot().context.messages).toMatchObject([
+      { id: "local-msg", content: "cached local message" },
+    ]);
+
+    resolveNetwork();
+    await waitFor(
+      actor,
+      (snapshot) => snapshot.context.messages[0]?.id === "network-msg",
+    );
+
+    expect(actor.getSnapshot().context.messages).toMatchObject([
+      { id: "network-msg", content: "fresh network message" },
+    ]);
+
+    actor.stop();
+  });
+
   it("ignores guest login while an authenticated user session is active", async () => {
     const actor = createActor(createTestChatMachine()).start();
 
@@ -254,14 +337,7 @@ describe("chatMachine transitions", () => {
   it("tracks replying state by queued batch instead of user message count", async () => {
     const machine = chatMachine.provide({
       actors: {
-        loadHistory: fromPromise<LoadHistoryOutput>(async () => ({
-          messages: [],
-          hasMore: false,
-          newOffset: 0,
-          localOverwritten: true,
-          localCount: 0,
-          networkCount: 0,
-        })),
+        loadHistory: createLoadHistoryCallback([]),
         loadMoreHistory: fromPromise<LoadMoreHistoryOutput, { offset: number }>(
           async () => ({
             messages: [],