feat(ui-trajectory): enrich timeline timing interactions

apps/web/tests/navigation-panes.e2e.ts

@@ -162,6 +162,17 @@ describe('web e2e: navigation & panes over a rich seeded session', () => {
     await page.evaluate(() => { document.body.removeAttribute('data-ds-dark-theme') })
     await page.getByRole('tab', { name: 'Result' }).click()
     await expect.poll(() => page.getByText('NAVIGATION_OK', { exact: false }).count(), { timeout: 10_000 }).toBeGreaterThanOrEqual(1)
+    const assistantSpan = page.locator('[data-timeline-span="message"][data-assistant-timing="true"]').first()
+    await assistantSpan.hover()
+    const timingTooltip = page.getByRole('tooltip')
+    await timingTooltip.waitFor({ timeout: 5_000 })
+    await expect.poll(() => timingTooltip.textContent(), { timeout: 5_000 }).toMatch(/TTFT .* Decoding/)
+    const assistantTimingStyle = await assistantSpan.evaluate(node => ({
+      background: getComputedStyle(node).backgroundImage,
+      ttft: getComputedStyle(node).getPropertyValue('--trajectory-assistant-ttft'),
+    }))
+    expect(assistantTimingStyle.background).toContain('linear-gradient')
+    expect(assistantTimingStyle.ttft).toMatch(/%$/)
     const snapshot = (await captureStableAria(page, '[class*="viewArea"]', scaffold.workspaceCwd))
       .split(SEED_ID).join('{{seededId}}')
     await compareOrRefreshGolden(TRAJECTORY_EXPECTED, snapshot, MODE)

apps/web/tests/snapshots/navigation-panes/trajectory.expected.md

@@ -4,7 +4,8 @@
   - button "Collapse calls": Calls
   - img
   - searchbox "Search trajectory"
-- region "Trajectory timeline"
+- region "Trajectory timeline":
+  - tooltip "ASSISTANT {{clock}}:40.549 AM → {{clock}}:42.091 AM Total 1.5 s · TTFT 368 ms · Decoding 1.2 s"
 - table:
   - rowgroup:
     - row "SYSTEM, Initial System Prompt":