From 1ec45e5ad6436d36d3951a75663b4f310025d765 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 26 Aug 2024 22:31:23 +0200
Subject: [PATCH] feat: add vim support for monaco/webeditor

---
 .github/DockerfileBackendTests                |  2 +-
 .../windmill-worker/src/python_executor.rs    |  2 +-
 frontend/package-lock.json                    | 26 +++++++
 frontend/package.json                         |  5 +-
 frontend/src/lib/assets/app.css               |  4 +
 frontend/src/lib/components/DiffEditor.svelte |  6 +-
 frontend/src/lib/components/Editor.svelte     | 34 ++++++++-
 frontend/src/lib/components/EditorBar.svelte  | 13 +---
 .../src/lib/components/EditorSettings.svelte  | 47 ++++++++++++
 .../src/lib/components/FormatOnSave.svelte    | 43 +++--------
 .../src/lib/components/ScriptBuilder.svelte   |  3 +
 .../src/lib/components/ScriptEditor.svelte    |  1 +
 .../src/lib/components/SimpleEditor.svelte    | 34 ++++++++-
 .../src/lib/components/TemplateEditor.svelte  |  2 +-
 frontend/src/lib/components/VimMode.svelte    | 18 +++++
 .../inlineScriptsPanel/CacheTtlPopup.svelte   |  1 +
 .../InlineScriptEditor.svelte                 |  3 +
 .../copilot/CodeCompletionStatus.svelte       | 73 +++++++------------
 frontend/src/lib/components/custom_ui.ts      |  3 +-
 .../flows/content/ScriptEditorDrawer.svelte   |  3 +
 .../src/lib/components/monaco_keybindings.ts  | 14 ++++
 frontend/src/lib/stores.ts                    | 13 +++-
 frontend/vite.config.js                       |  2 +-
 python-client/wmill/wmill/client.py           |  2 +-
 24 files changed, 250 insertions(+), 104 deletions(-)
 create mode 100644 frontend/src/lib/components/EditorSettings.svelte
 create mode 100644 frontend/src/lib/components/VimMode.svelte
 create mode 100644 frontend/src/lib/components/monaco_keybindings.ts

diff --git a/.github/DockerfileBackendTests b/.github/DockerfileBackendTests
index b56e64d085..3050e9ab54 100644
--- a/.github/DockerfileBackendTests
+++ b/.github/DockerfileBackendTests
@@ -1,5 +1,5 @@
 ARG DEBIAN_IMAGE=debian:bookworm-slim
-ARG RUST_IMAGE=rust:1.79-slim-bookworm
+ARG RUST_IMAGE=rust:1.80-slim-bookworm
 ARG PYTHON_IMAGE=python:3.11.4-slim-bookworm
 
 FROM ${DEBIAN_IMAGE} as downloader
diff --git a/backend/windmill-worker/src/python_executor.rs b/backend/windmill-worker/src/python_executor.rs
index 3186bd41c5..8d33a057b3 100644
--- a/backend/windmill-worker/src/python_executor.rs
+++ b/backend/windmill-worker/src/python_executor.rs
@@ -318,7 +318,7 @@ def to_b_64(v: bytes):
     b64 = base64.b64encode(v)
     return b64.decode('ascii')
 
-replace_nan = re.compile(r'(?:\bNaN\b|\\u0000)')
+replace_nan = re.compile(r'(?:\bNaN\b|\\*\\u0000)')
 
 result_json = os.path.join(os.path.abspath(os.path.dirname(__file__)), "result.json")
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6999e54e4f..7aaeb8a75e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,28 @@
 {
 	"name": "windmill-components",
+<<<<<<< Updated upstream
 	"version": "1.385.0",
+=======
+<<<<<<< Updated upstream
+	"version": "1.384.0",
+=======
+	"version": "1.383.9",
+>>>>>>> Stashed changes
+>>>>>>> Stashed changes
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "windmill-components",
+<<<<<<< Updated upstream
 			"version": "1.385.0",
+=======
+<<<<<<< Updated upstream
+			"version": "1.384.0",
+=======
+			"version": "1.383.9",
+>>>>>>> Stashed changes
+>>>>>>> Stashed changes
 			"license": "AGPL-3.0",
 			"dependencies": {
 				"@aws-crypto/sha256-js": "^4.0.0",
@@ -49,6 +65,7 @@
 				"monaco-editor-wrapper": "^5.5.2",
 				"monaco-graphql": "^1.6.0",
 				"monaco-languageclient": "~8.8.2",
+				"monaco-vim": "^0.4.1",
 				"ol": "^7.4.0",
 				"openai": "^4.47.1",
 				"p-limit": "^6.1.0",
@@ -9736,6 +9753,15 @@
 				}
 			}
 		},
+		"node_modules/monaco-vim": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/monaco-vim/-/monaco-vim-0.4.1.tgz",
+			"integrity": "sha512-+cy0TE9xarjLIgUexqxIEbat3K1l7WbiFSLZKAO2kYl1qFRvkeWn4ro/C4c6dK0i9+WQKUC4Dhu/nyCbZfA37w==",
+			"license": "MIT",
+			"peerDependencies": {
+				"monaco-editor": "*"
+			}
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 33bda3df10..f8d1ceb79e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,6 @@
 		"filter-classes": "node filterTailwindClasses.js"
 	},
 	"devDependencies": {
-		"@windmill-labs/esbuild-import-meta-url-plugin": "0.0.0-semantic-release",
 		"@floating-ui/core": "^1.3.1",
 		"@hey-api/openapi-ts": "^0.43.0",
 		"@playwright/test": "^1.34.3",
@@ -35,6 +34,7 @@
 		"@types/vscode": "^1.83.5",
 		"@typescript-eslint/eslint-plugin": "^5.59.8",
 		"@typescript-eslint/parser": "^5.60.0",
+		"@windmill-labs/esbuild-import-meta-url-plugin": "0.0.0-semantic-release",
 		"@zerodevx/svelte-toast": "^0.9.5",
 		"autoprefixer": "^10.4.13",
 		"cssnano": "^6.0.1",
@@ -88,9 +88,9 @@
 		"@codingame/monaco-vscode-keybindings-service-override": "~8.0.2",
 		"@codingame/monaco-vscode-lifecycle-service-override": "~8.0.2",
 		"@codingame/monaco-vscode-localization-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-css-language-features": "~8.0.2",
 		"@codingame/monaco-vscode-standalone-json-language-features": "~8.0.2",
 		"@codingame/monaco-vscode-standalone-languages": "~8.0.2",
-		"@codingame/monaco-vscode-standalone-css-language-features": "~8.0.2",
 		"@codingame/monaco-vscode-standalone-typescript-language-features": "~8.0.2",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
@@ -122,6 +122,7 @@
 		"monaco-editor-wrapper": "^5.5.2",
 		"monaco-graphql": "^1.6.0",
 		"monaco-languageclient": "~8.8.2",
+		"monaco-vim": "^0.4.1",
 		"ol": "^7.4.0",
 		"openai": "^4.47.1",
 		"p-limit": "^6.1.0",
diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css
index e86a21190f..069b58e827 100644
--- a/frontend/src/lib/assets/app.css
+++ b/frontend/src/lib/assets/app.css
@@ -120,3 +120,7 @@ svelte-virtual-list-contents > * + * {
 	@apply bg-surface;
 	@apply disabled:placeholder:text-gray-200 disabled:placeholder:dark:text-gray-500 disabled:text-gray-200 disabled:dark:text-gray-500 disabled:border-gray-200 disabled:dark:border-gray-600;
 }
+
+.nonmain-editor .cursor.monaco-mouse-cursor-text {
+	width: 1px !important;
+}
diff --git a/frontend/src/lib/components/DiffEditor.svelte b/frontend/src/lib/components/DiffEditor.svelte
index 379f84908f..4be144c70a 100644
--- a/frontend/src/lib/components/DiffEditor.svelte
+++ b/frontend/src/lib/components/DiffEditor.svelte
@@ -125,5 +125,9 @@
 
 {#if open}
 	<EditorTheme />
-	<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />
+	<div
+		bind:this={diffDivEl}
+		class="{$$props.class} editor nonmain-editor"
+		bind:clientWidth={editorWidth}
+	/>
 {/if}
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 40162d432e..0d2617f2be 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -3,7 +3,6 @@
 <script context="module">
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
-
 	import processStdContent from '$lib/process.d.ts.txt?raw'
 	import windmillFetchContent from '$lib/windmill_fetch.d.ts.txt?raw'
 
@@ -129,7 +128,8 @@
 		copilotInfo,
 		codeCompletionSessionEnabled,
 		lspTokenStore,
-		formatOnSave
+		formatOnSave,
+		vimMode
 	} from '$lib/stores'
 
 	import {
@@ -155,7 +155,8 @@
 		KeyCode,
 		KeyMod,
 		Uri as mUri,
-		type IRange
+		type IRange,
+		type IDisposable
 	} from 'monaco-editor'
 	import type { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js'
 
@@ -169,6 +170,7 @@
 	} from '$lib/consts'
 	import { setupTypeAcquisition } from '$lib/ata/index'
 	import { initWasm, parseDeps } from '$lib/infer'
+	import { initVim } from './monaco_keybindings'
 
 	// import EditorTheme from './EditorTheme.svelte'
 
@@ -1042,6 +1044,26 @@
 	let initialized = false
 	let ata: ((s: string) => void) | undefined = undefined
 
+	let statusDiv: Element | null = null
+
+	function saveDraft() {
+		dispatch('saveDraft', code)
+	}
+
+	let vimDisposable: IDisposable | undefined = undefined
+	$: editor && $vimMode && statusDiv && onVimMode()
+	$: !$vimMode && vimDisposable && onVimDisable()
+
+	function onVimDisable() {
+		vimDisposable?.dispose()
+	}
+
+	function onVimMode() {
+		if (editor && statusDiv) {
+			vimDisposable = initVim(editor, statusDiv, saveDraft)
+		}
+	}
+
 	async function loadMonaco() {
 		try {
 			console.log("Loading Monaco's language client")
@@ -1077,6 +1099,8 @@
 			folding
 		})
 
+		// updateEditorKeybindingsMode(editor, 'vim', undefined)
+
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
 		let ataModel: NodeJS.Timeout | undefined = undefined
 
@@ -1140,6 +1164,7 @@
 			ata = undefined
 			try {
 				closeWebsockets()
+				vimDisposable?.dispose()
 				model?.dispose()
 				editor && editor.dispose()
 				console.log('disposed editor')
@@ -1289,6 +1314,9 @@
 
 <EditorTheme />
 <div bind:this={divEl} class="{$$props.class} editor {disabled ? 'disabled' : ''}" />
+{#if $vimMode}
+	<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
+{/if}
 
 <style global lang="postcss">
 	.editor {
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index ae8db4c0d1..281c88d500 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -13,7 +13,7 @@
 	import Button from './common/button/Button.svelte'
 	import HighlightCode from './HighlightCode.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
-	import { Drawer } from './common'
+	import { Drawer, Popup } from './common'
 	import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte'
 	import PickHubScript from './flows/pickers/PickHubScript.svelte'
 	import ToggleHubWorkspace from './ToggleHubWorkspace.svelte'
@@ -23,7 +23,6 @@
 	import { sendUserToast } from '$lib/toast'
 	import { getScriptByPath, scriptLangToEditorLang } from '$lib/scripts'
 	import Toggle from './Toggle.svelte'
-	import FormatOnSave from './FormatOnSave.svelte'
 
 	import {
 		DollarSign,
@@ -42,10 +41,10 @@
 	import ScriptGen from './copilot/ScriptGen.svelte'
 	import type DiffEditor from './DiffEditor.svelte'
 	import { getResetCode } from '$lib/script_helpers'
-	import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte'
 	import Popover from './Popover.svelte'
 	import ResourceEditorDrawer from './ResourceEditorDrawer.svelte'
 	import type { EditorBarUi } from './custom_ui'
+	import EditorSettings from './EditorSettings.svelte'
 
 	export let lang: SupportedLanguage | 'bunnative' | undefined
 	export let editor: Editor | undefined
@@ -655,15 +654,11 @@ $res = json_decode(curl_exec($ch));`)
 				</div>
 			{/if}
 
-			{#if customUi?.autoformatting != false}
-				<FormatOnSave />
-			{/if}
 			{#if customUi?.aiGen != false}
 				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
 			{/if}
-			{#if customUi?.aiFix != false}
-				<CodeCompletionStatus />
-			{/if}
+
+			<EditorSettings {customUi} />
 		</div>
 	</div>
 
diff --git a/frontend/src/lib/components/EditorSettings.svelte b/frontend/src/lib/components/EditorSettings.svelte
new file mode 100644
index 0000000000..7a5bf50398
--- /dev/null
+++ b/frontend/src/lib/components/EditorSettings.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Settings } from 'lucide-svelte'
+	import FormatOnSave from './FormatOnSave.svelte'
+	import VimMode from './VimMode.svelte'
+	import { Button, Popup } from './common'
+	import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte'
+	import type { EditorBarUi } from './custom_ui'
+
+	export let customUi: EditorBarUi = {}
+</script>
+
+{#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
+	<Popup
+		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+		containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+	>
+		<svelte:fragment slot="button">
+			<Button
+				btnClasses="text-tertiary"
+				color="light"
+				size="xs"
+				nonCaptureEvent={true}
+				startIcon={{ icon: Settings }}
+				iconOnly
+				title="Editor settings"
+			/>
+		</svelte:fragment>
+
+		<div class="flex flex-col gap-y-2">
+			{#if customUi?.autoformatting != false}
+				<div>
+					<FormatOnSave />
+				</div>
+			{/if}
+			{#if customUi?.vimMode != false}
+				<div>
+					<VimMode />
+				</div>
+			{/if}
+			{#if customUi?.aiCompletion != false}
+				<div>
+					<CodeCompletionStatus />
+				</div>
+			{/if}
+		</div>
+	</Popup>
+{/if}
diff --git a/frontend/src/lib/components/FormatOnSave.svelte b/frontend/src/lib/components/FormatOnSave.svelte
index 86dc49fa12..e0a8a711ea 100644
--- a/frontend/src/lib/components/FormatOnSave.svelte
+++ b/frontend/src/lib/components/FormatOnSave.svelte
@@ -1,37 +1,18 @@
 <script lang="ts">
-	import { Paintbrush } from 'lucide-svelte'
-	import Button from './common/button/Button.svelte'
-	import { formatOnSave } from '$lib/stores'
-	import Popover from './Popover.svelte'
-	import { getLocalSetting, storeLocalSetting } from '$lib/utils'
-	import PaintbrushOff from './icons/PaintbrushOff.svelte'
-
-	const SETTING_NAME = 'formatOnSave'
-	function loadSetting() {
-		$formatOnSave = (getLocalSetting(SETTING_NAME) ?? 'true') == 'true'
-	}
+	import { FORMAT_ON_SAVE_SETTING_NAME, formatOnSave } from '$lib/stores'
+	import { storeLocalSetting } from '$lib/utils'
+	import Toggle from './Toggle.svelte'
 
 	function storeSetting() {
-		$formatOnSave = !$formatOnSave
-		storeLocalSetting(SETTING_NAME, $formatOnSave.toString())
+		storeLocalSetting(FORMAT_ON_SAVE_SETTING_NAME, $formatOnSave.toString())
 	}
-
-	loadSetting()
 </script>
 
-<Popover>
-	<svelte:fragment slot="text"
-		>{$formatOnSave ? 'Disable' : 'Enable'} auto-formatting</svelte:fragment
-	>
-	<Button
-		size="xs"
-		color="light"
-		startIcon={{
-			icon: !$formatOnSave ? PaintbrushOff : Paintbrush
-		}}
-		btnClasses="text-tertiary"
-		on:click={() => {
-			storeSetting()
-		}}
-	/>
-</Popover>
+<Toggle
+	size="xs"
+	bind:checked={$formatOnSave}
+	on:change={() => {
+		storeSetting()
+	}}
+	options={{ right: 'auto-formatting' }}
+/>
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 943529e304..8af69fe0f7 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1184,6 +1184,9 @@
 			on:format={() => {
 				saveDraft()
 			}}
+			on:saveDraft={() => {
+				saveDraft()
+			}}
 			bind:editor
 			bind:this={scriptEditor}
 			bind:schema={script.schema}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index ad362704b5..0d41a31aea 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -297,6 +297,7 @@
 						on:change={(e) => {
 							inferSchema(e.detail)
 						}}
+						on:saveDraft
 						cmdEnterAction={async () => {
 							await inferSchema(code)
 							runTest()
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 21c5810d7c..0897c52ade 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -38,7 +38,8 @@
 		KeyMod,
 		Uri as mUri,
 		languages,
-		type IRange
+		type IRange,
+		type IDisposable
 	} from 'monaco-editor'
 
 	import '@codingame/monaco-vscode-standalone-languages'
@@ -57,6 +58,8 @@
 	import EditorTheme from './EditorTheme.svelte'
 	import { tailwindClasses } from './apps/editor/componentsPanel/tailwindUtils'
 	import { writable } from 'svelte/store'
+	import { vimMode } from '$lib/stores'
+	import { initVim } from './monaco_keybindings'
 	// import { createConfiguredEditor } from 'vscode/monaco'
 	// import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 
@@ -78,6 +81,7 @@
 	export let small = false
 	export let domLib = false
 	export let autofocus = false
+	export let allowVim = false
 
 	const dispatch = createEventDispatcher()
 
@@ -157,6 +161,24 @@
 	let disableTabCond: meditor.IContextKey<boolean> | undefined
 	$: disableTabCond?.set(!code && !!suggestion)
 
+	let statusDiv: Element | null = null
+
+	let vimDisposable: IDisposable | undefined = undefined
+	$: allowVim && editor && $vimMode && statusDiv && onVimMode()
+	$: !$vimMode && vimDisposable && onVimDisable()
+
+	function onVimDisable() {
+		vimDisposable?.dispose()
+	}
+
+	function onVimMode() {
+		if (editor && statusDiv) {
+			vimDisposable = initVim(editor, statusDiv, () => {
+				console.log('vim save not possible for simple editor')
+			})
+		}
+	}
+
 	async function loadMonaco() {
 		await initializeVscode()
 		initialized = true
@@ -378,6 +400,7 @@
 
 	onDestroy(() => {
 		try {
+			vimDisposable?.dispose()
 			model && model.dispose()
 			editor && editor.dispose()
 		} catch (err) {}
@@ -394,7 +417,14 @@
 		{suggestion}
 	</div>
 {/if}
-<div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />
+<div
+	bind:this={divEl}
+	class="{$$props.class ?? ''} editor simple-editor {!allowVim ? 'nonmain-editor' : ''}"
+	bind:clientWidth={width}
+/>
+{#if allowVim && $vimMode}
+	<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
+{/if}
 
 <style lang="postcss">
 	.editor {
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index 2a6a4dc1d5..6d76059464 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -628,7 +628,7 @@
 <div
 	bind:this={divEl}
 	style="height: 18px;"
-	class="{$$props.class ?? ''} border template rounded min-h-4 mx-0.5 overflow-clip"
+	class="{$$props.class ?? ''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip"
 	bind:clientWidth={width}
 />
 
diff --git a/frontend/src/lib/components/VimMode.svelte b/frontend/src/lib/components/VimMode.svelte
new file mode 100644
index 0000000000..b5becb0f38
--- /dev/null
+++ b/frontend/src/lib/components/VimMode.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { VIM_MODE_SETTING_NAME, vimMode } from '$lib/stores'
+	import { storeLocalSetting } from '$lib/utils'
+	import Toggle from './Toggle.svelte'
+
+	function storeSetting() {
+		storeLocalSetting(VIM_MODE_SETTING_NAME, $vimMode.toString())
+	}
+</script>
+
+<Toggle
+	size="xs"
+	bind:checked={$vimMode}
+	on:change={() => {
+		storeSetting()
+	}}
+	options={{ right: 'vim mode' }}
+/>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
index c99438cad6..4ade3ec0fa 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
@@ -27,6 +27,7 @@
 			size="xs2"
 			iconOnly
 			startIcon={{ icon: Database }}
+			title="Cache settings"
 		/>
 	</svelte:fragment>
 	<div class="block text-primary">
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 4417bd29d5..639ec77cc6 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -20,6 +20,7 @@
 	import DiffEditor from '$lib/components/DiffEditor.svelte'
 	import { userStore } from '$lib/stores'
 	import CacheTtlPopup from './CacheTtlPopup.svelte'
+	import EditorSettings from '$lib/components/EditorSettings.svelte'
 
 	let inlineScriptEditorDrawer: InlineScriptEditorDrawer
 
@@ -253,6 +254,7 @@
 					}, {})}
 					{transformer}
 				/>
+				<EditorSettings />
 
 				<Button
 					title="Delete"
@@ -349,6 +351,7 @@
 						bind:this={simpleEditor}
 						class="h-full max-w-full"
 						small
+						allowVim
 						{extraLib}
 						bind:code={inlineScript.content}
 						lang="javascript"
diff --git a/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte b/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
index 59992a415c..75d7a0decf 100644
--- a/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
+++ b/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
@@ -1,57 +1,34 @@
 <script lang="ts">
-	import { SparklesIcon } from 'lucide-svelte'
-	import Button from '../common/button/Button.svelte'
-	import { codeCompletionLoading, copilotInfo, codeCompletionSessionEnabled } from '$lib/stores'
-	import Popover from '../Popover.svelte'
-	import { getLocalSetting, storeLocalSetting } from '$lib/utils'
-	import SparklesOffIcon from '../icons/SparklesOffIcon.svelte'
-
-	const SETTING_NAME = 'codeCompletionSessionEnabled'
-	function loadSetting() {
-		$codeCompletionSessionEnabled = (getLocalSetting(SETTING_NAME) ?? 'true') == 'true'
-	}
+	import {
+		codeCompletionSessionEnabled,
+		copilotInfo,
+		FORMAT_ON_SAVE_SETTING_NAME
+	} from '$lib/stores'
+	import { storeLocalSetting } from '$lib/utils'
+	import Toggle from '../Toggle.svelte'
 
 	function storeSetting() {
-		$codeCompletionSessionEnabled = !$codeCompletionSessionEnabled
-		storeLocalSetting(SETTING_NAME, $codeCompletionSessionEnabled.toString())
+		storeLocalSetting(FORMAT_ON_SAVE_SETTING_NAME, $codeCompletionSessionEnabled.toString())
 	}
-
-	loadSetting()
 </script>
 
 {#if $copilotInfo.exists_openai_resource_path && $copilotInfo.code_completion_enabled}
-	<Popover>
-		<svelte:fragment slot="text"
-			>Code completion: {$codeCompletionSessionEnabled ? 'enabled' : 'disabled'} (applies only to you)</svelte:fragment
-		>
-		<Button
-			color="light"
-			size="xs"
-			loading={$codeCompletionLoading}
-			startIcon={$codeCompletionLoading
-				? undefined
-				: {
-						icon: $codeCompletionSessionEnabled ? SparklesIcon : SparklesOffIcon,
-						classes: $codeCompletionSessionEnabled
-							? 'text-violet-800 dark:text-violet-400'
-							: 'text-violet-800/50 dark:text-violet-400/50'
-				  }}
-			on:click={() => {
-				storeSetting()
-			}}
-		/>
-	</Popover>
+	<Toggle
+		size="xs"
+		bind:checked={$codeCompletionSessionEnabled}
+		on:change={() => {
+			storeSetting()
+		}}
+		options={{ right: 'AI code completion' }}
+	/>
 {:else}
-	<Popover>
-		<svelte:fragment slot="text"
-			>Code completion is disabled in the workspace settings</svelte:fragment
-		>
-		<Button
-			color="light"
-			startIcon={{
-				icon: SparklesOffIcon
-			}}
-			btnClasses="text-violet-800/50 dark:text-violet-400/50"
-		/>
-	</Popover>
+	<Toggle
+		disabled
+		size="xs"
+		checked={false}
+		on:change={() => {
+			storeSetting()
+		}}
+		options={{ right: 'AI code completion (disabled in workspace settings)' }}
+	/>
 {/if}
diff --git a/frontend/src/lib/components/custom_ui.ts b/frontend/src/lib/components/custom_ui.ts
index 3b0200e891..670d72a9e4 100644
--- a/frontend/src/lib/components/custom_ui.ts
+++ b/frontend/src/lib/components/custom_ui.ts
@@ -38,8 +38,9 @@ export type EditorBarUi = {
 	assistants?: boolean
 	multiplayer?: boolean
 	autoformatting?: boolean
+	vimMode?: boolean
 	aiGen?: boolean
-	aiFix?: boolean
+	aiCompletion?: boolean
 	library?: boolean
 	useVsCode?: boolean
 }
diff --git a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
index 70611661f3..cda77b0a2f 100644
--- a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
@@ -190,6 +190,9 @@
 		{#if script}
 			{#key script.hash}
 				<ScriptEditor
+					on:saveDraft={() => {
+						saveScript()
+					}}
 					noSyncFromGithub
 					lang={script.language}
 					path={script.path}
diff --git a/frontend/src/lib/components/monaco_keybindings.ts b/frontend/src/lib/components/monaco_keybindings.ts
new file mode 100644
index 0000000000..3e17fc7fa3
--- /dev/null
+++ b/frontend/src/lib/components/monaco_keybindings.ts
@@ -0,0 +1,14 @@
+import type { IDisposable } from 'monaco-editor'
+import * as monaco from 'monaco-editor'
+import * as MonacoVim from 'monaco-vim'
+
+export function initVim(
+	editor: monaco.editor.ICodeEditor,
+	statusBarElement: Element,
+	save: () => void
+): IDisposable {
+	MonacoVim.VimMode.Vim.defineEx('write', 'w', function () {
+		save()
+	})
+	return MonacoVim.initVimMode(editor, statusBarElement)
+}
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
index 8708402756..aa65ceb8bc 100644
--- a/frontend/src/lib/stores.ts
+++ b/frontend/src/lib/stores.ts
@@ -2,6 +2,7 @@ import { BROWSER } from 'esm-env'
 import { derived, type Readable, writable } from 'svelte/store'
 import { type WorkspaceDefaultScripts, type TokenResponse, type UserWorkspaceList } from './gen'
 import type { IntrospectionQuery } from 'graphql'
+import { getLocalSetting } from './utils'
 
 export interface UserExt {
 	email: string
@@ -76,10 +77,18 @@ export const copilotInfo = writable<{
 	code_completion_enabled: false
 })
 export const codeCompletionLoading = writable<boolean>(false)
-export const codeCompletionSessionEnabled = writable<boolean>(true)
 export const metadataCompletionEnabled = writable<boolean>(true)
 export const stepInputCompletionEnabled = writable<boolean>(true)
-export const formatOnSave = writable<boolean>(true)
+export const FORMAT_ON_SAVE_SETTING_NAME = 'formatOnSave'
+export const VIM_MODE_SETTING_NAME = 'vimMode'
+export const CODE_COMPLETION_SETTING_NAME = 'codeCompletionSessionEnabled'
+export const formatOnSave = writable<boolean>(
+	getLocalSetting(FORMAT_ON_SAVE_SETTING_NAME) != 'false'
+)
+export const vimMode = writable<boolean>(getLocalSetting(VIM_MODE_SETTING_NAME) == 'true')
+export const codeCompletionSessionEnabled = writable<boolean>(
+	getLocalSetting(CODE_COMPLETION_SETTING_NAME) != 'false'
+)
 
 type SQLBaseSchema = {
 	[schemaKey: string]: {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index b362913835..3953635c25 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -40,7 +40,7 @@ const config = {
 		__pkg__: version
 	},
 	optimizeDeps: {
-		include: ['highlight.js', 'highlight.js/lib/core'],
+		include: ['highlight.js', 'highlight.js/lib/core', 'monaco-vim'],
 		exclude: [
 			'@codingame/monaco-vscode-standalone-typescript-language-features',
 			'@codingame/monaco-vscode-standalone-languages',
diff --git a/python-client/wmill/wmill/client.py b/python-client/wmill/wmill/client.py
index 1cf289f3db..d794980d64 100644
--- a/python-client/wmill/wmill/client.py
+++ b/python-client/wmill/wmill/client.py
@@ -808,7 +808,7 @@ def get_state() -> Any:
 def get_resource(
     path: str,
     none_if_undefined: bool = False,
-) -> str | dict | None:
+) -> dict | None:
     """Get resource from Windmill"""
     return _client.get_resource(path, none_if_undefined)