windmill-components 1.394.8 → 1.405.5

package/package/components/DropdownV2.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[] | (() => {
             displayName: string;
@@ -15,7 +15,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[]) | (() => Promise<{
             displayName: string;
@@ -23,7 +23,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[]>) | undefined;
         justifyEnd?: boolean | undefined;

package/package/components/DropdownV2Inner.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[] | (() => {
             displayName: string;
@@ -15,7 +15,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[]) | (() => Promise<{
             displayName: string;
@@ -23,7 +23,7 @@ declare const __propDef: {
             icon?: any;
             href?: string | undefined;
             disabled?: boolean | undefined;
-            type?: "action" | "delete" | undefined;
+            type?: "delete" | "action" | undefined;
             hide?: boolean | undefined;
         }[]>) | undefined;
     };

package/package/components/EditableSchemaForm.svelte

@@ -419,6 +419,7 @@ let editor = undefined;
 															{itemPicker}
 															{lightweightMode}
 															bind:nullable={schema.properties[argName].nullable}
+															bind:disabled={schema.properties[argName].disabled}
 															type={schema.properties[argName].type}
 															bind:oneOf={schema.properties[argName].oneOf}
 															bind:format={schema.properties[argName].format}

package/package/components/Editor.svelte

@@ -125,9 +125,10 @@ import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'mona
 import EditorTheme from './EditorTheme.svelte';
 import { BIGQUERY_TYPES, MSSQL_TYPES, MYSQL_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
 import { setupTypeAcquisition } from '../ata/index';
-import { initWasmTs, parseDeps } from '../infer';
+import { initWasmTs } from '../infer';
 import { initVim } from './monaco_keybindings';
 import { buildWorkerDefinition } from '../monaco_workers/build_workers';
+import { parseTypescriptDeps } from '../relative_imports';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = null;
 let editor = null;
@@ -1011,7 +1012,7 @@ async function setTypescriptExtraLibs() {
             ata = setupTypeAcquisition({
                 projectName: 'Windmill',
                 depsParser: (c) => {
-                    return parseDeps(c);
+                    return parseTypescriptDeps(c);
                 },
                 root,
                 scriptPath: path,

package/package/components/Editor.svelte.d.ts

@@ -7,7 +7,7 @@ import { editor as meditor, type IDisposable } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript' | 'rust';
+        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript' | 'rust' | 'yaml';
         code?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
         formatAction?: (() => void) | undefined;

package/package/components/ExecutionDuration.svelte

@@ -0,0 +1,44 @@
+<script>import {} from '../gen';
+import { onDestroy } from 'svelte';
+export let job = undefined;
+/** Execution duration of current active job (in ms) */
+export let executionDuration = 0;
+/** Is current job running more than specified value in `longDefinition` seconds */
+export let longRunning = false;
+/** What do we count as "long" (in ms)*/
+export let longDefinition = 30_000;
+/** How often component updates execution duration (in ms)
+ *   Higher value -> more efficient component is, less accuracy it has
+ *   Lower value -> less efficient component is, more accuracy it has
+ */
+export let updateResolution = 5_000;
+let startedAt = undefined;
+let busy = false;
+let interval;
+// Detect when execution of job started
+$: if (!busy &&
+    job &&
+    'running' in job &&
+    (job.job_kind == 'script' || job?.job_kind == 'preview'))
+    start(job);
+function start(job) {
+    busy = true;
+    startedAt = new Date(job?.started_at ?? '').getTime();
+    interval = setInterval(updateDuration, updateResolution);
+}
+function updateDuration() {
+    if (job?.type == 'CompletedJob') {
+        clearInterval(interval);
+        return;
+    }
+    if (startedAt)
+        executionDuration = Date.now() - startedAt;
+    // Detect long running
+    if (executionDuration >= longDefinition)
+        longRunning = true;
+}
+onDestroy(() => {
+    // Clear the interval when the component is destroyed
+    clearInterval(interval);
+});
+</script>

package/package/components/ExecutionDuration.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type Job } from '../gen';
+declare const __propDef: {
+    props: {
+        job?: Job | undefined;
+        /** Execution duration of current active job (in ms) */ executionDuration?: number | undefined;
+        /** Is current job running more than specified value in `longDefinition` seconds */ longRunning?: boolean | undefined;
+        /** What do we count as "long" (in ms)*/ longDefinition?: number | undefined;
+        /** How often component updates execution duration (in ms)
+             *   Higher value -> more efficient component is, less accuracy it has
+             *   Lower value -> less efficient component is, more accuracy it has
+             */ updateResolution?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExecutionDurationProps = typeof __propDef.props;
+export type ExecutionDurationEvents = typeof __propDef.events;
+export type ExecutionDurationSlots = typeof __propDef.slots;
+export default class ExecutionDuration extends SvelteComponent<ExecutionDurationProps, ExecutionDurationEvents, ExecutionDurationSlots> {
+}
+export {};

package/package/components/FlowBuilder.svelte

@@ -48,6 +48,7 @@ export let savedFlow = undefined;
 export let diffDrawer = undefined;
 export let customUi = {};
 export let disableAi = false;
+export let disabledFlowInputs = false;
 $: setContext('customUi', customUi);
 const dispatch = createEventDispatcher();
 async function createSchedule(path) {
@@ -321,6 +322,7 @@ const testStepStore = writable({});
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
+let insertButtonOpen = writable(false);
 setContext('FlowEditorContext', {
     selectedId: selectedIdStore,
     schedule: scheduleStore,
@@ -335,7 +337,8 @@ setContext('FlowEditorContext', {
     saveDraft,
     initialPath,
     flowInputsStore: writable({}),
-    customUi
+    customUi,
+    insertButtonOpen
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -381,20 +384,24 @@ function onKeyDown(event) {
             }
             break;
         case 'ArrowDown': {
-            let ids = generateIds();
-            let idx = ids.indexOf($selectedIdStore);
-            if (idx > -1 && idx < ids.length - 1) {
-                $selectedIdStore = ids[idx + 1];
-                event.preventDefault();
+            if (!$insertButtonOpen) {
+                let ids = generateIds();
+                let idx = ids.indexOf($selectedIdStore);
+                if (idx > -1 && idx < ids.length - 1) {
+                    $selectedIdStore = ids[idx + 1];
+                    event.preventDefault();
+                }
             }
             break;
         }
         case 'ArrowUp': {
-            let ids = generateIds();
-            let idx = ids.indexOf($selectedIdStore);
-            if (idx > 0 && idx < ids.length) {
-                $selectedIdStore = ids[idx - 1];
-                event.preventDefault();
+            if (!$insertButtonOpen) {
+                let ids = generateIds();
+                let idx = ids.indexOf($selectedIdStore);
+                if (idx > 0 && idx < ids.length) {
+                    $selectedIdStore = ids[idx - 1];
+                    event.preventDefault();
+                }
             }
             break;
         }
@@ -404,6 +411,7 @@ function generateIds() {
     return [
         'settings-metadata',
         'constants',
+        'preprocessor',
         ...dfsApply($flowStore.value.modules, (module) => module.id)
     ];
 }
@@ -718,7 +726,8 @@ async function genFlow(idx, flowModules, stepOnly = false) {
                             const schemaProperty = Object.entries(schema?.properties ?? {}).find((x) => x[0] === key)?.[1];
                             const snakeKey = snakeCase(key);
                             if (schemaProperty &&
-                                (!$flowStore.schema || !(snakeKey in $flowStore.schema.properties ?? {})) // prevent overriding flow inputs
+                                (!$flowStore.schema ||
+                                    !(snakeKey in ($flowStore?.schema?.properties ?? {}))) // prevent overriding flow inputs
                             ) {
                                 copilotFlowInputs[snakeKey] = schemaProperty;
                                 if (schema?.required.includes(snakeKey)) {
@@ -1126,6 +1135,7 @@ let msgInput = undefined;
 			<!-- metadata -->
 			{#if $flowStateStore}
 				<FlowEditor
+					{disabledFlowInputs}
 					disableAi={disableAi || customUi?.stepInputs?.ai == false}
 					disableSettings={customUi?.settingsPanel === false}
 					{loading}

package/package/components/FlowBuilder.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         diffDrawer?: DiffDrawer | undefined;
         customUi?: FlowBuilderWhitelabelCustomUi | undefined;
         disableAi?: boolean | undefined;
+        disabledFlowInputs?: boolean | undefined;
         computeUnlockedSteps?: ((flow: Flow) => {
             [k: string]: string;
         }) | undefined;

package/package/components/FlowGraphViewer.svelte

@@ -23,9 +23,16 @@ const dispatch = createEventDispatcher();
 				minHeight={400}
 				modules={flow?.value?.modules}
 				failureModule={flow?.value?.failure_module}
+				preprocessorModule={flow?.value?.preprocessor_module}
 				on:select={(e) => {
-					const mod = dfs(flow?.value?.modules ?? [], (m) => m).find((m) => m?.id === e?.detail)
-					stepDetail = mod ?? e.detail
+					if (e?.detail === 'failure') {
+						stepDetail = flow?.value?.failure_module
+					} else if (e?.detail === 'preprocessor') {
+						stepDetail = flow?.value?.preprocessor_module
+					} else {
+						stepDetail = dfs(flow?.value?.modules ?? [], (m) => m).find((m) => m?.id === e?.detail)
+					}
+					stepDetail = stepDetail ?? e?.detail
 					dispatch('select', stepDetail)
 				}}
 			/>

package/package/components/FlowGraphViewerStep.svelte

@@ -98,12 +98,17 @@ let codeViewer;
 	{:else if typeof stepDetail != 'string' && stepDetail.value}
 		<div class="">
 			<div class="sticky top-0 bg-surface w-full flex items-center py-2">
-				{#if stepDetail.id}
+				{#if stepDetail.id && stepDetail.id != 'failure' && stepDetail.id != 'preprocessor'}
 					<Badge color="indigo">
 						{stepDetail.id}
 					</Badge>
 				{/if}
-				<span class="ml-2 font-medium text-lg">
+				<span
+					class={twMerge(
+						'font-medium text-lg',
+						stepDetail.id !== 'failure' && stepDetail.id !== 'preprocessor' ? 'ml-2' : ''
+					)}
+				>
 					{#if stepDetail.summary}
 						{stepDetail.summary}
 					{:else if stepDetail.value.type == 'identity'}
@@ -119,6 +124,10 @@ let codeViewer;
 						Inner flow
 					{:else if stepDetail.value.type == 'whileloopflow'}
 						While loop
+					{:else if stepDetail.id === 'failure'}
+						Error handler
+					{:else if stepDetail.id === 'preprocessor'}
+						Preprocessor
 					{:else}
 						Anonymous step
 					{/if}
@@ -142,10 +151,12 @@ let codeViewer;
 				An identity step returns its inputs as outputs
 			</p>
 		{:else if stepDetail.value.type == 'rawscript'}
-			<div class="text-xs">
-				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
-				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
-			</div>
+			{#if stepDetail.id !== 'preprocessor'}
+				<div class="text-xs">
+					<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+				</div>
+			{/if}
 
 			<div>
 				<div class="mb-2 mt-4 flex justify-between items-center">
@@ -175,10 +186,12 @@ let codeViewer;
 				</div>
 			</div>
 		{:else if stepDetail.value.type == 'script'}
-			<div class="text-2xs">
-				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
-				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
-			</div>
+			{#if stepDetail.id !== 'preprocessor'}
+				<div class="text-2xs">
+					<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+				</div>
+			{/if}
 			{#if stepDetail.value.path.startsWith('hub/')}
 				<div class="flex flex-col grow">
 					<div class="mb-2 flex justify-between items-center">

package/package/components/FlowInputViewer.svelte

@@ -0,0 +1,25 @@
+<script>import FieldHeader from './FieldHeader.svelte';
+export let schema;
+</script>
+
+<ul class="my-2">
+	{#if schema == undefined}
+		<li class="text-secondary text-xs italic mb-4">No inputs</li>
+	{:else}
+		{#each Object.entries(schema.properties ?? {}) as [inp, v]}
+			<li class="list-disc flex flex-row items-center">
+				<FieldHeader
+					label={inp}
+					required={Array.isArray(schema.required) && schema.required?.includes(inp)}
+					type={v?.type}
+					contentEncoding={v?.contentEncoding}
+					format={v?.format}
+				/><span class="ml-4 mt-1 text-xs"
+					>{v?.default != undefined && v?.default != ''
+						? 'default: ' + JSON.stringify(v?.default)
+						: ''}</span
+				>
+			</li>
+		{/each}
+	{/if}
+</ul>

package/package/components/FlowInputViewer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema | {
+            [key: string]: unknown;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowInputViewerProps = typeof __propDef.props;
+export type FlowInputViewerEvents = typeof __propDef.events;
+export type FlowInputViewerSlots = typeof __propDef.slots;
+export default class FlowInputViewer extends SvelteComponent<FlowInputViewerProps, FlowInputViewerEvents, FlowInputViewerSlots> {
+}
+export {};

package/package/components/FlowJobResult.svelte

@@ -18,6 +18,7 @@ export let tag = undefined;
 export let workspaceId = undefined;
 export let refreshLog = false;
 export let durationStates;
+export let downloadLogs = true;
 let lastJobId = undefined;
 let drawer = undefined;
 $: jobId != lastJobId && diffJobId();
@@ -32,7 +33,6 @@ async function diffJobId() {
 let logOffset = 0;
 async function getLogs() {
     if (jobId) {
-        console.log('getLogs');
         const getUpdate = await JobService.getJobUpdates({
             workspace: workspaceId ?? $workspaceStore,
             id: jobId,
@@ -77,6 +77,12 @@ async function getLogs() {
 		<div class="absolute z-40 text-xs top-0 left-1"
 			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
 		>
-		<LogViewer content={logs ?? ''} {jobId} isLoading={waitingForExecutor} {tag} />
+		<LogViewer
+			download={downloadLogs}
+			content={logs ?? ''}
+			{jobId}
+			isLoading={waitingForExecutor}
+			{tag}
+		/>
 	</div>
 </div>

package/package/components/FlowJobResult.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         workspaceId?: string | undefined;
         refreshLog?: boolean | undefined;
         durationStates: Writable<Record<string, DurationStatus>> | undefined;
+        downloadLogs?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowMetadata.svelte

@@ -24,7 +24,7 @@ export let scheduleEditor;
 			{#if job['success'] != undefined}
 				Received job: {displayDate(job.created_at ?? '')}
 			{:else}
-				Received job <TimeAgo withDate date={job.created_at ?? ''} />
+				Received job <TimeAgo date={job.created_at ?? ''} />
 			{/if}
 			<Tooltip small>{job?.created_at}</Tooltip>
 		</span>
@@ -33,7 +33,7 @@ export let scheduleEditor;
 		<div class="flex flex-row gap-2 items-center text-sm">
 			<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 			<span class="whitespace-nowrap">
-				Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
+				Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
 				<Tooltip small>{job?.started_at}</Tooltip>
 			</span>
 		</div>

package/package/components/FlowStatusViewer.svelte

@@ -13,6 +13,7 @@ export let hideTimeline = false;
 export let hideDownloadInGraph = false;
 export let hideNodeDefinition = false;
 export let hideJobId = false;
+export let hideDownloadLogs = false;
 export let isOwner = false;
 export let wideResults = false;
 let lastJobId = jobId;
@@ -25,7 +26,8 @@ setContext('FlowStatusViewer', {
     hideDownloadInGraph,
     hideNodeDefinition,
     hideTimeline,
-    hideJobId
+    hideJobId,
+    hideDownloadLogs
 });
 function loadOwner(path) {
     isOwner = loadIsOwner(path, $userStore, workspaceId ?? $workspaceStore);

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         hideDownloadInGraph?: boolean | undefined;
         hideNodeDefinition?: boolean | undefined;
         hideJobId?: boolean | undefined;
+        hideDownloadLogs?: boolean | undefined;
         isOwner?: boolean | undefined;
         wideResults?: boolean | undefined;
     };

package/package/components/FlowStatusViewerInner.svelte

@@ -22,7 +22,7 @@ import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 const dispatch = createEventDispatcher();
-let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition } = getContext('FlowStatusViewer');
+let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs } = getContext('FlowStatusViewer');
 export let jobId;
 export let initialJob = undefined;
 export let workspaceId = undefined;
@@ -94,6 +94,9 @@ let innerModules = [];
 function updateStatus(status) {
     innerModules =
         status?.modules?.concat(status.failure_module.type != 'WaitingForPriorSteps' ? status.failure_module : []) ?? [];
+    if (status.preprocessor_module) {
+        innerModules.unshift(status.preprocessor_module);
+    }
     updateInnerModules();
     let count = status.retry?.fail_count;
     if (count) {
@@ -339,7 +342,8 @@ function onJobsLoaded(mod, job, force) {
                 flow_jobs: mod.flow_jobs,
                 flow_jobs_success: mod.flow_jobs_success,
                 iteration_total: mod.iterator?.itered?.length,
-                retries: mod?.failed_retries?.length
+                retries: mod?.failed_retries?.length,
+                skipped: mod.skipped
                 // retries: $flowStateStore?.raw_flow
             }, force);
             setDurationStatusByJob(mod.id, job.id, {
@@ -536,6 +540,7 @@ let wrapperHeight = 0;
 								result={job.result}
 								logs={job.logs}
 								durationStates={localDurationStatuses}
+								downloadLogs={!hideDownloadLogs}
 							/>
 						</div>
 					{/if}
@@ -660,6 +665,7 @@ let wrapperHeight = 0;
 					{/each}
 				</div>
 			{:else if innerModules.length > 0 && (job.raw_flow?.modules.length ?? 0) > 0}
+				{@const hasPreprocessor = innerModules[0]?.id == 'preprocessor' ? 1 : 0}
 				<ul class="w-full">
 					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
 						Step-by-step
@@ -669,10 +675,12 @@ let wrapperHeight = 0;
 						{#if render}
 							<div class="line w-8 h-10" />
 							<h3 class="text-tertiary mb-2 w-full">
-								{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
+								{#if mod.id === 'preprocessor'}
+									<h3>Preprocessor module</h3>
+								{:else if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length + hasPreprocessor}
 									Step
 									<span class="font-medium text-primary">
-										{i + 1}
+										{i + 1 - hasPreprocessor}
 									</span>
 									out of
 									<span class="font-medium text-primary">{job?.raw_flow?.modules.length}</span>
@@ -844,6 +852,8 @@ let wrapperHeight = 0;
 								globalRefreshes[detail.moduleId]?.({ job: detail.id, index: detail.index })
 							}}
 							modules={job.raw_flow?.modules ?? []}
+							failureModule={job.raw_flow?.failure_module}
+							preprocessorModule={job.raw_flow?.preprocessor_module}
 						/>
 					</div>
 					<div
@@ -888,6 +898,7 @@ let wrapperHeight = 0;
 											result={job['result']}
 											logs={job.logs ?? ''}
 											durationStates={localDurationStatuses}
+											downloadLogs={!hideDownloadLogs}
 										/>
 									{:else if selectedNode == 'start'}
 										{#if job.args}
@@ -917,7 +928,11 @@ let wrapperHeight = 0;
 											<span class="pl-1 text-tertiary text-lg pt-4">Selected subflow</span>
 										{/if}
 										<div class="px-2 flex gap-2 min-w-0 w-full">
-											<ModuleStatus type={node.type} scheduled_for={node.scheduled_for} />
+											<ModuleStatus
+												type={node.type}
+												scheduled_for={node.scheduled_for}
+												skipped={node.skipped}
+											/>
 											{#if node.duration_ms}
 												<Badge>
 													<Hourglass class="mr-2" size={10} />
@@ -959,6 +974,7 @@ let wrapperHeight = 0;
 											tag={node.tag}
 											logs={node.logs}
 											durationStates={localDurationStatuses}
+											downloadLogs={!hideDownloadLogs}
 										/>
 									{:else}
 										<p class="p-2 text-tertiary italic"

package/package/components/FlowTimeline.svelte

@@ -146,10 +146,10 @@ onDestroy(() => {
 				{/if}
 
 				<div class="px-2 py-2 grid grid-cols-6 w-full">
-					<div>{k}</div>
-					<div class="col-span-5 flex min-h-6 w-full">
+					<div class="truncate">{k}</div>
+					<div class="col-span-5 flex min-h-6">
 						{#if min && total}
-							<div class="flex flex-col gap-2 w-full p-2">
+							<div class="flex flex-col gap-2 w-full p-2 ml-4">
 								{#each items?.[k] ?? [] as b}
 									{@const waitingLen = b?.created_at
 										? b.started_at

package/package/components/FlowViewer.svelte

@@ -1,9 +1,9 @@
 <script>import { Tab, Tabs, TabContent } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
-import FieldHeader from './FieldHeader.svelte';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import FlowViewerInner from './FlowViewerInner.svelte';
+import FlowInputViewer from './FlowInputViewer.svelte';
 export let flow;
 export let initialOpen = undefined;
 export let noSide = false;
@@ -15,9 +15,6 @@ let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
 }
-function toAny(x) {
-    return x;
-}
 </script>
 
 <HighlightTheme />
@@ -41,23 +38,7 @@ function toAny(x) {
 					<span>Flow Input</span>
 				</p>
 				{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
-					<ul class="my-2">
-						{#each Object.entries(flow.schema.properties) as [inp, v]}
-							<li class="list-disc flex flex-row">
-								<FieldHeader
-									label={inp}
-									required={flow.schema.required?.includes(inp)}
-									type={toAny(v)?.type}
-									contentEncoding={toAny(v)?.contentEncoding}
-									format={toAny(v)?.format}
-								/><span class="ml-4 mt-2 text-xs"
-									>{toAny(v)?.default != undefined
-										? 'default: ' + JSON.stringify(toAny(v)?.default)
-										: ''}</span
-								>
-							</li>
-						{/each}
-					</ul>
+					<FlowInputViewer schema={flow.schema} />
 				{:else}
 					<div class="text-secondary text-xs italic mb-4">No inputs</div>
 				{/if}

package/package/components/HighlightCode.svelte

@@ -9,6 +9,7 @@ import sql from 'svelte-highlight/languages/sql';
 import powershell from 'svelte-highlight/languages/powershell';
 import php from 'svelte-highlight/languages/php';
 import rust from 'svelte-highlight/languages/rust';
+import yaml from 'svelte-highlight/languages/yaml';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
@@ -50,6 +51,8 @@ function getLang(lang) {
             return php;
         case 'rust':
             return rust;
+        case 'ansible':
+            return yaml;
         default:
             return typescript;
     }