display little parsing status instead of error toast

frontend/src/lib/components/EditorBar.svelte

@@ -7,6 +7,7 @@
 	import { getScriptByPath, loadHubScripts, sendUserToast } from '$lib/utils'
 
 	import {
+		faCircle,
 		faCode,
 		faCube,
 		faDollarSign,
@@ -24,11 +25,14 @@
 	import HighlightCode from './HighlightCode.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import { Drawer } from './common'
+	import Icon from 'svelte-awesome'
+	import Popover from './Popover.svelte'
 
 	export let lang: 'python3' | 'deno' | 'go'
 	export let editor: Editor
 	export let websocketAlive: { pyright: boolean; black: boolean; deno: boolean; go: boolean }
 	export let iconOnly: boolean = false
+	export let validCode: boolean = true
 
 	let contextualVariablePicker: ItemPicker
 	let variablePicker: ItemPicker
@@ -207,6 +211,13 @@
 
 <div class="flex flex-row justify-between items-center overflow-hidden w-full">
 	<div class="flex flex-row divide-x items-center">
+		<div class="ml-2">
+			<span
+				class="relative inline-flex rounded-full h-2 w-2 {validCode
+					? 'bg-green-500/80'
+					: 'bg-red-500'}"
+			/>
+		</div>
 		<div>
 			<Button
 				color="light"
@@ -289,14 +300,20 @@
 			{/if}
 			<span class="ml-1">
 				{#if lang == 'deno'}
-					(<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-700'}>Deno</span>)
+					(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
 				{:else if lang == 'go'}
-					(<span class={websocketAlive.go ? 'text-green-600' : 'text-red-700'}>Go</span>)
+					(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
 				{:else if lang == 'python3'}
-					(<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-700'}>Pyright</span>
-					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)
+					(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
+					<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
 				{/if}
 			</span>
 		</Button>
 	</div>
 </div>
+
+<style>
+	span.green {
+		@apply text-green-600 animate-[pulse_5s_ease-in-out_infinite];
+	}
+</style>

frontend/src/lib/components/ScriptEditor.svelte

@@ -42,6 +42,7 @@
 	let testJob: Job | undefined
 	let pastPreviews: CompletedJob[] = []
 	let lastSave: string | null
+	let validCode = true
 
 	$: lastSave = localStorage.getItem(path ?? 'last_save')
 
@@ -73,7 +74,13 @@
 			}
 		})
 
-		await inferArgs(lang, code, schema)
+		try {
+			await inferArgs(lang, code, schema)
+			validCode = true
+		} catch (e) {
+			console.error("Couldn't infer args", e)
+			validCode = false
+		}
 
 		schema = schema
 
@@ -103,7 +110,13 @@
 
 <div class="border-b-2 shadow-sm p-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
-		<EditorBar iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD} {editor} {lang} {websocketAlive} />
+		<EditorBar
+			{validCode}
+			iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
+			{editor}
+			{lang}
+			{websocketAlive}
+		/>
 
 		<Button
 			target="_blank"

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -40,7 +40,7 @@
 	let wrapper: HTMLDivElement
 	let panes: HTMLElement
 	let totalTopGap = 0
-
+	let validCode = true
 	let width = 1200
 
 	let inputTransforms: Record<string, any> =
@@ -72,23 +72,27 @@
 	}
 
 	async function reload(flowModule: FlowModule) {
-		const { input_transforms, schema } = await loadSchemaFromModule(flowModule)
+		try {
+			const { input_transforms, schema } = await loadSchemaFromModule(flowModule)
+			validCode = true
+			setTimeout(() => {
+				if (
+					(flowModule.value.type == 'script' || flowModule.value.type == 'rawscript') &&
+					JSON.stringify(flowModule.value.input_transforms) !== JSON.stringify(input_transforms)
+				) {
+					inputTransforms = input_transforms
+				}
+			})
 
-		setTimeout(() => {
-			if (
-				(flowModule.value.type == 'script' || flowModule.value.type == 'rawscript') &&
-				JSON.stringify(flowModule.value.input_transforms) !== JSON.stringify(input_transforms)
-			) {
-				inputTransforms = input_transforms
-			}
-		})
-
-		if (JSON.stringify(schema) !== JSON.stringify($flowStateStore[flowModule.id]?.schema)) {
-			if (!$flowStateStore[flowModule.id]) {
-				$flowStateStore[flowModule.id] = { schema }
-			} else {
-				$flowStateStore[flowModule.id].schema = schema
+			if (JSON.stringify(schema) !== JSON.stringify($flowStateStore[flowModule.id]?.schema)) {
+				if (!$flowStateStore[flowModule.id]) {
+					$flowStateStore[flowModule.id] = { schema }
+				} else {
+					$flowStateStore[flowModule.id].schema = schema
+				}
 			}
+		} catch (e) {
+			validCode = false
 		}
 	}
 
@@ -133,6 +137,7 @@
 			{#if flowModule.value.type === 'rawscript'}
 				<div class="border-b-2 shadow-sm p-1 mb-1">
 					<EditorBar
+						{validCode}
 						{editor}
 						lang={flowModule.value['language'] ?? 'deno'}
 						{websocketAlive}