From a424edf726b9c5d5a3d4636d2d3719ab217022c1 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 3 Jan 2025 04:44:27 +0100
Subject: [PATCH] before esbuild refactor

---
 frontend/src/lib/components/Editor.svelte     | 118 +++--
 .../helpers/RunnableComponent.svelte          | 130 +++--
 .../components/helpers/executeRunnable.ts     |  50 ++
 .../apps/editor/AppEditorHeader.svelte        | 305 +-----------
 .../apps/editor/AppJobsDrawer.svelte          | 299 ++++++++++++
 .../components/apps/editor/AppTimeline.svelte |  13 +-
 .../InlineScriptEditor.svelte                 |   1 +
 .../InlineScriptEditorDrawer.svelte           |   3 +-
 frontend/src/lib/components/apps/types.ts     |  27 +-
 .../lib/components/common/modal/Modal.svelte  |  36 +-
 .../lib/components/common/table/AppRow.svelte |  15 +-
 .../src/lib/components/icons/CssIcon.svelte   |   0
 .../components/icons/JavaScriptIcon.svelte    |  16 +
 .../src/lib/components/icons/JsonIcon.svelte  |  11 +
 .../src/lib/components/icons/ReactIcon.svelte |  18 +
 .../lib/components/icons/SvelteIcon.svelte    |  15 +
 .../src/lib/components/icons/VueIcon.svelte   |  13 +
 .../components/raw_apps/FileEditorIcon.svelte |  26 +
 .../raw_apps/RawAppBackgroundRunner.svelte    |  86 ++++
 .../components/raw_apps/RawAppEditor.svelte   | 449 ++++++++++++++----
 .../raw_apps/RawAppEditorHeader.svelte        |  48 +-
 .../raw_apps/RawAppInlineScripRunnable.svelte |   2 +-
 .../components/raw_apps/RawAppPreview.svelte  |  23 +
 frontend/src/lib/components/raw_apps/utils.ts |  82 ++++
 frontend/src/lib/editorUtils.ts               |  14 +-
 frontend/src/lib/scripts.ts                   |  13 +-
 frontend/src/lib/svelteMonarch.ts             | 313 ++++++++++++
 .../src/routes/(root)/(logged)/+layout.svelte |   9 +-
 .../(logged)/apps/edit/[...path]/+page.svelte |  15 +-
 .../(root)/(logged)/apps_raw/add/+page.svelte | 161 +++++--
 .../(root)/(logged)/apps_raw/add/templates.ts | 160 +++++++
 .../(logged)/apps_raw/edit/[...path]/+page.js |   5 +
 .../apps_raw/edit/[...path]/+page.svelte      | 226 +++++++++
 .../(logged)/apps_raw/get/[...path]/+page.js  |   5 +
 .../apps_raw/get/[...path]/+page.svelte       |  55 +++
 .../[workspace]/[...version]/+page.js         |   5 +
 .../[workspace]/[...version]/+page.svelte     |  11 +
 frontend/static/sandpack                      |   1 +
 38 files changed, 2188 insertions(+), 591 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/helpers/executeRunnable.ts
 create mode 100644 frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
 create mode 100644 frontend/src/lib/components/icons/CssIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/JavaScriptIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/JsonIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/ReactIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/SvelteIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/VueIcon.svelte
 create mode 100644 frontend/src/lib/components/raw_apps/FileEditorIcon.svelte
 create mode 100644 frontend/src/lib/components/raw_apps/RawAppBackgroundRunner.svelte
 create mode 100644 frontend/src/lib/components/raw_apps/RawAppPreview.svelte
 create mode 100644 frontend/src/lib/components/raw_apps/utils.ts
 create mode 100644 frontend/src/lib/svelteMonarch.ts
 create mode 100644 frontend/src/routes/(root)/(logged)/apps_raw/add/templates.ts
 create mode 100644 frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.js
 create mode 100644 frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
 create mode 100644 frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.js
 create mode 100644 frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.svelte
 create mode 100644 frontend/src/routes/apps_raw/[workspace]/[...version]/+page.js
 create mode 100644 frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
 create mode 120000 frontend/static/sandpack

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 5167e899d4a71..59ce3eb4c650b 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -177,6 +177,7 @@
 	import { parseTypescriptDeps } from '$lib/relative_imports'
 	import type { AiProviderTypes } from './copilot/lib'
 	import { scriptLangToEditorLang } from '$lib/scripts'
+	import * as htmllang from '$lib/svelteMonarch'
 
 	// import EditorTheme from './EditorTheme.svelte'
 
@@ -203,10 +204,11 @@
 	export let args: Record<string, any> | undefined = undefined
 	export let useWebsockets: boolean = true
 	export let small = false
-	export let scriptLang: Preview['language'] | 'bunnative' | 'tsx' | 'json'
+	export let scriptLang: Preview['language'] | 'bunnative' | 'tsx' | 'json' | undefined
 	export let disabled: boolean = false
 	export let lineNumbersMinChars = 3
-	export let files: Record<string, { code: string }> | undefined = {}
+	export let files: Record<string, { code: string; readonly?: boolean }> | undefined = {}
+	export let extraLib: string | undefined = undefined
 
 	let lang = scriptLangToEditorLang(scriptLang)
 	$: lang = scriptLangToEditorLang(scriptLang)
@@ -214,8 +216,6 @@
 	let filePath = computePath(path)
 	$: filePath = computePath(path)
 
-	let models: Record<string, meditor.ITextModel> = {}
-
 	let initialPath: string | undefined = path
 
 	$: path != initialPath &&
@@ -241,20 +241,29 @@
 	buildWorkerDefinition()
 
 	function computeUri(filePath: string, scriptLang: string | undefined) {
+		let file
+		if (filePath.includes('.')) {
+			file = filePath
+		} else {
+			file = `${filePath}.${scriptLang == 'tsx' ? 'tsx' : langToExt(lang)}`
+		}
+		if (file.startsWith('/')) {
+			file = file.slice(1)
+		}
 		return !['deno', 'go', 'python3'].includes(scriptLang ?? '')
-			? `file:///${filePath}.${scriptLang == 'tsx' ? 'tsx' : langToExt(lang)}`
-			: `file:///tmp/monaco/${filePath}.${langToExt(lang)}`
+			? `file:///${file}`
+			: `file:///tmp/monaco/${file}`
 	}
 
 	function computePath(path: string | undefined): string {
 		if (
 			['deno', 'go', 'python3'].includes(scriptLang ?? '') ||
 			path == '' ||
-			path == undefined ||
-			path.startsWith('/')
+			path == undefined //||path.startsWith('/')
 		) {
 			return randomHash()
 		} else {
+			console.log('path', path)
 			return path as string
 		}
 	}
@@ -263,15 +272,17 @@
 		if (editor) {
 			const uri = mUri.parse(path)
 			console.log('switching to file', path, lang)
-			if (models[path]) {
+			// vscode.workspace.fs.writeFile(uri, new TextEncoder().encode(value))
+			let nmodel = meditor.getModel(uri)
+			if (nmodel) {
 				console.log('using existing model', path)
-				editor.setModel(models[path])
+				editor.setModel(nmodel)
 			} else {
 				console.log('creating model', path)
-				const model = meditor.createModel(value, lang, uri)
-				models[path] = model
-				editor.setModel(model)
+				nmodel = meditor.createModel(value, lang, uri)
+				editor.setModel(nmodel)
 			}
+			model = nmodel
 		}
 	}
 
@@ -1135,8 +1146,55 @@
 		}
 	}
 
+	$: files && model && onFileChanges()
+
+	let svelteRegistered = false
+	function onFileChanges() {
+		if (files && Object.keys(files).find((x) => x.endsWith('.svelte')) != undefined) {
+			if (!svelteRegistered) {
+				svelteRegistered = true
+				languages.register({
+					id: 'svelte',
+					extensions: ['.svelte'],
+					aliases: ['Svelte', 'svelte'],
+					mimetypes: ['application/svelte']
+				})
+				languages.setLanguageConfiguration('svelte', htmllang.conf as any)
+
+				languages.setMonarchTokensProvider('svelte', htmllang.language as any)
+			}
+		}
+		if (files && model) {
+			for (const [path, { code, readonly }] of Object.entries(files)) {
+				const luri = mUri.file(path)
+				console.log('checking file', model.uri.toString(), luri.toString())
+				if (luri.toString() != model.uri.toString()) {
+					let nmodel = meditor.getModel(luri)
+					if (nmodel == undefined) {
+						const lmodel = meditor.createModel(code, extToLang(path?.split('.')?.pop()!), luri)
+						if (readonly) {
+							lmodel.onDidChangeContent((evt) => {
+								// This will effectively undo any new edits
+								if (lmodel.getValue() != code && code) {
+									lmodel.setValue(code)
+								}
+							})
+						}
+					} else {
+						const lmodel = meditor.getModel(luri)
+						if (lmodel && code) {
+							lmodel.setValue(code)
+						}
+					}
+				}
+			}
+		}
+	}
+
 	let timeoutModel: NodeJS.Timeout | undefined = undefined
 	async function loadMonaco() {
+		console.log('path', uri)
+
 		try {
 			console.log("Loading Monaco's language client")
 			await initializeVscode('editor')
@@ -1145,6 +1203,19 @@
 			console.log('error initializing services', e)
 		}
 
+		// vscode.languages.registerDefinitionProvider('*', {
+		// 	provideDefinition(document, position, token) {
+		// 		// Get the word under the cursor (this will be the import or function being clicked)
+		// 		const wordRange = document.getWordRangeAtPosition(position)
+		// 		const word = document.getText(wordRange)
+
+		// 		// Do something with the word (for example, log it or handle it)
+		// 		console.log('Clicked on import or symbol:', word)
+
+		// 		// Optionally, you can also return a definition location
+		// 		return null // If you don't want to override the default behavior
+		// 	}
+		// })
 		// console.log('bef ready')
 		// console.log('af ready')
 
@@ -1152,7 +1223,6 @@
 
 		try {
 			model = meditor.createModel(code, lang, mUri.parse(uri))
-			models[path ?? ''] = model
 		} catch (err) {
 			console.log('model already existed', err)
 			const nmodel = meditor.getModel(mUri.parse(uri))
@@ -1163,17 +1233,7 @@
 		}
 		model.updateOptions(lang == 'python' ? { tabSize: 4, insertSpaces: true } : updateOptions)
 
-		if (files) {
-			for (const [path, { code }] of Object.entries(files)) {
-				const luri = mUri.file(path)
-				if (luri.toString() != model.uri.toString()) {
-					if (!models[path] && meditor.getModel(luri) == undefined) {
-						const lmodel = meditor.createModel(code, extToLang(path?.split('.')?.pop()!), luri)
-						models[path] = lmodel
-					}
-				}
-			}
-		}
+		onFileChanges()
 
 		editor = meditor.create(divEl as HTMLDivElement, {
 			...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
@@ -1194,7 +1254,7 @@
 			timeoutModel = setTimeout(() => {
 				let ncode = getCode()
 				code = ncode
-				dispatch('change', code)
+				dispatch('change', ncode)
 			}, 500)
 
 			ataModel && clearTimeout(ataModel)
@@ -1235,7 +1295,6 @@
 				!websocketAlive.go &&
 				!websocketInterval
 			) {
-				console.log('reconnecting to language servers on focus')
 				reloadWebsocket()
 			}
 		})
@@ -1263,6 +1322,11 @@
 	}
 
 	async function setTypescriptExtraLibsATA() {
+		if (extraLib) {
+			const uri = mUri.parse('file:///extraLib.d.ts')
+			languages.typescript.typescriptDefaults.addExtraLib(extraLib, uri.toString())
+		}
+		console.log('scriptLang ATA', scriptLang)
 		if (lang === 'typescript' && (scriptLang == 'bun' || scriptLang == 'tsx') && ata == undefined) {
 			const hostname = getHostname()
 
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 66dabfe560e3b..9fe086c18aafe 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -3,7 +3,7 @@
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import LightweightSchemaForm from '$lib/components/LightweightSchemaForm.svelte'
 	import Popover from '$lib/components/Popover.svelte'
-	import { AppService, type ExecuteComponentData } from '$lib/gen'
+	import { type ExecuteComponentData } from '$lib/gen'
 	import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
 	import { deepEqual } from 'fast-equals'
 	import { Bug } from 'lucide-svelte'
@@ -27,6 +27,7 @@
 	import RefreshButton from '$lib/components/apps/components/helpers/RefreshButton.svelte'
 	import { ctxRegex } from '../../utils'
 	import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3'
+	import { executeRunnable } from './executeRunnable'
 
 	// Component props
 	export let id: string
@@ -329,84 +330,22 @@
 
 		try {
 			jobId = await resultJobLoader?.abstractRun(async () => {
-				const nonStaticRunnableInputs = dynamicArgsOverride ?? {}
-				const staticRunnableInputs = {}
-				const allowUserResources: string[] = []
-				for (const k of Object.keys(fields ?? {})) {
-					let field = fields[k]
-					if (field?.type == 'static' && fields[k]) {
-						if (isEditor) {
-							staticRunnableInputs[k] = field.value
-						}
-					} else if (field?.type == 'user') {
-						nonStaticRunnableInputs[k] = args?.[k]
-						if (isEditor && field.allowUserResources) {
-							allowUserResources.push(k)
-						}
-					} else if (field?.type == 'eval' || (field?.type == 'evalv2' && inputValues[k])) {
-						const ctxMatch = field.expr.match(ctxRegex)
-						if (ctxMatch) {
-							nonStaticRunnableInputs[k] = '$ctx:' + ctxMatch[1]
-						} else {
-							nonStaticRunnableInputs[k] = await inputValues[k]?.computeExpr()
-						}
-						if (isEditor && field?.type == 'evalv2' && field.allowUserResources) {
-							allowUserResources.push(k)
-						}
-					} else {
-						if (isEditor && field?.type == 'connected' && field.allowUserResources) {
-							allowUserResources.push(k)
-						}
-						nonStaticRunnableInputs[k] = runnableInputValues[k]
-					}
-				}
-
-				const oneOfRunnableInputs = isEditor ? collectOneOfFields(fields, $app) : {}
-
-				const requestBody: ExecuteComponentData['requestBody'] = {
-					args: nonStaticRunnableInputs,
-					component: id,
-					force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs,
-					force_viewer_one_of_fields: !isEditor ? undefined : oneOfRunnableInputs,
-					force_viewer_allow_user_resources: !isEditor ? undefined : allowUserResources
-				}
-
-				if (runnable?.type === 'runnableByName') {
-					const { inlineScript } = inlineScriptOverride
-						? { inlineScript: inlineScriptOverride }
-						: runnable
-
-					if (inlineScript) {
-						if (inlineScript.id !== undefined) {
-							requestBody['id'] = inlineScript.id
-						}
-						requestBody['raw_code'] = {
-							content: inlineScript.id === undefined ? inlineScript.content : '',
-							language: inlineScript.language ?? '',
-							path: $appPath + '/' + inlineScript.id,
-							lock: inlineScript.id === undefined ? inlineScript.lock : undefined,
-							cache_ttl: inlineScript.cache_ttl
-						}
-					}
-				} else if (runnable?.type === 'runnableByPath') {
-					const { path, runType } = runnable
-					requestBody['path'] = runType !== 'hubscript' ? `${runType}/${path}` : `script/${path}`
-				}
-
-				if ($app.version !== undefined) {
-					requestBody['version'] = $app.version
-				}
-
-				const uuid = await AppService.executeComponent({
+				const uuid = await executeRunnable(
+					runnable,
 					workspace,
-					path: defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`),
-					requestBody
-				})
+					$app.version,
+					$userStore?.username,
+					$appPath,
+					id,
+					await buildRequestBody(dynamicArgsOverride),
+					inlineScriptOverride
+				)
 				if (isEditor) {
 					addJob(uuid)
 				}
 				return uuid
 			}, callbacks)
+
 			if (setRunnableJobEditorPanel && editorContext) {
 				editorContext.runnableJobEditorPanel.update((p) => {
 					return {
@@ -428,6 +367,51 @@
 	}
 	type Callbacks = { done: (x: any) => void; cancel: () => void; error: (e: any) => void }
 
+	export async function buildRequestBody(dynamicArgsOverride: Record<string, any> | undefined) {
+		const nonStaticRunnableInputs = dynamicArgsOverride ?? {}
+		const staticRunnableInputs = {}
+		const allowUserResources: string[] = []
+		for (const k of Object.keys(fields ?? {})) {
+			let field = fields[k]
+			if (field?.type == 'static' && fields[k]) {
+				if (isEditor) {
+					staticRunnableInputs[k] = field.value
+				}
+			} else if (field?.type == 'user') {
+				nonStaticRunnableInputs[k] = args?.[k]
+				if (isEditor && field.allowUserResources) {
+					allowUserResources.push(k)
+				}
+			} else if (field?.type == 'eval' || (field?.type == 'evalv2' && inputValues[k])) {
+				const ctxMatch = field.expr.match(ctxRegex)
+				if (ctxMatch) {
+					nonStaticRunnableInputs[k] = '$ctx:' + ctxMatch[1]
+				} else {
+					nonStaticRunnableInputs[k] = await inputValues[k]?.computeExpr()
+				}
+				if (isEditor && field?.type == 'evalv2' && field.allowUserResources) {
+					allowUserResources.push(k)
+				}
+			} else {
+				if (isEditor && field?.type == 'connected' && field.allowUserResources) {
+					allowUserResources.push(k)
+				}
+				nonStaticRunnableInputs[k] = runnableInputValues[k]
+			}
+		}
+
+		const oneOfRunnableInputs = isEditor ? collectOneOfFields(fields, $app) : {}
+
+		const requestBody: ExecuteComponentData['requestBody'] = {
+			args: nonStaticRunnableInputs,
+			component: id,
+			force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs,
+			force_viewer_one_of_fields: !isEditor ? undefined : oneOfRunnableInputs,
+			force_viewer_allow_user_resources: !isEditor ? undefined : allowUserResources
+		}
+		return requestBody
+	}
+
 	export async function runComponent(
 		noToast = true,
 		inlineScriptOverride?: InlineScript,
diff --git a/frontend/src/lib/components/apps/components/helpers/executeRunnable.ts b/frontend/src/lib/components/apps/components/helpers/executeRunnable.ts
new file mode 100644
index 0000000000000..397f690ae25e0
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/helpers/executeRunnable.ts
@@ -0,0 +1,50 @@
+import { AppService, type ExecuteComponentData } from '$lib/gen'
+import { defaultIfEmptyString } from '$lib/utils'
+import type { Runnable } from '../../inputType'
+import type { InlineScript } from '../../types'
+
+export async function executeRunnable(
+	runnable: Runnable,
+	workspace: string,
+	version: number | undefined,
+	username: string | undefined,
+	path: string,
+	id: string,
+	requestBody: ExecuteComponentData['requestBody'],
+	inlineScriptOverride?: InlineScript
+) {
+	let appPath = defaultIfEmptyString(path, `u/${username ?? 'unknown'}/newapp`)
+	if (runnable?.type === 'runnableByName') {
+		const { inlineScript } = inlineScriptOverride
+			? { inlineScript: inlineScriptOverride }
+			: runnable
+
+		if (inlineScript) {
+			if (inlineScript.id !== undefined) {
+				requestBody['id'] = inlineScript.id
+			}
+			requestBody['raw_code'] = {
+				content: inlineScript.id === undefined ? inlineScript.content : '',
+				language: inlineScript.language ?? '',
+				path: appPath + '/' + id,
+				lock: inlineScript.id === undefined ? inlineScript.lock : undefined,
+				cache_ttl: inlineScript.cache_ttl
+			}
+		}
+	} else if (runnable?.type === 'runnableByPath') {
+		const { path, runType } = runnable
+		requestBody['path'] = runType !== 'hubscript' ? `${runType}/${path}` : `script/${path}`
+	}
+
+	if (version !== undefined) {
+		requestBody['version'] = version
+	}
+
+	const uuid = await AppService.executeComponent({
+		workspace,
+		path: appPath,
+		requestBody
+	})
+
+	return uuid
+}
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index c242dac762a47..2c839ae7e13e7 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
-	import { Alert, Badge, Drawer, DrawerContent, Tab, Tabs, UndoRedo } from '$lib/components/common'
+	import { Alert, Drawer, DrawerContent, UndoRedo } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
-	import DisplayResult from '$lib/components/DisplayResult.svelte'
-	import FlowProgressBar from '$lib/components/flows/FlowProgressBar.svelte'
-	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
-	import JobArgs from '$lib/components/JobArgs.svelte'
-	import LogViewer from '$lib/components/LogViewer.svelte'
+
 	import Path from '$lib/components/Path.svelte'
-	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
-	import { AppService, DraftService, type Job, type Policy } from '$lib/gen'
+	import { AppService, DraftService, type Policy } from '$lib/gen'
 	import { redo, undo } from '$lib/history'
 	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
 	import {
@@ -25,7 +20,6 @@
 		Laptop2,
 		Loader2,
 		MoreVertical,
-		RefreshCw,
 		Save,
 		Smartphone,
 		FileClock,
@@ -34,15 +28,12 @@
 		SunMoon
 	} from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import {
 		classNames,
 		cleanValueProperties,
-		truncateRev,
 		orderedJsonStringify,
 		type Value,
-		replaceFalseWithUndefined,
-		isFlowPreview
+		replaceFalseWithUndefined
 	} from '../../../utils'
 	import type {
 		AppInput,
@@ -57,7 +48,6 @@
 	import AppExportButton from './AppExportButton.svelte'
 	import AppInputs from './AppInputs.svelte'
 	import type { AppComponent } from './component/components'
-	import PanelSection from './settingsPanel/common/PanelSection.svelte'
 	import PreviewToggle from './PreviewToggle.svelte'
 
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
@@ -72,10 +62,8 @@
 	import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte'
 	import { MenuItem } from '@rgossiaux/svelte-headlessui'
 	import AppEditorTutorial from './AppEditorTutorial.svelte'
-	import AppTimeline from './AppTimeline.svelte'
 	import type DiffDrawer from '$lib/components/DiffDrawer.svelte'
 	import AppReportsDrawer from './AppReportsDrawer.svelte'
-	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import { type ColumnDef, getPrimaryKeys } from '../components/display/dbtable/utils'
 	import DebugPanel from './contextPanel/DebugPanel.svelte'
 	import { getCountInput } from '../components/display/dbtable/queries/count'
@@ -92,6 +80,7 @@
 	import { isCloudHosted } from '$lib/cloud'
 	import { base } from '$lib/base'
 	import ClipboardPanel from '$lib/components/details/ClipboardPanel.svelte'
+	import AppJobsDrawer from './AppJobsDrawer.svelte'
 
 	async function hash(message) {
 		try {
@@ -166,6 +155,7 @@
 			selectedJobId = jobId
 		}
 	}
+	let selectedJobId: string | undefined = undefined
 
 	let pathError: string | undefined = undefined
 	let appExport: AppExportButton
@@ -719,17 +709,6 @@
 
 	$: saveDrawerOpen && compareVersions()
 
-	let selectedJobId: string | undefined = undefined
-	let testJobLoader: TestJobLoader
-	let job: Job | undefined = undefined
-	let testIsLoading = false
-
-	$: selectedJobId && !selectedJobId?.includes('Frontend') && testJobLoader?.watchJob(selectedJobId)
-
-	$: if (selectedJobId?.includes('Frontend') && selectedJobId) {
-		job = undefined
-	}
-
 	$: hasErrors = Object.keys($errorByComponent).length > 0
 
 	let lock = false
@@ -880,8 +859,6 @@
 		appEditorTutorial?.toggleTutorial()
 	}
 
-	let rightColumnSelect: 'timeline' | 'detail' = 'timeline'
-
 	let appReportingDrawerOpen = false
 
 	export function openTroubleshootPanel() {
@@ -939,7 +916,6 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
-<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
 <UnsavedConfirmationModal
 	{diffDrawer}
 	savedValue={savedApp}
@@ -973,7 +949,7 @@
 {#if $appPath == ''}
 	<Drawer bind:open={draftDrawerOpen} size="800px">
 		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
-			<Alert title="Require path" type="info">
+			<Alert bgClass="mb-4" title="Require path" type="info">
 				Choose a path to save the initial draft of the app.
 			</Alert>
 			<h3>Summary</h3>
@@ -1024,6 +1000,23 @@
 		</DrawerContent>
 	</Drawer>
 {/if}
+
+<AppJobsDrawer
+	bind:open={$jobsDrawerOpen}
+	jobs={$jobs}
+	on:clear={() => {
+		$jobs = []
+		$errorByComponent = {}
+	}}
+	on:clearErrors={() => {
+		$errorByComponent = {}
+	}}
+	{hasErrors}
+	{selectedJobId}
+	refreshComponents={$refreshComponents}
+	jobsById={$jobsById}
+	errorByComponent={$errorByComponent}
+/>
 <Drawer bind:open={saveDrawerOpen} size="800px">
 	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
 		{#if !onLatest}
@@ -1267,256 +1260,6 @@
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:open={$jobsDrawerOpen} size="900px">
-	<DrawerContent
-		noPadding
-		title="Debug Runs"
-		on:close={() => {
-			$jobsDrawerOpen = false
-		}}
-		tooltip="Look at latests runs to spot potential bugs."
-		documentationLink="https://www.windmill.dev/docs/apps/app_debugging"
-	>
-		<Splitpanes class="!overflow-visible">
-			<Pane size={25}>
-				<PanelSection title="Past Runs">
-					<div class="flex flex-col gap-2 w-full">
-						{#if $jobs.length > 0}
-							<div class="flex gap-2 flex-col-reverse">
-								{#each $jobs ?? [] as id}
-									{@const selectedJob = $jobsById[id]}
-									{#if selectedJob}
-										<!-- svelte-ignore a11y-click-events-have-key-events -->
-										<!-- svelte-ignore a11y-no-static-element-interactions -->
-										<div
-											class={classNames(
-												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-surface-secondary hover:text-blue-400',
-												selectedJob.error ? 'border border-red-500 text-primary' : '',
-												selectedJob.error && $errorByComponent[selectedJob.component]?.id == id
-													? selectedJobId == id
-														? 'bg-red-600 !border-blue-600'
-														: 'bg-red-400'
-													: selectedJobId == id
-													? 'text-blue-600'
-													: ''
-											)}
-											on:click={() => {
-												selectedJobId = id
-												rightColumnSelect = 'detail'
-											}}
-										>
-											<span class="text-xs truncate">{truncateRev(selectedJob.job, 20)}</span>
-											<Badge color="indigo">{selectedJob.component}</Badge>
-										</div>
-									{/if}
-								{/each}
-							</div>
-						{:else}
-							<div class="text-sm text-tertiary">No items</div>
-						{/if}
-					</div>
-				</PanelSection>
-			</Pane>
-			<Pane size={75}>
-				<div class="w-full h-full flex flex-col">
-					<div>
-						<Tabs bind:selected={rightColumnSelect}>
-							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
-							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
-						</Tabs>
-					</div>
-					{#if rightColumnSelect == 'timeline'}
-						<div class="p-2 grow overflow-auto">
-							<AppTimeline />
-						</div>
-					{:else if rightColumnSelect == 'detail'}
-						<div class="grow flex flex-col w-full overflow-auto">
-							{#if selectedJobId}
-								{#if selectedJobId?.includes('Frontend')}
-									{@const jobResult = $jobsById[selectedJobId]}
-									{#if jobResult?.error !== undefined}
-										<Splitpanes horizontal class="grow border w-full">
-											<Pane size={10} minSize={10}>
-												<LogViewer
-													content={`Logs are avaiable in the browser console directly`}
-													isLoading={false}
-													tag={undefined}
-												/>
-											</Pane>
-											<Pane size={90} minSize={10} class="text-sm text-secondary">
-												<div class="relative h-full px-2">
-													<DisplayResult
-														result={{
-															error: { name: 'Frontend execution error', message: jobResult.error }
-														}}
-													/>
-												</div>
-											</Pane>
-										</Splitpanes>
-									{:else if jobResult !== undefined}
-										<Splitpanes horizontal class="grow border w-full">
-											<Pane size={10} minSize={10}>
-												<LogViewer
-													content={`Logs are avaiable in the browser console directly`}
-													isLoading={false}
-													tag={undefined}
-												/>
-											</Pane>
-											<Pane size={90} minSize={10} class="text-sm text-secondary">
-												<div class="relative h-full px-2">
-													<DisplayResult
-														workspaceId={$workspaceStore}
-														jobId={selectedJobId}
-														result={jobResult.result}
-													/>
-												</div>
-											</Pane>
-										</Splitpanes>
-									{:else}
-										<Loader2 class="animate-spin" />
-									{/if}
-								{:else}
-									<div class="flex flex-col h-full w-full mb-4">
-										{#if job?.['running']}
-											<div class="flex flex-row-reverse w-full">
-												<Button
-													color="red"
-													variant="border"
-													on:click={() => testJobLoader?.cancelJob()}
-												>
-													<Loader2 size={14} class="animate-spin mr-2" />
-
-													Cancel
-												</Button>
-											</div>
-										{/if}
-										{#if job?.args}
-											<div class="p-2">
-												<JobArgs
-													id={job.id}
-													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
-													args={job?.args}
-												/>
-											</div>
-										{/if}
-										{#if job?.raw_code}
-											<div class="pb-2 pl-2 pr-2 w-full overflow-auto h-full max-h-[80px]">
-												<HighlightCode language={job?.language} code={job?.raw_code} />
-											</div>
-										{/if}
-
-										{#if job?.job_kind !== 'flow' && !isFlowPreview(job?.job_kind)}
-											{@const jobResult = $jobsById[selectedJobId]}
-											<Splitpanes horizontal class="grow border w-full">
-												<Pane size={50} minSize={10}>
-													<LogViewer
-														duration={job?.['duration_ms']}
-														jobId={job?.id}
-														content={job?.logs}
-														isLoading={testIsLoading && job?.['running'] == false}
-														tag={job?.tag}
-													/>
-												</Pane>
-												<Pane size={50} minSize={10} class="text-sm text-secondary">
-													{#if job != undefined && 'result' in job && job.result != undefined}<div
-															class="relative h-full px-2"
-															><DisplayResult
-																workspaceId={$workspaceStore}
-																jobId={selectedJobId}
-																result={job.result}
-															/></div
-														>
-													{:else if testIsLoading}
-														<div class="p-2"><Loader2 class="animate-spin" /> </div>
-													{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
-														<div class="p-2 text-tertiary">Result is undefined</div>
-													{:else}
-														<div class="p-2 text-tertiary">
-															<Loader2 size={14} class="animate-spin mr-2" />
-														</div>
-													{/if}
-												</Pane>
-												{#if jobResult?.transformer}
-													<Pane size={50} minSize={10} class="text-sm text-secondary p-2">
-														<div class="font-bold">Transformer results</div>
-														{#if job != undefined && 'result' in job && job.result != undefined}
-															<div class="relative h-full px-2">
-																<DisplayResult
-																	workspaceId={$workspaceStore}
-																	jobId={selectedJobId}
-																	result={jobResult?.transformer}
-																/>
-															</div>
-														{:else if testIsLoading}
-															<div class="p-2"><Loader2 class="animate-spin" /> </div>
-														{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
-															<div class="p-2 text-tertiary">Result is undefined</div>
-														{:else}
-															<div class="p-2 text-tertiary">
-																<Loader2 size={14} class="animate-spin mr-2" />
-															</div>
-														{/if}
-													</Pane>
-												{/if}
-											</Splitpanes>
-										{:else}
-											<div class="mt-10" />
-											<FlowProgressBar {job} class="py-4" />
-											<div class="w-full mt-10 mb-20">
-												{#if job?.id}
-													<FlowStatusViewer
-														jobId={job?.id}
-														on:jobsLoaded={({ detail }) => {
-															job = detail
-														}}
-													/>
-												{:else}
-													<Loader2 class="animate-spin" />
-												{/if}
-											</div>
-										{/if}
-									</div>
-								{/if}
-							{:else}
-								<div class="text-sm p-2 text-tertiary">Select a job to see its details</div>
-							{/if}
-						</div>
-					{/if}
-				</div>
-			</Pane>
-		</Splitpanes>
-		<svelte:fragment slot="actions">
-			<Button
-				size="md"
-				color="light"
-				variant="border"
-				on:click={() => {
-					$refreshComponents?.()
-				}}
-				title="Refresh App"
-			>
-				Refresh app&nbsp;<RefreshCw size={16} />
-			</Button>
-
-			<Button
-				size="md"
-				color="light"
-				variant="border"
-				on:click={() => {
-					errorByComponent.set({})
-					jobs.set([])
-				}}
-				>Clear jobs
-			</Button>
-			{#if hasErrors}
-				<Button size="md" color="light" variant="border" on:click={() => errorByComponent.set({})}
-					>Clear Errors &nbsp;<BellOff size={14} />
-				</Button>
-			{/if}
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>
-
 <AppReportsDrawer bind:open={appReportingDrawerOpen} appPath={$appPath ?? ''} />
 
 <div
diff --git a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
new file mode 100644
index 0000000000000..99ab1b743e818
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
@@ -0,0 +1,299 @@
+<script lang="ts">
+	import { Badge, Drawer, DrawerContent, Tab, Tabs } from '$lib/components/common'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import DisplayResult from '$lib/components/DisplayResult.svelte'
+	import FlowProgressBar from '$lib/components/flows/FlowProgressBar.svelte'
+	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
+	import JobArgs from '$lib/components/JobArgs.svelte'
+	import LogViewer from '$lib/components/LogViewer.svelte'
+
+	import { workspaceStore } from '$lib/stores'
+	import { BellOff, Loader2, RefreshCw } from 'lucide-svelte'
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import { classNames, truncateRev, isFlowPreview } from '../../../utils'
+
+	import PanelSection from './settingsPanel/common/PanelSection.svelte'
+
+	import AppTimeline from './AppTimeline.svelte'
+
+	import HighlightCode from '$lib/components/HighlightCode.svelte'
+	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
+	import type { Job } from '$lib/gen'
+	import type { JobById } from '../types'
+	import { createEventDispatcher } from 'svelte'
+
+	export let open = false
+	export let jobs: string[]
+	export let jobsById: Record<string, JobById>
+
+	export let hasErrors: boolean = false
+	export let selectedJobId: string | undefined = undefined
+	export let refreshComponents: (() => void) | undefined = undefined
+	export let errorByComponent: Record<string, { id?: string; error: string }> = {}
+
+	const dispatch = createEventDispatcher()
+
+	let testJobLoader: TestJobLoader
+	let job: Job | undefined = undefined
+	let testIsLoading = false
+
+	let rightColumnSelect: 'timeline' | 'detail' = 'timeline'
+
+	$: selectedJobId && !selectedJobId?.includes('Frontend') && testJobLoader?.watchJob(selectedJobId)
+
+	$: if (selectedJobId?.includes('Frontend') && selectedJobId) {
+		job = undefined
+	}
+</script>
+
+<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
+
+<Drawer bind:open size="900px">
+	<DrawerContent
+		noPadding
+		title="Debug Runs"
+		on:close={() => {
+			open = false
+		}}
+		tooltip="Look at latests runs to spot potential bugs."
+		documentationLink="https://www.windmill.dev/docs/apps/app_debugging"
+	>
+		<Splitpanes class="!overflow-visible">
+			<Pane size={25}>
+				<PanelSection title="Past Runs">
+					<div class="flex flex-col gap-2 w-full">
+						{#if jobs.length > 0}
+							<div class="flex gap-2 flex-col-reverse">
+								{#each jobs ?? [] as id}
+									{@const selectedJob = jobsById[id]}
+									{#if selectedJob}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<div
+											class={classNames(
+												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-surface-secondary hover:text-blue-400',
+												selectedJob.error ? 'border border-red-500 text-primary' : '',
+												selectedJob.error && errorByComponent[selectedJob.component]?.id == id
+													? selectedJobId == id
+														? 'bg-red-600 !border-blue-600'
+														: 'bg-red-400'
+													: selectedJobId == id
+													? 'text-blue-600'
+													: ''
+											)}
+											on:click={() => {
+												selectedJobId = id
+												rightColumnSelect = 'detail'
+											}}
+										>
+											<span class="text-xs truncate">{truncateRev(selectedJob.job, 20)}</span>
+											<Badge color="indigo">{selectedJob.component}</Badge>
+										</div>
+									{/if}
+								{/each}
+							</div>
+						{:else}
+							<div class="text-sm text-tertiary">No items</div>
+						{/if}
+					</div>
+				</PanelSection>
+			</Pane>
+			<Pane size={75}>
+				<div class="w-full h-full flex flex-col">
+					<div>
+						<Tabs bind:selected={rightColumnSelect}>
+							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
+						</Tabs>
+					</div>
+					{#if rightColumnSelect == 'timeline'}
+						<div class="p-2 grow overflow-auto">
+							<AppTimeline {jobs} {jobsById} />
+						</div>
+					{:else if rightColumnSelect == 'detail'}
+						<div class="grow flex flex-col w-full overflow-auto">
+							{#if selectedJobId}
+								{#if selectedJobId?.includes('Frontend')}
+									{@const jobResult = jobsById[selectedJobId]}
+									{#if jobResult?.error !== undefined}
+										<Splitpanes horizontal class="grow border w-full">
+											<Pane size={10} minSize={10}>
+												<LogViewer
+													content={`Logs are avaiable in the browser console directly`}
+													isLoading={false}
+													tag={undefined}
+												/>
+											</Pane>
+											<Pane size={90} minSize={10} class="text-sm text-secondary">
+												<div class="relative h-full px-2">
+													<DisplayResult
+														result={{
+															error: { name: 'Frontend execution error', message: jobResult.error }
+														}}
+													/>
+												</div>
+											</Pane>
+										</Splitpanes>
+									{:else if jobResult !== undefined}
+										<Splitpanes horizontal class="grow border w-full">
+											<Pane size={10} minSize={10}>
+												<LogViewer
+													content={`Logs are avaiable in the browser console directly`}
+													isLoading={false}
+													tag={undefined}
+												/>
+											</Pane>
+											<Pane size={90} minSize={10} class="text-sm text-secondary">
+												<div class="relative h-full px-2">
+													<DisplayResult
+														workspaceId={$workspaceStore}
+														jobId={selectedJobId}
+														result={jobResult.result}
+													/>
+												</div>
+											</Pane>
+										</Splitpanes>
+									{:else}
+										<Loader2 class="animate-spin" />
+									{/if}
+								{:else}
+									<div class="flex flex-col h-full w-full mb-4">
+										{#if job?.['running']}
+											<div class="flex flex-row-reverse w-full">
+												<Button
+													color="red"
+													variant="border"
+													on:click={() => testJobLoader?.cancelJob()}
+												>
+													<Loader2 size={14} class="animate-spin mr-2" />
+
+													Cancel
+												</Button>
+											</div>
+										{/if}
+										{#if job?.args}
+											<div class="p-2">
+												<JobArgs
+													id={job.id}
+													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													args={job?.args}
+												/>
+											</div>
+										{/if}
+										{#if job?.raw_code}
+											<div class="pb-2 pl-2 pr-2 w-full overflow-auto h-full max-h-[80px]">
+												<HighlightCode language={job?.language} code={job?.raw_code} />
+											</div>
+										{/if}
+
+										{#if job?.job_kind !== 'flow' && !isFlowPreview(job?.job_kind)}
+											{@const jobResult = jobsById[selectedJobId]}
+											<Splitpanes horizontal class="grow border w-full">
+												<Pane size={50} minSize={10}>
+													<LogViewer
+														duration={job?.['duration_ms']}
+														jobId={job?.id}
+														content={job?.logs}
+														isLoading={testIsLoading && job?.['running'] == false}
+														tag={job?.tag}
+													/>
+												</Pane>
+												<Pane size={50} minSize={10} class="text-sm text-secondary">
+													{#if job != undefined && 'result' in job && job.result != undefined}<div
+															class="relative h-full px-2"
+															><DisplayResult
+																workspaceId={$workspaceStore}
+																jobId={selectedJobId}
+																result={job.result}
+															/></div
+														>
+													{:else if testIsLoading}
+														<div class="p-2"><Loader2 class="animate-spin" /> </div>
+													{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
+														<div class="p-2 text-tertiary">Result is undefined</div>
+													{:else}
+														<div class="p-2 text-tertiary">
+															<Loader2 size={14} class="animate-spin mr-2" />
+														</div>
+													{/if}
+												</Pane>
+												{#if jobResult?.transformer}
+													<Pane size={50} minSize={10} class="text-sm text-secondary p-2">
+														<div class="font-bold">Transformer results</div>
+														{#if job != undefined && 'result' in job && job.result != undefined}
+															<div class="relative h-full px-2">
+																<DisplayResult
+																	workspaceId={$workspaceStore}
+																	jobId={selectedJobId}
+																	result={jobResult?.transformer}
+																/>
+															</div>
+														{:else if testIsLoading}
+															<div class="p-2"><Loader2 class="animate-spin" /> </div>
+														{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
+															<div class="p-2 text-tertiary">Result is undefined</div>
+														{:else}
+															<div class="p-2 text-tertiary">
+																<Loader2 size={14} class="animate-spin mr-2" />
+															</div>
+														{/if}
+													</Pane>
+												{/if}
+											</Splitpanes>
+										{:else}
+											<div class="mt-10" />
+											<FlowProgressBar {job} class="py-4" />
+											<div class="w-full mt-10 mb-20">
+												{#if job?.id}
+													<FlowStatusViewer
+														jobId={job?.id}
+														on:jobsLoaded={({ detail }) => {
+															job = detail
+														}}
+													/>
+												{:else}
+													<Loader2 class="animate-spin" />
+												{/if}
+											</div>
+										{/if}
+									</div>
+								{/if}
+							{:else}
+								<div class="text-sm p-2 text-tertiary">Select a job to see its details</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</Pane>
+		</Splitpanes>
+		<svelte:fragment slot="actions">
+			{#if refreshComponents}
+				<Button
+					size="md"
+					color="light"
+					variant="border"
+					on:click={() => {
+						refreshComponents?.()
+					}}
+					title="Refresh App"
+				>
+					Refresh app&nbsp;<RefreshCw size={16} />
+				</Button>
+			{/if}
+			<Button
+				size="md"
+				color="light"
+				variant="border"
+				on:click={() => {
+					dispatch('clear')
+				}}
+				>Clear jobs
+			</Button>
+			{#if hasErrors}
+				<Button size="md" color="light" variant="border" on:click={() => dispatch('clearErrors')}>
+					>Clear Errors &nbsp;<BellOff size={14} />
+				</Button>
+			{/if}
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/apps/editor/AppTimeline.svelte b/frontend/src/lib/components/apps/editor/AppTimeline.svelte
index db298553d4eb2..1563eb8bbfa2d 100644
--- a/frontend/src/lib/components/apps/editor/AppTimeline.svelte
+++ b/frontend/src/lib/components/apps/editor/AppTimeline.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { debounce } from '$lib/utils'
-	import { getContext, onDestroy } from 'svelte'
+	import { onDestroy } from 'svelte'
 
 	import TimelineBar from '$lib/components/TimelineBar.svelte'
-	import type { AppViewerContext } from '../types'
+	import type { JobById } from '../types'
 
-	const { jobs, jobsById } = getContext<AppViewerContext>('AppViewerContext')
+	export let jobs: string[]
+	export let jobsById: Record<string, JobById>
 
 	let min: undefined | number = undefined
 	let max: undefined | number = undefined
 	let total: number | undefined = undefined
 
-	let debounced = debounce(() => computeItems($jobs), 30)
-	$: $jobs && $jobsById && debounced()
+	let debounced = debounce(() => computeItems(jobs), 30)
+	$: jobs && jobsById && debounced()
 
 	let items: Record<
 		string,
@@ -35,7 +36,7 @@
 			{ created_at?: number; started_at?: number; duration_ms?: number; id: string }[]
 		> = {}
 		jobs.forEach((k) => {
-			let v = $jobsById[k]
+			let v = jobsById[k]
 			if (v.created_at) {
 				if (!nmin) {
 					nmin = v.created_at
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 66d7d8933a8b2..571674c3108db 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -202,6 +202,7 @@
 {#if inlineScript}
 	{#if inlineScript.language != 'frontend'}
 		<InlineScriptEditorDrawer
+			{id}
 			appPath={$appPath}
 			bind:isOpen={drawerIsOpen}
 			{editor}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
index 475f731a58b90..9d0a115b220c3 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
@@ -10,6 +10,7 @@
 	export let inlineScript: InlineScript
 	export let editor: Editor | undefined = undefined
 	export let isOpen: boolean | undefined = undefined
+	export let id: string
 
 	export function openDrawer() {
 		scriptEditorDrawer.openDrawer?.()
@@ -31,7 +32,7 @@
 				noHistory
 				noSyncFromGithub
 				lang={inlineScript.language}
-				path={appPath + '/' + inlineScript.id + '_fullscreen'}
+				path={appPath + '/' + id + '_fullscreen'}
 				fixedOverflowWidgets={false}
 				bind:code={inlineScript.content}
 				bind:schema={inlineScript.schema}
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 8844cbe89aca2..128ca9b00e27f 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -191,6 +191,17 @@ export type ListInputs = {
 
 export type GroupContext = { id: string; context: Writable<Record<string, any>> }
 
+export type JobById = {
+	job: string
+	component: string
+	result?: any
+	error?: any
+	transformer?: { result?: any; error?: string }
+	created_at?: number
+	started_at?: number
+	duration_ms?: number
+}
+
 export type AppViewerContext = {
 	worldStore: Writable<World>
 	app: Writable<App>
@@ -221,21 +232,7 @@ export type AppViewerContext = {
 	isEditor: boolean
 	jobs: Writable<string[]>
 	// jobByComponent: Writable<Record<string, string>>,
-	jobsById: Writable<
-		Record<
-			string,
-			{
-				job: string
-				component: string
-				result?: string
-				error?: any
-				transformer?: { result?: string; error?: string }
-				created_at?: number
-				started_at?: number
-				duration_ms?: number
-			}
-		>
-	>
+	jobsById: Writable<Record<string, JobById>>
 	noBackend: boolean
 	errorByComponent: Writable<Record<string, { id?: string; error: string }>>
 	openDebugRun: Writable<((jobID: string) => void) | undefined>
diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
index 806f7d33b0181..84308e414557a 100644
--- a/frontend/src/lib/components/common/modal/Modal.svelte
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -4,6 +4,7 @@
 	import Button from '../button/Button.svelte'
 	import Badge from '../badge/Badge.svelte'
 	import { twMerge } from 'tailwind-merge'
+	import CloseButton from '../CloseButton.svelte'
 
 	export let title: string
 	export let open: boolean = false
@@ -11,6 +12,7 @@
 	export { c as class }
 	export let style = ''
 	export let cancelText: string | undefined = undefined
+	export let kind: 'button' | 'X' = 'button'
 
 	const dispatch = createEventDispatcher()
 
@@ -68,6 +70,10 @@
 					)}
 					{style}
 				>
+					{#if kind == 'X'}
+						<div class="absolute top-4 right-4"><CloseButton on:close={() => (open = false)} /></div
+						>
+					{/if}
 					<div class="flex">
 						<div class="ml-4 text-left flex-1">
 							<div class="flex flex-row items-center justify-between">
@@ -80,21 +86,23 @@
 							</div>
 						</div>
 					</div>
-					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
-						<slot name="actions" />
-						<Button
-							on:click={() => {
-								dispatch('canceled')
-								open = false
-							}}
-							color="light"
-							size="sm"
-						>
-							<span class="inline-flex gap-2"
-								>{cancelText ?? 'Cancel'}<Badge color="dark-gray">Escape</Badge></span
+					{#if kind == 'button'}
+						<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
+							<slot name="actions" />
+							<Button
+								on:click={() => {
+									dispatch('canceled')
+									open = false
+								}}
+								color="light"
+								size="sm"
 							>
-						</Button>
-					</div>
+								<span class="inline-flex gap-2"
+									>{cancelText ?? 'Cancel'}<Badge color="dark-gray">Escape</Badge></span
+								>
+							</Button>
+						</div>
+					{/if}
 				</div>
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index 11e7dfa032188..d1c25b70f66e0 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -23,8 +23,7 @@
 		Pen,
 		Share,
 		Trash,
-		Clipboard,
-		Loader2
+		Clipboard
 	} from 'lucide-svelte'
 	import { goto as gotoUrl } from '$app/navigation'
 	import { page } from '$app/stores'
@@ -55,16 +54,14 @@
 </script>
 
 {#if menuOpen}
-	{#await import('$lib/components/apps/editor/AppJsonEditor.svelte')}
-		<Loader2 class="animate-spin" />
-	{:then Module}
+	{#await import('$lib/components/apps/editor/AppJsonEditor.svelte') then Module}
 		<Module.default on:change bind:this={appExport} />
 	{/await}
 	<AppDeploymentHistory bind:this={appDeploymentHistory} appPath={app.path} />
 {/if}
 
 <Row
-	href={`${base}/apps/get/${app.path}`}
+	href="{base}/apps{app.raw_app ? '_raw' : ''}/get/{app.path}"
 	kind="app"
 	{marked}
 	path={app.path}
@@ -98,7 +95,7 @@
 							size="xs"
 							variant="border"
 							startIcon={{ icon: Pen }}
-							href="{base}/apps/edit/{app.path}?nodraft=true"
+							href="{base}/apps{app.raw_app ? '_raw' : ''}/edit/{app.path}?nodraft=true"
 						>
 							Edit
 						</Button>
@@ -110,7 +107,7 @@
 							size="xs"
 							variant="border"
 							startIcon={{ icon: GitFork }}
-							href="{base}/apps/add?template={app.path}"
+							href="{base}/apps{app.raw_app ? '_raw' : ''}/add?template={app.path}"
 						>
 							Fork
 						</Button>
@@ -157,7 +154,7 @@
 					{
 						displayName: 'Duplicate/Fork',
 						icon: GitFork,
-						href: `${base}/apps/add?template=${path}`,
+						href: `${base}/apps${app.raw_app ? '_raw' : ''}/add?template=${path}`,
 						hide: $userStore?.operator
 					},
 					{
diff --git a/frontend/src/lib/components/icons/CssIcon.svelte b/frontend/src/lib/components/icons/CssIcon.svelte
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/frontend/src/lib/components/icons/JavaScriptIcon.svelte b/frontend/src/lib/components/icons/JavaScriptIcon.svelte
new file mode 100644
index 0000000000000..23dce0a347c0b
--- /dev/null
+++ b/frontend/src/lib/components/icons/JavaScriptIcon.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
+	<path d="M0 0H32V32H0V0Z" fill="#F7DF1E" />
+	<path
+		d="M8.41397 26.7415L10.8628 25.2595C11.3353 26.0972 11.765 26.8059 12.7959 26.8059C13.784 26.8059 14.407 26.4193 14.407 24.9158V14.6911H17.4142V24.9584C17.4142 28.073 15.5885 29.4907 12.9248 29.4907C10.5192 29.4907 9.12274 28.2448 8.41392 26.7413"
+		fill="black"
+	/>
+	<path
+		d="M19.0476 26.4193L21.4962 25.0016C22.1408 26.0542 22.9785 26.8275 24.4606 26.8275C25.7066 26.8275 26.5011 26.2045 26.5011 25.3452C26.5011 24.3142 25.6849 23.949 24.3102 23.3477L23.5586 23.0253C21.3889 22.1018 19.9497 20.9419 19.9497 18.4931C19.9497 16.2376 21.6681 14.5191 24.3532 14.5191C26.265 14.5191 27.6397 15.1851 28.6277 16.925L26.2863 18.4286C25.7708 17.505 25.2124 17.1399 24.3533 17.1399C23.4726 17.1399 22.914 17.6984 22.914 18.4286C22.914 19.3308 23.4726 19.696 24.7612 20.2546L25.513 20.5767C28.0692 21.6723 29.5084 22.7892 29.5084 25.3023C29.5084 28.009 27.3819 29.491 24.5251 29.491C21.7326 29.491 19.9282 28.1593 19.0477 26.4193"
+		fill="black"
+	/>
+</svg>
diff --git a/frontend/src/lib/components/icons/JsonIcon.svelte b/frontend/src/lib/components/icons/JsonIcon.svelte
new file mode 100644
index 0000000000000..2736d80406e9c
--- /dev/null
+++ b/frontend/src/lib/components/icons/JsonIcon.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
+	><path
+		fill="#f9a825"
+		d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"
+	/></svg
+>
diff --git a/frontend/src/lib/components/icons/ReactIcon.svelte b/frontend/src/lib/components/icons/ReactIcon.svelte
new file mode 100644
index 0000000000000..fc286af4e04c3
--- /dev/null
+++ b/frontend/src/lib/components/icons/ReactIcon.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
+	<g transform="translate(300, 300)">
+		<!-- Central circle -->
+		<circle fill="#61DAFB" r="50" />
+
+		<!-- Three ellipses -->
+		<g stroke="#61DAFB" stroke-width="20" fill="none">
+			<ellipse rx="225" ry="90" />
+			<ellipse rx="225" ry="90" transform="rotate(60)" />
+			<ellipse rx="225" ry="90" transform="rotate(120)" />
+		</g>
+	</g>
+</svg>
diff --git a/frontend/src/lib/components/icons/SvelteIcon.svelte b/frontend/src/lib/components/icons/SvelteIcon.svelte
new file mode 100644
index 0000000000000..6f6dfcc528dbb
--- /dev/null
+++ b/frontend/src/lib/components/icons/SvelteIcon.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
+	<path
+		d="M27.5342 4.35822C24.589 0.144416 18.7724 -1.10443 14.5671 1.5745L7.1816 6.28105C5.16609 7.54695 3.77642 9.60267 3.35293 11.9448C2.99976 13.8998 3.30868 15.9168 4.23081 17.6765C3.59882 18.6352 3.16817 19.7123 2.96497 20.8425C2.53883 23.2342 3.09525 25.6967 4.50833 27.6729C7.45346 31.8867 13.2701 33.1356 17.4754 30.4566L24.8609 25.7699C26.8739 24.5014 28.2628 22.4469 28.6896 20.1062C29.0414 18.1518 28.7315 16.1358 27.8089 14.3773C28.4405 13.4181 28.872 12.3413 29.0775 11.2113C29.5024 8.8196 28.9461 6.35758 27.5342 4.38088"
+		fill="#FF3E00"
+	/>
+	<path
+		d="M13.845 28.0807C11.4634 28.6987 8.94924 27.766 7.5469 25.7444C6.69765 24.5563 6.36377 23.0758 6.62088 21.6382C6.66266 21.4068 6.72134 21.1787 6.79646 20.9558L6.93522 20.531L7.31469 20.8142C8.18692 21.451 9.16069 21.9354 10.1947 22.2471L10.4779 22.3292L10.4524 22.6124C10.4251 23.0007 10.5343 23.3863 10.7611 23.7027C11.1842 24.3108 11.9413 24.591 12.6584 24.405C12.8185 24.3619 12.9712 24.2951 13.1115 24.2067L20.4857 19.5002C20.8519 19.2697 21.1038 18.8954 21.1795 18.4694C21.2557 18.0356 21.1536 17.5893 20.8963 17.2319C20.4731 16.6237 19.716 16.3435 18.9989 16.5296C18.8386 16.5721 18.6858 16.6389 18.5458 16.7278L15.714 18.526C15.2508 18.8197 14.7457 19.0412 14.2159 19.183C11.8385 19.7972 9.3301 18.8662 7.9292 16.8496C7.08253 15.6604 6.75076 14.1802 7.00885 12.7434C7.26171 11.3318 8.09747 10.092 9.31115 9.32815L16.708 4.6216C17.1684 4.32851 17.6706 4.107 18.1975 3.96461C20.5782 3.3462 23.0919 4.27906 24.4927 6.30089C25.343 7.48856 25.6779 8.96911 25.4216 10.4071C25.3774 10.6399 25.3188 10.8697 25.246 11.0952L25.1044 11.52L24.7278 11.2368C23.8538 10.5952 22.877 10.1068 21.8393 9.79258L21.5561 9.71045L21.5816 9.42727C21.6143 9.03707 21.508 8.64787 21.2814 8.3285C20.8558 7.73103 20.1048 7.45928 19.3954 7.64603C19.2351 7.68852 19.0823 7.75538 18.9423 7.84426L11.554 12.5423C11.1892 12.7729 10.9375 13.1457 10.8602 13.5703C10.7854 14.0049 10.8873 14.4515 11.1434 14.8106C11.5644 15.413 12.3139 15.6925 13.0265 15.5129C13.1864 15.4693 13.3391 15.4025 13.4796 15.3147L16.3115 13.5193C16.7743 13.2224 17.2807 12.9998 17.8124 12.8595C20.1925 12.2396 22.7065 13.1715 24.1076 15.1929C24.9573 16.3809 25.2921 17.8612 25.0365 19.2991C24.7836 20.7107 23.9478 21.9505 22.7342 22.7143L15.3458 27.4209C14.8818 27.7155 14.3758 27.938 13.845 28.0807Z"
+		fill="white"
+	/>
+</svg>
diff --git a/frontend/src/lib/components/icons/VueIcon.svelte b/frontend/src/lib/components/icons/VueIcon.svelte
new file mode 100644
index 0000000000000..a04b3dd918057
--- /dev/null
+++ b/frontend/src/lib/components/icons/VueIcon.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
+	<path
+		d="M25.6 2.1875H32L16 29.7875L0 2.1875H6.32H12.24L16 8.5875L19.68 2.1875H25.6Z"
+		fill="#41B883"
+	/>
+	<path d="M0 2.1875L16 29.7875L32 2.1875H25.6L16 18.7475L6.32 2.1875H0Z" fill="#41B883" />
+	<path d="M6.32 2.1875L16 18.8275L25.6 2.1875H19.68L16 8.5875L12.24 2.1875H6.32Z" fill="#35495E" />
+</svg>
diff --git a/frontend/src/lib/components/raw_apps/FileEditorIcon.svelte b/frontend/src/lib/components/raw_apps/FileEditorIcon.svelte
new file mode 100644
index 0000000000000..f1419b32c73aa
--- /dev/null
+++ b/frontend/src/lib/components/raw_apps/FileEditorIcon.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import TypeScript from '../common/languageIcons/TypeScript.svelte'
+	import JavaScriptIcon from '../icons/JavaScriptIcon.svelte'
+	import JsonIcon from '../icons/JsonIcon.svelte'
+	import ReactIcon from '../icons/ReactIcon.svelte'
+	import SvelteIcon from '../icons/SvelteIcon.svelte'
+	import VueIcon from '../icons/VueIcon.svelte'
+
+	export let file: string
+</script>
+
+{#if file.endsWith('.tsx')}
+	<ReactIcon width="16px" height="16px" />
+{:else if file.endsWith('.json')}
+	<JsonIcon width="16px" height="16px" />
+{:else if file.endsWith('.ts')}
+	<TypeScript width={16} height={16} />
+{:else if file.endsWith('.js')}
+	<JavaScriptIcon width="16px" height="16px" />
+{:else if file.endsWith('.vue')}
+	<VueIcon width="16px" height="16px" />
+{:else if file.endsWith('.css')}
+	<span class="text-blue-600 ml-0.5" style="font-size: 16px;">#</span>
+{:else if file.endsWith('.svelte')}
+	<SvelteIcon width="16px" height="16px" />
+{/if}
diff --git a/frontend/src/lib/components/raw_apps/RawAppBackgroundRunner.svelte b/frontend/src/lib/components/raw_apps/RawAppBackgroundRunner.svelte
new file mode 100644
index 0000000000000..b992d6c99ad12
--- /dev/null
+++ b/frontend/src/lib/components/raw_apps/RawAppBackgroundRunner.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { executeRunnable } from '../apps/components/helpers/executeRunnable'
+	import { userStore } from '$lib/stores'
+	import { waitJob } from '../waitJob'
+	import type { HiddenRunnable, JobById } from '../apps/types'
+	import { JobService } from '$lib/gen'
+
+	export let iframe: HTMLIFrameElement | undefined
+	export let path: string
+	export let runnables: Record<string, HiddenRunnable>
+	export let jobs: string[] = []
+	export let jobsById: Record<string, JobById> = {}
+	export let editor: boolean
+	export let workspace: string
+
+	let listener = async (event) => {
+		// if (event.origin !== "https://codesandbox.io") return;
+		const data = event.data
+		function respond(o: object) {
+			iframe?.contentWindow?.postMessage({ type: data.type, ...o, reqId: data.reqId }, '*')
+		}
+		async function respondWithResult(uuid: string) {
+			let error = false
+			let result
+			try {
+				result = await waitJob(uuid)
+			} catch (e) {
+				error = true
+				console.log('e', e)
+				result = e
+			}
+
+			if (event.data.type == 'runBg') {
+				respond({ result, error })
+			}
+			return result
+		}
+		if (event.data.type == 'runBg' || event.data.type == 'runBgAsync') {
+			console.log('runBg callback', data)
+			const runnable_id = data.runnable_id
+			let runnable = runnables[runnable_id]
+			if (runnable) {
+				const uuid = await executeRunnable(
+					runnable,
+					workspace,
+					undefined,
+					$userStore?.username,
+					path,
+					runnable_id,
+					{
+						component: runnable_id,
+						args: data.v,
+						force_viewer_allow_user_resources: [],
+						force_viewer_one_of_fields: {},
+						force_viewer_static_fields: {}
+					},
+					undefined
+				)
+				let job: JobById = { component: runnable_id, created_at: Date.now(), job: uuid }
+				if (event.data.type == 'runBgAsync') {
+					let result = uuid
+					respond({ result })
+				}
+				if (editor) {
+					jobsById[uuid] = job
+					jobs = [...jobs, uuid]
+				}
+
+				const result = await respondWithResult(uuid)
+
+				if (editor) {
+					job.result = result
+				}
+			} else if (event.data.type == 'waitJob') {
+				await respondWithResult(data.jobId)
+			} else if (event.data.type == 'getJob') {
+				const job = JobService.getJob({ workspace, id: data.jobId })
+				respond({ result: job })
+			} else {
+				console.error('No runnable found for', runnable_id)
+			}
+		}
+	}
+</script>
+
+<svelte:window on:message={listener} />
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
index ecefe0be49eb6..9da3fa51bdef1 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { versionRangeToVersion } from '$lib/ata'
 	// import { animateTo } from '$lib/components/apps/editor/appUtils'
-	import { Button } from '$lib/components/common'
-	import CustomPopover from '$lib/components/CustomPopover.svelte'
+
 	import Editor from '$lib/components/Editor.svelte'
 	import { extToLang } from '$lib/editorUtils'
 	// import {
@@ -12,37 +11,169 @@
 	// } from '@codesandbox/sandpack-client'
 	import { SandpackRuntime } from '@codesandbox/sandpack-client/clients/runtime'
 
-	import { onMount } from 'svelte'
+	import { onDestroy, onMount } from 'svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import { writable, type Writable } from 'svelte/store'
+	import { writable } from 'svelte/store'
 	import RawAppInlineScriptsPanel from './RawAppInlineScriptsPanel.svelte'
-	import type { HiddenRunnable } from '../apps/types'
+	import type { HiddenRunnable, JobById } from '../apps/types'
 	import RawAppEditorHeader from './RawAppEditorHeader.svelte'
-	import type { Policy } from '$lib/gen'
+	import { type Policy, type Preview } from '$lib/gen'
+	import DiffDrawer from '../DiffDrawer.svelte'
+	import { capitalize, encodeState } from '$lib/utils'
+
+	import { schemaToTsType } from '$lib/schema'
+	import { addWmillClient } from './utils'
+	import RawAppBackgroundRunner from './RawAppBackgroundRunner.svelte'
+	import FileEditorIcon from './FileEditorIcon.svelte'
+	import { FilePlus, Pencil, TrashIcon } from 'lucide-svelte'
+	import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
+	import { workspaceStore } from '$lib/stores'
 
-	export let appPath: string
 	export let files: Record<string, { code: string }>
-	export let runnables: Writable<Record<string, HiddenRunnable>> = writable({})
+	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
+
+	export let diffDrawer: DiffDrawer | undefined = undefined
+	export let version: number | undefined = undefined
 
 	let editor: Editor | undefined = undefined
 
+	let runnables = writable(initRunnables)
+
+	const WMILL_TS = '/wmill.ts'
+
+	$: $runnables && files && saveFrontendDraft()
+
+	let draftTimeout: NodeJS.Timeout | undefined = undefined
+	function saveFrontendDraft() {
+		draftTimeout && clearTimeout(draftTimeout)
+		draftTimeout = setTimeout(() => {
+			try {
+				localStorage.setItem(
+					path != '' ? `rawapp-${path}` : 'rawapp',
+					encodeState({
+						files,
+						runnables: $runnables
+					})
+				)
+			} catch (err) {
+				console.error(err)
+			}
+		}, 500)
+	}
+
 	let iframe: HTMLIFrameElement | undefined = undefined
 
-	let activeFile = '/index.tsx'
+	let activeFile = defaultActiveFile(files)
+	console.log('activeFile', activeFile)
+
+	function defaultActiveFile(files: Record<string, any>) {
+		let fileKeys = Object.keys(files)
+		const dflt = ['/App.svelte', '/App.vue', '/App.tsx']
+		return fileKeys.find((x) => dflt.includes(x)) ?? fileKeys[0]
+	}
+
+	let jobs: string[] = []
+	let jobsById: Record<string, JobById> = {}
 
 	let client: SandpackRuntime | undefined = undefined
 	// let bundlerState: BundlerState | undefined = undefined
 	onMount(async () => {
+		setSandpack()
+	})
+
+	function hiddenRunnableToTsType(runnable: HiddenRunnable) {
+		if (runnable.type == 'runnableByName') {
+			if (runnable.inlineScript?.schema) {
+				return schemaToTsType(runnable.inlineScript?.schema)
+			} else {
+				return '{}'
+			}
+		}
+	}
+
+	function genWmillTs(runnables: Record<string, HiddenRunnable>) {
+		return `// THIS FILE IS READ-ONLY
+// AND GENERATED AUTOMATICALLY FROM YOUR RUNNABLES
+		
+${Object.entries(runnables)
+	.map(([k, v]) => `export type RunBg${capitalize(k)} = ${hiddenRunnableToTsType(v)}\n`)
+
+	.join('\n')}
+
+export const runBg = {
+	${Object.keys(runnables)
+		.map((k) => `${k}: (data: RunBg${capitalize(k)}) => Promise<any>`)
+		.join(',\n')}
+}
+		
+export const runBgAsync = {
+	${Object.keys(runnables)
+		.map((k) => `${k}: (data: RunBg${capitalize(k)}) => Promise<string>`)
+		.join(',\n')}
+}
+		
+
+export type Job = {
+	type: 'QueuedJob' | 'CompletedJob'
+	id: string
+	created_at: number
+	started_at: number | undefined
+	duration_ms: number
+	success: boolean
+	args: any
+	result: any
+}
+
+/**
+ * Execute a job and wait for it to complete and return the completed job
+ * @param id
+ */
+export function waitJob(id: string): Promise<Job>
+
+/**
+ * Get a job by id and return immediately with the current state of the job
+ * @param id
+ */
+export function getJob(id: string): Promise<Job>
+`
+	}
+
+	function addWmillClientDts(
+		files: Record<string, { code: string; readonly?: boolean }>,
+		runnables: Record<string, HiddenRunnable>
+	) {
+		const code = genWmillTs(runnables)
+		return {
+			...files,
+			[WMILL_TS]: {
+				readonly: true,
+				code
+			}
+		}
+	}
+
+	function setSandpack() {
 		if (iframe) {
 			client = new SandpackRuntime(
 				iframe,
 				{
-					files,
+					files: addWmillClient(files),
 					entry: '/index.tsx',
 					dependencies: {
 						react: '18.3.1',
@@ -50,9 +181,11 @@
 					}
 				},
 				{
-					// bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev',
-					// bundlerURL: 'http://localhost:3001/',
-					// bundlerURL: 'https://sandpack-bundler.codesandbox.io',
+					// bundlerURL: 'https://pub-f18889636e7746afadfd4e1bcc73fac5.r2.dev/index.html',
+					// bundlerURL: '/sandpack/index.html',
+					// bundlerURL: 'http://localhost:3002/sandpack/index.html',
+
+					bundlerURL: window.origin.toString() + '/sandpack/index.html',
 					showOpenInCodeSandbox: false
 					// customNpmRegistries: [
 					// 	{
@@ -65,21 +198,13 @@
 				}
 			)
 			client.listen((msg) => {
-				if (msg.type == 'state') {
-					// bundlerState = msg.state
-					// const libs = Object.entries(bundlerState.transpiledModules)
-					// 	.filter(([name, mod]) => mod.module.path.startsWith('/node_modules'))
-					// 	.map(([name, mod]) => ({
-					// 		filePath: 'file://' + mod.module.path,
-					// 		content: mod.module.code
-					// 	}))
-					// console.log('libs', libs)
-					// editor?.setTypescriptExtraLibs(libs)
-				}
 				console.log('Message from sandbox', msg)
 			})
 		}
-		// code here
+	}
+
+	onDestroy(() => {
+		client?.destroy()
 	})
 
 	function getLangOfExt(path: string) {
@@ -97,7 +222,7 @@
 		let dependencies: Record<string, string> =
 			typeof pkg.dependencies == 'object' ? pkg?.dependencies : {}
 		client?.updateSandbox({
-			files,
+			files: addWmillClient(files),
 			dependencies
 		})
 		const ataDeps = Object.entries(dependencies).map(([name, version]) => ({
@@ -106,38 +231,55 @@
 			version: versionRangeToVersion(version)
 		}))
 		editor?.fetchPackageDeps(ataDeps)
-		console.log(ataDeps)
 	}
 
 	function onContentChange() {
+		console.log('content change', activeFile)
 		if (activeFile == '/package.json') {
 			onPackageJsonChange()
 			return
 		}
+		updateSandbox()
+	}
+
+	function updateSandbox() {
+		console.log('updating sandbox')
+
 		client?.updateSandbox({
-			files
+			files: addWmillClient(files)
 		})
 	}
-
 	function onActiveFileChange() {
-		editor?.switchToFile(
-			activeFile,
-			files[activeFile].code,
-			extToLang(activeFile.split('.').pop()!)
-		)
+		console.log('active file change', activeFile)
+		if (activeFile != WMILL_TS) {
+			editor?.switchToFile(
+				activeFile,
+				files[activeFile].code,
+				extToLang(activeFile.split('.').pop()!)
+			)
+		}
 	}
 
 	let timeout: NodeJS.Timeout | undefined = undefined
-	let nameInput
 	let name = ''
+	let creatingNewFile = false
 
 	$: activeFile && onActiveFileChange()
 
 	function createNewFile(newFileName: string) {
 		newFileName = '/' + newFileName
-		console.log('bar', newFileName)
 		files = { ...files, [newFileName]: { code: '' } }
 		activeFile = newFileName
+		creatingNewFile = false
+	}
+
+	function editFile(newFileName: string) {
+		newFileName = '/' + newFileName
+		files[newFileName] = files[activeFile]
+		delete files[activeFile]
+		activeFile = newFileName
+		editingFile = undefined
+		updateSandbox()
 	}
 
 	let appPanelSize = 70
@@ -147,73 +289,194 @@
 	}
 
 	let selectedRunnable: string | undefined = undefined
+	let deletingFile: string | undefined = undefined
+	let editingFile: string | undefined
+
+	function extToScriptLang(ext: string) {
+		if (ext == 'ts' || ext == 'tsx') return 'tsx'
+		if (ext == 'js' || ext == 'jsx') return 'jsx'
+		return ext as Preview['language'] | 'json'
+	}
 </script>
 
-<div class="h-screen">
+<ConfirmationModal
+	open={deletingFile != undefined}
+	on:confirmed={() => {
+		if (deletingFile) {
+			delete files[deletingFile]
+			files = files
+			activeFile = Object.keys(files)[0]
+			updateSandbox()
+		}
+		deletingFile = undefined
+	}}
+	on:canceled={() => (deletingFile = undefined)}
+	title="Delete File {deletingFile}"
+	confirmationText="Delete"
+>
+	Once deleted, the file will not be recoverable
+</ConfirmationModal>
+
+<RawAppBackgroundRunner
+	workspace={$workspaceStore ?? ''}
+	editor
+	{iframe}
+	bind:jobs
+	bind:jobsById
+	runnables={$runnables}
+	{path}
+/>
+<div class="h-full flex flex-col">
 	<RawAppEditorHeader
+		bind:jobs
+		bind:jobsById
+		bind:savedApp
 		bind:summary
-		policy={{}}
-		diffDrawer={undefined}
+		on:restore
+		on:savedNewAppPath
+		{policy}
+		{diffDrawer}
 		{newApp}
 		{newPath}
-		appPath={''}
+		appPath={path}
+		{files}
 		{runnables}
 	/>
-	<Splitpanes id="o2" horizontal class="!overflow-visible">
-		<Pane bind:size={appPanelSize} class="ovisible">
-			<div class="flex">
-				<div class="flex text-xs max-w-32 flex-col gap-2 py-0.5 text-secondary">
-					<CustomPopover class="text-left ml-1" appearTimeout={0} focusEl={nameInput}>
-						<button class="text-left hover:text-primary">+new</button>
-						<svelte:fragment slot="overlay">
-							<div class="flex flex-row gap-2 min-w-72">
-								<input
-									type="text"
-									placeholder="New file name"
-									bind:value={name}
-									bind:this={nameInput}
-									on:keydown={(e) => {
-										if (e.key === 'Enter') {
-											createNewFile(name)
-										}
-									}}
-								/>
-								<Button size="xs" on:click={() => createNewFile(name)}>New</Button>
-							</div>
-						</svelte:fragment>
-					</CustomPopover>
-					{#each Object.keys(files) as file}
-						<button
-							class="hover:text-primary text-left truncate {activeFile == file
-								? 'font-bold text-primary'
-								: ''} hover:underline rounded px-1"
-							on:click={() => {
-								activeFile = file
-							}}>{file.substring(1)}</button
-						>
+	<Splitpanes id="o2" horizontal class="!overflow-visible grow">
+		<Pane bind:size={appPanelSize}>
+			<div class="flex h-full overflow-hidden">
+				<div class="flex text-xs max-w-36 min-w-32 flex-col text-secondary">
+					{#if creatingNewFile}
+						<!-- svelte-ignore a11y-autofocus -->
+						<input
+							autofocus
+							type="text"
+							class="py-0"
+							placeholder="file name"
+							bind:value={name}
+							on:keypress={(e) => {
+								if (e.key == 'Enter') {
+									createNewFile(name)
+								} else if (e.key == 'Escape') {
+									creatingNewFile = false
+								}
+							}}
+							on:blur={() => {
+								createNewFile(name)
+							}}
+						/>
+					{:else}
+						<div class="flex">
+							<button
+								title="New File"
+								class="hover:text-primary text-left grow hover:underline hover:bg-surface-hover pl-2 pr-1 py-1"
+								on:click={() => {
+									name = ''
+
+									creatingNewFile = true
+								}}><FilePlus size={16} /></button
+							>
+							<button
+								disabled={activeFile == undefined || activeFile == WMILL_TS}
+								title="Rename"
+								class="hover:text-primary rounded text-left hover:underline hover:bg-surface-hover py-1 px-1"
+								on:click={() => {
+									name = activeFile.substring(1)
+									editingFile = activeFile
+								}}><Pencil size={16} /></button
+							>
+							<button
+								disabled={activeFile == undefined || activeFile == WMILL_TS}
+								title="Delete"
+								class="hover:text-primary rounded text-left hover:underline hover:bg-surface-hover py-1 px-1"
+								on:click={() => {
+									deletingFile = activeFile
+								}}><TrashIcon size={16} /></button
+							>
+						</div>
+					{/if}
+					{#each Object.keys(files).concat(WMILL_TS).sort() as file}
+						{#if editingFile == file}
+							<!-- svelte-ignore a11y-autofocus -->
+							<input
+								autofocus
+								type="text"
+								class="py-0"
+								placeholder="file name"
+								bind:value={name}
+								on:keypress={(e) => {
+									if (e.key == 'Enter') {
+										editFile(name)
+									} else if (e.key == 'Escape') {
+										editingFile = undefined
+									}
+								}}
+								on:blur={() => {
+									if (editingFile == '') {
+										editingFile = undefined
+									} else {
+										editFile(name)
+									}
+								}}
+							/>
+						{:else}
+							<button
+								title={file.substring(1)}
+								class="hover:text-primary inline-flex gap-1 text-left truncate {activeFile == file
+									? 'font-bold text-primary bg-surface-selected'
+									: ''} hover:underline hover:bg-surface-hover rounded pl-2 pr-1 py-1"
+								on:click={() => {
+									activeFile = file
+								}}
+							>
+								<span class="w-4 min-w-4"><FileEditorIcon {file} /></span>
+								<span class="truncate">{file.substring(1)}</span></button
+							>
+						{/if}
 					{/each}
 				</div>
-
 				<div class="w-full grid grid-cols-2">
-					<Editor
-						lang={getLangOfExt(activeFile)}
-						path={activeFile}
-						scriptLang="tsx"
-						bind:this={editor}
-						bind:code={files[activeFile].code}
-						{files}
-						on:ataReady={() => {
-							onPackageJsonChange()
-						}}
-						on:change={() => {
-							timeout && clearTimeout(timeout)
-							timeout = setTimeout(() => {
-								onContentChange()
-							}, 500)
-						}}
-					/>
-					<!-- svelte-ignore a11y-missing-attribute -->
-					<iframe class="min-h-screen w-full" bind:this={iframe} />
+					{#if activeFile == WMILL_TS}
+						<Editor
+							lang={getLangOfExt(activeFile)}
+							path={activeFile}
+							scriptLang="tsx"
+							bind:this={editor}
+							code={genWmillTs($runnables)}
+							{files}
+						/>
+					{:else}
+						<Editor
+							lang={getLangOfExt(activeFile)}
+							path={activeFile}
+							scriptLang={extToScriptLang(activeFile.split('.').pop() ?? 'tsx')}
+							bind:this={editor}
+							bind:code={files[activeFile].code}
+							files={addWmillClientDts(files, $runnables)}
+							on:ataReady={() => {
+								onPackageJsonChange()
+							}}
+							on:change={() => {
+								console.log('bar')
+								timeout && clearTimeout(timeout)
+								timeout = setTimeout(() => {
+									onContentChange()
+								}, 500)
+							}}
+						/>
+					{/if}
+					<div class="h-full w-full relative">
+						<button
+							class="absolute top-0 right-0 z-50"
+							on:click={() => {
+								// client?.updateOptions({})
+								client?.destroy()
+								setSandpack()
+							}}>reload</button
+						>
+						<!-- svelte-ignore a11y-missing-attribute -->
+						<iframe class="min-h-screen w-full bg-white" bind:this={iframe} />
+					</div>
 				</div>
 			</div>
 		</Pane>
@@ -221,7 +484,7 @@
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div class="flex h-full w-full overflow-x-visible">
 				<RawAppInlineScriptsPanel
-					{appPath}
+					appPath={path}
 					bind:selectedRunnable
 					{runnables}
 					on:hidePanel={() => hideBottomPanel(true)}
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
index e63396f137c0d..25c0920a77120 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
@@ -45,6 +45,8 @@
 	import ClipboardPanel from '$lib/components/details/ClipboardPanel.svelte'
 	import type { HiddenRunnable } from '../apps/types'
 	import type { Writable } from 'svelte/store'
+	import AppJobsDrawer from '../apps/editor/AppJobsDrawer.svelte'
+	import { addWmillClient } from './utils'
 
 	// async function hash(message) {
 	// 	try {
@@ -84,10 +86,14 @@
 	export let newPath: string = ''
 	export let appPath: string
 	export let runnables: Writable<Record<string, HiddenRunnable>>
-
-	$: app = { runnables: $runnables }
+	export let files: Record<string, { code: string }>
+	export let jobs: string[]
+	export let jobsById: Record<string, any>
 
 	let newEditedPath = ''
+
+	$: app = { runnables: $runnables, files: addWmillClient(files) }
+
 	let deployedValue: Value | undefined = undefined // Value to diff against
 	let deployedBy: string | undefined = undefined // Author
 	let confirmCallback: () => void = () => {} // What happens when user clicks `override` in warning
@@ -168,6 +174,7 @@
 		// const ntriggerables: Record<string, TriggerableV2> = Object.fromEntries(
 		// 	allTriggers.filter(Boolean) as [string, TriggerableV2][]
 		// )
+
 		policy.triggerables_v2 = {}
 	}
 
@@ -219,7 +226,8 @@
 					summary: summary,
 					policy,
 					deployment_message: deploymentMsg,
-					custom_path: customPath
+					custom_path: customPath,
+					raw_app: true
 				}
 			})
 			savedApp = {
@@ -232,7 +240,7 @@
 			closeSaveDrawer()
 			sendUserToast('App deployed successfully')
 			try {
-				localStorage.removeItem(`app-${path}`)
+				localStorage.removeItem(`rawapp-${path}`)
 			} catch (e) {
 				console.error('error interacting with local storage', e)
 			}
@@ -336,7 +344,7 @@
 		sendUserToast('App deployed successfully')
 		if (appPath !== npath) {
 			try {
-				localStorage.removeItem(`app-${appPath}`)
+				localStorage.removeItem(`rawapp-${appPath}`)
 			} catch (e) {
 				console.error('error interacting with local storage', e)
 			}
@@ -360,7 +368,7 @@
 		await AppService.updateApp({
 			workspace: $workspaceStore!,
 			path: appPath,
-			requestBody: { policy }
+			requestBody: { policy, raw_app: true }
 		})
 		if (policy.execution_mode == 'anonymous') {
 			sendUserToast('App require no login to be accessed')
@@ -385,7 +393,8 @@
 					summary: summary,
 					policy,
 					draft_only: true,
-					custom_path: customPath
+					custom_path: customPath,
+					raw_app: true
 				}
 			})
 			await DraftService.createDraft({
@@ -511,7 +520,7 @@
 
 			sendUserToast('Draft saved')
 			try {
-				localStorage.removeItem(`app-${path}`)
+				localStorage.removeItem(`rawapp-${path}`)
 			} catch (e) {
 				console.error('error interacting with local storage', e)
 			}
@@ -657,6 +666,8 @@
 		}, 500)
 	}
 	$: customPath !== undefined && validateCustomPath(customPath)
+
+	let jobsDrawerOpen = false
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -691,7 +702,7 @@
 {#if appPath == ''}
 	<Drawer bind:open={draftDrawerOpen} size="800px">
 		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
-			<Alert title="Require path" type="info">
+			<Alert bgClass="mb-4" title="Require path" type="info">
 				Choose a path to save the initial draft of the app.
 			</Alert>
 			<h3>Summary</h3>
@@ -973,6 +984,20 @@
 	</DrawerContent>
 </Drawer>
 
+<AppJobsDrawer
+	bind:open={jobsDrawerOpen}
+	on:clear={() => {
+		jobs = []
+	}}
+	on:clearErrors={() => {
+		console.log('todo clear errors')
+	}}
+	{jobs}
+	hasErrors={false}
+	{jobsById}
+	errorByComponent={{}}
+/>
+
 <div
 	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible overflow-x-auto"
 >
@@ -1039,7 +1064,7 @@
 		<div class="hidden md:inline relative overflow-visible">
 			<Button
 				on:click={() => {
-					sendUserToast('TODO')
+					jobsDrawerOpen = true
 				}}
 				color="light"
 				size="xs"
@@ -1049,6 +1074,9 @@
 				<div class="flex flex-row gap-1 items-center">
 					<Bug size={14} />
 					<div>Debug runs</div>
+
+					<div class="text-2xs text-tertiary">({jobs?.length > 99 ? '99+' : jobs?.length ?? 0})</div
+					>
 				</div>
 			</Button>
 		</div>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScripRunnable.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScripRunnable.svelte
index 8aed69a4c50f6..992a7e2e7e505 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScripRunnable.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScripRunnable.svelte
@@ -32,7 +32,7 @@
 			noHistory
 			noSyncFromGithub
 			lang={runnable.inlineScript.language}
-			path={appPath + '/' + runnable.inlineScript.id}
+			path={appPath + '/' + id}
 			fixedOverflowWidgets={false}
 			bind:code={runnable.inlineScript.content}
 			bind:schema={runnable.inlineScript.schema}
diff --git a/frontend/src/lib/components/raw_apps/RawAppPreview.svelte b/frontend/src/lib/components/raw_apps/RawAppPreview.svelte
new file mode 100644
index 0000000000000..1ae8d53fb42ab
--- /dev/null
+++ b/frontend/src/lib/components/raw_apps/RawAppPreview.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { type UserExt } from '$lib/stores'
+	import type { HiddenRunnable } from '../apps/types'
+	import RawAppBackgroundRunner from './RawAppBackgroundRunner.svelte'
+	import { htmlContent } from './utils'
+
+	export let workspace: string
+	export let user: UserExt | undefined
+	export let version: number
+	export let path: string
+	export let runnables: Record<string, HiddenRunnable>
+
+	let iframe: HTMLIFrameElement
+</script>
+
+<RawAppBackgroundRunner {workspace} editor={false} {iframe} {runnables} {path} />
+
+<iframe
+	bind:this={iframe}
+	title="raw-app"
+	srcDoc={htmlContent(workspace, version)}
+	class="w-full h-full min-h-screen bg-white border-none"
+/>
diff --git a/frontend/src/lib/components/raw_apps/utils.ts b/frontend/src/lib/components/raw_apps/utils.ts
new file mode 100644
index 0000000000000..d58172d7864ad
--- /dev/null
+++ b/frontend/src/lib/components/raw_apps/utils.ts
@@ -0,0 +1,82 @@
+export type RawApp = {
+	files: string[]
+}
+
+export function addWmillClient(files: Record<string, { code: string }>) {
+	return {
+		...files,
+		'/wmill.ts': {
+			code: `
+let reqs = {}
+
+function doRequest(type: string, o: object) {
+	return new Promise((resolve, reject) => {
+		const reqId = Math.random().toString(36)
+		reqs[reqId] = { resolve, reject }
+		parent.postMessage({ ...o, type, reqId }, '*')
+	})
+}
+
+export const runBg = new Proxy(
+{},
+{
+	get(_, runnable_id: string) {
+		return (v: any) => {
+			return doRequest('runBg', { runnable_id, v })
+	}}
+})
+
+export const runBgAsync = new Proxy(
+{},
+{
+	get(_, runnable_id: string) {
+		return (v: any) => {
+			return doRequest('runBgAsync', { runnable_id, v })
+	}}
+})
+
+export function waitJob(jobId: string) {
+	return doRequest('waitJob', { jobId })
+}
+
+export function getJob(jobId: string) {
+	return doRequest('getJob', { jobId })
+}
+
+
+window.addEventListener('message', (e) => {
+	if (e.data.type == 'runBg' || e.data.type == 'runBgAsync') {
+		console.log('Message from parent runBg', e.data)
+		let job = reqs[e.data.reqId]
+		if (job) {
+			const result = e.data.result
+			if (e.data.error) {
+				job.reject(new Error(result.stack ?? result.message))
+			} else {
+				job.resolve(result)
+			}
+		} else {
+			console.error('No job found for', e.data.reqId)
+		}
+	}
+})`
+		}
+	}
+}
+
+export function htmlContent(workspace: string, version: number) {
+	return `
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <meta charset="UTF-8" />
+                <title>App Preview</title>
+                <link rel="stylesheet" href="/api/w/${workspace}/apps/get_data/v/${version}/index.css" />
+            </head>
+            <body>
+                <div id="root"></div>
+                <script src="/api/w/${workspace}/apps/get_data/v/${version}/index.js"></script>
+            </body>
+        </html>
+    `
+}
diff --git a/frontend/src/lib/editorUtils.ts b/frontend/src/lib/editorUtils.ts
index 8880dbb775b57..f897388b384b0 100644
--- a/frontend/src/lib/editorUtils.ts
+++ b/frontend/src/lib/editorUtils.ts
@@ -49,7 +49,9 @@ export function langToExt(lang: string): string {
 		case 'tsx':
 			return 'tsx'
 		case 'javascript':
-			return 'ts'
+			return 'js'
+		case 'jsx':
+			return 'js'
 		case 'bunnative':
 			return 'ts'
 		case 'json':
@@ -84,6 +86,8 @@ export function langToExt(lang: string): string {
 			return 'yml'
 		case 'csharp':
 			return 'cs'
+		case 'svelte':
+			return 'svelte'
 		default:
 			return 'unknown'
 	}
@@ -92,9 +96,13 @@ export function langToExt(lang: string): string {
 export function extToLang(ext: string) {
 	switch (ext) {
 		case 'tsx':
-			return 'tsx'
+			return 'typescript'
 		case 'ts':
 			return 'typescript'
+		case 'js':
+			return 'javascript'
+		case 'jsx':
+			return 'javascript'
 		case 'json':
 			return 'json'
 		case 'sql':
@@ -121,6 +129,8 @@ export function extToLang(ext: string) {
 			return 'ansible'
 		case 'cs':
 			return 'csharp'
+		case 'svelte':
+			return 'svelte'
 		default:
 			return 'unknown'
 	}
diff --git a/frontend/src/lib/scripts.ts b/frontend/src/lib/scripts.ts
index c940c9ae9bbd5..0f6f3202946c3 100644
--- a/frontend/src/lib/scripts.ts
+++ b/frontend/src/lib/scripts.ts
@@ -5,7 +5,16 @@ import { FlowService, type Script, ScriptService, ScheduleService } from './gen'
 import { workspaceStore } from './stores'
 
 export function scriptLangToEditorLang(
-	lang: Script['language'] | 'bunnative' | 'frontend' | 'tsx' | 'text' | 'json' | undefined
+	lang:
+		| Script['language']
+		| 'bunnative'
+		| 'javascript'
+		| 'frontend'
+		| 'jsx'
+		| 'tsx'
+		| 'text'
+		| 'json'
+		| undefined
 ) {
 	if (lang == 'deno') {
 		return 'typescript'
@@ -15,6 +24,8 @@ export function scriptLangToEditorLang(
 		return 'typescript'
 	} else if (lang == 'text') {
 		return 'text'
+	} else if (lang == 'javascript' || lang == 'jsx') {
+		return 'javascript'
 	} else if (lang == 'postgresql') {
 		return 'sql'
 	} else if (lang == 'mysql') {
diff --git a/frontend/src/lib/svelteMonarch.ts b/frontend/src/lib/svelteMonarch.ts
new file mode 100644
index 0000000000000..7fd438655c14d
--- /dev/null
+++ b/frontend/src/lib/svelteMonarch.ts
@@ -0,0 +1,313 @@
+// taken from node_modules/monaco-editor/dev/vs/basic-languages/html/html.js
+// modifications:
+// 1: replaced 'monaco_editor_core_1.' with '' (added import)
+// 2: replaced 'exports.' with 'export const '
+// 3: replaced 'text/javascript' with 'text/typescript'
+// 4: added basic moustache keywords
+
+import { languages } from 'monaco-editor'
+var EMPTY_ELEMENTS = [
+	'area',
+	'base',
+	'br',
+	'col',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'keygen',
+	'link',
+	'menuitem',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr'
+]
+export const conf = {
+	wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\$\^\&\*\(\)\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\s]+)/g,
+	comments: {
+		blockComment: ['<!--', '-->']
+	},
+
+	brackets: [
+		['<!--', '-->'],
+		['<', '>'],
+		['{', '}'],
+		['(', ')']
+	],
+	autoClosingPairs: [
+		{ open: '{', close: '}' },
+		{ open: '[', close: ']' },
+		{ open: '(', close: ')' },
+		{ open: '"', close: '"' },
+		{ open: "'", close: "'" }
+	],
+	surroundingPairs: [
+		{ open: '"', close: '"' },
+		{ open: "'", close: "'" },
+		{ open: '{', close: '}' },
+		{ open: '[', close: ']' },
+		{ open: '(', close: ')' },
+		{ open: '<', close: '>' }
+	],
+	onEnterRules: [
+		{
+			beforeText: new RegExp(
+				'<(?!(?:' + EMPTY_ELEMENTS.join('|') + '))([_:\\w][_:\\w-.\\d]*)([^/>]*(?!/)>)[^<]*$',
+				'i'
+			),
+			afterText: /^<\/([_:\w][_:\w-.\d]*)\s*>$/i,
+			action: {
+				indentAction: languages.IndentAction.IndentOutdent
+			}
+		},
+		{
+			beforeText: new RegExp(
+				'<(?!(?:' + EMPTY_ELEMENTS.join('|') + '))(\\w[\\w\\d]*)([^/>]*(?!/)>)[^<]*$',
+				'i'
+			),
+			action: { indentAction: languages.IndentAction.Indent }
+		}
+	],
+	folding: {
+		markers: {
+			start: new RegExp('^\\s*<!--\\s*#region\\b.*-->'),
+			end: new RegExp('^\\s*<!--\\s*#endregion\\b.*-->')
+		}
+	}
+}
+export const language = {
+	defaultToken: '',
+	tokenPostfix: '.html',
+	ignoreCase: true,
+
+	moustkeys: [
+		'#if',
+		'/if',
+		':else if',
+		':else',
+		'as',
+		'#each',
+		'/each',
+		'#await',
+		':then',
+		':catch',
+		'/await',
+		'#key',
+		'/key',
+		'@html',
+		'@debug'
+	],
+
+	// The main tokenizer for our languages
+	tokenizer: {
+		root: [
+			[/<!DOCTYPE/, 'metatag', '@doctype'],
+			[/<!--/, 'comment', '@comment'],
+			[/{/, 'delimiter', '@curly'],
+			[/(<)((?:[\w\-]+:)?[\w\-]+)(\s*)(\/>)/, ['delimiter', 'tag', '', 'delimiter']],
+			[/(<)(script)/, ['delimiter', { token: 'tag', next: '@script' }]],
+			[/(<)(style)/, ['delimiter', { token: 'tag', next: '@style' }]],
+			[/(<)((?:[\w\-]+:)?[\w\-]+)/, ['delimiter', { token: 'tag', next: '@otherTag' }]],
+			[/(<\/)((?:[\w\-]+:)?[\w\-]+)/, ['delimiter', { token: 'tag', next: '@otherTag' }]],
+			[/</, 'delimiter'],
+			[/[^<{]+/] // text
+		],
+		doctype: [
+			[/[^>]+/, 'metatag.content'],
+			[/>/, 'metatag', '@pop']
+		],
+		comment: [
+			[/-->/, 'comment', '@pop'],
+			[/[^-]+/, 'comment.content'],
+			[/./, 'comment.content']
+		],
+		curly: [
+			[/[ \t\r\n]+/],
+			[/{/, 'delimiter', '@push'],
+			[
+				/[^}\s]+/,
+				{
+					cases: {
+						'@moustkeys': 'keyword',
+						'@default': 'tag'
+					}
+				}
+			],
+			[/}/, 'delimiter', '@pop']
+		],
+		otherTag: [
+			[/\/?>/, 'delimiter', '@pop'],
+			[/"([^"]*)"/, 'attribute.value'],
+			[/'([^']*)'/, 'attribute.value'],
+			[/[\w\-]+/, 'attribute.name'],
+			[/=/, 'delimiter'],
+			[/[ \t\r\n]+/] // whitespace
+		],
+		// -- BEGIN <script> tags handling
+		// After <script
+		script: [
+			[/type/, 'attribute.name', '@scriptAfterType'],
+			[/"([^"]*)"/, 'attribute.value'],
+			[/'([^']*)'/, 'attribute.value'],
+			[/[\w\-]+/, 'attribute.name'],
+			[/=/, 'delimiter'],
+			[
+				/>/,
+				{
+					token: 'delimiter',
+					next: '@scriptEmbedded',
+					nextEmbedded: 'text/typescript'
+				}
+			],
+			[/[ \t\r\n]+/],
+			[/(<\/)(script\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]]
+		],
+		// After <script ... type
+		scriptAfterType: [
+			[/=/, 'delimiter', '@scriptAfterTypeEquals'],
+			[
+				/>/,
+				{
+					token: 'delimiter',
+					next: '@scriptEmbedded',
+					nextEmbedded: 'text/typescript'
+				}
+			],
+			[/[ \t\r\n]+/],
+			[/<\/script\s*>/, { token: '@rematch', next: '@pop' }]
+		],
+		// After <script ... type =
+		scriptAfterTypeEquals: [
+			[
+				/"([^"]*)"/,
+				{
+					token: 'attribute.value',
+					switchTo: '@scriptWithCustomType.$1'
+				}
+			],
+			[
+				/'([^']*)'/,
+				{
+					token: 'attribute.value',
+					switchTo: '@scriptWithCustomType.$1'
+				}
+			],
+			[
+				/>/,
+				{
+					token: 'delimiter',
+					next: '@scriptEmbedded',
+					nextEmbedded: 'text/typescript'
+				}
+			],
+			[/[ \t\r\n]+/],
+			[/<\/script\s*>/, { token: '@rematch', next: '@pop' }]
+		],
+		// After <script ... type = $S2
+		scriptWithCustomType: [
+			[
+				/>/,
+				{
+					token: 'delimiter',
+					next: '@scriptEmbedded.$S2',
+					nextEmbedded: '$S2'
+				}
+			],
+			[/"([^"]*)"/, 'attribute.value'],
+			[/'([^']*)'/, 'attribute.value'],
+			[/[\w\-]+/, 'attribute.name'],
+			[/=/, 'delimiter'],
+			[/[ \t\r\n]+/],
+			[/<\/script\s*>/, { token: '@rematch', next: '@pop' }]
+		],
+		scriptEmbedded: [
+			[/<\/script/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+			[/[^<]+/, '']
+		],
+		// -- END <script> tags handling
+		// -- BEGIN <style> tags handling
+		// After <style
+		style: [
+			[/type/, 'attribute.name', '@styleAfterType'],
+			[/"([^"]*)"/, 'attribute.value'],
+			[/'([^']*)'/, 'attribute.value'],
+			[/[\w\-]+/, 'attribute.name'],
+			[/=/, 'delimiter'],
+			[
+				/>/,
+				{
+					token: 'delimiter',
+					next: '@styleEmbedded',
+					nextEmbedded: 'text/css'
+				}
+			],
+			[/[ \t\r\n]+/],
+			[/(<\/)(style\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]]
+		],
+		// After <style ... type
+		styleAfterType: [
+			[/=/, 'delimiter', '@styleAfterTypeEquals'],
+			[
+				/>/,
+				{
+					token: 'delimiter',
+					next: '@styleEmbedded',
+					nextEmbedded: 'text/css'
+				}
+			],
+			[/[ \t\r\n]+/],
+			[/<\/style\s*>/, { token: '@rematch', next: '@pop' }]
+		],
+		// After <style ... type =
+		styleAfterTypeEquals: [
+			[
+				/"([^"]*)"/,
+				{
+					token: 'attribute.value',
+					switchTo: '@styleWithCustomType.$1'
+				}
+			],
+			[
+				/'([^']*)'/,
+				{
+					token: 'attribute.value',
+					switchTo: '@styleWithCustomType.$1'
+				}
+			],
+			[
+				/>/,
+				{
+					token: 'delimiter',
+					next: '@styleEmbedded',
+					nextEmbedded: 'text/css'
+				}
+			],
+			[/[ \t\r\n]+/],
+			[/<\/style\s*>/, { token: '@rematch', next: '@pop' }]
+		],
+		// After <style ... type = $S2
+		styleWithCustomType: [
+			[
+				/>/,
+				{
+					token: 'delimiter',
+					next: '@styleEmbedded.$S2',
+					nextEmbedded: '$S2'
+				}
+			],
+			[/"([^"]*)"/, 'attribute.value'],
+			[/'([^']*)'/, 'attribute.value'],
+			[/[\w\-]+/, 'attribute.name'],
+			[/=/, 'delimiter'],
+			[/[ \t\r\n]+/],
+			[/<\/style\s*>/, { token: '@rematch', next: '@pop' }]
+		],
+		styleEmbedded: [
+			[/<\/style/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+			[/[^<]+/, '']
+		]
+		// -- END <style> tags handling
+	}
+}
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index b82ddb35ce6f6..25ed461b73df6 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -29,9 +29,7 @@
 		defaultScripts,
 		hubBaseUrlStore,
 		usedTriggerKinds,
-
 		devopsRole
-
 	} from '$lib/stores'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { afterNavigate, beforeNavigate } from '$app/navigation'
@@ -289,7 +287,12 @@
 	setContext('openSearchWithPrefilledText', openSearchModal)
 
 	$: {
-		if ($enterpriseLicense && $workspaceStore && $userStore && ($devopsRole || $userStore.is_admin)) {
+		if (
+			$enterpriseLicense &&
+			$workspaceStore &&
+			$userStore &&
+			($devopsRole || $userStore.is_admin)
+		) {
 			mountModal = true
 			loadCriticalAlertsMuted()
 		}
diff --git a/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
index 4bd15beee284a..b039485e43b8d 100644
--- a/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
@@ -35,7 +35,8 @@
 		}
 	})
 	const initialState = nodraft ? undefined : localStorage.getItem(`app-${$page.params.path}`)
-	let stateLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
+	let stateLoadedFromLocalStorage =
+		initialState != undefined ? decodeState(initialState) : undefined
 
 	async function loadApp(): Promise<void> {
 		const app_w_draft = await AppService.getAppByPathWithDraft({
@@ -64,14 +65,14 @@
 			custom_path: app_w_draft_.custom_path
 		}
 
-		if (stateLoadedFromUrl) {
+		if (stateLoadedFromLocalStorage) {
 			const reloadAction = async () => {
-				stateLoadedFromUrl = undefined
+				stateLoadedFromLocalStorage = undefined
 				await loadApp()
 				redraw++
 			}
 			const actions: ToastAction[] = []
-			if (stateLoadedFromUrl) {
+			if (stateLoadedFromLocalStorage) {
 				actions.push({
 					label: 'Discard browser autosave and reload',
 					callback: reloadAction
@@ -80,7 +81,7 @@
 				const draftOrDeployed = cleanValueProperties(savedApp.draft || savedApp)
 				const urlScript = {
 					...draftOrDeployed,
-					value: stateLoadedFromUrl
+					value: stateLoadedFromLocalStorage
 				}
 				actions.push({
 					label: 'Show diff',
@@ -98,7 +99,7 @@
 			}
 
 			sendUserToast('App restored from browser storage', false, actions)
-			app_w_draft.value = stateLoadedFromUrl
+			app_w_draft.value = stateLoadedFromLocalStorage
 			app = app_w_draft
 		} else if (app_w_draft.draft) {
 			if (app_w_draft.summary !== undefined) {
@@ -116,7 +117,7 @@
 
 			if (!app_w_draft.draft_only) {
 				const reloadAction = () => {
-					stateLoadedFromUrl = undefined
+					stateLoadedFromLocalStorage = undefined
 					app = app_w_draft
 					redraw++
 				}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
index 7003a91a73f00..2654b2f408c4c 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
@@ -10,7 +10,10 @@
 	import { sendUserToast } from '$lib/toast'
 
 	import RawAppEditor from '$lib/components/raw_apps/RawAppEditor.svelte'
-	import { writable } from 'svelte/store'
+	import type { HiddenRunnable } from '$lib/components/apps/types'
+	import Modal from '$lib/components/common/modal/Modal.svelte'
+	import FileEditorIcon from '$lib/components/raw_apps/FileEditorIcon.svelte'
+	import { react18Template, react19Template, svelte5Template, vueTemplate } from './templates'
 
 	let nodraft = $page.url.searchParams.get('nodraft')
 	const templatePath = $page.url.searchParams.get('template')
@@ -21,42 +24,10 @@
 		$importStore = undefined
 	}
 
-	const state = nodraft ? undefined : localStorage.getItem('app')
+	const state = nodraft ? undefined : localStorage.getItem('rawapp')
 
 	let summary = ''
-	let files: Record<string, { code: string }> = {
-		'/index.tsx': {
-			code: `import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-const App = () => {
-  return <div style={{ width: "100%" }}><h1>Hello, Wooorldd!</h1>
-    <div style={{ width: "100%", height: "100%", background: "red" }}>BAR</div></div>;
-};
-
-const root = createRoot(document.getElementById('root')!);
-root.render(<App />);`
-		},
-		'/index.css': {
-			code: `
-body {
-	background: blue;
-}`
-		},
-		'/package.json': {
-			code: `{
-	"dependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
-	}
-}`
-		},
-		'/policy.json': {
-			code: 'foo'
-		}
-	}
-	let runnables = writable({})
-
+	let files: Record<string, { code: string }> = react19Template
 	afterNavigate(() => {
 		if (nodraft) {
 			let url = new URL($page.url.href)
@@ -72,11 +43,38 @@ body {
 		execution_mode: 'publisher'
 	}
 
+	let redraw = 0
+	let runnables: Record<string, HiddenRunnable> = {
+		a: {
+			name: 'a',
+			fields: {},
+			recomputeIds: [],
+			type: 'runnableByName',
+			inlineScript: {
+				content:
+					'// import * as wmill from "windmill-client"\n\nexport async function main(x: string) {\n  return x\n}\n',
+				language: 'bun',
+				schema: {
+					$schema: 'https://json-schema.org/draft/2020-12/schema',
+					properties: {
+						x: {
+							default: null,
+							description: '',
+							originalType: 'string',
+							type: 'string'
+						}
+					},
+					required: ['x'],
+					type: 'object'
+				}
+			}
+		}
+	}
 	loadApp()
 
 	function extractValue(value: any) {
 		files = value.files
-		runnables.set(value.runnables)
+		runnables = value.runnables
 	}
 	async function loadApp() {
 		if (importRaw) {
@@ -89,14 +87,17 @@ body {
 			} else {
 				extractValue(importRaw)
 			}
+			redraw = redraw + 1
+			console.log('importRaw', importRaw)
 		} else if (templatePath) {
 			const template = await AppService.getAppByPath({
 				workspace: $workspaceStore!,
 				path: templatePath
 			})
 			extractValue(template.value)
-
-			sendUserToast('App loaded from template')
+			redraw = redraw + 1
+			console.log('App loaded from template')
+			sendUserToast('App loaded from template path')
 			goto('?', { replaceState: true })
 		} else if (templateId) {
 			const template = await AppService.getAppByVersion({
@@ -104,21 +105,51 @@ body {
 				id: parseInt(templateId)
 			})
 			extractValue(template.value)
+			console.log('App loaded from template id')
 			sendUserToast('App loaded from template')
+			redraw = redraw + 1
 			goto('?', { replaceState: true })
 		} else if (!templatePath && state) {
+			console.log('App loaded from browser stored autosave')
 			sendUserToast('App restored from browser stored autosave', false, [
 				{
 					label: 'Start from blank',
 					callback: () => {
 						files = {}
-						runnables.set({})
+						runnables = {}
 					}
 				}
 			])
 			extractValue(decodeState(state))
+			redraw = redraw + 1
 		}
 	}
+
+	const templates = [
+		{
+			name: 'React 19',
+			icon: 'tsx',
+			files: undefined,
+			selected: true
+		},
+		{
+			name: 'React 18',
+			icon: 'tsx',
+			files: react18Template
+		},
+		{
+			name: 'Svelte 5',
+			icon: 'svelte',
+			files: svelte5Template
+		},
+		{
+			name: 'Vue 3',
+			icon: 'vue',
+			files: vueTemplate
+		}
+	]
+	let templatePicker = nodraft != null
+	let hide = false
 </script>
 
 <!-- <div class="h-screen">
@@ -138,12 +169,46 @@ body {
 			/>
 		{/key}
 	</div> -->
-<RawAppEditor
-	{files}
-	{runnables}
-	{policy}
-	path={''}
-	{summary}
-	newApp
-	appPath={`u/${$userStore?.username}/raw_app`}
-/>
+{#if templatePicker}
+	<Modal kind="X" open title="Templates">
+		<div class="flex flex-wrap gap-4 pb-4">
+			{#each templates as t}
+				<button
+					on:click={() => {
+						if (t.files) {
+							hide = true
+
+							files = t.files
+							redraw += 1
+							hide = false
+						}
+						templatePicker = false
+					}}
+					class="w-24 h-24 flex justify-between py-5 flex-col {t.selected
+						? 'bg-surface-selected'
+						: ''} hover:bg-surface-hover border rounded-lg"
+				>
+					<div class="w-full flex items-center justify-center">
+						<FileEditorIcon file={'.' + t.icon} />
+					</div>
+					<div class="center-center w-full">{t.name}</div>
+				</button>
+			{/each}
+		</div>
+	</Modal>
+{/if}
+{#if !hide}
+	{#key redraw}
+		<RawAppEditor
+			on:savedNewAppPath={(event) => {
+				goto(`/apps_raw/edit/${event.detail}`)
+			}}
+			{files}
+			initRunnables={runnables}
+			{policy}
+			path={''}
+			{summary}
+			newApp
+		/>
+	{/key}
+{/if}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/add/templates.ts b/frontend/src/routes/(root)/(logged)/apps_raw/add/templates.ts
new file mode 100644
index 0000000000000..7e1b00d79b196
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/add/templates.ts
@@ -0,0 +1,160 @@
+const reactIndex = `
+import { createRoot } from 'react-dom/client';
+import './App'
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
+`
+
+const appTsx = `import React from 'react';
+import { runBg } from './wmill.ts'
+
+const App = () => {
+    return <div style={{ width: "100%" }}>
+        <h1>Hello, Wooorldd!</h1>
+        <div style={{ width: "100%", height: "100%", background: "red" }}>BAR</div>
+    </div>;
+};
+
+async function m() {
+    await runBg.a({ x: 42 })
+}
+
+m()
+`
+
+const appSvelte = `<style>
+  h1 {
+    font-size: 1.5rem;
+  }
+</style>
+
+<main>
+  <h1>Hello {name}</h1>
+</main>
+
+<script>
+  let name = 'world';
+</script>`
+
+const indexSvelte = `
+import { mount } from 'svelte';
+import App from './App.svelte'
+import './index.css'
+
+const app = mount(App, { target: document.getElementById("root") });
+
+export default app;
+`
+
+const appVue = `<template>
+  <h1>Hello {{ msg }}</h1>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const msg = ref('world');
+</script>`
+
+const indexVue = `import { createApp } from 'vue'
+import App from './App.vue'
+import "./index.css";
+
+createApp(App).mount('#root')`
+
+const indexCss = `body {
+    background: blue;
+}`
+
+const policyJson = 'foo'
+
+export const react19Template = {
+	'/index.tsx': {
+		code: reactIndex
+	},
+	'/App.tsx': {
+		code: appTsx
+	},
+	'/index.css': {
+		code: indexCss
+	},
+	'/package.json': {
+		code: `{
+    "dependencies": {
+        "react": "19.0.0",
+        "react-dom": "19.0.0"
+    }
+}`
+	},
+	'/policy.json': {
+		code: policyJson
+	}
+}
+
+export const react18Template = {
+	'/index.tsx': {
+		code: reactIndex
+	},
+	'/App.tsx': {
+		code: appTsx
+	},
+	'/index.css': {
+		code: indexCss
+	},
+	'/package.json': {
+		code: `{
+    "dependencies": {
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+    }
+}`
+	},
+	'/policy.json': {
+		code: policyJson
+	}
+}
+
+export const svelte5Template = {
+	'/index.ts': {
+		code: indexSvelte
+	},
+	'/App.svelte': {
+		code: appSvelte
+	},
+	'/index.css': {
+		code: indexCss
+	},
+	'/package.json': {
+		code: `{
+    "dependencies": {
+        "svelte": "5.16.1"
+    }
+}`
+	},
+	'/policy.json': {
+		code: policyJson
+	}
+}
+
+export const vueTemplate = {
+	'/index.ts': {
+		code: indexVue
+	},
+	'/App.vue': {
+		code: appVue
+	},
+	'/index.css': {
+		code: indexCss
+	},
+	'/package.json': {
+		code: `{
+    "dependencies": {
+        "core-js": "3.26.1",
+        "vue": "3.2.45"
+    }
+}`
+	},
+	'/policy.json': {
+		code: policyJson
+	}
+}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.js b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.js
new file mode 100644
index 0000000000000..1ae579cdc7707
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.js
@@ -0,0 +1,5 @@
+export function load({ params }) {
+	return {
+		stuff: { title: `Edit App ${params.path}` }
+	}
+}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
new file mode 100644
index 0000000000000..df23e12c7a2bd
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
@@ -0,0 +1,226 @@
+<script lang="ts">
+	import { AppService, DraftService } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
+	import { page } from '$app/stores'
+	import { cleanValueProperties, decodeState, type Value } from '$lib/utils'
+	import { afterNavigate, replaceState } from '$app/navigation'
+	import { goto } from '$lib/navigation'
+	import { sendUserToast, type ToastAction } from '$lib/toast'
+	import DiffDrawer from '$lib/components/DiffDrawer.svelte'
+	import type { HiddenRunnable } from '$lib/components/apps/types'
+	import RawAppEditor from '$lib/components/raw_apps/RawAppEditor.svelte'
+
+	let files: Record<string, { code: string }> | undefined = undefined
+	let runnables = {}
+	let newPath = ''
+	let lastVersion = 0
+	let policy: any = {}
+	let summary = ''
+
+	let savedApp:
+		| {
+				value: {
+					files: Record<string, { code: string }>
+					runnables: Record<string, HiddenRunnable>
+				}
+				draft?: any
+				path: string
+				summary: string
+				policy: any
+				draft_only?: boolean
+				custom_path?: string
+		  }
+		| undefined = undefined
+	let redraw = 0
+	let path = $page.params.path
+
+	let nodraft = $page.url.searchParams.get('nodraft')
+
+	afterNavigate(() => {
+		if (nodraft) {
+			let url = new URL($page.url.href)
+			url.search = ''
+			replaceState(url.toString(), $page.state)
+		}
+	})
+
+	function extractRawApp(app: any) {
+		runnables = app.value.runnables
+		files = app.value.files
+		summary = app.summary
+		lastVersion = app.version
+		policy = app.policy
+		newPath = app.path
+	}
+
+	const initialState = nodraft ? undefined : localStorage.getItem(`rawapp-${$page.params.path}`)
+	let stateLoadedFromLocalStorage =
+		initialState != undefined ? decodeState(initialState) : undefined
+
+	async function loadApp(): Promise<void> {
+		const app_w_draft = await AppService.getAppByPathWithDraft({
+			path,
+			workspace: $workspaceStore!
+		})
+		const app_w_draft_ = structuredClone(app_w_draft)
+		savedApp = {
+			summary: app_w_draft_.summary,
+			value: app_w_draft_.value as any,
+			path: app_w_draft_.path,
+			policy: app_w_draft_.policy,
+			draft_only: app_w_draft_.draft_only,
+			draft: app_w_draft_.draft,
+			custom_path: app_w_draft_.custom_path
+		}
+
+		if (stateLoadedFromLocalStorage) {
+			const reloadAction = async () => {
+				stateLoadedFromLocalStorage = undefined
+				await loadApp()
+				redraw++
+			}
+			const actions: ToastAction[] = []
+			if (stateLoadedFromLocalStorage) {
+				actions.push({
+					label: 'Discard browser autosave and reload',
+					callback: reloadAction
+				})
+
+				const draftOrDeployed = cleanValueProperties(savedApp.draft || savedApp)
+				const urlScript = {
+					...draftOrDeployed,
+					value: stateLoadedFromLocalStorage
+				}
+				actions.push({
+					label: 'Show diff',
+					callback: async () => {
+						diffDrawer.openDrawer()
+						diffDrawer.setDiff({
+							mode: 'simple',
+							original: draftOrDeployed,
+							current: urlScript,
+							title: `${savedApp?.draft ? 'Latest saved draft' : 'Deployed'} <> Autosave`,
+							button: { text: 'Discard autosave', onClick: reloadAction }
+						})
+					}
+				})
+			}
+			sendUserToast('App restored from browser storage', false, actions)
+			app_w_draft.value = stateLoadedFromLocalStorage
+			files = app_w_draft.value.files as any
+			runnables = app_w_draft.value.runnables as any
+			redraw += 1
+		} else if (app_w_draft.draft) {
+			extractRawApp(app_w_draft.draft)
+
+			if (!app_w_draft.draft_only) {
+				const reloadAction = () => {
+					stateLoadedFromLocalStorage = undefined
+					extractRawApp(app_w_draft)
+					redraw++
+				}
+
+				const deployed = cleanValueProperties(app_w_draft as Value)
+				const draft = cleanValueProperties({ files, runnables })
+				sendUserToast('app loaded from latest saved draft', false, [
+					{
+						label: 'Discard draft and load from latest deployed version',
+						callback: reloadAction
+					},
+					{
+						label: 'Show diff',
+						callback: async () => {
+							diffDrawer.openDrawer()
+							diffDrawer.setDiff({
+								mode: 'simple',
+								original: deployed,
+								current: draft,
+								title: 'Deployed <> Draft',
+								button: { text: 'Discard draft', onClick: reloadAction }
+							})
+						}
+					}
+				])
+			}
+		} else {
+			extractRawApp(app_w_draft)
+		}
+	}
+
+	$: {
+		if ($workspaceStore) {
+			loadApp()
+		}
+	}
+
+	async function restoreDraft() {
+		if (!savedApp || !savedApp.draft) {
+			sendUserToast('Could not restore to draft', true)
+			return
+		}
+		diffDrawer.closeDrawer()
+		goto(`/apps/edit/${savedApp.draft.path}`)
+		await loadApp()
+		redraw++
+	}
+
+	async function restoreDeployed() {
+		if (!savedApp) {
+			sendUserToast('Could not restore to deployed', true)
+			return
+		}
+		diffDrawer.closeDrawer()
+		if (savedApp.draft) {
+			await DraftService.deleteDraft({
+				workspace: $workspaceStore!,
+				kind: 'app',
+				path: savedApp.path
+			})
+		}
+		goto(`/apps/edit/${savedApp.path}`)
+		await loadApp()
+		redraw++
+	}
+
+	let diffDrawer: DiffDrawer
+
+	function onRestore(ev: any) {
+		sendUserToast('App restored from previous deployment')
+		let prev = ev.detail
+		extractRawApp(prev)
+		savedApp = {
+			summary: prev.summary,
+			value: structuredClone(prev.value),
+			path: prev.path,
+			policy: structuredClone(policy),
+			custom_path: prev.custom_path
+		}
+		redraw++
+	}
+</script>
+
+<DiffDrawer bind:this={diffDrawer} {restoreDeployed} {restoreDraft} />
+
+{#if files}
+	{#key redraw}
+		<div class="h-screen">
+			<RawAppEditor
+				on:savedNewAppPath={(event) => {
+					goto(`/apps_raw/edit/${event.detail}`)
+					newPath = event.detail
+				}}
+				on:restore={onRestore}
+				{files}
+				initRunnables={runnables}
+				{summary}
+				{newPath}
+				path={$page.params.path}
+				{policy}
+				bind:savedApp
+				{diffDrawer}
+				version={lastVersion}
+				newApp={false}
+			/>
+		</div>
+	{/key}
+{/if}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.js b/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.js
new file mode 100644
index 0000000000000..5b680f2fd07df
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.js
@@ -0,0 +1,5 @@
+export function load({ params }) {
+	return {
+		stuff: { title: `App ${params.path}` }
+	}
+}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.svelte
new file mode 100644
index 0000000000000..ca4f2c1d8fb2f
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { base } from '$app/paths'
+	import { page } from '$app/stores'
+	import { Button, Skeleton } from '$lib/components/common'
+	import { AppService, type AppWithLastVersion } from '$lib/gen'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { canWrite } from '$lib/utils'
+	import { Pen } from 'lucide-svelte'
+	import RawAppPreview from '$lib/components/raw_apps/RawAppPreview.svelte'
+	import type { HiddenRunnable } from '$lib/components/apps/types'
+
+	const hideEditBtn = $page.url.searchParams.get('hideEditBtn') === 'true'
+
+	let app: AppWithLastVersion | undefined = undefined
+
+	async function loadApp() {
+		console.log('Loading app')
+		app = await AppService.getAppLiteByPath({
+			workspace: $workspaceStore!,
+			path: $page.params.path
+		})
+	}
+
+	$: $workspaceStore && loadApp()
+
+	$: can_write = canWrite($page.params.path, app?.extra_perms ?? {}, $userStore)
+	function getRunnables(app: AppWithLastVersion) {
+		return (app?.value?.runnables ?? {}) as Record<string, HiddenRunnable>
+	}
+</script>
+
+<div class="h-full min-h-[600px] w-full relative p-2bg-white">
+	{#if !$workspaceStore || !$userStore || !app}
+		<Skeleton layout={[10]} />
+	{:else}
+		<RawAppPreview
+			path={$page.params.path}
+			workspace={$workspaceStore}
+			user={$userStore}
+			runnables={getRunnables(app)}
+			version={app?.versions[app?.versions.length - 1]}
+		/>
+	{/if}
+	{#if can_write && !hideEditBtn}
+		<div id="app-edit-btn" class="absolute bottom-4 z-50 right-4">
+			<Button
+				size="sm"
+				startIcon={{ icon: Pen }}
+				variant="border"
+				btnClasses="bg-white"
+				href="{base}/apps_raw/edit/{$page.params.path}?nodraft=true">Edit</Button
+			>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.js b/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.js
new file mode 100644
index 0000000000000..42a8b514275be
--- /dev/null
+++ b/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.js
@@ -0,0 +1,5 @@
+export function load({ params }) {
+	return {
+		stuff: { title: `Public App` }
+	}
+}
diff --git a/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte b/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
new file mode 100644
index 0000000000000..59b32dcabae45
--- /dev/null
+++ b/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import RawAppPreview from '$lib/components/raw_apps/RawAppPreview.svelte'
+	import { userStore } from '$lib/stores'
+</script>
+
+<RawAppPreview
+	workspace={$page.params.workspace}
+	user={$userStore}
+	version={Number($page.params.version)}
+/>
diff --git a/frontend/static/sandpack b/frontend/static/sandpack
new file mode 120000
index 0000000000000..3ce8c6ba8561c
--- /dev/null
+++ b/frontend/static/sandpack
@@ -0,0 +1 @@
+../../../codesandbox-client/www
\ No newline at end of file