mirror of
https://github.com/anomalyco/opencode.git
synced 2026-11-13 19:46:16 +03:00
Aarav Sareen
923 lines
38 KiB
TypeScript
923 lines
38 KiB
TypeScript
import { expect, test, type Locator, type Page } from "@playwright/test"
|
|
import { timelinePresets } from "@opencode/session-ui/timeline/detail"
|
|
import { createTwoFilesPatch } from "diff"
|
|
import {
|
|
assistantMessage,
|
|
historyMessages,
|
|
partUpdated,
|
|
renderedPartID,
|
|
session,
|
|
sessionID,
|
|
setupTimeline,
|
|
shell,
|
|
textPart,
|
|
toolPart,
|
|
userMessage,
|
|
userText,
|
|
validateTimelineMessages,
|
|
waitForVisualSettle,
|
|
} from "../utils/timeline"
|
|
import {
|
|
analyzeVisualObservations,
|
|
defineVisualRegions,
|
|
startVisualProbe,
|
|
stopVisualProbe,
|
|
visualPlan,
|
|
} from "../utils/visual-stability"
|
|
|
|
const expanded = { editToolPartsExpanded: true, shellToolPartsExpanded: true, showReasoningSummaries: true }
|
|
|
|
const contextTools = [
|
|
{ id: "ctx_0100_read", tool: "read", input: { path: "src/recent-a.ts", offset: 0, limit: 120 } },
|
|
{ id: "ctx_0101_glob", tool: "glob", input: { path: "C:/OpenCode/TimelineStability", pattern: "**/*.ts" } },
|
|
{
|
|
id: "ctx_0102_grep",
|
|
tool: "grep",
|
|
input: { path: "C:/OpenCode/TimelineStability", pattern: "Explored", include: "*.ts" },
|
|
},
|
|
{ id: "ctx_0103_list", tool: "list", input: { path: "src" } },
|
|
]
|
|
|
|
const contextSelector = `[data-timeline-part-ids="${contextTools.map((tool) => tool.id).join(",")}"]`
|
|
|
|
const output = (tool: string) => `Completed ${tool}.\n${"detail line\n".repeat(8)}`
|
|
|
|
function contextTurn(status: "running" | "completed") {
|
|
return [
|
|
userMessage(),
|
|
assistantMessage([
|
|
...contextTools.map((tool) =>
|
|
status === "running"
|
|
? toolPart(tool.id, tool.tool, "running", tool.input)
|
|
: toolPart(tool.id, tool.tool, "completed", tool.input, { output: output(tool.tool) }),
|
|
),
|
|
textPart("prt_after_context", "This assistant text is immediately after the explored context group."),
|
|
]),
|
|
]
|
|
}
|
|
|
|
test("remeasures a recent explored context group before the next paint", async ({ page }) => {
|
|
await setupTimeline(page, { seedHistory: true, settings: expanded, messages: contextTurn("completed") })
|
|
const following = `[data-timeline-part-id="${renderedPartID("prt_after_context")}"]`
|
|
await expect(page.locator(contextSelector)).toBeVisible()
|
|
await expect(page.locator(following)).toBeVisible()
|
|
await waitForVisualSettle(page, [contextSelector, following])
|
|
|
|
// Samples every painted frame after the click until the open group's row holds its measured content, so a
|
|
// stale row height shows up as overlap before the virtualizer catches up.
|
|
const samples = await page.evaluate(
|
|
({ contextSelector, following }) =>
|
|
new Promise<{ frame: number; overlap: number; expanded: string | null; measured: boolean }[]>((resolve) => {
|
|
const context = document.querySelector<HTMLElement>(contextSelector)
|
|
const text = document.querySelector<HTMLElement>(following)
|
|
const scroller = context?.closest<HTMLElement>(".scroll-view__viewport")
|
|
const trigger = context?.querySelector<HTMLElement>('[data-slot="collapsible-trigger"]')
|
|
const contextRow = context?.closest<HTMLElement>('[data-timeline-row="AssistantPart"]')
|
|
const virtualRow = context?.closest<HTMLElement>("[data-timeline-key]")
|
|
const textRow = text?.closest<HTMLElement>('[data-timeline-row="AssistantPart"]')
|
|
|
|
if (!scroller || !trigger || !contextRow || !virtualRow || !textRow) throw new Error("missing regression nodes")
|
|
scroller.scrollTop = scroller.scrollHeight
|
|
const samples: { frame: number; overlap: number; expanded: string | null; measured: boolean }[] = []
|
|
|
|
const capture = (frame: number) => {
|
|
const content = context!.querySelector<HTMLElement>('[data-slot="collapsible-content"]')
|
|
const allocated = virtualRow.getBoundingClientRect().height
|
|
const inner = virtualRow.firstElementChild?.getBoundingClientRect().height ?? Infinity
|
|
samples.push({
|
|
frame,
|
|
overlap: Math.max(
|
|
0,
|
|
Math.round((contextRow.getBoundingClientRect().bottom - textRow.getBoundingClientRect().top) * 10) / 10,
|
|
),
|
|
expanded: trigger.getAttribute("aria-expanded"),
|
|
measured:
|
|
!!content &&
|
|
Math.abs(content.getBoundingClientRect().height - content.scrollHeight) <= 1 &&
|
|
Math.abs(allocated - inner) <= 1,
|
|
})
|
|
}
|
|
|
|
capture(-1)
|
|
trigger.click()
|
|
capture(0)
|
|
|
|
const tick = (frame: number) =>
|
|
setTimeout(() => {
|
|
capture(frame)
|
|
const last = samples.at(-1)!
|
|
|
|
if (last.expanded === "true" && last.measured) return resolve(samples)
|
|
requestAnimationFrame(() => tick(frame + 1))
|
|
}, 0)
|
|
|
|
requestAnimationFrame(() => tick(1))
|
|
}),
|
|
{ contextSelector, following },
|
|
)
|
|
|
|
expect(samples[0]?.overlap).toBe(0)
|
|
expect(samples.filter((sample) => sample.frame >= 1 && sample.overlap > 0.5)).toEqual([])
|
|
expect(samples.at(-1)).toMatchObject({ expanded: "true", measured: true })
|
|
})
|
|
|
|
test("keeps a grouped tool summary stable as its calls complete", async ({ page }) => {
|
|
const timeline = await setupTimeline(page, {
|
|
seedHistory: true,
|
|
settings: expanded,
|
|
messages: contextTurn("running"),
|
|
cpuRate: 4,
|
|
})
|
|
|
|
const context = page.locator(contextSelector)
|
|
const label = "Used 4 Read, Glob, Grep, List"
|
|
const trigger = context.locator(':scope > [data-component="collapsible"] > [data-slot="collapsible-trigger"]')
|
|
await expect(trigger).toHaveAccessibleName(label)
|
|
// Open the group so each call shows whether it is still running.
|
|
await trigger.click()
|
|
|
|
const status = (tool: string) =>
|
|
context.locator(
|
|
`[data-slot="context-tool-group-item"] [data-component="text-shimmer"][aria-label="${tool[0]!.toUpperCase()}${tool.slice(1)}"]`,
|
|
)
|
|
|
|
for (const tool of contextTools) await expect(status(tool.tool)).toHaveAttribute("data-active", "true")
|
|
const following = `[data-timeline-part-id="${renderedPartID("prt_after_context")}"]`
|
|
await waitForVisualSettle(page, [contextSelector, following])
|
|
|
|
const regions = defineVisualRegions({
|
|
status: { selector: `${contextSelector} [data-component="context-tool-group-trigger"]` },
|
|
context: { selector: contextSelector, closest: '[data-timeline-row="AssistantPart"]' },
|
|
following: { selector: following, closest: '[data-timeline-row="AssistantPart"]' },
|
|
})
|
|
|
|
await startVisualProbe(page, regions)
|
|
|
|
// Each completion lands in its own settled frame so the probe sees every intermediate state.
|
|
for (const tool of contextTools) {
|
|
await timeline.send(
|
|
partUpdated(toolPart(tool.id, tool.tool, "completed", tool.input, { output: output(tool.tool) })),
|
|
)
|
|
await expect(status(tool.tool)).toHaveAttribute("data-active", "false")
|
|
await waitForVisualSettle(page, [contextSelector, following])
|
|
}
|
|
|
|
for (const tool of contextTools) await expect(status(tool.tool)).toHaveAttribute("data-active", "false")
|
|
await expect(trigger).toHaveAccessibleName(label)
|
|
const trace = await stopVisualProbe<keyof typeof regions>(page)
|
|
|
|
const labels = trace.samples
|
|
.map((sample) => sample.regions.status?.label)
|
|
.filter((value): value is string => !!value)
|
|
.filter((value, index, all) => value !== all[index - 1])
|
|
|
|
const issues = analyzeVisualObservations(
|
|
trace.samples,
|
|
visualPlan(regions, [
|
|
{ type: "required", regions: ["context", "following"] },
|
|
{ type: "opacity", regions: "all" },
|
|
{ type: "continuity", regions: "all" },
|
|
{ type: "motion", regions: "all" },
|
|
{ type: "label-stability", regions: "all" },
|
|
{ type: "flow", regions: ["context", "following"] },
|
|
]),
|
|
)
|
|
|
|
expect(labels).toEqual([label])
|
|
expect(issues, JSON.stringify(trace.samples, null, 2)).toEqual([])
|
|
})
|
|
|
|
test("keeps a file diff anchored while it expands and collapses", async ({ page }) => {
|
|
const id = "prt_file_projection_anchored_patch"
|
|
const before = Array.from({ length: 80 }, (_, index) => `export const value${index} = ${index}\n`).join("")
|
|
const after = before.replaceAll(" = ", " = compute(").replaceAll("\n", ")\n")
|
|
await setupTimeline(page, {
|
|
settings: {
|
|
timelineDetail: { ...timelinePresets[2].value, edit: { placement: "separate", details: "collapsed" } },
|
|
},
|
|
messages: [
|
|
userMessage(),
|
|
assistantMessage([
|
|
textPart("prt_file_projection_preceding", "Preceding context ".repeat(240)),
|
|
toolPart(
|
|
id,
|
|
"patch",
|
|
"completed",
|
|
{ patchText: "Update src/anchored.ts" },
|
|
{
|
|
metadata: {
|
|
files: [
|
|
{
|
|
file: "src/anchored.ts",
|
|
status: "modified",
|
|
patch: createTwoFilesPatch("a/src/anchored.ts", "b/src/anchored.ts", before, after),
|
|
additions: 80,
|
|
deletions: 80,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
),
|
|
]),
|
|
],
|
|
viewport: { width: 1200, height: 600 },
|
|
})
|
|
|
|
const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
|
|
const wrapper = page.locator(`[data-timeline-part-id="${id}"]`)
|
|
const diff = wrapper.locator('[data-component="apply-patch-file-diff"]')
|
|
const row = page.locator("[data-timeline-key]", { has: wrapper })
|
|
const trigger = wrapper.getByRole("button")
|
|
|
|
const bottom = () =>
|
|
scroller.evaluate((element) => Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop))
|
|
|
|
const measured = () =>
|
|
row.evaluate((element) => {
|
|
const content = element.querySelector<HTMLElement>("[data-index]")
|
|
|
|
return content
|
|
? Math.abs(element.getBoundingClientRect().height - content.getBoundingClientRect().height)
|
|
: Number.POSITIVE_INFINITY
|
|
})
|
|
|
|
await expect(trigger).toHaveAttribute("aria-expanded", "false")
|
|
await expect.poll(measured).toBeLessThanOrEqual(1)
|
|
|
|
// Pinned to the tail, toggling the diff keeps the view at the bottom.
|
|
for (const visible of [true, false]) {
|
|
await trigger.click()
|
|
await expect(diff).toHaveCount(visible ? 1 : 0)
|
|
await expect.poll(bottom).toBeLessThanOrEqual(1)
|
|
}
|
|
|
|
// Scrolled away from the tail, the header keeps its viewport position.
|
|
await expect
|
|
.poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight))
|
|
.toBeGreaterThan(1)
|
|
await scroller.evaluate((element) => {
|
|
element.scrollTop = element.scrollHeight - element.clientHeight - 0.25
|
|
})
|
|
await expect(trigger).toBeInViewport()
|
|
await expect.poll(bottom).toBeLessThanOrEqual(0.5)
|
|
const bottomScrollTop = await scroller.evaluate((element) => element.scrollTop)
|
|
await scroller.hover()
|
|
await page.mouse.wheel(0, -20)
|
|
await expect
|
|
.poll(() => scroller.evaluate((element, bottom) => bottom - element.scrollTop, bottomScrollTop))
|
|
.toBeGreaterThan(0)
|
|
const y = await trigger.evaluate((element) => element.getBoundingClientRect().y)
|
|
const collapsedHeight = await row.evaluate((element) => element.getBoundingClientRect().height)
|
|
await trigger.click()
|
|
await expect(diff).toBeVisible()
|
|
await expect
|
|
.poll(() =>
|
|
row.evaluate((element, collapsed) => {
|
|
const content = element.querySelector<HTMLElement>("[data-index]")
|
|
const allocated = element.getBoundingClientRect().height
|
|
|
|
return {
|
|
grew: allocated > collapsed + 1,
|
|
measured: content ? Math.abs(allocated - content.getBoundingClientRect().height) <= 1 : false,
|
|
}
|
|
}, collapsedHeight),
|
|
)
|
|
.toEqual({ grew: true, measured: true })
|
|
await expect
|
|
.poll(() => trigger.evaluate((element, initialY) => Math.abs(element.getBoundingClientRect().y - initialY), y))
|
|
.toBeLessThanOrEqual(5)
|
|
|
|
const scrollTop = await scroller.evaluate((element) => element.scrollTop)
|
|
await scroller.hover()
|
|
await page.mouse.wheel(0, 200)
|
|
await expect
|
|
.poll(() => scroller.evaluate((element, initial) => element.scrollTop - initial, scrollTop))
|
|
.toBeGreaterThan(50)
|
|
expect(await scroller.evaluate((element, initial) => element.scrollTop - initial, scrollTop)).toBeLessThan(400)
|
|
|
|
const expandedY = await trigger.evaluate((element) => element.getBoundingClientRect().y)
|
|
await trigger.click()
|
|
await expect(diff).toHaveCount(0)
|
|
await expect.poll(bottom).toBeLessThanOrEqual(1)
|
|
await expect.poll(() => trigger.evaluate((element) => element.getBoundingClientRect().y)).toBeGreaterThan(expandedY)
|
|
|
|
await trigger.click()
|
|
await expect(diff).toBeVisible()
|
|
await expect.poll(measured).toBeLessThanOrEqual(1)
|
|
await expect.poll(bottom).toBeLessThanOrEqual(1)
|
|
})
|
|
|
|
for (const outline of [
|
|
{ name: "shell outline at 1.25x", kind: "shell", deviceScaleFactor: 1.25 },
|
|
{ name: "shell outline at 1.5x", kind: "shell", deviceScaleFactor: 1.5 },
|
|
{ name: "patch card", kind: "patch", deviceScaleFactor: undefined },
|
|
] as const) {
|
|
test(`keeps the ${outline.name} inside a fractionally short virtual row`, async ({ page }) => {
|
|
const partID = outline.kind === "shell" ? "prt_shell_outline" : "prt_patch_outline"
|
|
const secondUserID = "msg_outline_second_user"
|
|
|
|
const tool =
|
|
outline.kind === "shell"
|
|
? shell(partID, "completed", "shell output")
|
|
: toolPart(
|
|
partID,
|
|
"patch",
|
|
"completed",
|
|
{ patchText: "Update src/outline.ts" },
|
|
{
|
|
metadata: {
|
|
files: [
|
|
{
|
|
file: "src/outline.ts",
|
|
status: "modified",
|
|
patch:
|
|
"diff --git a/src/outline.ts b/src/outline.ts\n--- a/src/outline.ts\n+++ b/src/outline.ts\n@@ -1 +1 @@\n-const outline = false\n+const outline = true\n",
|
|
additions: 1,
|
|
deletions: 1,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
)
|
|
|
|
// A second turn adds the fixed turn gap, which must not get the paint-rounding margin.
|
|
await setupTimeline(page, {
|
|
messages: [
|
|
userMessage(undefined, {
|
|
summary: {
|
|
diffs: [
|
|
{
|
|
file: "src/summary.ts",
|
|
additions: 1,
|
|
deletions: 1,
|
|
status: "modified",
|
|
patch: "@@ -1 +1 @@\n-export const value = 1\n+export const value = 2",
|
|
},
|
|
],
|
|
},
|
|
}),
|
|
assistantMessage([tool]),
|
|
userMessage(undefined, { id: secondUserID, created: 1700000010000 }),
|
|
assistantMessage([], { id: "msg_outline_second_assistant", parentID: secondUserID, created: 1700000011000 }),
|
|
],
|
|
settings:
|
|
outline.kind === "shell"
|
|
? { shellToolPartsExpanded: true }
|
|
: { timelineDetail: { ...timelinePresets[2].value, edit: { placement: "separate", details: "collapsed" } } },
|
|
reducedMotion: true,
|
|
deviceScaleFactor: outline.deviceScaleFactor,
|
|
})
|
|
await expect(page.locator('[data-timeline-row="TurnGap"]')).toBeVisible()
|
|
|
|
const rows = await page.locator("[data-timeline-key]").evaluateAll((elements) =>
|
|
elements.map((element) => ({
|
|
tag: element.querySelector<HTMLElement>("[data-timeline-row]")?.dataset.timelineRow,
|
|
clipMargin: getComputedStyle(element).overflowClipMargin,
|
|
})),
|
|
)
|
|
|
|
expect(rows.filter((row) => row.tag !== "TurnGap").every((row) => row.clipMargin === "0.5px")).toBe(true)
|
|
expect(rows.filter((row) => row.tag === "TurnGap")).toEqual([{ tag: "TurnGap", clipMargin: "0px" }])
|
|
|
|
const part = page.locator(`[data-timeline-part-id="${partID}"]`)
|
|
const row = page.locator("[data-timeline-key]", { has: part })
|
|
|
|
if (outline.kind === "patch") {
|
|
const card = part.locator('[data-component="accordion"][data-scope="apply-patch"]')
|
|
await expect(card.getByRole("button")).toHaveAttribute("aria-expanded", "false")
|
|
|
|
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 cardRect = card.getBoundingClientRect()
|
|
element.style.height = `${cardRect.bottom - element.getBoundingClientRect().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),
|
|
cardWidth: cardRect.width,
|
|
cardHeight: cardRect.height,
|
|
}
|
|
})
|
|
|
|
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)
|
|
|
|
return
|
|
}
|
|
|
|
const bash = part.locator('[data-component="bash-output"]')
|
|
await expect(bash).toBeVisible()
|
|
await waitForVisualSettle(page, [`[data-timeline-part-id="${partID}"] [data-component="bash-output"]`])
|
|
|
|
const geometry = await row.evaluate((element) => {
|
|
const output = element.querySelector<HTMLElement>('[data-component="bash-output"]')
|
|
|
|
if (!output) throw new Error("Shell output is unavailable")
|
|
const outputRect = output.getBoundingClientRect()
|
|
// Match a rounded-down measurement at a fractional device-pixel phase.
|
|
element.style.height = `${outputRect.bottom - element.getBoundingClientRect().top - 0.49}px`
|
|
element.style.transform = "translateY(0.25px)"
|
|
output.style.setProperty("--v2-border-border-base", "rgb(255, 0, 255)")
|
|
output.style.setProperty("background", "rgb(0, 0, 0)", "important")
|
|
const style = getComputedStyle(output)
|
|
|
|
return {
|
|
outputWidth: outputRect.width,
|
|
outputHeight: outputRect.height,
|
|
borderColor: style.borderTopColor,
|
|
boxShadow: style.boxShadow,
|
|
}
|
|
})
|
|
|
|
await expect
|
|
.poll(() =>
|
|
row.evaluate(
|
|
(element) =>
|
|
element.querySelector<HTMLElement>('[data-component="bash-output"]')!.getBoundingClientRect().bottom -
|
|
element.getBoundingClientRect().bottom,
|
|
),
|
|
)
|
|
.toBeCloseTo(0.49, 1)
|
|
expect(await page.evaluate(() => devicePixelRatio)).toBe(outline.deviceScaleFactor)
|
|
const edges = await captureCardEdges(page, bash)
|
|
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(edges.magenta.top).toBeGreaterThan(0.75)
|
|
expect(edges.magenta.bottom).toBeGreaterThan(0.75)
|
|
expect(edges.magenta.vertical).toBeGreaterThanOrEqual(2)
|
|
})
|
|
}
|
|
|
|
for (const failed of [false, true]) {
|
|
test(`keeps a submitted prompt in place until Working shows${failed ? " after an error" : ""}`, async ({ page }) => {
|
|
await setupTimeline(page, {
|
|
sessionMessages: [
|
|
...validateTimelineMessages([
|
|
...historyMessages(18),
|
|
userMessage(),
|
|
...(failed
|
|
? [{ ...assistantMessage([]), error: { type: "provider.error", message: "Previous request failed" } }]
|
|
: []),
|
|
]),
|
|
// The previous execution ended at an idle marker, so the submitted prompt starts a turn instead of
|
|
// waiting as a steer behind that one.
|
|
{
|
|
id: "msg_1002_timeline_idle",
|
|
type: "idle",
|
|
outcome: failed ? "failed" : "succeeded",
|
|
time: { created: 1700000003000 },
|
|
},
|
|
],
|
|
})
|
|
const working = page.locator('[data-component="session-working"]')
|
|
await expect(working).toHaveCount(0)
|
|
const release = Promise.withResolvers<void>()
|
|
await page.route(`**/api/session/${sessionID}/prompt`, async (route) => {
|
|
if (route.request().method() !== "POST") return route.fallback()
|
|
await release.promise
|
|
|
|
return route.fallback()
|
|
})
|
|
|
|
const text = "Observe optimistic prompt spacing."
|
|
const editor = page.locator('[data-component="composer"]').getByRole("textbox")
|
|
await expect(editor).toBeEditable()
|
|
await editor.fill(text)
|
|
await expect(page.locator('[data-action="composer-submit"]')).toBeEnabled()
|
|
|
|
const bottom = () =>
|
|
page.locator("[data-timeline-virtual-content]").evaluate((element) => {
|
|
const root = element.parentElement!
|
|
|
|
return root.scrollHeight - root.clientHeight - root.scrollTop
|
|
})
|
|
|
|
await expect.poll(bottom).toBe(0)
|
|
|
|
// Records the prompt row in every frame from submission until Working has shown.
|
|
const observation = await page.evaluateHandle((text) => {
|
|
const frames: { prompt: number | undefined; working: boolean }[] = []
|
|
let frame = 0
|
|
|
|
const sample = () => {
|
|
const prompt = [...document.querySelectorAll<HTMLElement>('[data-timeline-row="UserMessage"]')].find((row) =>
|
|
row.textContent?.includes(text),
|
|
)
|
|
|
|
frames.push({
|
|
prompt: prompt?.getBoundingClientRect().y,
|
|
working: !!document.querySelector('[data-component="session-working"]'),
|
|
})
|
|
frame = requestAnimationFrame(sample)
|
|
}
|
|
|
|
frame = requestAnimationFrame(sample)
|
|
|
|
return {
|
|
stop: () => {
|
|
cancelAnimationFrame(frame)
|
|
|
|
return frames
|
|
},
|
|
}
|
|
}, text)
|
|
|
|
const requested = page.waitForRequest(
|
|
(request) =>
|
|
request.method() === "POST" && new URL(request.url()).pathname === `/api/session/${sessionID}/prompt`,
|
|
)
|
|
|
|
try {
|
|
await editor.press("Enter")
|
|
expect((await requested).postDataJSON()).toMatchObject({ text })
|
|
await expect(page.locator('[data-timeline-row="UserMessage"]').filter({ hasText: text })).toBeInViewport()
|
|
await expect(working).toHaveRole("status")
|
|
await expect(working.locator('[data-component="text-shimmer"]')).toHaveAttribute("aria-label", "Working")
|
|
await expect(working).toBeInViewport()
|
|
await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
|
|
await expect.poll(bottom).toBe(0)
|
|
const frames = await observation.evaluate((value) => value.stop())
|
|
expect(frames.some((frame) => frame.working && frame.prompt === undefined)).toBe(false)
|
|
const positions = frames.flatMap((frame) => (frame.prompt === undefined ? [] : [frame.prompt]))
|
|
expect(positions.length).toBeGreaterThan(0)
|
|
expect(new Set(positions).size).toBe(1)
|
|
} finally {
|
|
release.resolve()
|
|
await observation.dispose()
|
|
}
|
|
})
|
|
}
|
|
|
|
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 },
|
|
)
|
|
}
|
|
|
|
test("scrolls the timeline behind the composer region, fading at the card, and keeps its end above the region", async ({
|
|
page,
|
|
}) => {
|
|
await setupTimeline(page, {
|
|
sessionMessages: [
|
|
...validateTimelineMessages(historyMessages(18)),
|
|
{ id: "msg_9000_user", type: "user", text: "Split the work.", time: { created: 1 } },
|
|
{
|
|
id: "msg_9001_assistant",
|
|
type: "assistant",
|
|
agent: "build",
|
|
model: { id: "model", providerID: "provider" },
|
|
content: [
|
|
{
|
|
type: "tool",
|
|
id: "call_running_subagent",
|
|
name: "subagent",
|
|
state: {
|
|
status: "running",
|
|
input: { description: "Trace frame budget", agent: "explore" },
|
|
metadata: { sessionID: "ses_running_subagent" },
|
|
},
|
|
time: { created: 2 },
|
|
},
|
|
{ type: "text", id: "prt_timeline_end", text: "The last answer ends above the composer region." },
|
|
],
|
|
time: { created: 2 },
|
|
},
|
|
],
|
|
sessions: [
|
|
session(),
|
|
session({ id: "ses_running_subagent", parentID: sessionID, title: "Trace frame budget", agent: "explore" }),
|
|
],
|
|
sessionStatus: { [sessionID]: { type: "busy" }, ses_running_subagent: { type: "busy" } },
|
|
})
|
|
const dock = page.locator('[data-component="session-composer-dock"]')
|
|
const editor = page.locator('[data-component="composer"]').getByRole("textbox")
|
|
await expect(page.getByRole("button", { name: "1 subagent", exact: true })).toBeVisible()
|
|
await expect(page.locator('[data-component="session-background-hint-row"]')).toBeVisible()
|
|
await expect(page.getByText("The last answer ends above the composer region.", { exact: true })).toBeVisible()
|
|
|
|
const geometry = () =>
|
|
page.evaluate(() => {
|
|
const viewport = document.querySelector<HTMLElement>('[data-slot="session-timeline-scroll"] > *')!
|
|
const region = document.querySelector('[data-component="session-composer-dock"]')!
|
|
const dock = region.getBoundingClientRect()
|
|
const card = region.querySelector('[data-component="composer"]')!.getBoundingClientRect()
|
|
const pill = region.querySelector('[data-slot="session-activity-chip"]')!.getBoundingClientRect()
|
|
const hint = viewport.querySelector('[data-component="session-background-hint-row"]')!.getBoundingClientRect()
|
|
const parts = [...viewport.querySelectorAll("[data-timeline-part-id]")]
|
|
const last = parts.find((element) => element.textContent?.includes("The last answer ends"))!
|
|
|
|
return {
|
|
// The scroll area runs on behind the composer region to the panel's bottom edge.
|
|
behind: Math.round(viewport.getBoundingClientRect().bottom - dock.bottom),
|
|
inset: Math.round(viewport.querySelector<HTMLElement>("[data-timeline-inset]")!.offsetHeight - dock.height),
|
|
// Content fades out where the composer card starts.
|
|
fade: Math.round(
|
|
dock.bottom - card.top - parseFloat(getComputedStyle(viewport).getPropertyValue("--session-timeline-inset")),
|
|
),
|
|
// The pill floats above the region out of flow, so it never changes the inset the timeline scrolls above.
|
|
floats: pill.bottom <= dock.top,
|
|
// It floats in the timeline's reserved tail, below the background hint and the last answer.
|
|
reserved: hint.bottom <= pill.top && last.getBoundingClientRect().bottom <= hint.top,
|
|
atEnd: viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop <= 1,
|
|
}
|
|
})
|
|
|
|
const expected = { behind: 0, inset: 0, fade: 0, floats: true, reserved: true, atEnd: true }
|
|
await expect.poll(geometry).toEqual(expected)
|
|
const before = (await dock.boundingBox())!.height
|
|
|
|
await editor.click()
|
|
await page.keyboard.type("A draft")
|
|
|
|
for (const line of ["that grows", "the composer", "by several lines"]) {
|
|
await page.keyboard.press("Shift+Enter")
|
|
await page.keyboard.type(line)
|
|
}
|
|
|
|
await expect.poll(async () => (await dock.boundingBox())!.height).toBeGreaterThan(before + 40)
|
|
await expect.poll(geometry).toEqual(expected)
|
|
})
|
|
|
|
test("groups consecutive sent prompts under the last one's meta line, with each bubble's actions beside it", async ({
|
|
page,
|
|
}) => {
|
|
const prompt = (id: string, text: string, created: number) =>
|
|
userMessage([userText(text, { id: `prt_${id}_text` })], { id, created })
|
|
|
|
await setupTimeline(page, {
|
|
messages: [
|
|
prompt("msg_0001_run", "Group these prompts.", 1700000000000),
|
|
prompt("msg_0002_run", "Like the iOS app does.", 1700000001000),
|
|
],
|
|
})
|
|
|
|
const row = (id: string) =>
|
|
page.locator(`[data-timeline-virtual-content] [data-timeline-row="UserMessage"][data-message-id="${id}"]`)
|
|
|
|
const first = row("msg_0001_run")
|
|
const last = row("msg_0002_run")
|
|
const bubble = (row: Locator) => row.locator('[data-slot="user-message-text"]')
|
|
await expect(bubble(last)).toHaveText("Like the iOS app does.")
|
|
|
|
// Bubbles of a run sit 4px apart, as in the iOS app, and only the last carries the meta line.
|
|
await expect
|
|
.poll(async () => {
|
|
const above = (await bubble(first).boundingBox())!
|
|
const below = (await bubble(last).boundingBox())!
|
|
|
|
return Math.round(below.y - above.y - above.height)
|
|
})
|
|
.toBe(4)
|
|
await expect(first.locator('[data-slot="user-message-copy-wrapper"]')).toBeHidden()
|
|
await expect(last.locator('[data-slot="user-message-copy-wrapper"]')).toBeVisible()
|
|
|
|
// The first message keeps its own actions, shown beside its bubble on hover.
|
|
await bubble(first).hover()
|
|
await expect(first.locator('[data-slot="user-message-run-actions"]')).toHaveCSS("opacity", "1")
|
|
await expect(first.getByRole("button", { name: "More actions" })).toHaveCount(1)
|
|
})
|
|
|
|
test("leaves a long prompt unfolded while Fold long messages is off", async ({ page }) => {
|
|
const text = Array.from({ length: 20 }, (_, index) => `Long line ${index + 1}`).join("\n")
|
|
|
|
await setupTimeline(page, {
|
|
messages: [
|
|
userMessage([userText(text, { id: "prt_msg_0001_nofold_text" })], {
|
|
id: "msg_0001_nofold",
|
|
created: 1700000000000,
|
|
}),
|
|
],
|
|
viewport: { width: 1200, height: 700 },
|
|
})
|
|
|
|
const row = page.locator('[data-timeline-row="UserMessage"][data-message-id="msg_0001_nofold"]')
|
|
await expect(row).toContainText("Long line 20")
|
|
await expect(row.locator('[data-slot="user-message-fold"]')).toHaveCount(0)
|
|
await expect(row.getByRole("button", { name: "Read more" })).toHaveCount(0)
|
|
})
|
|
|
|
test("folds a prompt past 12 lines to its first 8 and keeps it open after scrolling out of view", async ({ page }) => {
|
|
const lines = (name: string, count: number) =>
|
|
Array.from({ length: count }, (_, index) => `${name} line ${index + 1}`).join("\n")
|
|
|
|
const prompt = (id: string, text: string, created: number) =>
|
|
userMessage([userText(text, { id: `prt_${id}_text` })], { id, created })
|
|
|
|
const reply = (id: string, parentID: string, created: number) =>
|
|
assistantMessage(
|
|
[{ id: `prt_${id}_text`, type: "text", text: `Reply ${id}. ${"Later work fills the timeline. ".repeat(12)}` }],
|
|
{ id, parentID, created },
|
|
)
|
|
|
|
await setupTimeline(page, {
|
|
messages: [
|
|
prompt("msg_0001_fold_edge", lines("Edge", 12), 1700000000000),
|
|
reply("msg_0002_fold_edge", "msg_0001_fold_edge", 1700000001000),
|
|
prompt("msg_0003_fold_long", lines("Long", 13), 1700000002000),
|
|
reply("msg_0004_fold_long", "msg_0003_fold_long", 1700000003000),
|
|
...Array.from({ length: 16 }, (_, index) => {
|
|
const created = 1700000010000 + index * 2_000
|
|
const id = `msg_${String(100 + index * 2).padStart(4, "0")}_fold_later`
|
|
|
|
return [prompt(id, `Later prompt ${index}`, created), reply(`${id}_reply`, id, created + 1_000)]
|
|
}).flat(),
|
|
],
|
|
settings: { foldUserMessages: true },
|
|
viewport: { width: 1200, height: 700 },
|
|
})
|
|
|
|
const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
|
|
|
|
const row = (id: string) =>
|
|
page.locator(`[data-timeline-virtual-content] [data-timeline-row="UserMessage"][data-message-id="${id}"]`)
|
|
|
|
const edge = row("msg_0001_fold_edge")
|
|
const long = row("msg_0003_fold_long")
|
|
const bubble = long.locator('[data-slot="user-message-text"]')
|
|
const fold = long.locator('[data-slot="user-message-fold"]')
|
|
const lastLater = row("msg_0130_fold_later")
|
|
await expect(lastLater).toBeVisible()
|
|
|
|
// A wheel, not a scroll write, so the timeline stops following its end.
|
|
await scroller.hover()
|
|
await page.mouse.wheel(0, -100_000)
|
|
await expect(long).toBeVisible()
|
|
|
|
// 12 lines show in full; 13 fold to 8, and all 13 stay in the text for copy and select-all.
|
|
await expect(edge.locator('[data-slot="user-message-fold"]')).toContainText("Edge line 12")
|
|
await expect(edge.getByRole("button", { name: "Read more" })).toHaveCount(0)
|
|
const toggle = long.getByRole("button", { name: /^(Read more|Show less)$/ })
|
|
await expect(toggle).toHaveAccessibleName("Read more")
|
|
await expect(toggle).toHaveAttribute("aria-expanded", "false")
|
|
const lineHeight = await fold.evaluate((element) => parseFloat(getComputedStyle(element).lineHeight))
|
|
await expect.poll(async () => Math.round((await fold.boundingBox())!.height / lineHeight)).toBe(8)
|
|
expect(
|
|
await fold.evaluate((element) => {
|
|
const selection = getSelection()!
|
|
selection.selectAllChildren(element)
|
|
const text = selection.toString()
|
|
selection.removeAllRanges()
|
|
|
|
return text
|
|
}),
|
|
).toContain("Long line 13")
|
|
|
|
// A cached tab's timeline is detached while hidden; the message stays folded rather than measuring 0 lines.
|
|
expect(
|
|
await bubble.evaluate(async (element) => {
|
|
const parent = element.parentElement!
|
|
const next = element.nextSibling
|
|
element.remove()
|
|
await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
|
|
const folded = element.querySelector('[data-slot="user-message-fold"]')!.hasAttribute("data-folded")
|
|
parent.insertBefore(element, next)
|
|
|
|
return folded
|
|
}),
|
|
).toBe(true)
|
|
await expect(toggle).toHaveAttribute("aria-expanded", "false")
|
|
|
|
// Opening grows the bubble downward, and the virtual row takes its new height.
|
|
await bubble.evaluate((element) => element.scrollIntoView({ block: "center" }))
|
|
const top = (await bubble.boundingBox())!.y
|
|
await toggle.click()
|
|
await expect(toggle).toHaveAttribute("aria-expanded", "true")
|
|
await expect(toggle).toHaveAccessibleName("Show less")
|
|
await expect.poll(async () => Math.round((await fold.boundingBox())!.height / lineHeight)).toBe(13)
|
|
expect(Math.abs((await bubble.boundingBox())!.y - top)).toBeLessThanOrEqual(1)
|
|
await expect
|
|
.poll(() =>
|
|
long.evaluate((element) => {
|
|
const allocated = element.closest<HTMLElement>("[data-timeline-key]")!.getBoundingClientRect().height
|
|
const content = element.closest<HTMLElement>("[data-index]")!.getBoundingClientRect().height
|
|
|
|
return Math.abs(allocated - content)
|
|
}),
|
|
)
|
|
.toBeLessThanOrEqual(1)
|
|
|
|
// The row unmounts at the end of the timeline and comes back open.
|
|
await page.mouse.wheel(0, 100_000)
|
|
await expect(lastLater).toBeVisible()
|
|
await expect(long).toHaveCount(0)
|
|
await page.mouse.wheel(0, -100_000)
|
|
await expect(long.getByRole("button", { name: "Show less" })).toHaveAttribute("aria-expanded", "true")
|
|
await expect.poll(async () => Math.round((await fold.boundingBox())!.height / lineHeight)).toBe(13)
|
|
|
|
// Closing a message whose top is on screen shrinks it in place, without scrolling the timeline.
|
|
await scroller.evaluate(
|
|
(element, target) => {
|
|
element.scrollTop += target!.y - element.getBoundingClientRect().top - 100
|
|
},
|
|
await bubble.boundingBox(),
|
|
)
|
|
|
|
const closing = {
|
|
top: (await bubble.boundingBox())!.y,
|
|
scroll: await scroller.evaluate((element) => element.scrollTop),
|
|
}
|
|
|
|
expect(closing.scroll).toBeGreaterThan(150)
|
|
await toggle.click()
|
|
await expect(toggle).toHaveAttribute("aria-expanded", "false")
|
|
expect(Math.abs((await bubble.boundingBox())!.y - closing.top)).toBeLessThanOrEqual(1)
|
|
expect(await scroller.evaluate((element) => element.scrollTop)).toBe(closing.scroll)
|
|
|
|
// Find skips the Read more button, and a match hidden in the fold opens the message.
|
|
const highlights = () =>
|
|
page.evaluate(() =>
|
|
["timeline-search-hit", "timeline-search-hit-active"].reduce(
|
|
(count, name) => count + (CSS.highlights.get(name)?.size ?? 0),
|
|
0,
|
|
),
|
|
)
|
|
|
|
await page.keyboard.press("ControlOrMeta+f")
|
|
const search = page.locator('[data-component="timeline-search-bar"] input')
|
|
await expect(search).toBeFocused()
|
|
await search.fill("more")
|
|
await expect.poll(highlights).toBe(0)
|
|
await search.fill("Long line 13")
|
|
await expect(toggle).toHaveAttribute("aria-expanded", "true")
|
|
await expect.poll(highlights).toBe(1)
|
|
})
|