windmill-components 1.623.2 → 1.655.0

package/package/components/FlowGraphViewerStep.svelte

@@ -12,18 +12,17 @@ import { cleanExpr, copyToClipboard } from '../utils';
 import { hubBaseUrlStore } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
-import { Copy } from 'lucide-svelte';
+import { Copy, Expand } from 'lucide-svelte';
 import HighlightTheme from './HighlightTheme.svelte';
-export let schema = undefined;
-export let stepDetail = undefined;
-export let jobScriptHash = undefined;
-let codeViewer;
+import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
+let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined } = $props();
+let codeViewer = $state();
 </script>
 
 <HighlightTheme />
 
 <Drawer bind:this={codeViewer} size="900px">
-	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+	<DrawerContent title={'Expanded Code'} on:close={codeViewer?.closeDrawer}>
 		{#if stepDetail && typeof stepDetail != 'string'}
 			{#if stepDetail.value.type == 'script'}
 				<div class="mb-4">
@@ -36,14 +35,14 @@ let codeViewer;
 						<IconedPath path={stepDetail?.value?.path ?? ''} />
 					</a>
 				</div>
-				<div class="text-2xs mb-4 mt-2">
-					<h3 class="mb-2">Step Inputs</h3>
+				<div class="text-xs mb-4 mt-2">
+					<h3 class="mb-1 text-xs font-semibold text-emphasis">Step inputs</h3>
 
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 				{#if stepDetail.value.path.startsWith('hub/')}
 					<div class="mt-6">
-						<h3 class="mb-2">Code</h3>
+						<h3 class="mb-1 mt-6 text-xs font-semibold text-emphasis">Code</h3>
 						<iframe
 							class="w-full h-full text-sm"
 							title="embedded script from hub"
@@ -54,15 +53,18 @@ let codeViewer;
 				{/if}
 			{:else if stepDetail.value.type == 'rawscript'}
 				<div class="text-2xs mb-4 mt-2">
-					<h3 class="mb-2">Step Inputs</h3>
+					<h3 class="mb-1 text-xs font-semibold text-emphasis">Step inputs</h3>
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 
-				<h3 class="mb-2">Code</h3>
-				<span class="!text-xs">
+				<div class="mb-1 mt-6 flex items-center gap-1">
+					<h3 class="text-xs font-semibold text-emphasis">Code</h3>
+					<LanguageIcon lang={stepDetail.value.language} size={14} />
+				</div>
+				<div class="!text-xs rounded-md p-2 border bg-surface-input">
 					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
-				</span>
-				<h3 class="mt-4 mb-2">Lockfile</h3>
+				</div>
+				<h3 class="mt-8 mb-1 text-xs font-normal text-primary">Lockfile</h3>
 				<div>
 					{#if stepDetail.value.lock}
 						<pre class="bg-surface-secondary text-sm p-2 h-full overflow-auto w-full"
@@ -106,7 +108,7 @@ let codeViewer;
 				{/if}
 				<span
 					class={twMerge(
-						'font-medium text-lg',
+						'font-semibold text-emphasis text-sm',
 						stepDetail.id !== 'failure' && stepDetail.id !== 'preprocessor' ? 'ml-2' : ''
 					)}
 				>
@@ -160,33 +162,39 @@ let codeViewer;
 		{:else if stepDetail.value.type == 'rawscript'}
 			{#if stepDetail.id !== 'preprocessor'}
 				<div class="text-xs">
-					<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+					<h3 class="mb-1 font-semibold mt-2 text-xs text-emphasis">Step inputs</h3>
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 			{/if}
 
 			<div>
-				<div class="mb-2 mt-4 flex justify-between items-center">
-					<h3 class="font-semibold">Code</h3>
-					<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
-						Expand
-					</Button>
+				<div class="mb-1 mt-6 flex justify-between items-center">
+					<div class="flex items-center gap-2">
+						<h3 class="font-semibold text-xs text-emphasis">Code</h3>
+						<LanguageIcon lang={stepDetail.value.language} width={14} height={14} />
+					</div>
+					<Button
+						unifiedSize="sm"
+						variant="subtle"
+						onClick={codeViewer?.openDrawer}
+						startIcon={{ icon: Expand }}>Expand</Button
+					>
 				</div>
-				<div class="border p-2 rounded-md">
+				<div class="border p-2 rounded-md bg-surface-input">
 					<HighlightCode
 						language={stepDetail.value.language}
 						code={stepDetail.value.content}
 						className="whitespace-pre-wrap"
 					/>
 				</div>
-				<h3 class="mb-2 mt-4">Lockfile</h3>
+				<h3 class="mb-1 mt-6 text-xs font-semibold text-emphasis">Lockfile</h3>
 				<div>
 					{#if stepDetail.value.lock}
-						<pre class="bg-surface-secondary text-xs p-2 h-full overflow-auto w-full"
+						<pre class="bg-surface-input rounded-md border text-xs p-2 h-full overflow-auto w-full"
 							>{stepDetail.value.lock}</pre
 						>
 					{:else}
-						<p class="bg-surface-secondary text-sm p-2 rounded">
+						<p class="bg-surface-secondary text-xs italic p-2 rounded">
 							There is no lockfile for this inline script
 						</p>
 					{/if}
@@ -194,18 +202,21 @@ let codeViewer;
 			</div>
 		{:else if stepDetail.value.type == 'script'}
 			{#if stepDetail.id !== 'preprocessor'}
-				<div class="text-2xs">
-					<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+				<div class="text-xs">
+					<h3 class="mb-1 font-semibold mt-2 text-xs text-emphasis">Step inputs</h3>
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 			{/if}
 			{#if stepDetail.value.path.startsWith('hub/')}
 				<div class="flex flex-col grow">
-					<div class="mb-2 flex justify-between items-center">
-						<h3 class="font-semibold">Code</h3>
-						<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
-							Expand
-						</Button>
+					<div class="mb-1 mt-6 flex justify-between items-center">
+						<h3 class="font-semibold text-xs text-emphasis">Code</h3>
+						<Button
+							unifiedSize="sm"
+							variant="subtle"
+							onClick={codeViewer?.openDrawer}
+							startIcon={{ icon: Expand }}>Expand</Button
+						>
 					</div>
 					<iframe
 						class="w-full grow text-sm h-full"
@@ -218,8 +229,8 @@ let codeViewer;
 				<FlowModuleScript path={stepDetail.value.path} hash={jobScriptHash} />
 			{/if}
 		{:else if stepDetail.value.type == 'aiagent'}
-			<div class="text-2xs">
-				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+			<div class="text-xs">
+				<h3 class="mb-1 font-semibold mt-2 text-xs text-emphasis">Step inputs</h3>
 				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 			</div>
 		{:else if stepDetail.value.type == 'forloopflow'}
@@ -227,7 +238,7 @@ let codeViewer;
 				<p class="font-medium text-secondary pb-2"> Iterator expression: </p>
 				{#if stepDetail.value.iterator.type == 'static'}
 					<ObjectViewer json={stepDetail.value.iterator.value} />
-				{:else}
+				{:else if stepDetail.value.iterator.type == 'javascript'}
 					<span class="text-xs">
 						<Highlight language={typescript} code={cleanExpr(stepDetail.value.iterator.expr)} />
 					</span>
@@ -281,11 +292,14 @@ let codeViewer;
 				{/each}
 			</div>
 		{:else if stepDetail.value.type == 'flow'}
-			<div class="text-sm mb-1 flex justify-end flex-row">
+			<div class="text-sm mb-1 flex justify-between flex-row items-center">
+				<span class="text-xs font-normal text-secondary"
+					>Flow path: <span class="text-emphasis">{stepDetail.value.path}</span>
+				</span>
 				<Button
-					size="xs2"
+					unifiedSize="sm"
 					startIcon={{ icon: Copy }}
-					color="light"
+					variant="subtle"
 					on:click={() => {
 						if (typeof stepDetail !== 'string') {
 							const val = stepDetail?.value

package/package/components/FlowGraphViewerStep.svelte.d.ts

@@ -1,23 +1,9 @@
 import type { FlowModule } from '../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowGraphViewerStep: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     schema?: any | undefined;
     stepDetail?: FlowModule | string | undefined;
     jobScriptHash?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowGraphViewerStep = InstanceType<typeof FlowGraphViewerStep>;
+}
+declare const FlowGraphViewerStep: import("svelte").Component<Props, {}, "">;
+type FlowGraphViewerStep = ReturnType<typeof FlowGraphViewerStep>;
 export default FlowGraphViewerStep;

package/package/components/FlowHistoryJobPicker.svelte

@@ -4,7 +4,8 @@ import PopoverV2 from './meltComponents/Popover.svelte';
 import HistoricInputs from './HistoricInputs.svelte';
 import { workspaceStore } from '../stores';
 import { JobService } from '../gen';
-let { path, selected = undefined, selectInitial = false, loading = $bindable(false) } = $props();
+import { Button } from './common';
+let { path, selected = undefined, selectInitial = false, loading = $bindable(false), newFlow = false } = $props();
 const dispatch = createEventDispatcher();
 async function loadInitial() {
     loading = true;
@@ -25,13 +26,15 @@ async function loadInitial() {
     loading = false;
 }
 $effect(() => {
-    $workspaceStore && untrack(() => loadInitial());
+    if ($workspaceStore && !newFlow) {
+        untrack(() => loadInitial());
+    }
 });
 </script>
 
 <PopoverV2 closeButton={false}>
 	{#snippet trigger()}
-		<HistoryIcon size={14} />
+		<Button variant="default" startIcon={{ icon: HistoryIcon }}>History</Button>
 	{/snippet}
 	{#snippet content()}
 		<div class="p-2 h-[400px] overflow-hidden w-80 border shadow-sm">

package/package/components/FlowHistoryJobPicker.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     selected?: string | undefined;
     selectInitial?: boolean;
     loading?: boolean;
+    newFlow?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/FlowInputViewer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import FieldHeader from './FieldHeader.svelte';
-export let schema;
+let { schema } = $props();
 </script>
 
 <ul class="my-2">

package/package/components/FlowInputViewer.svelte.d.ts

@@ -1,23 +1,9 @@
 import type { Schema } from '../common';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowInputViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     schema: Schema | {
         [key: string]: unknown;
     } | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowInputViewer = InstanceType<typeof FlowInputViewer>;
+}
+declare const FlowInputViewer: import("svelte").Component<Props, {}, "">;
+type FlowInputViewer = ReturnType<typeof FlowInputViewer>;
 export default FlowInputViewer;

package/package/components/FlowJobResult.svelte

@@ -3,38 +3,46 @@ import DisplayResult from './DisplayResult.svelte';
 import LogViewer from './LogViewer.svelte';
 import AiAgentLogViewer from './AIAgentLogViewer.svelte';
 import { twMerge } from 'tailwind-merge';
-let { waitingForExecutor = false, result, result_stream, logs, col = false, noBorder = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, downloadLogs = true, tagLabel = undefined, aiAgentStatus = undefined } = $props();
+let { waitingForExecutor = false, result, result_stream, logs, col = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, downloadLogs = true, tagLabel = undefined, aiAgentStatus = undefined } = $props();
 </script>
 
 <div
-	class:border={!noBorder}
 	class={twMerge(
-		'rounded-md grow bg-surface-tertiary overflow-hidden text-xs',
-		!col ? 'grid grid-cols-2' : 'flex flex-col max-h-screen gap-2 overflow-hidden'
+		'grow overflow-hidden text-xs',
+		!col ? 'grid grid-cols-2 gap-2' : 'flex flex-col max-h-screen gap-6 overflow-hidden'
 	)}
 >
-	<div class="{col ? 'max-h-1/2 grow' : 'max-h-80'} p-2 overflow-auto relative">
-		<span class="text-primary text-xs font-normal">Result</span>
-		{#if result !== undefined || result_stream !== undefined}
-			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
-		{:else if loading}
-			<Loader2 class="animate-spin" />
-		{:else}
-			<div class="text-secondary">No result (result is undefined)</div>
-		{/if}
+	<div class="relative flex flex-col gap-1">
+		<span class="text-emphasis text-xs font-semibold">Result</span>
+		<div
+			class="{col
+				? 'max-h-1/2 grow'
+				: 'max-h-80'} overflow-auto rounded-md grow min-h-0 border bg-surface-tertiary p-2"
+		>
+			{#if result !== undefined || result_stream !== undefined}
+				<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
+			{:else if loading}
+				<Loader2 class="animate-spin" />
+			{:else}
+				<div class="text-secondary">No result (result is undefined)</div>
+			{/if}
+		</div>
 	</div>
-	<div class="overflow-auto {col ? 'grow' : 'max-h-80'} relative">
+	<div class="relative flex flex-col gap-1">
+		<span class="text-emphasis text-xs font-semibold">Logs</span>
 		{#if aiAgentStatus}
-			<AiAgentLogViewer {...aiAgentStatus} {workspaceId} />
+			<AiAgentLogViewer {...aiAgentStatus} {workspaceId} noPadding />
 		{:else}
-			<LogViewer
-				{tagLabel}
-				download={downloadLogs}
-				content={logs ?? ''}
-				{jobId}
-				isLoading={waitingForExecutor}
-				{tag}
-			/>
+			<div class="rounded-md grow min-h-0 border bg-surface-tertiary overflow-hidden">
+				<LogViewer
+					{tagLabel}
+					download={downloadLogs}
+					content={logs ?? ''}
+					{jobId}
+					isLoading={waitingForExecutor}
+					{tag}
+				/>
+			</div>
 		{/if}
 	</div>
 </div>

package/package/components/FlowJobResult.svelte.d.ts

@@ -6,7 +6,6 @@ interface Props {
     result_stream?: string;
     logs: string | undefined;
     col?: boolean;
-    noBorder?: boolean;
     loading: boolean;
     filename?: string | undefined;
     jobId?: string | undefined;

package/package/components/FlowLogRow.svelte

@@ -38,7 +38,7 @@ function handleClick() {
 			{/if}
 		</div>
 		<div class="w-full leading-tight">
-			<div class={twMerge('w-full pr-2 cursor-pointer', isCurrent(id) ? 'bg-surface-hover' : '')}>
+			<div class="w-full pr-2 cursor-pointer">
 				{@render label()}
 			</div>
 		</div>

package/package/components/FlowLogViewer.svelte

@@ -11,7 +11,9 @@ import { updateLinks } from '../keyboardChain';
 import FlowLogRow from './FlowLogRow.svelte';
 import { Tooltip } from './meltComponents';
 import FlowTimelineBar from './FlowTimelineBar.svelte';
+import { getActiveReplay } from './recording/flowRecording.svelte';
 let { modules, localModuleStates, rootJob, expandedRows, allExpanded, showResultsInputs, toggleExpanded, toggleExpandAll, workspaceId, render, level = 0, flowId = 'root', onSelectedIteration, getSelectedIteration, flowSummary, mode = 'flow', currentId, navigationChain = $bindable(), select, timelineMin: timelineMinAbsolute, timelineTotal: timelineTotalAbsolute, timelineItems, timelineNow, timelineAvailableWidths = $bindable(), timelinelWidth, showTimeline = true } = $props();
+let isReplay = $derived(!!getActiveReplay());
 function getJobLink(jobId) {
     if (!jobId)
         return '';
@@ -217,9 +219,14 @@ $effect(() => {
     if (currentId) {
         const element = document.querySelector(`[data-nav-id="${currentId}"]`);
         if (element) {
-            ;
-            element.focus?.({ preventScroll: true });
-            element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            // Only scroll if the element is visible (not in a hidden tab)
+            const rect = element.getBoundingClientRect();
+            const isElementVisible = rect.width > 0 && rect.height > 0;
+            if (isElementVisible) {
+                ;
+                element.focus?.({ preventScroll: true });
+                element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
         }
     }
 });
@@ -437,7 +444,7 @@ function isJobFailure(jobId, moduleId) {
 						{/if}
 					</div>
 
-					{#if flowInfo?.jobId}
+					{#if flowInfo?.jobId && !isReplay}
 						<a
 							href={getJobLink(flowInfo.jobId)}
 							class="text-xs text-gray-400 hover:text-primary pl-1"
@@ -457,7 +464,7 @@ function isJobFailure(jobId, moduleId) {
 					{#if flowInfo?.logs}
 						<LogViewer
 							content={flowInfo.logs}
-							jobId={flowInfo.jobId}
+							jobId={isReplay ? undefined : flowInfo.jobId}
 							isLoading={false}
 							small={true}
 							download={false}
@@ -647,7 +654,7 @@ function isJobFailure(jobId, moduleId) {
 												{/if}
 											</div>
 
-											{#if isLeafStep && jobId}
+											{#if isLeafStep && jobId && !isReplay}
 												<a
 													href={getJobLink(jobId ?? '')}
 													class="text-xs text-gray-400 hover:text-primary pl-1"
@@ -740,7 +747,7 @@ function isJobFailure(jobId, moduleId) {
 													<div onclick={() => select(`${module.id}-logs`)}>
 														<LogViewer
 															content={logs}
-															jobId={jobId ?? ''}
+															jobId={isReplay ? undefined : (jobId ?? '')}
 															isLoading={false}
 															small={true}
 															download={false}

package/package/components/FlowLogViewerWrapper.svelte

@@ -25,7 +25,7 @@ const timelineMin = $derived(timelineCompute?.min ?? undefined);
 const timelineTotal = $derived(timelineCompute?.total ?? undefined);
 const timelineItems = $derived(timelineCompute?.items ?? undefined);
 const timelineNow = $derived(timelineCompute?.now ?? Date.now());
-let moduleTracker = new ChangeTracker($state.snapshot(job.raw_flow?.modules ?? []));
+let moduleTracker = new ChangeTracker($state.snapshot(untrack(() => job).raw_flow?.modules ?? []));
 $effect(() => {
     readFieldsRecursively(job.raw_flow?.modules ?? []);
     untrack(() => moduleTracker.track($state.snapshot(job.raw_flow?.modules ?? [])));
@@ -80,7 +80,7 @@ function select(id) {
     currentId = id;
 }
 let timelineAvailableWidths = $state({});
-let lastJobId = $state(job.id);
+let lastJobId = $state(untrack(() => job).id);
 const timelinelWidth = $derived.by(() => {
     const widths = Object.values(timelineAvailableWidths);
     return widths.length > 0 ? Math.max(Math.min(...widths) - 12, 0) : 0;

package/package/components/FlowPlugConnect.svelte

@@ -2,9 +2,7 @@
 import { Button } from './common';
 import AnimatedButton from './common/button/AnimatedButton.svelte';
 import { twMerge } from 'tailwind-merge';
-export let connecting;
-export let id = undefined;
-export let wrapperClasses = '';
+let { connecting, id = undefined, wrapperClasses = '' } = $props();
 </script>
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">

package/package/components/FlowPlugConnect.svelte.d.ts

@@ -1,3 +1,8 @@
+interface Props {
+    connecting: boolean;
+    id?: undefined | string;
+    wrapperClasses?: string;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,14 +16,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowPlugConnect: $$__sveltets_2_IsomorphicComponent<{
-    connecting: boolean;
-    id?: undefined | string;
-    wrapperClasses?: string;
-}, {
+declare const FlowPlugConnect: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type FlowPlugConnect = InstanceType<typeof FlowPlugConnect>;
 export default FlowPlugConnect;