windmill-components 1.613.4 → 1.623.1

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, onDestroy, onMount, untrack } from 'svelte';
-import { AlertTriangle, Trash2, Bug, Terminal } from 'lucide-svelte';
-import Modal from '../common/modal/Modal.svelte';
+import { createEventDispatcher, onMount } from 'svelte';
+import { Trash2 } from 'lucide-svelte';
 import { inferArgs, inferAssets } from '../../infer';
 import Editor from '../Editor.svelte';
-import { emptySchema, getLocalSetting, sendUserToast, storeLocalSetting } from '../../utils';
+import { emptySchema } 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,12 +17,7 @@ import { resource } from 'runed';
 import { usePreparedAssetSqlQueries } from '../../infer.svelte';
 import AssetsDropdownButton from '../assets/AssetsDropdownButton.svelte';
 import { workspaceStore } from '../../stores';
-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 { inlineScript = $bindable(), name = $bindable(undefined), id, fields = $bindable(undefined), path, isLoading = false, onRun, onCancel, editor = $bindable(undefined), lastDeployedCode } = $props();
 let diffEditor = $state();
 let validCode = $state(true);
 async function inferInlineScriptSchema(language, content, schema) {
@@ -77,397 +72,6 @@ $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}
@@ -478,21 +82,19 @@ $effect(() => {
 			</div>
 			{#if name !== undefined}
 				<div class="flex flex-row gap-2 w-full items-center">
-					<TextInput
-						inputProps={{
-							onkeydown: () => stopPropagation(bubble('keydown')),
-							placeholder: 'Inline script name'
-						}}
+					<input
+						onkeydown={stopPropagation(bubble('keydown'))}
 						bind:value={name}
-						size="sm"
+						placeholder="Inline script name"
+						class="!text-xs !rounded-sm !shadow-none"
 					/>
 				</div>
 				<Button
 					title="Clear script"
-					variant="subtle"
+					size="xs2"
+					color="light"
+					variant="contained"
 					aria-label="Clear script"
-					destructive
-					unifiedSize="sm"
 					on:click={() => dispatch('delete')}
 					endIcon={{ icon: Trash2 }}
 					iconOnly
@@ -505,13 +107,14 @@ $effect(() => {
 
 				<Button
 					variant="default"
-					unifiedSize="sm"
+					size="xs2"
 					on:click={async () => {
 						editor?.format()
 					}}
 				>
 					Format
 				</Button>
+				<RunButton {isLoading} {onRun} {onCancel} />
 			</div>
 		</div>
 
@@ -521,7 +124,7 @@ $effect(() => {
 				{editor}
 				lang={inlineScript.language}
 				{websocketAlive}
-				iconOnly={width < 1250}
+				iconOnly={width < 950}
 				kind={'script'}
 				template={'script'}
 				on:showDiffMode={showDiffMode}
@@ -538,123 +141,40 @@ $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>
-			{#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()
-							}
+			<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
 						}
-					}}
-					args={Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
-						acc[key] = obj.type === 'static' ? obj.value : undefined
-						return acc
-					}, {})}
-					preparedAssetsSqlQueries={preparedSqlQueries.current}
-				/>
-			{/if}
+						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()
+						}
+					}
+					// $app = $app
+				}}
+				args={Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
+					acc[key] = obj.type === 'static' ? obj.value : undefined
+					return acc
+				}, {})}
+				preparedAssetsSqlQueries={preparedSqlQueries.current}
+			/>
 
 			<DiffEditor
 				open={false}
@@ -668,25 +188,3 @@ $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>