fix(app): preserve tool card outlines

Author: Hona

packages/app/e2e/regression/session-timeline-shell-outline.spec.ts

@@ -1,5 +1,11 @@
-import { expect, test } from "@playwright/test"
-import { assistantMessage, setupTimeline, shell, userMessage } from "../performance/timeline-stability/fixture"
+import { expect, test, type Locator, type Page } from "@playwright/test"
+import {
+  assistantMessage,
+  setupTimeline,
+  shell,
+  toolPart,
+  userMessage,
+} from "../performance/timeline-stability/fixture"
 
 for (const deviceScaleFactor of [1.25, 1.5]) {
   test(`keeps the shell outline inside a fractionally short virtual row at ${deviceScaleFactor}x`, async ({ page }) => {
@@ -43,54 +49,141 @@ for (const deviceScaleFactor of [1.25, 1.5]) {
     })
     expect(clipped).toBeCloseTo(0.49, 1)
 
-    const box = await output.boundingBox()
-    if (!box) throw new Error("Shell output bounds are unavailable")
     expect(await page.evaluate(() => devicePixelRatio)).toBe(deviceScaleFactor)
-    const screenshot = await page.screenshot()
-    const edges = await page.evaluate(
-      async ({ source, size, viewport }) => {
-        const image = new Image()
-        image.src = source
-        await image.decode()
-        const canvas = document.createElement("canvas")
-        canvas.width = image.naturalWidth
-        canvas.height = image.naturalHeight
-        const context = canvas.getContext("2d")
-        if (!context) throw new Error("2D canvas is unavailable")
-        context.drawImage(image, 0, 0)
-        const scale = {
-          x: image.naturalWidth / viewport.width,
-          y: image.naturalHeight / viewport.height,
-        }
-        const pixels = context.getImageData(0, 0, image.naturalWidth, image.naturalHeight).data
-        const rows = new Uint32Array(image.naturalHeight)
-        const columns = new Uint32Array(image.naturalWidth)
-        for (let index = 0; index < pixels.length; index += 4) {
-          if (pixels[index]! <= 200 || pixels[index + 1]! >= 50 || pixels[index + 2]! <= 200) continue
-          const pixel = index / 4
-          const x = pixel % image.naturalWidth
-          const y = Math.floor(pixel / image.naturalWidth)
-          rows[y] = rows[y]! + 1
-          columns[x] = columns[x]! + 1
-        }
-        return {
-          horizontal: Array.from(rows).filter((count) => count > size.width * scale.x * 0.75).length,
-          vertical: Array.from(columns).filter((count) => count > size.height * scale.y * 0.75).length,
-        }
-      },
-      {
-        source: `data:image/png;base64,${screenshot.toString("base64")}`,
-        viewport: page.viewportSize()!,
-        size: { width: box.width, height: box.height },
-      },
-    )
+    const edges = await captureCardEdges(page, output)
 
-    expect(box.width).toBeCloseTo(geometry.outputWidth, 2)
-    expect(box.height).toBeCloseTo(geometry.outputHeight, 2)
+    expect(edges.box.width).toBeCloseTo(geometry.outputWidth, 2)
+    expect(edges.box.height).toBeCloseTo(geometry.outputHeight, 2)
     expect(geometry.borderColor).toBe("rgb(255, 0, 255)")
     expect(geometry.boxShadow).toBe("none")
     expect(geometry.clipMargin).toBe("0.5px")
-    expect(edges.horizontal).toBeGreaterThanOrEqual(2)
-    expect(edges.vertical).toBeGreaterThanOrEqual(2)
+    expect(edges.magenta.top).toBeGreaterThan(0.75)
+    expect(edges.magenta.bottom).toBeGreaterThan(0.75)
+    expect(edges.magenta.vertical).toBeGreaterThanOrEqual(2)
   })
 }
+
+test("keeps the patch card inside a fractionally short virtual row", async ({ page }) => {
+  const patchID = "prt_patch_outline"
+  const file = {
+    filePath: "src/outline.ts",
+    relativePath: "src/outline.ts",
+    type: "update",
+    additions: 1,
+    deletions: 1,
+    before: "const outline = false\n",
+    after: "const outline = true\n",
+  }
+  const timeline = await setupTimeline(page, {
+    messages: [
+      userMessage(),
+      assistantMessage([
+        toolPart(patchID, "apply_patch", "completed", { files: [file.filePath] }, { metadata: { files: [file] } }),
+      ]),
+    ],
+    settings: { editToolPartsExpanded: true, newLayoutDesigns: true },
+    reducedMotion: true,
+  })
+  const part = page.locator(`[data-timeline-part-id="${patchID}"]`)
+  const card = part.locator('[data-component="accordion"][data-scope="apply-patch"]')
+  const row = page.locator("[data-timeline-key]", { has: part })
+  await expect(card).toBeVisible()
+  await timeline.settle()
+
+  const geometry = await row.evaluate((element) => {
+    const card = element.querySelector<HTMLElement>('[data-component="accordion"][data-scope="apply-patch"]')
+    if (!card) throw new Error("Patch card is unavailable")
+    const rowRect = element.getBoundingClientRect()
+    const cardRect = card.getBoundingClientRect()
+    element.style.height = `${cardRect.bottom - rowRect.top - 0.49}px`
+    const clipMargin = getComputedStyle(element).overflowClipMargin
+    const bottom = element.getBoundingClientRect().bottom
+    return {
+      overflow: card.getBoundingClientRect().bottom - bottom,
+      paintOverflow: card.getBoundingClientRect().bottom - bottom - Number.parseFloat(clipMargin),
+      clipMargin,
+      cardWidth: cardRect.width,
+      cardHeight: cardRect.height,
+    }
+  })
+  await timeline.settle()
+
+  expect(geometry.overflow).toBeCloseTo(0.49, 1)
+  expect(geometry.paintOverflow).toBeLessThanOrEqual(0)
+  const edges = await captureCardEdges(page, card)
+  expect(edges.box.width).toBeCloseTo(geometry.cardWidth, 2)
+  expect(edges.box.height).toBeCloseTo(geometry.cardHeight, 2)
+  expect(edges.luminance.top).toBeLessThan(245)
+  expect(edges.luminance.bottom).toBeLessThan(245)
+  expect(Math.abs(edges.luminance.bottom - edges.luminance.top)).toBeLessThan(10)
+  expect(geometry.clipMargin).toBe("0.5px")
+})
+
+async function captureCardEdges(page: Page, card: Locator) {
+  const box = await card.boundingBox()
+  if (!box) throw new Error("Tool card bounds are unavailable")
+  const viewport = page.viewportSize()
+  if (!viewport) throw new Error("Viewport bounds are unavailable")
+  const screenshot = await page.screenshot()
+  return page.evaluate(
+    async ({ source, box, viewport }) => {
+      const image = new Image()
+      image.src = source
+      await image.decode()
+      const canvas = document.createElement("canvas")
+      canvas.width = image.naturalWidth
+      canvas.height = image.naturalHeight
+      const context = canvas.getContext("2d")
+      if (!context) throw new Error("2D canvas is unavailable")
+      context.drawImage(image, 0, 0)
+      const scale = {
+        x: image.naturalWidth / viewport.width,
+        y: image.naturalHeight / viewport.height,
+      }
+      const rows = (candidates: number[]) => {
+        const left = Math.floor((box.x + 8) * scale.x)
+        const width = Math.floor((box.width - 16) * scale.x)
+        return candidates.map((row) => {
+          const pixels = context.getImageData(left, row, width, 1).data
+          const indexes = Array.from({ length: width }, (_, index) => index * 4)
+          return {
+            luminance:
+              indexes
+                .map((index) => (pixels[index]! + pixels[index + 1]! + pixels[index + 2]!) / 3)
+                .reduce((sum, value) => sum + value, 0) / width,
+            magenta:
+              indexes.filter((index) => pixels[index]! > 200 && pixels[index + 1]! < 180 && pixels[index + 2]! > 200)
+                .length / width,
+          }
+        })
+      }
+      const pixels = context.getImageData(0, 0, image.naturalWidth, image.naturalHeight).data
+      const columns = new Uint32Array(image.naturalWidth)
+      for (let index = 0; index < pixels.length; index += 4) {
+        if (pixels[index]! <= 200 || pixels[index + 1]! >= 180 || pixels[index + 2]! <= 200) continue
+        columns[(index / 4) % image.naturalWidth] = columns[(index / 4) % image.naturalWidth]! + 1
+      }
+      const top = box.y * scale.y
+      const bottom = (box.y + box.height) * scale.y
+      const topRows = rows([Math.floor(top) - 1, Math.floor(top), Math.ceil(top)])
+      const bottomRows = rows([Math.floor(bottom) - 2, Math.floor(bottom) - 1, Math.ceil(bottom) - 1])
+      return {
+        box,
+        luminance: {
+          top: Math.min(...topRows.map((row) => row.luminance)),
+          bottom: rows([Math.ceil(bottom) - 1])[0]!.luminance,
+        },
+        magenta: {
+          top: Math.max(...topRows.map((row) => row.magenta)),
+          bottom: Math.max(...bottomRows.map((row) => row.magenta)),
+          vertical: Array.from(columns).filter((count) => count > box.height * scale.y * 0.75).length,
+        },
+      }
+    },
+    {
+      source: `data:image/png;base64,${screenshot.toString("base64")}`,
+      viewport,
+      box,
+    },
+  )
+}

packages/app/src/pages/session/timeline/message-timeline.tsx

@@ -1279,8 +1279,8 @@ export function MessageTimeline(props: {
           width: "100%",
           height: `${item().size}px`,
           overflow: "clip",
-          // Rounded virtual measurements can otherwise clip the shell card's outer border pixel.
-          "overflow-clip-margin": tool()?.tool === "bash" ? "0.5px" : undefined,
+          // Rounded virtual measurements can otherwise clip a tool card's outer border pixel.
+          "overflow-clip-margin": tool() ? "0.5px" : undefined,
         }}
       >
         <div