Merge pull request #1754 from deepseek-harness/worktree/web-skill-tool-row

feat(web): add dedicated skill tool row

apps/web/tests/skill-tool-row.e2e.ts

@@ -0,0 +1,80 @@
+// Web e2e scenario: the real skill-load recording, seeded cold through the
+// persistence seam, renders through ui-skill's keyed toolview without a model
+// call. The disclosure proves replay-stable naming and exact durable output.
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import type { Browser, Page } from 'playwright'
+import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
+import {
+  assertFixtureInventory, captureStableAria, compareOrRefreshGolden, fixtureUserPrompts,
+  launchWebScaffold, seedSession, watchConsole, webSnapshotMode, type WebScaffold,
+} from './scaffold.ts'
+import { newEnglishPage, saveFailureShot } from './support.ts'
+
+const FIXTURE = fileURLToPath(new URL('../../../examples/acp-agent/tests/snapshots/skill-load/session.jsonl', import.meta.url))
+const SNAPSHOT_DIR = fileURLToPath(new URL('./snapshots/skill-tool-row', import.meta.url))
+const UI_EXPECTED = fileURLToPath(new URL('./snapshots/skill-tool-row/ui.expected.md', import.meta.url))
+const MODE = webSnapshotMode()
+const SEED_ID = 'skill-tool-row-web-e2e'
+const PROMPT = 'Load the snapshot-skill skill with the skill tool, then reply DONE.'
+
+describe.skipIf(MODE === 'record')('web e2e: dedicated Skill tool row', () => {
+  let scaffold: WebScaffold
+  let browser: Browser
+  let page: Page
+  let tripwire: ReturnType<typeof watchConsole>
+
+  beforeAll(async () => {
+    const fixture = await readFile(FIXTURE, 'utf8')
+    expect(fixtureUserPrompts(fixture)).toEqual([PROMPT])
+    scaffold = await launchWebScaffold({})
+    await seedSession(scaffold, fixture, SEED_ID)
+    browser = await chromium.launch()
+    page = await newEnglishPage(browser)
+    tripwire = watchConsole(page)
+    await page.goto(scaffold.baseUrl, { waitUntil: 'load' })
+    await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
+
+    const groupRow = page.locator('[role="treeitem"]').first()
+    await groupRow.waitFor({ timeout: 15_000 })
+    await groupRow.click()
+    const sessionRow = page.locator('[role="treeitem"]').nth(1)
+    await sessionRow.waitFor({ timeout: 10_000 })
+    await sessionRow.click()
+    await page.locator('[data-tool="skill"]').waitFor({ timeout: 15_000 })
+  }, 120_000)
+
+  afterAll(async () => {
+    await browser?.close()
+    await scaffold?.close()
+  })
+
+  it('expands the loaded skill to its exact recorded instructions', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-skill-tool-row'))
+    const call = page.locator('[data-tool="skill"]')
+    const row = call.getByRole('button', { name: 'Skill snapshot-skill' })
+    await expect.poll(() => row.getAttribute('aria-expanded')).toBe('false')
+    expect(await call.getByText('snapshot-skill', { exact: true }).count()).toBe(1)
+
+    await row.click()
+    await expect.poll(() => row.getAttribute('aria-expanded')).toBe('true')
+    await call.getByText('Instructions', { exact: true }).waitFor()
+    const output = call.locator('pre')
+    await output.waitFor()
+    expect(await output.textContent()).toContain('<skill_content name="snapshot-skill">')
+    expect(await output.textContent()).toContain('Follow these snapshot-only instructions.')
+    expect(await output.evaluate(element => getComputedStyle(element.parentElement!).maxHeight)).toBe('260px')
+
+    const snapshot = (await captureStableAria(page, '[class*="centerCol"]', scaffold.workspaceCwd))
+      .replace(/\b\d{1,2}\/\d{1,2}(?= \{\{clock\}\})/g, '{{date}}')
+      .split(SEED_ID).join('{{seededId}}')
+    await compareOrRefreshGolden(UI_EXPECTED, snapshot, MODE)
+    expect(tripwire.pageErrors).toEqual([])
+    expect(tripwire.warnings).toEqual([])
+  }, 60_000)
+
+  it('keeps its snapshot inventory closed', async () => {
+    await assertFixtureInventory(SNAPSHOT_DIR, ['ui.expected.md'])
+  })
+})

apps/web/tests/snapshots/skill-tool-row/ui.expected.md

@@ -0,0 +1,45 @@
+- banner:
+  - navigation "Session hierarchy":
+    - button "Load the snapshot-skill skill with" [disabled]
+  - tablist:
+    - tab "Chat" [selected]
+    - tab "Trajectory"
+- text: Load the snapshot-skill skill with the skill tool, then reply DONE. {{date}} {{clock}}
+- button "Copy":
+  - img
+- button "Context injection @deepseek-ai/dsh-system-prompt":
+  - img
+  - img
+  - text: Context injection @deepseek-ai/dsh-system-prompt
+- button "Context injection skill-catalog":
+  - img
+  - img
+  - text: Context injection skill-catalog
+- button "Think Load the requested skill.":
+  - img
+  - img
+  - text: Think Load the requested skill.
+- button "Skill snapshot-skill" [expanded]:
+  - img
+  - text: Skill snapshot-skill
+- region "Instructions": "Instructions <skill_content name=\"snapshot-skill\"> <skill_resources> Base directory for this skill: {{cwd}}/.dsh/skills/snapshot-skill Resolve relative paths mentioned by this skill against the base directory before using them. Load referenced resources only as needed. </skill_resources> <skill_instructions> Follow these snapshot-only instructions. Resolve referenced resources relative to this skill directory. </skill_instructions> </skill_content>"
+- button "Inspect"
+- button "Think The skill is loaded.":
+  - img
+  - img
+  - text: Think The skill is loaded.
+- paragraph: DONE
+- button "Copy":
+  - img
+- button "Branch into a new conversation":
+  - img
+- text: {{date}} {{clock}} Ran for {{duration}} TTFT {{duration}} {{throughput}} tok/s
+- textbox "Message the agent"
+- button "Commands":
+  - img
+- 'button "Access mode, current: Workspace Write"': Workspace Write
+- button "Select model":
+  - text: Select model
+  - img
+- button "Send message" [disabled]
+- text: 1 turns · 2 steps LLM {{duration}} · Tool call {{duration}} TTFT avg {{duration}} · {{throughput}} tok/s Cache hit 0% Input 280 tok · Output 30 tok