windmill-components 1.558.4 → 1.596.0

package/package/components/raw_apps/RawAppInlineScriptEditor.svelte

@@ -2,20 +2,22 @@
 const bubble = createBubbler();
 import Button from '../common/button/Button.svelte';
 import { createEventDispatcher, onMount } from 'svelte';
-import { Maximize2, Trash2 } from 'lucide-svelte';
-import { inferArgs } from '../../infer';
+import { Trash2 } from 'lucide-svelte';
+import { inferArgs, inferAssets } from '../../infer';
 import Editor from '../Editor.svelte';
 import { emptySchema } from '../../utils';
 import { scriptLangToEditorLang } from '../../scripts';
-import ScriptGen from '../copilot/ScriptGen.svelte';
 import DiffEditor from '../DiffEditor.svelte';
-import EditorSettings from '../EditorSettings.svelte';
-import InlineScriptEditorDrawer from '../apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
 import CacheTtlPopup from '../apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte';
 import RunButton from '../RunButton.svelte';
 import { computeFields } from '../apps/editor/inlineScriptsPanel/utils';
-let inlineScriptEditorDrawer = $state();
-let { inlineScript = $bindable(), name = $bindable(undefined), id, fields = $bindable({}), path, isLoading = false, onRun, onCancel, editor = $bindable(undefined) } = $props();
+import EditorBar from '../EditorBar.svelte';
+import { LanguageIcon } from '../common/languageIcons';
+import { resource } from 'runed';
+import { usePreparedAssetSqlQueries } from '../../infer.svelte';
+import AssetsDropdownButton from '../assets/AssetsDropdownButton.svelte';
+import { workspaceStore } from '../../stores';
+let { inlineScript = $bindable(), name = $bindable(undefined), id, fields = $bindable(undefined), path, isLoading = false, onRun, onCancel, editor = $bindable(undefined), lastDeployedCode } = $props();
 let diffEditor = $state();
 let validCode = $state(true);
 async function inferInlineScriptSchema(language, content, schema) {
@@ -29,41 +31,55 @@ async function inferInlineScriptSchema(language, content, schema) {
     }
     return schema;
 }
+let websocketAlive = $state({
+    pyright: false,
+    deno: false,
+    go: false,
+    ruff: false,
+    shellcheck: false
+});
+let diffMode = $state(false);
+function showDiffMode() {
+    const model = editor?.getModel();
+    if (model == undefined)
+        return;
+    diffMode = true;
+    diffEditor?.showWithModelAndOriginal(lastDeployedCode ?? '', model);
+    editor?.hide();
+}
+function hideDiffMode() {
+    diffMode = false;
+    diffEditor?.hide();
+    editor?.show();
+}
 onMount(async () => {
     if (inlineScript && !inlineScript.schema) {
-        if (inlineScript.language != 'frontend') {
-            inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
-        }
+        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
     }
     syncFields();
 });
 async function syncFields() {
     if (inlineScript) {
         const newSchema = inlineScript.schema ?? emptySchema();
-        fields = computeFields(newSchema, true, fields);
+        fields = computeFields(newSchema, true, fields ?? {});
     }
 }
 const dispatch = createEventDispatcher();
-let drawerIsOpen = $state(undefined);
+let width = $state(0);
+let inferAssetsRes = resource([() => inlineScript?.language, () => inlineScript?.content], async () => inlineScript && inferAssets(inlineScript.language, inlineScript.content));
+let preparedSqlQueries = usePreparedAssetSqlQueries(() => inferAssetsRes.current?.sql_queries, () => $workspaceStore);
+$effect(() => {
+    if (inlineScript && inferAssetsRes.current)
+        inlineScript.assets = inferAssetsRes.current?.assets;
+});
 </script>
 
 {#if inlineScript}
-	{#if inlineScript.language != 'frontend'}
-		<InlineScriptEditorDrawer
-			{id}
-			appPath={path}
-			bind:isOpen={drawerIsOpen}
-			{editor}
-			bind:this={inlineScriptEditorDrawer}
-			bind:inlineScript
-			on:createScriptFromInlineScript={() => {
-				dispatch('createScriptFromInlineScript')
-				drawerIsOpen = false
-			}}
-		/>
-	{/if}
-	<div class="h-full flex flex-col gap-1">
+	<div class="h-full flex flex-col gap-1" bind:clientWidth={width}>
 		<div class="flex justify-between w-full gap-2 px-2 pt-1 flex-row items-center">
+			<div class="mx-0.5">
+				<LanguageIcon lang={inlineScript.language} width={20} height={20} />
+			</div>
 			{#if name !== undefined}
 				<div class="flex flex-row gap-2 w-full items-center">
 					<input
@@ -71,69 +87,30 @@ let drawerIsOpen = $state(undefined);
 						bind:value={name}
 						placeholder="Inline script name"
 						class="!text-xs !rounded-sm !shadow-none"
-						onkeyup={() => {
-							// $app = $app
-							// if (stateId) {
-							// 	$stateId++
-							// }
-						}}
 					/>
-					<div
-						title={validCode ? 'Main function parsable' : 'Main function not parsable'}
-						class="rounded-full !w-2 !h-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
-					></div>
 				</div>
-			{/if}
-			<div class="flex w-full flex-row gap-1 items-center justify-end">
-				{#if inlineScript}
-					<CacheTtlPopup bind:cache_ttl={inlineScript.cache_ttl} />
-				{/if}
-				<ScriptGen
-					lang={inlineScript?.language}
-					{editor}
-					{diffEditor}
-					inlineScript
-					args={Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
-						acc[key] = obj.type === 'static' ? obj.value : undefined
-						return acc
-					}, {})}
-				/>
-				<EditorSettings />
-
 				<Button
-					title="Delete"
+					title="Clear script"
 					size="xs2"
 					color="light"
 					variant="contained"
-					aria-label="Delete"
+					aria-label="Clear script"
 					on:click={() => dispatch('delete')}
 					endIcon={{ icon: Trash2 }}
 					iconOnly
 				/>
-				{#if inlineScript.language != 'frontend'}
-					<Button
-						size="xs2"
-						color="light"
-						title="Full Editor"
-						variant="contained"
-						on:click={() => {
-							inlineScriptEditorDrawer?.openDrawer()
-						}}
-						endIcon={{ icon: Maximize2 }}
-						iconOnly
-					/>
+			{/if}
+			<div class="flex w-full flex-row gap-2 items-center justify-end">
+				{#if inlineScript}
+					<CacheTtlPopup bind:cache_ttl={inlineScript.cache_ttl} />
 				{/if}
 
 				<Button
-					variant="border"
+					variant="default"
 					size="xs2"
-					color="light"
 					on:click={async () => {
 						editor?.format()
 					}}
-					shortCut={{
-						key: 'S'
-					}}
 				>
 					Format
 				</Button>
@@ -141,51 +118,73 @@ let drawerIsOpen = $state(undefined);
 			</div>
 		</div>
 
-		<!-- {inlineScript.content} -->
+		<div class="shadow-sm px-1 border-b-1 border-gray-200 dark:border-gray-700">
+			<EditorBar
+				{validCode}
+				{editor}
+				lang={inlineScript.language}
+				{websocketAlive}
+				iconOnly={width < 950}
+				kind={'script'}
+				template={'script'}
+				on:showDiffMode={showDiffMode}
+				on:hideDiffMode={hideDiffMode}
+				{lastDeployedCode}
+				{diffMode}
+				openAiChat
+				moduleId={id}
+			/>
+		</div>
 
-		<div class="border-y h-full w-full">
-			{#if !drawerIsOpen && inlineScript.language != 'frontend'}
-				<Editor
-					path={path + '/' + id}
-					bind:this={editor}
-					small
-					class="flex flex-1 grow h-full"
-					scriptLang={inlineScript.language}
-					bind:code={inlineScript.content}
-					fixedOverflowWidgets={true}
-					cmdEnterAction={() => onRun()}
-					on:change={async (e) => {
-						if (inlineScript && inlineScript.language != 'frontend') {
-							if (inlineScript.lock != undefined) {
-								inlineScript.lock = undefined
-							}
-							const oldSchema = JSON.stringify(inlineScript.schema)
-							if (inlineScript.schema == undefined) {
-								inlineScript.schema = emptySchema()
-							}
-							await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
-							if (JSON.stringify(inlineScript.schema) != oldSchema) {
-								inlineScript = inlineScript
-								syncFields()
-							}
+		<div class="border-y h-full w-full relative">
+			<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
+				{#if inlineScript.assets?.length}
+					<AssetsDropdownButton assets={inlineScript.assets} />
+				{/if}
+			</div>
+			<Editor
+				path={path + '/' + id}
+				bind:this={editor}
+				class="flex flex-1 grow h-full"
+				scriptLang={inlineScript.language}
+				bind:code={inlineScript.content}
+				fixedOverflowWidgets={true}
+				cmdEnterAction={() => onRun()}
+				bind:websocketAlive
+				rawAppRunnableKey={id}
+				on:change={async (e) => {
+					if (inlineScript) {
+						if (inlineScript.lock != undefined) {
+							inlineScript.lock = undefined
 						}
-						// $app = $app
-					}}
-					args={Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
-						acc[key] = obj.type === 'static' ? obj.value : undefined
-						return acc
-					}, {})}
-				/>
+						const oldSchema = JSON.stringify(inlineScript.schema)
+						if (inlineScript.schema == undefined) {
+							inlineScript.schema = emptySchema()
+						}
+						await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
+						if (JSON.stringify(inlineScript.schema) != oldSchema) {
+							inlineScript = inlineScript
+							syncFields()
+						}
+					}
+					// $app = $app
+				}}
+				args={Object.entries(fields ?? {}).reduce((acc, [key, obj]) => {
+					acc[key] = obj.type === 'static' ? obj.value : undefined
+					return acc
+				}, {})}
+				preparedAssetsSqlQueries={preparedSqlQueries.current}
+			/>
 
-				<DiffEditor
-					open={false}
-					bind:this={diffEditor}
-					className="h-full"
-					automaticLayout
-					fixedOverflowWidgets
-					defaultLang={scriptLangToEditorLang(inlineScript?.language)}
-				/>
-			{/if}
+			<DiffEditor
+				open={false}
+				bind:this={diffEditor}
+				modifiedModel={editor?.getModel()}
+				className="h-full"
+				automaticLayout
+				fixedOverflowWidgets
+				defaultLang={scriptLangToEditorLang(inlineScript?.language)}
+			/>
 		</div>
 	</div>
 {/if}

package/package/components/raw_apps/RawAppInlineScriptEditor.svelte.d.ts

@@ -1,8 +1,10 @@
+import type { ScriptLang } from '../../gen';
 import Editor from '../Editor.svelte';
-import type { InlineScript } from '../apps/types';
-import type { AppInput } from '../apps/inputType';
+import type { AppInput, InlineScript } from '../apps/inputType';
 interface Props {
-    inlineScript: InlineScript | undefined;
+    inlineScript: (InlineScript & {
+        language: ScriptLang;
+    }) | undefined;
     name?: string | undefined;
     id: string;
     fields?: Record<string, AppInput>;
@@ -11,6 +13,7 @@ interface Props {
     onRun: () => Promise<void>;
     onCancel: () => Promise<void>;
     editor?: Editor | undefined;
+    lastDeployedCode?: string | undefined;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -26,7 +29,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const RawAppInlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
-    createScriptFromInlineScript: CustomEvent<any>;
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

package/package/components/raw_apps/RawAppInlineScriptPanelList.svelte

@@ -1,40 +1,38 @@
 <script lang="ts">import { Badge, Button } from '../common';
-import { Plus } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { Plus, AlertCircle, AlertTriangle } from 'lucide-svelte';
 import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
-import DocLink from '../apps/editor/settingsPanel/DocLink.svelte';
-import HideButton from '../apps/editor/settingsPanel/HideButton.svelte';
+import Popover from '../Popover.svelte';
 import { getNextId } from '../flows/idUtils';
+import { rawAppLintStore } from './lintStore';
 let { selectedRunnable = $bindable(), runnables } = $props();
+// Subscribe to lint store for reactive updates
+let lintSnapshot = $state(rawAppLintStore.getSnapshot());
+$effect(() => {
+    const unsubscribe = rawAppLintStore.subscribe((s) => {
+        lintSnapshot = s;
+    });
+    return unsubscribe;
+});
+const errorCount = $derived(Object.values(lintSnapshot.errors).reduce((acc, arr) => acc + arr.length, 0));
+const warningCount = $derived(Object.values(lintSnapshot.warnings).reduce((acc, arr) => acc + arr.length, 0));
 function createBackgroundScript() {
     const nid = getNextId(Object.keys(runnables ?? {}));
     const newScriptPath = `Backend Runnable ${nid}`;
     runnables[nid] = {
         name: newScriptPath,
         inlineScript: undefined,
-        type: 'runnableByName'
+        type: 'inline'
     };
     selectedRunnable = nid;
 }
-const dispatch = createEventDispatcher();
 </script>
 
-<PanelSection title="Backend Runnables" id="app-editor-runnable-panel">
+<PanelSection size="lg" fullHeight={false} title="backend" id="app-editor-runnable-panel">
 	{#snippet action()}
 		<div class="flex flex-row gap-1">
-			<HideButton
-				direction="bottom"
-				on:click={() => {
-					dispatch('hidePanel')
-				}}
-			/>
-			<DocLink
-				docLink="https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable"
-			/>
 			<Button
 				size="xs"
-				color="light"
-				variant="border"
+				variant="default"
 				btnClasses="!rounded-full !p-1"
 				title="Create a new background runnable"
 				aria-label="Create a new background runnable"
@@ -65,9 +63,76 @@ const dispatch = createEventDispatcher();
 						{/if}
 					{/each}
 				{:else}
-					<div class="text-xs text-tertiary">No backend runnable</div>
+					<div class="text-xs text-primary">No backend runnable</div>
 				{/if}
 			</div>
+
+			{#if errorCount > 0 || warningCount > 0}
+				<Popover notClickable placement="right">
+					<div
+						class="flex items-center gap-2 px-2 py-1.5 mt-2 rounded border text-xs
+						{errorCount > 0
+							? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
+							: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800'}"
+					>
+						{#if errorCount > 0}
+							<span class="flex items-center gap-1 text-red-600 dark:text-red-400">
+								<AlertCircle size={14} />
+								{errorCount} error{errorCount !== 1 ? 's' : ''}
+							</span>
+						{/if}
+						{#if warningCount > 0}
+							<span class="flex items-center gap-1 text-yellow-600 dark:text-yellow-400">
+								<AlertTriangle size={14} />
+								{warningCount} warning{warningCount !== 1 ? 's' : ''}
+							</span>
+						{/if}
+					</div>
+					{#snippet text()}
+						<div class="max-w-md max-h-80 overflow-auto text-xs">
+							{#if errorCount > 0}
+								<div class="mb-2">
+									<div class="font-semibold text-red-600 dark:text-red-400 mb-1">Errors</div>
+									{#each Object.entries(lintSnapshot.errors) as [key, errors]}
+										{#if errors.length > 0}
+											<div class="mb-1">
+												<span class="font-medium text-secondary">{key}:</span>
+												<ul class="ml-2 list-disc list-inside">
+													{#each errors as error}
+														<li class="text-tertiary">
+															Line {error.startLineNumber}: {error.message}
+														</li>
+													{/each}
+												</ul>
+											</div>
+										{/if}
+									{/each}
+								</div>
+							{/if}
+							{#if warningCount > 0}
+								<div>
+									<div class="font-semibold text-yellow-600 dark:text-yellow-400 mb-1">Warnings</div
+									>
+									{#each Object.entries(lintSnapshot.warnings) as [key, warnings]}
+										{#if warnings.length > 0}
+											<div class="mb-1">
+												<span class="font-medium text-secondary">{key}:</span>
+												<ul class="ml-2 list-disc list-inside">
+													{#each warnings as warning}
+														<li class="text-tertiary">
+															Line {warning.startLineNumber}: {warning.message}
+														</li>
+													{/each}
+												</ul>
+											</div>
+										{/if}
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/snippet}
+				</Popover>
+			{/if}
 		</div>
 	</div>
 </PanelSection>

package/package/components/raw_apps/RawAppInlineScriptPanelList.svelte.d.ts

@@ -3,23 +3,6 @@ interface Props {
     selectedRunnable: string | undefined;
     runnables: Record<string, Runnable>;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RawAppInlineScriptPanelList: $$__sveltets_2_IsomorphicComponent<Props, {
-    hidePanel: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "selectedRunnable">;
-type RawAppInlineScriptPanelList = InstanceType<typeof RawAppInlineScriptPanelList>;
+declare const RawAppInlineScriptPanelList: import("svelte").Component<Props, {}, "selectedRunnable">;
+type RawAppInlineScriptPanelList = ReturnType<typeof RawAppInlineScriptPanelList>;
 export default RawAppInlineScriptPanelList;

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import EmptyInlineScript from '../apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte';
 import InlineScriptRunnableByPath from '../apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte';
-import { createEventDispatcher, untrack } from 'svelte';
+import { isRunnableByName, isRunnableByPath } from '../apps/inputType';
+import { createEventDispatcher } from 'svelte';
 import RawAppInlineScriptEditor from './RawAppInlineScriptEditor.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import Tabs from '../common/tabs/Tabs.svelte';
@@ -28,10 +29,10 @@ function onPick(o) {
 let selectedTab = $state('inputs');
 let args = $state({});
 function getSchema(runnable) {
-    if (runnable?.type == 'runnableByPath') {
+    if (isRunnableByPath(runnable)) {
         return runnable.schema;
     }
-    else if (runnable?.type == 'runnableByName' && runnable.inlineScript) {
+    else if (isRunnableByName(runnable) && runnable.inlineScript) {
         return runnable.inlineScript.schema;
     }
     return {};
@@ -52,11 +53,11 @@ function onFieldsChange(fields) {
 }
 async function testPreview() {
     selectedTab = 'test';
-    if (runnable?.type == 'runnableByName' && runnable.inlineScript?.language != 'frontend') {
+    if (isRunnableByName(runnable)) {
         await jobLoader?.runPreview(appPath + '/' + id, runnable.inlineScript?.content ?? '', runnable.inlineScript?.language, args, undefined);
     }
-    else if (runnable?.type == 'runnableByPath') {
-        if (jobLoader && runnable?.type == 'runnableByPath') {
+    else if (isRunnableByPath(runnable)) {
+        if (jobLoader && isRunnableByPath(runnable)) {
             if (runnable.runType == 'flow') {
                 await jobLoader.runFlowByPath(runnable.path, args);
             }
@@ -67,9 +68,7 @@ async function testPreview() {
     }
 }
 $effect(() => {
-    ;
-    [runnable?.fields];
-    untrack(() => onFieldsChange(runnable?.fields ?? {}));
+    onFieldsChange(runnable?.fields ?? {});
 });
 </script>
 
@@ -80,32 +79,28 @@ $effect(() => {
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
 />
-{#if runnable?.type == 'runnableByPath' || (runnable?.type == 'runnableByName' && runnable.inlineScript)}
+
+{#if isRunnableByPath(runnable) || (isRunnableByName(runnable) && runnable.inlineScript)}
 	<Splitpanes>
 		<Pane size={55}>
-			{#if runnable?.type === 'runnableByName' && runnable.inlineScript}
-				{#if runnable.inlineScript.language == 'frontend'}
-					<div class="text-sm text-tertiary">Frontend scripts not supported for raw apps</div>
-				{:else}
-					<RawAppInlineScriptEditor
-						on:createScriptFromInlineScript={() =>
-							dispatch('createScriptFromInlineScript', runnable)}
-						{id}
-						bind:inlineScript={runnable.inlineScript}
-						bind:name={runnable.name}
-						bind:fields={runnable.fields}
-						isLoading={testIsLoading}
-						onRun={testPreview}
-						onCancel={async () => {
-							if (jobLoader) {
-								await jobLoader.cancelJob()
-							}
-						}}
-						on:delete
-						path={appPath}
-					/>
-				{/if}
-			{:else if runnable?.type == 'runnableByPath'}
+			{#if isRunnableByName(runnable)}
+				<RawAppInlineScriptEditor
+					on:createScriptFromInlineScript={() => dispatch('createScriptFromInlineScript', runnable)}
+					{id}
+					bind:inlineScript={runnable.inlineScript}
+					bind:name={runnable.name}
+					bind:fields={runnable.fields}
+					isLoading={testIsLoading}
+					onRun={testPreview}
+					onCancel={async () => {
+						if (jobLoader) {
+							await jobLoader.cancelJob()
+						}
+					}}
+					on:delete
+					path={appPath}
+				/>
+			{:else if isRunnableByPath(runnable)}
 				<InlineScriptRunnableByPath
 					rawApps
 					bind:runnable
@@ -125,8 +120,8 @@ $effect(() => {
 		</Pane>
 		<Pane size={45}>
 			<Tabs bind:selected={selectedTab}>
-				<Tab value="inputs">Inputs</Tab>
-				<Tab value="test">Test</Tab>
+				<Tab value="inputs" label="Inputs" />
+				<Tab value="test" label="Test" />
 				{#snippet content()}
 					{#if selectedTab == 'inputs'}
 						{#if runnable?.fields}
@@ -154,17 +149,17 @@ $effect(() => {
 								{/each}
 							</div>
 						{:else}
-							<div class="text-tertiary text-sm">No inputs</div>
+							<div class="text-primary text-xs">No inputs</div>
 						{/if}
 					{:else if selectedTab == 'test'}
 						<SplitPanesWrapper>
-							<Splitpanes class="grow">
+							<Splitpanes horizontal class="grow">
 								<Pane size={50}>
 									<div class="px-2 py-3 h-full overflow-auto">
 										<SchemaForm
 											on:keydownCmdEnter={testPreview}
 											disabledArgs={Object.entries(runnable?.fields ?? {})
-												.filter(([k, v]) => v.type == 'static')
+												.filter(([_, v]) => v.type == 'static')
 												.map(([k]) => k)}
 											schema={runnable ? getSchema(runnable) : {}}
 											bind:args
@@ -185,12 +180,13 @@ $effect(() => {
 	<EmptyInlineScript
 		unusedInlineScripts={[]}
 		rawApps
-		on:pick={(e) => onPick(e.detail)}
+		on:pick={(e) =>
+			onPick(e.detail as { runnable: Runnable; fields: Record<string, StaticAppInput> })}
 		on:delete
 		showScriptPicker
 		on:new={(e) => {
 			runnable = {
-				type: 'runnableByName',
+				type: 'inline',
 				inlineScript: e.detail,
 				name: runnable?.name ?? 'Background Runnable'
 			}

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte.d.ts

@@ -1,8 +1,16 @@
-import type { RunnableWithFields } from '../apps/inputType';
+import { type InlineScript, type RunnableWithFields } from '../apps/inputType';
+import type { ScriptLang } from '../../gen';
+type RunnableWithInlineScript = RunnableWithFields & {
+    inlineScript?: InlineScript & {
+        language: ScriptLang;
+    };
+};
+export type Runnable = RunnableWithInlineScript | undefined;
 interface Props {
-    runnable: RunnableWithFields | undefined;
+    runnable: Runnable;
     id: string;
     appPath: string;
+    lastDeployedCode?: string | undefined;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {