message-actions.e2e.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. // Web e2e scenario: message IconActions + clocks. Cold-seeds a deterministic
  2. // completed-turn-tail fork case with an unchanged resume header (zero model
  3. // calls) and pins the settled conversation aria after the footers are
  4. // focus-revealed — the surface package jsdom tests cannot substitute for
  5. // (docs/testing.md snapshot rule).
  6. import { mkdir, readFile, writeFile } from 'node:fs/promises'
  7. import { join } from 'node:path'
  8. import { fileURLToPath } from 'node:url'
  9. import type { Browser, Page } from 'playwright'
  10. import { chromium } from 'playwright'
  11. import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
  12. import { SessionId } from '@deepseek-ai/dsh-session'
  13. import {
  14. assertFixtureInventory, captureStableAria, compareOrRefreshGolden, fixtureUserPrompts,
  15. launchWebScaffold, parseSeedFixture, renderSeedFixture, seedSession, watchConsole, webSnapshotMode, type WebScaffold,
  16. } from './scaffold.ts'
  17. import { newEnglishPage, saveFailureShot } from './support.ts'
  18. const SNAPSHOT_DIR = fileURLToPath(new URL('../../../snapshots/web/message-actions', import.meta.url))
  19. // Borrowed read-only: this scenario needs any settled user+assistant pair, not
  20. // a new recording (workspace-management / sidebar-scrollbar pattern).
  21. const SEED = fileURLToPath(new URL('../../../snapshots/web/seeded-history/session.v3.jsonl', import.meta.url))
  22. const UI_EXPECTED = join(SNAPSHOT_DIR, 'ui.expected.md')
  23. const FORK_EXPECTED = join(SNAPSHOT_DIR, 'fork.expected.md')
  24. const MODE = webSnapshotMode()
  25. const SEED_ID = 'message-actions-web-e2e'
  26. const PROMPT = 'Use the read tool twice in one assistant message: read a.txt and b.txt. Then reply with the single word DONE and stop.'
  27. const MID_TURN_TEXT = 'I will read both files before answering.'
  28. const SECOND_PROMPT = 'Now give the final answer.'
  29. /**
  30. * Adapt the borrowed recording into response -> tools -> interrupted Think,
  31. * followed by one ordinary completed response. The first response keeps
  32. * copy/clock but is not a legal branch point; the second is the real turn tail.
  33. * @param raw - Recorded seeded-history JSONL.
  34. * @returns A contiguous, closed two-turn fixture.
  35. */
  36. function completedTailFixture(raw: string): string {
  37. const decoded = parseSeedFixture(raw)
  38. const stepTwoStart = decoded.events.findIndex(event =>
  39. event.type === 'step/start' && event.data.turn === 1 && event.data.step === 2)
  40. if (stepTwoStart < 0) throw new Error('borrowed fixture has no step-two start')
  41. const kept = decoded.events.slice(0, stepTwoStart + 1).map((event) => {
  42. if (event.type !== 'assistant/message' || event.data.turn !== 1 || event.data.step !== 1) return event
  43. const finish = event.data.stream.findIndex(record =>
  44. record.type === 'chunk' && record.chunk.type === 'finish')
  45. if (finish < 0) throw new Error('borrowed step-one Assistant message has no finish record')
  46. const finishRecord = event.data.stream[finish]!
  47. if (finishRecord.type !== 'chunk') throw new Error('borrowed step-one finish is not a chunk record')
  48. const streamTime = finishRecord.time
  49. return {
  50. ...event,
  51. data: {
  52. ...event.data,
  53. message: {
  54. ...event.data.message,
  55. content: [...event.data.message.content, { type: 'text' as const, text: MID_TURN_TEXT }],
  56. },
  57. stream: [
  58. ...event.data.stream.slice(0, finish),
  59. { type: 'chunk' as const, time: streamTime, chunk: { type: 'block-start' as const, index: 3, blockType: 'text' as const } },
  60. { type: 'text-chunks' as const, time0: streamTime, index: 3, dt: [], texts: [MID_TURN_TEXT] },
  61. {
  62. type: 'chunk' as const,
  63. time: streamTime,
  64. chunk: { type: 'block-end' as const, index: 3, block: { type: 'text' as const, text: MID_TURN_TEXT } },
  65. },
  66. ...event.data.stream.slice(finish),
  67. ],
  68. },
  69. }
  70. })
  71. const inheritedHeader = kept.findLast(event => event.type === 'request/header')
  72. if (inheritedHeader?.type !== 'request/header') {
  73. throw new Error('borrowed recording has no request header')
  74. }
  75. let seq = (kept.at(-1)?.seq ?? -1) + 1
  76. let time = (kept.at(-1)?.time ?? -1) + 1
  77. const at = (event: Record<string, unknown>): { seq: number; time: number } & Record<string, unknown> => ({
  78. ...event,
  79. seq: seq++,
  80. time: time++,
  81. })
  82. const tail = [
  83. at({
  84. type: 'assistant/attempt',
  85. data: {
  86. turn: 1,
  87. step: 2,
  88. stream: [
  89. { type: 'chunk', time, chunk: { type: 'block-start', index: 0, blockType: 'reasoning' } },
  90. { type: 'reasoning-chunks', time0: time, index: 0, dt: [], texts: ['This path was interrupted.'] },
  91. {
  92. type: 'chunk',
  93. time,
  94. chunk: { type: 'block-end', index: 0, block: { type: 'reasoning', text: 'This path was interrupted.' } },
  95. },
  96. { type: 'chunk', time, chunk: { type: 'finish', reason: { kind: 'stop' } } },
  97. ],
  98. },
  99. }),
  100. at({ type: 'step/end', data: { turn: 1, step: 2 } }),
  101. at({ type: 'turn/end', data: { turn: 1, reason: { kind: 'aborted', reason: { kind: 'user' } } } }),
  102. at({ type: 'turn/start', data: { turn: 2 } }),
  103. at({
  104. type: 'user/message',
  105. data: {
  106. content: [{ type: 'text', text: SECOND_PROMPT }],
  107. source: { kind: 'user' },
  108. role: 'user',
  109. id: '{{message:98}}',
  110. },
  111. surfaceOp: 'append',
  112. }),
  113. at({ type: 'step/start', data: { turn: 2, step: 1 } }),
  114. at({ type: 'request/header', data: { header: inheritedHeader.data.header, reason: 'resume' } }),
  115. at({
  116. type: 'assistant/message',
  117. data: {
  118. turn: 2,
  119. step: 1,
  120. message: {
  121. role: 'assistant',
  122. content: [{ type: 'text', text: 'DONE' }],
  123. source: { kind: 'model', provider: 'deepseek-official', model: 'deepseek-v4-flash' },
  124. id: '{{message:99}}',
  125. },
  126. stream: [
  127. { type: 'chunk', time: 0, chunk: { type: 'block-start', index: 0, blockType: 'text' } },
  128. { type: 'text-chunks', time0: 0, index: 0, dt: [], texts: ['DONE'] },
  129. { type: 'chunk', time: 0, chunk: { type: 'block-end', index: 0, block: { type: 'text', text: 'DONE' } } },
  130. { type: 'chunk', time: 0, chunk: { type: 'finish', reason: { kind: 'stop' } } },
  131. ],
  132. },
  133. surfaceOp: 'append',
  134. }),
  135. at({ type: 'step/end', data: { turn: 2, step: 1 } }),
  136. at({ type: 'turn/end', data: { turn: 2, reason: { kind: 'completed' } } }),
  137. ]
  138. return renderSeedFixture(decoded.headerLine, [...kept, ...tail])
  139. }
  140. describe('web e2e: message IconActions and clocks on settled history', () => {
  141. let scaffold: WebScaffold
  142. let browser: Browser
  143. let page: Page
  144. let tripwire: ReturnType<typeof watchConsole>
  145. beforeAll(async () => {
  146. scaffold = await launchWebScaffold({})
  147. const sessionCwd = join(scaffold.workspaceCwd, 'workspace')
  148. await mkdir(sessionCwd, { recursive: true })
  149. await writeFile(join(sessionCwd, 'a.txt'), 'alpha\n')
  150. await writeFile(join(sessionCwd, 'b.txt'), 'beta\n')
  151. const raw = completedTailFixture(await readFile(SEED, 'utf8'))
  152. expect(fixtureUserPrompts(raw), 'adapted seed must carry both prompts').toEqual([PROMPT, SECOND_PROMPT])
  153. expect(parseSeedFixture(raw).events.flatMap(event => event.type === 'request/header'
  154. ? [event.data.reason]
  155. : []), 'adapted seed must carry an unchanged resume header').toEqual(['initial', 'resume'])
  156. await seedSession(scaffold, raw, SEED_ID)
  157. browser = await chromium.launch()
  158. page = await newEnglishPage(browser)
  159. tripwire = watchConsole(page)
  160. await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' })
  161. await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
  162. }, 120_000)
  163. afterAll(async () => {
  164. await browser?.close()
  165. await scaffold?.close()
  166. })
  167. it.skipIf(MODE === 'record')('enables branch only on the completed transcript tail', async () => {
  168. onTestFailed(() => saveFailureShot(page, 'web-e2e-message-actions'))
  169. const groupRow = page.locator('[role="treeitem"]').first()
  170. await groupRow.waitFor({ timeout: 15_000 })
  171. await groupRow.click()
  172. const sessionRow = page.locator('[role="treeitem"]').nth(1)
  173. await sessionRow.waitFor({ timeout: 10_000 })
  174. await sessionRow.click()
  175. await expect.poll(() => page.getByText(MID_TURN_TEXT, { exact: true }).count(), { timeout: 15_000 }).toBe(1)
  176. await expect.poll(() => page.getByText('DONE', { exact: true }).count(), { timeout: 15_000 }).toBe(1)
  177. await expect.poll(
  178. () => page.getByRole('button', { name: 'System prompt', exact: true }).count(),
  179. { timeout: 10_000 },
  180. ).toBe(2)
  181. // Focus-reveal the footers (hover:hover keeps them opacity-hidden until
  182. // hover/focus-within). Branch renders only under assistant answers — user
  183. // bubbles carry none — and only a completed transcript tail enables it.
  184. const copyButtons = page.getByRole('button', { name: 'Copy' })
  185. await expect.poll(() => copyButtons.count(), { timeout: 10_000 }).toBeGreaterThanOrEqual(4)
  186. await copyButtons.first().focus()
  187. const branchButtons = page.getByRole('button', { name: 'Branch into a new conversation' })
  188. await expect.poll(() => branchButtons.count(), { timeout: 5_000 }).toBe(2)
  189. await expect.poll(
  190. () => branchButtons.evaluateAll(buttons => buttons.map(button => button.getAttribute('aria-disabled'))),
  191. { timeout: 5_000 },
  192. ).toEqual(['true', null])
  193. await branchButtons.first().focus()
  194. await expect.poll(() => page.getByRole('tooltip').textContent(), { timeout: 5_000 })
  195. .toBe('Available only on the last message of a completed turn')
  196. await expect.poll(() => page.getByRole('button', { name: 'Edit' }).count(), { timeout: 5_000 }).toBe(0)
  197. }, 60_000)
  198. it.skipIf(MODE === 'record')('matches the conversation aria golden with IconActions and clocks', async () => {
  199. onTestFailed(() => saveFailureShot(page, 'web-e2e-message-actions-aria'))
  200. await page.getByRole('button', { name: /^Select model, current/ })
  201. .waitFor({ timeout: 10_000 })
  202. await page.getByText(/Cache hit \d+%/u).first().waitFor({ timeout: 10_000 })
  203. // Keep a footer focused so opacity-hidden actions stay in the a11y tree
  204. // as an active/focused control during the capture.
  205. await page.getByRole('button', { name: 'Copy' }).first().focus()
  206. const snapshot = (await captureStableAria(page, '[class*="centerCol"]', scaffold.workspaceCwd))
  207. .split(SEED_ID).join('{{seededId}}')
  208. await compareOrRefreshGolden(UI_EXPECTED, snapshot, MODE)
  209. })
  210. it.skipIf(MODE === 'record')('forks through the settled-message and session-row actions', async () => {
  211. onTestFailed(() => saveFailureShot(page, 'web-e2e-message-fork'))
  212. // The last message action belongs to the completed second-turn assistant.
  213. await page.getByRole('button', { name: 'Branch into a new conversation' }).last().click()
  214. await expect.poll(
  215. () => scaffold.ctx.agents.list().find(agent => agent.session.header.parentSession === SessionId(SEED_ID)),
  216. { timeout: 15_000 },
  217. ).toBeDefined()
  218. await expect.poll(
  219. () => page.locator('[role="treeitem"]').count(),
  220. { timeout: 10_000 },
  221. ).toBe(3)
  222. await expect.poll(
  223. () => page.locator('[role="treeitem"][aria-selected="true"]').count(),
  224. { timeout: 10_000 },
  225. ).toBe(1)
  226. await expect.poll(
  227. () => page.locator('[role="treeitem"][aria-selected="true"]').textContent(),
  228. { timeout: 10_000 },
  229. ).toContain('Use the read tool twice (1)')
  230. // The row action owns a distinct ui-workspace injection from the message
  231. // action above, so exercise both through the loaded app before capture.
  232. const sourceRow = page.locator('[role="treeitem"][aria-selected="true"]')
  233. const rowBox = await sourceRow.boundingBox()
  234. if (rowBox === null) throw new Error('fork source row has no layout box')
  235. const actionButton = sourceRow.locator('button[aria-label^="Session actions for "]')
  236. await sourceRow.hover({ position: { x: rowBox.width - 16, y: rowBox.height / 2 } })
  237. await expect.poll(() => actionButton.isVisible(), { timeout: 2_000 }).toBe(true)
  238. const buttonBox = await actionButton.boundingBox()
  239. if (buttonBox === null) throw new Error('fork source row action has no layout box')
  240. await page.mouse.click(buttonBox.x + buttonBox.width / 2, buttonBox.y + buttonBox.height / 2)
  241. await page.getByRole('menuitem', { name: 'Fork session' }).click()
  242. await expect.poll(
  243. () => scaffold.ctx.agents.list().filter(agent => agent.session.header.parentSession !== undefined).length,
  244. { timeout: 15_000 },
  245. ).toBe(2)
  246. await expect.poll(
  247. () => page.locator('[role="treeitem"]').count(),
  248. { timeout: 10_000 },
  249. ).toBe(4)
  250. await expect.poll(
  251. () => page.locator('[role="treeitem"][aria-selected="true"]').count(),
  252. { timeout: 10_000 },
  253. ).toBe(1)
  254. // The child row is published before its inherited title rename settles;
  255. // wait for that second RPC projection before freezing the ARIA tree.
  256. await expect.poll(
  257. () => page.locator('[role="treeitem"][aria-selected="true"]').textContent(),
  258. { timeout: 10_000 },
  259. ).toContain('Use the read tool twice (2)')
  260. const tree = await captureStableAria(
  261. page,
  262. '[role="tree"][aria-label="Sessions"]',
  263. scaffold.workspaceCwd,
  264. )
  265. await compareOrRefreshGolden(FORK_EXPECTED, tree, MODE)
  266. })
  267. it.skipIf(MODE === 'record')('issued zero model calls and kept a closed inventory', async () => {
  268. expect(tripwire.pageErrors).toEqual([])
  269. expect(tripwire.warnings).toEqual([])
  270. await assertFixtureInventory(SNAPSHOT_DIR, ['fork.expected.md', 'ui.expected.md'])
  271. })
  272. })