feat(client): add trajectory timing overview
This commit is contained in:
_Kerman
@@ -6,7 +6,7 @@
|
||||
// three always-visible nested sub-rows (bash through the sample registration,
|
||||
// read through GenericToolCard, the failing read wearing the error state),
|
||||
// the expanded program body, details-panel resolution of a sub-callId, and
|
||||
// the trajectory/waterfall tabs' sub-call cells and timing lanes.
|
||||
// the Trajectory tab's sub-call cells and timing overview.
|
||||
import { readFileSync } from 'node:fs'
|
||||
import { join } from 'node:path'
|
||||
import { act, cleanup, fireEvent, screen, waitFor, within } from '@testing-library/react'
|
||||
@@ -195,7 +195,7 @@ it('expands the code row into the program body and resolves a sub-row through th
|
||||
`)
|
||||
})
|
||||
|
||||
it('trajectory and waterfall surface the run_code sub-calls with real timing', async () => {
|
||||
it('trajectory surfaces run_code sub-calls in the ledger and timing overview', async () => {
|
||||
boot()
|
||||
await openFixtureSession()
|
||||
|
||||
@@ -219,37 +219,17 @@ it('trajectory and waterfall surface the run_code sub-calls with real timing', a
|
||||
}
|
||||
`)
|
||||
|
||||
// Waterfall: each sub-call draws a measured lane scaled into the parent
|
||||
// turn's dispatch window.
|
||||
fireEvent.click(screen.getByRole('tab', { name: 'Waterfall' }))
|
||||
await waitFor(() => {
|
||||
expect(document.querySelector('[data-subspan]')).not.toBeNull()
|
||||
}, { timeout: 10_000 })
|
||||
const lanes = [...document.querySelectorAll('[data-subspan]')]
|
||||
const timelineSubCalls = [...document.querySelectorAll('[data-timeline-span="subtool"]')]
|
||||
expect({
|
||||
lanes: lanes.map(lane => ({
|
||||
label: visibleText(lane.querySelector('[class*="subTag"]') ?? lane),
|
||||
title: lane.querySelector('[data-timing]')?.getAttribute('title'),
|
||||
timing: lane.querySelector('[data-timing]')?.getAttribute('data-timing'),
|
||||
})),
|
||||
count: timelineSubCalls.length,
|
||||
measured: timelineSubCalls.map(span => span.getAttribute('title')?.endsWith(' · 800 ms')),
|
||||
}).toMatchInlineSnapshot(`
|
||||
{
|
||||
"lanes": [
|
||||
{
|
||||
"label": "bash",
|
||||
"timing": "measured",
|
||||
"title": "bash · 0.80 s",
|
||||
},
|
||||
{
|
||||
"label": "read",
|
||||
"timing": "measured",
|
||||
"title": "read · 0.80 s",
|
||||
},
|
||||
{
|
||||
"label": "read",
|
||||
"timing": "measured",
|
||||
"title": "read · 0.80 s",
|
||||
},
|
||||
"count": 3,
|
||||
"measured": [
|
||||
true,
|
||||
true,
|
||||
true,
|
||||
],
|
||||
}
|
||||
`)
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
// Web e2e scenarios: navigation & panes — the view tabs (Trajectory /
|
||||
// Waterfall), the details column, and sidebar search, all over ONE rich
|
||||
// Web e2e scenarios: navigation & panes — the Trajectory view and timing
|
||||
// overview, the details column, and sidebar search, all over ONE rich
|
||||
// two-turn seeded fixture rendered purely from the log (the seeded-history
|
||||
// pattern: zero model calls in replay, so every surface here is the client
|
||||
// fold + host history RPC, not replay binding). The seed is recorded live
|
||||
// under the standard discipline: turn 1 produces a bash call plus two
|
||||
// parallel reads in one assistant message (tool-call density for the
|
||||
// trajectory/waterfall lanes and a details-capable bash row), turn 2 a
|
||||
// markdown-rich reply (a second turn so the waterfall has two lanes).
|
||||
// trajectory ledger/timing lanes and a details-capable bash row), turn 2 a
|
||||
// markdown-rich reply.
|
||||
import { mkdir, readFile, writeFile } from 'node:fs/promises'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { join } from 'node:path'
|
||||
@@ -24,7 +24,6 @@ import { saveFailureShot } from './support.ts'
|
||||
const SNAPSHOT_DIR = fileURLToPath(new URL('./snapshots/navigation-panes', import.meta.url))
|
||||
const SEED = join(SNAPSHOT_DIR, 'seed.jsonl')
|
||||
const TRAJECTORY_EXPECTED = join(SNAPSHOT_DIR, 'trajectory.expected.md')
|
||||
const WATERFALL_EXPECTED = join(SNAPSHOT_DIR, 'waterfall.expected.md')
|
||||
const DETAILS_EXPECTED = join(SNAPSHOT_DIR, 'details-open.expected.md')
|
||||
const MODE = webSnapshotMode()
|
||||
const SEED_ID = 'navigation-panes-web-e2e'
|
||||
@@ -40,6 +39,7 @@ describe('web e2e: navigation & panes over a rich seeded session', () => {
|
||||
let browser: Browser
|
||||
let page: Page
|
||||
let tripwire: ReturnType<typeof watchConsole>
|
||||
let slotErrors: string[]
|
||||
|
||||
beforeAll(async () => {
|
||||
scaffold = await launchWebScaffold({})
|
||||
@@ -59,6 +59,12 @@ describe('web e2e: navigation & panes over a rich seeded session', () => {
|
||||
browser = await chromium.launch()
|
||||
page = await browser.newPage({ viewport: { width: 1680, height: 1000 } })
|
||||
tripwire = watchConsole(page)
|
||||
slotErrors = []
|
||||
page.on('console', (message) => {
|
||||
if (message.type() === 'error' && /slot entry crashed/i.test(message.text())) {
|
||||
slotErrors.push(message.text())
|
||||
}
|
||||
})
|
||||
await page.goto(scaffold.baseUrl, { waitUntil: 'load' })
|
||||
await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
|
||||
}, 120_000)
|
||||
@@ -127,6 +133,16 @@ describe('web e2e: navigation & panes over a rich seeded session', () => {
|
||||
it.skipIf(MODE === 'record')('renders the trajectory ledger and opens its local record inspector', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'web-e2e-navigation-trajectory'))
|
||||
await page.getByRole('tab', { name: 'Trajectory' }).click()
|
||||
await page.waitForTimeout(100)
|
||||
expect({
|
||||
pageErrors: tripwire.pageErrors,
|
||||
slotErrors,
|
||||
warnings: tripwire.warnings,
|
||||
}).toEqual({
|
||||
pageErrors: [],
|
||||
slotErrors: [],
|
||||
warnings: [],
|
||||
})
|
||||
// Turn rules partition the ledger without restoring a separate header row.
|
||||
await expect.poll(() => page.locator('tr[data-turn-start="true"]').count(), { timeout: 15_000 }).toBe(2)
|
||||
await expect.poll(() => page.getByRole('columnheader').count(), { timeout: 10_000 }).toBe(0)
|
||||
@@ -141,22 +157,21 @@ describe('web e2e: navigation & panes over a rich seeded session', () => {
|
||||
.getByRole('button', { name: 'Close details' }).click()
|
||||
}, 60_000)
|
||||
|
||||
it.skipIf(MODE === 'record')('renders the waterfall tab with span stats and one lane per span', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'web-e2e-navigation-waterfall'))
|
||||
await page.getByRole('tab', { name: 'Waterfall' }).click()
|
||||
// The stats header rides the waterfall body. The span fold counts THREE
|
||||
// spans for this two-turn log: only assistant/steering nodes carry a turn
|
||||
// number, so the first user message lands in a turn-0 prologue span (a
|
||||
// P-I placeholder shape — pinned as-is; real spans are deferred to
|
||||
// P-III per the view's deviation ledger). Calls: bash + two reads.
|
||||
await expect.poll(() => page.getByText(/3 turns · \d+ steps · 3 tool calls/).count(), { timeout: 15_000 }).toBe(1)
|
||||
// One lane per span, tagged by turn number, prologue included.
|
||||
for (const tag of ['turn 0', 'turn 1', 'turn 2']) {
|
||||
await expect.poll(() => page.getByText(tag, { exact: true }).count(), { timeout: 10_000 }).toBe(1)
|
||||
}
|
||||
const snapshot = (await captureStableAria(page, '[class*="viewArea"]', scaffold.workspaceCwd))
|
||||
.split(SEED_ID).join('{{seededId}}')
|
||||
await compareOrRefreshGolden(WATERFALL_EXPECTED, snapshot, MODE)
|
||||
it.skipIf(MODE === 'record')('focuses the ledger by dragging an overview interval', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'web-e2e-navigation-timeline'))
|
||||
const plot = page.getByLabel('Timeline overview; drag horizontally to filter events')
|
||||
const before = await page.locator('tr[data-kind]').count()
|
||||
const box = await plot.boundingBox()
|
||||
if (box === null) throw new Error('trajectory timeline plot has no layout box')
|
||||
await page.mouse.move(box.x + box.width * 0.55, box.y + box.height / 2)
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(box.x + box.width * 0.9, box.y + box.height / 2)
|
||||
await page.mouse.up()
|
||||
await page.getByRole('button', { name: 'Clear selection' }).waitFor()
|
||||
await expect.poll(() => page.locator('tr[data-kind]').count(), { timeout: 10_000 })
|
||||
.toBeLessThan(before)
|
||||
await page.getByRole('button', { name: 'Clear selection' }).click()
|
||||
await expect.poll(() => page.locator('tr[data-kind]').count(), { timeout: 10_000 }).toBe(before)
|
||||
}, 60_000)
|
||||
|
||||
it.skipIf(MODE === 'record')('opens the details column from the bash row and closes it', async () => {
|
||||
@@ -186,9 +201,10 @@ describe('web e2e: navigation & panes over a rich seeded session', () => {
|
||||
|
||||
it.skipIf(MODE === 'record')('issued zero model calls and stayed clean', async () => {
|
||||
expect(tripwire.pageErrors).toEqual([])
|
||||
expect(slotErrors).toEqual([])
|
||||
expect(tripwire.warnings).toEqual([])
|
||||
await assertFixtureInventory(SNAPSHOT_DIR, [
|
||||
'seed.jsonl', 'trajectory.expected.md', 'waterfall.expected.md', 'details-open.expected.md',
|
||||
'seed.jsonl', 'trajectory.expected.md', 'details-open.expected.md',
|
||||
])
|
||||
})
|
||||
})
|
||||
|
||||
@@ -438,12 +438,12 @@ describe.skipIf(!process.env.DEEPSEEK_API_KEY || notReady.length > 0)('web smoke
|
||||
await screen(page, '04-round-complete')
|
||||
}, 150_000)
|
||||
|
||||
it('4 view tabs: Chat / Trajectory / Waterfall all switch', async () => {
|
||||
it('view tabs: Chat and Trajectory switch', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'w5-tabs'))
|
||||
await page.locator('button', { hasText: /Trajectory/i }).first().click()
|
||||
await screen(page, '05-trajectory-tab')
|
||||
await page.locator('button', { hasText: /Waterfall/i }).first().click()
|
||||
await screen(page, '06-waterfall-tab')
|
||||
await page.getByLabel('Trajectory timeline').waitFor()
|
||||
await expect.poll(() => page.getByRole('tab', { name: 'Waterfall' }).count()).toBe(0)
|
||||
await page.locator('button', { hasText: /^Chat$/i }).first().click()
|
||||
await screen(page, '07-back-to-chat')
|
||||
})
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: "Using ONE run_code program: run bash `echo CODE_ROUND_OK`, then read the file missing.txt catching its error in the program. Return an object with both outcomes. Then reply DONE and stop."
|
||||
- 'button "Think The user wants me to write a single `run_code` program that:"':
|
||||
- img
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: "Use only Cordis tools. First call cordis_inspect with what \"temporary\". Then call cordis_mount with this exact code: \"return { name: \\\"snapshot-noop\\\", apply(ctx) {} }\". Read its returned id and call cordis_unmount with that exact id. After all three calls succeed, reply exactly CORDIS_UI_DONE and stop."
|
||||
- button "复制":
|
||||
- img
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: "Use the bash tool to run exactly: echo WEB_E2E_OK. Then reply with the single word DONE and stop."
|
||||
- button "Think The user wants me to run a simple bash command and reply with \"DONE\".":
|
||||
- img
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: Reply with the single word LIGHTHOUSE and stop.
|
||||
- button "Think The user wants me to reply with a single word. Let me comply.":
|
||||
- img
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: Reply with a one-sentence description of event sourcing, then stop.
|
||||
- paragraph: partial
|
||||
- text: 已停止 0 tokens · 1 turns · 1 steps
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: Reply with a one-sentence description of event sourcing, then stop.
|
||||
- textbox "Message the agent"
|
||||
- button "Add attachment":
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: Reply with a one-sentence description of event sourcing, then stop.
|
||||
- button "Think The user is asking for a one-sentence description of event sourcing. This is a straightforward knowledge question that doesn't require any skill loading or tool calls.":
|
||||
- img
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
- text: Trajectory
|
||||
- button "Collapse calls"
|
||||
- button "Collapse turns"
|
||||
- region "Trajectory timeline": Overview 9 timed events
|
||||
- table:
|
||||
- rowgroup:
|
||||
- row "SYSTEM, Initial System Prompt":
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
- text: 3 turns · 3 steps · 3 tool calls turn 0 turn 1 turn 2
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: "Use the ask_user_question tool to ask me exactly one question with id \"color\", question \"Which color do you prefer?\", header \"Pick one\", and two options: label \"Blue\" with description \"A cool recessive hue that reads as calm and trustworthy in long reading sessions and dense dashboards.\", and label \"Green\" with description \"A restful mid-spectrum hue with the highest perceived brightness, easiest on the eye over long sessions.\" After I answer, reply with the single word DONE and stop."
|
||||
- button "复制":
|
||||
- img
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: "Use the read tool twice in one assistant message: read a.txt and b.txt. Then reply with the single word DONE and stop."
|
||||
- button "Think The user wants me to read a.txt and b.txt, then reply with \"DONE\". Let me do both reads in parallel.":
|
||||
- img
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: Use the ask_user_question tool to ask me exactly one question with id "checkpoint", question "Ready to continue?", header "Checkpoint", and options labeled "Yes" and "No". After I answer, reply with one short sentence acknowledging my answer and stop.
|
||||
- button "Think The user wants me to use the ask_user_question tool to ask them a specific question with the given parameters. Let me do exactly that.":
|
||||
- img
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
- tablist:
|
||||
- tab "Chat" [selected]
|
||||
- tab "Trajectory"
|
||||
- tab "Waterfall"
|
||||
- text: Use the ask_user_question tool to ask me exactly one question with id "checkpoint", question "Ready to continue?", header "Checkpoint", and options labeled "Yes" and "No". After I answer, reply with one short sentence acknowledging my answer and stop.
|
||||
- button "Think The user wants me to use the ask_user_question tool to ask them a specific question with the given parameters. Let me do exactly that.":
|
||||
- img
|
||||
|
||||
Reference in New Issue
Block a user