fix: show bg runnables currently running

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -68,7 +68,8 @@
 		initialized,
 		selectedComponent,
 		app,
-		connectingInput
+		connectingInput,
+		bgRuns
 	} = getContext<AppViewerContext>('AppViewerContext')
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const rowContext = getContext<ListContext>('RowWrapperContext')
@@ -108,6 +109,8 @@
 	let lazyStaticValues = computeStaticValues()
 	let currentStaticValues = lazyStaticValues
 
+	let isBg = id.startsWith('bg_')
+	$: isBg && updateBgRuns(loading)
 	$: fields && (currentStaticValues = computeStaticValues())
 	$: if (!deepEqual(currentStaticValues, lazyStaticValues)) {
 		lazyStaticValues = currentStaticValues
@@ -505,6 +508,14 @@
 	let lastJobId: string | undefined = undefined
 
 	let inputValues: Record<string, InputValue> = {}
+
+	function updateBgRuns(loading: boolean) {
+		if (loading) {
+			bgRuns.update((runs) => [...runs, id])
+		} else {
+			bgRuns.update((runs) => runs.filter((r) => r !== id))
+		}
+	}
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -130,6 +130,7 @@
 		selectedComponent,
 		mode,
 		connectingInput,
+		bgRuns: writable([]),
 		breakpoint,
 		runnableComponents: writable({}),
 		appPath: path,

frontend/src/lib/components/apps/editor/AppPreview.svelte

@@ -77,6 +77,7 @@
 		app: appStore,
 		summary: writable(summary),
 		selectedComponent,
+		bgRuns: writable([]),
 		mode,
 		connectingInput,
 		breakpoint,

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -17,6 +17,8 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { BG_PREFIX } from '../utils'
+	import { Loader2 } from 'lucide-svelte'
+	import Popover from '$lib/components/Popover.svelte'
 
 	export let policy: Policy
 
@@ -29,7 +31,8 @@
 		focusedGrid,
 		parentWidth,
 		breakpoint,
-		allIdsInPath
+		allIdsInPath,
+		bgRuns
 	} = getContext<AppViewerContext>('AppViewerContext')
 
 	const { history, scale, componentActive } = getContext<AppEditorContext>('AppEditorContext')
@@ -50,9 +53,29 @@
 			: 'z-50'} {$connectingInput?.opened ? '' : 'bg-surface'} px-4 py-1 items-center gap-4"
 	>
 		<h3 class="truncate">{$summary}</h3>
-		<div>
-			{#if !$connectingInput.opened}
-				<RecomputeAllComponents />
+		<div class="flex gap-2 items-center">
+			<div>
+				{#if !$connectingInput.opened}
+					<RecomputeAllComponents />
+				{/if}
+			</div>
+			{#if $bgRuns.length > 0}
+				<Popover notClickable>
+					<span class="!text-2xs text-tertiary inline-flex gap-1 items-center"
+						><Loader2 size={10} class="animate-spin" /> ({$bgRuns.length})
+					</span>
+					<span slot="text"
+						><div class="flex flex-col">
+							{#each $bgRuns as bgRun}
+								<div class="flex gap-2 items-center">
+									<div class="text-2xs text-tertiary">{bgRun}</div>
+								</div>
+							{/each}
+						</div></span
+					>
+				</Popover>
+			{:else}
+				<span class="w-9" />
 			{/if}
 		</div>
 		<div class="flex text-2xs gap-8 items-center">

frontend/src/lib/components/apps/types.ts

@@ -189,6 +189,7 @@ export type AppViewerContext = {
 	mode: Writable<EditorMode>
 	connectingInput: Writable<ConnectingInput>
 	breakpoint: Writable<EditorBreakpoint>
+	bgRuns: Writable<string[]>
 	runnableComponents: Writable<
 		Record<
 			string,