windmill-components 1.623.1 → 1.623.2

package/package/components/raw_apps/RawAppBackgroundRunner.svelte

@@ -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,90 @@ 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');
+        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."

package/package/components/raw_apps/RawAppEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Pane, Splitpanes } from 'svelte-splitpanes';
 import RawAppInlineScriptsPanel from './RawAppInlineScriptsPanel.svelte';
 import RawAppEditorHeader from './RawAppEditorHeader.svelte';
-import {} from '../../gen';
+import { WorkspaceService } from '../../gen';
 import DiffDrawer from '../DiffDrawer.svelte';
 import { encodeState } from '../../utils';
 import { deepEqual } from 'fast-equals';
@@ -16,7 +16,6 @@ import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
 import { onMount } from 'svelte';
 import { rawAppLintStore } from './lintStore';
 import { dbSchemas } from '../../stores';
-import { getDbSchemas } from '../apps/components/display/dbtable/metadata';
 import { runScriptAndPollResult } from '../jobs/utils';
 import { RawAppHistoryManager } from './RawAppHistoryManager.svelte';
 import { sendUserToast } from '../../utils';
@@ -58,7 +57,7 @@ function saveFrontendDraft() {
     }, 500);
 }
 let iframe = $state(undefined);
-let sidebarPanelSize = $state(10);
+let sidebarPanelSize = $state(15);
 let jobs = $state([]);
 let jobsById = $state({});
 // Helper function to convert internal Runnable to BackendRunnable format
@@ -122,6 +121,14 @@ function setFilesInIframe(newFiles) {
         files: files
     }, '*');
 }
+function setFilesAndSelectInIframe(newFiles, pathToSelect) {
+    const files = Object.fromEntries(Object.entries(newFiles).filter(([path, _]) => !path.endsWith('/')));
+    iframe?.contentWindow?.postMessage({
+        type: 'setFilesAndSelect',
+        files: files,
+        pathToSelect: pathToSelect
+    }, '*');
+}
 function populateRunnables() {
     iframe?.contentWindow?.postMessage({
         type: 'setRunnables',
@@ -205,7 +212,6 @@ $effect(() => {
                 ...$state.snapshot(files ?? {}),
                 '/wmill.d.ts': genWmillTs(runnables)
             };
-            console.log('result', frontendFiles);
             return frontendFiles;
         },
         setFrontendFile: (path, content) => {
@@ -214,10 +220,9 @@ $effect(() => {
                 files = {};
             }
             files[path] = content;
-            setFilesInIframe(files);
             selectedDocument = path;
-            handleSelectFile(path);
-            console.log('files after setting', files);
+            // Use combined setFilesAndSelect to avoid race condition
+            setFilesAndSelectInIframe(files, path);
             return lint();
         },
         deleteFrontendFile: (path) => {
@@ -297,24 +302,37 @@ $effect(() => {
             };
         },
         getSelectedContext: () => {
+            const baseContext = {
+                inspectorElement: inspectorElement,
+                selectionExcluded: selectionExcludedFromPrompt,
+                toggleSelectionExcluded: toggleSelectionExcluded,
+                clearInspector: clearInspectorSelection,
+                clearRunnable: handleClearRunnable,
+                codeSelection: codeSelection,
+                clearCodeSelection: () => {
+                    codeSelection = undefined;
+                }
+            };
             if (selectedRunnable) {
-                console.log('selectedRunnable', selectedRunnable);
+                const runnable = convertToBackendRunnable(selectedRunnable, runnables[selectedRunnable]);
                 return {
                     type: 'backend',
-                    content: selectedRunnable ?? ''
+                    backendKey: selectedRunnable,
+                    backendRunnable: runnable,
+                    ...baseContext
                 };
             }
             if (selectedDocument) {
-                console.log('selectedDocument', selectedDocument);
                 return {
                     type: 'frontend',
-                    content: selectedDocument ?? ''
+                    frontendPath: selectedDocument,
+                    frontendContent: files?.[selectedDocument],
+                    ...baseContext
                 };
             }
-            console.log('no selection');
             return {
                 type: 'none',
-                content: ''
+                ...baseContext
             };
         },
         snapshot: () => {
@@ -327,52 +345,71 @@ $effect(() => {
             handleHistorySelect(id);
         },
         getDatatables: async () => {
+            if (!$workspaceStore) {
+                return [];
+            }
+            // Get all datatable schemas from the backend
+            const allSchemas = await WorkspaceService.listDataTableSchemas({
+                workspace: $workspaceStore
+            });
+            // Get unique datatable names from dataTableRefs (the whitelisted tables)
+            const whitelistedDatatables = new Set(dataTableRefsObjects.map((ref) => ref.datatable));
+            // If no datatables are configured, return all available datatables
+            // This allows users to see all datatables in the @ context menu
+            if (whitelistedDatatables.size === 0) {
+                return allSchemas;
+            }
+            // Build a map of whitelisted tables per datatable: datatable -> schema -> Set<table>
+            const whitelistedTables = new Map();
+            for (const ref of dataTableRefsObjects) {
+                if (!ref.table)
+                    continue;
+                if (!whitelistedTables.has(ref.datatable)) {
+                    whitelistedTables.set(ref.datatable, new Map());
+                }
+                const schemaKey = ref.schema || 'public';
+                const schemaMap = whitelistedTables.get(ref.datatable);
+                if (!schemaMap.has(schemaKey)) {
+                    schemaMap.set(schemaKey, new Set());
+                }
+                schemaMap.get(schemaKey).add(ref.table);
+            }
+            // Filter schemas to only include whitelisted datatables and tables
             const results = [];
-            // Get unique datatable names from dataTableRefs
-            const datatableNames = [...new Set(dataTableRefsObjects.map((ref) => ref.datatable))];
-            for (const datatableName of datatableNames) {
-                const resourcePath = `datatable://${datatableName}`;
-                // Get or load the schema
-                let schema = $dbSchemas[resourcePath];
-                if (!schema) {
-                    try {
-                        await getDbSchemas('postgresql', resourcePath, $workspaceStore, $dbSchemas, (msg) => console.error('Schema error:', msg));
-                        schema = $dbSchemas[resourcePath];
-                    }
-                    catch (e) {
-                        console.error(`Failed to load schema for ${datatableName}:`, e);
-                        continue;
-                    }
+            for (const schema of allSchemas) {
+                if (!whitelistedDatatables.has(schema.datatable_name)) {
+                    continue;
                 }
-                if (!schema?.schema)
+                const allowedTables = whitelistedTables.get(schema.datatable_name);
+                if (!allowedTables) {
+                    // Include the datatable but with empty schemas
+                    results.push({
+                        datatable_name: schema.datatable_name,
+                        schemas: {},
+                        error: schema.error
+                    });
                     continue;
-                // Get the tables for this datatable from the refs
-                const refsForDatatable = dataTableRefsObjects.filter((ref) => ref.datatable === datatableName);
-                const tables = [];
-                for (const ref of refsForDatatable) {
-                    const schemaKey = ref.schema || 'public';
-                    const tableKey = ref.table;
-                    if (!tableKey)
-                        continue; // Skip if no table specified
-                    const tableSchema = schema.schema[schemaKey]?.[tableKey];
-                    if (!tableSchema)
+                }
+                // Filter schemas to only include whitelisted tables
+                const filteredSchemas = {};
+                for (const [schemaName, tables] of Object.entries(schema.schemas)) {
+                    const allowedTablesInSchema = allowedTables.get(schemaName);
+                    if (!allowedTablesInSchema)
                         continue;
-                    const columns = {};
-                    for (const [colName, colDef] of Object.entries(tableSchema)) {
-                        columns[colName] = {
-                            type: colDef.type || 'unknown',
-                            required: colDef.required || false
-                        };
+                    const filteredTables = {};
+                    for (const [tableName, columns] of Object.entries(tables)) {
+                        if (allowedTablesInSchema.has(tableName)) {
+                            filteredTables[tableName] = columns;
+                        }
+                    }
+                    if (Object.keys(filteredTables).length > 0) {
+                        filteredSchemas[schemaName] = filteredTables;
                     }
-                    tables.push({
-                        schema: schemaKey,
-                        table: tableKey,
-                        columns
-                    });
                 }
                 results.push({
-                    name: datatableName,
-                    tables
+                    datatable_name: schema.datatable_name,
+                    schemas: filteredSchemas,
+                    error: schema.error
                 });
             }
             return results;
@@ -422,17 +459,44 @@ $effect(() => {
                 const errorMsg = e instanceof Error ? e.message : String(e);
                 return { success: false, error: errorMsg };
             }
+        },
+        addTableToWhitelist: (datatableName, schemaName, tableName) => {
+            // Format the table reference
+            const newRef = formatDataTableRef({
+                datatable: datatableName,
+                schema: schemaName === 'public' ? undefined : schemaName,
+                table: tableName
+            });
+            // Only add if not already present
+            if (!data.tables.includes(newRef)) {
+                data.tables = [...data.tables, newRef];
+                saveFrontendDraft();
+            }
         }
     });
 });
 let selectedRunnable = $state(undefined);
 let selectedDocument = $state(undefined);
+let inspectorElement = $state(undefined);
+let selectionExcludedFromPrompt = $state(false);
+let codeSelection = $state(undefined);
+function toggleSelectionExcluded() {
+    selectionExcludedFromPrompt = !selectionExcludedFromPrompt;
+}
 let modules = $state({});
+// Normalize Windows-style path separators to Linux-style
+function normalizeFilePaths(filesObj) {
+    if (!filesObj)
+        return filesObj;
+    return Object.fromEntries(Object.entries(filesObj).map(([path, content]) => [path.replace(/\\/g, '/'), content]));
+}
 function listener(e) {
     if (e.data.type === 'setFiles') {
+        // Normalize Windows-style path separators to Linux-style
+        const normalizedFiles = normalizeFilePaths(e.data.files);
         // Only mark pending changes if files actually changed (ignore echo from setFilesInIframe)
-        if (!deepEqual(files, e.data.files)) {
-            files = e.data.files;
+        if (!deepEqual(files, normalizedFiles)) {
+            files = normalizedFiles;
             historyManager.markPendingChanges();
         }
     }
@@ -443,7 +507,39 @@ function listener(e) {
         modules = e.data.modules;
     }
     else if (e.data.type === 'setActiveDocument') {
-        selectedDocument = e.data.path;
+        // Normalize Windows-style path separators to Linux-style
+        selectedDocument = e.data.path?.replace(/\\/g, '/');
+    }
+    else if (e.data.type === 'inspectorSelect') {
+        // Handle inspector element selection from the iframe preview
+        inspectorElement = e.data.element;
+    }
+    else if (e.data.type === 'inspectorClear') {
+        // Clear the inspector element when user dismisses the selection
+        inspectorElement = undefined;
+    }
+    else if (e.data.type === 'editorSelection') {
+        // Handle code selection from the iframe editor
+        const selection = e.data.selection;
+        if (selection === null) {
+            // Selection cleared
+            codeSelection = undefined;
+        }
+        else {
+            // Normalize path
+            const normalizedPath = selection.path?.replace(/\\/g, '/');
+            codeSelection = {
+                type: 'app_code_selection',
+                source: normalizedPath,
+                sourceType: 'frontend',
+                title: `${normalizedPath}:L${selection.range.startLine}-L${selection.range.endLine}`,
+                content: selection.content,
+                startLine: selection.range.startLine,
+                endLine: selection.range.endLine,
+                startColumn: selection.range.startColumn,
+                endColumn: selection.range.endColumn
+            };
+        }
     }
 }
 let getBundleResolve = undefined;
@@ -470,14 +566,38 @@ $effect(() => {
 $effect(() => {
     iframe && iframeLoaded && runnables && populateRunnables();
 });
+function clearInspectorSelection() {
+    inspectorElement = undefined;
+    iframe?.contentWindow?.postMessage({ type: 'inspectorClear' }, '*');
+}
 function handleSelectFile(path) {
     console.log('event Select file:', path);
     selectedRunnable = undefined;
+    // Inspector is cleared by the $effect watching selection changes
     iframe?.contentWindow?.postMessage({
         type: 'selectFile',
         path: path
     }, '*');
 }
+function handleClearRunnable() {
+    selectedRunnable = undefined;
+}
+// Track previous values for change detection
+let prevSelectedRunnable = undefined;
+let prevSelectedDocument = undefined;
+// Clear inspector and reset exclusion when selection changes
+$effect(() => {
+    if (selectedRunnable !== prevSelectedRunnable || selectedDocument !== prevSelectedDocument) {
+        // Only clear if we're actually switching to something different
+        if (prevSelectedRunnable !== undefined || prevSelectedDocument !== undefined) {
+            clearInspectorSelection();
+        }
+        // Reset exclusion when switching files/runnables
+        selectionExcludedFromPrompt = false;
+        prevSelectedRunnable = selectedRunnable;
+        prevSelectedDocument = selectedDocument;
+    }
+});
 function handleUndo() {
     // Create a snapshot if we're at the latest position with pending changes
     if (historyManager.needsSnapshotBeforeNav) {
@@ -495,9 +615,10 @@ function handleRedo() {
     }
 }
 function handleHistorySelect(id) {
-    // Create a snapshot if we have pending changes before navigating
-    if (historyManager.needsSnapshotBeforeNav) {
-        historyManager.manualSnapshot(files ?? {}, runnables, summary, data);
+    // Save current state temporarily (not as a snapshot) when navigating to history
+    // Only if we're currently at the "current" state (not already viewing history)
+    if (historyManager.selectedEntryId === undefined) {
+        historyManager.saveTemporaryCurrentState(files ?? {}, runnables, summary, data);
     }
     const entry = historyManager.selectEntry(id);
     if (entry) {
@@ -510,15 +631,16 @@ function applyEntry(entry) {
         runnables = structuredClone($state.snapshot(entry.runnables));
         summary = entry.summary;
         data = structuredClone($state.snapshot(entry.data));
-        setFilesInIframe(entry.files);
-        populateRunnables();
-        // Re-select the current document if it exists in the new files
+        // If there's a selected document that exists in the new files, use the combined message
         if (selectedDocument && entry.files[selectedDocument] !== undefined) {
-            iframe?.contentWindow?.postMessage({
-                type: 'selectFile',
-                path: selectedDocument
-            }, '*');
+            // Use combined setFilesAndSelect message to avoid race condition
+            setFilesAndSelectInIframe(entry.files, selectedDocument);
         }
+        else {
+            // Otherwise just set files normally
+            setFilesInIframe(entry.files);
+        }
+        populateRunnables();
     }
     catch (error) {
         console.error('Failed to apply entry:', error);
@@ -569,8 +691,8 @@ function handleKeydown(e) {
 		onRedo={handleRedo}
 	/>
 
-	<Splitpanes id="o2" class="grow">
-		<Pane bind:size={sidebarPanelSize} maxSize={20}>
+	<Splitpanes id="o2" class="grow min-h-0">
+		<Pane bind:size={sidebarPanelSize} maxSize={20} class="h-full overflow-y-auto">
 			<RawAppSidebar
 				bind:files={
 					() => files,
@@ -605,6 +727,15 @@ function handleKeydown(e) {
 				{historyManager}
 				historySelectedId={historyManager.selectedEntryId}
 				onHistorySelect={handleHistorySelect}
+				onHistorySelectCurrent={() => {
+					// Restore the temporary current state if it exists
+					const tempState = historyManager.getAndClearTemporaryState()
+					if (tempState) {
+						applyEntry(tempState)
+					}
+					// Clear selection to indicate we're at current state
+					historyManager.clearSelection()
+				}}
 				onManualSnapshot={() => {
 					historyManager.manualSnapshot(files ?? {}, runnables, summary, data, true)
 				}}
@@ -626,7 +757,26 @@ function handleKeydown(e) {
 							appPath={path}
 							{selectedRunnable}
 							{initRunnablesContent}
-							{runnables}
+							bind:runnables
+							onSelectionChange={(selection) => {
+								console.log('handle selection', selection)
+
+								if (selection === null) {
+									codeSelection = undefined
+								} else if (selectedRunnable) {
+									codeSelection = {
+										type: 'app_code_selection',
+										source: selectedRunnable,
+										sourceType: 'backend',
+										title: `${selectedRunnable}:L${selection.startLine}-L${selection.endLine}`,
+										content: selection.content,
+										startLine: selection.startLine,
+										endLine: selection.endLine,
+										startColumn: selection.startColumn,
+										endColumn: selection.endColumn
+									}
+								}
+							}}
 						/>
 					</div>
 				{/if}