From 551a7a050e8cd25e795026a1060c9d5b5ea028bf Mon Sep 17 00:00:00 2001 From: Adam Malczewski Date: Sat, 10 Oct 2026 01:36:39 +0900 Subject: perf(chat): fast open of long in-flight turns - Batch live chat events: fold a burst in one pass per animation frame (rAF + timeout fallback for hidden tabs) instead of one reactive cycle per WS frame. Flushed before send/resync to keep ordering. - De-dup the late-join replay against committed history: provisional chunks of the in-flight turn already persisted (CR-6 per-step persistence) are hidden by aligned-prefix matching (fail-safe: mismatch shows, never hides). - Memoize chunks/turnMetrics getters by state identity. - LazyCollapse: tool/thinking card bodies mount only on first open. - content-visibility:auto on transcript rows. - scripts/probe-replay.ts + bench-pure.ts for measuring the replay path. --- src/features/chat/ui/ChatView.svelte | 144 ++++++++++++------------------- src/features/chat/ui/ChatView.test.ts | 42 ++++++++- src/features/chat/ui/LazyCollapse.svelte | 44 ++++++++++ 3 files changed, 139 insertions(+), 91 deletions(-) create mode 100644 src/features/chat/ui/LazyCollapse.svelte (limited to 'src/features/chat/ui') diff --git a/src/features/chat/ui/ChatView.svelte b/src/features/chat/ui/ChatView.svelte index 8f153bf..5e4513c 100644 --- a/src/features/chat/ui/ChatView.svelte +++ b/src/features/chat/ui/ChatView.svelte @@ -10,6 +10,7 @@ type TurnMetricsEntry, } from "../../../core/metrics"; import { Markdown } from "../../markdown"; + import LazyCollapse from "./LazyCollapse.svelte"; const badgeClass = { success: "badge-success", @@ -102,6 +103,22 @@ }); +{#snippet wrench()} + +{/snippet} + {#snippet chunkRow(rendered: RenderedChunk)} {#if rendered.role === "user"}
-
- -
+ + {#snippet title()} {rendered.streaming ? "Thinking" : "Thoughts"} {#if rendered.streaming} {/if} -
-
-

{rendered.chunk.text}

-
-
+ {/snippet} +

{rendered.chunk.type === "thinking" ? rendered.chunk.text : ""}

+
{:else if rendered.chunk.type === "tool-call" || rendered.chunk.type === "tool-result"} @@ -151,61 +165,26 @@
{#if rendered.chunk.type === "tool-call"} -
- -
- - {rendered.chunk.toolName} -
-
- 
{JSON.stringify(
-                  rendered.chunk.input,
-                  null,
-                  2,
-                )}
-
-
+ {@const call = rendered.chunk} + + {#snippet title()} + {@render wrench()} + {call.toolName} + {/snippet} + 
{JSON.stringify(call.input, null, 2)}
+ {:else} -
- -
- - {rendered.chunk.toolName} - {#if rendered.chunk.isError} + {@const res = rendered.chunk} + + {#snippet title()} + {@render wrench()} + {res.toolName} + {#if res.isError} error {/if} -
-
- 
{rendered.chunk.content}
-
-
+ {/snippet} + 
{res.content}
+ {/if}
@@ -246,6 +225,9 @@ {/if} {#each keyedRows as { row, key } (key)} + +
{#if row.kind === "step-metrics"} {@const sv = viewStepMetrics(row.step, row.index)} {@const stepCache = viewCacheRate(row.step.usage)} @@ -311,47 +293,29 @@
{#each row.group.entries as entry, entryIndex (entryIndex)} -
- -
- + + {#snippet title()} + {@render wrench()} {entry.call.toolName} {#if entry.result?.isError} error {:else if entry.result === null} {/if} -
-
- 
{JSON.stringify(
-                      entry.call.input,
-                      null,
-                      2,
-                    )}
- {#if entry.result} - 
{entry.result.content}
- {/if} -
-
+ {/snippet} + 
{JSON.stringify(entry.call.input, null, 2)}
+ {#if entry.result} + 
{entry.result.content}
+ {/if} + {/each}
{/if} + {/each} {#if providerRetry} {@const rv = viewProviderRetry(providerRetry)} diff --git a/src/features/chat/ui/ChatView.test.ts b/src/features/chat/ui/ChatView.test.ts index eb807c1..fcac312 100644 --- a/src/features/chat/ui/ChatView.test.ts +++ b/src/features/chat/ui/ChatView.test.ts @@ -1,16 +1,25 @@ import type { StepId } from "@dispatch/wire"; import { render, screen } from "@testing-library/svelte"; +import userEvent from "@testing-library/user-event"; import { describe, expect, it } from "vitest"; import type { RenderedChunk } from "../../../core/chunks"; import ChatView from "./ChatView.svelte"; +/** Collapsed card bodies render lazily — open every card so its body mounts. */ +async function openAllCollapses(container: HTMLElement): Promise { + const boxes = container.querySelectorAll('.collapse > input[type="checkbox"]'); + for (const box of boxes) { + if (!box.checked) await userEvent.click(box); + } +} + // Defensive rendering: a conversation transcript can contain duplicate // `toolCallId`s (provider double-emission, persisted — e.g. PII_REDACTED_CONVERSATION_SHORT_01). The // grouped render path MUST dedupe them so the keyed {#each} never throws // Svelte `each_key_duplicate` (which aborts the reactive flush and makes the // tab appear dead). See fix-toolcall-duplicate-keys plan Part 1. describe("ChatView — duplicate toolCallIds", () => { - it("renders a tool batch with duplicated toolCallIds without throwing, showing one card per unique call", () => { + it("renders a tool batch with duplicated toolCallIds without throwing, showing one card per unique call", async () => { const chunks: RenderedChunk[] = [ { seq: 1, @@ -117,6 +126,7 @@ describe("ChatView — duplicate toolCallIds", () => { ]; const { container } = render(ChatView, { props: { chunks } }); + await openAllCollapses(container); // No each_key_duplicate crash. Batched calls render as collapsible cards — // exactly ONE per unique toolCallId (deduped), not 4. @@ -130,3 +140,33 @@ describe("ChatView — duplicate toolCallIds", () => { expect(screen.getByText("contents-of-b")).toBeInTheDocument(); }); }); + +describe("ChatView — lazy collapse bodies", () => { + it("does not mount a collapsed card's body until it is first opened, then keeps it", async () => { + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "tool", + chunk: { + type: "tool-result", + toolCallId: "x", + toolName: "run_shell", + content: "HUGE-OUTPUT", + isError: false, + }, + provisional: false, + }, + ]; + const { container } = render(ChatView, { props: { chunks } }); + expect(screen.getByText("run_shell")).toBeInTheDocument(); + expect(screen.queryByText("HUGE-OUTPUT")).toBeNull(); + + const box = screen.getByRole("checkbox", { name: "Toggle tool result" }); + await userEvent.click(box); + expect(screen.getByText("HUGE-OUTPUT")).toBeInTheDocument(); + + await userEvent.click(box); // close: body stays mounted (close animation) + expect(screen.getByText("HUGE-OUTPUT")).toBeInTheDocument(); + expect(container.querySelectorAll(".chat-row")).toHaveLength(1); + }); +}); diff --git a/src/features/chat/ui/LazyCollapse.svelte b/src/features/chat/ui/LazyCollapse.svelte new file mode 100644 index 0000000..0f66451 --- /dev/null +++ b/src/features/chat/ui/LazyCollapse.svelte @@ -0,0 +1,44 @@ + + +
+ +
+ {@render title()} +
+
+ {#if open || everOpened} + {@render children()} + {/if} +
+
-- cgit v1.2.3