windmill-components 1.558.4 → 1.596.0

package/package/components/Label.svelte

@@ -1,19 +1,31 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import Required from './Required.svelte';
-let { label = undefined, primary = false, disabled = false, headless = false, required = false, headerClass = '', class: clazz = undefined, header, error, action, children } = $props();
+import Tooltip from './Tooltip.svelte';
+import { enterpriseLicense } from '../stores';
+import EEOnly from './EEOnly.svelte';
+let { label = undefined, disabled = false, headless = false, required = false, headerClass = '', class: clazz = undefined, for: forAttr = undefined, tooltip = undefined, eeOnly = false, header, error, action, children } = $props();
 </script>
 
-<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', clazz)}>
+<div
+	class={twMerge('flex flex-col gap-1', disabled ? 'opacity-60 pointer-events-none' : '', clazz)}
+>
 	<div class="flex flex-row justify-between items-center w-full">
 		{#if !headless}
 			<div class={twMerge('flex flex-row items-center gap-2', headerClass)}>
-				<span
-					class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6 whitespace-nowrap"
-					>{label}
+				<span class="text-emphasis text-xs font-semibold whitespace-nowrap"
+					><label for={forAttr}>{label}</label>
 					{#if required}
 						<Required required={true} />
 					{/if}
+					{#if tooltip}
+						<Tooltip>{tooltip}</Tooltip>
+					{/if}
 				</span>
+				{#if eeOnly}
+					{#if !$enterpriseLicense}
+						<EEOnly />
+					{/if}
+				{/if}
 				{@render header?.()}
 			</div>
 		{/if}

package/package/components/Label.svelte.d.ts

@@ -1,11 +1,13 @@
 interface Props {
     label?: string | undefined;
-    primary?: boolean;
     disabled?: boolean;
     headless?: boolean;
     required?: boolean;
     headerClass?: string;
     class?: string | undefined;
+    for?: string | undefined;
+    tooltip?: string | undefined;
+    eeOnly?: boolean;
     header?: import('svelte').Snippet;
     error?: import('svelte').Snippet;
     action?: import('svelte').Snippet;

package/package/components/LightweightResourcePicker.svelte

@@ -72,7 +72,7 @@ export function askNewResource() {
 {:else}
 	<Drawer bind:this={drawer} size="800px">
 		<DrawerContent
-			title="Add a Resource"
+			title="Add a resource"
 			on:close={drawer.closeDrawer}
 			tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 			documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"

package/package/components/LogViewer.svelte

@@ -101,6 +101,7 @@ $effect.pre(() => {
         lastJobId = jobId;
         loadedFromObjectStore = '';
         LOG_LIMIT = LOG_INC;
+        scroll = true;
     }
 });
 let truncatedContent = $derived(truncateContent(content, loadedFromObjectStore, LOG_LIMIT));
@@ -144,7 +145,7 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 		{/snippet}
 		<div>
 			<pre
-				class="bg-surface-secondary text-secondary text-xs w-full p-2 whitespace-pre-wrap border rounded-md"
+				class="bg-surface-secondary text-primary text-xs w-full p-2 whitespace-pre-wrap border rounded-md"
 				>{#if content}{@const len =
 						(content?.length ?? 0) +
 						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
@@ -165,7 +166,7 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 			class="w-full h-full overflow-auto bg-surface-secondary pt-4 {noMaxH ? '' : 'max-h-screen'}"
 			data-nav-id={navigationId}
 		>
-			<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-sm">
+			<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-xs">
 				<div class="flex gap-2">
 					{#if jobId && download}
 						<div class="flex items-center">
@@ -180,14 +181,14 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 					{/if}
 					<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
 					{#if !noAutoScroll}
-						<div
-							class="{small ? '' : 'py-2'} pr-2 {small
-								? '!text-2xs'
-								: '!text-xs'} flex gap-2 text-tertiary items-center"
+						<label
+							class="{small
+								? ''
+								: 'py-2'} pr-2 text-2xs flex gap-2 font-normal text-primary items-center"
 						>
 							Auto scroll
 							<input class="windmillapp" type="checkbox" bind:checked={scroll} />
-						</div>
+						</label>
 					{/if}
 				</div>
 			</div>
@@ -196,9 +197,7 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 					<Loader2 class="animate-spin" />
 					{#if tag}
 						<div class="flex flex-row items-center gap-1">
-							<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}"
-								>{tagLabel ?? 'tag'}: {tag}</div
-							>
+							<div class="text-primary text-2xs">{tagLabel ?? 'tag'}: {tag}</div>
 							<NoWorkerWithTagWarning {tagLabel} {tag} />
 						</div>
 					{/if}
@@ -209,7 +208,7 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 			{:else if duration}
 				<span
 					class={twMerge(
-						'absolute  text-tertiary dark:text-gray-400',
+						'absolute  text-primary dark:text-gray-400',
 						small ? '!text-2xs' : '!text-xs',
 						small ? 'top-0' : 'top-2',
 						noPadding ? '' : 'left-2'
@@ -218,14 +217,14 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 			{/if}
 			{#if mem}
 				<span
-					class="absolute {small ? '!text-2xs' : '!text-xs'} text-tertiary dark:text-gray-400 {small
+					class="absolute {small ? '!text-2xs' : '!text-xs'} text-primary dark:text-gray-400 {small
 						? 'top-0'
 						: 'top-2'}  left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
 				>
 			{/if}
 			<pre
 				class={twMerge(
-					'whitespace-pre break-words w-full',
+					'whitespace-pre break-words w-full ',
 					small ? '!text-2xs' : '!text-xs',
 					noPadding ? '' : 'p-2'
 				)}
@@ -234,9 +233,9 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
 							onclick={getStoreLogs}
 							>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
-						><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
-						/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
-						>{@html html}</span
+						><br />{:else if len > LOG_LIMIT}<button onclick={() => showMoreTruncate(len)}
+							>Show more..</button
+						>&nbsp;({LOG_LIMIT}/{len} chars)<br />{/if}<span>{@html html}</span
 					>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
 			>
 		</div>

package/package/components/LogViewerHeader.svelte

@@ -4,9 +4,8 @@ let { showResultsInputs = $bindable(), toggleExpandAll, allExpanded } = $props()
 
 <div class="flex justify-end gap-4 items-center p-2 bg-surface-secondary border-b">
 	<div class="flex items-center gap-2 whitespace-nowrap">
-		<label
-			for="showResultsInputs"
-			class="text-xs text-tertiary hover:text-primary transition-colors">Show inputs/results</label
+		<label for="showResultsInputs" class="text-xs text-primary hover:text-primary transition-colors"
+			>Show inputs/results</label
 		>
 		<div class="flex-shrink-0">
 			<input
@@ -20,7 +19,7 @@ let { showResultsInputs = $bindable(), toggleExpandAll, allExpanded } = $props()
 	</div>
 	<button
 		onclick={toggleExpandAll}
-		class="text-xs text-tertiary hover:text-primary transition-colors flex items-center gap-2 min-w-24 justify-end"
+		class="text-xs text-primary hover:text-primary transition-colors flex items-center gap-2 min-w-24 justify-end"
 	>
 		{allExpanded ? 'Collapse All' : 'Expand All'}
 		{#if allExpanded}

package/package/components/Login.svelte

@@ -14,10 +14,11 @@ import { getUserExt } from '../user';
 import { sendUserToast } from '../toast';
 import { isCloudHosted } from '../cloud';
 import { refreshSuperadmin } from '../refreshUser';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import Button from './common/button/Button.svelte';
-let { rd = undefined, email = $bindable(undefined), password = $bindable(undefined), error = undefined, popup = false, firstTime = false } = $props();
+import { sameTopDomainOrigin } from '../cookies';
+let { rd = undefined, email = $bindable(undefined), password = $bindable(undefined), error = undefined, popup = false, firstTime = false, onLoginSuccess = undefined } = $props();
 const providers = [
     {
         type: 'github',
@@ -165,7 +166,6 @@ function handleKeyUp(event) {
         login();
     }
 }
-const dispatch = createEventDispatcher();
 onMount(() => {
     try {
         localStorage.removeItem('closeUponLogin');
@@ -176,18 +176,23 @@ onMount(() => {
 });
 function popupListener(event) {
     let data = event.data;
-    if (event.origin !== window.location.origin) {
+    // console.log('popupListener', data, event.origin, window.location.origin)
+    if (!sameTopDomainOrigin(event.origin, window.location.origin)) {
+        console.log('popupListener from different origin', event.origin, window.location.origin);
         return;
     }
     processPopupData(data);
-    window.removeEventListener('message', popupListener);
+    if (data.type === 'success' || data.type === 'error') {
+        console.log('Removing popup listener');
+        window.removeEventListener('message', popupListener);
+    }
 }
 function processPopupData(data) {
     if (data.type === 'error') {
         sendUserToast(data.error, true);
     }
     else if (data.type === 'success') {
-        dispatch('login');
+        onLoginSuccess?.();
     }
 }
 function handleStorageEvent(event) {
@@ -220,7 +225,8 @@ function storeRedirect(provider) {
             console.error('Could not persist redirection to local storage', e);
         }
     }
-    let url = base + '/api/oauth/login/' + provider;
+    let url = base + '/api/oauth/login/' + provider + (popup ? '?close=true' : '');
+    console.log('storeRedirect', popup, url);
     if (popup) {
         localStorage.setItem('closeUponLogin', 'true');
         window.addEventListener('message', popupListener);
@@ -237,7 +243,7 @@ $effect(() => {
 });
 </script>
 
-<div class="bg-surface px-4 py-8 shadow md:border sm:rounded-lg sm:px-10">
+<div class="bg-surface px-4 py-8 border sm:rounded-lg sm:px-10">
 	<div class="grid {logins && logins.length > 2 ? 'grid-cols-2' : ''} gap-4">
 		{#if !logins}
 			{#each Array(4) as _}
@@ -247,8 +253,7 @@ $effect(() => {
 			{#each providers as { type, icon }}
 				{#if logins?.some((login) => login.type === type)}
 					<Button
-						color="light"
-						variant="border"
+						variant="default"
 						startIcon={{ icon, classes: 'h-4' }}
 						on:click={() => storeRedirect(type)}
 					>
@@ -258,8 +263,7 @@ $effect(() => {
 			{/each}
 			{#each logins.filter((login) => !providersType?.includes(login.type)) as login}
 				<Button
-					color="dark"
-					variant="border"
+					variant="default"
 					btnClasses="mt-2 w-full"
 					on:click={() => storeRedirect(login.type)}
 				>
@@ -269,8 +273,7 @@ $effect(() => {
 		{/if}
 		{#if saml}
 			<Button
-				color="dark"
-				variant="border"
+				variant="default"
 				btnClasses="mt-2 w-full"
 				on:click={() => {
 					if (saml) {
@@ -288,9 +291,7 @@ $effect(() => {
 		<div class={classNames('center-center', logins && logins.length > 0 ? 'mt-6' : '')}>
 			<Button
 				size="xs"
-				color="blue"
-				variant="border"
-				btnClasses="!border-none"
+				variant="subtle"
 				on:click={() => {
 					showPassword = !showPassword
 				}}
@@ -303,36 +304,26 @@ $effect(() => {
 	{#if showPassword}
 		<div>
 			{#if firstTime}
-				<div class="text-lg text-center w-full pb-6"
+				<div class="text-lg text-center w-full pb-6 text-emphasis"
 					>First time login: admin@windmill.dev / changeme</div
 				>
 			{/if}
 			<div class="space-y-6">
 				{#if isCloudHosted()}
-					<p class="text-xs text-tertiary italic pb-6">
+					<p class="text-xs text-secondary pb-6">
 						To get credentials without the OAuth providers above, send an email at
 						contact@windmill.dev
 					</p>
 				{/if}
-				<div>
-					<label for="email" class="block text-sm font-medium leading-6 text-primary">
-						Email
-					</label>
+				<div class="space-y-1">
+					<label for="email" class="block text-xs font-semibold text-emphasis"> Email </label>
 					<div>
-						<input
-							type="email"
-							bind:value={email}
-							id="email"
-							autocomplete="email"
-							class="block w-full rounded-md border-0 py-1.5 text-primary shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
-						/>
+						<input type="email" bind:value={email} id="email" autocomplete="email" />
 					</div>
 				</div>
 
-				<div>
-					<label for="password" class="block text-sm font-medium leading-6 text-primary">
-						Password
-					</label>
+				<div class="space-y-1">
+					<label for="password" class="block text-xs font-semibold text-emphasis"> Password </label>
 					<div>
 						<input
 							onkeyup={handleKeyUp}
@@ -340,24 +331,17 @@ $effect(() => {
 							id="password"
 							type="password"
 							autocomplete="current-password"
-							class="block w-full rounded-md border-0 py-1.5 text-shadow shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
 						/>
 					</div>
 				</div>
 
 				<div class="pt-2">
-					<button
-						onclick={login}
-						disabled={!email || !password}
-						class="flex w-full justify-center rounded-md bg-frost-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-frost-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-frost-600"
-					>
-						Sign in
-					</button>
+					<Button onClick={login} variant="accent" disabled={!email || !password}>Sign in</Button>
 				</div>
 			</div>
 
 			{#if isCloudHosted()}
-				<p class="text-2xs text-tertiary italic mt-10 text-center">
+				<p class="text-2xs text-secondary mt-10 text-center">
 					By logging in, you agree to our
 					<a href="https://windmill.dev/terms_of_service" target="_blank" rel="noreferrer">
 						Terms of service

package/package/components/Login.svelte.d.ts

@@ -5,24 +5,8 @@ interface Props {
     error?: string | undefined;
     popup?: boolean;
     firstTime?: boolean;
+    onLoginSuccess?: () => void;
 }
-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 Login: $$__sveltets_2_IsomorphicComponent<Props, {
-    login: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "email" | "password">;
-type Login = InstanceType<typeof Login>;
+declare const Login: import("svelte").Component<Props, {}, "email" | "password">;
+type Login = ReturnType<typeof Login>;
 export default Login;

package/package/components/ManageTagsDrawer.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import AssignableTagsInner from './AssignableTagsInner.svelte';
+import DefaultTagsInner from './DefaultTagsInner.svelte';
+import { ExternalLink } from 'lucide-svelte';
+import { Section } from './common';
+let { defaultTagPerWorkspace = $bindable(undefined), defaultTagWorkspaces = $bindable([]), onRefresh } = $props();
+let drawer = $state(undefined);
+export function openDrawer() {
+    drawer?.openDrawer?.();
+}
+export function closeDrawer() {
+    drawer?.closeDrawer?.();
+}
+export function toggleDrawer() {
+    drawer?.toggleDrawer?.();
+}
+</script>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="Manage tags" on:close={() => drawer?.closeDrawer?.()}>
+		<div class="flex flex-col h-full gap-6">
+			<!-- Overall Description -->
+			<div class="text-xs font-normal text-secondary">
+				Tags determine which worker group will execute a given job. Workers process only those jobs
+				whose tags match those defined in their <a
+					href="https://www.windmill.dev/docs/core_concepts/worker_groups"
+					target="_blank">worker group <ExternalLink size={12} class="inline-block" /></a
+				>
+				configuration.
+			</div>
+
+			<!-- Content Sections -->
+			<div class="flex flex-col gap-8 flex-1">
+				<!-- Custom Tags Section -->
+				<Section label="Custom tags">
+					<AssignableTagsInner
+						variant="drawer"
+						on:refresh={() => {
+							if (onRefresh) {
+								onRefresh()
+							}
+						}}
+					/>
+				</Section>
+
+				<!-- Default Tags Section -->
+				<DefaultTagsInner bind:defaultTagPerWorkspace bind:defaultTagWorkspaces />
+
+				<!-- Extra padding -->
+				<div class="pb-10"></div>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/ManageTagsDrawer.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    defaultTagPerWorkspace?: boolean | undefined;
+    defaultTagWorkspaces?: string[];
+    onRefresh?: () => void;
+}
+declare const ManageTagsDrawer: import("svelte").Component<Props, {
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}, "defaultTagPerWorkspace" | "defaultTagWorkspaces">;
+type ManageTagsDrawer = ReturnType<typeof ManageTagsDrawer>;
+export default ManageTagsDrawer;

package/package/components/MapResult.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import { Map, View, Feature } from 'ol';
 import { Fill, Stroke, Style, Text } from 'ol/style.js';
-import { useGeographic } from 'ol/proj';
-import { OSM, Vector as VectorSource } from 'ol/source';
-import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
-import { Point } from 'ol/geom';
-import { defaults as defaultControls } from 'ol/control';
-import CircleStyle from 'ol/style/Circle';
+import { useGeographic } from 'ol/proj.js';
+import { OSM, Vector as VectorSource } from 'ol/source.js';
+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;
@@ -130,7 +130,7 @@ $: if (!map && mapElement) {
     border-radius: 0.25rem;
     border-width: 1px;
     --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
+    background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity, 1));
     --tw-text-opacity: 1;
     color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1));
     --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -142,10 +142,8 @@ $: if (!map && mapElement) {
     align-items: center
 }
 	:global(.ol-control) :global(button:hover) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1))
+    background-color: rgb(var(--color-surface-hover))
 }
 	:global(.ol-control) :global(button:focus) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1))
+    background-color: rgb(var(--color-surface-hover))
 }</style>

package/package/components/McpToolCallDetails.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">import { Badge } from './common';
+import JobArgs from './JobArgs.svelte';
+import DisplayResult from './DisplayResult.svelte';
+let { functionName, args, result, type, workspaceId = undefined } = $props();
+</script>
+
+<div class="p-2 flex flex-col gap-4">
+	<!-- Header -->
+	<div class="flex items-center gap-2">
+		<span class="font-semibold text-sm">{functionName}</span>
+		<Badge color={type === 'Success' ? 'green' : type === 'Failure' ? 'red' : 'gray'}>
+			{type}
+		</Badge>
+	</div>
+
+	<!-- Arguments Section -->
+	<div>
+		<h3 class="text-sm font-semibold mb-2 text-secondary">Arguments</h3>
+		{#if args && typeof args === 'object' && Object.keys(args).length > 0}
+			<JobArgs {args} argLabel="Parameter" />
+		{:else}
+			<p class="text-xs text-tertiary italic">No arguments</p>
+		{/if}
+	</div>
+
+	<!-- Result Section -->
+	<div>
+		<h3 class="text-sm font-semibold mb-2 text-secondary">Result</h3>
+		<div class="border rounded">
+			<DisplayResult {result} {workspaceId} />
+		</div>
+	</div>
+</div>

package/package/components/McpToolCallDetails.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FlowStatusModule } from '../gen';
+interface Props {
+    functionName: string;
+    args: any;
+    result: any;
+    type: FlowStatusModule['type'];
+    workspaceId?: string | undefined;
+}
+declare const McpToolCallDetails: import("svelte").Component<Props, {}, "">;
+type McpToolCallDetails = ReturnType<typeof McpToolCallDetails>;
+export default McpToolCallDetails;

package/package/components/ModulePreview.svelte

@@ -4,7 +4,7 @@ import Button from './common/button/Button.svelte';
 import ModulePreviewForm from './ModulePreviewForm.svelte';
 import ModuleTest from './ModuleTest.svelte';
 import { getContext } from 'svelte';
-let { mod, schema, pickableProperties, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), focusArg = undefined, onJobDone } = $props();
+let { mod, schema, pickableProperties, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), focusArg = undefined, class: className = '', onJobDone } = $props();
 const { flowStore } = getContext('FlowEditorContext');
 let moduleTest = $state();
 export function runTestWithStepArgs() {
@@ -22,7 +22,7 @@ export function runTestWithStepArgs() {
 	{onJobDone}
 />
 
-<div class="p-4">
+<div class="p-4 {className}">
 	{#if flowStore.val.value.same_worker}
 		<div class="mb-1 bg-yellow-100 text-yellow-700 p-1 text-xs"
 			>The `./shared` folder is not passed across individual "Test this step"</div
@@ -37,7 +37,7 @@ export function runTestWithStepArgs() {
 			</Button>
 		{:else}
 			<Button
-				color="dark"
+				variant="accent"
 				btnClasses="truncate"
 				size="sm"
 				on:click={runTestWithStepArgs}

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

@@ -12,6 +12,7 @@ interface Props {
     noEditor?: boolean;
     scriptProgress?: any;
     focusArg?: string;
+    class?: string;
     onJobDone?: () => void;
 }
 declare const ModulePreview: import("svelte").Component<Props, {

package/package/components/ModulePreviewForm.svelte

@@ -4,7 +4,7 @@ import { RefreshCw } from 'lucide-svelte';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
 import { getContext, untrack } from 'svelte';
-import { evalValue } from './flows/utils';
+import { evalValue } from './flows/utils.svelte';
 import { getResourceTypes } from './resourceTypesStore';
 import { twMerge } from 'tailwind-merge';
 let { schema, mod, pickableProperties, isValid = $bindable(true), autofocus = false, focusArg = undefined } = $props();
@@ -73,7 +73,7 @@ $effect.pre(() => {
 					<ResizeTransitionWrapper
 						vertical
 						class={twMerge(
-							'flex gap-2 relative',
+							'flex gap-2',
 							animateArg === argName && 'animate-pulse ring-2 ring-offset-2 ring-blue-500 rounded'
 						)}
 						innerClass="w-full"
@@ -128,6 +128,6 @@ $effect.pre(() => {
 			{/each}
 		{/if}
 	{:else}
-		<div class="text-center text-sm text-tertiary"> Loading test step arguments... </div>
+		<div class="text-center text-sm text-primary"> Loading test step arguments... </div>
 	{/if}
 </div>

package/package/components/ModulePreviewResultViewer.svelte

@@ -19,7 +19,7 @@ const preview = $derived.by(() => outputPickerInner?.getPreview?.());
 </script>
 
 <Splitpanes horizontal>
-	<Pane size={65} minSize={10} class="text-sm text-tertiary">
+	<Pane size={65} minSize={10} class="text-sm text-primary">
 		{#if scriptProgress}
 			<JobProgressBar job={testJob} {scriptProgress} compact={true} />
 		{/if}

package/package/components/ModuleStatus.svelte

@@ -13,12 +13,12 @@ export let skipped = false;
 		Waiting to be resumed by resume events such as approvals
 	</span>
 {:else if type == 'WaitingForPriorSteps'}
-	<span class="italic text-tertiary">
+	<span class="italic text-primary">
 		<Hourglass class="inline" />
 		Waiting for prior steps to complete
 	</span>
 {:else if type == 'WaitingForExecutor'}
-	<span class="italic text-tertiary">
+	<span class="italic text-primary">
 		<Hourglass class="inline" />
 		{#if scheduled_for && forLater(scheduled_for.toString())}
 			Job is scheduled to be executed at {displayDate(scheduled_for, true)}

package/package/components/ModuleTest.svelte

@@ -11,11 +11,12 @@ let jobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
 export function runTestWithStepArgs() {
-    runTest(stepsInputArgs.getStepArgs(mod.id));
+    const args = stepsInputArgs.getStepArgs(mod.id);
+    runTest(args);
 }
 export function loadArgsAndRunTest() {
     stepsInputArgs?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
-    runTest(stepsInputArgs.getStepArgs(mod.id));
+    runTestWithStepArgs();
 }
 export async function runTest(args) {
     // Not defined if JobProgressBar not loaded
@@ -60,7 +61,7 @@ export async function runTest(args) {
             value: {
                 modules: [
                     {
-                        ...mod,
+                        id: mod.id,
                         value: {
                             type: 'aiagent',
                             tools: mod.value.type == 'aiagent' ? mod.value.tools : [],