windmill-components 1.642.0 → 1.655.1

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>;

package/package/components/recording/flowRecording.svelte.js

@@ -0,0 +1,205 @@
+const UUID_RE = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/gi;
+export function truncateUuids(json) {
+    const map = new Map();
+    let counter = 0;
+    return json.replace(UUID_RE, (uuid) => {
+        const key = uuid.toLowerCase();
+        let short = map.get(key);
+        if (!short) {
+            short = counter === 0 ? key.slice(-8) : key.slice(-8) + '_' + counter;
+            counter++;
+            map.set(key, short);
+        }
+        return short;
+    });
+}
+// Module-level active instances (bypasses context/portal issues)
+let activeRecording = undefined;
+let activeReplay = $state(undefined);
+let replayStartTime = 0;
+export function getActiveRecording() {
+    return activeRecording;
+}
+export function setActiveRecording(r) {
+    activeRecording = r;
+}
+export function getActiveReplay() {
+    return activeReplay;
+}
+export function setActiveReplay(r) {
+    activeReplay = r;
+    replayStartTime = r ? Date.now() : 0;
+}
+export function getReplayStartTime() {
+    return replayStartTime;
+}
+export function createFlowRecording() {
+    let active = $state(false);
+    let startTime = 0;
+    let flowPath = '';
+    let jobs = {};
+    let flow = undefined;
+    let watchedSubJobs = new Set();
+    let subJobSources = [];
+    return {
+        get active() {
+            return active;
+        },
+        start(path) {
+            subJobSources.forEach((es) => es.close());
+            subJobSources = [];
+            watchedSubJobs.clear();
+            active = true;
+            startTime = Date.now();
+            flowPath = path;
+            jobs = {};
+            flow = undefined;
+        },
+        setFlow(f) {
+            // JSON round-trip to strip non-serializable properties (event handlers, etc.)
+            flow = JSON.parse(JSON.stringify(f));
+        },
+        recordInitialJob(jobId, job) {
+            if (!active)
+                return;
+            // $state.snapshot unwraps Svelte 5 reactive proxies (structuredClone fails on them)
+            jobs[jobId] = {
+                initial_job: $state.snapshot(job),
+                events: []
+            };
+        },
+        recordEvent(jobId, data) {
+            if (!active)
+                return;
+            if (!jobs[jobId]) {
+                jobs[jobId] = {
+                    initial_job: data.job
+                        ? $state.snapshot(data.job)
+                        : {},
+                    events: []
+                };
+            }
+            jobs[jobId].events.push({
+                t: Date.now() - startTime,
+                data: $state.snapshot(data)
+            });
+        },
+        stop() {
+            active = false;
+            subJobSources.forEach((es) => es.close());
+            subJobSources = [];
+            const recording = {
+                version: 1,
+                recorded_at: new Date().toISOString(),
+                flow_path: flowPath,
+                total_duration_ms: Date.now() - startTime,
+                jobs,
+                flow
+            };
+            return recording;
+        },
+        /** Add a completed sub-job to the recording (called after stop for sub-jobs fetched post-completion) */
+        addCompletedJob(jobId, completedJob) {
+            const snapshotJob = $state.snapshot(completedJob);
+            if (!jobs[jobId]) {
+                jobs[jobId] = {
+                    initial_job: snapshotJob,
+                    events: []
+                };
+            }
+            else if (!jobs[jobId].initial_job?.id) {
+                // Replace placeholder initial_job created by recordEvent
+                jobs[jobId].initial_job = snapshotJob;
+            }
+            // Only add synthetic completed event if SSE didn't already capture one
+            const hasCompleted = jobs[jobId].events.some((e) => e.data.completed);
+            if (!hasCompleted) {
+                jobs[jobId].events.push({
+                    t: Date.now() - startTime,
+                    data: { completed: true, job: snapshotJob }
+                });
+            }
+        },
+        /** Watch a sub-job's SSE stream during recording to capture incremental log events */
+        watchSubJob(jobId, workspace) {
+            if (!active || watchedSubJobs.has(jobId))
+                return;
+            watchedSubJobs.add(jobId);
+            let subJobLogOffset = 0;
+            const params = new URLSearchParams({
+                log_offset: '0',
+                running: 'true',
+                fast: 'true'
+            });
+            const url = `/api/w/${workspace}/jobs_u/getupdate_sse/${jobId}?${params}`;
+            const es = new EventSource(url);
+            subJobSources.push(es);
+            es.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    if (data.type === 'ping' || data.type === 'timeout')
+                        return;
+                    if (data.type === 'error' || data.type === 'not_found') {
+                        es.close();
+                        return;
+                    }
+                    if (!active) {
+                        es.close();
+                        return;
+                    }
+                    // Deduplicate log data: SSE may resend full log dumps on reconnect.
+                    // Drop log data if the offset hasn't advanced past what we already recorded.
+                    if (data.new_logs != null && data.log_offset != null) {
+                        if (subJobLogOffset > 0 && data.log_offset <= subJobLogOffset) {
+                            delete data.new_logs;
+                            delete data.log_offset;
+                        }
+                        else {
+                            subJobLogOffset = data.log_offset;
+                        }
+                    }
+                    else if (data.log_offset != null && data.log_offset > subJobLogOffset) {
+                        subJobLogOffset = data.log_offset;
+                    }
+                    // Record initial job from the first event that carries job data
+                    if (!jobs[jobId] && data.job) {
+                        jobs[jobId] = {
+                            initial_job: data.job,
+                            events: []
+                        };
+                    }
+                    else if (!jobs[jobId]) {
+                        jobs[jobId] = {
+                            initial_job: {},
+                            events: []
+                        };
+                    }
+                    jobs[jobId].events.push({
+                        t: Date.now() - startTime,
+                        data
+                    });
+                    if (data.completed) {
+                        es.close();
+                    }
+                }
+                catch {
+                    // Ignore parse errors
+                }
+            };
+            es.onerror = () => {
+                es.close();
+            };
+        },
+        download(recording) {
+            const blob = new Blob([truncateUuids(JSON.stringify(recording, null, 2))], {
+                type: 'application/json'
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `flow-recording-${recording.flow_path.replace(/\//g, '-')}-${Date.now()}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+    };
+}

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

@@ -0,0 +1,9 @@
+import type { ActiveRecording, ActiveReplayData, ScriptRecording } from './types';
+export declare function createScriptRecording(): ScriptRecordingStore;
+export type ScriptRecordingStore = ActiveRecording & {
+    readonly active: boolean;
+    start(path: string, code: string, lang: string, args: Record<string, any>, schema?: Record<string, any>): void;
+    stop(): ScriptRecording;
+    toReplayData(recording: ScriptRecording): ActiveReplayData;
+    download(recording: ScriptRecording): void;
+};

package/package/components/recording/scriptRecording.svelte.js

@@ -0,0 +1,88 @@
+import { truncateUuids } from './flowRecording.svelte';
+export function createScriptRecording() {
+    let active = $state(false);
+    let startTime = 0;
+    let scriptPath = '';
+    let code = '';
+    let language = '';
+    let scriptArgs = {};
+    let scriptSchema = undefined;
+    let recordedJob = undefined;
+    return {
+        get active() {
+            return active;
+        },
+        start(path, scriptCode, lang, args, schema) {
+            active = true;
+            startTime = Date.now();
+            scriptPath = path;
+            code = scriptCode;
+            language = lang;
+            scriptArgs = JSON.parse(JSON.stringify(args));
+            scriptSchema = schema ? JSON.parse(JSON.stringify(schema)) : undefined;
+            recordedJob = undefined;
+        },
+        recordInitialJob(_id, job) {
+            if (!active)
+                return;
+            recordedJob = {
+                initial_job: $state.snapshot(job),
+                events: []
+            };
+        },
+        recordEvent(_id, data) {
+            if (!active)
+                return;
+            if (!recordedJob) {
+                recordedJob = {
+                    initial_job: data.job
+                        ? $state.snapshot(data.job)
+                        : {},
+                    events: []
+                };
+            }
+            recordedJob.events.push({
+                t: Date.now() - startTime,
+                data: $state.snapshot(data)
+            });
+        },
+        stop() {
+            active = false;
+            const recording = {
+                version: 1,
+                type: 'script',
+                recorded_at: new Date().toISOString(),
+                script_path: scriptPath,
+                total_duration_ms: Date.now() - startTime,
+                code,
+                language,
+                args: scriptArgs,
+                schema: scriptSchema,
+                job: recordedJob ?? { initial_job: {}, events: [] }
+            };
+            return recording;
+        },
+        /** Convert to ActiveReplayData shape for JobLoader replay */
+        toReplayData(recording) {
+            // Find the job ID from the recorded initial_job
+            const id = recording.job.initial_job?.id;
+            if (!id) {
+                return { jobs: {} };
+            }
+            return {
+                jobs: { [id]: recording.job }
+            };
+        },
+        download(recording) {
+            const blob = new Blob([truncateUuids(JSON.stringify(recording, null, 2))], {
+                type: 'application/json'
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `script-recording-${(recording.script_path || 'untitled').replace(/\//g, '-')}-${Date.now()}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+    };
+}

package/package/components/recording/types.d.ts

@@ -0,0 +1,39 @@
+import type { Job, OpenFlow } from '../../gen';
+export type RecordedEvent = {
+    t: number;
+    data: Record<string, any>;
+};
+export type RecordedJob = {
+    initial_job: Job;
+    events: RecordedEvent[];
+};
+export type FlowRecording = {
+    version: 1;
+    type?: 'flow';
+    recorded_at: string;
+    flow_path: string;
+    total_duration_ms: number;
+    jobs: Record<string, RecordedJob>;
+    flow?: OpenFlow;
+};
+export type ScriptRecording = {
+    version: 1;
+    type: 'script';
+    recorded_at: string;
+    script_path: string;
+    total_duration_ms: number;
+    code: string;
+    language: string;
+    args: Record<string, any>;
+    schema?: Record<string, any>;
+    job: RecordedJob;
+};
+/** Minimal interface that both flow and script recording stores implement */
+export interface ActiveRecording {
+    recordInitialJob(jobId: string, job: Job): void;
+    recordEvent(jobId: string, data: Record<string, any>): void;
+}
+/** Shape needed by JobLoader replay — a map of job ID to recorded data */
+export interface ActiveReplayData {
+    jobs: Record<string, RecordedJob>;
+}

package/package/components/recording/types.js

@@ -0,0 +1 @@
+export {};

package/package/components/resources/resourcesFilter.d.ts

@@ -12,6 +12,10 @@ export declare function buildResourcesFilterSchema({ paths, resourceTypes, owner
         icon: typeof Users;
         description: string;
     } | undefined;
+    _default_: {
+        type: "string";
+        hidden: true;
+    };
     resource_type: {
         type: "oneof";
         options: {

package/package/components/resources/resourcesFilter.js

@@ -1,6 +1,10 @@
 import { Boxes, FileCode, FileText, FolderIcon, Braces, Users } from 'lucide-svelte';
 export function buildResourcesFilterSchema({ paths, resourceTypes, owners, showUserFoldersFilter, userFoldersLabel }) {
     return {
+        _default_: {
+            type: 'string',
+            hidden: true
+        },
         resource_type: {
             type: 'oneof',
             options: resourceTypes.map((s) => ({ label: s, value: s })),

package/package/components/runs/JobRunsPreview.svelte

@@ -30,7 +30,14 @@ async function getConcurrencyKey(job) {
 let viewTab = $state('logs');
 setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => job?.raw_flow?.modules ?? [] }));
 function asWorkflowStatus(x) {
-    return x;
+    if (!x || typeof x !== 'object')
+        return {};
+    const result = {};
+    for (const [k, v] of Object.entries(x)) {
+        if (!k.startsWith('_'))
+            result[k] = v;
+    }
+    return result;
 }
 function handleFilterByConcurrencyKey(key) {
     dispatch('filterByConcurrencyKey', key);

package/package/components/runs/MobileFilters.svelte

@@ -2,17 +2,22 @@
 import { Filter } from 'lucide-svelte';
 import { Button } from '../common';
 import Popover from '../meltComponents/Popover.svelte';
+let { filters } = $props();
 </script>
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
-	<svelte:fragment slot="trigger">
-		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
-			Filters
-		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col w-80 p-4">
-			<slot name="filters" />
-		</div>
-	</svelte:fragment>
+	{#snippet trigger()}
+	
+			<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
+				Filters
+			</Button>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div class="flex flex-col w-80 p-4">
+				{@render filters?.()}
+			</div>
+		
+	{/snippet}
 </Popover>

package/package/components/runs/MobileFilters.svelte.d.ts

@@ -1,20 +1,6 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    filters?: import('svelte').Snippet;
 }
-declare const MobileFilters: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    filters: {};
-}, {}, string>;
-type MobileFilters = InstanceType<typeof MobileFilters>;
+declare const MobileFilters: import("svelte").Component<Props, {}, "">;
+type MobileFilters = ReturnType<typeof MobileFilters>;
 export default MobileFilters;