feat: improve-replay-ui

[tristantr]

Improve replay ui for scripts
Improve replay ui for flows
Improve timeline ui

[claude]

Claude finished @tristantr's task in 2m 8s —— View job

---

PR Review: Improve Replay UI

• Gather context and read changed files
• Review code changes
• Post review feedback

---

Overall

Clean set of UI improvements across recording replay for both scripts and flows, plus a modernized timeline. The changes are well-scoped and focused. A few observations below.

Code Quality

FlowTimeline.svelte — The timeline rework is a nice improvement. The old grid-based layout (grid-cols-12, grid-cols-6) is replaced with cleaner flexbox, the legend is more compact, and the bars got slightly taller (h-4 → h-5) with rounded corners (rounded-sm → rounded-md). The border-b was removed from the outer divide-y container — this looks intentional since each row already has dividers.

One note: the spacerClass prop added to TimelineBar is only used with one value ("bg-gray-100 dark:bg-gray-800/50 rounded-l-md"). This is fine for now but could be a simple boolean if it's always the same styling.

ScriptRecordingReplay.svelte — Good improvement showing result and logs side-by-side during replay instead of only after completion. The new "parameters" tab with split code + SchemaForm view is a nice addition. A few things to note:

• Line 144: The Tabs selected={...} expression is quite long. It's readable but could be extracted to a derived variable for clarity.
• Line 160: The style="height: calc(100vh - 250px);" is a hardcoded viewport calculation. This works but may not account for all header/toolbar configurations. Same on line 234 with calc(100vh - 200px).

FlowRecordingReplay.svelte — The rebaseTimestamps fix at lines 93-97 is a meaningful bug fix: flow_status timestamps on initial_job and nested event jobs were not being rebased, which would cause timeline bars to show incorrect durations during replay. Good catch.

FlowStatusViewerInner.svelte — The hideFlowResult prop addition is clean. The text style changes (lines 2105, 2121) making placeholder text smaller and italic are consistent with the rest of the PR.

FlowGraphViewer.svelte / FlowGraphViewerStep.svelte / FlowViewer.svelte — The hideDefaultInputs, noInput, and showStepHint props thread through cleanly. The logic at line 53 (noSide || (hideDefaultInputs && stepDetail == undefined)) correctly expands the graph to full width when there's nothing to show in the side panel.

FlowGraphV2.svelte — Just an extra blank line added (line 838). Harmless but unnecessary.

Potential Issues

1. FlowGraphViewerStep.svelte:314 — Uses legacy on:click syntax. Pre-existing, not introduced by this PR.

2. FlowRecordingReplay.svelte:195,205 — Uses legacy on:click syntax on Button components. Also pre-existing.

3. FlowTimeline.svelte:33 — buildSubflowKey is declared in the Props interface but never destructured or used. Pre-existing issue, not introduced here.

No Security or Performance Concerns

The changes are purely UI/presentation. No API calls, data mutations, or security-sensitive operations were added.

---

Testing Instructions

Navigate to the Recording Replay feature. For scripts, open any script recording — verify the new tabbed view with "Code" (split code + parameters form when schema exists), "Args", and "Schema" tabs. Click "Play" and confirm the side-by-side Result/Logs layout appears during replay (not just after completion). For flows, open a flow recording and verify the graph view takes full width with no side panel when no step is selected, and that clicking a step shows its details. Click "Play" and confirm the timeline tab shows the modernized layout with smaller legend icons, rounded bars, and correct durations. Check that the flow result is hidden until replay completes.

[cloudflare-workers-and-pages]

Deploying windmill with    Cloudflare Pages

Latest commit:	d685d64
Status:	✅  Deploy successful!
Preview URL:	https://2092e1e0.windmill.pages.dev
Branch Preview URL:	https://tl-improve-rec-ui.windmill.pages.dev

View logs