[1/4] Replace shared observability component styles with Tailwind

[mitul-s]

Description

• Replace static inline styles in shared sidebar, stream, and reusable UI components with Tailwind utilities.
• Map Geist design-system colors to existing semantic theme utilities.
• Keep computed animation geometry and consumer-provided style overrides inline.

Stack

1. This PR — shared UI components
2. Trace viewer
3. Workflow web/graph
4. Workbench code block

Merge in order from 1 to 4.

How did you test your changes?

• pnpm exec turbo build --filter=@workflow/web-shared...
• pnpm --filter @workflow/web-shared exec vitest run --exclude test/zstd-decoder.test.ts — 157 tests passed
• Biome check on all 11 changed files — no errors

The excluded zstd tests require node:zlib.zstdCompressSync, which is unavailable in the local Node 22 runtime.

PR Checklist - Required to merge

• 📦 pnpm changeset was run to create a changelog for this PR
• 🔒 DCO sign-off passes (git commit --signoff)
• 📝 Ping @vercel/workflow in a comment once the PR is ready, and the above checklist is complete

  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
example-nextjs-workflow-turbopack	Ready	Preview	Aug 3, 2026 8:54pm
example-nextjs-workflow-webpack	Ready	Preview	Aug 3, 2026 8:54pm
example-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-astro-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-express-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-fastify-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-hono-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-nestjs-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-nitro-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-nuxt-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-sveltekit-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-tanstack-start-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workbench-vite-workflow	Ready	Preview	Aug 3, 2026 8:54pm
workflow-docs	Ready	Preview, v0	Aug 3, 2026 8:54pm
workflow-swc-playground	Ready	Preview	Aug 3, 2026 8:54pm
workflow-tarballs	Ready	Preview	Aug 3, 2026 8:54pm
workflow-web	Ready	Preview	Aug 3, 2026 8:54pm

[changeset-bot]

🦋 Changeset detected

Latest commit: c3d122e

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	Patch
@workflow/web	Patch
@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

[github-actions]

📊 Workflow Benchmarks

commit e9f8abf · Mon, 03 Aug 2026 19:15:51 GMT · run logs

Backend: vercel · app: nextjs-turbopack

Metric	Scenario	Best (ms)	P75 (ms)	P90 (ms)	P99 (ms)	Samples
TTFS	step	1187 (+351%) 🔻	1457 🔴 (+34%) 🔻	1491 🔴 (+34%) 🔻	1604 🔴 (+21%) 🔻	30
TTFS	stream	1151 (+423%) 🔻	1263 🔴 (+23%) 🔻	1342 🔴 (+29%) 🔻	1415 🔴 (+30%) 🔻	30
TTFS	hook + stream	1472 (+275%) 🔻	1712 🔴 (+36%) 🔻	1774 🔴 (+36%) 🔻	2119 🔴 (+34%) 🔻	30
STSO	1020 steps (inline)	210 (+23%) 🔻	502 (±0%)	556 (+0.7%)	795 (+7.1%)	1016
STSO	1020 steps (queue-hop)	2276 (+78%) 🔻	3445 (+31%) 🔻	3445 (+31%) 🔻	3445 (+31%) 🔻	3
WO	1020 steps	442990 (+6.2%)	442990 (+6.2%)	442990 (+6.2%)	442990 (+6.2%)	1
SL	stream latency	131 (+42%) 🔻	190 🔴 (+29%) 🔻	242 🔴 (+41%) 🔻	3846 🔴 (+818%) 🔻	30
SO	stream overhead (text)	149 (+27%) 🔻	221 (-11%)	276 (-16%) 💚	681 (-98%) 💚	30
SO	stream overhead (structured)	145 (+28%) 🔻	213 (+3.9%)	223 (-18%) 💚	303 (-24%) 💚	30

📈 STSO distribution vs main (inline / queue-hop histograms)

1020 steps (inline)

Cumulative STSO time: main 409957ms → this run 432357ms (Δ +22400ms, +5%)

  150-200 ms  ┃█                        main  14  this   0   -14
  200-250 ms  ███████┃██████            main  92  this  54   -38
  250-300 ms  ███████████████┃████      main 136  this 104   -32
  300-350 ms  ██████████████████████┃   main 151  this 154    +3
  350-400 ms  █████████████████████░░┃  main 143  this 161   +18
  400-450 ms  ██████████████████░░┃     main 118  this 138   +20
  450-500 ms  ███████████████░░░░░┃     main 101  this 141   +40
  500-550 ms  ██████████████████████┃   main 150  this 154    +4
  550-600 ms  ██████┃█                  main  57  this  49    -8
  600-650 ms  ███┃                      main  23  this  25    +2
  650-700 ms  █┃                        main  13  this  15    +2
  700-750 ms  ┃                         main   8  this   7    -1
  750-800 ms  ┃                         main   4  this   4    +0
  800-850 ms  ┃                         main   3  this   4    +1
  850-900 ms  ┃                         main   2  this   1    -1
 950-1000 ms  ┃                         main   0  this   2    +2
1100-1150 ms  ┃                         main   0  this   1    +1
1250-1300 ms  ┃                         main   1  this   1    +0
4050-4100 ms  ┃                         main   0  this   1    +1

1020 steps (queue-hop)

Cumulative STSO time: main 6303ms → this run 9140ms (Δ +2837ms, +45%)

1000-1500 ms  ┃███████████              main 1  this 0  -1
2000-2500 ms  ███████████┃              main 1  this 1  +0
2500-3000 ms  ┃███████████              main 1  this 0  -1
3000-3500 ms  ░░░░░░░░░░░░░░░░░░░░░░░┃  main 0  this 2  +2

ℹ️ Metric definitions & methodology

_{The collapsed STSO distribution section above buckets every step gap of the sequential-steps run (not a sampled window), split by whether the step ending the gap ran inline — in the same warm process as the step before it, so the gap is pure framework overhead — or after a queue-hop — the first step of a fresh process, which pays queue dispatch, client reinit and event-log replay. Bars overlay the two runs: █ is main, ┃ marks where this run lands, ░ bridges the gap when this run has more samples in a bucket.}

_{Best/P75/P90/P99 deltas compare against the most recent benchmark run on main at the time of this run. 🔻 flags a delta worse than +15%, 💚 one better than −15%.}

_{Metrics — TTFS: time to first step body (in-deployment start() → first step body, deployment clocks) · STSO: step-to-step overhead (gap between consecutive step bodies) · WO: workflow overhead (whole-run time outside step bodies, in-deployment anchored) · SL: stream latency (in-deployment write → read propagation, readAt - writtenAt) · SO: stream overhead (end-to-end write+consume time beyond the modelled generation window)}

_{Scenarios — step: one trivial no-op step, no stream; no hooks, so the run stays in turbo mode (in-process fast path) · stream: one streaming step; no hooks, so the run stays in turbo mode (in-process fast path) · hook + stream: registers a hook before one step, which exits turbo mode (dispatch path) · 1020 steps: 1020 trivial sequential steps; STSO is measured between consecutive steps in the given step ranges, and WO is the whole-run overhead outside step bodies · stream latency: parallel reader/writer steps on a dedicated stream; SL is the in-deployment write->read propagation (readAt - writtenAt) · stream overhead (text): writer streams 300 variable-length text token deltas paced at 100/s for 3s (a haiku-size LLM's token throughput) while a parallel reader drains the whole stream; SO is the end-to-end write+consume time beyond the 3s generation window (overhead/backpressure) · stream overhead (structured): same workload as stream overhead (text), but each delta is an AI-SDK-style structured object ({ type: 'text-delta', id, text }) instead of a raw string, so the SO gap vs the text scenario is the added serialization cost}

_{🔴 marks a percentile over its target (within target is left unmarked). Targets (p75/p90/p99, ms) — TTFS 200/300/600 · SL 50/60/125 · SO 250/500/1000}

_{All metrics are measured from deployment-side timestamps only. Runs are triggered by an in-deployment route that stamps the anchor (clientStart) right before start(), so the CI runner’s request and its path through api.vercel.com sit outside every measured window. TTFS = in-deployment start() → first step body (turbo uses the in-process fast path, non-turbo the dispatch path), and includes the VQS dispatch hop plus any /flow cold start. STSO/WO are measured between step bodies on the deployment. SL is measured inside the workflow (parallel reader/writer steps), so it no longer includes the api.vercel.com read path.}

_{Cold starts are kept in the numbers on purpose — they are part of real bursty-workload latency. The workbench deployment cold-starts the /flow invocation for a large fraction of runs, inflating P75+; the Best column shows the fastest (warm-start) sample for comparison.}

[github-actions]

🧪 E2E Test Results

❌ Some tests failed

❌ Failed E2E Tests

▲ Vercel Production (2 failed)

nextjs-turbopack (2 failed):

• AbortController abortHookOrderingWorkflow [listener-first-hook-first]: addEventListener → hook.then → resumeHook → abort()
• setAttributes setAttributesInsideStepWorkflow: step-body calls append attributed native events

💻 Local Development (1 failed)

nextjs-webpack-canary (1 failed):

• AbortController abortSurvivesReplayWorkflow: controller state consistent across replay

E2E Test Summary

Summary

	Passed	Failed	Skipped	Total
❌ ▲ Vercel Production	1453	2	239	1694
❌ 💻 Local Development	1466	1	227	1694
✅ 📦 Local Production	1621	0	227	1848
✅ 🐘 Local Postgres	1621	0	227	1848
✅ 🪟 Windows	154	0	0	154
✅ 📋 Other	1020	0	212	1232
✅ vercel-multi-region	27	0	0	27
Total	7362	3	1132	8497

Details by Category

❌ ▲ Vercel Production

App	Passed	Failed	Skipped
✅ astro	126	0	28
✅ example	126	0	28
✅ express	126	0	28
✅ fastify	126	0	28
✅ hono	126	0	28
❌ nextjs-turbopack	149	2	3
✅ nextjs-webpack	151	0	3
✅ nitro	126	0	28
✅ nuxt	126	0	28
✅ sveltekit	145	0	9
✅ vite	126	0	28

❌ 💻 Local Development

App	Passed	Failed	Skipped
✅ astro-stable	128	0	26
✅ express-stable	128	0	26
✅ fastify-stable	128	0	26
✅ hono-stable	128	0	26
✅ nextjs-turbopack-canary	135	0	19
✅ nextjs-turbopack-stable	154	0	0
❌ nextjs-webpack-canary	134	1	19
✅ nitro-stable	128	0	26
✅ nuxt-stable	128	0	26
✅ sveltekit-stable	147	0	7
✅ vite-stable	128	0	26

✅ 📦 Local Production

App	Passed	Failed	Skipped
✅ astro-stable	128	0	26
✅ express-stable	128	0	26
✅ fastify-stable	128	0	26
✅ hono-stable	128	0	26
✅ nextjs-turbopack-canary	135	0	19
✅ nextjs-turbopack-stable	154	0	0
✅ nextjs-webpack-canary	135	0	19
✅ nextjs-webpack-stable	154	0	0
✅ nitro-stable	128	0	26
✅ nuxt-stable	128	0	26
✅ sveltekit-stable	147	0	7
✅ vite-stable	128	0	26

✅ 🐘 Local Postgres

App	Passed	Failed	Skipped
✅ astro-stable	128	0	26
✅ express-stable	128	0	26
✅ fastify-stable	128	0	26
✅ hono-stable	128	0	26
✅ nextjs-turbopack-canary	135	0	19
✅ nextjs-turbopack-stable	154	0	0
✅ nextjs-webpack-canary	135	0	19
✅ nextjs-webpack-stable	154	0	0
✅ nitro-stable	128	0	26
✅ nuxt-stable	128	0	26
✅ sveltekit-stable	147	0	7
✅ vite-stable	128	0	26

✅ 🪟 Windows

App	Passed	Failed	Skipped
✅ nextjs-turbopack	154	0	0

✅ 📋 Other

App	Passed	Failed	Skipped
✅ e2e-local-dev-nest-stable	128	0	26
✅ e2e-local-dev-tanstack-start-	128	0	26
✅ e2e-local-postgres-nest-stable	128	0	26
✅ e2e-local-postgres-tanstack-start-	128	0	26
✅ e2e-local-prod-nest-stable	128	0	26
✅ e2e-local-prod-tanstack-start-	128	0	26
✅ e2e-vercel-prod-nest	126	0	28
✅ e2e-vercel-prod-tanstack-start	126	0	28

✅ vercel-multi-region

App	Passed	Failed	Skipped
✅ nextjs-turbopack	27	0	0

---

📋 View full workflow run

[mitul-s]

@copilot resolve the merge conflicts in this pull request
we deleted a bunch of files on main, and dont need them here either.

[Copilot]

@copilot resolve the merge conflicts in this pull request
we deleted a bunch of files on main, and dont need them here either.

Done — merged main into this branch (commit 26cb8d55). Files deleted on main that conflicted with our changes (trace-viewer/components/map.tsx, trace-viewer/components/ui.tsx, workflow-trace-view.tsx) have been removed. The remaining content conflicts were resolved by taking main's versions of those files.