windmill-components 1.623.2 → 1.655.0

package/package/components/runs/JobRunsPreview.svelte

@@ -1,55 +1,77 @@
-<script lang="ts">import { base } from '../../base';
-import { ConcurrencyGroupsService } from '../../gen';
+<script lang="ts">import { ConcurrencyGroupsService } from '../../gen';
 import JobLoader from '../JobLoader.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import LogViewer from '../LogViewer.svelte';
-import { Badge, Button, Skeleton, Tab, Tabs } from '../common';
+import { Skeleton, Tab, Tabs } from '../common';
 import HighlightCode from '../HighlightCode.svelte';
-import { forLater } from '../../forLater';
-import FlowProgressBar from '../flows/FlowProgressBar.svelte';
 import FlowStatusViewer from '../FlowStatusViewer.svelte';
-import DurationMs from '../DurationMs.svelte';
 import { workspaceStore } from '../../stores';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
-import Popover from '../Popover.svelte';
-import { isFlowPreview, isScriptPreview, truncateRev } from '../../utils';
-import { createEventDispatcher, setContext, untrack } from 'svelte';
-import { Calendar, ListFilter, LoaderCircle } from 'lucide-svelte';
+import { isFlowPreview, isScriptPreview } from '../../utils';
+import { setContext, untrack, createEventDispatcher } from 'svelte';
+import { LoaderCircle } from 'lucide-svelte';
 import FlowAssetsHandler, { initFlowGraphAssetsCtx } from '../flows/FlowAssetsHandler.svelte';
 import JobAssetsViewer from '../assets/JobAssetsViewer.svelte';
-let { id, blankLink = false, workspace } = $props();
+import JobDetailHeader from './JobDetailHeader.svelte';
+import FlowExecutionStatus from './FlowExecutionStatus.svelte';
+let { id, workspace } = $props();
+const dispatch = createEventDispatcher();
 let job = $state(undefined);
-let result = $state();
-function onDone(job) {
-    result = job['result'];
-}
 let currentJob = $state(undefined);
+let loadError = $state(undefined);
+let isLoadingJobDetails = $state(false);
 let lastJobId = $state(undefined);
 let concurrencyKey = $state(undefined);
 async function getConcurrencyKey(job) {
     lastJobId = job.id;
     concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id });
 }
-let viewTab = $state('result');
+let viewTab = $state('logs');
 setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => job?.raw_flow?.modules ?? [] }));
 function asWorkflowStatus(x) {
-    return x;
+    if (!x || typeof x !== 'object')
+        return {};
+    const result = {};
+    for (const [k, v] of Object.entries(x)) {
+        if (!k.startsWith('_'))
+            result[k] = v;
+    }
+    return result;
+}
+function handleFilterByConcurrencyKey(key) {
+    dispatch('filterByConcurrencyKey', key);
+}
+function handleFilterByWorker(worker) {
+    dispatch('filterByWorker', worker);
 }
-const dispatch = createEventDispatcher();
 $effect(() => {
     if (currentJob?.id == id) {
         job = currentJob;
     }
 });
 $effect(() => {
-    id &&
-        jobLoader &&
+    if (id && jobLoader) {
+        loadError = undefined;
+        isLoadingJobDetails = true;
         untrack(() => jobLoader?.watchJob(id, {
             done(x) {
-                onDone(x);
+                loadError = undefined;
+                isLoadingJobDetails = false;
+            },
+            doneError({ error }) {
+                // Only show error state if we couldn't load the job data
+                // If the job failed but we have the job object, let it display normally
+                if (!currentJob) {
+                    loadError = error?.body || error?.message || 'Failed to load job details';
+                }
+                isLoadingJobDetails = false;
+            },
+            change() {
+                isLoadingJobDetails = false;
             }
         }));
+    }
 });
 $effect(() => {
     job?.id && lastJobId !== job.id && untrack(() => job && getConcurrencyKey(job));
@@ -59,11 +81,13 @@ let jobLoader = $state(undefined);
 let tabsHeight = $state({
     codeHeight: 0,
     logsHeight: 0,
-    assetsHeight: 0,
-    resultHeight: 0
+    assetsHeight: 0
 });
-let minTabHeight = $derived(Math.max(tabsHeight.codeHeight, tabsHeight.logsHeight, tabsHeight.assetsHeight, tabsHeight.resultHeight));
+let minTabHeight = $derived(Math.max(tabsHeight.codeHeight, tabsHeight.logsHeight, tabsHeight.assetsHeight));
 let jobIsLoading = $state(false);
+// Flow execution status state
+let suspendStatus = $state({ val: {} });
+let isOwner = $state(false);
 </script>
 
 <JobLoader
@@ -73,90 +97,56 @@ let jobIsLoading = $state(false);
 	bind:this={jobLoader}
 />
 
-<div class="h-full overflow-y-auto">
-	<div class="flex flex-col gap-2 items-start p-4 pb-8 min-h-full">
-		{#if job}
-			<div class="flex gap-2 flex-wrap">
-				{#if job?.['priority']}
-					<Badge color="red">
-						priority: {job?.['priority']}
-					</Badge>
-				{/if}
-				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
-					<DurationMs
-						duration_ms={job.duration_ms}
-						self_wait_time_ms={job?.self_wait_time_ms}
-						aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
+<div class="h-full">
+	<div class="flex flex-col items-start pb-4 min-h-full">
+		{#if isLoadingJobDetails}
+			<div class="w-full flex-1 flex items-center justify-center">
+				<div class="text-center">
+					<LoaderCircle size={32} class="animate-spin text-primary mx-auto" />
+					<div class="text-secondary text-sm mt-2">Loading job details...</div>
+				</div>
+			</div>
+		{:else if loadError}
+			<div class="w-full h-full flex items-center justify-center">
+				<div class="text-center">
+					<div class="text-red-500 text-lg font-semibold mb-2">Error loading job</div>
+					<div class="text-secondary text-sm">{loadError}</div>
+				</div>
+			</div>
+		{:else if job}
+			{@const isFlow = job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
+			<JobDetailHeader
+				{job}
+				compact
+				{concurrencyKey}
+				onFilterByConcurrencyKey={handleFilterByConcurrencyKey}
+				onFilterByWorker={handleFilterByWorker}
+			/>
+
+			<!-- Workflow timeline -->
+			{#if job?.workflow_as_code_status}
+				<div class="py-2">
+					<WorkflowTimeline
+						flow_status={asWorkflowStatus(job.workflow_as_code_status)}
+						flowDone={job.type == 'CompletedJob'}
+					/>
+				</div>
+			{/if}
+			<div class="w-full mt-2">
+				{#if isFlow}
+					<FlowExecutionStatus
+						{job}
+						workspaceId={job?.workspace_id}
+						{isOwner}
+						innerModules={job?.flow_status?.modules}
+						{suspendStatus}
 					/>
-				{/if}
-				{#if job?.['mem_peak']}
-					<Badge large>
-						Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
-					</Badge>
-				{/if}
-				{#if workspace && $workspaceStore != workspace}
-					<Badge large>
-						Workspace: {workspace}
-					</Badge>
-				{/if}
-				{#if job.tag}
-					<Badge large>
-						Tag: {job.tag}
-					</Badge>
-				{/if}
-				{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
-					{#each job?.['labels'] as label}
-						<Badge baseClass="text-2xs">Label: {label}</Badge>
-					{/each}
-				{/if}
-				{#if concurrencyKey}
-					<Popover notClickable>
-						{#snippet text()}
-							This job has concurrency limits enabled with the key:
-							<Button
-								class="inline-text"
-								size="xs2"
-								color="light"
-								on:click={() => {
-									dispatch('filterByConcurrencyKey', concurrencyKey)
-								}}
-							>
-								{concurrencyKey}
-								<ListFilter class="inline-block" size={10} />
-							</Button>
-						{/snippet}
-						<Badge large>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
-					</Popover>
-				{/if}
-				{#if job?.worker}
-					<Popover notClickable>
-						{#snippet text()}
-							This job was run on worker:
-							<Button
-								class="inline-text"
-								size="xs2"
-								color="light"
-								on:click={() => {
-									dispatch('filterByWorker', job?.worker)
-								}}
-							>
-								{job?.worker}
-								<ListFilter class="inline-block" size={10} />
-							</Button>
-						{/snippet}
-						<Badge large>Worker: {truncateRev(job.worker, 20)}</Badge>
-					</Popover>
 				{/if}
 			</div>
-			<a
-				href="{base}/run/{job?.id}?workspace={job?.workspace_id}"
-				class="text-xs font-semibold"
-				target={blankLink ? '_blank' : undefined}
-			>
-				ID: {job?.id ?? ''}
-			</a>
 
-			<div class="w-full">
+			<!-- Job inputs -->
+			<div class="w-full mt-4">
+				<div class="text-xs text-emphasis font-semibold mb-1">Inputs</div>
 				<JobArgs
 					id={job?.id}
 					workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
@@ -164,127 +154,100 @@ let jobIsLoading = $state(false);
 				/>
 			</div>
 
-			{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-				<div
-					class="flex flex-row gap-4 items-center mb-1 w-full bg-surface-tertiary rounded-md p-4 border"
-				>
-					<Calendar size={16} class="text-accent" />
-					<div class="flex flex-col gap-1">
-						<span class="text-2xs font-normal text-secondary">Job is scheduled for</span>
-						<span class="text-xs font-semibold text-emphasis"
-							>{new Date(job?.['scheduled_for']).toLocaleString()}</span
-						>
-					</div>
-				</div>
-			{/if}
-
-			<div class="w-full rounded-md min-h-full">
-				{#if job?.workflow_as_code_status}
-					<WorkflowTimeline
-						flow_status={asWorkflowStatus(job.workflow_as_code_status)}
-						flowDone={job.type == 'CompletedJob'}
+			<!-- Job execution content -->
+			<div class="w-full mt-6">
+				{#if isFlow}
+					<FlowStatusViewer
+						jobId={job.id}
+						workspaceId={job.workspace_id}
+						initialJob={job}
+						bind:isOwner
+						wideResults
 					/>
-				{/if}
-
-				{#if job?.type === 'CompletedJob'}
-					{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
-						<div class="w-full mt-8 mb-20">
-							<FlowStatusViewer
-								jobId={job.id}
-								workspaceId={job.workspace_id}
-								wideResults
-								initialJob={job}
-							></FlowStatusViewer>
-						</div>
-					{:else}
-						<Tabs bind:selected={viewTab}>
-							<Tab value="result" label="Results" />
-							<Tab value="logs" label="Logs" />
-							<Tab value="assets" label="Assets" />
-							{#if isScriptPreview(job?.job_kind)}
-								<Tab value="code" label="Code" />
+				{:else if job?.type === 'CompletedJob'}
+					<!-- Result Section (moved outside tabs) -->
+					<div class="w-full mb-6">
+						<h3 class="text-xs font-semibold text-emphasis mb-1">Result</h3>
+						<div class="border rounded-md bg-surface-tertiary p-4 overflow-auto max-h-[400px]">
+							{#if job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined)}
+								<DisplayResult
+									workspaceId={job?.workspace_id}
+									jobId={job?.id}
+									result={job?.result}
+									disableExpand
+									language={job?.language}
+								/>
+							{:else}
+								<div class="text-secondary">No output is available yet</div>
 							{/if}
-						</Tabs>
+						</div>
+					</div>
 
-						<Skeleton loading={!job} layout={[[5]]} />
-						{#if job}
-							<div class="flex flex-col border rounded-md p-2 mt-2 overflow-auto">
-								{#if viewTab == 'logs'}
-									<div
-										class="w-full"
-										bind:clientHeight={tabsHeight.logsHeight}
-										style="min-height: {minTabHeight}px"
-									>
-										<LogViewer
-											jobId={job.id}
-											duration={job?.['duration_ms']}
-											mem={job?.['mem_peak']}
-											isLoading={job?.['running'] == false}
-											content={job?.logs}
-											tag={job?.tag}
-										/>
-									</div>
-								{:else if viewTab == 'assets'}
-									<div
-										class="w-full h-full"
-										bind:clientHeight={tabsHeight.assetsHeight}
-										style="min-height: {minTabHeight}px"
-									>
-										<JobAssetsViewer {job} />
-									</div>
-								{:else if viewTab == 'code'}
-									<div
-										class="text-xs"
-										bind:clientHeight={tabsHeight.codeHeight}
-										style="min-height: {minTabHeight}px"
-									>
-										{#if job && 'raw_code' in job && job.raw_code}
-											<div class="text-xs">
-												<HighlightCode lines language={job.language} code={job.raw_code} />
-											</div>
-										{:else if job}
-											<span class="text-sm">No code available</span>
-										{:else}
-											<Skeleton layout={[[5]]} />
-										{/if}
-									</div>
-								{:else if job !== undefined && (job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined))}
-									<div
-										class="w-full"
-										bind:clientHeight={tabsHeight.resultHeight}
-										style="min-height: {minTabHeight}px"
-									>
-										<DisplayResult
-											workspaceId={job?.workspace_id}
-											jobId={job?.id}
-											{result}
-											disableExpand
-											language={job?.language}
-										/>
-									</div>
-								{:else if job}
-									No output is available yet
-								{/if}
-							</div>
+					<Tabs bind:selected={viewTab}>
+						<Tab value="logs" label="Logs" />
+						<Tab value="assets" label="Assets" />
+						{#if isScriptPreview(job?.job_kind)}
+							<Tab value="code" label="Code" />
 						{/if}
-					{/if}
-				{:else if job && `running` in job ? job.running : false}
-					{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
-						<div class="flex flex-col gap-2 w-full">
-							<FlowProgressBar {job} class="py-4" />
-							<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} initialJob={job} />
+					</Tabs>
+
+					<Skeleton loading={!job} layout={[[5]]} />
+					{#if job}
+						<div class="flex flex-col rounded-md mt-2 overflow-auto">
+							{#if viewTab == 'logs'}
+								<div
+									class="w-full"
+									bind:clientHeight={tabsHeight.logsHeight}
+									style="min-height: {minTabHeight}px"
+								>
+									<LogViewer
+										jobId={job.id}
+										duration={job?.['duration_ms']}
+										mem={job?.['mem_peak']}
+										isLoading={job?.['running'] == false}
+										content={job?.logs}
+										tag={job?.tag}
+									/>
+								</div>
+							{:else if viewTab == 'assets'}
+								<div
+									class="w-full h-full"
+									bind:clientHeight={tabsHeight.assetsHeight}
+									style="min-height: {minTabHeight}px"
+								>
+									<JobAssetsViewer {job} />
+								</div>
+							{:else if viewTab == 'code'}
+								<div
+									class="text-xs"
+									bind:clientHeight={tabsHeight.codeHeight}
+									style="min-height: {minTabHeight}px"
+								>
+									{#if job && 'raw_code' in job && job.raw_code}
+										<div class="text-xs">
+											<HighlightCode lines language={job.language} code={job.raw_code} />
+										</div>
+									{:else if job}
+										<span class="text-sm">No code available</span>
+									{:else}
+										<Skeleton layout={[[5]]} />
+									{/if}
+								</div>
+							{:else}
+								<div class="w-full p-4 text-secondary">Select a tab to view content</div>
+							{/if}
 						</div>
-					{:else}
-						<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
-						<LogViewer
-							jobId={job?.id}
-							duration={job?.['duration_ms']}
-							mem={job?.['mem_peak']}
-							content={job?.logs}
-							isLoading={job?.['running'] == false}
-							tag={job?.tag}
-						/>
 					{/if}
+				{:else if job && `running` in job ? job.running : false}
+					<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
+					<LogViewer
+						jobId={job?.id}
+						duration={job?.['duration_ms']}
+						mem={job?.['mem_peak']}
+						content={job?.logs}
+						isLoading={job?.['running'] == false}
+						tag={job?.tag}
+					/>
 				{/if}
 			</div>
 		{:else if jobIsLoading}

package/package/components/runs/JobRunsPreview.svelte.d.ts

@@ -1,6 +1,5 @@
 interface Props {
     id: string;
-    blankLink?: boolean;
     workspace: 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> {

package/package/components/runs/JobStatusIcon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import Badge from '../common/badge/Badge.svelte';
+import { forLater } from '../../forLater';
+import { Calendar, Check, FastForward, Hourglass, Play, ShieldQuestion, X } from 'lucide-svelte';
+let { job, isExternal = false, roundedFull = false } = $props();
+</script>
+
+<div class="flex items-center justify-start">
+	{#if isExternal}
+		<Badge color="gray" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<ShieldQuestion size={14} />
+		</Badge>
+	{:else if 'success' in job && job.success}
+		{#if job.is_skipped}
+			<Badge color="green" {roundedFull} baseClass={roundedFull ? '' : ''}>
+				<FastForward size={14} />
+			</Badge>
+		{:else}
+			<Badge color="green" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+				<Check size={14} />
+			</Badge>
+		{/if}
+	{:else if 'success' in job}
+		<Badge color="red" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<X size={14} />
+		</Badge>
+	{:else if 'running' in job && job.running && job.suspend}
+		<Badge color="violet" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'} title="Suspended">
+			<Hourglass size={14} />
+		</Badge>
+	{:else if 'running' in job && job.running}
+		<Badge color="yellow" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<Play size={14} />
+		</Badge>
+	{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
+		<Badge color="blue" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<Calendar size={14} />
+		</Badge>
+	{:else if job.canceled}
+		<Badge color="red" {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<Hourglass size={14} />
+		</Badge>
+	{:else}
+		<Badge {roundedFull} baseClass={roundedFull ? '' : '!px-1.5'}>
+			<Hourglass size={14} />
+		</Badge>
+	{/if}
+</div>

package/package/components/runs/JobStatusIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Job } from '../../gen';
+interface Props {
+    job: Job;
+    isExternal?: boolean;
+    roundedFull?: boolean;
+}
+declare const JobStatusIcon: import("svelte").Component<Props, {}, "">;
+type JobStatusIcon = ReturnType<typeof JobStatusIcon>;
+export default JobStatusIcon;

package/package/components/runs/MobileFilters.svelte

@@ -2,17 +2,22 @@
 import { Filter } from 'lucide-svelte';
 import { Button } from '../common';
 import Popover from '../meltComponents/Popover.svelte';
+let { filters } = $props();
 </script>
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
-	<svelte:fragment slot="trigger">
-		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
-			Filters
-		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col w-80 p-4">
-			<slot name="filters" />
-		</div>
-	</svelte:fragment>
+	{#snippet trigger()}
+	
+			<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
+				Filters
+			</Button>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div class="flex flex-col w-80 p-4">
+				{@render filters?.()}
+			</div>
+		
+	{/snippet}
 </Popover>

package/package/components/runs/MobileFilters.svelte.d.ts

@@ -1,20 +1,6 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    filters?: import('svelte').Snippet;
 }
-declare const MobileFilters: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    filters: {};
-}, {}, string>;
-type MobileFilters = InstanceType<typeof MobileFilters>;
+declare const MobileFilters: import("svelte").Component<Props, {}, "">;
+type MobileFilters = ReturnType<typeof MobileFilters>;
 export default MobileFilters;

package/package/components/runs/PreprocessedArgsDisplay.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">import Badge from '../common/badge/Badge.svelte';
-// import { ClipboardCopy, Download } from 'lucide-svelte'
-// import Drawer from '../common/drawer/Drawer.svelte'
-// import DrawerContent from '../common/drawer/DrawerContent.svelte'
-// import { Highlight } from 'svelte-highlight'
-// import Button from '../common/button/Button.svelte'
-// import { json } from 'svelte-highlight/languages'
-// import { copyToClipboard } from '../../utils'
-// import { deepEqual } from 'fast-equals'
-export let preprocessed;
+let { preprocessed } = $props();
 // $: args =
 // 	'_metadata' in flowStatus && 'original_args' in flowStatus['_metadata']
 // 		? flowStatus['_metadata']['original_args']
 // 		: undefined
-$: hasPreprocessedArgs = preprocessed === true;
+let hasPreprocessedArgs = $derived(preprocessed === true);
 // $: argsStr = args !== undefined ? JSON.stringify(args, null, 4) : undefined
 // let jsonViewer: Drawer | undefined = undefined
 </script>

package/package/components/runs/PreprocessedArgsDisplay.svelte.d.ts

@@ -1,20 +1,6 @@
-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 PreprocessedArgsDisplay: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     preprocessed: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PreprocessedArgsDisplay = InstanceType<typeof PreprocessedArgsDisplay>;
+}
+declare const PreprocessedArgsDisplay: import("svelte").Component<Props, {}, "">;
+type PreprocessedArgsDisplay = ReturnType<typeof PreprocessedArgsDisplay>;
 export default PreprocessedArgsDisplay;

package/package/components/runs/QueuePopover.svelte

@@ -3,8 +3,8 @@ import { workspaceStore } from '../../stores';
 import { ExternalLink } from 'lucide-svelte';
 import Skeleton from '../common/skeleton/Skeleton.svelte';
 import { displayDate } from '../../utils';
-let jobs = undefined;
-export let allWorkspaces = false;
+let jobs = $state(undefined);
+let { allWorkspaces = false } = $props();
 getQueuedJobs();
 async function getQueuedJobs() {
     jobs = await JobService.listQueue({