perf(vscode): virtualize bounded transcript rows

.changeset/fast-agent-transcripts.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Keep large chat transcripts responsive by mounting only viewport-visible conversation rows.

packages/kilo-vscode/tests/unit/task-timeline-tooltip.test.ts

@@ -19,12 +19,20 @@ describe("TaskTimeline delegated tooltip contract", () => {
     expect(src).not.toMatch(/<Tooltip\b/)
   })
 
-  it("keeps bar labels and renders one delegated portal tooltip", () => {
-    expect(src).toMatch(/data-tip=\{bar\(\)\.tip\}/)
-    expect(src).toMatch(/role="img"/)
-    expect(src).toMatch(/aria-label=\{bar\(\)\.tip\}/)
-    expect(src).toMatch(/if \(!bar \|\| !ref\?\.contains\(bar\)\) return hideTip\(\)/)
+  it("delegates SVG hit testing to one portal tooltip", () => {
+    expect(src).toMatch(/hit\(layout\(\)\.items, e\.clientX - rect\.left \+ ref\.scrollLeft\)/)
+    expect(src).toMatch(/const bar = bars\(\)\[idx\]/)
+    expect(src).toMatch(/text: bar\.tip/)
     expect(src).toMatch(/<Portal>/)
     expect(src).toMatch(/class="task-timeline-tooltip"/)
   })
+
+  it("keeps accessibility and bar overlays bounded", () => {
+    expect(src).toMatch(/data-timeline-count=\{bars\(\)\.length\}/)
+    expect(src).toMatch(/tabIndex=\{0\}/)
+    expect(src).toMatch(/aria-label=\{aria\(\)\}/)
+    expect(src).toMatch(/<For each=\{layout\(\)\.paths\}>/)
+    expect(src).not.toMatch(/<Index\b/)
+    expect(src).not.toMatch(/data-tip=/)
+  })
 })

packages/kilo-vscode/tests/unit/timeline-geometry.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "bun:test"
+import { geometry, hit, navigate } from "../../webview-ui/src/utils/timeline/geometry"
+
+describe("timeline geometry", () => {
+  const bars = [
+    { bg: "blue", width: 3, height: 4 },
+    { bg: "red", width: 5, height: 8 },
+    { bg: "blue", width: 2, height: 6 },
+  ]
+
+  it("preserves visual positions while grouping paths by color", () => {
+    const result = geometry(bars, 10)
+
+    expect(result.width).toBe(13)
+    expect(result.items.map((item) => [item.idx, item.x])).toEqual([
+      [0, 0],
+      [1, 4],
+      [2, 10],
+    ])
+    expect(result.paths).toHaveLength(2)
+    expect(result.paths.map((path) => path.bg)).toEqual(["blue", "red"])
+    expect(result.paths[0]!.d).toContain("M0,10")
+    expect(result.paths[0]!.d).toContain("M10,10")
+    expect(result.paths[1]!.d).toContain("M4,10")
+  })
+
+  it("hit tests bars but not their gaps", () => {
+    const items = geometry(bars, 10).items
+
+    expect(hit(items, 0)).toBe(0)
+    expect(hit(items, 2.99)).toBe(0)
+    expect(hit(items, 3)).toBe(-1)
+    expect(hit(items, 4)).toBe(1)
+    expect(hit(items, 12)).toBe(-1)
+  })
+
+  it("navigates in visual order with bounded endpoints", () => {
+    expect(navigate(-1, 3, "ArrowRight")).toBe(0)
+    expect(navigate(1, 3, "ArrowLeft")).toBe(0)
+    expect(navigate(2, 3, "ArrowRight")).toBe(2)
+    expect(navigate(1, 3, "Home")).toBe(0)
+    expect(navigate(1, 3, "End")).toBe(2)
+    expect(navigate(1, 3, "Escape")).toBe(1)
+    expect(navigate(0, 0, "ArrowRight")).toBe(-1)
+  })
+})

packages/kilo-vscode/tests/unit/transcript-cache.test.ts

@@ -0,0 +1,86 @@
+import { beforeEach, describe, expect, it } from "bun:test"
+import type { CacheSnapshot } from "virtua"
+import {
+  getMeasurement,
+  getScroll,
+  layoutFingerprint,
+  resetTranscriptCaches,
+  resolveAnchor,
+  rowFingerprint,
+  setMeasurement,
+  setScroll,
+} from "../../webview-ui/src/components/chat/transcript-cache"
+
+const snapshot = (id: number) => ({ id }) as unknown as CacheSnapshot
+const layout = layoutFingerprint({ width: 800, ratio: 2, font: "Kilo Sans", size: "13px", line: "20px" })
+
+describe("transcript measurement cache", () => {
+  beforeEach(resetTranscriptCaches)
+
+  it("returns a cache only for the exact row and layout fingerprints", () => {
+    const keys = rowFingerprint(["a", "bc"])
+    const cache = snapshot(1)
+    setMeasurement("session", keys, layout, cache)
+
+    expect(getMeasurement("session", keys, layout)).toBe(cache)
+    expect(getMeasurement("session", rowFingerprint(["a", "bd"]), layout)).toBeUndefined()
+    expect(getMeasurement("session", keys, layout)).toBeUndefined()
+  })
+
+  it("invalidates a measurement when layout changes", () => {
+    const keys = rowFingerprint(["row"])
+    setMeasurement("session", keys, layout, snapshot(1))
+    const changed = layoutFingerprint({ width: 801, ratio: 2, font: "Kilo Sans", size: "13px", line: "20px" })
+
+    expect(getMeasurement("session", keys, changed)).toBeUndefined()
+    expect(getMeasurement("session", keys, layout)).toBeUndefined()
+  })
+
+  it("uses collision-safe row and layout fingerprints", () => {
+    expect(rowFingerprint(["a|b", "c"])).not.toBe(rowFingerprint(["a", "b|c"]))
+    expect(layoutFingerprint({ width: 80, ratio: 1, font: "a|b", size: "c", line: "d" })).not.toBe(
+      layoutFingerprint({ width: 80, ratio: 1, font: "a", size: "b|c", line: "d" }),
+    )
+  })
+
+  it("evicts the least recently used measurement after 16 sessions", () => {
+    const keys = rowFingerprint(["row"])
+    for (let i = 0; i < 16; i += 1) setMeasurement(`s${i}`, keys, layout, snapshot(i))
+    expect(getMeasurement("s0", keys, layout)).toBeDefined()
+    setMeasurement("s16", keys, layout, snapshot(16))
+
+    expect(getMeasurement("s1", keys, layout)).toBeUndefined()
+    expect(getMeasurement("s0", keys, layout)).toBeDefined()
+  })
+})
+
+describe("transcript scroll cache", () => {
+  beforeEach(resetTranscriptCaches)
+
+  it("stores bottom-follow and anchored positions independently from measurements", () => {
+    setMeasurement("a", rowFingerprint(["row"]), layout, snapshot(1))
+    setScroll("a", { type: "bottom" })
+    setScroll("b", { type: "anchor", key: "row-2", offset: 37 })
+
+    expect(getScroll("a")).toEqual({ type: "bottom" })
+    expect(getScroll("b")).toEqual({ type: "anchor", key: "row-2", offset: 37 })
+  })
+
+  it("resolves an anchor after prepended rows shift its index", () => {
+    const state = { type: "anchor", key: "stable", offset: 19 } as const
+    expect(resolveAnchor(state, ["stable", "tail"])).toEqual({ index: 0, offset: 19 })
+    expect(resolveAnchor(state, ["older-1", "older-2", "stable", "tail"])).toEqual({ index: 2, offset: 19 })
+    expect(resolveAnchor(state, ["other"])).toBeUndefined()
+    expect(resolveAnchor({ type: "bottom" }, ["stable"])).toBeUndefined()
+  })
+
+  it("evicts the least recently used scroll state after 50 sessions", () => {
+    for (let i = 0; i < 50; i += 1) setScroll(`s${i}`, { type: "bottom" })
+    expect(getScroll("s0")).toEqual({ type: "bottom" })
+    setScroll("s50", { type: "anchor", key: "row", offset: 4 })
+
+    expect(getScroll("s1")).toBeUndefined()
+    expect(getScroll("s0")).toEqual({ type: "bottom" })
+    expect(getScroll("s50")).toEqual({ type: "anchor", key: "row", offset: 4 })
+  })
+})

packages/kilo-vscode/tests/unit/transcript-rows.test.ts

@@ -0,0 +1,219 @@
+import { describe, expect, it } from "bun:test"
+import { messageTurns } from "../../webview-ui/src/context/session-queue"
+import { partitionRows, transcriptRows } from "../../webview-ui/src/context/transcript-rows"
+import type { Message, Part } from "../../webview-ui/src/types/messages"
+
+const base = {
+  sessionID: "session",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  time: { created: 1 },
+}
+
+const user = (id: string, opts: Partial<Message> = {}): Message => ({ ...base, id, role: "user", ...opts })
+const assistant = (id: string, parentID: string, opts: Partial<Message> = {}): Message => ({
+  ...base,
+  id,
+  parentID,
+  role: "assistant",
+  ...opts,
+})
+const part = (id: string, messageID: string): Part => ({ id, messageID, type: "text", text: id })
+const lookup = (values: Record<string, Part[]>) => (id: string) => values[id] ?? []
+
+describe("transcriptRows", () => {
+  it("preserves turn order across user, bounded assistant, diff, and error rows", () => {
+    const u1 = user("u1", { summary: { diffs: [{ file: "a.ts" }] } })
+    const a1 = assistant("a1", "u1")
+    const a2 = assistant("a2", "u1", { error: { name: "ProviderError" } })
+    const u2 = user("u2")
+    const a3 = assistant("a3", "u2")
+    const parts = {
+      u1: [part("up1", "u1")],
+      a1: Array.from({ length: 10 }, (_, i) => part(`p${i}`, "a1")),
+      a2: [part("p10", "a2")],
+      a3: [part("p11", "a3")],
+    }
+
+    const rows = transcriptRows(messageTurns([u1, a1, a2, u2, a3]), lookup(parts))
+
+    expect(rows.map((row) => `${row.turn}:${row.type}`)).toEqual([
+      "u1:user",
+      "u1:assistant",
+      "u1:assistant",
+      "u1:assistant",
+      "u1:diff",
+      "u1:error",
+      "u2:user",
+      "u2:assistant",
+    ])
+    expect(rows.filter((row) => row.type === "assistant").map((row) => row.parts.length)).toEqual([8, 2, 1, 1])
+  })
+
+  it("uses the configured bound and keeps an empty assistant renderable", () => {
+    const u1 = user("u1")
+    const a1 = assistant("a1", "u1")
+    const a2 = assistant("a2", "u1")
+    const rows = transcriptRows(
+      messageTurns([u1, a1, a2]),
+      lookup({ a1: Array.from({ length: 7 }, (_, i) => part(`p${i}`, "a1")) }),
+      { size: 3 },
+    )
+
+    expect(rows.filter((row) => row.type === "assistant").map((row) => row.parts.length)).toEqual([3, 3, 1, 0])
+  })
+
+  it("omits synthetic users for partial turns and carries row metadata", () => {
+    const a1 = assistant("a1", "u1")
+    const rows = transcriptRows(messageTurns([a1]), lookup({ a1: [part("p1", "a1")] }), {
+      queued: new Set(["u1"]),
+      live: new Set(["u1"]),
+    })
+
+    expect(rows).toHaveLength(1)
+    expect(rows[0]).toMatchObject({ type: "assistant", turn: "u1", partial: true, queued: true, live: true })
+  })
+
+  it("places only the first visible non-abort error after diffs", () => {
+    const u1 = user("u1", { summary: { diffs: [{ file: "a.ts" }] } })
+    const a1 = assistant("a1", "u1", { error: { name: "MessageAbortedError" } })
+    const a2 = assistant("a2", "u1", { error: { name: "HiddenError" } })
+    const a3 = assistant("a3", "u1", { error: { name: "ShownError" } })
+    const rows = transcriptRows(messageTurns([u1, a1, a2, a3]), lookup({}), { hidden: (id) => id === "a2" })
+
+    expect(rows.slice(-2).map((row) => row.type)).toEqual(["diff", "error"])
+    expect(rows.at(-1)).toMatchObject({ type: "error", message: a3, error: a3.error })
+  })
+
+  it("keeps keys stable when older turns are prepended and parts are appended", () => {
+    const u1 = user("u1")
+    const a1 = assistant("a1", "u1")
+    const parts = Array.from({ length: 8 }, (_, i) => part(`p${i}`, "a1"))
+    const current = transcriptRows(messageTurns([u1, a1]), lookup({ a1: parts }))
+    const older = user("u0")
+    const next = transcriptRows(messageTurns([older, u1, a1]), lookup({ a1: [...parts, part("p8", "a1")] }))
+
+    expect(next.find((row) => row.type === "user" && row.turn === "u1")?.key).toBe(current[0]?.key)
+    expect(next.find((row) => row.type === "assistant" && row.parts[0]?.id === "p0")?.key).toBe(current[1]?.key)
+  })
+
+  it("reuses unchanged rows across prepend and append updates", () => {
+    const u1 = user("u1")
+    const a1 = assistant("a1", "u1")
+    const u2 = user("u2")
+    const p1 = part("p1", "a1")
+    const first = transcriptRows(messageTurns([u1, a1, u2]), lookup({ a1: [p1] }))
+    const u0 = user("u0")
+    const a2 = assistant("a2", "u2")
+    const second = transcriptRows(messageTurns([u0, u1, a1, u2, a2]), lookup({ a1: [p1] }), {}, first)
+
+    expect(second[1]).toBe(first[0])
+    expect(second[2]).toBe(first[1])
+    expect(second[3]).not.toBe(first[2])
+    expect(second[4]).not.toBe(first[2])
+  })
+
+  it("selects the last real assistant text part as the copy target", () => {
+    const u1 = user("u1")
+    const a1 = assistant("a1", "u1")
+    const a2 = assistant("a2", "u1")
+    const synthetic: Part = { ...part("p2", "a2"), synthetic: true }
+    const blank: Part = { ...part("p3", "a2"), text: " " }
+    const rows = transcriptRows(messageTurns([u1, a1, a2]), lookup({ a1: [part("p1", "a1")], a2: [synthetic, blank] }))
+
+    expect(rows.filter((row) => row.type === "assistant").map((row) => row.copy)).toEqual(["p1", "p1"])
+  })
+
+  it("keeps compaction replies ordered under the compacted turn and respects revert turns", () => {
+    const u1 = user("u1")
+    const a1 = assistant("a1", "u1")
+    const u2 = user("u2", {
+      parts: [{ id: "compact", messageID: "u2", type: "compaction", auto: false }],
+    })
+    const a2 = assistant("a2", "u1")
+    const u3 = user("u3")
+    const turns = messageTurns([u1, a1, u2, a2, u3], "u3")
+    const rows = transcriptRows(turns, (id) => (id === "u2" ? (u2.parts ?? []) : []))
+
+    expect(rows.map((row) => `${row.turn}:${row.message.id}`)).toEqual(["u1:u1", "u1:a1", "u2:u2", "u2:a2"])
+  })
+
+  it("replaces only rows whose data or metadata changed", () => {
+    const u1 = user("u1")
+    const a1 = assistant("a1", "u1")
+    const p1 = part("p1", "a1")
+    const first = transcriptRows(messageTurns([u1, a1]), lookup({ a1: [p1] }))
+    const changed = { ...p1, text: "changed" }
+    const second = transcriptRows(messageTurns([u1, a1]), lookup({ a1: [changed] }), {}, first)
+
+    expect(second[0]).toBe(first[0])
+    expect(second[1]).not.toBe(first[1])
+
+    const live = transcriptRows(messageTurns([u1, a1]), lookup({ a1: [changed] }), { live: new Set(["u1"]) }, second)
+    expect(live[0]).not.toBe(second[0])
+    expect(live[1]).not.toBe(second[1])
+  })
+})
+
+describe("partitionRows", () => {
+  it("pins only a bounded live suffix and virtualizes completed history", () => {
+    const u1 = user("u1")
+    const a1 = assistant("a1", "u1")
+    const u2 = user("u2")
+    const a2 = assistant("a2", "u2")
+    const parts = Array.from({ length: 18 }, (_, i) => part(`p${i}`, "a2"))
+    const rows = transcriptRows(messageTurns([u1, a1, u2, a2]), lookup({ a1: [part("old", "a1")], a2: parts }), {
+      live: new Set(["u2"]),
+    })
+    const result = partitionRows(rows)
+
+    expect(result.keep).toEqual([result.virtual.length - 2, result.virtual.length - 1])
+    expect(result.keep.map((idx) => result.virtual[idx]).every((row) => row?.live && row.turn === "u2")).toBe(true)
+    expect(
+      result.keep
+        .flatMap((idx) => {
+          const row = result.virtual[idx]
+          return row?.type === "assistant" ? row.parts : []
+        })
+        .map((item) => item.id),
+    ).toEqual(["p8", "p9", "p10", "p11", "p12", "p13", "p14", "p15", "p16", "p17"])
+    expect(result.virtual.some((row) => row.turn === "u1")).toBe(true)
+    expect(result.virtual.some((row) => row.turn === "u2" && row.type === "user")).toBe(true)
+  })
+
+  it("returns completed live metadata to virtual history after queue handoff", () => {
+    const u1 = user("u1")
+    const a1 = assistant("a1", "u1")
+    const u2 = user("u2")
+    const first = transcriptRows(messageTurns([u1, a1, u2]), lookup({ a1: [part("p1", "a1")] }), {
+      live: new Set(["u1"]),
+      queued: new Set(["u2"]),
+    })
+    const active = partitionRows(first)
+    expect(active.keep).toEqual([0, 1])
+    expect(active.keep.map((idx) => active.virtual[idx]?.turn)).toEqual(["u1", "u1"])
+    expect(active.queued.map((row) => row.turn)).toEqual(["u2"])
+
+    const second = transcriptRows(messageTurns([u1, a1, u2]), lookup({ a1: [part("p1", "a1")] }), {
+      live: new Set(["u2"]),
+    })
+    const handed = partitionRows(second)
+
+    expect(handed.keep.map((idx) => handed.virtual[idx]?.turn)).toEqual(["u2"])
+    expect(handed.virtual.filter((row) => row.turn === "u1")).toHaveLength(2)
+  })
+
+  it("keeps queued rows in visual order inside virtual data", () => {
+    const u1 = user("u1")
+    const u2 = user("u2")
+    const rows = transcriptRows(messageTurns([u1, u2]), lookup({}), {
+      live: new Set(["u1"]),
+      queued: new Set(["u2"]),
+    })
+    const result = partitionRows(rows)
+
+    expect(result.virtual.map((row) => row.turn)).toEqual(["u1"])
+    expect(result.keep).toEqual([0])
+    expect(result.queued.map((row) => row.turn)).toEqual(["u2"])
+    expect(result.queued[0]).toMatchObject({ type: "user", queued: true })
+  })
+})