@neurocode-ai/app 1.18.8

package/e2e/performance/timeline-stability/adverse.spec.ts

@@ -0,0 +1,250 @@
+import { expect, test } from "@playwright/test"
+import {
+  defineVisualRegions,
+  reportVisualStability,
+  startVisualProbe,
+  stopVisualProbe,
+  visualPlan,
+} from "../../utils/visual-stability"
+import {
+  assistantMessage,
+  partUpdated,
+  setupTimeline,
+  shell,
+  textPart,
+  toolPart,
+  userMessage,
+  waitForVisualSettle,
+  type TimelineMessage,
+} from "./fixture"
+
+test.describe("timeline adverse visual stability", () => {
+  test("does not pull a scrolled-away user while an active shell grows", async ({ page }, testInfo) => {
+    const activeShellID = "prt_adverse_01_shell"
+    const messages = [
+      ...history(24),
+      userMessage(),
+      assistantMessage([shell(activeShellID, "running")], { completed: false }),
+    ]
+    const timeline = await setupTimeline(page, {
+      messages,
+      settings: { shellToolPartsExpanded: true },
+      cpuRate: 4,
+      eventRetry: 30,
+    })
+    const scroller = page.locator(".scroll-view__viewport", {
+      has: page.locator('[data-timeline-row="AssistantPart"]'),
+    })
+    await scroller.evaluate((element) => {
+      element.dispatchEvent(new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: -450 }))
+      element.scrollTop = Math.max(0, element.scrollHeight - element.clientHeight - 450)
+    })
+    await page.waitForTimeout(150)
+    await expect
+      .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight - element.scrollTop))
+      .toBeGreaterThan(100)
+    const anchor = await scroller.evaluate((element) => {
+      const view = element.getBoundingClientRect()
+      return [...element.querySelectorAll<HTMLElement>("[data-timeline-key]")].find((row) => {
+        const rect = row.getBoundingClientRect()
+        return rect.top >= view.top + 40 && rect.bottom <= view.bottom - 40
+      })?.dataset.timelineKey
+    })
+    expect(anchor).toBeTruthy()
+    await waitForVisualSettle(page, [`[data-timeline-key="${anchor}"]`])
+
+    const regions = defineVisualRegions({
+      anchor: { selector: `[data-timeline-key="${anchor}"]` },
+    })
+    await startVisualProbe(page, regions)
+    await timeline.send(partUpdated(shell(activeShellID, "running", lines(1))), 180)
+    await timeline.send(partUpdated(shell(activeShellID, "running", lines(10))), 90)
+    await timeline.send(partUpdated(shell(activeShellID, "running", lines(50))), 350)
+    await timeline.send(partUpdated(shell(activeShellID, "completed", lines(50))), 500)
+    const trace = await stopVisualProbe<keyof typeof regions>(page)
+    await reportVisualStability(
+      testInfo,
+      "scrolled-away-shell",
+      trace,
+      visualPlan(regions, [
+        { type: "required", regions: ["anchor"] },
+        { type: "unique", regions: ["anchor"] },
+        { type: "stable", regions: ["anchor"] },
+        { type: "fixed", regions: ["anchor"] },
+        { type: "opacity", regions: "all" },
+        { type: "continuity", regions: "all" },
+        { type: "motion", regions: "all", maxPositionReversals: 0 },
+        { type: "label-stability", regions: "all" },
+      ]),
+    )
+  })
+
+  test("preserves an explicit shell state across virtualization", async ({ page }) => {
+    const targetID = "prt_virtual_shell"
+    const messages = [
+      userMessage(undefined, { id: "msg_0000_virtual_user", created: 1700000000000 }),
+      assistantMessage([shell(targetID, "completed", lines(20))], {
+        id: "msg_0001_virtual_assistant",
+        parentID: "msg_0000_virtual_user",
+        created: 1700000001000,
+      }),
+      ...history(35, 10),
+    ]
+    await setupTimeline(page, { messages, settings: { shellToolPartsExpanded: false } })
+    const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
+    await scroller.evaluate((element) => {
+      element.dispatchEvent(new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: -1_000 }))
+      element.scrollTop = 0
+    })
+    await page.waitForTimeout(300)
+    const trigger = page.locator(`[data-timeline-part-id="${targetID}"] [data-slot="collapsible-trigger"]`)
+    await expect(trigger).toBeVisible()
+    await trigger.click()
+    await expect(trigger).toHaveAttribute("aria-expanded", "true")
+
+    await scroller.evaluate((element) => (element.scrollTop = element.scrollHeight))
+    await expect(page.locator(`[data-timeline-part-id="${targetID}"]`)).toHaveCount(0)
+    await scroller.evaluate((element) => (element.scrollTop = 0))
+    await expect(trigger).toBeVisible()
+    await expect(trigger).toHaveAttribute("aria-expanded", "true")
+  })
+
+  test("keeps narrow viewport rows ordered during long shell growth", async ({ page }, testInfo) => {
+    const shellID = "prt_narrow_01_shell"
+    const followingID = "prt_narrow_02_following"
+    const timeline = await setupTimeline(page, {
+      messages: [
+        userMessage(),
+        assistantMessage(
+          [shell(shellID, "running"), textPart(followingID, "A narrow following row that wraps across lines.")],
+          {
+            completed: false,
+          },
+        ),
+      ],
+      settings: { shellToolPartsExpanded: true },
+      viewport: { width: 430, height: 800 },
+      cpuRate: 4,
+    })
+    await waitForVisualSettle(page, [
+      `[data-timeline-part-id="${shellID}"]`,
+      `[data-timeline-part-id="${followingID}"]`,
+    ])
+    const regions = defineVisualRegions({
+      shell: { selector: `[data-timeline-part-id="${shellID}"]`, closest: '[data-timeline-row="AssistantPart"]' },
+      following: {
+        selector: `[data-timeline-part-id="${followingID}"]`,
+        closest: '[data-timeline-row="AssistantPart"]',
+      },
+    })
+    await startVisualProbe(page, regions)
+    await timeline.send(partUpdated(shell(shellID, "running", wideLines(10))), 100)
+    await timeline.send(partUpdated(shell(shellID, "running", wideLines(50))), 300)
+    await timeline.send(partUpdated(shell(shellID, "completed", wideLines(50))), 500)
+    const trace = await stopVisualProbe<keyof typeof regions>(page)
+    await reportVisualStability(
+      testInfo,
+      "narrow-shell",
+      trace,
+      visualPlan(
+        regions,
+        [
+          { type: "required", regions: ["shell", "following"] },
+          { type: "unique", regions: ["shell", "following"] },
+          { type: "stable", regions: ["shell", "following"] },
+          { type: "opacity", regions: "all" },
+          { type: "continuity", regions: "all" },
+          { type: "motion", regions: "all", maxPositionReversals: 0 },
+          { type: "label-stability", regions: "all" },
+          { type: "preserve-bottom-anchor" },
+          { type: "flow", regions: ["shell", "following"] },
+        ],
+        { perMarker: true },
+      ),
+    )
+  })
+
+  test("keeps visible rows ordered while resizing desktop to narrow and back", async ({ page }, testInfo) => {
+    const shellID = "prt_resize_01_shell"
+    const contextIDs = ["prt_resize_02_read", "prt_resize_03_glob"]
+    const followingID = "prt_resize_04_following"
+    await setupTimeline(page, {
+      messages: [
+        userMessage(),
+        assistantMessage([
+          shell(shellID, "completed", wideLines(15)),
+          toolPart(contextIDs[0]!, "read", "completed", { filePath: "src/a.ts" }),
+          toolPart(contextIDs[1]!, "glob", "completed", { path: ".", pattern: "**/*.ts" }),
+          textPart(followingID, "Following responsive timeline content that wraps on narrow screens."),
+        ]),
+      ],
+      settings: { shellToolPartsExpanded: true },
+      cpuRate: 4,
+      seedHistory: true,
+    })
+    const group = `[data-timeline-part-ids="${contextIDs.join(",")}"]`
+    const regions = defineVisualRegions({
+      shell: { selector: `[data-timeline-part-id="${shellID}"]`, closest: '[data-timeline-row="AssistantPart"]' },
+      context: { selector: group, closest: '[data-timeline-row="AssistantPart"]' },
+      following: {
+        selector: `[data-timeline-part-id="${followingID}"]`,
+        closest: '[data-timeline-row="AssistantPart"]',
+      },
+    })
+    await startVisualProbe(page, regions)
+    await page.setViewportSize({ width: 430, height: 800 })
+    await page.waitForTimeout(500)
+    await page.setViewportSize({ width: 900, height: 800 })
+    await page.waitForTimeout(500)
+    await page.setViewportSize({ width: 1400, height: 900 })
+    await page.waitForTimeout(500)
+    const trace = await stopVisualProbe<keyof typeof regions>(page)
+    await reportVisualStability(
+      testInfo,
+      "responsive-resize",
+      trace,
+      visualPlan(regions, [
+        { type: "required", regions: ["shell", "context", "following"] },
+        { type: "unique", regions: ["shell", "context", "following"] },
+        { type: "stable", regions: ["shell", "context", "following"] },
+        { type: "opacity", regions: "all" },
+        { type: "continuity", regions: "all" },
+        { type: "motion", regions: "all", maxPositionReversals: 4, maxReversals: 4 },
+        { type: "label-stability", regions: "all" },
+        { type: "flow", regions: ["shell", "context", "following"] },
+      ]),
+    )
+  })
+})
+
+function history(count: number, offset = 0): TimelineMessage[] {
+  return Array.from({ length: count }, (_, index) => {
+    const value = index + offset
+    const prefix = `msg_0${String(value).padStart(3, "0")}_history`
+    const userID = `${prefix}_a_user`
+    return [
+      userMessage(undefined, { id: userID, created: 1699990000000 + value * 10_000 }),
+      assistantMessage(
+        [
+          textPart(
+            `prt_history_${String(value).padStart(3, "0")}`,
+            `Historical response ${value}. ${"Stable history content. ".repeat(8)}`,
+          ),
+        ],
+        {
+          id: `${prefix}_b_assistant`,
+          parentID: userID,
+          created: 1699990001000 + value * 10_000,
+        },
+      ),
+    ]
+  }).flat()
+}
+
+function lines(count: number) {
+  return Array.from({ length: count }, (_, index) => `line ${index + 1}`).join("\n")
+}
+
+function wideLines(count: number) {
+  return Array.from({ length: count }, (_, index) => `line ${index + 1} ${"wide-output-".repeat(20)}`).join("\n")
+}

package/e2e/performance/timeline-stability/context-matrix.spec.ts

@@ -0,0 +1,192 @@
+import { expect, test } from "@playwright/test"
+import {
+  defineVisualRegions,
+  reportVisualStability,
+  startVisualProbe,
+  stopVisualProbe,
+  visualPlan,
+} from "../../utils/visual-stability"
+import {
+  assistantID,
+  assistantMessage,
+  event,
+  partUpdated,
+  setupTimeline,
+  textPart,
+  toolPart,
+  userMessage,
+  waitForVisualSettle,
+} from "./fixture"
+
+const inputs = {
+  read: { filePath: "src/a.ts", offset: 0, limit: 120 },
+  glob: { path: ".", pattern: "**/*.ts" },
+  grep: { path: ".", pattern: "stable", include: "*.ts" },
+  list: { path: "src" },
+}
+
+test("appends context operations while the group is expanded", async ({ page }, testInfo) => {
+  const firstID = "prt_append_01_read"
+  const followingID = "prt_append_99_following"
+  const timeline = await setupTimeline(page, {
+    messages: [
+      userMessage(),
+      assistantMessage([toolPart(firstID, "read", "running", inputs.read), textPart(followingID, "Following append")], {
+        completed: false,
+      }),
+    ],
+    cpuRate: 4,
+  })
+  const initialGroup = `[data-timeline-part-ids="${firstID}"]`
+  await page.locator(`${initialGroup} [data-slot="collapsible-trigger"]`).click()
+  await waitForVisualSettle(page, [initialGroup, `[data-timeline-part-id="${followingID}"]`])
+  const regions = defineVisualRegions({
+    context: {
+      selector: '[data-timeline-part-ids^="prt_append_01_read"]',
+      closest: '[data-timeline-row="AssistantPart"]',
+    },
+    following: { selector: `[data-timeline-part-id="${followingID}"]`, closest: '[data-timeline-row="AssistantPart"]' },
+  })
+  await startVisualProbe(page, regions)
+  await timeline.send(partUpdated(toolPart("prt_append_02_glob", "glob", "running", inputs.glob)), 180)
+  await timeline.send(partUpdated(toolPart("prt_append_03_grep", "grep", "completed", inputs.grep)), 240)
+  await timeline.send(partUpdated(toolPart("prt_append_04_list", "list", "completed", inputs.list)), 500)
+  const trace = await stopVisualProbe<keyof typeof regions>(page)
+  await reportVisualStability(
+    testInfo,
+    "context-append",
+    trace,
+    visualPlan(
+      regions,
+      [
+        { type: "required", regions: ["context", "following"] },
+        { type: "unique", regions: ["context", "following"] },
+        { type: "stable", regions: ["context", "following"] },
+        { type: "opacity", regions: "all" },
+        { type: "continuity", regions: "all" },
+        { type: "motion", regions: ["following"], maxPositionReversals: 0 },
+        { type: "label-stability", regions: "all" },
+        { type: "preserve-bottom-anchor" },
+        { type: "flow", regions: ["context", "following"] },
+      ],
+      { perMarker: true },
+    ),
+  )
+  await expect(
+    page.locator(
+      '[data-timeline-part-ids="prt_append_01_read,prt_append_02_glob,prt_append_03_grep,prt_append_04_list"]',
+    ),
+  ).toBeVisible()
+  await expect(
+    page.locator('[data-timeline-part-ids^="prt_append_01_read"] [data-slot="collapsible-trigger"]'),
+  ).toHaveAttribute("aria-expanded", "true")
+})
+
+test("splits and merges context groups when a middle text part changes", async ({ page }, testInfo) => {
+  const textID = "prt_split_02_text"
+  const followingID = "prt_split_99_following"
+  const timeline = await setupTimeline(page, {
+    messages: [
+      userMessage(),
+      assistantMessage([
+        toolPart("prt_split_01_read", "read", "completed", inputs.read),
+        textPart(textID, "Boundary"),
+        toolPart("prt_split_03_glob", "glob", "completed", inputs.glob),
+        textPart(followingID, "Following split groups"),
+      ]),
+    ],
+    cpuRate: 4,
+  })
+  const regions = defineVisualRegions({
+    following: { selector: `[data-timeline-part-id="${followingID}"]`, closest: '[data-timeline-row="AssistantPart"]' },
+  })
+  await startVisualProbe(page, regions)
+  await timeline.send(
+    event("message.part.removed", { sessionID: "ses_timeline_stability", messageID: assistantID, partID: textID }),
+    500,
+  )
+  await expect(page.locator('[data-timeline-part-ids="prt_split_01_read,prt_split_03_glob"]')).toBeVisible()
+  await timeline.send(partUpdated(textPart(textID, "Boundary restored")), 500)
+  await expect(page.locator('[data-timeline-part-ids="prt_split_01_read"]')).toBeVisible()
+  await expect(page.locator('[data-timeline-part-ids="prt_split_03_glob"]')).toBeVisible()
+  const trace = await stopVisualProbe<keyof typeof regions>(page)
+  await reportVisualStability(
+    testInfo,
+    "context-split-merge",
+    trace,
+    visualPlan(
+      regions,
+      [
+        { type: "required", regions: ["following"] },
+        { type: "unique", regions: ["following"] },
+        { type: "stable", regions: ["following"] },
+        { type: "opacity", regions: "all" },
+        { type: "continuity", regions: "all" },
+        { type: "motion", regions: "all", maxPositionReversals: 1 },
+        { type: "label-stability", regions: "all" },
+      ],
+      { perMarker: true },
+    ),
+  )
+})
+
+test("removing the first context member replaces the group once without overlapping following content", async ({
+  page,
+}, testInfo) => {
+  const ids = ["prt_key_01_read", "prt_key_02_glob", "prt_key_03_grep"]
+  const followingID = "prt_key_99_following"
+  const timeline = await setupTimeline(page, {
+    messages: [
+      userMessage(),
+      assistantMessage([
+        toolPart(ids[0]!, "read", "completed", inputs.read),
+        toolPart(ids[1]!, "glob", "completed", inputs.glob),
+        toolPart(ids[2]!, "grep", "completed", inputs.grep),
+        textPart(followingID, "Following replaced group"),
+      ]),
+    ],
+    cpuRate: 4,
+  })
+  const original = page.locator(`[data-timeline-part-ids="${ids.join(",")}"]`)
+  const originalRowKey = await original.evaluate((element) =>
+    element.closest("[data-timeline-key]")?.getAttribute("data-timeline-key"),
+  )
+  await original.locator('[data-slot="collapsible-trigger"]').click()
+  await expect(original.locator('[data-slot="collapsible-trigger"]')).toHaveAttribute("aria-expanded", "true")
+  const regions = defineVisualRegions({
+    context: {
+      selector: '[data-timeline-part-ids*="prt_key_02_glob"]',
+      closest: '[data-timeline-row="AssistantPart"]',
+    },
+    following: { selector: `[data-timeline-part-id="${followingID}"]`, closest: '[data-timeline-row="AssistantPart"]' },
+  })
+  await startVisualProbe(page, regions)
+  await timeline.send(
+    event("message.part.removed", { sessionID: "ses_timeline_stability", messageID: assistantID, partID: ids[0] }),
+    500,
+  )
+  const trace = await stopVisualProbe<keyof typeof regions>(page)
+  await reportVisualStability(
+    testInfo,
+    "context-first-remove",
+    trace,
+    visualPlan(regions, [
+      { type: "required", regions: ["context", "following"] },
+      { type: "unique", regions: ["context", "following"] },
+      { type: "opacity", regions: "all" },
+      { type: "continuity", regions: "all" },
+      { type: "motion", regions: "all", maxPositionReversals: 0 },
+      { type: "label-stability", regions: "all" },
+      { type: "flow", regions: ["context", "following"] },
+    ]),
+  )
+  await expect(page.locator(`[data-timeline-part-ids="${ids.slice(1).join(",")}"]`)).toBeVisible()
+  expect(
+    await page
+      .locator(`[data-timeline-part-ids="${ids.slice(1).join(",")}"]`)
+      .evaluate((element) => element.closest("[data-timeline-key]")?.getAttribute("data-timeline-key")),
+  ).toBe(originalRowKey)
+  await expect(
+    page.locator(`[data-timeline-part-ids="${ids.slice(1).join(",")}"] [data-slot="collapsible-trigger"]`),
+  ).toHaveAttribute("aria-expanded", "true")
+})

package/e2e/performance/timeline-stability/environment-matrix.spec.ts

@@ -0,0 +1,113 @@
+import { test } from "@playwright/test"
+import {
+  defineVisualRegions,
+  reportVisualStability,
+  startVisualProbe,
+  stopVisualProbe,
+  visualPlan,
+} from "../../utils/visual-stability"
+import {
+  assistantMessage,
+  partUpdated,
+  setupTimeline,
+  shell,
+  textPart,
+  userMessage,
+  waitForVisualSettle,
+} from "./fixture"
+
+// Fractional scaling exercises different browser rounding than the baseline.
+for (const deviceScaleFactor of [1, 1.25]) {
+  test(`keeps shell growth ordered at device scale ${deviceScaleFactor}`, async ({ page }, testInfo) => {
+    const shellID = `prt_dpr_${String(deviceScaleFactor).replace(".", "_")}_01_shell`
+    const followingID = `prt_dpr_${String(deviceScaleFactor).replace(".", "_")}_02_following`
+    const timeline = await setupTimeline(page, {
+      messages: [
+        userMessage(),
+        assistantMessage([shell(shellID, "running"), textPart(followingID, "Following scaled shell")], {
+          completed: false,
+        }),
+      ],
+      settings: { shellToolPartsExpanded: true },
+      cpuRate: 4,
+      deviceScaleFactor,
+      seedHistory: true,
+    })
+    await waitForVisualSettle(page, [
+      `[data-timeline-part-id="${shellID}"]`,
+      `[data-timeline-part-id="${followingID}"]`,
+    ])
+    const regions = defineVisualRegions({
+      shell: { selector: `[data-timeline-part-id="${shellID}"]`, closest: '[data-timeline-row="AssistantPart"]' },
+      following: {
+        selector: `[data-timeline-part-id="${followingID}"]`,
+        closest: '[data-timeline-row="AssistantPart"]',
+      },
+    })
+    await startVisualProbe(page, regions)
+    await timeline.send(partUpdated(shell(shellID, "running", lines(20))), 180)
+    await timeline.send(partUpdated(shell(shellID, "completed", lines(20))), 500)
+    const trace = await stopVisualProbe<keyof typeof regions>(page)
+    await reportVisualStability(testInfo, `dpr-${deviceScaleFactor}`, trace, shellPlan(regions))
+  })
+}
+
+for (const reducedMotion of [true]) {
+  test(`keeps shell and status transitions ordered with reduced motion ${reducedMotion}`, async ({
+    page,
+  }, testInfo) => {
+    const shellID = `prt_motion_${reducedMotion}_01_shell`
+    const followingID = `prt_motion_${reducedMotion}_02_following`
+    const timeline = await setupTimeline(page, {
+      messages: [
+        userMessage(),
+        assistantMessage([shell(shellID, "running"), textPart(followingID, "Following motion profile")], {
+          completed: false,
+        }),
+      ],
+      settings: { shellToolPartsExpanded: true },
+      reducedMotion,
+      cpuRate: 4,
+      seedHistory: true,
+    })
+    await waitForVisualSettle(page, [
+      `[data-timeline-part-id="${shellID}"]`,
+      `[data-timeline-part-id="${followingID}"]`,
+    ])
+    const regions = defineVisualRegions({
+      shell: { selector: `[data-timeline-part-id="${shellID}"]`, closest: '[data-timeline-row="AssistantPart"]' },
+      following: {
+        selector: `[data-timeline-part-id="${followingID}"]`,
+        closest: '[data-timeline-row="AssistantPart"]',
+      },
+    })
+    await startVisualProbe(page, regions)
+    await timeline.send(partUpdated(shell(shellID, "completed", lines(10))), 500)
+    const trace = await stopVisualProbe<keyof typeof regions>(page)
+    await reportVisualStability(testInfo, `reduced-motion-${reducedMotion}`, trace, shellPlan(regions))
+  })
+}
+
+function lines(count: number) {
+  return Array.from({ length: count }, (_, index) => `line ${index + 1}`).join("\n")
+}
+
+function shellPlan<Regions extends ReturnType<typeof defineVisualRegions>>(
+  regions: Regions & Record<"shell" | "following", { selector: string }>,
+) {
+  return visualPlan(
+    regions,
+    [
+      { type: "required", regions: ["shell", "following"] },
+      { type: "unique", regions: ["shell", "following"] },
+      { type: "stable", regions: ["shell", "following"] },
+      { type: "opacity", regions: "all" },
+      { type: "continuity", regions: "all" },
+      { type: "motion", regions: "all", maxPositionReversals: 0 },
+      { type: "label-stability", regions: "all" },
+      { type: "preserve-bottom-anchor" },
+      { type: "flow", regions: ["shell", "following"] },
+    ],
+    { perMarker: true },
+  )
+}

package/e2e/performance/timeline-stability/file-matrix.spec.ts

@@ -0,0 +1,121 @@
+import { test } from "@playwright/test"
+import {
+  defineVisualRegions,
+  reportVisualStability,
+  startVisualProbe,
+  stopVisualProbe,
+  visualPlan,
+} from "../../utils/visual-stability"
+import {
+  assistantMessage,
+  partUpdated,
+  setupTimeline,
+  textPart,
+  toolPart,
+  userMessage,
+  waitForVisualSettle,
+} from "./fixture"
+
+const profiles = [
+  { name: "edit", tool: "edit", input: { filePath: "src/edit.ts" } },
+  {
+    name: "multi patch",
+    tool: "apply_patch",
+    input: { files: ["src/a.ts", "src/b.ts", "src/old.ts", "src/moved.ts"] },
+  },
+] as const
+
+for (const profile of profiles) {
+  test(`stabilizes ${profile.name} pending to completed`, async ({ page }, testInfo) => {
+    const partID = `prt_file_matrix_${profiles.indexOf(profile)}`
+    const followingID = `prt_file_matrix_following_${profiles.indexOf(profile)}`
+    const timeline = await setupTimeline(page, {
+      messages: [
+        userMessage(),
+        assistantMessage(
+          [
+            toolPart(partID, profile.tool, "pending", profile.input),
+            textPart(followingID, `Following ${profile.name}`),
+          ],
+          { completed: false },
+        ),
+      ],
+      settings: { editToolPartsExpanded: true },
+      cpuRate: 4,
+    })
+    await waitForVisualSettle(page, [`[data-timeline-part-id="${partID}"]`, `[data-timeline-part-id="${followingID}"]`])
+    const regions = defineVisualRegions({
+      tool: { selector: `[data-timeline-part-id="${partID}"]`, closest: '[data-timeline-row="AssistantPart"]' },
+      following: {
+        selector: `[data-timeline-part-id="${followingID}"]`,
+        closest: '[data-timeline-row="AssistantPart"]',
+      },
+    })
+    await startVisualProbe(page, regions)
+    await timeline.send(partUpdated(toolPart(partID, profile.tool, "running", profile.input)), 180)
+    await timeline.send(partUpdated(completedPart(partID, profile)), 900)
+    const trace = await stopVisualProbe<keyof typeof regions>(page)
+    await reportVisualStability(
+      testInfo,
+      `file-${profile.name}`,
+      trace,
+      visualPlan(
+        regions,
+        [
+          { type: "required", regions: ["tool", "following"] },
+          { type: "unique", regions: ["tool", "following"] },
+          { type: "stable", regions: ["tool", "following"] },
+          { type: "opacity", regions: "all" },
+          { type: "continuity", regions: "all" },
+          { type: "motion", regions: "all", maxPositionReversals: 0, maxReversals: 1 },
+          { type: "label-stability", regions: "all" },
+          { type: "preserve-bottom-anchor" },
+          { type: "flow", regions: ["tool", "following"] },
+        ],
+        { perMarker: true },
+      ),
+    )
+  })
+}
+
+function completedPart(partID: string, profile: (typeof profiles)[number]) {
+  if (profile.tool === "edit") {
+    return toolPart(partID, profile.tool, "completed", profile.input, {
+      metadata: {
+        filediff: {
+          file: "src/edit.ts",
+          additions: 50,
+          deletions: 50,
+          before: source(50, false),
+          after: source(50, true),
+        },
+      },
+    })
+  }
+  const files = [
+    patchFile("src/a.ts", "update"),
+    patchFile("src/b.ts", "add"),
+    patchFile("src/old.ts", "delete"),
+    { ...patchFile("src/moved.ts", "move"), move: "src/new-place.ts" },
+  ]
+  return toolPart(partID, profile.tool, "completed", profile.input, { metadata: { files } })
+}
+
+function patchFile(filePath: string, type: "add" | "update" | "delete" | "move") {
+  return {
+    filePath,
+    relativePath: filePath,
+    type,
+    additions: type === "delete" ? 0 : 20,
+    deletions: type === "add" ? 0 : 20,
+    before: type === "add" ? undefined : source(20, false),
+    after: type === "delete" ? undefined : source(20, true),
+  }
+}
+
+function source(count: number, changed: boolean) {
+  return Array.from(
+    { length: count },
+    (_, index) => `export const value${index} = ${changed ? index + 1 : index}\n`,
+  ).join("")
+}