update monaco (#6372)

* update monaco

* nits

* update

* force rebuild

* all

* fix

* fix

* fix

frontend/bundle_graphql_worker.sh

@@ -1 +1 @@
-npx esbuild node_modules/monaco-graphql/esm/graphql.worker --bundle --minify --outfile=src/lib/monaco_workers/graphql.worker.bundle.js
+npx esbuild ./node_modules/monaco-graphql/esm/graphql.worker --bundle --minify --outfile=src/lib/monaco_workers/graphql.worker.bundle.js

frontend/package.json

@@ -5,7 +5,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"postinstall": "node -e \"if (require('fs').existsSync('./scripts/untar_ui_builder.js')) { require('child_process').execSync('node ./scripts/untar_ui_builder.js && node ./scripts/patch_files.js', {stdio: 'inherit'}) }\"",
+		"postinstall": "node -e \"if (require('fs').existsSync('./scripts/untar_ui_builder.js')) { require('child_process').execSync('node ./scripts/untar_ui_builder.js', {stdio: 'inherit'}) }\"",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --threshold warning",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
@@ -78,13 +78,13 @@
 	"type": "module",
 	"dependencies": {
 		"@aws-crypto/sha256-js": "^4.0.0",
-		"@codingame/monaco-vscode-configuration-service-override": "~16.1.1",
-		"@codingame/monaco-vscode-editor-api": "~16.1.1",
-		"@codingame/monaco-vscode-standalone-css-language-features": "~16.1.1",
-		"@codingame/monaco-vscode-standalone-html-language-features": "^16.1.1",
-		"@codingame/monaco-vscode-standalone-json-language-features": "~16.1.1",
-		"@codingame/monaco-vscode-standalone-languages": "~16.1.1",
-		"@codingame/monaco-vscode-standalone-typescript-language-features": "~16.1.1",
+		"@codingame/monaco-vscode-configuration-service-override": "~19.1.4",
+		"@codingame/monaco-vscode-editor-api": "~19.1.4",
+		"@codingame/monaco-vscode-standalone-css-language-features": "~19.1.4",
+		"@codingame/monaco-vscode-standalone-html-language-features": "~19.1.4",
+		"@codingame/monaco-vscode-standalone-json-language-features": "~19.1.4",
+		"@codingame/monaco-vscode-standalone-languages": "~19.1.4",
+		"@codingame/monaco-vscode-standalone-typescript-language-features": "~19.1.4",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
@@ -117,10 +117,10 @@
 		"lru-cache": "^11.1.0",
 		"lucide-svelte": "^0.399.0",
 		"minimatch": "^10.0.1",
-		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~16.1.1",
-		"monaco-editor-wrapper": "6.7.0",
-		"monaco-graphql": "^1.6.0",
-		"monaco-languageclient": "9.6.0",
+		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~19.1.4",
+		"monaco-editor-wrapper": "6.10.0",
+		"monaco-graphql": "^1.7.2",
+		"monaco-languageclient": "9.9.0",
 		"monaco-vim": "^0.4.1",
 		"ol": "^7.4.0",
 		"openai": "^4.87.1",
@@ -137,7 +137,7 @@
 		"svelte-infinite-loading": "^1.4.0",
 		"svelte-tiny-virtual-list": "^2.0.5",
 		"tailwind-merge": "^1.13.2",
-		"vscode": "npm:@codingame/monaco-vscode-extension-api@~16.1.1",
+		"vscode": "npm:@codingame/monaco-vscode-extension-api@~19.1.4",
 		"vscode-languageclient": "~9.0.1",
 		"vscode-uri": "~3.1.0",
 		"vscode-ws-jsonrpc": "~3.4.0",
@@ -543,4 +543,4 @@
 		"@rollup/rollup-linux-x64-gnu": "^4.35.0",
 		"fsevents": "^2.3.3"
 	}
-}
+}

frontend/scripts/patch_files.js

@@ -1,57 +0,0 @@
-// patch-editor-worker.mjs
-import { readFile, writeFile } from 'fs/promises'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const filePath = path.join(
-	__dirname,
-	'..',
-	'node_modules',
-	'@codingame',
-	'monaco-vscode-api',
-	'workers',
-	'editor.worker.js'
-)
-
-const originalSnippet = `return requestHandler?.[propKey];`
-
-const patchedCode = `
-import '../vscode/src/vs/editor/common/services/editorWebWorkerMain.js';
-import { start } from '../vscode/src/vs/editor/editor.worker.start.js';
-
-function initialize(createFn) {
-    let requestHandler;
-    const foreignModule = new Proxy({}, {
-        get(_target, propKey) {
-            if (propKey === '$initialize') {
-                return async (data) => {
-                    if (!requestHandler) {
-                        requestHandler = createFn(context, data);
-                    }
-                };
-            }
-            const value = requestHandler?.[propKey]
-            if (typeof value === 'function') {
-              return value.bind(requestHandler);
-            }
-            return value;
-        }
-    });
-    const context = start(foreignModule);
-}
-
-export { initialize };
-`
-
-try {
-	const current = await readFile(filePath, 'utf8')
-	if (current.includes(originalSnippet)) {
-		await writeFile(filePath, patchedCode, 'utf8')
-		console.log('✅ editor.worker.js patched successfully.')
-	} else {
-		console.log('ℹ️ Patch already applied or file has changed.')
-	}
-} catch (err) {
-	console.error('❌ Failed to patch editor.worker.js:', err)
-}

frontend/src/lib/components/Editor.svelte

@@ -149,10 +149,11 @@
 	import { writable } from 'svelte/store'
 	import { formatResourceTypes } from './copilot/chat/script/core'
 	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
-	import { editorPositionMap } from '$lib/utils'
+	import { editorPositionMap, readFieldsRecursively } from '$lib/utils'
 	import { extToLang, langToExt } from '$lib/editorLangUtils'
 	import { aiChatManager } from './copilot/chat/AIChatManager.svelte'
 	import type { Selection } from 'monaco-editor'
+	import { getDbSchemas } from './apps/components/display/dbtable/utils'
 	// import EditorTheme from './EditorTheme.svelte'
 
 	let divEl: HTMLDivElement | null = $state(null)
@@ -541,10 +542,18 @@
 
 	let sqlSchemaCompletor: IDisposable | undefined = undefined
 
-	function updateSchema() {
+	async function updateSchema() {
 		const newSchemaRes = lang === 'graphql' ? args?.api : args?.database
+
 		if (typeof newSchemaRes === 'string') {
-			dbSchema = $dbSchemas[newSchemaRes.replace('$res:', '')]
+			const resourcePath = newSchemaRes.replace('$res:', '')
+			dbSchema = $dbSchemas[resourcePath]
+			if (lang === 'graphql' && dbSchema === undefined) {
+				await getDbSchemas(lang, resourcePath, $workspaceStore, $dbSchemas, (e) => {
+					console.error('error getting graphql db schema', e)
+				})
+				dbSchema = $dbSchemas[resourcePath]
+			}
 		} else {
 			dbSchema = undefined
 		}
@@ -562,8 +571,10 @@
 		if (!schemaLang || !schema) {
 			return
 		}
+		console.log('adding db schema completions', schemaLang)
 		if (schemaLang === 'graphql') {
 			graphqlService ||= initializeMode()
+			console.log('setting schema config', schema)
 			graphqlService?.setSchemaConfig([
 				{
 					uri: 'my-schema.graphql',
@@ -1588,9 +1599,12 @@
 			: sqlTypeCompletor?.dispose()
 	})
 	$effect(() => {
-		lang && args && $dbSchemas && untrack(() => updateSchema())
+		console.log('updating schema', lang, $dbSchemas)
+		readFieldsRecursively(args)
+		lang && $dbSchemas && untrack(() => updateSchema())
 	})
 	$effect(() => {
+		console.log('updating db schema completions', dbSchema, lang)
 		initialized &&
 			dbSchema &&
 			['sql', 'graphql'].includes(lang) &&

frontend/src/lib/components/copilot/ScriptGen.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
-
 	import { base } from '$lib/base'
 	import { Button } from '../common'
 
@@ -20,7 +18,7 @@
 	import { writable } from 'svelte/store'
 	import HighlightCode from '../HighlightCode.svelte'
 	import LoadingIcon from '../apps/svelte-select/lib/LoadingIcon.svelte'
-	import { sleep } from '$lib/utils'
+	import { readFieldsRecursively, sleep } from '$lib/utils'
 	import { autoPlacement } from '@floating-ui/core'
 	import { AlertTriangle, Ban, Check, ExternalLink, HistoryIcon, Wand2, X } from 'lucide-svelte'
 	import { fade } from 'svelte/transition'
@@ -50,7 +48,7 @@
 		transformer = false
 	}: Props = $props()
 
-	run(() => {
+	$effect.pre(() => {
 		if (lang == 'bunnative') {
 			lang = 'bun'
 		}
@@ -69,7 +67,7 @@
 
 	let button: HTMLButtonElement | undefined = $state()
 
-	run(() => {
+	$effect.pre(() => {
 		trimmedDesc = funcDesc.trim()
 	})
 	async function callCopilot() {
@@ -176,7 +174,7 @@
 		diffEditor?.hide()
 	}
 
-	run(() => {
+	$effect(() => {
 		input && setTimeout(() => input?.focus(), 100)
 	})
 
@@ -184,11 +182,11 @@
 		$generatedCode = ''
 	}
 
-	run(() => {
+	$effect(() => {
 		lang && clear()
 	})
 
-	run(() => {
+	$effect(() => {
 		!$generatedCode && hideDiff()
 	})
 
@@ -206,7 +204,12 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
+		readFieldsRecursively(args)
+		updateSchema(lang, args, $dbSchemas)
+	})
+	$effect(() => {
+		readFieldsRecursively(args)
 		updateSchema(lang, args, $dbSchemas)
 	})
 
@@ -258,11 +261,11 @@
 		const storageKey = getPromptStorageKey()
 		safeLocalStorageOperation(() => localStorage.setItem(storageKey, JSON.stringify(promptHistory)))
 	}
-	run(() => {
+	$effect(() => {
 		lang && getPromptHistory()
 	})
 
-	run(() => {
+	$effect(() => {
 		$generatedCode && updateScroll()
 	})
 

frontend/src/lib/components/dbOps.ts

@@ -16,10 +16,10 @@ import { stringifySchema } from './copilot/lib'
 
 export type DbInput =
 	| {
-			type: 'database'
-			resourceType: DbType
-			resourcePath: string
-	  }
+		type: 'database'
+		resourceType: DbType
+		resourcePath: string
+	}
 	| { type: 'ducklake'; ducklake: string }
 
 export type IDbTableOps = {

frontend/src/lib/components/raw_apps/RawAppEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { writable } from 'svelte/store'
 	import RawAppInlineScriptsPanel from './RawAppInlineScriptsPanel.svelte'
@@ -15,32 +17,44 @@
 	import HideButton from '../apps/editor/settingsPanel/HideButton.svelte'
 	import DarkModeObserver from '../DarkModeObserver.svelte'
 
-	export let initFiles: Record<string, string>
-	export let initRunnables: Record<string, HiddenRunnable>
-	export let newApp: boolean
-	export let policy: Policy
-	export let summary = ''
-	export let path: string
-	export let newPath: string | undefined = undefined
-	export let savedApp:
-		| {
-				value: any
-				draft?: any
-				path: string
-				summary: string
-				policy: any
-				draft_only?: boolean
-				custom_path?: string
-		  }
-		| undefined = undefined
+	interface Props {
+		initFiles: Record<string, string>
+		initRunnables: Record<string, HiddenRunnable>
+		newApp: boolean
+		policy: Policy
+		summary?: string
+		path: string
+		newPath?: string | undefined
+		savedApp?:
+			| {
+					value: any
+					draft?: any
+					path: string
+					summary: string
+					policy: any
+					draft_only?: boolean
+					custom_path?: string
+			  }
+			| undefined
+		diffDrawer?: DiffDrawer | undefined
+	}
 
-	export let diffDrawer: DiffDrawer | undefined = undefined
+	let {
+		initFiles,
+		initRunnables,
+		newApp,
+		policy,
+		summary = $bindable(''),
+		path,
+		newPath = undefined,
+		savedApp = $bindable(undefined),
+		diffDrawer = undefined
+	}: Props = $props()
 	export const version: number | undefined = undefined
 
 	let runnables = writable(initRunnables)
 
-	let files: Record<string, string> | undefined = initFiles
-	$: $runnables && files && saveFrontendDraft()
+	let files: Record<string, string> | undefined = $state(initFiles)
 
 	let draftTimeout: NodeJS.Timeout | undefined = undefined
 	function saveFrontendDraft() {
@@ -60,21 +74,15 @@
 		}, 500)
 	}
 
-	let iframe: HTMLIFrameElement | undefined = undefined
+	let iframe: HTMLIFrameElement | undefined = $state(undefined)
 
-	let appPanelSize = 70
+	let appPanelSize = $state(70)
 
-	let jobs: string[] = []
-	let jobsById: Record<string, JobById> = {}
+	let jobs: string[] = $state([])
+	let jobsById: Record<string, JobById> = $state({})
 
-	let iframeLoaded = false // @hmr:keep
+	let iframeLoaded = $state(false) // @hmr:keep
 
-	$: iframe && iframeLoaded && initFiles && populateFiles()
-	$: iframe && iframeLoaded && $runnables && populateRunnables()
-
-	$: iframe?.addEventListener('load', () => {
-		iframeLoaded = true
-	})
 	function populateFiles() {
 		iframe?.contentWindow?.postMessage(
 			{
@@ -95,7 +103,7 @@
 		)
 	}
 
-	let selectedRunnable: string | undefined = undefined
+	let selectedRunnable: string | undefined = $state(undefined)
 
 	function listener(e: MessageEvent) {
 		if (e.data.type === 'setFiles') {
@@ -119,10 +127,24 @@
 		})
 	}
 
-	let darkMode: boolean | undefined = undefined
+	let darkMode: boolean = $state(false)
+	run(() => {
+		$runnables && files && saveFrontendDraft()
+	})
+	run(() => {
+		iframe?.addEventListener('load', () => {
+			iframeLoaded = true
+		})
+	})
+	run(() => {
+		iframe && iframeLoaded && initFiles && populateFiles()
+	})
+	run(() => {
+		iframe && iframeLoaded && $runnables && populateRunnables()
+	})
 </script>
 
-<svelte:window on:message={listener} />
+<svelte:window onmessage={listener} />
 <DarkModeObserver bind:darkMode />
 
 <RawAppBackgroundRunner
@@ -167,7 +189,7 @@
 			></iframe>
 		</Pane>
 		<Pane>
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div class="flex h-full w-full">
 				<RawAppInlineScriptsPanel
 					on:hidePanel={() => {

frontend/src/lib/components/runs/RunRow.svelte

@@ -134,7 +134,11 @@
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else if job.canceled}
-					Cancelling job... (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
+					{#if job.type == 'CompletedJob'}
+						Cancelled <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />
+					{:else}
+						Cancelling job... (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
+					{/if}
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
 					Waiting for executor (scheduled for <TimeAgo
 						agoOnlyIfRecent