windmill-components 1.642.0 → 1.655.1

package/package/components/JobLoader.svelte

@@ -7,6 +7,7 @@ import { workspaceStore } from '../stores';
 import { getContext, onDestroy, tick, untrack } from 'svelte';
 import { sendUserToast } from '../toast';
 import { DynamicInput, isScriptPreview } from '../utils';
+import { getActiveRecording, getActiveReplay, getReplayStartTime } from './recording/flowRecording.svelte';
 let { isLoading = $bindable(false), job = $bindable(undefined), noCode = false, allowConcurentRequests = false, workspaceOverride = undefined, notfound = $bindable(false), jobUpdateLastFetch = $bindable(undefined), toastError = false, onlyResult = false, loadPlaceholderJobOnStart = undefined, scriptProgress = $bindable(undefined), noLogs = false, children } = $props();
 let workspace = $derived(workspaceOverride ?? $workspaceStore);
 let syncIteration = 0;
@@ -20,7 +21,7 @@ let ITERATIONS_BEFORE_SUPER_SLOW_REFRESH = 100;
 let lastStartedAt = Date.now();
 let currentId = $state(undefined);
 let noPingTimeout = undefined;
-let lastNoLogs = $state(noLogs);
+let lastNoLogs = $state(untrack(() => noLogs));
 let lastCompletedJobId = $state(undefined);
 let token = getContext('AuthToken');
 $effect(() => {
@@ -212,6 +213,7 @@ function supportsSSE() {
     }
     return sseSupported;
 }
+let replayTimeouts = [];
 let startedWatchingJob = undefined;
 export async function watchJob(testId, callbacks) {
     logOffset = 0;
@@ -220,6 +222,50 @@ export async function watchJob(testId, callbacks) {
     errorIteration = 0;
     currentId = testId;
     scriptProgress = undefined;
+    // Replay mode: feed recorded events instead of real SSE
+    const replay = getActiveReplay();
+    if (replay) {
+        const recorded = replay.jobs[testId];
+        if (recorded) {
+            job = JSON.parse(JSON.stringify(recorded.initial_job));
+            callbacks?.change?.(job);
+            // Compute delays relative to replay start so sub-jobs (discovered
+            // later by FlowStatusViewerInner) stay in sync with the root job.
+            const elapsed = Date.now() - getReplayStartTime();
+            for (const event of recorded.events) {
+                const delay = Math.max(0, event.t - elapsed);
+                const timeout = setTimeout(() => {
+                    if (job) {
+                        updateJobFromProgress(event.data, job, callbacks);
+                    }
+                    if (event.data.completed) {
+                        const njob = event.data.job;
+                        if (njob) {
+                            // Use whichever logs are more complete (longer)
+                            const streamedLogs = job?.logs ?? '';
+                            const completedLogs = njob.logs ?? '';
+                            njob.logs =
+                                streamedLogs.length >= completedLogs.length ? streamedLogs : completedLogs;
+                            const streamedResult = job?.result_stream ?? '';
+                            const completedResult = njob.result_stream ?? '';
+                            njob.result_stream =
+                                streamedResult.length >= completedResult.length ? streamedResult : completedResult;
+                            job = njob;
+                            onJobCompleted(testId, job, callbacks);
+                        }
+                    }
+                }, delay);
+                replayTimeouts.push(timeout);
+            }
+            return;
+        }
+        // Job not in recording — stub it to prevent API calls
+        const stubJob = { id: testId, type: 'CompletedJob', success: true };
+        job = stubJob;
+        callbacks?.change?.(stubJob);
+        clearCurrentId();
+        return;
+    }
     if (loadPlaceholderJobOnStart) {
         job = structuredClone(loadPlaceholderJobOnStart);
     }
@@ -417,6 +463,7 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                     noCode
                 });
                 callbacks?.change?.(job);
+                getActiveRecording()?.recordInitialJob(id, job);
             }
             if (!onlyResult) {
                 callbacks?.resultStreamUpdate?.({
@@ -509,6 +556,7 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                             throw new Error('Not found');
                         }
                         jobUpdateLastFetch = new Date();
+                        getActiveRecording()?.recordEvent(id, previewJobUpdates);
                         if (job) {
                             updateJobFromProgress(previewJobUpdates, job, callbacks);
                         }
@@ -629,6 +677,8 @@ onDestroy(async () => {
     clearCurrentId();
     currentEventSource?.close();
     currentEventSource = undefined;
+    replayTimeouts.forEach(clearTimeout);
+    replayTimeouts = [];
 });
 </script>
 

package/package/components/KanidmSetting.svelte

@@ -1,18 +1,11 @@
-<script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
-export let value;
+let { value = $bindable() } = $props();
 const AUTH_URL_SUFFIX = '/ui/oauth2';
-$: enabled = value != undefined;
-// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
-//
-// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
-// also allow lazy/async binding of the `value` prop.
-$: derivedBaseUrl = value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, '');
-let proxyUrlValue = undefined;
-$: baseUrl = proxyUrlValue ?? derivedBaseUrl ?? '';
-$: changeValues({ baseUrl, id: value?.id ?? '' });
+let proxyUrlValue = $state(undefined);
 function changeValues({ baseUrl, id }) {
     if (value) {
         value = {
@@ -32,10 +25,20 @@ function changeValues({ baseUrl, id }) {
         proxyUrlValue = baseUrl;
     }
 }
+let enabled = $derived(value != undefined);
+// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
+//
+// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
+// also allow lazy/async binding of the `value` prop.
+let derivedBaseUrl = $derived(value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, ''));
+let baseUrl = $derived(proxyUrlValue ?? derivedBaseUrl ?? '');
+run(() => {
+    changeValues({ baseUrl, id: value?.id ?? '' });
+});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'kanidm'} after={true} /></div><Toggle
 			checked={enabled}

package/package/components/KanidmSetting.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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const KanidmSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type KanidmSetting = InstanceType<typeof KanidmSetting>;
+}
+declare const KanidmSetting: import("svelte").Component<Props, {}, "value">;
+type KanidmSetting = ReturnType<typeof KanidmSetting>;
 export default KanidmSetting;

package/package/components/KeycloakSetting.svelte

@@ -1,13 +1,12 @@
-<script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
-export let value;
-$: enabled = value != undefined;
-let org = '';
-$: changeOrg(org);
+let { value = $bindable() } = $props();
+let lastOrg = undefined;
 function changeOrg(org) {
-    if (value) {
+    if (value && org) {
         value = {
             ...value,
             connect_config: {
@@ -24,16 +23,23 @@ function changeOrg(org) {
         };
     }
 }
+let enabled = $derived(value != undefined);
+$effect.pre(() => {
+    if (value?.['org'] != lastOrg) {
+        lastOrg = value?.['org'];
+        untrack(() => changeOrg(value?.['org']));
+    }
+});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'keycloak'} after={true} /></div><Toggle
 			checked={enabled}
 			on:change={(e) => {
 				if (e.detail) {
-					value = { id: '', secret: '' }
+					value = { id: '', secret: '', org: '' }
 				} else {
 					value = undefined
 				}
@@ -47,7 +53,10 @@ function changeOrg(org) {
 				<span class="text-secondary font-normal text-xs"
 					>{'REALM_URL/protocol/openid-connect/auth'}</span
 				>
-				<TextInput inputProps={{ type: 'text', placeholder: 'yourorg' }} bind:value={org} />
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'yourorg' }}
+					bind:value={value['org']}
+				/>
 			</label>
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Custom Name</span>

package/package/components/KeycloakSetting.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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const KeycloakSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type KeycloakSetting = InstanceType<typeof KeycloakSetting>;
+}
+declare const KeycloakSetting: import("svelte").Component<Props, {}, "value">;
+type KeycloakSetting = ReturnType<typeof KeycloakSetting>;
 export default KeycloakSetting;

package/package/components/LogId.svelte

@@ -1,3 +1,6 @@
-<script lang="ts">export let id;
-$: id && console.log('updateJobId');
+<script lang="ts">import { run } from 'svelte/legacy';
+let { id } = $props();
+run(() => {
+    id && console.log('updateJobId');
+});
 </script>

package/package/components/LogId.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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const LogId: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type LogId = InstanceType<typeof LogId>;
+}
+declare const LogId: import("svelte").Component<Props, {}, "">;
+type LogId = ReturnType<typeof LogId>;
 export default LogId;

package/package/components/LogSnippetViewer.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { AnsiUp } from 'ansi_up';
-export let content;
-export let highlighted;
+<script lang="ts">import { untrack } from 'svelte';
+import { AnsiUp } from 'ansi_up';
+let { content, highlighted, onClick } = $props();
 const ansi_up = new AnsiUp();
 ansi_up.use_classes = true;
 function highlightSnippet(snippet) {
@@ -20,10 +20,10 @@ function highlightSnippet(snippet) {
         .replaceAll(closer, '</span>');
     return html2;
 }
-let html = highlightSnippet(content);
+let html = highlightSnippet(untrack(() => content));
 </script>
 
-<button on:click class="font-light !m-0 !p-0">
+<button onclick={onClick} class="font-light !m-0 !p-0">
 	<pre
 		class="bg-surface-secondary hover:bg-surface px-2 py-1 text-secondary text-xs w-[100%] whitespace-pre border min-w-full text-start">
 {@html html}

package/package/components/LogSnippetViewer.svelte.d.ts

@@ -1,23 +1,8 @@
-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 LogSnippetViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     content: string;
     highlighted: any[];
-}, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type LogSnippetViewer = InstanceType<typeof LogSnippetViewer>;
+    onClick?: () => void;
+}
+declare const LogSnippetViewer: import("svelte").Component<Props, {}, "">;
+type LogSnippetViewer = ReturnType<typeof LogSnippetViewer>;
 export default LogSnippetViewer;

package/package/components/LogViewer.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" module>"use strict";
+<script lang="ts" module>import { untrack } from 'svelte';
 const s3LogPrefixes = [
     '[windmill] Previous logs have been saved to object storage at logs/',
     '[windmill] Previous logs have been saved to disk at logs/',
@@ -28,7 +28,7 @@ let div = $state(null);
 // let downloadStartUrl: string | undefined = undefined
 let LOG_INC = 10000;
 let LOG_LIMIT = $state(LOG_INC);
-let lastJobId = $state(jobId);
+let lastJobId = $state(untrack(() => jobId));
 let loadedFromObjectStore = $state('');
 function findPrefixInfo(truncateContent) {
     // Quick check - [windmill] is rare, so bail early in the common case

package/package/components/ManualPopover.svelte

@@ -2,11 +2,14 @@
 import Portal from './Portal.svelte';
 import { fade } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
+import { untrack } from 'svelte';
 export async function refresh() {
     await getInstance()?.update();
 }
 let { placement = 'bottom', class: clazz = '', showTooltip = $bindable(false), children, content } = $props();
-const [popperRef, popperContent, getInstance] = createPopperActions({ placement });
+const [popperRef, popperContent, getInstance] = createPopperActions({
+    placement: untrack(() => placement)
+});
 export function open() {
     showTooltip = true;
 }

package/package/components/MapResult.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { Map, View, Feature } from 'ol';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { Map, View, Feature } from 'ol';
 import { Fill, Stroke, Style, Text } from 'ol/style.js';
 import { useGeographic } from 'ol/proj.js';
 import { OSM, Vector as VectorSource } from 'ol/source.js';
@@ -6,15 +7,12 @@ import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer.js';
 import { Point } from 'ol/geom.js';
 import { defaults as defaultControls } from 'ol/control.js';
 import CircleStyle from 'ol/style/Circle.js';
-export let lon = undefined;
-export let lat = undefined;
-export let zoom = undefined;
-export let markers = undefined;
+let { lon = undefined, lat = undefined, zoom = undefined, markers = undefined } = $props();
 const LAYER_NAME = {
     MARKER: 'Marker'
 };
-let map = undefined;
-let mapElement = undefined;
+let map = $state(undefined);
+let mapElement = $state(undefined);
 function getLayersByName(name) {
     return map
         ?.getLayers()
@@ -83,34 +81,36 @@ function updateMarkers() {
     }
     createMarkerLayers()?.forEach((l) => map?.addLayer(l));
 }
-$: if (!map && mapElement) {
-    useGeographic();
-    map = new Map({
-        target: mapElement,
-        layers: [
-            new TileLayer({
-                source: new OSM()
+run(() => {
+    if (!map && mapElement) {
+        useGeographic();
+        map = new Map({
+            target: mapElement,
+            layers: [
+                new TileLayer({
+                    source: new OSM()
+                }),
+                ...(createMarkerLayers() || [])
+            ],
+            view: new View({
+                center: [lon ?? 0, lat ?? 0],
+                zoom: zoom ?? 2
             }),
-            ...(createMarkerLayers() || [])
-        ],
-        view: new View({
-            center: [lon ?? 0, lat ?? 0],
-            zoom: zoom ?? 2
-        }),
-        controls: defaultControls({
-            attribution: false
-        })
-    });
-    if (lat && lon) {
-        map.getView().setCenter([lon, lat]);
-    }
-    if (map && zoom) {
-        map.getView().setZoom(zoom);
-    }
-    if (map && markers) {
-        updateMarkers();
+            controls: defaultControls({
+                attribution: false
+            })
+        });
+        if (lat && lon) {
+            map.getView().setCenter([lon, lat]);
+        }
+        if (map && zoom) {
+            map.getView().setZoom(zoom);
+        }
+        if (map && markers) {
+            updateMarkers();
+        }
     }
-}
+});
 </script>
 
 <div bind:this={mapElement} class="w-full h-[300px]"></div>

package/package/components/MapResult.svelte.d.ts

@@ -1,31 +1,18 @@
-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;
+interface Marker {
+    lon: number;
+    lat: number;
+    title?: string;
+    radius?: number;
+    color?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
 }
-declare const MapResult: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     lon?: number | undefined;
     lat?: number | undefined;
     zoom?: number | undefined;
-    markers?: {
-        lon: number;
-        lat: number;
-        title?: string;
-        radius?: number;
-        color?: string;
-        strokeWidth?: number;
-        strokeColor?: string;
-    }[] | string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MapResult = InstanceType<typeof MapResult>;
+    markers?: Marker[] | string | undefined;
+}
+declare const MapResult: import("svelte").Component<Props, {}, "">;
+type MapResult = ReturnType<typeof MapResult>;
 export default MapResult;

package/package/components/MemoryFootprintViewer.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">import { MetricsService } from '../gen';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { MetricsService } from '../gen';
 import { displayTime } from '../utils';
 import { workspaceStore } from '../stores';
 import { CategoryScale, Chart as ChartJS, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from 'chart.js';
 import { Line } from './chartjs-wrappers/chartJs';
 import { Alert } from './common';
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);
-export let jobId;
-export let jobUpdateLastFetch;
+let { jobId, jobUpdateLastFetch } = $props();
 let jobMetricsLastFetch = undefined;
-let jobMemoryStats = undefined;
-let data = [];
+let jobMemoryStats = $state(undefined);
+let data = $state([]);
 let labels = [];
 async function loadMetricsData() {
     try {
@@ -44,7 +44,9 @@ async function loadMetricsData() {
     }
     data = [...data];
 }
-$: jobUpdateLastFetch && loadMetricsData();
+run(() => {
+    jobUpdateLastFetch && loadMetricsData();
+});
 </script>
 
 <div class="relative max-h-100">

package/package/components/MemoryFootprintViewer.svelte.d.ts

@@ -1,21 +1,7 @@
-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 MemoryFootprintViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     jobId: string;
     jobUpdateLastFetch: Date | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MemoryFootprintViewer = InstanceType<typeof MemoryFootprintViewer>;
+}
+declare const MemoryFootprintViewer: import("svelte").Component<Props, {}, "">;
+type MemoryFootprintViewer = ReturnType<typeof MemoryFootprintViewer>;
 export default MemoryFootprintViewer;

package/package/components/ModulePreview.svelte.d.ts

@@ -18,6 +18,6 @@ interface Props {
 }
 declare const ModulePreview: import("svelte").Component<Props, {
     runTestWithStepArgs: () => void;
-}, "scriptProgress" | "testJob" | "testIsLoading">;
+}, "testJob" | "scriptProgress" | "testIsLoading">;
 type ModulePreview = ReturnType<typeof ModulePreview>;
 export default ModulePreview;

package/package/components/ModuleStatus.svelte

@@ -2,9 +2,7 @@
 import { forLater } from '../forLater';
 import { displayDate } from '../utils';
 import { Hourglass } from 'lucide-svelte';
-export let type;
-export let scheduled_for;
-export let skipped = false;
+let { type, scheduled_for, skipped = false } = $props();
 </script>
 
 {#if type == 'WaitingForEvents'}

package/package/components/ModuleStatus.svelte.d.ts

@@ -1,23 +1,9 @@
 import type { FlowStatusModule } 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 ModuleStatus: $$__sveltets_2_IsomorphicComponent<{
-    type: FlowStatusModule["type"];
+interface Props {
+    type: FlowStatusModule['type'];
     scheduled_for: Date | undefined;
     skipped?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ModuleStatus = InstanceType<typeof ModuleStatus>;
+}
+declare const ModuleStatus: import("svelte").Component<Props, {}, "">;
+type ModuleStatus = ReturnType<typeof ModuleStatus>;
 export default ModuleStatus;

package/package/components/ModuleTest.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { ScriptService } from '../gen';
 import { workspaceStore } from '../stores';
 import { getScriptByPath } from '../scripts';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import JobLoader, {} from './JobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import { loadSchemaFromModule } from './flows/flowInfers';
@@ -106,8 +106,8 @@ $effect(() => {
     // Update testJob to read the state from parent components
     testJob = modulesTestStates.states?.[mod.id]?.testJob;
 });
-modulesTestStates.states[mod.id] = {
-    ...(modulesTestStates.states?.[mod.id] ?? { loading: false }),
+modulesTestStates.states[untrack(() => mod).id] = {
+    ...(modulesTestStates.states?.[untrack(() => mod).id] ?? { loading: false }),
     loading: testIsLoading,
     testJob: testJob
 };

package/package/components/ModuleTest.svelte.d.ts

@@ -12,6 +12,6 @@ declare const ModuleTest: import("svelte").Component<Props, {
     loadArgsAndRunTest: () => void;
     runTest: (args: any) => Promise<void>;
     cancelJob: () => void;
-}, "scriptProgress" | "testJob" | "testIsLoading">;
+}, "testJob" | "scriptProgress" | "testIsLoading">;
 type ModuleTest = ReturnType<typeof ModuleTest>;
 export default ModuleTest;