windmill-components 1.623.1 → 1.642.0

package/package/components/raw_apps/RawAppInlineScriptEditor.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">import { createBubbler, stopPropagation } from 'svelte/legacy';
 const bubble = createBubbler();
 import Button from '../common/button/Button.svelte';
-import { createEventDispatcher, onMount } from 'svelte';
-import { Trash2 } from 'lucide-svelte';
+import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte';
+import { AlertTriangle, Trash2, Bug, Terminal } from 'lucide-svelte';
+import Modal from '../common/modal/Modal.svelte';
 import { inferArgs, inferAssets } from '../../infer';
 import Editor from '../Editor.svelte';
-import { emptySchema } from '../../utils';
+import { emptySchema, getLocalSetting, sendUserToast, storeLocalSetting } from '../../utils';
 import { scriptLangToEditorLang } from '../../scripts';
 import DiffEditor from '../DiffEditor.svelte';
 import CacheTtlPopup from '../apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte';
-import RunButton from '../RunButton.svelte';
 import { computeFields } from '../apps/editor/inlineScriptsPanel/utils';
 import EditorBar from '../EditorBar.svelte';
 import { LanguageIcon } from '../common/languageIcons';
@@ -17,7 +17,12 @@ import { resource } from 'runed';
 import { usePreparedAssetSqlQueries } from '../../infer.svelte';
 import AssetsDropdownButton from '../assets/AssetsDropdownButton.svelte';
 import { workspaceStore } from '../../stores';
-let { inlineScript = $bindable(), name = $bindable(undefined), id, fields = $bindable(undefined), path, isLoading = false, onRun, onCancel, editor = $bindable(undefined), lastDeployedCode } = $props();
+import { SvelteSet } from 'svelte/reactivity';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { editor as meditor } from 'monaco-editor';
+import { DebugConsole, getDAPClient, debugState, resetDAPClient, getDebugServerUrl, isDebuggable, getDebugFileExtension, fetchContextualVariables, signDebugRequest, getDebugErrorMessage } from '../debug';
+import TextInput from '../text_input/TextInput.svelte';
+let { inlineScript = $bindable(), name = $bindable(undefined), id, fields = $bindable(undefined), path, onRun, editor = $bindable(undefined), lastDeployedCode, onSelectionChange } = $props();
 let diffEditor = $state();
 let validCode = $state(true);
 async function inferInlineScriptSchema(language, content, schema) {
@@ -72,6 +77,397 @@ $effect(() => {
     if (inlineScript && inferAssetsRes.current)
         inlineScript.assets = inferAssetsRes.current?.assets;
 });
+// Debug mode state
+const DEBUG_BETA_WARNING_KEY = 'debug_beta_warning_confirmed';
+let showDebugBetaWarning = $state(false);
+let debugMode = $state(false);
+let debugBreakpoints = new SvelteSet();
+let breakpointDecorations = $state([]);
+let currentLineDecoration = $state([]);
+let dapClient = $state(null);
+let selectedDebugFrameId = $state(null);
+let debugSessionJobId = $state(null);
+let showDebugConsole = $state(true);
+let editorPaneSize = $state(75);
+let consolePaneSize = $state(25);
+// Get the DAP server URL based on language
+const dapServerUrl = $derived(getDebugServerUrl((inlineScript?.language || 'python3')));
+const debugFilePath = $derived(`/tmp/script${getDebugFileExtension(inlineScript?.language ?? '')}`);
+const isDebuggableScript = $derived(isDebuggable(inlineScript?.language ?? ''));
+const showDebugPanel = $derived(debugMode && $debugState.connected && ($debugState.running || $debugState.stopped));
+const hasDebugResult = $derived(debugMode && $debugState.result !== undefined);
+const debugConsoleVisible = $derived(showDebugPanel && showDebugConsole);
+const currentDebugFrameId = $derived(selectedDebugFrameId ?? $debugState.stackFrames[0]?.id);
+// Export debug state for parent component
+export function getDebugState() {
+    return {
+        debugMode,
+        isDebuggableScript,
+        showDebugPanel,
+        hasDebugResult,
+        dapClient,
+        selectedDebugFrameId,
+        debugSessionJobId,
+        debugBreakpoints
+    };
+}
+// Breakpoint decoration options
+const breakpointDecorationType = {
+    glyphMarginClassName: 'debug-breakpoint-glyph',
+    glyphMarginHoverMessage: { value: 'Breakpoint (click to remove)' },
+    stickiness: 1
+};
+const currentLineDecorationType = {
+    isWholeLine: true,
+    className: 'debug-current-line',
+    glyphMarginClassName: 'debug-current-line-glyph'
+};
+// Debug functions
+function toggleBreakpoint(line) {
+    if (debugBreakpoints.has(line)) {
+        debugBreakpoints.delete(line);
+    }
+    else {
+        debugBreakpoints.add(line);
+    }
+    updateBreakpointDecorations();
+}
+function updateBreakpointDecorations() {
+    const monacoEditor = editor?.getEditor?.();
+    if (!monacoEditor)
+        return;
+    const decorations = Array.from(debugBreakpoints).map((line) => ({
+        range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
+        options: breakpointDecorationType
+    }));
+    const oldDecorations = untrack(() => breakpointDecorations);
+    breakpointDecorations = monacoEditor.deltaDecorations(oldDecorations, decorations);
+}
+function refreshBreakpointPositions() {
+    const monacoEditor = editor?.getEditor?.();
+    if (!monacoEditor || breakpointDecorations.length === 0)
+        return;
+    const model = monacoEditor.getModel();
+    if (!model)
+        return;
+    const newLines = new Set();
+    for (const decorationId of breakpointDecorations) {
+        const range = model.getDecorationRange(decorationId);
+        if (range) {
+            newLines.add(range.startLineNumber);
+        }
+    }
+    const oldLines = Array.from(debugBreakpoints).sort((a, b) => a - b);
+    const updatedLines = Array.from(newLines).sort((a, b) => a - b);
+    const positionsChanged = oldLines.length !== updatedLines.length ||
+        oldLines.some((line, i) => line !== updatedLines[i]);
+    if (positionsChanged) {
+        debugBreakpoints.clear();
+        for (const line of newLines) {
+            debugBreakpoints.add(line);
+        }
+        syncBreakpointsWithServer();
+    }
+}
+async function syncBreakpointsWithServer() {
+    if (!dapClient || !dapClient.isConnected())
+        return;
+    try {
+        await dapClient.setBreakpoints(debugFilePath, Array.from(debugBreakpoints));
+    }
+    catch (error) {
+        console.error('Failed to sync breakpoints:', error);
+    }
+}
+function updateCurrentLineDecoration(line) {
+    const monacoEditor = editor?.getEditor?.();
+    if (!monacoEditor)
+        return;
+    const oldDecorations = untrack(() => currentLineDecoration);
+    if (!line) {
+        currentLineDecoration = monacoEditor.deltaDecorations(oldDecorations, []);
+        return;
+    }
+    const decorations = [
+        {
+            range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
+            options: currentLineDecorationType
+        }
+    ];
+    currentLineDecoration = monacoEditor.deltaDecorations(oldDecorations, decorations);
+    monacoEditor.revealLineInCenter(line);
+}
+export async function startDebugging() {
+    if (!inlineScript)
+        return;
+    try {
+        showDebugConsole = true;
+        selectedDebugFrameId = null;
+        resetDAPClient();
+        dapClient = getDAPClient(dapServerUrl);
+        const env = await fetchContextualVariables($workspaceStore ?? '');
+        const code = inlineScript.content;
+        let signedPayload;
+        try {
+            signedPayload = await signDebugRequest($workspaceStore ?? '', code ?? '', inlineScript.language ?? 'python3');
+            debugSessionJobId = signedPayload.job_id;
+        }
+        catch (signError) {
+            sendUserToast(getDebugErrorMessage(signError), true);
+            return;
+        }
+        // Get static args from fields
+        const args = Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
+            if (obj.type === 'static') {
+                acc[key] = obj.value;
+            }
+            return acc;
+        }, {});
+        await dapClient.connect();
+        await dapClient.initialize();
+        await dapClient.setBreakpoints(debugFilePath, Array.from(debugBreakpoints));
+        await dapClient.configurationDone();
+        await dapClient.launch({
+            code,
+            cwd: '/tmp',
+            args,
+            callMain: true,
+            env,
+            token: signedPayload.token
+        });
+    }
+    catch (error) {
+        console.error('Failed to start debugging:', error);
+        sendUserToast(getDebugErrorMessage(error), true);
+    }
+}
+export async function stopDebugging() {
+    if (!dapClient)
+        return;
+    try {
+        await dapClient.terminate();
+        dapClient.disconnect();
+    }
+    catch (error) {
+        console.error('Failed to stop debugging:', error);
+    }
+    finally {
+        debugSessionJobId = null;
+    }
+}
+export async function continueExecution() {
+    if (!dapClient)
+        return;
+    await dapClient.continue_();
+}
+export async function stepOver() {
+    if (!dapClient)
+        return;
+    await dapClient.stepOver();
+}
+export async function stepIn() {
+    if (!dapClient)
+        return;
+    await dapClient.stepIn();
+}
+export async function stepOut() {
+    if (!dapClient)
+        return;
+    await dapClient.stepOut();
+}
+export function clearAllBreakpoints() {
+    debugBreakpoints.clear();
+    updateBreakpointDecorations();
+}
+export function toggleDebugMode() {
+    if (debugMode) {
+        // Exiting debug mode - clean up
+        debugMode = false;
+        stopDebugging();
+        clearAllBreakpoints();
+        updateCurrentLineDecoration(undefined);
+    }
+    else {
+        // Entering debug mode - check if beta warning was confirmed
+        if (getLocalSetting(DEBUG_BETA_WARNING_KEY) !== 'true') {
+            showDebugBetaWarning = true;
+        }
+        else {
+            debugMode = true;
+        }
+    }
+}
+function confirmDebugBetaWarning() {
+    storeLocalSetting(DEBUG_BETA_WARNING_KEY, 'true');
+    showDebugBetaWarning = false;
+    debugMode = true;
+}
+// Subscribe to debug state changes for current line highlighting
+$effect(() => {
+    const currentLine = $debugState.currentLine;
+    if (debugMode) {
+        untrack(() => updateCurrentLineDecoration(currentLine));
+    }
+});
+// Watch for language changes - exit debug mode when language changes
+let lastDebugLang = undefined;
+$effect(() => {
+    const currentLang = inlineScript?.language;
+    if (lastDebugLang !== undefined && lastDebugLang !== currentLang && debugMode) {
+        untrack(() => {
+            if (dapClient) {
+                dapClient
+                    .terminate()
+                    .catch(() => { })
+                    .finally(() => {
+                    dapClient?.disconnect();
+                });
+            }
+            resetDAPClient();
+            dapClient = null;
+            debugMode = false;
+            clearAllBreakpoints();
+            updateCurrentLineDecoration(undefined);
+        });
+    }
+    lastDebugLang = currentLang;
+});
+// Set up glyph margin click handler for breakpoints when debug mode is enabled
+$effect(() => {
+    const monacoEditor = editor?.getEditor?.();
+    if (!monacoEditor)
+        return;
+    if (debugMode && isDebuggableScript) {
+        monacoEditor.updateOptions({ glyphMargin: true });
+        const mouseDownDisposable = monacoEditor.onMouseDown((e) => {
+            if (e.target.type === 2) {
+                const line = e.target.position?.lineNumber;
+                if (line) {
+                    toggleBreakpoint(line);
+                }
+            }
+        });
+        monacoEditor.addCommand(120, () => {
+            const position = monacoEditor.getPosition();
+            if (position) {
+                toggleBreakpoint(position.lineNumber);
+            }
+        });
+        monacoEditor.addCommand(119, () => {
+            if ($debugState.stopped)
+                continueExecution();
+        });
+        monacoEditor.addCommand(117, () => {
+            if ($debugState.stopped)
+                stepOver();
+        });
+        monacoEditor.addCommand(118, () => {
+            if ($debugState.stopped)
+                stepIn();
+        });
+        monacoEditor.addCommand(1143, () => {
+            if ($debugState.stopped)
+                stepOut();
+        });
+        return () => {
+            mouseDownDisposable.dispose();
+            monacoEditor.updateOptions({ glyphMargin: false });
+        };
+    }
+    else {
+        monacoEditor.updateOptions({ glyphMargin: false });
+    }
+});
+// Clean up debug mode on destroy
+onDestroy(() => {
+    if (debugMode) {
+        stopDebugging();
+        resetDAPClient();
+    }
+});
+// Track last selection to avoid duplicate events
+let lastSelectionKey = $state(null);
+// Track pending selection during mouse drag
+let pendingSelection = null;
+let isMouseDown = false;
+function emitSelection(editorInstance) {
+    if (!onSelectionChange)
+        return;
+    const selection = pendingSelection;
+    if (!selection) {
+        // No selection - only emit null if we previously had a selection
+        if (lastSelectionKey !== null) {
+            lastSelectionKey = null;
+            onSelectionChange(null);
+        }
+        return;
+    }
+    // Check if there's an actual selection (not just cursor position)
+    const hasSelection = selection.startLineNumber !== selection.endLineNumber ||
+        selection.startColumn !== selection.endColumn;
+    if (!hasSelection) {
+        // No selection - only emit null if we previously had a selection
+        if (lastSelectionKey !== null) {
+            lastSelectionKey = null;
+            onSelectionChange(null);
+        }
+        return;
+    }
+    // Get the selected content from the editor
+    const model = editorInstance.getModel?.();
+    if (!model || !('getValueInRange' in model))
+        return;
+    const content = model.getValueInRange({
+        startLineNumber: selection.startLineNumber,
+        startColumn: selection.startColumn,
+        endLineNumber: selection.endLineNumber,
+        endColumn: selection.endColumn
+    });
+    // Create a key to deduplicate identical selections
+    const selectionKey = `${selection.startLineNumber}:${selection.startColumn}:${selection.endLineNumber}:${selection.endColumn}`;
+    if (selectionKey === lastSelectionKey)
+        return;
+    lastSelectionKey = selectionKey;
+    onSelectionChange({
+        content,
+        startLine: selection.startLineNumber,
+        endLine: selection.endLineNumber,
+        startColumn: selection.startColumn,
+        endColumn: selection.endColumn
+    });
+}
+// Listen for editor selection changes - wait for mouseup before emitting
+$effect(() => {
+    if (!editor || !onSelectionChange)
+        return;
+    const editorInstance = editor;
+    // Track selection changes but don't emit until mouseup
+    const selectionDisposable = editorInstance.onDidChangeCursorSelection?.((e) => {
+        pendingSelection = e.selection;
+        // If not mouse-driven (e.g., keyboard selection), emit immediately
+        if (!isMouseDown) {
+            untrack(() => emitSelection(editorInstance));
+        }
+    });
+    // Track mouse state
+    const handleMouseDown = () => {
+        isMouseDown = true;
+    };
+    const handleMouseUp = () => {
+        if (isMouseDown) {
+            isMouseDown = false;
+            untrack(() => emitSelection(editorInstance));
+        }
+    };
+    // Add mouse listeners to the document to catch mouseup even outside editor
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+        selectionDisposable?.dispose();
+        document.removeEventListener('mousedown', handleMouseDown);
+        document.removeEventListener('mouseup', handleMouseUp);
+    };
+});
 </script>
 
 {#if inlineScript}
@@ -82,19 +478,21 @@ $effect(() => {
 			</div>
 			{#if name !== undefined}
 				<div class="flex flex-row gap-2 w-full items-center">
-					<input
-						onkeydown={stopPropagation(bubble('keydown'))}
+					<TextInput
+						inputProps={{
+							onkeydown: () => stopPropagation(bubble('keydown')),
+							placeholder: 'Inline script name'
+						}}
 						bind:value={name}
-						placeholder="Inline script name"
-						class="!text-xs !rounded-sm !shadow-none"
+						size="sm"
 					/>
 				</div>
 				<Button
 					title="Clear script"
-					size="xs2"
-					color="light"
-					variant="contained"
+					variant="subtle"
 					aria-label="Clear script"
+					destructive
+					unifiedSize="sm"
 					on:click={() => dispatch('delete')}
 					endIcon={{ icon: Trash2 }}
 					iconOnly
@@ -107,14 +505,13 @@ $effect(() => {
 
 				<Button
 					variant="default"
-					size="xs2"
+					unifiedSize="sm"
 					on:click={async () => {
 						editor?.format()
 					}}
 				>
 					Format
 				</Button>
-				<RunButton {isLoading} {onRun} {onCancel} />
 			</div>
 		</div>
 
@@ -124,7 +521,7 @@ $effect(() => {
 				{editor}
 				lang={inlineScript.language}
 				{websocketAlive}
-				iconOnly={width < 950}
+				iconOnly={width < 1250}
 				kind={'script'}
 				template={'script'}
 				on:showDiffMode={showDiffMode}
@@ -141,40 +538,123 @@ $effect(() => {
 				{#if inlineScript.assets?.length}
 					<AssetsDropdownButton assets={inlineScript.assets} />
 				{/if}
+				{#if isDebuggableScript}
+					<Button
+						variant={debugMode ? 'accent' : 'default'}
+						size="xs2"
+						on:click={toggleDebugMode}
+						startIcon={{ icon: Bug }}
+						btnClasses={debugMode
+							? ''
+							: 'bg-surface hover:bg-surface-hover border border-tertiary/30'}
+						title="Toggle Debug Mode"
+					>
+						{debugMode ? 'Exit Debug' : 'Debug'}
+					</Button>
+				{/if}
+				{#if showDebugPanel && !showDebugConsole}
+					<Button
+						variant="default"
+						size="xs2"
+						on:click={() => (showDebugConsole = true)}
+						startIcon={{ icon: Terminal }}
+						btnClasses="bg-surface hover:bg-surface-hover border border-tertiary/30"
+						title="Show Debug Console"
+					>
+						Console
+					</Button>
+				{/if}
 			</div>
-			<Editor
-				path={path + '/' + id}
-				bind:this={editor}
-				class="flex flex-1 grow h-full"
-				scriptLang={inlineScript.language}
-				bind:code={inlineScript.content}
-				fixedOverflowWidgets={true}
-				cmdEnterAction={() => onRun()}
-				bind:websocketAlive
-				rawAppRunnableKey={id}
-				on:change={async (e) => {
-					if (inlineScript) {
-						if (inlineScript.lock != undefined) {
-							inlineScript.lock = undefined
-						}
-						const oldSchema = JSON.stringify(inlineScript.schema)
-						if (inlineScript.schema == undefined) {
-							inlineScript.schema = emptySchema()
+			{#if debugConsoleVisible}
+				<Splitpanes horizontal class="h-full">
+					<Pane bind:size={editorPaneSize} minSize={20}>
+						<Editor
+							path={path + '/' + id}
+							bind:this={editor}
+							class="flex flex-1 grow h-full"
+							scriptLang={inlineScript.language}
+							bind:code={inlineScript.content}
+							fixedOverflowWidgets={true}
+							cmdEnterAction={() => onRun()}
+							bind:websocketAlive
+							rawAppRunnableKey={id}
+							on:change={async (e) => {
+								if (inlineScript) {
+									if (inlineScript.lock != undefined) {
+										inlineScript.lock = undefined
+									}
+									const oldSchema = JSON.stringify(inlineScript.schema)
+									if (inlineScript.schema == undefined) {
+										inlineScript.schema = emptySchema()
+									}
+									await inferInlineScriptSchema(
+										inlineScript?.language,
+										e.detail,
+										inlineScript.schema
+									)
+									if (JSON.stringify(inlineScript.schema) != oldSchema) {
+										inlineScript = inlineScript
+										syncFields()
+									}
+									if (debugMode && breakpointDecorations.length > 0) {
+										refreshBreakpointPositions()
+									}
+								}
+							}}
+							args={Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
+								acc[key] = obj.type === 'static' ? obj.value : undefined
+								return acc
+							}, {})}
+							preparedAssetsSqlQueries={preparedSqlQueries.current}
+						/>
+					</Pane>
+					<Pane bind:size={consolePaneSize} minSize={10}>
+						<DebugConsole
+							client={dapClient}
+							currentFrameId={currentDebugFrameId}
+							onClose={() => (showDebugConsole = false)}
+							workspace={$workspaceStore}
+							jobId={debugSessionJobId ?? undefined}
+						/>
+					</Pane>
+				</Splitpanes>
+			{:else}
+				<Editor
+					path={path + '/' + id}
+					bind:this={editor}
+					class="flex flex-1 grow h-full"
+					scriptLang={inlineScript.language}
+					bind:code={inlineScript.content}
+					fixedOverflowWidgets={true}
+					cmdEnterAction={() => onRun()}
+					bind:websocketAlive
+					rawAppRunnableKey={id}
+					on:change={async (e) => {
+						if (inlineScript) {
+							if (inlineScript.lock != undefined) {
+								inlineScript.lock = undefined
+							}
+							const oldSchema = JSON.stringify(inlineScript.schema)
+							if (inlineScript.schema == undefined) {
+								inlineScript.schema = emptySchema()
+							}
+							await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
+							if (JSON.stringify(inlineScript.schema) != oldSchema) {
+								inlineScript = inlineScript
+								syncFields()
+							}
+							if (debugMode && breakpointDecorations.length > 0) {
+								refreshBreakpointPositions()
+							}
 						}
-						await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
-						if (JSON.stringify(inlineScript.schema) != oldSchema) {
-							inlineScript = inlineScript
-							syncFields()
-						}
-					}
-					// $app = $app
-				}}
-				args={Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
-					acc[key] = obj.type === 'static' ? obj.value : undefined
-					return acc
-				}, {})}
-				preparedAssetsSqlQueries={preparedSqlQueries.current}
-			/>
+					}}
+					args={Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
+						acc[key] = obj.type === 'static' ? obj.value : undefined
+						return acc
+					}, {})}
+					preparedAssetsSqlQueries={preparedSqlQueries.current}
+				/>
+			{/if}
 
 			<DiffEditor
 				open={false}
@@ -188,3 +668,25 @@ $effect(() => {
 		</div>
 	</div>
 {/if}
+
+<Modal title="Debug Feature (Beta)" bind:open={showDebugBetaWarning}>
+	<div class="flex items-start gap-3">
+		<div class="flex-shrink-0">
+			<div
+				class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-800/50"
+			>
+				<AlertTriangle class="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
+			</div>
+		</div>
+		<div class="text-secondary text-sm">
+			<p
+				>The Debug feature is currently in <strong>beta</strong>. You may encounter unexpected
+				behavior or limitations.</p
+			>
+			<p class="mt-2">By continuing, you acknowledge that this feature is experimental.</p>
+		</div>
+	</div>
+	{#snippet actions()}
+		<Button size="sm" on:click={confirmDebugBetaWarning}>Continue</Button>
+	{/snippet}
+</Modal>