windmill-components 1.623.1 → 1.642.0

package/package/components/raw_apps/RawAppBackgroundRunner.svelte

@@ -13,14 +13,14 @@ let listener = async (event) => {
         let error = false;
         let result;
         try {
-            result = await waitJob(uuid);
+            result = await waitJob(uuid, workspace);
         }
         catch (e) {
             error = true;
             console.log('e', e);
             result = e;
         }
-        if (event.data.type == 'backend') {
+        if (event.data.type == 'backend' || event.data.type == 'waitJob') {
             respond({ result, error });
         }
         if (editor) {
@@ -45,9 +45,16 @@ let listener = async (event) => {
         const runnable_id = data.runnable_id;
         let runnable = runnables[runnable_id];
         if (runnable) {
+            // Build args, converting ctx fields to $ctx:property format
+            const args = { ...(data.v ?? {}) };
+            for (const [key, field] of Object.entries(runnable?.fields ?? {})) {
+                if (field?.type === 'ctx' && field?.ctx) {
+                    args[key] = `$ctx:${field.ctx}`;
+                }
+            }
             const uuid = await executeRunnable(runnable, workspace, undefined, $userStore?.username, path, runnable_id, {
                 component: runnable_id,
-                args: data.v ?? {},
+                args,
                 force_viewer_allow_user_resources: editor
                     ? undefinedIfEmpty(Object.keys(runnable?.fields ?? {}).filter((k) => runnable?.fields?.[k]?.type == 'user' &&
                         runnable?.fields?.[k]?.allowUserResources))
@@ -73,17 +80,91 @@ let listener = async (event) => {
                 job.result = result;
             }
         }
-        else if (event.data.type == 'waitJob') {
-            await respondWithResult(data.jobId);
-        }
-        else if (event.data.type == 'getJob') {
-            const job = await JobService.getJob({ workspace, id: data.jobId });
-            respond({ result: job });
-        }
         else {
             console.error('No runnable found for', runnable_id);
         }
     }
+    else if (event.data.type == 'waitJob') {
+        await respondWithResult(data.jobId);
+    }
+    else if (event.data.type == 'getJob') {
+        const job = await JobService.getJob({ workspace, id: data.jobId });
+        respond({ result: job });
+    }
+    else if (event.data.type == 'streamJob') {
+        // Stream job results using SSE
+        const jobId = data.jobId;
+        const reqId = data.reqId;
+        const params = new URLSearchParams();
+        params.set('fast', 'true');
+        params.set('only_result', 'true');
+        const sseUrl = `/api/w/${workspace}/jobs_u/getupdate_sse/${jobId}?${params.toString()}`;
+        const eventSource = new EventSource(sseUrl);
+        eventSource.onmessage = (sseEvent) => {
+            try {
+                const update = JSON.parse(sseEvent.data);
+                const type = update.type;
+                if (type === 'ping' || type === 'timeout') {
+                    if (type === 'timeout') {
+                        eventSource.close();
+                    }
+                    return;
+                }
+                if (type === 'error') {
+                    eventSource.close();
+                    iframe?.contentWindow?.postMessage({
+                        type: 'streamJobRes',
+                        reqId,
+                        error: true,
+                        result: { message: update.error || 'SSE error' }
+                    }, '*');
+                    return;
+                }
+                if (type === 'not_found') {
+                    eventSource.close();
+                    iframe?.contentWindow?.postMessage({
+                        type: 'streamJobRes',
+                        reqId,
+                        error: true,
+                        result: { message: 'Job not found' }
+                    }, '*');
+                    return;
+                }
+                // Send stream update if there's new stream data
+                if (update.new_result_stream !== undefined) {
+                    iframe?.contentWindow?.postMessage({
+                        type: 'streamJobUpdate',
+                        reqId,
+                        new_result_stream: update.new_result_stream,
+                        stream_offset: update.stream_offset
+                    }, '*');
+                }
+                // Check if job is completed
+                if (update.completed) {
+                    eventSource.close();
+                    iframe?.contentWindow?.postMessage({
+                        type: 'streamJobRes',
+                        reqId,
+                        error: false,
+                        result: update.only_result
+                    }, '*');
+                }
+            }
+            catch (parseErr) {
+                console.warn('Failed to parse SSE data:', parseErr);
+            }
+        };
+        eventSource.onerror = (error) => {
+            console.warn('SSE stream error:', error);
+            eventSource.close();
+            iframe?.contentWindow?.postMessage({
+                type: 'streamJobRes',
+                reqId,
+                error: true,
+                result: { message: 'SSE connection error' }
+            }, '*');
+        };
+    }
 };
 </script>
 

package/package/components/raw_apps/RawAppDataTableDrawer.svelte

@@ -14,7 +14,6 @@ let selectedDatatable = $state(undefined);
 // For DB manager
 let dbManagerContent = $state();
 let hasReplResult = $state(false);
-let isRefreshing = $state(false);
 let windowWidth = $state(window.innerWidth);
 let expand = $state(false);
 // Multi-select mode: selected tables
@@ -136,7 +135,6 @@ const canAdd = $derived(selectedDatatable && selectedTables.length > 0);
 					bind:this={dbManagerContent}
 					input={dbInput}
 					bind:hasReplResult
-					bind:isRefreshing
 					bind:selectedSchemaKey
 					bind:selectedTableKey
 					multiSelectMode={true}
@@ -184,7 +182,7 @@ const canAdd = $derived(selectedDatatable && selectedTables.length > 0);
 			</Button>
 
 			<Button
-				loading={isRefreshing}
+				loading={dbManagerContent?.isLoading() ?? false}
 				on:click={() => dbManagerContent?.refresh()}
 				startIcon={{ icon: RefreshCcw }}
 				size="xs"

package/package/components/raw_apps/RawAppDataTableList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Plus, Database, Trash2, Table2, Star } from 'lucide-svelte';
 import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
 import DefaultDatabaseSelector from './DefaultDatabaseSelector.svelte';
+import { Button } from '../common';
 let { dataTableRefs = [], defaultDatatable = undefined, defaultSchema = undefined, onAdd, onRemove, onSelect, onDefaultChange, selectedIndex = undefined, standalone = false, hideDefaultSelector = false } = $props();
 const groupedRefs = $derived.by(() => {
     const groups = new Map();
@@ -44,7 +45,7 @@ function sortSchemaEntries(entries, datatableName) {
 </script>
 
 {#snippet actionButtons()}
-	<div class="flex items-center">
+	<div class="flex items-center gap-1">
 		<!-- Settings popover for default database/schema -->
 		{#if !hideDefaultSelector}
 			<DefaultDatabaseSelector
@@ -55,14 +56,16 @@ function sortSchemaEntries(entries, datatableName) {
 		{/if}
 
 		<!-- Add datatable button -->
-		<button
-			onclick={() => onAdd?.()}
-			class="pt-1.5 pb-0.5 px-1 hover:bg-surface-hover rounded transition-colors flex items-center gap-0.5"
+		<Button
+			onClick={() => onAdd?.()}
 			title="Add datatable reference"
+			unifiedSize="xs"
+			variant="subtle"
+			btnClasses="px-1 gap-0.5"
 		>
-			<Plus size={12} class="text-secondary" />
-			<Database size={12} class="text-tertiary" />
-		</button>
+			<Plus size={12} />
+			<Database size={12} />
+		</Button>
 	</div>
 {/snippet}
 
@@ -138,7 +141,7 @@ function sortSchemaEntries(entries, datatableName) {
 {#if standalone}
 	<div class="flex flex-col gap-2">
 		<div class="flex items-center justify-between">
-			<span class="text-xs text-tertiary">Existing tables to use</span>
+			<span class="text-xs text-emphasis font-semibold">Existing tables to use</span>
 			{@render actionButtons()}
 		</div>
 		{@render tableList()}
@@ -146,7 +149,7 @@ function sortSchemaEntries(entries, datatableName) {
 {:else}
 	<PanelSection
 		fullHeight={false}
-		size="lg"
+		size="sm"
 		title="data"
 		id="app-editor-data-panel"
 		tooltip="Data tables to use in the app. Adding some here does not change the behavior of the app, since they can be used in code directly regardless. But it allows AI to always keep their schema in context as well as allowing quick access and clear view of the app's data layer."