Skip to content

Improve step delta viewer on the timeline #2976

Closed
mitul-s wants to merge 5 commits into
mainfrom
ms/adjust-helper-position
Closed

Improve step delta viewer on the timeline #2976
mitul-s wants to merge 5 commits into
mainfrom
ms/adjust-helper-position

Conversation

@mitul-s

@mitul-s mitul-s commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Alt+hover span measurement

CleanShot.2026-07-17.at.11.26.19.mp4

Figma-style measurement in the new trace viewer: with a span selected, hold Alt and hover any other row to see the time delta between the two spans, drawn as a single measurement line.

How it works

  • Selection + Alt + hover → one measurement between the selected (anchor) span and the hovered row's span: a stub + vertical guide off the anchor bar's measured edge, elbowing into a 1px line that ends at the hovered span's start, with a duration chip.
  • Delta rule: disjoint spans → gap (anchor end → later start, same semantic as the existing sibling gaps); overlapping/contained spans → start-to-start offset ("how far into the run did this step start").
  • No selection → the existing all-consecutive-gaps overlay, restyled to the same measurement-line design (the old I-beam + pill DeltaIndicator is deleted; both modes render through one DeltaMeasureLine component).
  • Edges clamped by the viewport keep the true duration in the label; if the hovered span is fully off-screen, the line stops short of the row's edge arrow.

Implementation

  • New pure computeSpanDelta() in utils.ts next to computeSpanGaps, unit-tested (disjoint both directions, overlap, containment, identical starts, zero-duration, clamping, off-screen).
  • Hovered row derived from clientY in the existing timeline mousemove handler (now a single TimelineHover {fraction, rowIndex} state) — no per-row listeners, TimelineBar memoization untouched.
  • Overlay renders in the existing absolute, pointer-events-none layer, so it works across virtualized rows.

@changeset-bot

changeset-bot Bot commented Jul 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d982416

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@workflow/web-shared Minor
@workflow/web Minor
@workflow/cli Patch
@workflow/nitro Patch
workflow Patch
@workflow/world-testing Patch
@workflow/nuxt Patch
@workflow/core Patch
@workflow/builders Patch
@workflow/next Patch
@workflow/vitest Patch
@workflow/astro Patch
@workflow/nest Patch
@workflow/rollup Patch
@workflow/sveltekit Patch
@workflow/vite Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

@github-actions

github-actions Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

📊 Workflow Benchmarks

commit d982416 · Fri, 17 Jul 2026 15:52:36 GMT · run logs

Backend: vercel · app: nextjs-turbopack

Metric Scenario Avg (ms) P75 (ms) P90 (ms) P99 (ms) Samples
TTFS stream 1473 (+36%) 1798 🔴 1869 🔴 1934 🔴 30
TTFS hook + stream 1746 (+32%) 2040 🔴 2097 🔴 2225 🔴 30
STSO 1020 steps (1-20) 264 (-5.2%) 298 🔴 403 🔴 420 🔴 19
STSO 1020 steps (101-120) 422 (+11%) 426 🔴 524 🔴 664 🔴 19
STSO 1020 steps (1001-1020) 925 (-24%) 983 🔴 1027 🔴 1059 🔴 19
WO stream 1473 (+36%) 1798 1869 1934 30
WO hook + stream 1746 (+32%) 2040 2097 2225 30
SL stream 3699 (+238%) 5952 🔴 6022 🔴 6260 🔴 30
SL hook + stream 4670 (+171%) 5880 🔴 5956 🔴 6075 🔴 30

Avg deltas compare against the most recent benchmark run on main at the time of this run.

Metrics — TTFS: time to first step body execution · STSO: step-to-step overhead (gap between consecutive step bodies) · WO: workflow overhead (time outside step bodies, client start → last step body exit) · SL: stream latency (first chunk write → visible to the reader)

Scenarios — stream: one step that streams chunks back to the client; no hooks, so the run stays in turbo mode · hook + stream: registers a hook before the same streaming step, which exits turbo mode · 1020 steps: 1020 trivial sequential steps; STSO is measured between consecutive steps in the given step ranges

🟢/🔴 mark percentiles within/above target. Targets (p75/p90/p99, ms) — TTFS 200/300/600 · SL 50/60/125 · STSO (1-20) 20/30/60 · STSO (101-120) 30/45/90 · STSO (1001-1020) 40/60/120

TTFS/WO compare client vs deployment clocks and SL compares the step runner’s clock vs the client’s (NTP-synced in CI). WO ends at the last step body exit, the closest observable proxy for the final step-completion request.

@github-actions

github-actions Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

🧪 E2E Test Results

All tests passed

Summary

Passed Failed Skipped Total
✅ ▲ Vercel Production 1453 0 230 1683
✅ 💻 Local Development 1617 0 219 1836
✅ 📦 Local Production 1617 0 219 1836
✅ 🐘 Local Postgres 1617 0 219 1836
✅ 🪟 Windows 153 0 0 153
✅ 📋 Other 894 0 177 1071
✅ vercel-multi-region 27 0 0 27
Total 7378 0 1064 8442

Details by Category

✅ ▲ Vercel Production
App Passed Failed Skipped
✅ astro 126 0 27
✅ example 126 0 27
✅ express 126 0 27
✅ fastify 126 0 27
✅ hono 126 0 27
✅ nextjs-turbopack 150 0 3
✅ nextjs-webpack 150 0 3
✅ nitro 126 0 27
✅ nuxt 126 0 27
✅ sveltekit 145 0 8
✅ vite 126 0 27
✅ 💻 Local Development
App Passed Failed Skipped
✅ astro-stable 128 0 25
✅ express-stable 128 0 25
✅ fastify-stable 128 0 25
✅ hono-stable 128 0 25
✅ nextjs-turbopack-canary 134 0 19
✅ nextjs-turbopack-stable 153 0 0
✅ nextjs-webpack-canary 134 0 19
✅ nextjs-webpack-stable 153 0 0
✅ nitro-stable 128 0 25
✅ nuxt-stable 128 0 25
✅ sveltekit-stable 147 0 6
✅ vite-stable 128 0 25
✅ 📦 Local Production
App Passed Failed Skipped
✅ astro-stable 128 0 25
✅ express-stable 128 0 25
✅ fastify-stable 128 0 25
✅ hono-stable 128 0 25
✅ nextjs-turbopack-canary 134 0 19
✅ nextjs-turbopack-stable 153 0 0
✅ nextjs-webpack-canary 134 0 19
✅ nextjs-webpack-stable 153 0 0
✅ nitro-stable 128 0 25
✅ nuxt-stable 128 0 25
✅ sveltekit-stable 147 0 6
✅ vite-stable 128 0 25
✅ 🐘 Local Postgres
App Passed Failed Skipped
✅ astro-stable 128 0 25
✅ express-stable 128 0 25
✅ fastify-stable 128 0 25
✅ hono-stable 128 0 25
✅ nextjs-turbopack-canary 134 0 19
✅ nextjs-turbopack-stable 153 0 0
✅ nextjs-webpack-canary 134 0 19
✅ nextjs-webpack-stable 153 0 0
✅ nitro-stable 128 0 25
✅ nuxt-stable 128 0 25
✅ sveltekit-stable 147 0 6
✅ vite-stable 128 0 25
✅ 🪟 Windows
App Passed Failed Skipped
✅ nextjs-turbopack 153 0 0
✅ 📋 Other
App Passed Failed Skipped
✅ e2e-local-dev-nest-stable 128 0 25
✅ e2e-local-dev-tanstack-start- 128 0 25
✅ e2e-local-postgres-nest-stable 128 0 25
✅ e2e-local-postgres-tanstack-start- 128 0 25
✅ e2e-local-prod-nest-stable 128 0 25
✅ e2e-local-prod-tanstack-start- 128 0 25
✅ e2e-vercel-prod-tanstack-start 126 0 27
✅ vercel-multi-region
App Passed Failed Skipped
✅ nextjs-turbopack 27 0 0

📋 View full workflow run

@mitul-s

mitul-s commented Jul 17, 2026

Copy link
Copy Markdown
Contributor Author

Superseded by #2985 — same change, moved to a clean branch off main (this branch carried stale pre-squash commits from #2968).

@mitul-s mitul-s closed this Jul 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant