windmill-components 1.35.1 → 1.35.43

package/components/FlowPreviewContent.svelte

@@ -2,22 +2,43 @@
 import { workspaceStore } from '../stores';
 import { faClose, faPlay } from '@fortawesome/free-solid-svg-icons';
 import { Button } from 'flowbite-svelte';
-import { createEventDispatcher, onDestroy } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
-import { flowStateStore, flowStateToFlow } from './flows/flowState';
+import { flowStateStore } from './flows/flowState';
 import { mapJobResultsToFlowState } from './flows/flowStateUtils';
 import { flowStore } from './flows/flowStore';
 import { runFlowPreview } from './flows/utils';
-import FlowStatusViewer from './FlowStatusViewer.svelte';
 import SchemaForm from './SchemaForm.svelte';
-export let args = {};
+import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
+export let previewMode;
 let jobId = undefined;
 let isValid = false;
 let intervalState = 'idle';
-$: newFlow = flowStateToFlow($flowStateStore, $flowStore);
-$: steps = newFlow?.value.modules.length ?? 0;
+const { selectedId, previewArgs } = getContext('FlowEditorContext');
+function extractFlow(previewMode) {
+    if (previewMode === 'whole') {
+        return $flowStore;
+    }
+    else {
+        const [parentIndex, childIndex] = $selectedId.split('-');
+        const modules = $flowStore.value.modules.slice(0, Number(parentIndex) + 1);
+        const flow = JSON.parse(JSON.stringify($flowStore));
+        flow.value.modules = modules;
+        if (childIndex != undefined) {
+            const lastModule = modules[modules.length - 1].value;
+            if (lastModule.type === 'forloopflow') {
+                lastModule.modules = lastModule.modules.slice(0, Number(childIndex) + 1);
+            }
+            else {
+                throw Error('Excepted forloopflow module');
+            }
+        }
+        return flow;
+    }
+}
 const dispatch = createEventDispatcher();
 export async function runPreview(args) {
+    const newFlow = extractFlow(previewMode);
     jobId = await runFlowPreview(args, newFlow);
     intervalState = 'running';
 }
@@ -28,19 +49,32 @@ onDestroy(() => {
 
 <div class="flex divide-y flex-col space-y-2 h-screen bg-white p-6 w-full">
 	<div class="flex justify-between">
-		<div class="flex flex-row justify-center items-center">
-			<div class="flex justify-center p-2 w-8 h-8 bg-blue-200 rounded-lg mr-2">
+		<div class="flex flex-row justify-center items-center ">
+			<div class="flex justify-center p-2 w-8 h-8 bg-blue-200 rounded-lg mr-2 ">
 				<Icon data={faPlay} scale={1} class="text-blue-500" />
 			</div>
 
-			<h3 class="text-lg leading-6 font-bold text-gray-900">Flow preview</h3>
+			<h3 class="text-lg leading-6 font-bold text-gray-900">
+				Test preview - {previewMode === 'upTo'
+					? `up to step ${$selectedId.split('-').join(',')}`
+					: ' whole flow'}
+			</h3>
 		</div>
-		<Button color="alternative" on:click={() => dispatch('close')}>
+		<Button
+			color="alternative"
+			on:click={() => {
+				jobId = undefined
+				intervalState = 'idle'
+				dispatch('close')
+			}}
+		>
 			<Icon data={faClose} />
 		</Button>
 	</div>
-	<div class="max-h-80 overflow-y-auto">
-		<SchemaForm schema={$flowStore.schema} bind:isValid bind:args />
+	<div class="pb-4 h-full max-h-1/2 overflow-auto">
+		<div class="mt-4">
+			<SchemaForm schema={$flowStore.schema} bind:isValid bind:args={$previewArgs} />
+		</div>
 	</div>
 	{#if intervalState === 'running'}
 		<Button
@@ -63,7 +97,12 @@ onDestroy(() => {
 			Cancel
 		</Button>
 	{:else}
-		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md">
+		<Button
+			disabled={!isValid}
+			class="blue-button"
+			on:click={() => runPreview($previewArgs)}
+			size="md"
+		>
 			{`Run${intervalState === 'done' ? ' again' : ''}`}
 		</Button>
 	{/if}
@@ -74,9 +113,11 @@ onDestroy(() => {
 				{jobId}
 				on:jobsLoaded={(e) => {
 					intervalState = 'done'
-					mapJobResultsToFlowState(e.detail, 'upto', steps - 1)
+					const [parentIndex] = $selectedId.split('-')
+					const upToIndex =
+						previewMode === 'upTo' ? Number(parentIndex) + 1 : $flowStateStore.modules.length
+					mapJobResultsToFlowState(e.detail, upToIndex)
 				}}
-				root={true}
 			/>
 		{/if}
 	</div>

package/components/FlowPreviewContent.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        args?: Record<string, any> | undefined;
+        previewMode: 'upTo' | 'whole';
         runPreview?: ((args: Record<string, any>) => Promise<void>) | undefined;
     };
     events: {

package/components/FlowStatusViewer.svelte

@@ -1,4 +1,4 @@
-<script>import { JobService } from '../gen';
+<script>import { FlowStatusModule, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import FlowJobResult from './FlowJobResult.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
@@ -9,7 +9,6 @@ import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
-export let root = false;
 export let forloopJobIds = undefined;
 export let jobResult = {
     job: undefined,
@@ -18,6 +17,7 @@ export let jobResult = {
 };
 let forloop_selected = '';
 let timeout;
+$: innerModules = jobResult.job?.flow_status?.modules ?? [];
 async function loadJobInProgress() {
     const job = await JobService.getJob({
         workspace: $workspaceStore ?? '',
@@ -28,14 +28,11 @@ async function loadJobInProgress() {
     if (job?.type !== 'CompletedJob') {
         timeout = setTimeout(() => loadJobInProgress(), 500);
     }
-    else if (root) {
-        dispatch('jobsLoaded', jobResult);
-    }
 }
-$: hasModules =
-    jobResult.job &&
-        Array.isArray(jobResult.job?.raw_flow?.modules) &&
-        jobResult.job?.raw_flow?.modules.length > 1;
+$: jobResult &&
+    jobResult.job?.type === 'CompletedJob' &&
+    jobResult.job.flow_status?.modules.length == jobResult.innerJobs?.length &&
+    dispatch('jobsLoaded', jobResult);
 function updateJobId() {
     if (jobId !== jobResult.job?.id) {
         loadJobInProgress();
@@ -49,7 +46,9 @@ onDestroy(() => {
 
 {#if jobResult.job}
 	<div class="flow-root w-full space-y-4">
-		<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Preview results</h3>
+		{#if innerModules.length > 0}
+			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
+		{/if}
 		<FlowPreviewStatus job={jobResult.job} />
 		{#if `result` in jobResult.job}
 			<FlowJobResult job={jobResult.job} />
@@ -87,32 +86,51 @@ onDestroy(() => {
 					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
 				</div>
 			{/each}
-		{:else if hasModules && Array.isArray(jobResult.innerJobs)}
+		{:else if innerModules.length > 0}
 			<ul class="w-full">
 				<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
-					Detailed results
+					Step-by-step results
 				</h3>
 
-				{#each jobResult.job?.flow_status?.modules ?? [] as module, i}
-					<p class="text-gray-500 mb-6 w-full ">
-						Step
-						<span class="font-medium text-gray-900"> {i + 1} </span> out of
-						<span class="font-medium text-gray-900">{jobResult.job?.raw_flow?.modules.length}</span>
+				{#each innerModules as mod, i}
+					<p class="text-gray-500 mb-2 w-full ">
+						{#if jobResult.job?.raw_flow?.modules && i < jobResult.job?.raw_flow?.modules.length}
+							Step
+							<span class="font-medium text-gray-900">
+								{i + 1}
+							</span>
+							out of
+							<span class="font-medium text-gray-900"
+								>{jobResult.job?.raw_flow?.modules.length}</span
+							>
+							{#if jobResult.job.raw_flow?.modules[i]?.summary}
+								: <span class="font-medium text-gray-900"
+									>{jobResult.job.raw_flow?.modules[i]?.summary ?? ''}</span
+								>
+							{/if}
+						{:else}
+							<span class="font-medium text-gray-900"> Failure module </span>
+						{/if}
 					</p>
 
-					{#if ['InProgress', 'Success', 'Error'].includes(module.type)}
-						<li class="w-full border p-6 space-y-2">
+					<li class="w-full border p-6 space-y-2">
+						{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 							<svelte:self
-								jobId={module.job}
+								jobId={mod.job}
 								bind:jobResult={jobResult.innerJobs[i]}
-								forloopJobIds={module.forloop_jobs}
+								forloopJobIds={mod.forloop_jobs}
+								on:jobsLoaded={(e) => {
+									jobResult = jobResult
+								}}
 							/>
-						</li>
-					{/if}
+						{:else}
+							<span>{mod.type}</span>
+						{/if}
+					</li>
 				{/each}
 			</ul>
 		{/if}
 	</div>
 {:else}
-	No script selected
+	Job loading...
 {/if}

package/components/FlowStatusViewer.svelte.d.ts

@@ -3,7 +3,6 @@ import type { JobResult } from './flows/flowStateUtils';
 declare const __propDef: {
     props: {
         jobId: string;
-        root?: boolean | undefined;
         forloopJobIds?: string[] | undefined;
         jobResult?: JobResult | undefined;
     };

package/components/FlowViewer.svelte

@@ -9,7 +9,7 @@ import SvelteMarkdown from 'svelte-markdown';
 import FlowModulesViewer from './FlowModulesViewer.svelte';
 export let flow;
 export let initialOpen = undefined;
-let flowFiltered = {
+$: flowFiltered = {
     summary: flow.summary,
     description: flow.description,
     value: flow.value,
@@ -61,7 +61,10 @@ function toAny(x) {
 				{:else}
 					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
 				{/if}
-				<FlowModulesViewer modules={flow?.value?.modules} />
+				<FlowModulesViewer
+					modules={flow?.value?.modules}
+					failureModule={flow?.value?.failure_module}
+				/>
 			</div>
 		</TabContent>
 		<TabContent value="json">
@@ -71,7 +74,8 @@ function toAny(x) {
 						await navigator.clipboard.writeText(JSON.stringify(flowFiltered, null, 4))
 					}}
 					class="absolute default-secondary-button-v2 bg-white/30 right-0 my-2 ml-4"
-					>copy content</button
+				>
+					copy content</button
 				>
 				<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
 			</div>

package/components/HighlightCode.svelte

@@ -0,0 +1,21 @@
+<script>import Highlight from 'svelte-highlight';
+import python from 'svelte-highlight/languages/python';
+import typescript from 'svelte-highlight/languages/typescript';
+import go from 'svelte-highlight/languages/go';
+export let code = '';
+export let language;
+function getLang() {
+    switch (language) {
+        case 'python3':
+            return python;
+        case 'deno':
+            return typescript;
+        case 'go':
+            return go;
+        default:
+            return python;
+    }
+}
+</script>
+
+<Highlight language={getLang()} {code} />

package/components/HighlightCode.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        code?: string | undefined;
+        language: 'python3' | 'deno' | 'go' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type HighlightCodeProps = typeof __propDef.props;
+export declare type HighlightCodeEvents = typeof __propDef.events;
+export declare type HighlightCodeSlots = typeof __propDef.slots;
+export default class HighlightCode extends SvelteComponentTyped<HighlightCodeProps, HighlightCodeEvents, HighlightCodeSlots> {
+}
+export {};

package/components/IconedPath.svelte

@@ -1,12 +1,14 @@
-<script>import IconedResourceType from './IconedResourceType.svelte';
+<script>import Badge from './common/badge/Badge.svelte';
+import IconedResourceType from './IconedResourceType.svelte';
 export let path;
 </script>
 
-{#if path.startsWith('hub/')}
-	<span class="inline-flex flex-row gap-x-2 items-center">
+<div class="flex space-x-2 items-center">
+	{#if path.startsWith('hub/')}
 		<IconedResourceType name={path.split('/')[2]} silent={true} />
 		<span>{path}</span>
-	</span>
-{:else}
-	{path}
-{/if}
+	{:else}
+		<Badge color="blue">Workspace</Badge>
+		<span>{path}</span>
+	{/if}
+</div>

package/components/IconedResourceType.svelte

@@ -42,7 +42,7 @@ export let width = '24px';
 	{:else if name === 'slack'}
 		<Slack {height} {width} />
 	{:else if name === 'github'}
-		<Icon data={GithubIcon} scale={1.4} />
+		<GithubIcon />
 	{:else if name === 'gmail'}
 		<GmailIcon {height} {width} />
 	{:else if name === 'gsheets'}

package/components/InputTransformForm.svelte

@@ -1,26 +1,24 @@
-<script>import { faChain } from '@fortawesome/free-solid-svg-icons';
-import { Button, Tooltip } from 'flowbite-svelte';
-import Icon from 'svelte-awesome';
+<script>import { getContext } from 'svelte';
 import ArgInput from './ArgInput.svelte';
-import Editor from './Editor.svelte';
 import FieldHeader from './FieldHeader.svelte';
-import DynamicInputHelpBox from './flows/DynamicInputHelpBox.svelte';
+import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte';
 import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils';
-import OverlayPropertyPicker from './propertyPicker/OverlayPropertyPicker.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
+import { Button, Tooltip } from 'flowbite-svelte';
+import Icon from 'svelte-awesome';
+import { faChain } from '@fortawesome/free-solid-svg-icons';
 export let schema;
 export let arg;
 export let argName;
 export let extraLib = 'missing extraLib';
 export let inputCheck;
 export let importPath = undefined;
-export let pickableProperties = undefined;
-let overlays = {};
 let monacos = {};
 let inputCats = {};
 let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
-    let type = arg.type;
+    let type = arg?.type ?? 'static';
     if (type == 'javascript') {
         if (codeToStaticTemplate(arg.expr)) {
             type = 'static';
@@ -49,16 +47,6 @@ function setPropertyType(rawValue) {
 function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql';
 }
-function focusProp(argName, monacoEditor = false) {
-    Object.keys(overlays).forEach((k) => {
-        if (k == argName && (isStaticTemplate(inputCats[argName]) || monacoEditor)) {
-            overlays[k].focus();
-        }
-        else {
-            overlays[k].unfocus();
-        }
-    });
-}
 function connectProperty(argName, rawValue) {
     if (isStaticTemplate(inputCats[argName])) {
         arg.value = `\$\{${rawValue}}`;
@@ -74,6 +62,7 @@ function connectProperty(argName, rawValue) {
     }
 }
 $: checked = propertyType == 'javascript';
+const { focusProp } = getContext('PropPickerWrapper');
 </script>
 
 {#if arg != undefined}
@@ -94,45 +83,54 @@ $: checked = propertyType == 'javascript';
 				</span>
 			{/if}
 		</div>
-		<Toggle
-			bind:checked
-			options={{
-				right: 'Raw Javascript Editor'
-			}}
-			on:change={(e) => {
-				const type = e.detail ? 'javascript' : 'static'
-				const staticTemplate = isStaticTemplate(inputCats[argName])
-				if (type === 'javascript') {
-					arg.expr = getDefaultExpr(
-						importPath,
-						argName,
-						staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value
-					)
+		<div class="flex flex-row space-x-2 items-center">
+			<Toggle
+				bind:checked
+				options={{
+					right: 'Raw Javascript Editor'
+				}}
+				on:change={(e) => {
+					const type = e.detail ? 'javascript' : 'static'
+					const staticTemplate = isStaticTemplate(inputCats[argName])
+					if (type === 'javascript') {
+						arg.expr = getDefaultExpr(
+							importPath,
+							argName,
+							staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value
+						)
 
-					arg.value = undefined
-					propertyType = 'javascript'
-				} else {
-					arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined
+						arg.value = undefined
+						propertyType = 'javascript'
+					} else {
+						arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined
 
-					arg.expr = undefined
-					propertyType = 'static'
-				}
+						arg.expr = undefined
+						propertyType = 'static'
+					}
 
-				arg.type = type
-			}}
-		/>
+					arg.type = type
+				}}
+			/>
+			<div
+				on:click={() => {
+					focusProp(argName, 'connect', (path) => {
+						connectProperty(argName, path)
+					})
+				}}
+			>
+				<Button size="sm" class="blue-button">
+					<Icon data={faChain} />
+				</Button>
+			</div>
+		</div>
 	</div>
 	<div class="max-w-xs" />
 
 	{#if propertyType === undefined || !checked}
-		<OverlayPropertyPicker
-			{pickableProperties}
-			bind:this={overlays[argName]}
-			on:select={({ detail }) => {
-				if (detail.pickerVariation === 'connect') {
-					connectProperty(argName, detail.propPath)
-				} else {
-					const toAppend = `\$\{${detail.propPath}}`
+		<ArgInput
+			on:focus={() => {
+				focusProp(argName, 'append', (path) => {
+					const toAppend = `\$\{${path}}`
 					arg.value = `${arg.value ?? ''}${toAppend}`
 					if (monacos[argName]) {
 						monacos[argName].setCode(arg.value)
@@ -140,67 +138,50 @@ $: checked = propertyType == 'javascript';
 					if (isStaticTemplate(inputCats[argName])) {
 						setPropertyType(arg.value)
 					}
+				})
+			}}
+			label={argName}
+			bind:editor={monacos[argName]}
+			bind:description={schema.properties[argName].description}
+			bind:value={arg.value}
+			type={schema.properties[argName].type}
+			required={schema.required.includes(argName)}
+			bind:pattern={schema.properties[argName].pattern}
+			bind:valid={inputCheck[argName]}
+			defaultValue={schema.properties[argName].default}
+			bind:enum_={schema.properties[argName].enum}
+			bind:format={schema.properties[argName].format}
+			contentEncoding={schema.properties[argName].contentEncoding}
+			bind:itemsType={schema.properties[argName].items}
+			properties={schema.properties[argName].properties}
+			displayHeader={false}
+			bind:inputCat={inputCats[argName]}
+			on:input={(e) => {
+				if (isStaticTemplate(inputCats[argName])) {
+					setPropertyType(e.detail.rawValue)
 				}
 			}}
-		>
-			<ArgInput
-				on:focus={() => focusProp(argName)}
-				label={argName}
-				bind:editor={monacos[argName]}
-				bind:description={schema.properties[argName].description}
-				bind:value={arg.value}
-				type={schema.properties[argName].type}
-				required={schema.required.includes(argName)}
-				bind:pattern={schema.properties[argName].pattern}
-				bind:valid={inputCheck[argName]}
-				defaultValue={schema.properties[argName].default}
-				bind:enum_={schema.properties[argName].enum}
-				bind:format={schema.properties[argName].format}
-				contentEncoding={schema.properties[argName].contentEncoding}
-				bind:itemsType={schema.properties[argName].items}
-				properties={schema.properties[argName].properties}
-				displayHeader={false}
-				bind:inputCat={inputCats[argName]}
-				on:input={(e) => {
-					if (isStaticTemplate(inputCats[argName])) {
-						setPropertyType(e.detail.rawValue)
-					}
-				}}
-			>
-				<div slot="actions">
-					<div on:click={() => overlays[argName]?.focus('connect')}>
-						<Tooltip placement="bottom" content="Input connect">
-							<Button size="sm" class="blue-button h-8">
-								<Icon data={faChain} />
-							</Button>
-						</Tooltip>
-					</div>
-				</div>
-			</ArgInput>
-		</OverlayPropertyPicker>
+		/>
 	{:else if checked}
 		{#if arg.expr != undefined}
-			<OverlayPropertyPicker
-				bind:this={overlays[argName]}
-				{pickableProperties}
-				on:select={(event) => {
-					monacos[argName].insertAtCursor(event.detail.propPath)
-				}}
-			>
-				<div class="border rounded p-2 mt-2 border-gray-300">
-					<Editor
-						bind:this={monacos[argName]}
-						on:focus={() => focusProp(argName, true)}
-						bind:code={arg.expr}
-						lang="javascript"
-						class="few-lines-editor"
-						{extraLib}
-						extraLibPath="file:///node_modules/@types/windmill@{importPath}/index.d.ts"
-						shouldBindKey={false}
-					/>
-				</div>
-			</OverlayPropertyPicker>
+			<div class="border rounded p-2 mt-2 border-gray-300">
+				<SimpleEditor
+					bind:this={monacos[argName]}
+					on:focus={() => {
+						focusProp(argName, 'insert', (path) => {
+							monacos[argName].insertAtCursor(path)
+						})
+					}}
+					bind:code={arg.expr}
+					lang="javascript"
+					class="few-lines-editor"
+					{extraLib}
+					extraLibPath="file:///node_modules/@types/windmill@{importPath}/index.d.ts"
+					shouldBindKey={false}
+				/>
+			</div>
 			<DynamicInputHelpBox {importPath} />
+			<div class="mb-2" />
 		{/if}
 	{:else}
 		<p>Not recognized arg type {arg.type}</p>

package/components/InputTransformForm.svelte.d.ts

@@ -11,7 +11,6 @@ declare const __propDef: {
             [id: string]: boolean;
         };
         importPath?: string | undefined;
-        pickableProperties?: Object | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ItemPicker.svelte

@@ -27,7 +27,7 @@ let modal;
 </script>
 
 <Modal bind:this={modal} z="z-30">
-	<div slot="title">search a {itemName}</div>
+	<div slot="title">Search a {itemName}</div>
 	<div slot="content">
 		<div class="w-12/12 pb-4">
 			<input placeholder="Search {itemName}" bind:value={itemsFilter} class="search-item" />
@@ -48,7 +48,7 @@ let modal;
 							<IconedResourceType silent={true} name={obj['app']} />
 							<span class="mr-2" />
 						{/if}
-						<span class="mr-2">{obj[extraField]}</span><span class="font-normal whitespace-nowrap"
+						<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-all"
 							>{obj['path'] ?? ''}</span
 						>
 					</p>

package/components/LogViewer.svelte

@@ -0,0 +1,23 @@
+<script>export let content;
+export let isLoading;
+let scroll = true;
+let div = null;
+$: if (content != undefined) {
+    isLoading = false;
+}
+$: content && scrollToBottom();
+export function scrollToBottom() {
+    scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
+}
+</script>
+
+<div class="relative w-full h-full">
+	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
+		<pre
+			class="whitespace-pre-wrap break-all bg-gray-50 text-xs w-full p-2">{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre>
+	</div>
+	<div class="absolute top-0 right-0 mr-2 text-gray-500 text-sm bg-gray-50/20">
+		Auto scroll
+		<input type="checkbox" bind:checked={scroll} />
+	</div>
+</div>