windmill-components 1.623.1 → 1.642.0

package/package/components/debug/index.js

@@ -0,0 +1,82 @@
+/**
+ * Debug module exports for Python and TypeScript debugging in Windmill.
+ *
+ * This module provides a minimal DAP (Debug Adapter Protocol) implementation
+ * for debugging scripts in the Monaco editor.
+ *
+ * Supported Languages:
+ * - Python: Uses debugpy via the unified DAP Debug Service
+ * - TypeScript/Bun: Uses V8 Inspector Protocol via the unified DAP Debug Service
+ *
+ * Usage:
+ * 1. Start the unified DAP Debug Service:
+ *    bun run src/lib/debug/dap_debug_service.ts
+ *
+ * 2. Import and use MonacoDebugger component in your editor
+ *
+ * The service provides path-based routing:
+ * - /python     - Python debugging via debugpy
+ * - /typescript - TypeScript/Bun debugging via WebKit Inspector
+ * - /bun        - Alias for /typescript
+ *
+ * Example:
+ * ```svelte
+ * <script>
+ *   import MonacoDebugger from '../../debug/MonacoDebugger.svelte'
+ *   let editor // Monaco editor instance
+ *   let code = 'console.log("Hello")'
+ * </script>
+ *
+ * <!-- Option 1: Use language prop (recommended) -->
+ * <MonacoDebugger {editor} {code} language="bun" />
+ *
+ * <!-- Option 2: Explicit URL and path -->
+ * <MonacoDebugger
+ *   {editor}
+ *   {code}
+ *   dapServerUrl="ws://localhost:3003/typescript"
+ *   filePath="/tmp/script.ts"
+ * />
+ * ```
+ */
+export { default as MonacoDebugger } from './MonacoDebugger.svelte';
+export { default as DebugToolbar } from './DebugToolbar.svelte';
+export { default as DebugPanel } from './DebugPanel.svelte';
+export { default as DebugVariableViewer } from './DebugVariableViewer.svelte';
+export { default as DebugConsole } from './DebugConsole.svelte';
+export { DAPClient, getDAPClient, resetDAPClient, debugState } from './dapClient';
+// Re-export shared utilities
+export { fetchContextualVariables, signDebugRequest, getDebugErrorMessage, isDebuggableLanguage, getDebugFileExtension } from './debugUtils';
+/**
+ * Language to debug endpoint path mapping.
+ * Uses the unified DAP Debug Service with path-based routing.
+ */
+export const DAP_ENDPOINT_PATHS = {
+    python3: '/python',
+    bun: '/bun',
+    typescript: '/typescript',
+    nativets: '/typescript',
+    deno: '/typescript'
+};
+/**
+ * Get the WebSocket URL for the DAP debug server.
+ * Routes through the reverse proxy at /ws_debug/* in production.
+ *
+ * @param language - The script language (python3, bun, typescript, etc.)
+ * @returns The full WebSocket URL for the debug server
+ */
+export function getDebugServerUrl(language) {
+    const path = DAP_ENDPOINT_PATHS[language] || DAP_ENDPOINT_PATHS.python3;
+    if (typeof window === 'undefined') {
+        // SSR fallback
+        return `ws://localhost:3003${path}`;
+    }
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    return `${wsProtocol}://${window.location.host}/ws_debug${path}`;
+}
+/**
+ * @deprecated Use isDebuggableLanguage instead
+ */
+export function isDebuggable(language) {
+    return ['python3', 'bun', 'typescript', 'deno', 'nativets'].includes(language);
+}

package/package/components/dedicated_worker.d.ts

@@ -0,0 +1,7 @@
+export declare function dedicatedWorkerTag(workspaceId: string, path: string): Promise<string>;
+export declare function parseTag(tag: string): {
+    workspace: string;
+    type: 'script' | 'flow';
+    path: string;
+} | null;
+export declare function computeHashedTag(rawTag: string): Promise<string>;

package/package/components/dedicated_worker.js

@@ -0,0 +1,36 @@
+const MAX_TAG_LEN = 50;
+const HASH_SUFFIX_LEN = 16;
+// IMPORTANT: This implementation must stay in sync with the Rust backend
+// `dedicated_worker_tag()` in backend/windmill-common/src/worker.rs.
+// The frontend version is used for display; the backend version is authoritative.
+export async function dedicatedWorkerTag(workspaceId, path) {
+    const fullTag = `${workspaceId}:${path}`;
+    if (fullTag.length <= MAX_TAG_LEN)
+        return fullTag;
+    const encoded = new TextEncoder().encode(fullTag);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', encoded);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hexHash = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+    const prefixLen = MAX_TAG_LEN - 1 - HASH_SUFFIX_LEN;
+    return `${fullTag.substring(0, prefixLen)}#${hexHash.substring(0, HASH_SUFFIX_LEN)}`;
+}
+export function parseTag(tag) {
+    const colonIndex = tag.indexOf(':');
+    if (colonIndex === -1)
+        return null;
+    const workspace = tag.substring(0, colonIndex);
+    const rest = tag.substring(colonIndex + 1);
+    if (rest.startsWith('flow/')) {
+        return { workspace, type: 'flow', path: rest.substring(5) };
+    }
+    else {
+        return { workspace, type: 'script', path: rest };
+    }
+}
+export async function computeHashedTag(rawTag) {
+    const parsed = parseTag(rawTag);
+    if (!parsed)
+        return rawTag;
+    const fullPath = parsed.type === 'flow' ? `flow/${parsed.path}` : parsed.path;
+    return dedicatedWorkerTag(parsed.workspace, fullPath);
+}

package/package/components/details/DetailPageHeader.svelte

@@ -4,24 +4,23 @@ import ErrorHandlerToggleButton from './ErrorHandlerToggleButton.svelte';
 import { twMerge } from 'tailwind-merge';
 import { userStore } from '../../stores';
 import { createEventDispatcher, getContext, tick } from 'svelte';
+import SummaryPathDisplay from '../SummaryPathDisplay.svelte';
 import { Calendar } from 'lucide-svelte';
 const { triggersCount, triggersState } = $state(getContext('TriggerContext'));
-let { mainButtons = [], menuItems = [], title, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), children, trigger_badges } = $props();
+let { mainButtons = [], menuItems = [], summary, path, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), onSaved, children, trigger_badges } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="border-b p-2 shadow-md">
+<div class="border-b">
 	<div class="mx-auto">
-		<div class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center">
+		<div
+			class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center min-h-12"
+		>
 			<div class="grow px-2 inline-flex items-center gap-4 min-w-0">
-				<div
-					class={twMerge(
-						'text-lg min-w-24 font-semibold text-emphasis truncate',
-						$userStore?.operator ? 'pl-10' : ''
-					)}
-				>
-					{title}
-				</div>{#if tag}
+				<div class={twMerge('min-w-0', $userStore?.operator ? 'pl-10' : '')}>
+					<SummaryPathDisplay {summary} {path} {onSaved} kind={errorHandlerKind} />
+				</div>
+				{#if tag}
 					<Badge>tag: {tag}</Badge>
 				{/if}
 				{@render children?.()}
@@ -46,7 +45,7 @@ const dispatch = createEventDispatcher();
 				{/if}
 				{@render trigger_badges?.()}
 			</div>
-			<div class="flex gap-1 items-center">
+			<div class="flex gap-1 items-center pr-4">
 				{#if menuItems.length > 0}
 					{#key menuItems}
 						<DropdownV2

package/package/components/details/DetailPageHeader.svelte.d.ts

@@ -13,11 +13,13 @@ type MainButton = {
 interface Props {
     mainButtons?: MainButton[];
     menuItems?: MenuItemButton[];
-    title: string;
+    summary?: string;
+    path?: string;
     tag: string | undefined;
     errorHandlerKind: 'flow' | 'script';
     scriptOrFlowPath: string;
     errorHandlerMuted: boolean | undefined;
+    onSaved?: (newPath: string) => void;
     children?: import('svelte').Snippet;
     trigger_badges?: import('svelte').Snippet;
 }

package/package/components/details/DetailPageLayout.svelte

@@ -2,13 +2,14 @@
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import DetailPageDetailPanel from './DetailPageDetailPanel.svelte';
 import FlowViewerInner from '../FlowViewerInner.svelte';
-let { isOperator = false, flow_json = undefined, selected = $bindable(), forceSmallScreen = false, isChatMode = false, header, form, scriptRender: script, save_inputs, flow_step, triggers } = $props();
+let { isOperator = false, flow_json = undefined, selected = $bindable(), forceSmallScreen = false, isChatMode = false, header, form, scriptRender: script, save_inputs, flow_step, triggers, flow_graph } = $props();
 let mobileTab = $state('form');
 let clientWidth = $state(window.innerWidth);
 const script_render = $derived(script);
 const save_inputs_render = $derived(save_inputs);
 const flow_step_render = $derived(flow_step);
 const triggers_render = $derived(triggers);
+const flow_graph_render = $derived(flow_graph);
 const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 </script>
 
@@ -49,6 +50,9 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 					{#if !isChatMode}
 						<Tab value="saved_inputs" label="Inputs" />
 					{/if}
+					{#if isChatMode && flow_json}
+						<Tab value="flow" label="Flow graph" />
+					{/if}
 					{#if !isOperator}
 						<Tab value="triggers" label="Triggers" />
 					{/if}
@@ -59,7 +63,7 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 					{/if}
 
 					{#snippet content()}
-						<div class="grow min-h-0">
+						<div class="grow min-h-0 overflow-y-auto">
 							<TabContent value="form" class="flex flex-col flex-1 h-full">
 								{@render form?.()}
 							</TabContent>
@@ -70,6 +74,11 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 							<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
 								{@render triggers?.()}
 							</TabContent>
+							{#if isChatMode && flow_json}
+								<TabContent value="flow" class="flex flex-col flex-1 h-full">
+									{@render flow_graph_render?.()}
+								</TabContent>
+							{/if}
 							{#if flow_json}
 								<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto p-2">
 									<FlowViewerInner flow={flow_json} />

package/package/components/details/DetailPageLayout.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     save_inputs?: import('svelte').Snippet;
     flow_step?: import('svelte').Snippet;
     triggers?: import('svelte').Snippet;
+    flow_graph?: import('svelte').Snippet;
 }
 declare const DetailPageLayout: import("svelte").Component<Props, {}, "selected">;
 type DetailPageLayout = ReturnType<typeof DetailPageLayout>;

package/package/components/details/createAppFromScript.d.ts

@@ -20,9 +20,12 @@ export declare function createAppFromScript(path: string, schema: Record<string,
             type: string;
             configuration: {};
             panes: number[];
-            customCss: {
-                container?: undefined;
-            };
+            customCss: Partial<{
+                readonly container: {
+                    readonly class: "";
+                    readonly style: "";
+                };
+            }>;
             numberOfSubgrids: number;
             id: string;
             actions?: undefined;
@@ -116,7 +119,20 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     autoRefresh?: undefined;
                     recomputeOnInputChanged?: undefined;
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly label: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly description: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
                 recomputeIds?: undefined;
                 horizontalAlignment?: undefined;
@@ -309,7 +325,16 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     recomputeOnInputChanged: boolean;
                     value?: undefined;
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly button: {
+                        readonly style: "";
+                        readonly class: "";
+                    };
+                    readonly container: {
+                        readonly style: "";
+                        readonly class: "";
+                    };
+                }>;
                 recomputeIds: never[];
                 horizontalAlignment: string;
                 verticalAlignment: string;
@@ -343,7 +368,24 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     };
                 };
                 tabs: string[];
-                customCss: {};
+                customCss: Partial<{
+                    readonly tabRow: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly allTabs: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly selectedTab: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 numberOfSubgrids: number;
                 id: string;
                 disabledTabs: {
@@ -382,7 +424,16 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                         path: string;
                     };
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly header: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
             };
             id: string;
@@ -415,7 +466,16 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                         };
                     };
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly header: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
             };
             id: string;
@@ -566,9 +626,12 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
             type: string;
             configuration: {};
             panes: number[];
-            customCss: {
-                container?: undefined;
-            };
+            customCss: Partial<{
+                readonly container: {
+                    readonly class: "";
+                    readonly style: "";
+                };
+            }>;
             numberOfSubgrids: number;
             id: string;
         };
@@ -660,7 +723,20 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     autoRefresh?: undefined;
                     recomputeOnInputChanged?: undefined;
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly label: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly description: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
                 recomputeIds?: undefined;
                 horizontalAlignment?: undefined;
@@ -853,7 +929,16 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     recomputeOnInputChanged: boolean;
                     value?: undefined;
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly button: {
+                        readonly style: "";
+                        readonly class: "";
+                    };
+                    readonly container: {
+                        readonly style: "";
+                        readonly class: "";
+                    };
+                }>;
                 recomputeIds: never[];
                 horizontalAlignment: string;
                 verticalAlignment: string;
@@ -887,7 +972,24 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     };
                 };
                 tabs: string[];
-                customCss: {};
+                customCss: Partial<{
+                    readonly tabRow: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly allTabs: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly selectedTab: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 numberOfSubgrids: number;
                 id: string;
                 disabledTabs: {
@@ -927,7 +1029,16 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                         };
                     };
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly header: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
             };
             id: string;
@@ -960,7 +1071,16 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                         };
                     };
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly header: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
             };
             id: string;

package/package/components/details/createAppFromScript.js

@@ -1,3 +1,4 @@
+import { ccomponents } from '../apps/editor/component';
 export function createAppFromScript(path, schema) {
     return {
         grid: [
@@ -22,7 +23,7 @@ export function createAppFromScript(path, schema) {
                     type: 'verticalsplitpanescomponent',
                     configuration: {},
                     panes: [50, 50],
-                    customCss: {},
+                    customCss: structuredClone(ccomponents['verticalsplitpanescomponent'].customCss),
                     numberOfSubgrids: 2,
                     id: 'a'
                 },
@@ -103,7 +104,7 @@ export function createAppFromScript(path, schema) {
                             fieldType: 'schema',
                             value: schema
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['schemaformcomponent'].customCss),
                         id: 'c'
                     },
                     id: 'c'
@@ -291,7 +292,7 @@ export function createAppFromScript(path, schema) {
                             autoRefresh: true,
                             recomputeOnInputChanged: true
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['buttoncomponent'].customCss),
                         recomputeIds: [],
                         horizontalAlignment: 'right',
                         verticalAlignment: 'center',
@@ -327,7 +328,7 @@ export function createAppFromScript(path, schema) {
                             }
                         },
                         tabs: ['Result', 'Logs'],
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['tabscomponent'].customCss),
                         numberOfSubgrids: 2,
                         id: 'b',
                         disabledTabs: [
@@ -375,7 +376,7 @@ export function createAppFromScript(path, schema) {
                                 path: 'result'
                             }
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['displaycomponent'].customCss),
                         id: 'e'
                     },
                     id: 'e'
@@ -410,7 +411,7 @@ export function createAppFromScript(path, schema) {
                                 }
                             }
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['jobidlogcomponent'].customCss),
                         id: 'f'
                     },
                     id: 'f'
@@ -572,7 +573,7 @@ export function createAppFromFlow(path, schema) {
                     type: 'verticalsplitpanescomponent',
                     configuration: {},
                     panes: [50, 50],
-                    customCss: {},
+                    customCss: structuredClone(ccomponents['verticalsplitpanescomponent'].customCss),
                     numberOfSubgrids: 2,
                     id: 'a'
                 },
@@ -652,7 +653,7 @@ export function createAppFromFlow(path, schema) {
                             fieldType: 'schema',
                             value: schema
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['schemaformcomponent'].customCss),
                         id: 'c'
                     },
                     id: 'c'
@@ -840,7 +841,7 @@ export function createAppFromFlow(path, schema) {
                             autoRefresh: false,
                             recomputeOnInputChanged: false
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['buttoncomponent'].customCss),
                         recomputeIds: [],
                         horizontalAlignment: 'right',
                         verticalAlignment: 'center',
@@ -876,7 +877,7 @@ export function createAppFromFlow(path, schema) {
                             }
                         },
                         tabs: ['Result', 'Logs'],
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['tabscomponent'].customCss),
                         numberOfSubgrids: 2,
                         id: 'b',
                         disabledTabs: [
@@ -925,7 +926,7 @@ export function createAppFromFlow(path, schema) {
                                 }
                             }
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['jobidflowstatuscomponent'].customCss),
                         id: 'e'
                     },
                     id: 'e'
@@ -960,7 +961,7 @@ export function createAppFromFlow(path, schema) {
                                 }
                             }
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['jobidlogcomponent'].customCss),
                         id: 'f'
                     },
                     id: 'f'

package/package/components/diffEditorTypes.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonType } from './common';
+export interface ButtonProp {
+    text: string;
+    color?: ButtonType.Color;
+    onClick: () => void;
+}

package/package/components/diffEditorTypes.js

@@ -0,0 +1 @@
+export {};