feat(web,web-shared): redesign Streams view on the run detail page - #3159
Draft
mitul-s wants to merge 12 commits into
Draft
feat(web,web-shared): redesign Streams view on the run detail page#3159mitul-s wants to merge 12 commits into
mitul-s wants to merge 12 commits into
Conversation
…am identity Decode opaque stream IDs (strm_<ulid>_user[_<base64url ns>], system abort streams) into human-meaningful labels via a new describeStreamId helper, and surface the identity in a unified viewer header with live status, chunk count, and view controls. Add a Text view that reassembles string chunks into a readable transcript (the default for text-oriented streams, e.g. AI token streaming), keeping non-text chunks inspectable as quiet JSON blocks. The raw chunk ledger is restyled from boxed cards into hairline-separated rows with an aligned index gutter. Follow-scroll now preserves the reader's position: the tail is followed only while at the bottom, and a jump-to-latest action appears when new chunks arrive while scrolled up.
…rst stream The sidebar now shows a human-meaningful label for each stream (decoded namespace, Default stream, Abort signal) with the full stream ID beneath it, fills the available panel height instead of a hard-coded max-height, and marks the selected row with aria-current. Opening the Streams tab now selects the first stream when the URL has no streamId, so the first viewport shows stream data instead of an empty placeholder.
🦋 Changeset detectedLatest commit: 287911e The changes in this PR will be included in the next version bump. This PR includes changesets to release 16 packages
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 |
Contributor
The trace sidebar and events list offer JSON copying via CopyButton / CopyableDataBlock, but the Streams view never grew the same affordance. Each chunk row in the ledger now reveals a copy action on hover, and the Text view's non-text JSON blocks carry a copy button in their header, both reusing the existing CopyButton primitive. Co-authored-by: Cursor <cursoragent@cursor.com>
…ze as label The streams sidebar rendered the decoded label at 14px but the stream ID at 11px; both now render at 14px. The ID uses the trace viewer's MiddleTruncate (selecting truncated text copies the full ID) with a hover-revealed CopyButton that copies the untruncated ID, and the viewer header ID gets the same treatment. CopyButton and MiddleTruncate are now exported from @workflow/web-shared. Sidebar rows move from <button> to div[role=option][tabIndex] so the nested copy button stays valid HTML. Co-authored-by: Cursor <cursoragent@cursor.com>
The label + stream ID + copy action duplicated what the sidebar already shows for the active stream. The header bar now keeps only the live indicator, chunk count, and view toggle, right-aligned. Co-authored-by: Cursor <cursoragent@cursor.com>
… chrome The sidebar header reads simply 'Streams' and the viewer header keeps only the live indicator and view toggle. Co-authored-by: Cursor <cursoragent@cursor.com>
The viewer content now runs edge to edge; the live indicator and the chunks/text view toggle float as an opaque cluster at the top-right, following the same overlay pattern as the jump-to-latest action. Co-authored-by: Cursor <cursoragent@cursor.com>
Reverts the floating-control experiment: the live indicator and view toggle are back in the h-10 hairline header bar, which reads better anchored than overlaid on the content. Co-authored-by: Cursor <cursoragent@cursor.com>
…grid The sidebar moves from 256px to 340px, the trace event list pane's default width. Header bars, sidebar rows, and the viewer content now use 24px (px-6) horizontal padding so the sidebar header aligns with the tabs above and the view toggle's right edge aligns with the run card's actions. Co-authored-by: Cursor <cursoragent@cursor.com>
The numbered gutter read as noise on the ledger; rows are now content only, and non-text JSON blocks in the Text view are labeled without their index. Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the Streams tab on the workflow run detail page so the reader can find the right stream, read what was written to it, and tell whether it is still producing data.
Stream identity (
@workflow/web-shared, newdescribeStreamIdhelper)strm_<ulid>_user→ "Default stream",strm_<ulid>_user_<base64url(ns)>→ the decoded namespace,strm_<id>_system_abort→ "Abort signal". Unrecognized formats pass through verbatim.Stream viewer (
@workflow/web-shared)Run detail page (
@workflow/web)max-h-[calc(100vh-400px)]), and the selected row getsaria-current.streamIdURL param, so the first viewport shows data instead of an empty placeholder.All styling stays on the existing Geist
--ds-*tokens, works in light and dark themes, and the pulse animation respectsprefers-reduced-motion.Test plan
packages/web-shared:pnpm build,pnpm test(newstream-id.test.tscovers default/named/system/unknown/undecodable IDs; the twozstd-decoderfailures are pre-existing on Node 22 —node:zliblackszstdCompressSync).packages/web:pnpm build,pnpm test(94 passing).run-detail-view.tsxunchanged).@workflow/web+world-local): screenshots in light and dark themes for default/named/system/live streams, narrow-viewport reflow, and scripted follow-scroll checks (pinned-at-bottom follows, scrolled-up prompts "New chunks", jump-to-latest works, initial load stays at reading position).Changesets
Two changesets included (
minor):@workflow/web-shared(viewer redesign) and@workflow/web(sidebar labels + auto-select).