windmill-components 1.596.1 → 1.612.2

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/flows/CreateActionsApp.svelte

@@ -143,16 +143,18 @@ function confirmFullCode() {
 
 		<div class="flex justify-end gap-3 pt-2">
 			<Button
-				color="light"
-				size="sm"
-				on:click={() => {
+				variant="default"
+				unifiedSize="md"
+				onClick={() => {
 					featurePreviewModalOpen = false
 					appTypeModalOpen = true
 				}}
 			>
 				Go back
 			</Button>
-			<Button color="blue" size="sm" on:click={confirmFullCode}>I understand, continue</Button>
+			<Button unifiedSize="md" variant="accent" on:click={confirmFullCode}
+				>I understand, continue</Button
+			>
 		</div>
 	</div>
 </Modal>

package/package/components/flows/DebounceLimit.svelte.d.ts

@@ -11,6 +11,6 @@ type $$ComponentProps = {
     color?: 'nord' | undefined;
     fontClass?: string;
 };
-declare const DebounceLimit: import("svelte").Component<$$ComponentProps, {}, "debounce_delay_s" | "debounce_key" | "debounce_args_to_accumulate" | "max_total_debouncing_time" | "max_total_debounces_amount">;
+declare const DebounceLimit: import("svelte").Component<$$ComponentProps, {}, "debounce_key" | "debounce_delay_s" | "debounce_args_to_accumulate" | "max_total_debouncing_time" | "max_total_debounces_amount">;
 type DebounceLimit = ReturnType<typeof DebounceLimit>;
 export default DebounceLimit;

package/package/components/flows/FlowHistoryInner.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { run, stopPropagation, createBubbler } from 'svelte/legacy';
+<script lang="ts">import { stopPropagation, createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { classNames, displayDate, emptyString, sendUserToast } from '../../utils';
@@ -14,6 +14,7 @@ let selectedVersion = $state(undefined);
 let selected = $state(undefined);
 let deploymentMsgUpdateMode = $state(false);
 let deploymentMsgUpdate = $state(undefined);
+let selectedVersionIndex = $state(undefined);
 async function loadFlow(version) {
     selected = await FlowService.getFlowVersion({
         workspace: $workspaceStore,
@@ -60,9 +61,11 @@ async function restoreVersion(flow) {
     sendUserToast('Flow restored from previous deployment');
 }
 loadVersions();
-run(() => {
+$effect.pre(() => {
     selectedVersion !== undefined && loadFlow(selectedVersion.id);
 });
+// Get available versions for comparison (versions after selected one)
+let availableVersions = $derived(selectedVersionIndex !== undefined ? versions.slice(selectedVersionIndex + 1) : []);
 </script>
 
 <Splitpanes class="!overflow-visible">
@@ -71,7 +74,7 @@ run(() => {
 			{#if !loading}
 				{#if versions.length > 0}
 					<div class="flex gap-2 flex-col">
-						{#each versions ?? [] as version}
+						{#each versions ?? [] as version (version.id)}
 							<!-- svelte-ignore a11y_click_events_have_key_events -->
 							<div
 								class={classNames(
@@ -81,7 +84,11 @@ run(() => {
 								role="button"
 								tabindex="0"
 								onclick={() => {
+									const versionIndex = versions.findIndex((v) => v.id === version.id)
 									selectedVersion = version
+									selectedVersionIndex = versionIndex
+									deploymentMsgUpdate = undefined
+									deploymentMsgUpdateMode = false
 								}}
 							>
 								<span class="text-xs truncate">
@@ -190,7 +197,11 @@ run(() => {
 						{#await import('../FlowViewer.svelte')}
 							<Loader2 class="animate-spin" />
 						{:then Module}
-							<Module.default flow={selected} />
+							<Module.default
+								flow={selected}
+								{availableVersions}
+								selectedVersionId={selectedVersion?.id}
+							/>
 						{/await}
 					</div>
 				{:else}

package/package/components/flows/content/AgentToolWrapper.svelte

@@ -24,7 +24,7 @@ let { tool = $bindable(), noEditor = false, enableAi = false, parentModule = und
 	/>
 {:else if isMcpTool(tool)}
 	<!-- MCP tool - use McpToolEditor -->
-	<McpToolEditor bind:tool={tool as McpTool} {noEditor} />
+	<McpToolEditor bind:tool={tool as McpTool} />
 {:else if isWebsearchTool(tool)}
 	<WebsearchToolDisplay />
 {/if}

package/package/components/flows/content/FlowEditorDrawer.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">import { Drawer, DrawerContent } from '../../common';
+import FlowBuilder from '../../FlowBuilder.svelte';
+import DiffDrawer from '../../DiffDrawer.svelte';
+import { FlowService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { ExternalLink, Loader2 } from 'lucide-svelte';
+import Button from '../../common/button/Button.svelte';
+import { emptySchema } from '../../../utils';
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import { initFlow } from '../flowStore.svelte';
+let flowEditorDrawer = $state();
+const dispatch = createEventDispatcher();
+export async function openDrawer(path, cb) {
+    flowPath = path;
+    flow = undefined;
+    loading = true;
+    callback = cb;
+    flowEditorDrawer?.openDrawer?.();
+    try {
+        const flowWithDraft = await FlowService.getFlowByPathWithDraft({
+            workspace: $workspaceStore,
+            path
+        });
+        savedFlow = {
+            ...structuredClone(flowWithDraft),
+            draft: flowWithDraft.draft
+                ? {
+                    ...structuredClone(flowWithDraft.draft),
+                    path: flowWithDraft.draft.path ?? flowWithDraft.path
+                }
+                : undefined
+        };
+        // Use the draft if available, otherwise the deployed flow
+        flow = flowWithDraft.draft ?? flowWithDraft;
+        await initFlow(flow, flowStore, flowStateStore);
+        loading = false;
+    }
+    catch (error) {
+        console.error('Failed to load flow:', error);
+        loading = false;
+    }
+}
+let callback = undefined;
+let flowPath = $state('');
+let flow = $state(undefined);
+let savedFlow = $state(undefined);
+let loading = $state(true);
+const flowStore = $state({
+    val: {
+        summary: '',
+        value: { modules: [] },
+        path: '',
+        edited_at: '',
+        edited_by: '',
+        archived: false,
+        extra_perms: {},
+        schema: emptySchema()
+    }
+});
+const flowStateStore = $state({ val: {} });
+let diffDrawer = $state();
+</script>
+
+<Drawer bind:this={flowEditorDrawer} size="100%">
+	<DrawerContent
+		title="Flow Editor - {flowPath}"
+		noPadding
+		fullScreen
+		on:close={() => {
+			flowEditorDrawer?.closeDrawer()
+		}}
+	>
+		{#if loading}
+			<div
+				out:fade={{ duration: 200 }}
+				class="absolute inset-0 center-center flex-col bg-surface text-primary border"
+			>
+				<Loader2 class="animate-spin" size={16} />
+				<span class="text-xs mt-1">Loading flow...</span>
+			</div>
+		{:else if flow}
+			<FlowBuilder
+				{flowStore}
+				{flowStateStore}
+				initialPath={flowPath}
+				newFlow={false}
+				selectedId="settings-metadata"
+				loading={false}
+				bind:savedFlow
+				{diffDrawer}
+				customUi={{ topBar: { draft: false, extraDeployOptions: false } }}
+				onDeploy={() => {
+					callback?.()
+					dispatch('save')
+					flowEditorDrawer?.closeDrawer()
+				}}
+				onDetails={() => {
+					callback?.()
+					dispatch('save')
+					flowEditorDrawer?.closeDrawer()
+				}}
+			/>
+		{:else}
+			<div class="flex items-center justify-center h-full">
+				<span class="text-red-500">Failed to load flow</span>
+			</div>
+		{/if}
+		{#snippet actions()}
+			<Button
+				variant="default"
+				on:click={() => {
+					window.open(`/flows/edit/${flowPath}`, '_blank', 'noopener,noreferrer')
+					flowEditorDrawer?.closeDrawer()
+				}}
+				startIcon={{ icon: ExternalLink }}
+			>
+				Edit in new tab & close drawer
+			</Button>
+		{/snippet}
+	</DrawerContent>
+</Drawer>
+
+<DiffDrawer bind:this={diffDrawer} isFlow />

package/package/components/flows/content/FlowEditorDrawer.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FlowEditorDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    save: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    openDrawer: (path: string, cb: () => void) => Promise<void>;
+}, "">;
+type FlowEditorDrawer = InstanceType<typeof FlowEditorDrawer>;
+export default FlowEditorDrawer;