windmill-components 1.655.1 → 1.665.0

package/package/components/DBTableEditor.svelte

@@ -29,6 +29,7 @@ function validate(values, dbSchema) {
 </script>
 
 <script lang="ts">import { ArrowRight, ClipboardCopy, Plus, Settings, X } from 'lucide-svelte';
+import { copyToClipboard } from '../utils';
 import { Button } from './common';
 import { Cell } from './table';
 import DataTable from './table/DataTable.svelte';
@@ -38,7 +39,6 @@ import { DB_TYPES } from '../consts';
 import Popover from './meltComponents/Popover.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { sendUserToast } from '../toast';
-import { copyToClipboard } from '../utils';
 import { getFlatTableNamesFromSchema } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import DarkModeObserver from './DarkModeObserver.svelte';
@@ -80,6 +80,7 @@ if (!untrack(() => initialValues)) {
 }
 const errors = $derived(validate(values, dbSchema));
 let askingForConfirmation = $state();
+let previewLoading = $state(false);
 let darkMode = $state(false);
 let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 </script>
@@ -382,25 +383,34 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 	</div>
 	<Button
 		disabled={!!errors || btnProps.current.disabled}
-		loading={btnProps.pending}
-		on:click={() => {
-			let preview = computePreview?.({ values })
-			askingForConfirmation = {
-				onConfirm: async () => {
-					try {
-						askingForConfirmation && (askingForConfirmation.loading = true)
-						await onConfirm({ values })
-					} catch (e) {
-						let msg: string | undefined = (e as Error)?.message
-						if (typeof msg !== 'string') msg = e ? JSON.stringify(e) : 'An error occurred'
-						sendUserToast(msg, true)
-					}
-					askingForConfirmation = undefined
-				},
-				title: 'Confirm running the following:',
-				confirmationText: btnProps.current.text,
-				open: true,
-				...(preview && { codeContent: preview.sql, alert: preview.alert })
+		loading={btnProps.pending || previewLoading}
+		on:click={async () => {
+			previewLoading = true
+			try {
+				let preview = await computePreview({ values })
+				askingForConfirmation = {
+					onConfirm: async () => {
+						try {
+							askingForConfirmation && (askingForConfirmation.loading = true)
+							await onConfirm({ values })
+						} catch (e) {
+							let msg: string | undefined = (e as Error)?.message
+							if (typeof msg !== 'string') msg = e ? JSON.stringify(e) : 'An error occurred'
+							sendUserToast(msg, true)
+						}
+						askingForConfirmation = undefined
+					},
+					title: 'Confirm running the following:',
+					confirmationText: btnProps.current.text,
+					open: true,
+					...(preview && { codeContent: preview.sql, alert: preview.alert })
+				}
+			} catch (e) {
+				let msg: string | undefined = (e as Error)?.message
+				if (typeof msg !== 'string') msg = e ? JSON.stringify(e) : 'An error occurred'
+				sendUserToast(msg, true)
+			} finally {
+				previewLoading = false
 			}
 		}}
 	>
@@ -421,17 +431,15 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 			</Alert>
 		{/if}
 		{#if askingForConfirmation?.codeContent}
-			<div class="bg-surface-secondary border border-surface-selected rounded-md p-2 relative">
-				<code class="whitespace-pre-wrap">
-					{askingForConfirmation.codeContent}
-				</code>
-				<Button
-					on:click={() => copyToClipboard(askingForConfirmation?.codeContent)}
-					size="xs"
-					startIcon={{ icon: ClipboardCopy }}
-					color="none"
-					wrapperClasses="absolute z-10 top-0 right-0"
-				></Button>
+			<div class="bg-surface-secondary border border-surface-selected rounded-md p-2 relative group">
+				<button
+					class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-surface-hover"
+					onclick={() => copyToClipboard(askingForConfirmation?.codeContent)}
+					title="Copy to clipboard"
+				>
+					<ClipboardCopy size={14} />
+				</button>
+				<pre class="whitespace-pre-wrap text-sm"><code>{askingForConfirmation.codeContent}</code></pre>
 			</div>
 		{/if}
 	</ConfirmationModal>

package/package/components/DBTableEditor.svelte.d.ts

@@ -13,13 +13,13 @@ type Props = {
     }) => void | Promise<void>;
     computePreview: (params: {
         values: TableEditorValues;
-    }) => {
+    }) => Promise<{
         sql: string;
         alert?: {
             title: string;
             body?: string;
         };
-    };
+    }>;
     computeBtnProps: (params: {
         values: TableEditorValues;
     }) => {

package/package/components/DedicatedWorkersSelector.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { ScriptService, FlowService, WorkspaceService } from '../gen';
-import { Check, X, RefreshCcw, ChevronDown, ChevronRight, CodeXml } from 'lucide-svelte';
+<script lang="ts">import { ScriptService, FlowService, WorkspaceService, WorkspaceDependenciesService } from '../gen';
+import { Check, X, RefreshCcw, ChevronDown, ChevronRight, CodeXml, ExternalLink, TriangleAlert, Layers } from 'lucide-svelte';
 import { Button } from './common';
 import Select from './select/Select.svelte';
 import { sendUserToast } from '../toast';
@@ -8,6 +8,7 @@ import { SvelteMap } from 'svelte/reactivity';
 import { untrack } from 'svelte';
 import BarsStaggered from './icons/BarsStaggered.svelte';
 import { parseTag } from './dedicated_worker';
+import Tooltip from './Tooltip.svelte';
 let { selectedTags = $bindable([]), disabled = false, onchange } = $props();
 let selectedWorkspace = $state(undefined);
 let runnables = $state([]);
@@ -15,6 +16,8 @@ let loading = $state(false);
 let workspaces = $state([]);
 let workspacesLoading = $state(true);
 let selectorExpanded = $state(false);
+// Set of existing workspace dependency names for the current workspace (for validation)
+let existingDeps = $state(new Set());
 let selectedTagsInfo = $state(new SvelteMap());
 // Languages that support dedicated workers
 const DEDICATED_WORKER_LANGUAGES = ['python3', 'bun', 'bunnative', 'deno'];
@@ -48,25 +51,85 @@ async function loadSelectedTagsInfo(tags) {
     // Capture current state without tracking to avoid infinite loops
     const currentInfo = untrack(() => selectedTagsInfo);
     const currentRunnables = untrack(() => runnables);
+    const currentExistingDeps = untrack(() => existingDeps);
     const newInfo = new SvelteMap();
+    // Collect workspaces that need dep info fetched
+    const workspacesNeedingDeps = new Set();
+    for (const tag of tags) {
+        const existing = currentInfo.get(tag);
+        const existingRunnable = currentRunnables.find((r) => r.tag === tag);
+        // If we don't have workspaceDeps cached, we need to fetch for this workspace
+        if (!existing?.workspaceDeps && !existingRunnable?.workspaceDeps) {
+            const parsed = parseTag(tag);
+            if (parsed?.type === 'script') {
+                workspacesNeedingDeps.add(parsed.workspace);
+            }
+        }
+    }
+    // Fetch workspace dep info for workspaces that need it
+    const depsPerWorkspace = new Map();
+    if (workspacesNeedingDeps.size > 0 || currentExistingDeps.size === 0) {
+        await Promise.all(Array.from(workspacesNeedingDeps).map(async (ws) => {
+            try {
+                const [dedicatedDeps, wsDeps] = await Promise.all([
+                    ScriptService.listDedicatedWithDeps({ workspace: ws }).catch(() => []),
+                    WorkspaceDependenciesService.listWorkspaceDependencies({
+                        workspace: ws
+                    }).catch(() => [])
+                ]);
+                const depsMap = new Map();
+                for (const d of dedicatedDeps) {
+                    if (d.workspace_dep_names.length > 0) {
+                        depsMap.set(d.path, {
+                            deps: d.workspace_dep_names,
+                            language: d.language
+                        });
+                    }
+                }
+                depsPerWorkspace.set(ws, depsMap);
+                // Merge into existingDeps
+                for (const d of wsDeps) {
+                    if (!d.archived && d.name) {
+                        currentExistingDeps.add(d.name);
+                    }
+                }
+            }
+            catch {
+                // ignore
+            }
+        }));
+        existingDeps = new Set(currentExistingDeps);
+    }
     try {
         await Promise.all(tags.map(async (tag) => {
             // Check if we already have this info cached
             const existing = currentInfo.get(tag);
             if (existing && (existing.type === 'script' || existing.runners !== undefined)) {
+                // Backfill workspaceDeps and language if missing
+                if (existing.type === 'script' && !existing.workspaceDeps) {
+                    const depInfo = depsPerWorkspace.get(existing.workspace)?.get(existing.path);
+                    if (depInfo) {
+                        existing.workspaceDeps = depInfo.deps;
+                        existing.language = depInfo.language;
+                    }
+                }
                 newInfo.set(tag, existing);
                 return;
             }
             // Check if we have it loaded in runnables
             const existingRunnable = currentRunnables.find((r) => r.tag === tag);
             if (existingRunnable) {
+                const ws = tag.substring(0, tag.indexOf(':'));
+                const depInfo = depsPerWorkspace.get(ws)?.get(existingRunnable.path);
                 newInfo.set(tag, {
                     tag,
-                    workspace: tag.substring(0, tag.indexOf(':')),
+                    workspace: ws,
                     type: existingRunnable.type,
                     path: existingRunnable.path,
+                    language: existingRunnable.language,
                     runners: existingRunnable.runners,
-                    expanded: existing?.expanded ?? false
+                    expanded: existing?.expanded ?? false,
+                    workspaceDeps: existingRunnable.workspaceDeps ?? depInfo?.deps
                 });
                 return;
             }
@@ -75,11 +138,25 @@ async function loadSelectedTagsInfo(tags) {
             if (!parsed)
                 return;
             if (parsed.type === 'script') {
+                const depInfo = depsPerWorkspace.get(parsed.workspace)?.get(parsed.path);
+                let scriptLang = depInfo?.language;
+                if (!scriptLang) {
+                    try {
+                        const script = await ScriptService.getScriptByPath({
+                            workspace: parsed.workspace,
+                            path: parsed.path
+                        });
+                        scriptLang = script.language;
+                    }
+                    catch { }
+                }
                 newInfo.set(tag, {
                     tag,
                     workspace: parsed.workspace,
                     type: 'script',
-                    path: parsed.path
+                    path: parsed.path,
+                    language: scriptLang,
+                    workspaceDeps: depInfo?.deps
                 });
             }
             else {
@@ -231,7 +308,7 @@ async function loadRunnables(workspaceId) {
     try {
         loading = true;
         runnables = [];
-        const [scripts, flows] = await Promise.all([
+        const [scripts, flows, dedicatedDeps, wsDeps] = await Promise.all([
             ScriptService.listScripts({
                 workspace: workspaceId,
                 dedicatedWorker: true
@@ -239,8 +316,26 @@ async function loadRunnables(workspaceId) {
             FlowService.listFlows({
                 workspace: workspaceId,
                 dedicatedWorker: true
-            })
+            }),
+            ScriptService.listDedicatedWithDeps({
+                workspace: workspaceId
+            }).catch(() => []),
+            WorkspaceDependenciesService.listWorkspaceDependencies({
+                workspace: workspaceId
+            }).catch(() => [])
         ]);
+        // Track existing workspace dep names for validation
+        existingDeps = new Set(wsDeps
+            .filter((d) => !d.archived)
+            .map((d) => d.name)
+            .filter((n) => !!n));
+        // Build a map from path -> workspace dep names
+        const depsMap = new Map();
+        for (const d of dedicatedDeps) {
+            if (d.workspace_dep_names.length > 0) {
+                depsMap.set(d.path, d.workspace_dep_names);
+            }
+        }
         const newRunnables = [];
         // Add scripts with supported languages
         for (const script of scripts) {
@@ -252,7 +347,8 @@ async function loadRunnables(workspaceId) {
                     language: script.language ?? 'unknown',
                     type: 'script',
                     path: script.path,
-                    selected: selectedTags.includes(tag)
+                    selected: selectedTags.includes(tag),
+                    workspaceDeps: depsMap.get(script.path)
                 });
             }
         }
@@ -321,87 +417,195 @@ $effect(() => {
     }
 });
 let selectedCount = $derived(runnables.filter((r) => r.selected).length);
+let runnerGroups = $derived.by(() => {
+    const groupMap = new Map();
+    for (const tag of selectedTags) {
+        const info = selectedTagsInfo.get(tag);
+        if (info?.type === 'script' && info.workspaceDeps) {
+            const lang = info.language ?? runnables.find((r) => r.tag === tag)?.language ?? 'unknown';
+            for (const dep of info.workspaceDeps) {
+                const key = `${dep}:${lang}`;
+                const existing = groupMap.get(key);
+                if (existing) {
+                    existing.tags.push(tag);
+                }
+                else {
+                    groupMap.set(key, { depName: dep, language: lang, tags: [tag] });
+                }
+            }
+        }
+    }
+    // Only return groups with 2+ scripts
+    return Array.from(groupMap.values()).filter((g) => g.tags.length >= 2);
+});
+// Map tag → runner group it belongs to
+let tagRunnerGroup = $derived.by(() => {
+    const map = new Map();
+    for (const group of runnerGroups) {
+        for (const tag of group.tags) {
+            map.set(tag, group);
+        }
+    }
+    return map;
+});
+// Tags not in any runner group (standalone dedicated workers)
+let standaloneTags = $derived(selectedTags.filter((tag) => !tagRunnerGroup.has(tag)));
 </script>
 
+{#snippet depBadge(dep: string)}
+	{#if existingDeps.has(dep)}
+		<Badge color="indigo" small href="/workspace_settings?tab=dependencies">
+			{dep}
+			<ExternalLink class="h-2.5 w-2.5" />
+		</Badge>
+	{:else}
+		<Tooltip small>
+			Workspace dependency '{dep}' not found. Create it in workspace settings to enable shared
+			runners.
+		</Tooltip>
+		<Badge color="yellow" small>
+			<TriangleAlert class="h-2.5 w-2.5" />
+			{dep}
+		</Badge>
+	{/if}
+{/snippet}
+
+{#snippet tagRow(tag: string, info: SelectedTagInfo | undefined)}
+	<div>
+		<div class="flex items-center">
+			{#if info?.type === 'flow' && info.runners && info.runners.length > 0}
+				<button
+					class="p-2 hover:bg-surface-hover transition-colors"
+					onclick={(e) => {
+						e.stopPropagation()
+						toggleSelectedTagExpanded(tag)
+					}}
+				>
+					{#if info.expanded}
+						<ChevronDown class="h-3 w-3 text-tertiary" />
+					{:else}
+						<ChevronRight class="h-3 w-3 text-tertiary" />
+					{/if}
+				</button>
+			{:else}
+				<div class="w-7"></div>
+			{/if}
+			<div class="flex-1 flex items-center gap-2 px-2 py-1.5 min-w-0">
+				{#if info}
+					{#if info.type === 'flow'}
+						<BarsStaggered size={14} class="flex-shrink-0 text-secondary" />
+					{:else}
+						<CodeXml size={14} class="flex-shrink-0 text-secondary" />
+					{/if}
+					<span class="text-xs truncate min-w-0">{info.path}</span>
+					<span class="text-xs text-tertiary flex-shrink-0">({info.workspace})</span>
+					<span class="flex-1"></span>
+					{#if !tagRunnerGroup.has(tag)}
+						{#if info.workspaceDeps}
+							{#each info.workspaceDeps as dep}
+								{@render depBadge(dep)}
+							{/each}
+						{/if}
+						{#if info.type === 'flow' && info.runners}
+							<Badge color="indigo" small>
+								{info.runners.length} runner{info.runners.length !== 1 ? 's' : ''}
+							</Badge>
+						{:else if info.language}
+							<Badge color="gray" small>{info.language}</Badge>
+						{/if}
+					{/if}
+				{:else}
+					<span class="text-xs text-tertiary truncate">{tag}</span>
+				{/if}
+			</div>
+			{#if !disabled}
+				<button
+					class="p-2 hover:text-red-500 transition-colors"
+					onclick={(e) => {
+						e.stopPropagation()
+						removeTag(tag)
+					}}
+				>
+					<X class="h-3 w-3" />
+				</button>
+			{/if}
+		</div>
+
+		{#if info?.type === 'flow' && info.expanded && info.runners}
+			<div class="bg-surface-secondary border-t">
+				{#each info.runners as runner (runner.stepId)}
+					<div class="flex items-center gap-2 px-9 py-1 text-xs border-t first:border-t-0 min-w-0">
+						<span class="font-mono text-tertiary flex-shrink-0">{runner.stepId}</span>
+						{#if runner.stepSummary}
+							<span class="text-secondary truncate flex-1 min-w-0">{runner.stepSummary}</span>
+						{/if}
+						<Badge color="gray" small>
+							{runner.isInline ? runner.language : runner.scriptPath}
+						</Badge>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
 <div class="flex flex-col gap-3">
-	<!-- Selected tags summary -->
 	{#if selectedTags.length > 0}
 		<div class="flex flex-col gap-2">
-			<div class="border rounded-md divide-y bg-surface max-h-48 overflow-y-auto">
-				{#each selectedTags as tag (tag)}
-					{@const info = selectedTagsInfo.get(tag)}
+			<div class="border rounded-md bg-surface divide-y">
+				<!-- Shared runner groups -->
+				{#each runnerGroups as group (`${group.depName}:${group.language}`)}
 					<div>
-						<div class="flex items-center">
-							{#if info?.type === 'flow' && info.runners && info.runners.length > 0}
-								<button
-									class="p-2 hover:bg-surface-hover transition-colors"
-									onclick={(e) => {
-										e.stopPropagation()
-										toggleSelectedTagExpanded(tag)
-									}}
-								>
-									{#if info.expanded}
-										<ChevronDown class="h-3 w-3 text-tertiary" />
-									{:else}
-										<ChevronRight class="h-3 w-3 text-tertiary" />
-									{/if}
-								</button>
-							{:else}
-								<div class="w-7"></div>
-							{/if}
-							<div class="flex-1 flex flex-col gap-0.5 px-2 py-1.5 min-w-0">
-								<div class="flex items-center gap-2 min-w-0">
-									{#if info}
-										{#if info.type === 'flow'}
-											<BarsStaggered size={14} class="flex-shrink-0 text-secondary" />
-										{:else}
-											<CodeXml size={14} class="flex-shrink-0 text-secondary" />
-										{/if}
-										<span class="text-xs truncate flex-1 min-w-0">{info.path}</span>
-										<span class="text-xs text-tertiary flex-shrink-0">({info.workspace})</span>
-										{#if info.type === 'flow' && info.runners}
-											<Badge color="indigo" small>
-												{info.runners.length} runner{info.runners.length !== 1 ? 's' : ''}
-											</Badge>
-										{:else if info.type === 'script'}
-											<Badge color="blue" small>1 runner</Badge>
-										{/if}
-									{:else}
-										<span class="text-xs text-tertiary truncate">{tag}</span>
-									{/if}
-								</div>
-							</div>
-							{#if !disabled}
-								<button
-									class="p-2 hover:text-red-500 transition-colors"
-									onclick={(e) => {
-										e.stopPropagation()
-										removeTag(tag)
-									}}
-								>
-									<X class="h-3 w-3" />
-								</button>
-							{/if}
+						<div class="flex items-center gap-2 px-3 py-1.5 bg-surface-secondary border-b">
+							<Layers size={12} class="flex-shrink-0 text-secondary" />
+							<span class="text-xs font-medium text-emphasis">Shared runner</span>
+							<span class="flex-1"></span>
+							{@render depBadge(group.depName)}
+							<Badge color="gray" small>{group.language}</Badge>
+						</div>
+						<div class="divide-y">
+							{#each group.tags as tag (tag)}
+								{@const info = selectedTagsInfo.get(tag)}
+								{@render tagRow(tag, info)}
+							{/each}
 						</div>
+					</div>
+				{/each}
 
-						{#if info?.type === 'flow' && info.expanded && info.runners}
-							<div class="bg-surface-secondary border-t">
-								{#each info.runners as runner (runner.stepId)}
-									<div
-										class="flex items-center gap-2 px-9 py-1 text-xs border-t first:border-t-0 min-w-0"
-									>
-										<span class="font-mono text-tertiary flex-shrink-0">{runner.stepId}</span>
-										{#if runner.stepSummary}
-											<span class="text-secondary truncate flex-1 min-w-0"
-												>{runner.stepSummary}</span
-											>
-										{/if}
-										<Badge color="gray" small>
-											{runner.isInline ? runner.language : runner.scriptPath}
-										</Badge>
-									</div>
-								{/each}
-							</div>
+				<!-- Standalone scripts/flows -->
+				{#each standaloneTags as tag (tag)}
+					{@const info = selectedTagsInfo.get(tag)}
+					<div class="flex items-center gap-2 px-3 py-1.5 bg-surface-secondary min-w-0">
+						{#if info?.type === 'flow'}
+							<BarsStaggered size={12} class="flex-shrink-0 text-secondary" />
+						{:else}
+							<CodeXml size={12} class="flex-shrink-0 text-secondary" />
+						{/if}
+						<span class="text-xs truncate min-w-0">{info?.path ?? tag}</span>
+						<span class="text-xs text-tertiary flex-shrink-0">({info?.workspace ?? ''})</span>
+						<span class="flex-1"></span>
+						{#if info?.workspaceDeps}
+							{#each info.workspaceDeps as dep}
+								{@render depBadge(dep)}
+							{/each}
+						{/if}
+						{#if info?.type === 'flow' && info.runners}
+							<Badge color="indigo" small>
+								{info.runners.length} runner{info.runners.length !== 1 ? 's' : ''}
+							</Badge>
+						{:else if info?.language}
+							<Badge color="gray" small>{info.language}</Badge>
+						{/if}
+						{#if !disabled}
+							<button
+								class="hover:text-red-500 transition-colors flex-shrink-0"
+								onclick={(e) => {
+									e.stopPropagation()
+									removeTag(tag)
+								}}
+							>
+								<X class="h-3 w-3" />
+							</button>
 						{/if}
 					</div>
 				{/each}
@@ -510,15 +714,18 @@ let selectedCount = $derived(runnables.filter((r) => r.selected).length);
 														<Check class="h-3 w-3 text-white" />
 													{/if}
 												</div>
-												<span class="flex-1 text-xs truncate min-w-0"
-													>{runnable.displayName}</span
-												>
+												<span class="flex-1 text-xs truncate min-w-0">{runnable.displayName}</span>
 												{#if runnable.type === 'flow' && runnable.runners}
 													<span class="text-xs text-tertiary flex-shrink-0">
 														{runnable.runners.length}
 													</span>
 												{/if}
-												<Badge color={runnable.type === 'flow' ? 'indigo' : 'blue'} small>
+												{#if runnable.workspaceDeps}
+													{#each runnable.workspaceDeps as dep}
+														{@render depBadge(dep)}
+													{/each}
+												{/if}
+												<Badge color={runnable.type === 'flow' ? 'indigo' : 'gray'} small>
 													{runnable.type === 'flow' ? 'flow' : runnable.language}
 												</Badge>
 											</button>