windmill-components 1.623.2 → 1.655.0

package/package/components/raw_apps/RunnableRow.svelte

@@ -1,41 +1,95 @@
 <script lang="ts">import { Badge, Button } from '../common';
-import { Ellipsis } from 'lucide-svelte';
+import { Ellipsis, Pencil } from 'lucide-svelte';
 import DropdownV2 from '../DropdownV2.svelte';
 import { twMerge } from 'tailwind-merge';
-let { id, runnable, isSelected, onSelect, onDelete } = $props();
+import TextInput from '../text_input/TextInput.svelte';
+import { tick, untrack } from 'svelte';
+let { id, runnable, isSelected, isEditing, onSelect, onDelete, onRename, onRequestEdit, onCancelEdit } = $props();
 let dropdownOpen = $state(false);
+let editValue = $state(untrack(() => id));
+let textInputElement = $state();
+function finishEdit() {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== id) {
+        onRename(trimmed);
+    }
+    else {
+        onCancelEdit();
+    }
+}
+function handleInputKeydown(e) {
+    if (e.key === 'Enter') {
+        finishEdit();
+    }
+    else if (e.key === 'Escape') {
+        editValue = id;
+        onCancelEdit();
+    }
+}
+$effect(() => {
+    if (isEditing && textInputElement) {
+        editValue = id;
+        tick().then(() => {
+            textInputElement?.focus();
+            textInputElement?.select();
+        });
+    }
+});
 </script>
 
-<button
-	{id}
-	class="relative w-full gap-1 flex items-center h-6 rounded-md px-1 group
-	{isSelected ? 'bg-surface-accent-selected text-accent' : 'hover:bg-surface-hover'}"
-	onclick={onSelect}
->
-	<Badge color="indigo" class={isSelected ? 'bg-surface-tertiary' : ''}>{id}</Badge>
-	<span class="text-xs truncate font-normal pr-6">{runnable?.name}</span>
-	<DropdownV2
-		items={[
-			{
-				displayName: 'Delete',
-				action: onDelete,
-				type: 'delete'
-			}
-		]}
-		class={twMerge(
-			'absolute -translate-y-1/2 top-1/2 right-1 hidden group-hover:block',
-			dropdownOpen ? 'block' : ''
-		)}
-		bind:open={dropdownOpen}
+{#if isEditing}
+	<div
+		class="w-full flex items-center gap-1 h-6 rounded-md px-1
+		{isSelected ? 'bg-surface-accent-selected text-accent' : ''}"
 	>
-		{#snippet buttonReplacement()}
-			<Button
-				iconOnly
-				unifiedSize="xs"
-				variant="subtle"
-				startIcon={{ icon: Ellipsis }}
-				nonCaptureEvent
-			/>
-		{/snippet}
-	</DropdownV2>
-</button>
+		<TextInput
+			bind:this={textInputElement}
+			bind:value={editValue}
+			inputProps={{
+				onkeydown: handleInputKeydown,
+				onblur: () => finishEdit(),
+				type: 'text'
+			}}
+			size="xs"
+		/>
+	</div>
+{:else}
+	<button
+		{id}
+		class="relative w-full gap-1 flex items-center h-6 rounded-md px-1 group
+		{isSelected ? 'bg-surface-accent-selected text-accent' : 'hover:bg-surface-hover'}"
+		onclick={onSelect}
+	>
+		<Badge color="indigo" class={isSelected ? 'bg-surface-tertiary' : ''}>{id}</Badge>
+		<span class="text-xs truncate font-normal pr-6">{runnable?.name}</span>
+		<DropdownV2
+			items={[
+				{
+					displayName: 'Rename',
+					icon: Pencil,
+					action: () => onRequestEdit()
+				},
+				{
+					displayName: 'Delete',
+					action: onDelete,
+					type: 'delete'
+				}
+			]}
+			class={twMerge(
+				'absolute -translate-y-1/2 top-1/2 right-1 hidden group-hover:block',
+				dropdownOpen ? 'block' : ''
+			)}
+			bind:open={dropdownOpen}
+		>
+			{#snippet buttonReplacement()}
+				<Button
+					iconOnly
+					unifiedSize="xs"
+					variant="subtle"
+					startIcon={{ icon: Ellipsis }}
+					nonCaptureEvent
+				/>
+			{/snippet}
+		</DropdownV2>
+	</button>
+{/if}

package/package/components/raw_apps/RunnableRow.svelte.d.ts

@@ -3,8 +3,12 @@ interface Props {
     id: string;
     runnable: Runnable;
     isSelected: boolean;
+    isEditing: boolean;
     onSelect: () => void;
     onDelete: () => void;
+    onRename: (newId: string) => void;
+    onRequestEdit: () => void;
+    onCancelEdit: () => void;
 }
 declare const RunnableRow: import("svelte").Component<Props, {}, "">;
 type RunnableRow = ReturnType<typeof RunnableRow>;

package/package/components/raw_apps/fileTreeUtils.js

@@ -14,12 +14,11 @@ export function buildFileTree(filePaths) {
             currentPath = currentPath ? `${currentPath}/${part}` : part;
             // It's a folder if it's not the last part, or if the original path ended with /
             const isFolder = i < parts.length - 1 || (i === parts.length - 1 && pathEndsWithSlash);
-            const isLastPart = i === parts.length - 1;
             // Check if this node already exists
             if (!nodeMap.has(currentPath)) {
                 // Build the node path with trailing / for folders
                 let nodePath = '/' + currentPath;
-                if (isFolder && isLastPart && pathEndsWithSlash) {
+                if (isFolder) {
                     nodePath = nodePath + '/';
                 }
                 const node = {
@@ -38,7 +37,7 @@ export function buildFileTree(filePaths) {
                     existingNode.isFolder = true;
                     existingNode.children = [];
                     // Update path to include trailing /
-                    if (isLastPart && pathEndsWithSlash && !existingNode.path.endsWith('/')) {
+                    if (!existingNode.path.endsWith('/')) {
                         existingNode.path = existingNode.path + '/';
                     }
                 }

package/package/components/raw_apps/utils.js

@@ -82,7 +82,12 @@ function hiddenRunnableToTsType(runnable) {
         }
     }
     else if (isRunnableByPath(runnable)) {
-        return schemaToTsType(removeStaticFields(runnable?.schema, runnable?.fields ?? {}));
+        if (runnable?.schema) {
+            return schemaToTsType(removeStaticFields(runnable.schema, runnable?.fields ?? {}));
+        }
+        else {
+            return '{}';
+        }
     }
     else {
         return '{}';

package/package/components/recording/FlowRecordingReplay.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">import { workspaceStore } from '../../stores';
+import FlowStatusViewer from '../FlowStatusViewer.svelte';
+import FlowViewer from '../FlowViewer.svelte';
+import FlowProgressBar from '../flows/FlowProgressBar.svelte';
+import FlowExecutionStatus from '../runs/FlowExecutionStatus.svelte';
+import { setActiveReplay } from './flowRecording.svelte';
+import { sendUserToast } from '../../toast';
+import { Button } from '../common';
+import Tooltip from '../meltComponents/Tooltip.svelte';
+import { InfoIcon, LogOut, Play, Square } from 'lucide-svelte';
+import { onDestroy } from 'svelte';
+let { recording } = $props();
+let replayState = $state('loaded');
+let rootJobId = $state(undefined);
+let rootInitialJob = $state(undefined);
+let job = $state(undefined);
+let done = $derived(job?.type === 'CompletedJob');
+function stop() {
+    setActiveReplay(undefined);
+    job = undefined;
+    initRecording();
+}
+function findRootJobId(data) {
+    for (const [id, recorded] of Object.entries(data.jobs)) {
+        const j = recorded.initial_job;
+        if ((j.job_kind === 'flow' || j.job_kind === 'flowpreview') &&
+            !j.parent_job) {
+            return id;
+        }
+    }
+    for (const [id, recorded] of Object.entries(data.jobs)) {
+        if (!recorded.initial_job.parent_job)
+            return id;
+    }
+    return Object.keys(data.jobs)[0];
+}
+/**
+ * Offset all absolute timestamps in the recording so they are relative to "now".
+ * TimelineCompute uses Date.now() for in-progress bars, so we need recorded
+ * started_at/created_at values to be near the current time.
+ */
+function rebaseTimestamps(data, rootId) {
+    const rootJob = data.jobs[rootId]?.initial_job;
+    const anchor = rootJob?.started_at ?? rootJob?.created_at;
+    if (!anchor)
+        return data;
+    const earliest = new Date(anchor).getTime();
+    if (isNaN(earliest))
+        return data;
+    const offset = Date.now() - earliest;
+    function offsetDate(d) {
+        if (!d)
+            return d;
+        const t = new Date(d).getTime();
+        if (isNaN(t))
+            return d;
+        return new Date(t + offset).toISOString();
+    }
+    function offsetJobTimestamps(j) {
+        if (j.started_at)
+            j.started_at = offsetDate(j.started_at);
+        if (j.created_at)
+            j.created_at = offsetDate(j.created_at);
+        if (j.completed_at)
+            j.completed_at = offsetDate(j.completed_at);
+    }
+    function offsetFlowStatus(fs) {
+        if (!fs?.modules)
+            return;
+        for (const mod of fs.modules) {
+            const durations = mod.flow_jobs_duration;
+            if (durations?.started_at) {
+                durations.started_at = durations.started_at.map((d) => offsetDate(d) ?? d);
+            }
+        }
+    }
+    for (const recorded of Object.values(data.jobs)) {
+        offsetJobTimestamps(recorded.initial_job);
+        for (const event of recorded.events) {
+            if (event.data?.job)
+                offsetJobTimestamps(event.data.job);
+            if (event.data?.flow_status)
+                offsetFlowStatus(event.data.flow_status);
+        }
+    }
+    return data;
+}
+function buildInitialJob(data, jobId) {
+    const initialJob = JSON.parse(JSON.stringify(data.jobs[jobId].initial_job));
+    if (data.flow?.value) {
+        initialJob.raw_flow = JSON.parse(JSON.stringify(data.flow.value));
+    }
+    return initialJob;
+}
+function initRecording() {
+    const flowJobId = findRootJobId(recording);
+    if (!flowJobId) {
+        sendUserToast('Recording has no jobs', true);
+        return;
+    }
+    rootJobId = flowJobId;
+    rootInitialJob = buildInitialJob(recording, flowJobId);
+    replayState = 'loaded';
+}
+// Initialize on mount
+initRecording();
+/**
+ * Ensure the root flow's completed event fires after all sub-job events.
+ * During recording, addCompletedJob runs after the flow completes, so sub-job
+ * completed events can have a later `t` than the root's completed event.
+ */
+function fixEventOrdering(data, rootId) {
+    const rootEvents = data.jobs[rootId]?.events;
+    if (!rootEvents?.length)
+        return;
+    // Find the latest event.t across all sub-jobs
+    let maxSubJobT = 0;
+    for (const [id, recorded] of Object.entries(data.jobs)) {
+        if (id === rootId)
+            continue;
+        for (const event of recorded.events) {
+            if (event.t > maxSubJobT)
+                maxSubJobT = event.t;
+        }
+    }
+    // Push the root's completed event to fire after all sub-job events
+    let completedIdx = -1;
+    for (let i = rootEvents.length - 1; i >= 0; i--) {
+        if (rootEvents[i].data.completed) {
+            completedIdx = i;
+            break;
+        }
+    }
+    if (completedIdx >= 0 && rootEvents[completedIdx].t < maxSubJobT) {
+        rootEvents[completedIdx].t = maxSubJobT + 50;
+    }
+}
+function startReplay() {
+    // JSON round-trip to unwrap reactive proxies and strip non-cloneable properties
+    const snapshot = JSON.parse(JSON.stringify(recording));
+    fixEventOrdering(snapshot, rootJobId);
+    rebaseTimestamps(snapshot, rootJobId);
+    setActiveReplay(snapshot);
+    rootInitialJob = buildInitialJob(snapshot, rootJobId);
+    job = undefined;
+    replayState = 'playing';
+}
+onDestroy(() => {
+    setActiveReplay(undefined);
+});
+</script>
+
+{#if !recording?.flow}
+	<div class="flex flex-col items-center justify-center min-h-[60vh]">
+		<div class="border rounded-lg p-8 bg-surface-tertiary max-w-md w-full text-center">
+			<p class="text-xs text-secondary">
+				This recording does not include a flow definition. It was likely recorded with an older
+				version. Re-record the flow to include the flow definition.
+			</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.flow_path}</h2>
+				<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>
+			<Button variant="contained" color="blue" on:click={startReplay} startIcon={{ icon: Play }}>
+				Play
+			</Button>
+		</div>
+		<FlowViewer flow={recording.flow} noSummary />
+	</div>
+{:else if replayState === 'playing' && rootJobId}
+	<div class="flex flex-col gap-4">
+		<div class="flex items-center justify-between">
+			<h2 class="text-lg font-semibold text-emphasis">Replaying: {recording.flow_path}</h2>
+			<Button variant="border" size="xs" on:click={stop} startIcon={{ icon: done ? LogOut : Square }}>
+				{done ? 'Exit' : 'Stop'}
+			</Button>
+		</div>
+		<FlowProgressBar {job} slim textPosition="bottom" showStepId />
+		{#if job}
+			<FlowExecutionStatus
+				{job}
+				workspaceId={$workspaceStore}
+				isOwner={false}
+				innerModules={job?.flow_status?.modules}
+				suspendStatus={{ val: {} }}
+			/>
+		{/if}
+		<FlowStatusViewer
+			jobId={rootJobId}
+			initialJob={rootInitialJob}
+			bind:job
+			workspaceId={$workspaceStore}
+			wideResults
+			showLogsWithResult
+		/>
+	</div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { FlowRecording } from './types';
+interface Props {
+    recording: FlowRecording;
+}
+declare const FlowRecordingReplay: import("svelte").Component<Props, {}, "">;
+type FlowRecordingReplay = ReturnType<typeof FlowRecordingReplay>;
+export default FlowRecordingReplay;

package/package/components/recording/ScriptRecordingReplay.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">import { setActiveReplay } from './flowRecording.svelte';
+import { createScriptRecording } from './scriptRecording.svelte';
+import { sendUserToast } from '../../toast';
+import { Button, Tab, TabContent } from '../common';
+import Tooltip from '../meltComponents/Tooltip.svelte';
+import Tabs from '../common/tabs/Tabs.svelte';
+import HighlightCode from '../HighlightCode.svelte';
+import { Highlight } from 'svelte-highlight';
+import { json as jsonLang } from 'svelte-highlight/languages';
+import HighlightTheme from '../HighlightTheme.svelte';
+import JobArgs from '../JobArgs.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 jobId = $state(undefined);
+let job = $state(undefined);
+let jobLoader = $state(undefined);
+let done = $derived(job?.type === 'CompletedJob');
+let scriptRecordingStore = createScriptRecording();
+function stop() {
+    setActiveReplay(undefined);
+    job = undefined;
+    replayState = 'loaded';
+}
+/**
+ * Rebase absolute timestamps so they are relative to "now".
+ * JobLoader replay uses Date.now() for delay computation.
+ */
+function rebaseTimestamps(data) {
+    const anchor = data.job?.initial_job?.started_at ?? data.job?.initial_job?.created_at;
+    if (!anchor)
+        return data;
+    const earliest = new Date(anchor).getTime();
+    if (isNaN(earliest))
+        return data;
+    const offset = Date.now() - earliest;
+    function offsetDate(d) {
+        if (!d)
+            return d;
+        const t = new Date(d).getTime();
+        if (isNaN(t))
+            return d;
+        return new Date(t + offset).toISOString();
+    }
+    function offsetJobTimestamps(j) {
+        if (j.started_at)
+            j.started_at = offsetDate(j.started_at);
+        if (j.created_at)
+            j.created_at = offsetDate(j.created_at);
+        if (j.completed_at)
+            j.completed_at = offsetDate(j.completed_at);
+    }
+    offsetJobTimestamps(data.job.initial_job);
+    for (const event of data.job.events) {
+        if (event.data?.job)
+            offsetJobTimestamps(event.data.job);
+    }
+    return data;
+}
+function initRecording() {
+    const id = recording.job?.initial_job?.id;
+    if (!id) {
+        sendUserToast('Recording has no job data', true);
+        return;
+    }
+    jobId = id;
+    replayState = 'loaded';
+}
+initRecording();
+async function startReplay() {
+    const snapshot = JSON.parse(JSON.stringify(recording));
+    rebaseTimestamps(snapshot);
+    const replayData = scriptRecordingStore.toReplayData(snapshot);
+    setActiveReplay(replayData);
+    job = undefined;
+    replayState = 'playing';
+    await tick();
+    if (jobLoader && jobId) {
+        jobLoader.watchJob(jobId);
+    }
+}
+onDestroy(() => {
+    setActiveReplay(undefined);
+});
+let schema = $derived(recording.schema);
+</script>
+
+<HighlightTheme />
+
+{#if !recording?.job?.initial_job?.id}
+	<div class="flex flex-col items-center justify-center min-h-[60vh]">
+		<div class="border rounded-lg p-8 bg-surface-tertiary max-w-md w-full text-center">
+			<p class="text-xs text-secondary">
+				This recording does not contain valid job data. It may have been recorded incorrectly.
+			</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>
+			</div>
+			<Button variant="contained" color="blue" on:click={startReplay} startIcon={{ icon: Play }}>
+				Play
+			</Button>
+		</div>
+
+		{#if recording.args && Object.keys(recording.args).length > 0}
+			<JobArgs args={recording.args} />
+		{/if}
+
+		<Tabs selected="code">
+			<Tab value="code" label="Code" />
+			{#if schema}
+				<Tab value="schema" label="Schema" />
+			{/if}
+			{#snippet content()}
+				<TabContent value="code">
+					<div class="p-2 w-full overflow-auto">
+						<HighlightCode
+							language={recording.language as Script['language']}
+							code={recording.code}
+							lines
+							className="text-xs"
+						/>
+					</div>
+				</TabContent>
+				<TabContent value="schema">
+					<div class="p-1 relative overflow-auto text-xs">
+						{#if schema}
+							<button
+								onclick={() => copyToClipboard(JSON.stringify(schema, null, 4))}
+								class="absolute top-2 right-2"
+							>
+								<ClipboardCopy size={14} />
+							</button>
+							<Highlight language={jsonLang} code={JSON.stringify(schema, null, 4)} />
+						{:else}
+							<p class="bg-surface-secondary text-sm p-2">
+								No schema available in this recording
+							</p>
+						{/if}
+					</div>
+				</TabContent>
+			{/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

@@ -0,0 +1,7 @@
+import type { ScriptRecording } from './types';
+interface Props {
+    recording: ScriptRecording;
+}
+declare const ScriptRecordingReplay: import("svelte").Component<Props, {}, "">;
+type ScriptRecordingReplay = ReturnType<typeof ScriptRecordingReplay>;
+export default ScriptRecordingReplay;

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

@@ -0,0 +1,22 @@
+import type { Job, OpenFlow } from '../../gen';
+import type { ActiveRecording, ActiveReplayData, FlowRecording } from './types';
+export declare function truncateUuids(json: string): string;
+export declare function getActiveRecording(): ActiveRecording | undefined;
+export declare function setActiveRecording(r: ActiveRecording | undefined): void;
+export declare function getActiveReplay(): ActiveReplayData | undefined;
+export declare function setActiveReplay(r: ActiveReplayData | undefined): void;
+export declare function getReplayStartTime(): number;
+export declare function createFlowRecording(): {
+    readonly active: boolean;
+    start(path: string): void;
+    setFlow(f: OpenFlow): void;
+    recordInitialJob(jobId: string, job: Job): void;
+    recordEvent(jobId: string, data: Record<string, any>): void;
+    stop(): FlowRecording;
+    /** Add a completed sub-job to the recording (called after stop for sub-jobs fetched post-completion) */
+    addCompletedJob(jobId: string, completedJob: Job): void;
+    /** Watch a sub-job's SSE stream during recording to capture incremental log events */
+    watchSubJob(jobId: string, workspace: string): void;
+    download(recording: FlowRecording): void;
+};
+export type FlowRecordingStore = ReturnType<typeof createFlowRecording>;