windmill-components 1.613.5 → 1.623.1

package/package/components/ScriptEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
 import { JobService } from '../gen';
 import { enterpriseLicense, userStore, workspaceStore } from '../stores';
-import { copyToClipboard, emptySchema, getLocalSetting, sendUserToast, storeLocalSetting } from '../utils';
+import { copyToClipboard, emptySchema, sendUserToast } from '../utils';
 import Editor from './Editor.svelte';
 import { inferArgs, inferAssets, inferAnsibleExecutionMode } from '../infer';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -19,9 +19,7 @@ import { scriptLangToEditorLang } from '../scripts';
 import { WebsocketProvider } from 'y-websocket';
 import Modal from './common/modal/Modal.svelte';
 import DiffEditor from './DiffEditor.svelte';
-import { AlertTriangle, Bug, Copy, CornerDownLeft, ExternalLink, Github, GitBranch, Play, PlayIcon, Terminal, WandSparkles } from 'lucide-svelte';
-import { DebugToolbar, DebugPanel, DebugConsole, getDAPClient, debugState, resetDAPClient, getDebugServerUrl, isDebuggable, getDebugFileExtension, fetchContextualVariables, signDebugRequest, getDebugErrorMessage } from './debug';
-import { SvelteSet } from 'svelte/reactivity';
+import { Copy, CornerDownLeft, ExternalLink, Github, GitBranch, Play, PlayIcon, WandSparkles } from 'lucide-svelte';
 import { setLicense } from '../enterpriseUtils';
 import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
@@ -120,46 +118,6 @@ let peers = $state([]);
 let showCollabPopup = $state(false);
 let ansibleAlternativeExecutionMode = $state();
 let ansibleGitSshIdentity = $state([]);
-// 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([]);
-// Get the DAP server URL based on language
-const dapServerUrl = $derived(getDebugServerUrl((lang || 'python3')));
-const debugFilePath = $derived(`/tmp/script${getDebugFileExtension(lang || '')}`);
-let dapClient = $state(null);
-const isDebuggableScript = $derived(isDebuggable(lang || ''));
-// Derived: show debug panel when connected and (running or stopped, but not terminated)
-const showDebugPanel = $derived(debugMode && $debugState.connected && ($debugState.running || $debugState.stopped));
-// Derived: debug has a result (script completed)
-const hasDebugResult = $derived(debugMode && $debugState.result !== undefined);
-// Show debug console at bottom of editor when debugging is active
-let showDebugConsole = $state(true);
-const debugConsoleVisible = $derived(showDebugPanel && showDebugConsole);
-// Selected stack frame ID - shared between DebugPanel and DebugConsole
-let selectedDebugFrameId = $state(null);
-// Use selected frame or first frame for console context
-const currentDebugFrameId = $derived(selectedDebugFrameId ?? $debugState.stackFrames[0]?.id);
-// Job ID of the current debug session (for expression signing/audit logging)
-let debugSessionJobId = $state(null);
-// Pane sizes for editor/console split (percentage)
-let editorPaneSize = $state(75);
-let consolePaneSize = $state(25);
-// Breakpoint decoration options
-// stickiness: 1 = NeverGrowsWhenTypingAtEdges - decorations track their position when code changes
-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'
-};
 const url = new URL(window.location.toString());
 let initialCollab = /true|1/i.test(url.searchParams.get('collab') ?? '0');
 if (initialCollab) {
@@ -263,286 +221,6 @@ function handleAddInventories(event) {
     // Trigger schema inference to update assets
     inferSchema(newCode);
 }
-// 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
-    }));
-    // Use untrack to prevent reactive loop when reading the old decorations
-    const oldDecorations = untrack(() => breakpointDecorations);
-    breakpointDecorations = monacoEditor.deltaDecorations(oldDecorations, decorations);
-}
-// Refresh breakpoint line numbers from decoration positions after code edits
-function refreshBreakpointPositions() {
-    const monacoEditor = editor?.getEditor?.();
-    if (!monacoEditor || breakpointDecorations.length === 0)
-        return;
-    const model = monacoEditor.getModel();
-    if (!model)
-        return;
-    // Get current line numbers from decorations (Monaco tracks positions when code changes)
-    const newLines = new Set();
-    for (const decorationId of breakpointDecorations) {
-        const range = model.getDecorationRange(decorationId);
-        if (range) {
-            newLines.add(range.startLineNumber);
-        }
-    }
-    // Check if positions changed
-    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) {
-        // Update breakpoints set with new positions
-        debugBreakpoints.clear();
-        for (const line of newLines) {
-            debugBreakpoints.add(line);
-        }
-        // Sync updated positions with server if connected
-        syncBreakpointsWithServer();
-    }
-}
-// Sync breakpoints with DAP server when connected
-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;
-    // Use untrack to prevent reactive loop when reading the old decorations
-    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);
-}
-async function startDebugging() {
-    try {
-        // Show console when starting a debug session
-        showDebugConsole = true;
-        // Reset selected frame when starting new session
-        selectedDebugFrameId = null;
-        // Always reset and create a fresh DAP client with the correct URL for the current language
-        // This ensures we connect to the correct endpoint even if language changed
-        resetDAPClient();
-        dapClient = getDAPClient(dapServerUrl);
-        // Fetch contextual variables (WM_WORKSPACE, WM_TOKEN, etc.) from backend
-        const env = await fetchContextualVariables($workspaceStore ?? '');
-        // Sign the debug request (creates audit log entry)
-        let signedPayload;
-        try {
-            signedPayload = await signDebugRequest($workspaceStore ?? '', code ?? '', lang ?? 'python3');
-            debugSessionJobId = signedPayload.job_id;
-        }
-        catch (signError) {
-            sendUserToast(getDebugErrorMessage(signError), true);
-            return;
-        }
-        await dapClient.connect();
-        await dapClient.initialize();
-        await dapClient.setBreakpoints(debugFilePath, Array.from(debugBreakpoints));
-        await dapClient.configurationDone();
-        // Pass the signed token along with other launch parameters
-        await dapClient.launch({
-            code,
-            cwd: '/tmp',
-            args: args ?? {},
-            callMain: true,
-            env,
-            // JWT token for verification by the debugger
-            token: signedPayload.token
-        });
-    }
-    catch (error) {
-        console.error('Failed to start debugging:', error);
-        sendUserToast(getDebugErrorMessage(error), true);
-    }
-}
-async function stopDebugging() {
-    if (!dapClient)
-        return;
-    try {
-        await dapClient.terminate();
-        dapClient.disconnect();
-    }
-    catch (error) {
-        console.error('Failed to stop debugging:', error);
-    }
-    finally {
-        // Clear the job ID when debug session ends
-        debugSessionJobId = null;
-    }
-}
-async function continueExecution() {
-    if (!dapClient)
-        return;
-    await dapClient.continue_();
-}
-async function stepOver() {
-    if (!dapClient)
-        return;
-    await dapClient.stepOver();
-}
-async function stepIn() {
-    if (!dapClient)
-        return;
-    await dapClient.stepIn();
-}
-async function stepOut() {
-    if (!dapClient)
-        return;
-    await dapClient.stepOut();
-}
-function clearAllBreakpoints() {
-    debugBreakpoints.clear();
-    updateBreakpointDecorations();
-}
-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 and reset client when language changes
-let lastDebugLang = undefined;
-$effect(() => {
-    const currentLang = lang;
-    if (lastDebugLang !== undefined && lastDebugLang !== currentLang && debugMode) {
-        // Language changed while in debug mode - exit debug mode
-        untrack(() => {
-            // Stop any running debug session
-            if (dapClient) {
-                dapClient
-                    .terminate()
-                    .catch(() => { })
-                    .finally(() => {
-                    dapClient?.disconnect();
-                });
-            }
-            // Reset the singleton
-            resetDAPClient();
-            dapClient = null;
-            // Exit debug mode
-            debugMode = false;
-            // Clear decorations
-            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) {
-        // Enable glyph margin for breakpoints
-        monacoEditor.updateOptions({ glyphMargin: true });
-        // Add click handler for glyph margin (breakpoint toggle)
-        const mouseDownDisposable = monacoEditor.onMouseDown((e) => {
-            // MouseTargetType.GUTTER_GLYPH_MARGIN = 2
-            if (e.target.type === 2) {
-                const line = e.target.position?.lineNumber;
-                if (line) {
-                    toggleBreakpoint(line);
-                }
-            }
-        });
-        // Add F9 keyboard shortcut for toggling breakpoint at cursor
-        monacoEditor.addCommand(120, () => {
-            // KeyCode.F9 = 120
-            const position = monacoEditor.getPosition();
-            if (position) {
-                toggleBreakpoint(position.lineNumber);
-            }
-        });
-        // Debug stepping keyboard shortcuts (only active when stopped)
-        // F8 = Continue (KeyCode.F8 = 119)
-        monacoEditor.addCommand(119, () => {
-            if ($debugState.stopped)
-                continueExecution();
-        });
-        // F6 = Step Over (KeyCode.F6 = 117)
-        monacoEditor.addCommand(117, () => {
-            if ($debugState.stopped)
-                stepOver();
-        });
-        // F7 = Step Into (KeyCode.F7 = 118)
-        monacoEditor.addCommand(118, () => {
-            if ($debugState.stopped)
-                stepIn();
-        });
-        // Shift+F8 = Step Out (KeyMod.Shift | KeyCode.F8 = 1024 | 119 = 1143)
-        monacoEditor.addCommand(1143, () => {
-            if ($debugState.stopped)
-                stepOut();
-        });
-        return () => {
-            mouseDownDisposable.dispose();
-            // Disable glyph margin when exiting debug mode
-            monacoEditor.updateOptions({ glyphMargin: false });
-        };
-    }
-    else {
-        // Ensure glyph margin is disabled when not in debug mode
-        monacoEditor.updateOptions({ glyphMargin: false });
-    }
-});
 onMount(() => {
     inferSchema(code, { applyInitialArgs: true });
     loadPastTests();
@@ -599,6 +277,7 @@ export function disableCollaboration() {
     if (!wsProvider?.shouldConnect)
         return;
     peers = [];
+    console.log('collab mode disabled');
     wsProvider?.disconnect();
     wsProvider.destroy();
     wsProvider = undefined;
@@ -607,15 +286,9 @@ onDestroy(() => {
     disableCollaboration();
     aiChatManager.scriptEditorApplyCode = undefined;
     aiChatManager.scriptEditorShowDiffMode = undefined;
-    aiChatManager.scriptEditorGetLintErrors = undefined;
     aiChatManager.scriptEditorOptions = undefined;
     aiChatManager.saveAndClear();
     aiChatManager.changeMode(AIMode.NAVIGATOR);
-    // Clean up debug mode
-    if (debugMode) {
-        stopDebugging();
-        resetDAPClient();
-    }
 });
 function asKind(str) {
     return str;
@@ -623,7 +296,7 @@ function asKind(str) {
 function collabUrl() {
     let url = new URL(window.location.toString().split('#')[0]);
     url.search = '';
-    return `${url}?collab=1&workspace=${encodeURIComponent($workspaceStore ?? '')}&lang=${encodeURIComponent(lang ?? '')}` + (edit ? '' : `&path=${path}`);
+    return `${url}?collab=1` + (edit ? '' : `&path=${path}`);
 }
 let showTabs = $derived(hasPreprocessor);
 $effect(() => {
@@ -692,9 +365,6 @@ $effect(() => {
             await editor?.reviewAndApplyCode(code, opts);
         };
         aiChatManager.scriptEditorShowDiffMode = showDiffMode;
-        aiChatManager.scriptEditorGetLintErrors = () => {
-            return (editor?.getLintErrors() ?? { errorCount: 0, warningCount: 0, errors: [], warnings: [] });
-        };
     });
 });
 </script>
@@ -731,24 +401,6 @@ $effect(() => {
 		/>
 	</div>
 </Modal>
-
-<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>
-
 <div class="border-b shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		{#if args}
@@ -852,24 +504,6 @@ $effect(() => {
 					</div>
 				{/if}
 
-				{#if debugMode && isDebuggableScript}
-					<div transition:slide={{ duration: 200 }}>
-						<DebugToolbar
-							connected={$debugState.connected}
-							running={$debugState.running}
-							stopped={$debugState.stopped}
-							breakpointCount={debugBreakpoints.size}
-							onStart={startDebugging}
-							onStop={stopDebugging}
-							onContinue={continueExecution}
-							onStepOver={stepOver}
-							onStepIn={stepIn}
-							onStepOut={stepOut}
-							onClearBreakpoints={clearAllBreakpoints}
-						/>
-					</div>
-				{/if}
-
 				<div class="flex justify-center pt-1 relative">
 					<div class="absolute top-2 left-2">
 						<HideButton
@@ -883,51 +517,44 @@ $effect(() => {
 							}}
 						/>
 					</div>
-					{#if !(debugMode && isDebuggableScript)}
-						{#if testIsLoading}
-							<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
-								<WindmillIcon
-									white={true}
-									class="mr-2 text-white"
-									height="16px"
-									width="20px"
-									spin="fast"
-								/>
-								Cancel
-							</Button>
-						{:else}
-							{@const disableTriggerButton = customUi?.previewPanel?.disableTriggerButton === true}
-							<div
-								class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch"
+					{#if testIsLoading}
+						<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
+							<WindmillIcon
+								white={true}
+								class="mr-2 text-white"
+								height="16px"
+								width="20px"
+								spin="fast"
+							/>
+							Cancel
+						</Button>
+					{:else}
+						{@const disableTriggerButton = customUi?.previewPanel?.disableTriggerButton === true}
+						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
+							<Button
+								on:click={() => runTest()}
+								btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
+								size="xs"
+								variant="accent-secondary"
+								startIcon={{ icon: Play, classes: 'animate-none' }}
+								shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
 							>
-								<Button
-									on:click={() => runTest()}
-									btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
-									size="xs"
-									variant="accent-secondary"
-									startIcon={{ icon: Play, classes: 'animate-none' }}
-									shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
-								>
-									{#if testIsLoading}
-										Running
-									{:else}
-										Test
-									{/if}
-								</Button>
-								{#if !disableTriggerButton}
-									<CaptureButton on:openTriggers />
+								{#if testIsLoading}
+									Running
+								{:else}
+									Test
 								{/if}
-							</div>
-						{/if}
+							</Button>
+							{#if !disableTriggerButton}
+								<CaptureButton on:openTriggers />
+							{/if}
+						</div>
 					{/if}
 					<div class="absolute top-2 right-2"
 						><Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} /></div
 					>
 				</div>
-				<Splitpanes
-					horizontal
-					class="!max-h-[calc(100%-{debugMode && isDebuggableScript ? '83' : '43'}px)]"
-				>
+				<Splitpanes horizontal class="!max-h-[calc(100%-43px)]">
 					<Pane size={33}>
 						{#if jsonView}
 							<div
@@ -972,27 +599,16 @@ $effect(() => {
 						<LogPanel
 							bind:this={logPanel}
 							{lang}
-							previewJob={debugMode
-								? ({
-										id: 'debug',
-										logs: $debugState.logs,
-										result: $debugState.result,
-										success: !$debugState.error,
-										type: hasDebugResult ? 'CompletedJob' : 'QueuedJob'
-									} as any)
-								: testJob}
+							previewJob={testJob}
 							{pastPreviews}
-							previewIsLoading={debugMode
-								? $debugState.running && !$debugState.stopped
-								: testIsLoading}
+							previewIsLoading={testIsLoading}
 							{editor}
 							{diffEditor}
 							{args}
 							{showCaptures}
 							customUi={customUi?.previewPanel}
-							showCustomResultPanel={showDebugPanel}
 						>
-							{#if scriptProgress && !debugMode}
+							{#if scriptProgress}
 								<!-- Put to the slot in logpanel -->
 								<JobProgressBar
 									job={testJob}
@@ -1016,15 +632,6 @@ $effect(() => {
 									/>
 								</div>
 							{/snippet}
-							{#snippet customResultPanel()}
-								<DebugPanel
-									stackFrames={$debugState.stackFrames}
-									scopes={$debugState.scopes}
-									variables={$debugState.variables}
-									client={dapClient}
-									bind:selectedFrameId={selectedDebugFrameId}
-								/>
-							{/snippet}
 						</LogPanel>
 					</Pane>
 				</Splitpanes>
@@ -1039,37 +646,11 @@ $effect(() => {
 			{#if assets?.length}
 				<AssetsDropdownButton {assets} />
 			{/if}
-			{#if isDebuggableScript && customUi?.editorBar?.debug != false}
-				<Button
-					variant={debugMode ? 'accent' : 'default'}
-					size="xs"
-					onclick={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="xs"
-					onclick={() => (showDebugConsole = true)}
-					startIcon={{ icon: Terminal }}
-					btnClasses="bg-surface hover:bg-surface-hover border border-tertiary/30"
-					title="Show Debug Console"
-				>
-					Console
-				</Button>
-			{/if}
 			{#if lang === 'ansible' && hasDelegateToGitRepo}
 				<Button
 					variant="default"
 					size="xs"
-					onclick={() => (gitRepoResourcePickerOpen = true)}
+					on:click={() => (gitRepoResourcePickerOpen = true)}
 					startIcon={{ icon: GitBranch }}
 					btnClasses="bg-surface hover:bg-surface-hover border border-tertiary/30"
 				>
@@ -1129,98 +710,69 @@ $effect(() => {
 			{/if}
 		</div>
 
-		{#if debugConsoleVisible}
-			<!-- Use Splitpanes when debug console is visible for resizing -->
-			<Splitpanes horizontal class="h-full !overflow-visible">
-				<Pane bind:size={editorPaneSize} minSize={20} class="!overflow-visible">
-					{@render editorPane()}
-				</Pane>
-				<Pane bind:size={consolePaneSize} minSize={10}>
-					<DebugConsole
-						client={dapClient}
-						currentFrameId={currentDebugFrameId}
-						onClose={() => (showDebugConsole = false)}
-						workspace={$workspaceStore}
-						jobId={debugSessionJobId ?? undefined}
-					/>
-				</Pane>
-			</Splitpanes>
-		{:else}
-			<!-- Normal editor without console -->
-			<div class="h-full !overflow-visible">
-				{@render editorPane()}
-			</div>
-		{/if}
-	</div>
-{/snippet}
-
-{#snippet editorPane()}
-	{#key lang}
-		<Editor
-			lineNumbersMinChars={4}
-			folding
-			{path}
-			bind:code
-			bind:websocketAlive
-			bind:this={editor}
-			{yContent}
-			awareness={wsProvider?.awareness}
-			on:change={(e) => {
-				inferSchema(e.detail)
-				// Refresh breakpoint positions when code changes (decorations track their lines)
-				if (debugMode && breakpointDecorations.length > 0) {
-					refreshBreakpointPositions()
-				}
-			}}
-			on:saveDraft
-			on:toggleTestPanel={toggleTestPanel}
-			cmdEnterAction={async () => {
-				await inferSchema(code)
-				runTest()
-			}}
-			formatAction={async () => {
-				await inferSchema(code)
-				try {
-					localStorage.setItem(path ?? 'last_save', code)
-				} catch (e) {
-					console.error('Could not save last_save to local storage', e)
-				}
-				dispatch('format')
-			}}
-			class="flex flex-1 h-full !overflow-visible"
-			scriptLang={lang}
-			automaticLayout={true}
-			{fixedOverflowWidgets}
-			{args}
-			{enablePreprocessorSnippet}
-			preparedAssetsSqlQueries={preparedSqlQueries.current}
-		/>
-		<DiffEditor
-			className="h-full"
-			bind:this={diffEditor}
-			modifiedModel={editor?.getModel() as meditor.ITextModel}
-			automaticLayout
-			defaultLang={scriptLangToEditorLang(lang)}
-			{fixedOverflowWidgets}
-			buttons={diffMode
-				? [
-						{
-							text: 'See changes history',
-							onClick: () => {
-								showHistoryDrawer = true
-							}
-						},
-						{
-							text: 'Quit diff mode',
-							onClick: () => {
-								hideDiffMode()
+		{#key lang}
+			<Editor
+				lineNumbersMinChars={4}
+				folding
+				{path}
+				bind:code
+				bind:websocketAlive
+				bind:this={editor}
+				{yContent}
+				awareness={wsProvider?.awareness}
+				on:change={(e) => {
+					inferSchema(e.detail)
+				}}
+				on:saveDraft
+				on:toggleTestPanel={toggleTestPanel}
+				cmdEnterAction={async () => {
+					await inferSchema(code)
+					runTest()
+				}}
+				formatAction={async () => {
+					await inferSchema(code)
+					try {
+						localStorage.setItem(path ?? 'last_save', code)
+					} catch (e) {
+						console.error('Could not save last_save to local storage', e)
+					}
+					dispatch('format')
+				}}
+				class="flex flex-1 h-full !overflow-visible"
+				scriptLang={lang}
+				automaticLayout={true}
+				{fixedOverflowWidgets}
+				{args}
+				{enablePreprocessorSnippet}
+				preparedAssetsSqlQueries={preparedSqlQueries.current}
+			/>
+			<DiffEditor
+				className="h-full"
+				bind:this={diffEditor}
+				modifiedModel={editor?.getModel() as meditor.ITextModel}
+				automaticLayout
+				defaultLang={scriptLangToEditorLang(lang)}
+				{fixedOverflowWidgets}
+				buttons={diffMode
+					? [
+							{
+								text: 'See changes history',
+								onClick: () => {
+									showHistoryDrawer = true
+								}
 							},
-							color: 'red'
-						}
-					]
-				: []}
-		/>
-	{/key}
+							{
+								text: 'Quit diff mode',
+								onClick: () => {
+									hideDiffMode()
+								},
+								color: 'red'
+							}
+						]
+					: []}
+			/>
+		{/key}
+	</div>
 {/snippet}
 
 <GitRepoResourcePicker
@@ -1233,29 +785,3 @@ $effect(() => {
 	on:selected={handleDelegateConfigUpdate}
 	on:addInventories={handleAddInventories}
 />
-
-<style global>
-	/* Debug breakpoint glyph - red circle in the glyph margin */
-	:global(.debug-breakpoint-glyph) {
-		background-color: #e51400;
-		border-radius: 50%;
-		width: 10px !important;
-		height: 10px !important;
-		margin-left: 5px;
-		margin-top: 4px;
-	}
-
-	/* Current execution line - yellow background */
-	:global(.debug-current-line) {
-		background-color: rgba(255, 238, 0, 0.2);
-	}
-
-	/* Current execution line glyph - yellow arrow in the glyph margin */
-	:global(.debug-current-line-glyph) {
-		background-color: #ffcc00;
-		clip-path: polygon(0 0, 100% 50%, 0 100%);
-		width: 10px !important;
-		height: 14px !important;
-		margin-left: 5px;
-		margin-top: 2px;
-	}</style>