windmill-components 1.613.4 → 1.623.1

package/package/components/flows/types.d.ts

@@ -2,7 +2,6 @@ import type { Job, OpenFlow } from '../../gen';
 import type { History } from '../../history.svelte';
 import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
-import type FlowEditorDrawer from './content/FlowEditorDrawer.svelte';
 import type { FlowState } from './flowState';
 import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui';
 import type Editor from '../Editor.svelte';
@@ -58,7 +57,6 @@ export type FlowEditorContext = {
     } | undefined>;
     previewArgs: StateStore<Record<string, any>>;
     scriptEditorDrawer: Writable<ScriptEditorDrawer | undefined>;
-    flowEditorDrawer: Writable<FlowEditorDrawer | undefined>;
     history: History<OpenFlow>;
     pathStore: Writable<string>;
     flowStore: StateStore<ExtendedOpenFlow>;

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -131,10 +131,10 @@ const usedRepositoryPaths = $derived(gitSyncContext.repositories
 // Determine display title based on variant and legacy status
 const displayTitle = $derived(variant === 'primary-sync'
     ? mode === 'sync'
-        ? 'Git Sync'
-        : 'Git Promotion'
+        ? 'Sync mode'
+        : 'Promotion mode'
     : variant === 'primary-promotion'
-        ? 'Git Promotion'
+        ? 'Promotion mode'
         : isLegacy
             ? 'Legacy promotion repository'
             : isSecondary
@@ -152,7 +152,7 @@ const displayDescription = $derived(variant === 'primary-sync' || variant === 'p
     ? mode === 'sync'
         ? `Changes will be committed directly to the ${targetOrDefaultBranch} branch`
         : mode === 'promotion'
-            ? `Changes will be made to new branches whose promotion target is the ${targetOrDefaultBranch} branch of the repo to promote to. Remember to also setup Git Sync between the promotion workspace and repo for changes to be deployed when these branches are merged.`
+            ? `Changes will be made to new branches whose promotion target is the ${targetOrDefaultBranch} branch`
             : null
     : null);
 const shouldShowEmptyState = $derived(showEmptyState || (!repo && (variant === 'primary-sync' || variant === 'primary-promotion')));
@@ -333,9 +333,7 @@ function handlePullSettings() {
 				{:else if resourceInfo?.url}
 					<div class="flex items-center gap-2 text-secondary">
 						<span class="font-medium">Git URL:</span>
-						<code class="bg-surface-secondary px-2 py-1 rounded text-primary"
-							>{resourceInfo.url}</code
-						>
+						<code class="bg-surface-secondary px-2 py-1 rounded text-primary">{resourceInfo.url}</code>
 					</div>
 				{:else if resourceInfo?.error}
 					<div class="text-red-600">{resourceInfo.error}</div>
@@ -484,13 +482,7 @@ function handlePullSettings() {
 			<div class="flex flex-col">
 				<h3 class="text-xs font-semibold text-emphasis">{displayTitle}</h3>
 				{#if displayDescription}
-					<p class="text-2xs text-secondary">{displayDescription}
-					{#if mode === 'promotion'}
-						<a target="_blank" href="https://www.windmill.dev/docs/advanced/deploy_gh_gl"
-							>Learn more about Git Promotion</a
-						>
-					{/if}
-					</p>
+					<p class="text-2xs text-secondary">{displayDescription}</p>
 				{/if}
 			</div>
 		</div>
@@ -501,9 +493,9 @@ function handlePullSettings() {
 			<div class="text-center mb-4">
 				<p class="text-primary text-xs font-normal mb-2">
 					{#if mode === 'sync'}
-						No Git Sync repository configured. Add one to enable direct synchronization.
+						No sync repository configured. Add one to enable direct synchronization.
 					{:else if mode === 'promotion'}
-						No Git Promotion repository configured. Add one to enable branch-based workflows.
+						No promotion repository configured. Add one to enable branch-based workflows.
 					{:else}
 						No repository configured.
 					{/if}

package/package/components/home/ItemsList.svelte

@@ -3,7 +3,7 @@ import { Button, Skeleton } from '../common';
 import Toggle from '../Toggle.svelte';
 import { AppService, FlowService, ScriptService, RawAppService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { ChevronsDownUp, ChevronsUpDown, Code2, LayoutDashboard, ListFilterPlus, SearchCode } from 'lucide-svelte';
+import { Code2, FoldVertical, LayoutDashboard, ListFilterPlus, SearchCode, UnfoldVertical } from 'lucide-svelte';
 import { HOME_SEARCH_SHOW_FLOW, HOME_SEARCH_PLACEHOLDER } from '../../consts';
 import SearchItems from '../SearchItems.svelte';
 import ListFilters from './ListFilters.svelte';
@@ -257,7 +257,7 @@ $effect(() => {
 	</DrawerContent>
 </Drawer>
 
-<CenteredPage wrapperClasses="w-full" handleOverflow={false}>
+<CenteredPage>
 	<div
 		class="flex flex-wrap gap-2 items-center justify-between w-full"
 		use:triggerableByAI={{
@@ -397,11 +397,11 @@ $effect(() => {
 				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
 				{#if treeView}
 					<Button
-						unifiedSize="sm"
-						variant="subtle"
+						size="xs2"
+						variant="default"
 						on:click={() => (collapseAll = !collapseAll)}
 						startIcon={{
-							icon: collapseAll ? ChevronsUpDown : ChevronsDownUp
+							icon: collapseAll ? UnfoldVertical : FoldVertical
 						}}
 					>
 						{#if collapseAll}

package/package/components/home/TutorialBanner.svelte

@@ -5,12 +5,11 @@ import { goto } from '$app/navigation';
 import { sendUserToast } from '../../toast';
 import { getLocalSetting, storeLocalSetting } from '../../utils';
 import { skipAllTodos, syncTutorialsTodos, TUTORIAL_BANNER_DISMISSED_KEY } from '../../tutorialUtils';
-import { tutorialsToDo, userStore, skippedAll } from '../../stores';
+import { tutorialsToDo, userStore } from '../../stores';
 import { TUTORIALS_CONFIG } from '../../tutorials/config';
 import { hasRoleAccess } from '../../tutorials/roleUtils';
 import { onMount } from 'svelte';
-let isDismissed = $state(false);
-let hasCompletedAny = $state(false);
+let isDismissed = $state(true);
 /**
  * Get all tutorial indexes that are accessible to the current user based on their role.
  * Automatically recomputes when $userStore changes.
@@ -36,30 +35,24 @@ onMount(async () => {
     try {
         // Sync tutorial progress from backend first
         await syncTutorialsTodos();
-        // Check if banner has been manually dismissed via X button (soft dismiss, per-device)
+        // Check if banner has been manually dismissed
         const manuallyDismissed = getLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY) === 'true';
-        if (manuallyDismissed) {
-            isDismissed = true;
-            return;
-        }
-        // Check if user deliberately skipped all tutorials (permanent dismiss, from backend)
-        if ($skippedAll) {
-            isDismissed = true;
-            return;
-        }
         // Safe to check tutorialsToDo here since we awaited syncTutorialsTodos() above
-        // Filter tutorialsToDo to only include tutorials accessible to the user's role
+        // Filter tutorialsToDo to only include tutorials accessible to the user
         const remainingAccessibleTutorials = $tutorialsToDo.filter((index) => accessibleTutorialIndexes.has(index));
-        // Calculate if user has completed at least one tutorial (for banner wording)
-        // This determines whether to show "New tutorial available!" or "Learn with interactive tutorials"
-        hasCompletedAny = remainingAccessibleTutorials.length < accessibleTutorialIndexes.size;
-        // Hide banner if all accessible tutorials are completed (but can reappear with new tutorials)
-        if (remainingAccessibleTutorials.length === 0) {
+        // Check if all accessible tutorials are completed
+        const allTutorialsCompleted = remainingAccessibleTutorials.length === 0;
+        // Dismiss banner if manually dismissed OR all accessible tutorials completed
+        if (manuallyDismissed || allTutorialsCompleted) {
             isDismissed = true;
-            return;
+            // Set localStorage when all tutorials are completed to persist dismissal
+            // Note: This will re-set the key on every page load if localStorage is cleared
+            // but tutorials remain completed in backend. This is intentional - the banner
+            // should stay hidden if tutorials are completed, regardless of localStorage state.
+            if (allTutorialsCompleted) {
+                storeLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY, 'true');
+            }
         }
-        // Show banner - user has accessible tutorials to complete
-        isDismissed = false;
     }
     catch (error) {
         console.error('Failed to sync tutorial progress:', error);
@@ -68,10 +61,9 @@ onMount(async () => {
     }
 });
 async function handleSkipAllTutorials() {
-    // Skip all tutorials and set skipped_all flag in backend (permanent)
     await skipAllTodos();
     await syncTutorialsTodos();
-    // No need to set localStorage - backend skipped_all flag is the source of truth
+    storeLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY, 'true');
     isDismissed = true;
 }
 function dismissBanner() {
@@ -99,18 +91,10 @@ function goToTutorials() {
 			<GraduationCap size={20} class="text-accent-primary flex-shrink-0" />
 			<div class="flex-1 min-w-0">
 				<div class="text-emphasis flex-wrap text-left text-xs font-semibold">
-					{#if hasCompletedAny}
-						New tutorial available!
-					{:else}
-						Learn with interactive tutorials
-					{/if}
+					Learn with interactive tutorials
 				</div>
 				<div class="text-hint text-3xs truncate text-left font-normal">
-					{#if hasCompletedAny}
-						Continue your learning journey and master new Windmill skills.
-					{:else}
-						Get started quickly with step-by-step guides on building flows, scripts, and more.
-					{/if}
+					Get started quickly with step-by-step guides on building flows, scripts, and more.
 				</div>
 			</div>
 		</div>

package/package/components/icons/CssIcon.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">"use strict";
-let { height = '24px', width = '24px', size = undefined } = $props();
-const derivedWidth = $derived(size ? size : width);
-const derivedHeight = $derived(size ? size : height);
-</script>
-
-<svg
-	width={derivedWidth}
-	height={derivedHeight}
-	viewBox="0 0 32 32"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path d="M6 28L4 3H28L26 28L16 31L6 28Z" fill="#1172B8" />
-	<path d="M26 5H16V29.5L24 27L26 5Z" fill="#33AADD" />
-	<path
-		d="M19.5 17.5H9.5L9 14L17 11.5H9L8.5 8.5H24L23.5 12L17 14.5H23L22 24L16 26L10 24L9.5 19H12.5L13 21.5L16 22.5L19 21.5L19.5 17.5Z"
-		fill="white"
-	/>
-</svg>

package/package/components/icons/CssIcon.svelte.d.ts

@@ -1,8 +1,26 @@
-interface Props {
-    height?: string;
-    width?: string;
-    size?: number;
-}
-declare const CssIcon: import("svelte").Component<Props, {}, "">;
-type CssIcon = ReturnType<typeof CssIcon>;
 export default CssIcon;
+type CssIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CssIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/package/components/icons/JavaScriptIcon.svelte

@@ -1,16 +1,8 @@
 <script lang="ts">"use strict";
-let { height = '24px', width = '24px', size = undefined } = $props();
-const derivedWidth = $derived(size ? size : width);
-const derivedHeight = $derived(size ? size : height);
+let { height = '24px', width = '24px' } = $props();
 </script>
 
-<svg
-	width={derivedWidth}
-	height={derivedHeight}
-	viewBox="0 0 32 32"
-	xmlns="http://www.w3.org/2000/svg"
-	version="1.1"
->
+<svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
 	<path d="M0 0H32V32H0V0Z" fill="#F7DF1E" />
 	<path
 		d="M8.41397 26.7415L10.8628 25.2595C11.3353 26.0972 11.765 26.8059 12.7959 26.8059C13.784 26.8059 14.407 26.4193 14.407 24.9158V14.6911H17.4142V24.9584C17.4142 28.073 15.5885 29.4907 12.9248 29.4907C10.5192 29.4907 9.12274 28.2448 8.41392 26.7413"

package/package/components/icons/JavaScriptIcon.svelte.d.ts

@@ -1,7 +1,6 @@
 interface Props {
     height?: string;
     width?: string;
-    size?: number;
 }
 declare const JavaScriptIcon: import("svelte").Component<Props, {}, "">;
 type JavaScriptIcon = ReturnType<typeof JavaScriptIcon>;

package/package/components/icons/JsonIcon.svelte

@@ -1,14 +1,8 @@
 <script lang="ts">"use strict";
-let { height = '24px', width = '24px', size = undefined } = $props();
-const derivedWidth = $derived(size ? size : width);
-const derivedHeight = $derived(size ? size : height);
+let { height = '24px', width = '24px' } = $props();
 </script>
 
-<svg
-	width={derivedWidth}
-	height={derivedHeight}
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 -960 960 960"
+<svg {width} {height} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
 	><path
 		fill="#f9a825"
 		d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"

package/package/components/icons/JsonIcon.svelte.d.ts

@@ -1,7 +1,6 @@
 interface Props {
     height?: string;
     width?: string;
-    size?: number;
 }
 declare const JsonIcon: import("svelte").Component<Props, {}, "">;
 type JsonIcon = ReturnType<typeof JsonIcon>;

package/package/components/icons/ReactIcon.svelte

@@ -1,16 +1,8 @@
 <script lang="ts">"use strict";
-let { height = '24px', width = '24px', size = undefined } = $props();
-const derivedWidth = $derived(size ? size : width);
-const derivedHeight = $derived(size ? size : height);
+let { height = '24px', width = '24px' } = $props();
 </script>
 
-<svg
-	width={derivedWidth}
-	height={derivedHeight}
-	viewBox="0 0 600 600"
-	xmlns="http://www.w3.org/2000/svg"
-	version="1.1"
->
+<svg {width} {height} viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
 	<g transform="translate(300, 300)">
 		<!-- Central circle -->
 		<circle fill="#61DAFB" r="50" />

package/package/components/icons/ReactIcon.svelte.d.ts

@@ -1,7 +1,6 @@
 interface Props {
     height?: string;
     width?: string;
-    size?: number;
 }
 declare const ReactIcon: import("svelte").Component<Props, {}, "">;
 type ReactIcon = ReturnType<typeof ReactIcon>;

package/package/components/icons/SvelteIcon.svelte

@@ -1,16 +1,8 @@
 <script lang="ts">"use strict";
-let { height = '24px', width = '24px', size = undefined } = $props();
-const derivedWidth = $derived(size ? size : width);
-const derivedHeight = $derived(size ? size : height);
+let { height = '24px', width = '24px' } = $props();
 </script>
 
-<svg
-	width={derivedWidth}
-	height={derivedHeight}
-	viewBox="0 0 32 32"
-	xmlns="http://www.w3.org/2000/svg"
-	version="1.1"
->
+<svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
 	<path
 		d="M27.5342 4.35822C24.589 0.144416 18.7724 -1.10443 14.5671 1.5745L7.1816 6.28105C5.16609 7.54695 3.77642 9.60267 3.35293 11.9448C2.99976 13.8998 3.30868 15.9168 4.23081 17.6765C3.59882 18.6352 3.16817 19.7123 2.96497 20.8425C2.53883 23.2342 3.09525 25.6967 4.50833 27.6729C7.45346 31.8867 13.2701 33.1356 17.4754 30.4566L24.8609 25.7699C26.8739 24.5014 28.2628 22.4469 28.6896 20.1062C29.0414 18.1518 28.7315 16.1358 27.8089 14.3773C28.4405 13.4181 28.872 12.3413 29.0775 11.2113C29.5024 8.8196 28.9461 6.35758 27.5342 4.38088"
 		fill="#FF3E00"

package/package/components/icons/SvelteIcon.svelte.d.ts

@@ -1,7 +1,6 @@
 interface Props {
     height?: string;
     width?: string;
-    size?: number;
 }
 declare const SvelteIcon: import("svelte").Component<Props, {}, "">;
 type SvelteIcon = ReturnType<typeof SvelteIcon>;

package/package/components/icons/VueIcon.svelte

@@ -1,16 +1,8 @@
 <script lang="ts">"use strict";
-let { height = '24px', width = '24px', size = 16 } = $props();
-const derivedWidth = $derived(size ? size : width);
-const derivedHeight = $derived(size ? size : height);
+let { height = '24px', width = '24px' } = $props();
 </script>
 
-<svg
-	width={derivedWidth}
-	height={derivedHeight}
-	viewBox="0 0 24 24"
-	xmlns="http://www.w3.org/2000/svg"
-	version="1.1"
->
+<svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
 	<path
 		d="M25.6 2.1875H32L16 29.7875L0 2.1875H6.32H12.24L16 8.5875L19.68 2.1875H25.6Z"
 		fill="#41B883"

package/package/components/icons/VueIcon.svelte.d.ts

@@ -1,7 +1,6 @@
 interface Props {
     height?: string;
     width?: string;
-    size?: number;
 }
 declare const VueIcon: import("svelte").Component<Props, {}, "">;
 type VueIcon = ReturnType<typeof VueIcon>;

package/package/components/instanceSettings.d.ts

@@ -1,5 +1,4 @@
 import type { ButtonType } from './common/button/model';
-export declare const OTEL_TRACING_PROXY_LANGUAGES: readonly ["python3", "deno", "bun", "go", "bash", "rust", "csharp", "nu", "ruby"];
 export interface Setting {
     label: string;
     description?: string;
@@ -13,7 +12,7 @@ export interface Setting {
         tooltip?: string;
         value?: string;
     }[];
-    fieldType: 'text' | 'number' | 'boolean' | 'password' | 'select' | 'select_python' | 'textarea' | 'codearea' | 'seconds' | 'email' | 'license_key' | 'object_store_config' | 'critical_error_channels' | 'critical_alerts_on_db_oversize' | 'slack_connect' | 'smtp_connect' | 'indexer_rates' | 'otel' | 'otel_tracing_proxy' | 'secret_backend';
+    fieldType: 'text' | 'number' | 'boolean' | 'password' | 'select' | 'select_python' | 'textarea' | 'codearea' | 'seconds' | 'email' | 'license_key' | 'object_store_config' | 'critical_error_channels' | 'critical_alerts_on_db_oversize' | 'slack_connect' | 'smtp_connect' | 'indexer_rates' | 'otel';
     storage: SettingStorage;
     advancedToggle?: {
         label: string;

package/package/components/instanceSettings.js

@@ -1,15 +1,3 @@
-// Languages that support HTTP request tracing via OTEL proxy
-export const OTEL_TRACING_PROXY_LANGUAGES = [
-    'python3',
-    'deno',
-    'bun',
-    'go',
-    'bash',
-    'rust',
-    'csharp',
-    'nu',
-    'ruby'
-];
 export const scimSamlSetting = [
     {
         label: 'SCIM token',
@@ -213,7 +201,7 @@ export const settings = {
                 {
                     label: 'Latest Stable',
                     value: 'default',
-                    tooltip: 'python-3.12'
+                    tooltip: 'python-3.11'
                 },
                 {
                     label: '3.10'
@@ -379,15 +367,6 @@ export const settings = {
             storage: 'setting',
             ee_only: ''
         },
-        {
-            label: 'HTTP Request Tracing',
-            description: 'Capture HTTP/HTTPS requests from job scripts as OpenTelemetry spans. Visible in job details and exported to your OTEL collector if configured. Toggling restarts workers.',
-            key: 'otel_tracing_proxy',
-            fieldType: 'otel_tracing_proxy',
-            storage: 'setting',
-            ee_only: 'HTTP Request Tracing is an EE feature',
-            defaultValue: () => ({ enabled: false, enabled_languages: [...OTEL_TRACING_PROXY_LANGUAGES] })
-        },
         {
             label: 'Prometheus',
             description: 'Expose Prometheus metrics for workers and servers on port 8001 at /metrics. <a target="_blank" href="https://www.windmill.dev/docs/advanced/instance_settings#expose-metrics">Learn more</a>',
@@ -413,16 +392,6 @@ export const settings = {
             fieldType: 'boolean',
             storage: 'setting'
         }
-    ],
-    'Secret Storage': [
-        {
-            label: 'Secret Storage Backend',
-            description: 'Configure where secrets (secret variables) are stored. By default, secrets are encrypted and stored in the database. Enterprise Edition supports HashiCorp Vault as an external secret store.',
-            key: 'secret_backend',
-            fieldType: 'secret_backend',
-            storage: 'setting',
-            ee_only: 'HashiCorp Vault integration is an Enterprise Edition feature'
-        }
     ]
 };
 export const settingsKeys = Object.keys(settings);

package/package/components/jobs/JobPreview.svelte

@@ -13,9 +13,8 @@ import { Badge } from '../common';
 import { forLater } from '../../forLater';
 import DurationMs from '../DurationMs.svelte';
 import { workspaceStore } from '../../stores';
-import { twMerge } from 'tailwind-merge';
 const POPUP_HEIGHT = 320;
-let { id, children, class: clazz } = $props();
+let { id, children } = $props();
 let job = $state(undefined);
 let hovered = $state(false);
 let timeout;
@@ -84,51 +83,11 @@ onDestroy(() => {
 	{#if open}
 		<div
 			transition:fade|local={{ duration: 50 }}
-			class={twMerge(
-				'absolute z-50  -left-10 bg-surface rounded border shadow-md flex flex-col gap-4 items-start w-[600px] h-80 overflow-hidden',
-				popupOnTop ? 'bottom-[35px]' : 'top-[35px]',
-				clazz
-			)}
+			class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-surface rounded
+			border shadow-xl flex justify-start items-start w-[600px] h-80
+			overflow-hidden"
 		>
-			<div class="w-full flex flex-row grow min-h-0 gap-2">
-				<div class="w-1/2 h-full overflow-auto space-y-1">
-					<span class="text-xs font-normal text-secondary">Arguments</span>
-					<JobArgs
-						id={job?.id}
-						workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
-						args={job?.args}
-					/>
-				</div>
-				<div class="w-1/2 h-full overflow-auto space-y-1">
-					{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-						<div class="text-xs font-semibold text-emphasis mb-1">
-							<div>Job is scheduled for</div>
-							<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
-						</div>
-					{/if}
-					{#if job?.type === 'CompletedJob'}
-						<span class="text-xs font-normal text-secondary mb-1">Result</span>
-						<DisplayResult
-							workspaceId={job?.workspace_id}
-							jobId={job?.id}
-							{result}
-							disableExpand
-							language={job?.language}
-						/>
-					{: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>
-			</div>
-			<div class="flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
+			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
 				{#if job?.started_at}
 					<Badge>{new Date(job?.['started_at']).toLocaleString()}</Badge>
 				{/if}
@@ -148,6 +107,40 @@ onDestroy(() => {
 					{/each}
 				{/if}
 			</div>
+			<div class="w-1/2 h-full overflow-auto">
+				<JobArgs
+					id={job?.id}
+					workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
+					args={job?.args}
+				/>
+			</div>
+			<div class="w-1/2 h-full overflow-auto p-2">
+				{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+					<div class="text-xs font-semibold text-emphasis mb-1">
+						<div>Job is scheduled for</div>
+						<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
+					</div>
+				{/if}
+				{#if job?.type === 'CompletedJob'}
+					<DisplayResult
+						workspaceId={job?.workspace_id}
+						jobId={job?.id}
+						{result}
+						disableExpand
+						language={job?.language}
+					/>
+				{: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>
 		</div>
 	{/if}
 </div>

package/package/components/jobs/JobPreview.svelte.d.ts

@@ -2,7 +2,6 @@ export declare const openStore: import("svelte/store").Writable<string>;
 interface Props {
     id: string;
     children?: import('svelte').Snippet<[any]>;
-    class?: string;
 }
 declare const JobPreview: import("svelte").Component<Props, {}, "">;
 type JobPreview = ReturnType<typeof JobPreview>;