feat: improve-replay-ui

frontend/package.json

@@ -295,6 +295,10 @@
 			"svelte": "./package/components/recording/ScriptRecordingReplay.svelte",
 			"default": "./package/components/recording/ScriptRecordingReplay.svelte"
 		},
+		"./components/recording/types": {
+			"types": "./package/components/recording/types.d.ts",
+			"default": "./package/components/recording/types.js"
+		},
 		"./components/FlowWrapper.svelte": {
 			"types": "./package/components/FlowWrapper.svelte.d.ts",
 			"svelte": "./package/components/FlowWrapper.svelte",
@@ -500,6 +504,9 @@
 			"components/ScriptRecordingReplay.svelte": [
 				"./package/components/recording/ScriptRecordingReplay.svelte.d.ts"
 			],
+			"components/recording/types": [
+				"./package/components/recording/types.d.ts"
+			],
 			"components/FlowBuilder.svelte": [
 				"./package/components/FlowBuilder.svelte.d.ts"
 			],

frontend/src/lib/components/FlowGraphViewer.svelte

@@ -26,6 +26,7 @@
 		workspace?: string | undefined
 		minHeight?: number
 		noBorder?: boolean
+		hideDefaultInputs?: boolean
 	}
 
 	let {
@@ -38,7 +39,8 @@
 		stepDetail = $bindable(undefined),
 		workspace = $workspaceStore,
 		minHeight = 400,
-		noBorder = false
+		noBorder = false,
+		hideDefaultInputs = false
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -47,7 +49,9 @@
 <div class="grid grid-cols-3 w-full h-full">
 	{#if !noGraph}
 		<div
-			class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full max-h-full"
+			class="{noSide || (hideDefaultInputs && stepDetail == undefined)
+				? 'col-span-3'
+				: 'sm:col-span-2 col-span-3'} w-full max-h-full"
 			class:overflow-auto={overflowAuto}
 			class:border={!noBorder}
 		>
@@ -81,14 +85,14 @@
 			/>
 		</div>
 	{/if}
-	{#if !noSide}
+	{#if !noSide && !(hideDefaultInputs && stepDetail == undefined)}
 		<div
 			class={twMerge(
 				'relative w-full h-full min-h-[150px] max-h-[90vh] border-r border-b border-t p-2 pt-0 overflow-auto hidden sm:flex flex-col gap-4',
 				noGraph ? 'border-0 w-max' : ''
 			)}
 		>
-			<FlowGraphViewerStep schema={flow.schema} {stepDetail} />
+			<FlowGraphViewerStep schema={flow.schema} {stepDetail} {hideDefaultInputs} />
 		</div>
 	{/if}
 </div>

frontend/src/lib/components/FlowGraphViewerStep.svelte

@@ -23,9 +23,10 @@
 		schema?: any | undefined
 		stepDetail?: FlowModule | string | undefined
 		jobScriptHash?: string | undefined
+		hideDefaultInputs?: boolean
 	}
 
-	let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined }: Props = $props()
+	let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined, hideDefaultInputs = false }: Props = $props()
 	let codeViewer: Drawer | undefined = $state()
 </script>
 
@@ -92,10 +93,10 @@
 <div class={twMerge('p-2 overflow-y-scroll')}>
 	{#if stepDetail == undefined}
 		<div>
-			<p class="font-medium text-secondary text-center pt-4 pb-8">
+			<p class="text-secondary text-xs italic px-2 pt-2">
 				Click on a step to see its details
 			</p>
-			{#if schema}
+			{#if schema && !hideDefaultInputs}
 				<h3 class="mb-2 font-semibold">Flow Inputs</h3>
 				<SchemaViewer {schema} />
 			{/if}

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -44,6 +44,7 @@
 		workspaceId = undefined,
 		flowState = $bindable({}),
 		selectedJobStep = $bindable(undefined),
+		hideFlowResult = false,
 		hideTimeline = false,
 		hideDownloadInGraph = false,
 		hideNodeDefinition = false,
@@ -175,6 +176,7 @@
 			}
 		}}
 		{showLogsWithResult}
+		{hideFlowResult}
 		notes={notesProp}
 		groups={groupsProp}
 	/>

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -136,6 +136,7 @@
 		}
 		showLogsWithResult?: boolean
 		showJobDetailHeader?: boolean
+		hideFlowResult?: boolean
 		notes?: FlowNote[]
 		groups?: FlowValue['groups']
 	}
@@ -178,6 +179,7 @@
 		toolCallStore,
 		showLogsWithResult = false,
 		showJobDetailHeader = false,
+		hideFlowResult = false,
 		notes: notesProp = undefined,
 		groups: groupsProp = undefined
 	}: Props = $props()
@@ -1356,7 +1358,7 @@
 					/>
 				</div>
 			{/if}
-		{:else if render}
+		{:else if render && !hideFlowResult}
 			<div class={'flex flex-col w-full'}>
 				{#if showLogsWithResult && job}
 					<!-- Side-by-side result and logs for simple jobs -->
@@ -2141,7 +2143,7 @@
 													likely did not run yet</p
 												>
 											{/if}
-										{:else}<p class="p-2 text-primary italic"
+										{:else}<p class="text-secondary text-xs italic"
 												>Select a node to see its details here</p
 											>{/if}
 									</div>
@@ -2157,7 +2159,7 @@
 									{#if node?.job_id}
 										<JobOtelTraces jobId={node.job_id} />
 									{:else}
-										<div class="p-4 text-secondary"
+										<div class="p-4 text-secondary text-xs italic"
 											>Select a node with a job to see HTTP request traces</div
 										>
 									{/if}

frontend/src/lib/components/FlowTimeline.svelte

@@ -81,36 +81,31 @@
 	}}
 />
 {#if items}
-	<div class="divide-y border-b">
-		<div class="px-2 py-2 grid grid-cols-12 w-full"
-			><div></div>
-			<div class="col-span-11 pt-1 px-2 flex text-2xs text-secondary justify-between"
-				><div>{min ? displayDate(new Date(min), true) : ''}</div>{#if max && min}<div
-						class="hidden lg:block">{msToSec(max - min, 1)}s</div
-					>
-				{/if}<div class="flex gap-1 items-center font-mono"
-					>{max ? displayDate(new Date(max), true) : ''}{#if !max && min}{#if now}
-							{msToSec(now - min, 1)}s
-						{/if}<Loader2 size={14} class="animate-spin" />{/if}</div
-				></div
-			>
-		</div>
-		<div class="flex flex-row-reverse items-center text-sm text-secondary p-2">
-			<div class="flex gap-4 items-center text-2xs">
-				<div class="flex gap-2 items-center">
-					<div>Waiting for executor/Suspend</div>
-					<div class="h-4 w-4 bg-gray-500"></div>
+	<div class="divide-y">
+		<div class="px-3 py-1.5 flex items-center justify-between text-2xs text-secondary">
+			<div class="flex gap-1 items-center font-mono">
+				{min ? displayDate(new Date(min), true) : ''}
+			</div>
+			<div class="flex gap-3 items-center">
+				<div class="flex gap-1.5 items-center">
+					<div class="h-2.5 w-2.5 rounded-sm bg-gray-400 dark:bg-gray-500"></div>
+					<span>Wait</span>
 				</div>
-
-				<div class="flex gap-2 items-center">
-					<div>Execution</div>
-					<div class="h-4 w-4 bg-blue-500/90"></div>
+				<div class="flex gap-1.5 items-center">
+					<div class="h-2.5 w-2.5 rounded-sm bg-blue-500/90"></div>
+					<span>Execution</span>
 				</div>
+				{#if max && min}
+					<span class="font-mono">{msToSec(max - min, 1)}s</span>
+				{/if}
+				{#if !max && min}{#if now}
+						<span class="font-mono">{msToSec(now - min, 1)}s</span>
+					{/if}<Loader2 size={14} class="animate-spin" />{/if}
 			</div>
 		</div>
 		{#if selfWaitTime}
-			<div class="px-2 py-2 grid grid-cols-6 w-full">
-				root:
+			<div class="px-3 py-1.5 flex items-center gap-2">
+				<span class="text-xs text-secondary">root:</span>
 				<WaitTimeWarning
 					self_wait_time_ms={selfWaitTime}
 					aggregate_wait_time_ms={aggregateWaitTime}
@@ -120,9 +115,9 @@
 		{/if}
 		{#each flowModules as { id: k, type: typ } (k)}
 			{@const subItems = items?.[k]?.filter((x) => x.created_at && x.started_at)}
-			<div class="shadow-inner dark:shadow-gray-700 relative">
-				<div class="px-2 py-2 grid grid-cols-6 w-full">
-					<div class="truncate"
+			<div class="relative px-3 py-1.5">
+				<div class="flex items-center justify-between mb-0.5">
+					<div class="text-xs font-medium"
 						>{k.startsWith('subflow:') ? k.substring(8) : k}
 						{#if localModuleStates[k]?.selectedForloop && (typ == 'forloopflow' || typ == 'whileloopflow')}
 							<span class="text-xs font-mono font-medium inline-flex items-center -my-2">
@@ -141,70 +136,67 @@
 							</span>
 						{/if}
 					</div>
-					<div class="col-span-5 flex">
-						{#if subItems?.length > 1}
-							<div class="text-xs text-secondary absolute top-1 right-2">
-								{subItems?.length} jobs
-							</div>
-						{/if}
-						{#if min && total}
-							<VirtualList
-								width="100%"
-								height={Math.min(400, (subItems?.length ?? 0) * barHeight)}
-								itemCount={subItems?.length ?? 0}
-								itemSize={barHeight}
-								getKey={(index) => subItems?.[index]?.id}
-							>
-								{#snippet item({ index, style })}
-									{@const b = subItems?.[index]}
-									{#if b?.created_at}
-										<!-- <div class="text-xs text-secondary">{JSON.stringify(b)}</div> -->
-										{@const waitingLen = b?.created_at
-											? b.started_at
-												? b.started_at - b?.created_at
-												: b.duration_ms
-													? 0
-													: now - b?.created_at
-											: 0}
-										<div class="flex w-full p-1 pb-2 pl-12" {style}>
+					{#if subItems?.length > 1}
+						<span class="text-2xs text-secondary bg-surface-hover px-1.5 py-0.5 rounded-full">
+							{subItems?.length} jobs
+						</span>
+					{/if}
+				</div>
+				<div class="w-full">
+					{#if min && total}
+						<VirtualList
+							width="100%"
+							height={Math.min(400, (subItems?.length ?? 0) * barHeight)}
+							itemCount={subItems?.length ?? 0}
+							itemSize={barHeight}
+							getKey={(index) => subItems?.[index]?.id}
+						>
+							{#snippet item({ index, style })}
+								{@const b = subItems?.[index]}
+								{#if b?.created_at}
+									{@const waitingLen = b?.created_at
+										? b.started_at
+											? b.started_at - b?.created_at
+											: b.duration_ms
+												? 0
+												: now - b?.created_at
+										: 0}
+									<div class="flex w-full py-0.5 items-center" {style}>
+										<TimelineBar
+											position="left"
+											id={b?.id}
+											{total}
+											{min}
+											gray
+											spacerClass="bg-gray-100 dark:bg-gray-800/50 rounded-l-md"
+											started_at={b.created_at}
+											len={waitingLen < 100 ? 0 : waitingLen - 100}
+											running={b?.started_at == undefined}
+										/>
+										{#if b.started_at}
 											<TimelineBar
-												position="left"
+												position={waitingLen < 100 ? 'center' : 'right'}
 												id={b?.id}
 												{total}
 												{min}
-												gray
-												started_at={b.created_at}
-												len={waitingLen < 100 ? 0 : waitingLen - 100}
-												running={b?.started_at == undefined}
+												concat
+												started_at={b.started_at}
+												len={b.started_at ? (b?.duration_ms ?? now - b?.started_at) : 0}
+												running={b?.duration_ms == undefined}
 											/>
-											{#if b.started_at}
-												<TimelineBar
-													position={waitingLen < 100 ? 'center' : 'right'}
-													id={b?.id}
-													{total}
-													{min}
-													concat
-													started_at={b.started_at}
-													len={b.started_at ? (b?.duration_ms ?? now - b?.started_at) : 0}
-													running={b?.duration_ms == undefined}
-												/>
-											{/if}
-										</div>
-									{:else}
-										<div class="flex w-full p-1 pb-2 pl-12">
-											<div class="text-xs text-secondary">
-												<!-- Waiting for executor/Suspend {JSON.stringify(b)} -->
-											</div>
-										</div>
-									{/if}
-								{/snippet}
-							</VirtualList>
-						{/if}</div
-					></div
-				>
+										{/if}
+									</div>
+								{:else}
+									<div class="flex w-full py-0.5"></div>
+								{/if}
+							{/snippet}
+						</VirtualList>
+					{/if}
+				</div>
 			</div>
 		{/each}
 	</div>
+
 {:else}
 	<Loader2 class="animate-spin" />
 {/if}