feat(ui): group tool calls into trow summaries

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

@@ -1,5 +1,6 @@
 import fs from "node:fs/promises"
 import path from "node:path"
+import type { Locator, Page } from "@playwright/test"
 import { raw } from "../../../opencode/test/lib/llm-server"
 import { test, expect } from "../fixtures"
 import { cleanupSession, waitSessionIdle, waitSessionSaved, waitTerminalFocusIdle, withSession } from "../actions"
@@ -691,6 +692,87 @@ async function seedHeavyBashSession(input: { project: PerfProject; llm: PerfLlm;
   return session
 }
 
+async function revealTrowBodyIfPresent(page: Page) {
+  const summary = page.locator('[data-slot="trow-summary"]').first()
+  if (!(await summary.isVisible({ timeout: 1_000 }).catch(() => false))) return
+  await summary.click()
+  await expect(page.locator('[data-slot="trow-body"]').first()).toBeVisible()
+}
+
+function expandableToolTriggers(page: Page) {
+  return page
+    .locator('[data-slot="collapsible-trigger"]')
+    .filter({ has: page.locator('[data-component="tool-trigger"]') })
+}
+
+async function visibleExpandableToolTrigger(page: Page) {
+  const triggers = expandableToolTriggers(page)
+  const count = await triggers.count()
+  for (let index = 0; index < count; index += 1) {
+    const trigger = triggers.nth(index)
+    if (!(await trigger.isVisible().catch(() => false))) continue
+    if ((await trigger.getAttribute("data-hide-details").catch(() => null)) === "true") continue
+    return trigger
+  }
+  return undefined
+}
+
+async function visibleToolTrigger(page: Page) {
+  const triggers = expandableToolTriggers(page)
+  const count = await triggers.count()
+  for (let index = 0; index < count; index += 1) {
+    const trigger = triggers.nth(index)
+    if (await trigger.isVisible().catch(() => false)) return trigger
+  }
+  return undefined
+}
+
+async function exerciseToolExpandCycle(page: Page) {
+  const trowDetails = page.locator('[data-component="session-turn-trow-block"] details').first()
+  const trowSummary = trowDetails.locator('[data-slot="trow-summary"]').first()
+  let trigger: Locator | undefined
+  let mode: "trow" | "tool" | undefined
+
+  await expect
+    .poll(
+      async () => {
+        if (await trowSummary.isVisible().catch(() => false)) {
+          mode = "trow"
+          return "ready"
+        }
+        trigger = await visibleExpandableToolTrigger(page)
+        trigger ??= await visibleToolTrigger(page)
+        if (trigger) {
+          mode = "tool"
+          return "ready"
+        }
+        return "loading"
+      },
+      { timeout: 30_000 },
+    )
+    .toBe("ready")
+
+  if (mode === "trow") {
+    await resetPerfProbe(page)
+    await trowSummary.click()
+    await expect(trowDetails).toHaveAttribute("open", "")
+    await trowSummary.click()
+    await expect(trowDetails).not.toHaveAttribute("open", "")
+    await trowSummary.click()
+    await expect(trowDetails).toHaveAttribute("open", "")
+    return
+  }
+
+  if (!trigger) throw new Error("No expandable tool trigger found")
+  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")
+}
+
 function skipUnlessScenario(name: PerfScenarioName) {
   test.skip(!shouldRunScenario(PERF_PROFILE, name), `${PERF_PROFILE} profile does not run ${name}`)
 }
@@ -831,20 +913,10 @@ test.describe("PR0.1 perf probe baseline", () => {
       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.tool("read", { filePath: "package.json" })
       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 project.prompt(`Read package.json for perf probe run ${run + 1}.`)
+      await exerciseToolExpandCycle(page)
       await settleFrames(page, 4)
       runs.push(await snapshotPerfProbe(page))
       if (run < 2) await cooldownAfterRun(page)
@@ -867,11 +939,12 @@ test.describe("PR0.1 perf probe baseline", () => {
       const session = await seedHeavyBashSession({ project, llm, run })
       try {
         await page.goto(sessionPath(project.directory, session.id))
-        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 revealTrowBodyIfPresent(page)
+        await expect
+          .poll(async () => Boolean(await visibleExpandableToolTrigger(page)), { timeout: 30_000 })
+          .toBe(true)
+        const trigger = await visibleExpandableToolTrigger(page)
+        if (!trigger) throw new Error("No expandable tool trigger found")
         await expect(trigger).toHaveAttribute("aria-expanded", "true")
         await settleFrames(page, 2)
         runs.push(await snapshotPerfProbe(page))

packages/app/e2e/snap/session-trow.snap.ts

@@ -0,0 +1,150 @@
+import { expect, type Locator } from "@playwright/test"
+import { fileURLToPath } from "node:url"
+import { test } from "../fixtures"
+import { composeGrid, snapOutputPath, type Shot } from "./_compose"
+
+test.use({ viewport: { width: 900, height: 560 }, deviceScaleFactor: 2 })
+
+const LANGUAGE_KEY = "pawwork.global.dat:language"
+const fixturePath = fileURLToPath(new URL("../../src/testing/trow-snap-fixture.tsx", import.meta.url))
+async function captureBlock(name: string, block: Locator): Promise<Shot> {
+  await expect(block).toBeVisible({ timeout: 30_000 })
+  return { name, buf: await block.screenshot() }
+}
+
+async function waitForThemeBoot(page: import("@playwright/test").Page): Promise<void> {
+  await page.waitForFunction(
+    () => getComputedStyle(document.documentElement).getPropertyValue("--bg-base").trim().length > 0,
+    null,
+    { timeout: 30_000 },
+  )
+}
+
+test("session-trow", async ({ page }) => {
+  test.setTimeout(180_000)
+
+  await page.addInitScript((key) => {
+    localStorage.setItem(key, JSON.stringify({ locale: "zh" }))
+  }, LANGUAGE_KEY)
+
+  await page.goto("/")
+  await waitForThemeBoot(page)
+  await page.evaluate(async (path) => {
+    const mod = await import(path)
+    mod.mountTrowSnapFixture(document.body)
+  }, `/@fs/${fixturePath}`)
+
+  const shots: Shot[] = []
+  const running = page.locator('[data-snap="running-current"]')
+  await expect(running).toContainText("执行命令 third command", { timeout: 30_000 })
+  shots.push(await captureBlock("running-current", running))
+
+  shots.push(await captureBlock("mixed-collapsed", page.locator('[data-snap="mixed-collapsed"]')))
+
+  const collapsedFollowedByText = page.locator('[data-snap="collapsed-followed-by-text"]')
+  const collapsedTextGap = await collapsedFollowedByText.evaluate((root) => {
+    const trow = root.querySelector<HTMLElement>('[data-component="session-turn-trow-block"]')
+    const text = root.querySelector<HTMLElement>('[data-component="text-part"]')
+    if (!trow || !text) return Number.NaN
+    return text.getBoundingClientRect().top - trow.getBoundingClientRect().bottom
+  })
+  expect(collapsedTextGap).toBeGreaterThanOrEqual(0)
+  expect(collapsedTextGap).toBeLessThanOrEqual(12)
+  shots.push(await captureBlock("collapsed-followed-by-text", collapsedFollowedByText))
+
+  shots.push(await captureBlock("mixed-expanded", page.locator('[data-snap="mixed-expanded"]')))
+  await expect(page.locator('[data-snap="inner-bash-expanded"] [data-component="bash-output"]')).toBeVisible({
+    timeout: 30_000,
+  })
+  shots.push(await captureBlock("inner-bash-expanded", page.locator('[data-snap="inner-bash-expanded"]')))
+
+  const toolOutputSpacing = page.locator('[data-snap="tool-output-spacing"]')
+  await expect(toolOutputSpacing.locator('[data-component="tool-output"]')).toBeVisible({ timeout: 30_000 })
+  const toolOutputMetrics = await toolOutputSpacing.evaluate((root) => {
+    const output = root.querySelector<HTMLElement>('[data-component="tool-output"]')
+    const lastContent =
+      output?.querySelector<HTMLElement>('[data-component="markdown"] > :last-child') ??
+      output?.querySelector<HTMLElement>("pre") ??
+      output
+    const triggers = root.querySelectorAll<HTMLElement>('[data-slot="collapsible-trigger"]')
+    const nextTrigger = triggers[1]
+    if (!output || !lastContent || !nextTrigger) return { outputGap: Number.NaN, contentGap: Number.NaN }
+    return {
+      outputGap: nextTrigger.getBoundingClientRect().top - output.getBoundingClientRect().bottom,
+      contentGap: nextTrigger.getBoundingClientRect().top - lastContent.getBoundingClientRect().bottom,
+    }
+  })
+  expect(toolOutputMetrics.outputGap).toBeGreaterThanOrEqual(0)
+  expect(toolOutputMetrics.outputGap).toBeLessThanOrEqual(8)
+  expect(toolOutputMetrics.contentGap).toBeGreaterThanOrEqual(0)
+  expect(toolOutputMetrics.contentGap).toBeLessThanOrEqual(8)
+  const toolOutputUserSelect = await toolOutputSpacing.evaluate((root) => {
+    const summary = root.querySelector<HTMLElement>('[data-slot="trow-summary"]')
+    const trigger = root.querySelector<HTMLElement>('[data-slot="collapsible-trigger"]')
+    const output = root.querySelector<HTMLElement>('[data-component="tool-output"]')
+    return {
+      summary: summary ? getComputedStyle(summary).userSelect : "",
+      trigger: trigger ? getComputedStyle(trigger).userSelect : "",
+      output: output ? getComputedStyle(output).userSelect : "",
+    }
+  })
+  expect(toolOutputUserSelect.summary).toBe("text")
+  expect(toolOutputUserSelect.trigger).toBe("text")
+  expect(toolOutputUserSelect.output).toBe("text")
+  shots.push(await captureBlock("tool-output-spacing", toolOutputSpacing))
+
+  const registeredToolRows = page.locator('[data-snap="registered-tool-rows"]')
+  await expect(registeredToolRows).toContainText("网络搜索", { timeout: 30_000 })
+  await expect(registeredToolRows).toContainText("进入工作树", { timeout: 30_000 })
+  await expect(registeredToolRows).toContainText("使用技能", { timeout: 30_000 })
+  await expect(registeredToolRows).toContainText("learn-code", { timeout: 30_000 })
+  const registeredMetrics = await registeredToolRows.evaluate((root) => {
+    const titleSelectors = ['[data-slot="basic-tool-tool-title"]', '[data-component="task-tool-title"]']
+    const titles = titleSelectors.flatMap((selector) =>
+      Array.from(root.querySelectorAll<HTMLElement>(selector), (el) => ({
+        text: el.textContent?.trim() ?? "",
+        left: el.getBoundingClientRect().left,
+      })),
+    )
+    const output = root.querySelector<HTMLElement>('[data-component="exa-tool-output"]')
+    const triggers = Array.from(root.querySelectorAll<HTMLElement>('[data-slot="collapsible-trigger"]'))
+    const nextTrigger = triggers[1]
+    return {
+      titleLefts: titles.filter((item) => item.text).map((item) => item.left),
+      webSearchOutputGap:
+        output && nextTrigger ? nextTrigger.getBoundingClientRect().top - output.getBoundingClientRect().bottom : Number.NaN,
+    }
+  })
+  expect(registeredMetrics.titleLefts.length).toBeGreaterThanOrEqual(5)
+  expect(Math.max(...registeredMetrics.titleLefts) - Math.min(...registeredMetrics.titleLefts)).toBeLessThanOrEqual(1)
+  expect(registeredMetrics.webSearchOutputGap).toBeGreaterThanOrEqual(0)
+  expect(registeredMetrics.webSearchOutputGap).toBeLessThanOrEqual(8)
+  shots.push(await captureBlock("registered-tool-rows", registeredToolRows))
+
+  const singleDirect = page.locator('[data-snap="single-command-direct"]')
+  await expect(singleDirect.locator('[data-component="session-turn-trow-block"][data-single]')).toBeVisible({
+    timeout: 30_000,
+  })
+  await expect(singleDirect.locator('[data-component="bash-output"]')).toBeVisible({ timeout: 30_000 })
+  shots.push(await captureBlock("single-command-direct", singleDirect))
+
+  const singleExpanded = page.locator('[data-snap="single-command-expanded"]')
+  await expect(singleExpanded.locator('[data-component="session-turn-trow-block"][data-single]')).toBeVisible({
+    timeout: 30_000,
+  })
+  await expect(singleExpanded.locator('[data-component="bash-output"]')).toBeVisible({
+    timeout: 30_000,
+  })
+  shots.push(await captureBlock("single-command-expanded", singleExpanded))
+
+  const singleRunning = page.locator('[data-snap="single-command-running"]')
+  await expect(singleRunning.locator('[data-component="session-turn-trow-block"][data-single]')).toBeVisible({
+    timeout: 30_000,
+  })
+  await expect(singleRunning).toContainText("执行命令", { timeout: 30_000 })
+  shots.push(await captureBlock("single-command-running", singleRunning))
+
+  const out = snapOutputPath("session-trow")
+  await composeGrid(shots, out, { cols: 2 })
+  process.stdout.write(`\n[snap] session-trow grid -> ${out}\n\n`)
+})