windmill-components 1.596.1 → 1.612.2

package/package/rawAppWmillTs.d.ts

@@ -2,3 +2,14 @@ export declare const backend: {};
 export declare const backendAsync: {};
 export declare function waitJob(jobId: string): Promise<unknown>;
 export declare function getJob(jobId: string): Promise<unknown>;
+/**
+ * Stream job results using SSE. Calls onUpdate for each stream update,
+ * and resolves with the final result when the job completes.
+ * @param jobId - The job ID to stream
+ * @param onUpdate - Callback for stream updates with new_result_stream data
+ * @returns Promise that resolves with the final job result
+ */
+export declare function streamJob(jobId: string, onUpdate?: (data: {
+    new_result_stream?: string;
+    stream_offset?: number;
+}) => void): Promise<any>;

package/package/rawAppWmillTs.js

@@ -26,8 +26,45 @@ export function waitJob(jobId) {
 export function getJob(jobId) {
     return doRequest('getJob', { jobId });
 }
+/**
+ * Stream job results using SSE. Calls onUpdate for each stream update,
+ * and resolves with the final result when the job completes.
+ * @param jobId - The job ID to stream
+ * @param onUpdate - Callback for stream updates with new_result_stream data
+ * @returns Promise that resolves with the final job result
+ */
+export function streamJob(jobId, onUpdate) {
+    return new Promise((resolve, reject) => {
+        const reqId = Math.random().toString(36);
+        reqs[reqId] = { resolve, reject, onUpdate };
+        parent.postMessage({ jobId, type: 'streamJob', reqId }, '*');
+    });
+}
 window.addEventListener('message', (e) => {
-    if (e.data.type == 'backendRes' || e.data.type == 'backendAsyncRes') {
+    if (e.data.type == 'streamJobUpdate') {
+        // Handle streaming update
+        let job = reqs[e.data.reqId];
+        if (job && job.onUpdate) {
+            job.onUpdate({
+                new_result_stream: e.data.new_result_stream,
+                stream_offset: e.data.stream_offset
+            });
+        }
+    }
+    else if (e.data.type == 'streamJobRes') {
+        // Handle stream completion
+        let job = reqs[e.data.reqId];
+        if (job) {
+            if (e.data.error) {
+                job.reject(new Error(e.data.result?.stack ?? e.data.result?.message ?? 'Stream error'));
+            }
+            else {
+                job.resolve(e.data.result);
+            }
+            delete reqs[e.data.reqId];
+        }
+    }
+    else if (e.data.type == 'backendRes' || e.data.type == 'backendAsyncRes') {
         console.log('Message from parent backend', e.data);
         let job = reqs[e.data.reqId];
         if (job) {

package/package/svelte5Utils.svelte.d.ts

@@ -1,4 +1,6 @@
 import { type StateStore } from './utils';
+import * as runed from 'runed/kit';
+import type z from 'zod';
 export declare function withProps<Component, Props>(component: Component, props: Props): {
     component: Component;
     props: Props;
@@ -69,3 +71,10 @@ export declare class ChangeOnDeepInequality<T> {
     constructor(compute: () => T);
     get value(): T;
 }
+export declare function useSearchParams<S extends z.ZodType>(schema: S, options?: runed.SearchParamsOptions): runed.ReturnUseSearchParams<S>;
+export declare class StaleWhileLoading<T> {
+    private _current;
+    private _currentTimeout;
+    constructor(getter: () => T, timeout?: number);
+    get current(): T | undefined;
+}

package/package/svelte5Utils.svelte.js

@@ -2,7 +2,8 @@
 import { untrack } from 'svelte';
 import { deepEqual } from 'fast-equals';
 import {} from './utils';
-import { resource } from 'runed';
+import { resource, watch } from 'runed';
+import * as runed from 'runed/kit';
 export function withProps(component, props) {
     const ret = $state({
         component,
@@ -147,3 +148,52 @@ export class ChangeOnDeepInequality {
         return this._cached;
     }
 }
+// The original from runed has a weird behavior with dedup reads causing duplicate effect runs
+// (Every field has to be derived to avoid it : https://runed.dev/docs/utilities/use-search-params)
+export function useSearchParams(schema, options) {
+    let params = runed.useSearchParams(schema, options);
+    let keys = Object.keys(schema.shape ?? {});
+    let obj = { ...params };
+    for (const key of keys) {
+        // Somehow using $derived does not trigger reactivity sometimes ...
+        // (e.g: filters.arg in RunsPage.svelte updates in the URL but does not trigger reactivity)
+        let derivedVal = $state(params[key]);
+        Object.defineProperty(obj, key, {
+            get: () => {
+                if (typeof derivedVal === 'string')
+                    return decodeURIComponent(derivedVal);
+                return derivedVal;
+            },
+            set: (v) => {
+                const val = typeof v === 'string' ? encodeURIComponent(v) : v;
+                params[key] = val;
+                derivedVal = val;
+            },
+            enumerable: true,
+            configurable: true
+        });
+    }
+    return obj;
+}
+// Prevents flickering when data is unloaded (undefined) then reloaded quickly
+// But still becomes undefined if data is not reloaded within the timeout
+// so the user has feedback that the data is not available anymore.
+export class StaleWhileLoading {
+    _current = $state();
+    _currentTimeout;
+    constructor(getter, timeout = 400) {
+        watch(getter, (value) => {
+            if (this._currentTimeout)
+                clearTimeout(this._currentTimeout);
+            if (value === undefined) {
+                this._currentTimeout = setTimeout(() => (this._current = undefined), timeout);
+            }
+            else {
+                this._current = value;
+            }
+        });
+    }
+    get current() {
+        return this._current;
+    }
+}

package/package/tutorialUtils.js

@@ -60,10 +60,6 @@ export async function skipAllTodos() {
     }
     tutorialsToDo.set([]);
     skippedAll.set(true);
-    // Dismiss the tutorial banner when all tutorials are skipped
-    if (typeof window !== 'undefined') {
-        localStorage.setItem(TUTORIAL_BANNER_DISMISSED_KEY, 'true');
-    }
     await UserService.updateTutorialProgress({ requestBody: { progress: bits, skipped_all: true } });
 }
 export async function resetAllTodos() {

package/package/tutorials/config.js

@@ -1,4 +1,4 @@
-import { Workflow, GraduationCap, Wrench, PlayCircle, Link2 } from 'lucide-svelte';
+import { Workflow, GraduationCap, Wrench, PlayCircle, Link2, History } from 'lucide-svelte';
 import { base } from '../base';
 /**
  * Get tutorial index from config by tutorial ID.
@@ -16,7 +16,7 @@ export function getTutorialIndex(id) {
 export const TUTORIALS_CONFIG = {
     quickstart: {
         label: 'Quickstart',
-        roles: ['admin', 'developer'],
+        roles: ['admin', 'developer', 'operator'],
         progressBar: true,
         active: true,
         tutorials: [
@@ -61,7 +61,35 @@ export const TUTORIALS_CONFIG = {
                 comingSoon: false,
                 roles: ['admin', 'developer'],
                 order: 3
-            }
+            },
+            {
+                id: 'runs-tutorial',
+                icon: History,
+                title: 'Discover your monitoring dashboard',
+                description: 'Learn how to monitor, filter, and manage your script and flow executions.',
+                onClick: () => {
+                    window.location.href = `${base}/runs?tutorial=runs-tutorial`;
+                },
+                index: 7,
+                active: true,
+                comingSoon: false,
+                roles: ['admin', 'developer', 'operator'],
+                order: 4
+            },
+            {
+                id: 'workspace-onboarding-operator',
+                icon: GraduationCap,
+                title: 'Workspace onboarding',
+                description: 'Discover the basics of Windmill with a quick tour of the workspace.',
+                onClick: () => {
+                    window.location.href = `${base}/?tutorial=workspace-onboarding-operator`;
+                },
+                index: 6,
+                active: true,
+                comingSoon: false,
+                roles: ['operator'],
+                order: 1
+            },
         ]
     },
     app_editor: {

package/package/tutorials/roleUtils.d.ts

@@ -15,6 +15,6 @@ export declare function hasRoleAccess(user: UserExt | null | undefined, roles?:
 /**
  * Check if a preview role has access based on a roles array.
  * Used by admins to preview what other roles can see.
- * This is a convenience wrapper around hasRoleAccess for preview mode.
+ * Uses exact role matching - only shows tutorials explicitly marked for the preview role.
  */
 export declare function hasRoleAccessForPreview(previewRole: Role, roles?: Role[]): boolean;

package/package/tutorials/roleUtils.js

@@ -45,8 +45,12 @@ export function hasRoleAccess(user, roles, previewRole) {
 /**
  * Check if a preview role has access based on a roles array.
  * Used by admins to preview what other roles can see.
- * This is a convenience wrapper around hasRoleAccess for preview mode.
+ * Uses exact role matching - only shows tutorials explicitly marked for the preview role.
  */
 export function hasRoleAccessForPreview(previewRole, roles) {
-    return hasRoleAccess(null, roles, previewRole);
+    // No roles specified = available to everyone
+    if (!roles || roles.length === 0)
+        return true;
+    // Exact role match - tutorial must explicitly include the preview role
+    return roles.includes(previewRole);
 }

package/package/utils.js

@@ -678,7 +678,7 @@ export function pluralize(quantity, word, customPlural) {
         return `${quantity} ${word}`;
     }
     else if (customPlural) {
-        return `${quantity} ${customPlural}}`;
+        return `${quantity} ${customPlural}`;
     }
     else {
         return `${quantity} ${word}s`;
@@ -730,6 +730,134 @@ export function getModifierKey() {
 export function isValidHexColor(color) {
     return /^#(([A-F0-9]{2}){3,4}|[A-F0-9]{3})$/i.test(color);
 }
+/**
+ * Calculates the relative luminance of a color according to WCAG 2.1
+ * @param r Red component (0-255)
+ * @param g Green component (0-255)
+ * @param b Blue component (0-255)
+ * @returns Relative luminance value (0-1)
+ */
+function getRelativeLuminance(r, g, b) {
+    const [rs, gs, bs] = [r, g, b].map((val) => {
+        val = val / 255;
+        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+/**
+ * Converts hex color to HSL
+ * @param hex Hex color string (e.g., "#FF0000")
+ * @returns Array of [hue (0-360), saturation (0-100), lightness (0-100)]
+ */
+function hexToHsl(hex) {
+    // Normalize hex color
+    let normalizedHex = hex.replace('#', '');
+    if (normalizedHex.length === 3) {
+        normalizedHex = normalizedHex
+            .split('')
+            .map((char) => char + char)
+            .join('');
+    }
+    const r = parseInt(normalizedHex.substring(0, 2), 16) / 255;
+    const g = parseInt(normalizedHex.substring(2, 4), 16) / 255;
+    const b = parseInt(normalizedHex.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return [h * 360, s * 100, l * 100];
+}
+/**
+ * Converts HSL to hex color
+ * @param h Hue (0-360)
+ * @param s Saturation (0-100)
+ * @param l Lightness (0-100)
+ * @returns Hex color string
+ */
+function hslToHex(h, s, l) {
+    h = h / 360;
+    s = s / 100;
+    l = l / 100;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l; // Achromatic
+    }
+    else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    const toHex = (c) => {
+        const hex = Math.round(c * 255).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Generates a text color with the same hue as the background but adjusted lightness for good contrast
+ * @param backgroundColor Hex color string (e.g., "#FF0000" or "#F00")
+ * @returns Hex color string with same hue but good contrast, or undefined if invalid
+ */
+export function getContrastTextColor(backgroundColor) {
+    if (!backgroundColor || !isValidHexColor(backgroundColor)) {
+        return undefined;
+    }
+    // Normalize hex color
+    let hex = backgroundColor.replace('#', '');
+    if (hex.length === 3) {
+        hex = hex
+            .split('')
+            .map((char) => char + char)
+            .join('');
+    }
+    // Parse RGB components and calculate background luminance
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const bgLuminance = getRelativeLuminance(r, g, b);
+    // Convert to HSL to extract hue
+    const [hue] = hexToHsl(backgroundColor);
+    // Determine if background is light or dark
+    const isLightBackground = bgLuminance > 0.5;
+    // Use fixed saturation and lightness based on background lightness
+    // For light backgrounds: use dark text (low lightness, high saturation)
+    // For dark backgrounds: use light text (high lightness, high saturation)
+    const saturation = 70; // Fixed saturation for good readability
+    const lightness = isLightBackground ? 25 : 85; // Dark for light bg, light for dark bg
+    // Generate the color with the same hue but adjusted saturation and lightness
+    return hslToHex(hue, saturation, lightness);
+}
 export function sortObject(o) {
     return Object.keys(o)
         .sort()
@@ -1514,3 +1642,33 @@ export function getQueryStmtCountHeuristic(query) {
     }
     return count;
 }
+export function countChars(str, char) {
+    let count = 0;
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === char) {
+            count++;
+        }
+    }
+    return count;
+}
+export function buildReactiveObj(fields) {
+    const obj = {};
+    for (const key in fields) {
+        Object.defineProperty(obj, key, {
+            get: fields[key][0],
+            set: fields[key][1],
+            enumerable: true,
+            configurable: true
+        });
+    }
+    return obj;
+}
+export function pick(obj, keys) {
+    const result = {};
+    for (const key of keys) {
+        if (key in obj) {
+            result[key] = obj[key];
+        }
+    }
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.596.1",
+	"version": "1.612.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -26,9 +26,9 @@
 		"@melt-ui/svelte": "^0.86.2",
 		"@playwright/test": "^1.34.3",
 		"@sveltejs/adapter-static": "^3.0.6",
-		"@sveltejs/kit": "^2.28.0",
+		"@sveltejs/kit": "^2.49.2",
 		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^6.1.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.8",
 		"@types/d3": "^7.4.0",
@@ -70,7 +70,7 @@
 		"tar": "^7.4.3",
 		"tslib": "^2.6.1",
 		"typescript": "^5.5.0",
-		"vite": "npm:rolldown-vite@7.2.8",
+		"vite": "npm:rolldown-vite@7.3.0",
 		"vite-plugin-mkcert": "^1.17.5",
 		"vitest": "^4.0.10",
 		"vitest-browser-svelte": "^2.0.1"
@@ -84,13 +84,13 @@
 	"dependencies": {
 		"@anthropic-ai/sdk": "^0.60.0",
 		"@aws-crypto/sha256-js": "^4.0.0",
-		"@codingame/monaco-vscode-editor-api": "=21.6.0",
-		"@codingame/monaco-vscode-languages-service-override": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-css-language-features": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-html-language-features": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-json-language-features": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-languages": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-typescript-language-features": "=21.6.0",
+		"@codingame/monaco-vscode-editor-api": "=24.2.0",
+		"@codingame/monaco-vscode-languages-service-override": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-css-language-features": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-html-language-features": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-json-language-features": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-languages": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-typescript-language-features": "=24.2.0",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@redocly/json-to-json-schema": "^0.0.1",
@@ -122,9 +122,8 @@
 		"lru-cache": "^11.1.0",
 		"lucide-svelte": "^0.540.0",
 		"minimatch": "^10.0.1",
-		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@=21.6.0",
-		"monaco-graphql": "=1.6.0",
-		"monaco-languageclient": "10.1.0",
+		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@=24.2.0",
+		"monaco-languageclient": "10.5.0",
 		"monaco-vim": "^0.4.1",
 		"ol": "^7.4.0",
 		"openai": "^6.9.1",
@@ -142,7 +141,7 @@
 		"svelte-exmarkdown": "^5.0.0",
 		"svelte-infinite-loading": "^1.4.0",
 		"tailwind-merge": "^1.13.2",
-		"vscode": "npm:@codingame/monaco-vscode-extension-api@=21.6.0",
+		"vscode": "npm:@codingame/monaco-vscode-extension-api@=24.2.0",
 		"vscode-languageclient": "~9.0.1",
 		"vscode-uri": "~3.1.0",
 		"vscode-ws-jsonrpc": "~3.5.0",
@@ -151,14 +150,14 @@
 		"windmill-parser-wasm-java": "1.510.1",
 		"windmill-parser-wasm-nu": "1.510.1",
 		"windmill-parser-wasm-php": "1.574.1",
-		"windmill-parser-wasm-py": "1.595.0",
+		"windmill-parser-wasm-py": "1.601.1",
 		"windmill-parser-wasm-regex": "1.593.0",
 		"windmill-parser-wasm-ruby": "1.526.1",
 		"windmill-parser-wasm-rust": "1.558.1",
 		"windmill-parser-wasm-ts": "1.593.0",
 		"windmill-parser-wasm-yaml": "1.593.0",
 		"windmill-sql-datatype-parser-wasm": "1.512.0",
-		"windmill-utils-internal": "^1.3.1",
+		"windmill-utils-internal": "^1.3.2",
 		"xterm": "^5.3.0",
 		"xterm-readline": "^1.1.2",
 		"y-monaco": "^0.1.4",