fix(tui): order messages by creation time (#40994)

Co-authored-by: Dax <mail@thdxr.com>

packages/tui/test/cli/cmd/tui/sync-live-hydration.test.tsx

@@ -33,6 +33,29 @@ function global(payload: GlobalEvent["payload"]): GlobalEvent {
   return { directory: "/tmp/other", project: "proj_test", payload }
 }
 
+test("live messages use creation time with an ID tie-break", async () => {
+  await using tmp = await tmpdir()
+  await Bun.write(`${tmp.path}/kv.json`, "{}")
+  const { app, emit, sync } = await mount(undefined, tmp.path)
+  const messages = [
+    { ...assistant, id: "msg_a", time: { created: 30, completed: 31 } },
+    { ...assistant, id: "msg_z", time: { created: 10, completed: 11 } },
+    { ...assistant, id: "msg_m", time: { created: 20, completed: 21 } },
+    { ...assistant, id: "msg_b", time: { created: 20, completed: 21 } },
+  ]
+
+  try {
+    for (const info of messages) {
+      emit(global({ id: `evt_${info.id}`, type: "message.updated", properties: { sessionID, info } }))
+    }
+    await wait(() => sync.data.message[sessionID]?.length === messages.length)
+
+    expect(sync.data.message[sessionID].map((message) => message.id)).toEqual(["msg_z", "msg_b", "msg_m", "msg_a"])
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
 test("stale session hydration does not overwrite live message parts", async () => {
   await using tmp = await tmpdir()
   await Bun.write(`${tmp.path}/kv.json`, "{}")

packages/tui/test/util/transcript.test.ts

@@ -349,6 +349,34 @@ describe("transcript", () => {
       expect(result).toContain("---")
     })
 
+    test("orders messages by creation time and preserves part order", () => {
+      const message = (id: string, created: number, parts: string[]) => ({
+        info: {
+          id,
+          sessionID: "ses_abc123",
+          role: "user" as const,
+          agent: "build",
+          model: { providerID: "anthropic", modelID: "claude" },
+          time: { created },
+        },
+        parts: parts.map((text, index) => ({
+          id: `part_${parts.length - index}`,
+          sessionID: "ses_abc123",
+          messageID: id,
+          type: "text" as const,
+          text,
+        })),
+      })
+      const result = formatTranscript(
+        { id: "ses_abc123", title: "Order", time: { created: 1, updated: 2 } },
+        [message("msg_a", 30, ["third"]), message("msg_z", 10, ["first", "second"])],
+        { thinking: false, toolDetails: false, assistantMetadata: false },
+      )
+
+      expect(result.indexOf("first")).toBeLessThan(result.indexOf("second"))
+      expect(result.indexOf("second")).toBeLessThan(result.indexOf("third"))
+    })
+
     test("falls back to raw model id when provider data is missing", () => {
       const session = {
         id: "ses_abc123",