windmill-components 1.655.2 → 1.665.0

package/package/components/recording/ScriptRecordingReplay.svelte

@@ -9,20 +9,32 @@ import { Highlight } from 'svelte-highlight';
 import { json as jsonLang } from 'svelte-highlight/languages';
 import HighlightTheme from '../HighlightTheme.svelte';
 import JobArgs from '../JobArgs.svelte';
+import SchemaForm from '../SchemaForm.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import LogViewer from '../LogViewer.svelte';
 import { ClipboardCopy, InfoIcon, LogOut, Play, Square } from 'lucide-svelte';
 import { copyToClipboard } from '../../utils';
 import { onDestroy, tick } from 'svelte';
 import JobLoader from '../JobLoader.svelte';
-let { recording } = $props();
-let replayState = $state('loaded');
+let { recording, selectedTab = $bindable(), replayState = $bindable(), hideControls = false, hideTabs = false } = $props();
 let jobId = $state(undefined);
 let job = $state(undefined);
 let jobLoader = $state(undefined);
 let done = $derived(job?.type === 'CompletedJob');
 let scriptRecordingStore = createScriptRecording();
-function stop() {
+let schema = $derived(recording.schema);
+if (selectedTab === undefined) {
+    if (schema && recording.args)
+        selectedTab = 'parameters';
+    else if (recording.args && Object.keys(recording.args).length > 0)
+        selectedTab = 'args';
+    else
+        selectedTab = 'code';
+}
+if (replayState === undefined) {
+    replayState = 'loaded';
+}
+export function stop() {
     setActiveReplay(undefined);
     job = undefined;
     replayState = 'loaded';
@@ -72,13 +84,14 @@ function initRecording() {
     replayState = 'loaded';
 }
 initRecording();
-async function startReplay() {
+export async function startReplay() {
     const snapshot = JSON.parse(JSON.stringify(recording));
     rebaseTimestamps(snapshot);
     const replayData = scriptRecordingStore.toReplayData(snapshot);
     setActiveReplay(replayData);
     job = undefined;
     replayState = 'playing';
+    selectedTab = 'result';
     await tick();
     if (jobLoader && jobId) {
         jobLoader.watchJob(jobId);
@@ -87,7 +100,6 @@ async function startReplay() {
 onDestroy(() => {
     setActiveReplay(undefined);
 });
-let schema = $derived(recording.schema);
 </script>
 
 <HighlightTheme />
@@ -100,48 +112,142 @@ let schema = $derived(recording.schema);
 			</p>
 		</div>
 	</div>
-{:else if replayState === 'loaded'}
-	<div class="flex flex-col gap-4">
-		<div class="flex items-center justify-between">
-			<div class="flex items-center gap-2">
-				<h2 class="text-lg font-semibold text-emphasis"
-					>{recording.script_path || 'Untitled script'}</h2
-				>
-				<span class="text-xs text-secondary px-2 py-0.5 bg-surface-secondary rounded"
-					>{recording.language}</span
-				>
-				<Tooltip placement="bottom">
-					<InfoIcon size={16} class="text-tertiary" />
-					{#snippet text()}
-						<span class="text-2xs">
-							Recorded {new Date(recording.recorded_at).toLocaleString()} &mdash;
-							{(recording.total_duration_ms / 1000).toFixed(1)}s
-						</span>
-					{/snippet}
-				</Tooltip>
+{:else}
+	<div class="flex flex-col gap-4 h-full">
+		{#if !hideControls}
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2">
+					<h2 class="text-lg font-semibold text-emphasis">
+						{replayState === 'playing' ? 'Replaying: ' : ''}{recording.script_path ||
+							'Untitled script'}
+					</h2>
+					<span class="text-xs text-secondary px-2 py-0.5 bg-surface-secondary rounded">
+						{recording.language}
+					</span>
+					<Tooltip placement="bottom">
+						<InfoIcon size={16} class="text-tertiary" />
+						{#snippet text()}
+							<span class="text-2xs">
+								Recorded {new Date(recording.recorded_at).toLocaleString()} &mdash;
+								{(recording.total_duration_ms / 1000).toFixed(1)}s
+							</span>
+						{/snippet}
+					</Tooltip>
+				</div>
+				{#if replayState === 'loaded'}
+					<Button variant="contained" color="blue" onclick={startReplay} startIcon={{ icon: Play }}>
+						Play
+					</Button>
+				{:else}
+					<Button
+						variant="border"
+						size="xs"
+						onclick={stop}
+						startIcon={{ icon: done ? LogOut : Square }}
+					>
+						{done ? 'Exit' : 'Stop'}
+					</Button>
+				{/if}
 			</div>
-			<Button variant="contained" color="blue" on:click={startReplay} startIcon={{ icon: Play }}>
-				Play
-			</Button>
-		</div>
+		{/if}
 
-		{#if recording.args && Object.keys(recording.args).length > 0}
-			<JobArgs args={recording.args} />
+		{#if replayState === 'playing'}
+			<JobLoader noCode={true} bind:this={jobLoader} bind:job />
 		{/if}
 
-		<Tabs selected="code">
-			<Tab value="code" label="Code" />
+		<Tabs bind:selected={selectedTab as string} {hideTabs}>
+			{#if replayState === 'playing'}
+				<Tab value="result" label="Result" />
+			{/if}
+			{#if schema && recording.args}
+				<Tab value="parameters" label="Code" />
+			{/if}
+			{#if recording.args && Object.keys(recording.args).length > 0}
+				<Tab value="args" label="Args" />
+			{/if}
+			{#if !schema || !recording.args}
+				<Tab value="code" label="Code" />
+			{/if}
 			{#if schema}
 				<Tab value="schema" label="Schema" />
 			{/if}
 			{#snippet content()}
+				<TabContent value="result" class="flex-1 min-h-0">
+					{#if replayState === 'playing' && jobId}
+						<div class="grid grid-cols-2 gap-4 w-full h-full">
+							<div class="flex flex-col min-h-0">
+								<h3 class="shrink-0 text-xs font-semibold text-emphasis mb-1">Result</h3>
+								<div class="flex-1 min-h-0 overflow-auto rounded-md border bg-surface-tertiary p-4">
+									{#if job !== undefined && job.type === 'CompletedJob' && job.result !== undefined}
+										<DisplayResult result={job.result} language={job.language} />
+									{:else if done}
+										<div
+											class="w-full h-full flex items-center justify-center text-secondary text-sm"
+										>
+											No output available
+										</div>
+									{:else}
+										<div
+											class="w-full h-full flex items-center justify-center text-secondary text-sm"
+										>
+											Waiting for result...
+										</div>
+									{/if}
+								</div>
+							</div>
+							<div class="flex flex-col min-h-0">
+								<h3 class="shrink-0 text-xs font-semibold text-emphasis mb-1">Logs</h3>
+								<div class="flex-1 min-h-0 overflow-auto rounded-md border bg-surface-tertiary">
+									<LogViewer
+										jobId={job?.id}
+										duration={job?.['duration_ms']}
+										mem={job?.['mem_peak']}
+										isLoading={!done}
+										content={job?.logs}
+										tag={job?.tag}
+										download={false}
+									/>
+								</div>
+							</div>
+						</div>
+					{/if}
+				</TabContent>
+				<TabContent value="parameters" class="flex-1 min-h-0">
+					{#if schema && recording.args}
+						<div class="flex gap-4 p-2 h-full">
+							<div class="w-1/2 overflow-auto text-2xs">
+								<HighlightCode
+									language={recording.language as Script['language']}
+									code={recording.code}
+									lines
+									className="text-2xs"
+								/>
+							</div>
+							<div class="w-1/2 overflow-auto">
+								<SchemaForm
+									{schema}
+									args={recording.args}
+									disabled={true}
+									noVariablePicker={true}
+								/>
+							</div>
+						</div>
+					{/if}
+				</TabContent>
+				<TabContent value="args">
+					{#if recording.args && Object.keys(recording.args).length > 0}
+						<div class="p-2">
+							<JobArgs args={recording.args} />
+						</div>
+					{/if}
+				</TabContent>
 				<TabContent value="code">
-					<div class="p-2 w-full overflow-auto">
+					<div class="p-2 w-full overflow-auto text-2xs">
 						<HighlightCode
 							language={recording.language as Script['language']}
 							code={recording.code}
 							lines
-							className="text-xs"
+							className="text-2xs"
 						/>
 					</div>
 				</TabContent>
@@ -165,46 +271,4 @@ let schema = $derived(recording.schema);
 			{/snippet}
 		</Tabs>
 	</div>
-{:else if replayState === 'playing' && jobId}
-	<div class="flex flex-col gap-4">
-		<div class="flex items-center justify-between">
-			<h2 class="text-lg font-semibold text-emphasis"
-				>Replaying: {recording.script_path || 'Untitled script'}</h2
-			>
-			<Button
-				variant="border"
-				size="xs"
-				on:click={stop}
-				startIcon={{ icon: done ? LogOut : Square }}
-			>
-				{done ? 'Exit' : 'Stop'}
-			</Button>
-		</div>
-		<JobLoader noCode={true} bind:this={jobLoader} bind:job />
-
-		{#if done && job}
-			<div>
-				<h3 class="text-xs font-semibold text-emphasis mb-1">Result</h3>
-				<div class="border rounded-md bg-surface-tertiary p-4 overflow-auto max-h-screen">
-					{#if job.type === 'CompletedJob' && job.result !== undefined}
-						<DisplayResult result={job.result} language={job.language} />
-					{:else}
-						<div class="text-secondary text-sm">No result available</div>
-					{/if}
-				</div>
-			</div>
-		{/if}
-
-		<div class="border rounded-md p-2 bg-surface-secondary overflow-auto min-h-[300px]">
-			<LogViewer
-				jobId={job?.id}
-				duration={job?.['duration_ms']}
-				mem={job?.['mem_peak']}
-				isLoading={!done}
-				content={job?.logs}
-				tag={job?.tag}
-				download={false}
-			/>
-		</div>
-	</div>
 {/if}

package/package/components/recording/ScriptRecordingReplay.svelte.d.ts

@@ -1,7 +1,16 @@
 import type { ScriptRecording } from './types';
+export type ScriptTabValue = 'parameters' | 'code' | 'args' | 'schema' | 'result';
+type ReplayState = 'loaded' | 'playing';
 interface Props {
     recording: ScriptRecording;
+    selectedTab?: ScriptTabValue;
+    replayState?: ReplayState;
+    hideControls?: boolean;
+    hideTabs?: boolean;
 }
-declare const ScriptRecordingReplay: import("svelte").Component<Props, {}, "">;
+declare const ScriptRecordingReplay: import("svelte").Component<Props, {
+    stop: () => void;
+    startReplay: () => Promise<void>;
+}, "selectedTab" | "replayState">;
 type ScriptRecordingReplay = ReturnType<typeof ScriptRecordingReplay>;
 export default ScriptRecordingReplay;

package/package/components/runs/JobRunsPreview.svelte

@@ -34,11 +34,14 @@ function asWorkflowStatus(x) {
         return {};
     const result = {};
     for (const [k, v] of Object.entries(x)) {
-        if (!k.startsWith('_'))
+        if (!k.startsWith('_') || k.startsWith('_step/'))
             result[k] = v;
     }
     return result;
 }
+function getStepResults(x) {
+    return x?._checkpoint?.completed_steps ?? {};
+}
 function handleFilterByConcurrencyKey(key) {
     dispatch('filterByConcurrencyKey', key);
 }
@@ -129,6 +132,10 @@ let isOwner = $state(false);
 					<WorkflowTimeline
 						flow_status={asWorkflowStatus(job.workflow_as_code_status)}
 						flowDone={job.type == 'CompletedJob'}
+						stepResults={getStepResults(job.workflow_as_code_status)}
+						result={(job as any).result}
+						success={(job as any).success !== false}
+						jobId={job.id}
 					/>
 				</div>
 			{/if}

package/package/components/runs/TimeframeSelect.svelte

@@ -62,7 +62,6 @@ export function useSyncedTimeframe(timeframes, getter, setter) {
 <script lang="ts">import { CalendarIcon, RefreshCw } from 'lucide-svelte';
 import { Button } from '../common';
 import Popover from '../meltComponents/Popover.svelte';
-import { formatDateRange } from '../../utils';
 import { watch } from 'runed';
 import { page } from '$app/state';
 import InlineCalendarInput, { fromCalendarDate, toCalendarDate } from '../common/InlineCalendarInput.svelte';

package/package/components/schema/JobSchemaPicker.svelte

@@ -2,7 +2,7 @@
 import { workspaceStore } from '../../stores';
 import { ExternalLink } from 'lucide-svelte';
 import { base } from '../../base';
-let { job, payloadData = undefined, hovering = false, showAuthor = false, placement = 'bottom-start', viewerOpen = false, limitPayloadSize = false } = $props();
+let { job, payloadData = undefined, hovering = false, showAuthor = false, isPreview = false, placement = 'bottom-start', viewerOpen = false, limitPayloadSize = false } = $props();
 </script>
 
 <SchemaPickerRow
@@ -15,11 +15,17 @@ let { job, payloadData = undefined, hovering = false, showAuthor = false, placem
 	{limitPayloadSize}
 >
 	{#snippet start()}
-		<div class="center-center">
+		<div class="center-center relative">
 			<div
 				class="rounded-full w-2 h-2 {job.success ? 'bg-green-400' : 'bg-red-400'}"
 				title={job.success ? 'Success' : 'Failed'}
 			></div>
+			{#if isPreview}
+				<span
+					class="absolute -top-1.5 right-0.5 text-[8px] font-bold leading-none text-tertiary"
+					title="Preview run">P</span
+				>
+			{/if}
 		</div>
 	{/snippet}
 	{#snippet extra()}

package/package/components/schema/JobSchemaPicker.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     payloadData?: any | undefined;
     hovering?: boolean;
     showAuthor?: boolean;
+    isPreview?: boolean;
     placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end';
     viewerOpen?: boolean;
     limitPayloadSize?: boolean;

package/package/components/schema/SchemaFormDND.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { createEventDispatcher, untrack } from 'svelte';
-import { dragHandle } from '@windmill-labs/svelte-dnd-action';
+import { dragHandle, TRIGGERS } from '@windmill-labs/svelte-dnd-action';
 import SchemaForm from '../SchemaForm.svelte';
 import { GripVertical } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
@@ -26,9 +26,20 @@ function updateItems() {
         items = newItems;
     }
 }
+let dragStartTime = 0;
+const DRAG_GRACE_PERIOD_MS = 200;
 function handleConsider(e) {
     dragDisabledState = false;
-    const { items: newItems } = e.detail;
+    const { items: newItems, info } = e.detail;
+    if (info.trigger === TRIGGERS.DRAG_STARTED) {
+        dragStartTime = Date.now();
+        items = $state.snapshot(newItems);
+        return;
+    }
+    // Ignore reorders during grace period so small movements don't cause jumps
+    if (Date.now() - dragStartTime < DRAG_GRACE_PERIOD_MS) {
+        return;
+    }
     items = $state.snapshot(newItems);
 }
 function handleFinalize(e) {
@@ -76,7 +87,8 @@ $effect(() => {
 				items,
 				flipDurationMs,
 				dropTargetStyle: {},
-				type: dndType
+				type: dndType,
+				morphDisabled: true
 			}}
 	{items}
 	{diff}

package/package/components/scriptEditor/LogPanel.svelte

@@ -40,12 +40,18 @@ function asWorkflowStatus(x) {
         return {};
     const result = {};
     for (const [k, v] of Object.entries(x)) {
-        if (!k.startsWith('_'))
+        if (!k.startsWith('_') || k.startsWith('_step/'))
             result[k] = v;
     }
     return result;
 }
+function getStepResults(x) {
+    return x?._checkpoint?.completed_steps ?? {};
+}
 let forceJson = $state(false);
+let isWac = $derived(!!previewJob?.workflow_as_code_status);
+let wacDone = $derived(previewJob?.type == 'CompletedJob' ||
+    (previewJob != undefined && !previewIsLoading && !!previewJob.workflow_as_code_status));
 </script>
 
 <Drawer bind:open={drawerOpen} size="800px">
@@ -85,75 +91,81 @@ let forceJson = $state(false);
 		{#snippet content()}
 			<div class="grow min-h-0">
 				{#if selectedTab === 'logs'}
-					<SplitPanesWrapper>
-						<Splitpanes horizontal>
-							{#if previewJob?.workflow_as_code_status}
+					{#if isWac}
+						<div class="h-full overflow-auto">
+							<WorkflowTimeline
+								flow_status={asWorkflowStatus(previewJob?.workflow_as_code_status)}
+								flowDone={wacDone}
+								stepResults={getStepResults(previewJob?.workflow_as_code_status)}
+								result={previewJob?.result}
+								success={previewJob?.success !== false}
+								autoExpandResult
+								jobId={previewJob?.id}
+							/>
+						</div>
+					{:else}
+						<SplitPanesWrapper>
+							<Splitpanes horizontal>
 								<Pane class="relative">
-									<WorkflowTimeline
-										flow_status={asWorkflowStatus(previewJob.workflow_as_code_status)}
-										flowDone={previewJob.type == 'CompletedJob'}
+									<LogViewer
+										jobId={previewJob?.id}
+										duration={previewJob?.['duration_ms']}
+										mem={previewJob?.['mem_peak']}
+										content={previewJob?.logs}
+										isLoading={previewJob?.['running'] == false && previewIsLoading}
+										tag={previewJob?.tag}
+										download={customUi?.disableDownload !== true}
+										tagLabel={customUi?.tagLabel}
 									/>
 								</Pane>
-							{/if}
-							<Pane class="relative">
-								<LogViewer
-									jobId={previewJob?.id}
-									duration={previewJob?.['duration_ms']}
-									mem={previewJob?.['mem_peak']}
-									content={previewJob?.logs}
-									isLoading={previewJob?.['running'] == false && previewIsLoading}
-									tag={previewJob?.tag}
-									download={customUi?.disableDownload !== true}
-									tagLabel={customUi?.tagLabel}
-								/>
-							</Pane>
-							<Pane>
-								{@render children?.()}
-								{#if showCustomResultPanel && customResultPanel}
-									<div class="h-full">
-										{@render customResultPanel()}
-									</div>
-								{:else if previewJob != undefined && (previewJob.result_stream || previewJob.result)}
-									<div class="relative w-full h-full p-2">
-										<div class="relative h-full">
-											<DisplayResult
-												bind:forceJson
-												workspaceId={previewJob?.workspace_id}
-												jobId={previewJob?.id}
-												result={previewJob.result}
-												customUi={customUi?.displayResult}
-												language={lang}
-												result_stream={previewJob?.result_stream}
-												fixTableSizingToParent
+								<Pane>
+									{@render children?.()}
+									{#if showCustomResultPanel && customResultPanel}
+										<div class="h-full">
+											{@render customResultPanel()}
+										</div>
+									{:else if previewJob != undefined && (previewJob.result_stream || previewJob.result)}
+										<div class="relative w-full h-full p-2">
+											<div class="relative h-full">
+												<DisplayResult
+													bind:forceJson
+													workspaceId={previewJob?.workspace_id}
+													jobId={previewJob?.id}
+													result={previewJob.result}
+													customUi={customUi?.displayResult}
+													language={lang}
+													result_stream={previewJob?.result_stream}
+													fixTableSizingToParent
+												>
+													{#snippet copilot_fix()}
+														{#if lang && editor && diffEditor && args && previewJob && !previewJob.success && getStringError(previewJob.result)}
+															<ScriptFix {lang} />
+														{/if}
+													{/snippet}
+												</DisplayResult>
+											</div>
+										</div>
+									{:else}
+										<div class="text-sm text-primary p-2 flex justify-between items-center">
+											<span>
+												{#if previewIsLoading}
+													<Loader2 class="animate-spin" />
+												{:else}
+													Test to see the result here
+												{/if}
+											</span>
+											<Tooltip
+												documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
 											>
-												{#snippet copilot_fix()}
-													{#if lang && editor && diffEditor && args && previewJob && !previewJob.success && getStringError(previewJob.result)}
-														<ScriptFix {lang} />
-													{/if}
-												{/snippet}
-											</DisplayResult>
+												The result renderer in Windmill supports rich display rendering, allowing
+												you to customize the display format of your results.
+											</Tooltip>
 										</div>
-									</div>
-								{:else}
-									<div class="text-sm text-primary p-2 flex justify-between items-center">
-										<span>
-											{#if previewIsLoading}
-												<Loader2 class="animate-spin" />
-											{:else}
-												Test to see the result here
-											{/if}
-										</span>
-										<Tooltip
-											documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
-										>
-											The result renderer in Windmill supports rich display rendering, allowing you
-											to customize the display format of your results.
-										</Tooltip>
-									</div>
-								{/if}
-							</Pane>
-						</Splitpanes>
-					</SplitPanesWrapper>
+									{/if}
+								</Pane>
+							</Splitpanes>
+						</SplitPanesWrapper>
+					{/if}
 				{/if}
 				{#if selectedTab === 'history'}
 					<div>
@@ -256,9 +268,7 @@ let forceJson = $state(false);
 					{#if previewJob?.id}
 						<JobOtelTraces jobId={previewJob.id} />
 					{:else}
-						<div class="p-4 text-secondary">
-							Run a preview to see HTTP request traces
-						</div>
+						<div class="p-4 text-secondary"> Run a preview to see HTTP request traces </div>
 					{/if}
 				{/if}
 			</div>

package/package/components/script_builder.d.ts

@@ -13,7 +13,7 @@ export interface ScriptBuilderProps {
     disableAi?: boolean;
     fullyLoaded?: boolean;
     initialPath?: string;
-    template?: 'docker' | 'bunnative' | 'claudesandbox' | 'script';
+    template?: 'docker' | 'bunnative' | 'claudesandbox' | 'wac_python' | 'wac_typescript' | 'script';
     initialArgs?: Record<string, any>;
     lockedLanguage?: boolean;
     showMeta?: boolean;

package/package/components/scripts/CreateActionsScript.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { Code2, Plus } from 'lucide-svelte';
-import Button from '../common/button/Button.svelte';
-import { base } from '../../base';
+<script lang="ts">import { base } from '../../base';
+import { Code2, Plus } from 'lucide-svelte';
+import { Button } from '../common';
 let { aiId, aiDescription } = $props();
 </script>