test(app): add PR0 perf baseline probe

.github/workflows/perf-probe-baseline.yml

@@ -0,0 +1,67 @@
+name: perf-probe-baseline
+
+on:
+  pull_request:
+    paths:
+      - ".github/workflows/perf-probe-baseline.yml"
+      - "packages/app/e2e/perf/**"
+      - "packages/app/e2e/fixtures.ts"
+      - "packages/app/package.json"
+      - "packages/app/script/e2e-local.ts"
+      - "packages/app/src/testing/perf-metrics*"
+  workflow_dispatch:
+
+env:
+  PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/.playwright-browsers
+
+jobs:
+  perf-probe-baseline:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # actions/checkout@v6
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # actions/setup-node@v6.4.0
+        with:
+          node-version: "24"
+
+      - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # oven-sh/setup-bun@v2
+        with:
+          bun-version: "1.3.13"
+
+      - uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # actions/cache@v5
+        with:
+          path: ~/.bun/install/cache
+          key: bun-${{ runner.os }}-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            bun-${{ runner.os }}-
+
+      - uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # actions/cache@v5
+        with:
+          path: ${{ github.workspace }}/.playwright-browsers
+          key: playwright-${{ runner.os }}-${{ hashFiles('packages/app/package.json', 'bun.lock') }}
+
+      - run: bun install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        working-directory: packages/app
+        run: bunx playwright install --with-deps chromium
+
+      - name: Run perf probe baseline
+        env:
+          CI: "true"
+        run: bun --cwd packages/app test:e2e:local:perf
+
+      - name: Upload perf probe artifacts
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # actions/upload-artifact@v7
+        with:
+          name: perf-probe-baseline-${{ github.run_attempt }}
+          if-no-files-found: ignore
+          retention-days: 7
+          path: |
+            packages/app/e2e/perf-results
+            packages/app/e2e/playwright-report
+            packages/app/e2e/test-results

packages/app/.gitignore

@@ -1,3 +1,4 @@
 src/assets/theme.css
 e2e/test-results
 e2e/playwright-report
+e2e/perf-results

packages/app/e2e/perf/perf-probe.spec.ts

@@ -0,0 +1,266 @@
+import fs from "node:fs/promises"
+import path from "node:path"
+import { raw } from "../../../opencode/test/lib/llm-server"
+import { test, expect } from "../fixtures"
+import { withSession } from "../actions"
+import { promptSelector, sessionMessageItemSelector, sessionTurnListSelector, scrollViewportSelector } from "../selectors"
+import { sessionPath } from "../utils"
+import { installPerfProbe, resetPerfProbe, snapshotPerfProbe, summarizeScenarioRuns } from "./probe"
+
+const outputPath = process.env.PAWWORK_PERF_OUTPUT ?? path.join(process.cwd(), "e2e", "perf-results", "pr0.1-baseline.json")
+
+const longMarkdown = [
+  "# Baseline stream",
+  "",
+  "This stream exists to stress markdown rendering while the session remains interactive.",
+  "",
+  "- list item one",
+  "- list item two with a [link](https://example.com)",
+  "- 中英混排 content for layout and glyph coverage",
+  "",
+  "```ts",
+  "export function sample(input: number) {",
+  "  return input * 2",
+  "}",
+  "```",
+  "",
+  ...Array.from({ length: 80 }, (_, index) => `Paragraph ${index + 1}: ${"streaming markdown content ".repeat(8)}`),
+].join("\n")
+
+const scenarioResults: ReturnType<typeof summarizeScenarioRuns>[] = []
+
+const chatChunk = (delta: Record<string, unknown>, input?: { finish?: string; usage?: { input: number; output: number } }) => ({
+  id: "chatcmpl-test",
+  object: "chat.completion.chunk",
+  choices: [
+    {
+      delta,
+      ...(input?.finish ? { finish_reason: input.finish } : {}),
+    },
+  ],
+  ...(input?.usage
+    ? {
+        usage: {
+          prompt_tokens: input.usage.input,
+          completion_tokens: input.usage.output,
+          total_tokens: input.usage.input + input.usage.output,
+        },
+      }
+    : {}),
+})
+
+function splitText(value: string, size: number) {
+  const out: string[] = []
+  for (let index = 0; index < value.length; index += size) {
+    out.push(value.slice(index, index + size))
+  }
+  return out
+}
+
+function deferred() {
+  let resolve!: () => void
+  const promise = new Promise<void>((done) => {
+    resolve = done
+  })
+  return { promise, resolve }
+}
+
+async function settleFrames(page: Parameters<typeof snapshotPerfProbe>[0], count = 2) {
+  await page.evaluate(async (frames) => {
+    for (let index = 0; index < frames; index += 1) {
+      await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+    }
+  }, count)
+}
+
+async function navigateProjectHome(page: Parameters<typeof snapshotPerfProbe>[0], directory: string) {
+  await page.goto(sessionPath(directory))
+  await expect(page.locator('[data-component="session-new-home"]')).toBeVisible()
+}
+
+async function readPromptSend(page: Parameters<typeof snapshotPerfProbe>[0]) {
+  return page.evaluate(() => {
+    const win = window as Window & {
+      __opencode_e2e?: {
+        prompt?: {
+          sent?: {
+            started?: number
+            count?: number
+            sessionID?: string
+          }
+        }
+      }
+    }
+    const sent = win.__opencode_e2e?.prompt?.sent
+    return {
+      started: sent?.started ?? 0,
+      count: sent?.count ?? 0,
+      sessionID: sent?.sessionID,
+    }
+  })
+}
+
+async function submitVisiblePrompt(page: Parameters<typeof snapshotPerfProbe>[0], text: string) {
+  const prompt = page.locator(promptSelector).first()
+  const previous = await readPromptSend(page)
+  await expect(prompt).toBeVisible()
+  await prompt.click()
+  await prompt.fill("")
+  await page.keyboard.type(text)
+  await page.keyboard.press("Enter")
+  await expect.poll(async () => (await readPromptSend(page)).started, { timeout: 10_000 }).toBeGreaterThan(previous.started)
+}
+
+async function scrollTimelineTo(page: Parameters<typeof snapshotPerfProbe>[0], top: number) {
+  const found = await page.evaluate(
+    ({ top, scrollViewportSelector, turnListSelector }) => {
+      const list = document.querySelector(turnListSelector)
+      const viewport = list?.closest(scrollViewportSelector)
+      if (!(viewport instanceof HTMLElement)) return false
+      viewport.scrollTop = top
+      viewport.dispatchEvent(new Event("scroll", { bubbles: true }))
+      return true
+    },
+    { top, scrollViewportSelector, turnListSelector: sessionTurnListSelector },
+  )
+  expect(found).toBe(true)
+}
+
+test.describe("PR0.1 perf probe baseline", () => {
+  test.describe.configure({ mode: "serial" })
+
+  test.afterAll(async () => {
+    await fs.mkdir(path.dirname(outputPath), { recursive: true })
+    await fs.writeFile(outputPath, `${JSON.stringify(scenarioResults, null, 2)}\n`)
+  })
+
+  test("homepage-cold emits a 3-run JSON baseline", async ({ page, project }) => {
+    await installPerfProbe(page)
+    await project.open()
+
+    const runs = []
+    for (let run = 0; run < 3; run += 1) {
+      if (run > 0) await navigateProjectHome(page, project.directory)
+      const prompt = page.locator(promptSelector).first()
+      await expect(prompt).toBeVisible()
+      await prompt.click()
+      await page.getByRole("button", { name: /Switch workspace|切换工作目录/i }).click()
+      await settleFrames(page, 3)
+      await page.keyboard.press("Escape")
+      runs.push(await snapshotPerfProbe(page))
+    }
+
+    scenarioResults.push(summarizeScenarioRuns({ branch: "dev", scenario: "homepage-cold", runs }))
+  })
+
+  test("session-streaming-long emits a 3-run JSON baseline", async ({ page, project, llm }) => {
+    await installPerfProbe(page)
+    await project.open()
+
+    const runs = []
+    for (let run = 0; run < 3; run += 1) {
+      const firstWave = deferred()
+      const secondWave = deferred()
+      const chunks = splitText(longMarkdown, 320)
+      const headChunks = [chatChunk({ role: "assistant" }), ...chunks.slice(0, 3).map((chunk) => chatChunk({ content: chunk }))]
+      const stageOneChunks = chunks.slice(3, 9).map((chunk) => chatChunk({ content: chunk }))
+      const stageTwoChunks = chunks.slice(9).map((chunk) => chatChunk({ content: chunk }))
+
+      await navigateProjectHome(page, project.directory)
+      await llm.push(
+        raw({
+          head: headChunks,
+          stages: [
+            { wait: firstWave.promise, chunks: stageOneChunks },
+            { wait: secondWave.promise, chunks: stageTwoChunks },
+          ],
+          tail: [chatChunk({}, { finish: "stop", usage: { input: 120, output: 480 } })],
+        }),
+      )
+
+      const send = project.prompt(`Stream probe ${run + 1}`)
+      await expect.poll(() => page.url(), { timeout: 30_000 }).toContain("/session/")
+      await expect(page.getByText("This stream exists to stress markdown rendering while the session remains interactive.")).toBeVisible({
+        timeout: 30_000,
+      })
+
+      await resetPerfProbe(page)
+      const click = page.getByRole("button", { name: "Right utility panel" }).click()
+      firstWave.resolve()
+      await click
+      await settleFrames(page, 6)
+      secondWave.resolve()
+      await send
+      runs.push(await snapshotPerfProbe(page))
+    }
+
+    scenarioResults.push(summarizeScenarioRuns({ branch: "dev", scenario: "session-streaming-long", runs }))
+  })
+
+  test("tool-call-expand emits a 3-run JSON baseline", async ({ page, project, llm }) => {
+    await installPerfProbe(page)
+    await project.open()
+
+    const runs = []
+    for (let run = 0; run < 3; run += 1) {
+      await navigateProjectHome(page, project.directory)
+      const created = await project.sdk.worktree.create({ directory: project.directory }).then((result) => result.data)
+      if (!created?.directory) throw new Error("Failed to create worktree for perf probe")
+      project.trackDirectory(created.directory)
+      await llm.tool("enter-worktree", { path: created.directory })
+      await llm.text(`tool call baseline ${run + 1}`)
+      await project.prompt(`Create todos for perf probe run ${run + 1}.`)
+      const trigger = page.locator('[data-slot="collapsible-trigger"]').filter({ has: page.locator('[data-component="tool-trigger"]') }).first()
+      await expect(trigger).toBeVisible({ timeout: 30_000 })
+      await resetPerfProbe(page)
+      await trigger.click()
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await trigger.click()
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      await trigger.click()
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await settleFrames(page, 4)
+      runs.push(await snapshotPerfProbe(page))
+    }
+
+    scenarioResults.push(summarizeScenarioRuns({ branch: "dev", scenario: "tool-call-expand", runs }))
+  })
+
+  test("session-scroll-reading emits a 3-run JSON baseline", async ({ page, project }) => {
+    await installPerfProbe(page)
+    await project.open()
+
+    const runs = []
+    for (let run = 0; run < 3; run += 1) {
+      await withSession(project.sdk, `perf scroll ${Date.now()}-${run}`, async (session) => {
+        for (let index = 0; index < 18; index += 1) {
+          await project.sdk.session.promptAsync({
+            sessionID: session.id,
+            noReply: true,
+            parts: [
+              {
+                type: "text",
+                text: `scroll seed ${run}-${index}\n${Array.from({ length: 18 }, (_, line) => `line ${line} ${"content ".repeat(8)}`).join("\n")}`,
+              },
+            ],
+          })
+        }
+
+        await page.goto(sessionPath(project.directory, session.id))
+        await expect(page.locator(sessionMessageItemSelector).first()).toBeVisible({ timeout: 30_000 })
+        await expect.poll(async () => page.locator(sessionMessageItemSelector).count()).toBeGreaterThanOrEqual(8)
+        await resetPerfProbe(page)
+        await page.locator(scrollViewportSelector).first().hover()
+        await page.mouse.wheel(0, -3600)
+        await settleFrames(page, 2)
+        await scrollTimelineTo(page, 0)
+        await settleFrames(page, 2)
+        await page.mouse.wheel(0, 3600)
+        await settleFrames(page, 4)
+        runs.push(await snapshotPerfProbe(page))
+      })
+    }
+
+    scenarioResults.push(summarizeScenarioRuns({ branch: "dev", scenario: "session-scroll-reading", runs }))
+  })
+})