agent-preset-authoring.e2e.ts 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. // Web e2e scenario: the agent-preset settings section as copy-only authoring.
  2. // The browser never edits composition text — a shipped preset opens in a
  3. // read-only viewer, the copy dialog collects an id and an optional display
  4. // name, and the host copies the whole directory. The section's other job is
  5. // getting the user TO the files: this lane pins `nativeOpen: false` (see the
  6. // overlay), so the location affordance answers the preset directory as text —
  7. // the deterministic branch a golden can hold on every platform.
  8. //
  9. // Zero model calls: no replay fixture mounts, so a stray stream fails loud.
  10. import { existsSync } from 'node:fs'
  11. import { mkdir, mkdtemp, readFile, realpath, rm, writeFile } from 'node:fs/promises'
  12. import { tmpdir } from 'node:os'
  13. import { fileURLToPath } from 'node:url'
  14. import { join } from 'node:path'
  15. import type { Browser, Page } from 'playwright'
  16. import { chromium } from 'playwright'
  17. import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
  18. import type { Locator } from 'playwright'
  19. import {
  20. captureStableAria, compareOrRefreshGolden, launchWebScaffold, watchConsole,
  21. webSnapshotMode, type WebScaffold,
  22. } from './scaffold.ts'
  23. import { ZH_BROWSER_LOCALE, connectFreshWorkspaceZh, saveFailureShot } from './support.ts'
  24. const SNAPSHOT_DIR = fileURLToPath(new URL('./expected/agent-preset-authoring', import.meta.url))
  25. const SECTION_EXPECTED = join(SNAPSHOT_DIR, 'section.expected.md')
  26. const COPY_DIALOG_EXPECTED = join(SNAPSHOT_DIR, 'copy-dialog.expected.md')
  27. const CREATED_EXPECTED = join(SNAPSHOT_DIR, 'created.expected.md')
  28. const DAMAGED_EXPECTED = join(SNAPSHOT_DIR, 'damaged.expected.md')
  29. /** The shipped roster, bundled inside the `dsh-agent-presets` package. */
  30. const SHIPPED_PRESETS = fileURLToPath(new URL('../../../packages/preset/agent-presets/presets', import.meta.url))
  31. const OVERLAY = fileURLToPath(new URL('./agent-preset-authoring.overlay.yml', import.meta.url))
  32. const MODE = webSnapshotMode()
  33. describe('web e2e: agent-preset authoring is a host-side copy', () => {
  34. let scaffold: WebScaffold
  35. let browser: Browser
  36. let page: Page
  37. let tripwire: ReturnType<typeof watchConsole>
  38. let userRoot: string
  39. /** The settings dialog, opened on the Agent-presets section. */
  40. function settingsDialog(): Locator {
  41. return page.getByRole('dialog', { name: '设置' })
  42. }
  43. beforeAll(async () => {
  44. userRoot = await realpath(await mkdtemp(join(tmpdir(), 'dsh-web-e2e-presets-')))
  45. scaffold = await launchWebScaffold({
  46. extraOverlayPath: OVERLAY,
  47. profile: { packages: [] },
  48. agentPresets: {
  49. // The shipped root is the plugin's own, prepended before this.
  50. roots: [{ path: userRoot, trust: 'user' }],
  51. default: 'standard',
  52. },
  53. })
  54. browser = await chromium.launch()
  55. // The scenario asserts the shipped Chinese copy, so the browser asks for it.
  56. page = await browser.newPage({ viewport: { width: 1680, height: 1000 }, locale: ZH_BROWSER_LOCALE })
  57. tripwire = watchConsole(page)
  58. await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' })
  59. await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
  60. }, 120_000)
  61. afterAll(async () => {
  62. await browser?.close()
  63. await scaffold?.close()
  64. await rm(userRoot, { recursive: true, force: true })
  65. })
  66. it('offers the roster with copy as the only way to create', async () => {
  67. onTestFailed(() => saveFailureShot(page, 'web-e2e-preset-authoring-section'))
  68. await page.getByRole('button', { name: '设置', exact: true }).click()
  69. const dialog = settingsDialog()
  70. await dialog.waitFor({ timeout: 10_000 })
  71. await dialog.getByRole('button', { name: 'Agent 预设' }).click()
  72. await dialog.getByRole('heading', { name: 'Agent 预设' }).waitFor({ timeout: 10_000 })
  73. // The intro copy also names 标准模式. Wait for the roster's own action so
  74. // the snapshot cannot land between the section shell and its cards.
  75. await dialog.getByRole('button', { name: '查看: 标准模式', exact: true }).waitFor({ timeout: 10_000 })
  76. const snapshot = await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd)
  77. await compareOrRefreshGolden(SECTION_EXPECTED, snapshot, MODE)
  78. const toggle = dialog.getByRole('switch', { name: '允许切换agent模式' })
  79. expect(await toggle.getAttribute('aria-checked')).toBe('true')
  80. // The intro states the copy path directly, and the shipped rows offer
  81. // view/copy but never delete or a location — their
  82. // install is overwritten by upgrades and is not the user's to manage.
  83. expect(snapshot).toContain('或用「创造模式」让 Agent 帮你创建')
  84. expect(snapshot).not.toContain('新建预设')
  85. expect(snapshot).toContain('查看: 标准模式')
  86. expect(snapshot).not.toContain('删除: 标准模式')
  87. expect(snapshot).not.toContain('打开目录')
  88. // The rest of this scenario exercises the existing default and Creator
  89. // actions with the beta picker enabled by default.
  90. }, 60_000)
  91. it('views a shipped composition read-only instead of editing it', async () => {
  92. onTestFailed(() => saveFailureShot(page, 'web-e2e-preset-authoring-view'))
  93. const dialog = settingsDialog()
  94. await dialog.getByRole('button', { name: '查看: 标准模式' }).click()
  95. const viewer = page.getByRole('dialog', { name: '查看 · 标准模式' })
  96. await viewer.waitFor({ timeout: 10_000 })
  97. // The real shipped composition, not a golden: the viewer shows whatever
  98. // the deployment ships, and this lane only asserts it is shown read-only.
  99. const shipped = await readFile(join(SHIPPED_PRESETS, 'standard', 'agent.cordis.yml'), 'utf8')
  100. expect(await viewer.locator('pre').textContent()).toBe(shipped)
  101. expect(await viewer.getByRole('textbox').count()).toBe(0)
  102. // The header X and the footer button share the 关闭 name; the footer one
  103. // is last in the dialog.
  104. await viewer.getByRole('button', { name: '关闭' }).last().click()
  105. await viewer.waitFor({ state: 'detached', timeout: 10_000 })
  106. }, 60_000)
  107. it('copies 极简模式 whole under a new id and lands in its files', async () => {
  108. onTestFailed(() => saveFailureShot(page, 'web-e2e-preset-authoring-copy'))
  109. const dialog = settingsDialog()
  110. await dialog.getByRole('button', { name: '复制: 极简模式' }).click()
  111. const copyDialog = page.getByRole('dialog', { name: '复制预设 · 复制自 极简模式' })
  112. await copyDialog.waitFor({ timeout: 10_000 })
  113. const dialogSnapshot = await captureStableAria(
  114. page, '[role="dialog"][aria-label^="复制预设"]', scaffold.workspaceCwd)
  115. await compareOrRefreshGolden(COPY_DIALOG_EXPECTED, dialogSnapshot, MODE)
  116. // Two fields and nothing else: the id is the directory name the host
  117. // needs up front; description and composition live in the files.
  118. expect(dialogSnapshot).toContain('标识符')
  119. expect(dialogSnapshot).not.toContain('描述')
  120. await copyDialog.getByPlaceholder('my-agent').fill('my-agent')
  121. await copyDialog.getByPlaceholder('选择器中显示的名字,缺省用标识符').fill('我的模式')
  122. await copyDialog.getByRole('button', { name: '创建' }).click()
  123. await copyDialog.waitFor({ state: 'detached', timeout: 10_000 })
  124. // The new row lands in the custom group, and — with no desktop opener —
  125. // its directory is revealed as text right away: landing in the files is
  126. // the completion of a copy, not a follow-up.
  127. await dialog.getByText('我的模式').first().waitFor({ timeout: 10_000 })
  128. await dialog.getByText('预设文件:').waitFor({ timeout: 10_000 })
  129. // The copy dialog is detached, so the settings dialog is the only one
  130. // left (it names itself via aria-labelledby, which a CSS attribute
  131. // selector cannot address).
  132. const snapshot = await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd, {
  133. replacements: [[userRoot, '{{presetRoot}}']],
  134. })
  135. await compareOrRefreshGolden(CREATED_EXPECTED, snapshot, MODE)
  136. expect(snapshot).toContain('{{presetRoot}}/my-agent')
  137. // The host copied the whole directory and rewrote only the display
  138. // metadata: the composition is byte-identical to the shipped source, the
  139. // description rides along for the user to edit in place, and neither the
  140. // source's name nor its roster order survives into the copy.
  141. const composition = await readFile(join(userRoot, 'my-agent', 'agent.cordis.yml'), 'utf8')
  142. expect(composition).toBe(await readFile(join(SHIPPED_PRESETS, 'minimal', 'agent.cordis.yml'), 'utf8'))
  143. const metadata = await readFile(join(userRoot, 'my-agent', 'preset.yml'), 'utf8')
  144. expect(metadata).toContain('name: 我的模式')
  145. expect(metadata).toContain('description: 仅提供持久 shell 的单工具编码 Agent。')
  146. expect(metadata).not.toContain('order:')
  147. }, 60_000)
  148. it('deletes the copy after confirmation and reclaims the roster', async () => {
  149. onTestFailed(() => saveFailureShot(page, 'web-e2e-preset-authoring-delete'))
  150. const dialog = settingsDialog()
  151. await dialog.getByRole('button', { name: '删除: 我的模式' }).click()
  152. const confirm = page.getByRole('dialog', { name: '删除该预设?' })
  153. await confirm.waitFor({ timeout: 10_000 })
  154. await confirm.getByRole('button', { name: '删除', exact: true }).click()
  155. await confirm.waitFor({ state: 'detached', timeout: 10_000 })
  156. await expect.poll(async () => dialog.getByText('我的模式').count(), { timeout: 10_000 }).toBe(0)
  157. expect(existsSync(join(userRoot, 'my-agent'))).toBe(false)
  158. // The custom group outlives its only member: the heading stays with the
  159. // creator entry so the place to author a preset never disappears.
  160. expect(await dialog.getByRole('heading', { name: '自定义' }).count()).toBe(1)
  161. expect(await dialog.getByRole('button', { name: '用「创造模式」创作自定义预设' }).count()).toBe(1)
  162. expect(await dialog.getByText('标准模式').count()).toBeGreaterThan(0)
  163. }, 60_000)
  164. it('marks damaged presets broken and clears a ghost through delete', async () => {
  165. onTestFailed(() => saveFailureShot(page, 'web-e2e-preset-authoring-damaged'))
  166. // The two hand-edit damage shapes: a composition that no longer parses,
  167. // and a directory whose composition file was deleted outright.
  168. await mkdir(join(userRoot, 'broken-yaml'), { recursive: true })
  169. await writeFile(join(userRoot, 'broken-yaml', 'agent.cordis.yml'), '- id: x\n name: [unclosed\n')
  170. await mkdir(join(userRoot, 'ghost'), { recursive: true })
  171. await writeFile(join(userRoot, 'ghost', 'preset.yml'), 'name: 幽灵预设\ndescription: composition 已被手动删除。\n')
  172. // The section reads the roster when it mounts; hop away and back.
  173. const dialog = settingsDialog()
  174. await dialog.getByRole('button', { name: '通用设置' }).click()
  175. await dialog.getByRole('button', { name: 'Agent 预设' }).click()
  176. await dialog.getByText('加载失败').first().waitFor({ timeout: 10_000 })
  177. const snapshot = await captureStableAria(page, '[role="dialog"]', scaffold.workspaceCwd, {
  178. replacements: [[userRoot, '{{presetRoot}}']],
  179. })
  180. await compareOrRefreshGolden(DAMAGED_EXPECTED, snapshot, MODE)
  181. // Both damage shapes surface as marked, unselectable, uncopyable cards
  182. // that still carry their metadata and the discovery-reported reason.
  183. expect(snapshot).toContain('加载失败: broken-yaml')
  184. expect(snapshot).toContain('加载失败: 幽灵预设')
  185. expect(snapshot).toContain('not valid YAML')
  186. expect(snapshot).toContain('agent.cordis.yml is missing')
  187. expect(await dialog.getByRole('button', { name: '加载失败: broken-yaml' }).isDisabled()).toBe(true)
  188. expect(await dialog.getByRole('button', { name: '复制: 幽灵预设' }).isDisabled()).toBe(true)
  189. // A broken card offers no "set default" affordance at all — the aria name
  190. // IS the broken marking, so the picking name must not exist.
  191. expect(await dialog.getByRole('button', { name: '设为默认: broken-yaml' }).count()).toBe(0)
  192. // The ghost's way out is the card's own delete — and the id it blocked
  193. // is claimable again immediately afterwards.
  194. await dialog.getByRole('button', { name: '删除: 幽灵预设' }).click()
  195. const confirm = page.getByRole('dialog', { name: '删除该预设?' })
  196. await confirm.waitFor({ timeout: 10_000 })
  197. await confirm.getByRole('button', { name: '删除', exact: true }).click()
  198. await confirm.waitFor({ state: 'detached', timeout: 10_000 })
  199. await expect.poll(async () => dialog.getByText('幽灵预设').count(), { timeout: 10_000 }).toBe(0)
  200. expect(existsSync(join(userRoot, 'ghost'))).toBe(false)
  201. await dialog.getByRole('button', { name: '复制: 极简模式' }).click()
  202. const copyDialog = page.getByRole('dialog', { name: '复制预设 · 复制自 极简模式' })
  203. await copyDialog.waitFor({ timeout: 10_000 })
  204. await copyDialog.getByPlaceholder('my-agent').fill('ghost')
  205. await copyDialog.getByRole('button', { name: '创建' }).click()
  206. await copyDialog.waitFor({ state: 'detached', timeout: 10_000 })
  207. await dialog.getByRole('button', { name: '设为默认: ghost' }).waitFor({ timeout: 10_000 })
  208. // Leave the roster as the earlier tests shaped it.
  209. await dialog.getByRole('button', { name: '删除: ghost' }).click()
  210. const cleanup = page.getByRole('dialog', { name: '删除该预设?' })
  211. await cleanup.waitFor({ timeout: 10_000 })
  212. await cleanup.getByRole('button', { name: '删除', exact: true }).click()
  213. await cleanup.waitFor({ state: 'detached', timeout: 10_000 })
  214. await rm(join(userRoot, 'broken-yaml'), { recursive: true, force: true })
  215. }, 60_000)
  216. it('starts a creator-mode session from the section', async () => {
  217. onTestFailed(() => saveFailureShot(page, 'web-e2e-preset-authoring-creator'))
  218. // Without a workspace the flow only stages (there is no session to land
  219. // in until one is connected); connect first so the gesture carries all
  220. // the way to a composed host session.
  221. await settingsDialog().getByRole('button', { name: '关闭' }).last().click()
  222. await connectFreshWorkspaceZh(page, scaffold.workspaceCwd)
  223. await page.getByRole('button', { name: '设置', exact: true }).click()
  224. const dialog = settingsDialog()
  225. await dialog.waitFor({ timeout: 10_000 })
  226. await dialog.getByRole('button', { name: 'Agent 预设' }).click()
  227. await dialog.getByRole('button', { name: '用「创造模式」创作自定义预设' }).click()
  228. // Leaving settings is part of the gesture: the flow lands on the
  229. // new-session screen with the self-referential preset staged, and the
  230. // blank session the flow produces composes from it on the host.
  231. await dialog.waitFor({ state: 'detached', timeout: 10_000 })
  232. await expect.poll(async () => {
  233. const response = await scaffold.hostFetch('/api/session/list', {
  234. method: 'POST',
  235. headers: { 'content-type': 'application/json' },
  236. body: JSON.stringify({
  237. type: 'client-request', rpcId: 'creator-draft-stage', method: 'session/list',
  238. payload: { args: { _request: {} } },
  239. }),
  240. })
  241. const body = await response.json() as {
  242. result: { value?: { items: unknown[] } }
  243. }
  244. return JSON.stringify(body.result.value?.items ?? body.result)
  245. }, { timeout: 15_000 }).toContain('"agentPreset":"cordis"')
  246. }, 60_000)
  247. it('drove every surface without a page error or a stream warning', () => {
  248. expect(tripwire.pageErrors).toEqual([])
  249. expect(tripwire.warnings).toEqual([])
  250. })
  251. })