windmill-components 1.309.7 → 1.352.0

package/package/components/WorkspaceGroup.svelte

@@ -1,9 +1,9 @@
-<script>import { Plus, X } from 'lucide-svelte';
+<script>import { Copy, Plus, RefreshCcwIcon, Settings, Trash, X } from 'lucide-svelte';
 import { Alert, Button, Drawer } from './common';
 import Multiselect from 'svelte-multiselect';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
-import { ConfigService } from '../gen';
+import { ConfigService, WorkspaceService } from '../gen';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../toast';
@@ -15,6 +15,7 @@ import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Section from './Section.svelte';
 import Label from './Label.svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
+import YAML from 'yaml';
 export let name;
 export let config;
 export let activeWorkers;
@@ -62,9 +63,9 @@ const defaultTags = [
     'powershell',
     'dependency',
     'flow',
-    'hub',
     'other',
-    'bun'
+    'bun',
+    'php'
 ];
 const nativeTags = [
     'nativets',
@@ -99,6 +100,13 @@ $: {
         }
     }
 }
+let workspaceTag = '';
+export let defaultTagPerWorkspace = undefined;
+let workspaces = [];
+async function listWorkspaces() {
+    workspaces = await WorkspaceService.listWorkspacesAsSuperAdmin();
+}
+$: $superadmin && listWorkspaces();
 const dispatch = createEventDispatcher();
 async function deleteWorkerGroup() {
     await ConfigService.deleteConfig({ name: 'worker__' + name });
@@ -283,12 +291,21 @@ let createdTags = [];
 								size="xs"
 								on:click={() => {
 									if (nconfig != undefined) {
-										nconfig.worker_tags = defaultTags.concat(nativeTags)
+										nconfig.worker_tags = defaultTagPerWorkspace
+											? defaultTags.concat(nativeTags).map((nt) => `${nt}-${workspaceTag}`)
+											: defaultTags.concat(nativeTags)
+
 										dirty = true
 									}
 								}}
+								disabled={defaultTagPerWorkspace && !workspaceTag}
 							>
-								Reset to all tags <Tooltip>{defaultTags.concat(nativeTags).join(', ')}</Tooltip>
+								Reset to all tags <Tooltip
+									>{(defaultTagPerWorkspace
+										? defaultTags.concat(nativeTags).map((nt) => `${nt}-${workspaceTag}`)
+										: defaultTags.concat(nativeTags)
+									).join(', ')}</Tooltip
+								>
 							</Button>
 							<Button
 								variant="contained"
@@ -296,12 +313,20 @@ let createdTags = [];
 								size="xs"
 								on:click={() => {
 									if (nconfig != undefined) {
-										nconfig.worker_tags = defaultTags
+										nconfig.worker_tags = defaultTagPerWorkspace
+											? defaultTags.map((nt) => `${nt}-${workspaceTag}`)
+											: defaultTags
 										dirty = true
 									}
 								}}
+								disabled={defaultTagPerWorkspace && !workspaceTag}
 							>
-								Reset to all tags minus native ones <Tooltip>{defaultTags.join(', ')}</Tooltip>
+								Reset to all tags minus native ones <Tooltip
+									>{(defaultTagPerWorkspace
+										? defaultTags.map((nt) => `${nt}-${workspaceTag}`)
+										: defaultTags
+									).join(', ')}</Tooltip
+								>
 							</Button>
 							<Button
 								variant="contained"
@@ -309,13 +334,37 @@ let createdTags = [];
 								size="xs"
 								on:click={() => {
 									if (nconfig != undefined) {
-										nconfig.worker_tags = nativeTags
+										nconfig.worker_tags = defaultTagPerWorkspace
+											? nativeTags.map((nt) => `${nt}-${workspaceTag}`)
+											: nativeTags
 										dirty = true
 									}
 								}}
+								disabled={defaultTagPerWorkspace && !workspaceTag}
 							>
-								Reset to native tags <Tooltip>{nativeTags.join(', ')}</Tooltip>
+								Reset to native tags <Tooltip
+									>{(defaultTagPerWorkspace
+										? nativeTags.map((nt) => `${nt}-${workspaceTag}`)
+										: nativeTags
+									).join(', ')}</Tooltip
+								>
 							</Button>
+
+							{#if defaultTagPerWorkspace}
+								<AutoComplete
+									bind:selectedItem={workspaceTag}
+									noInputStyles
+									hideArrow={true}
+									items={workspaces.map((w) => w.id)}
+									inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary ' +
+										(!workspaceTag ? '!border-red-600/60 !dark:border-red-400/70' : '')}
+									dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
+									className="!font-gray-600 !font-primary !bg-surface-primary"
+									create
+									onCreate={(c) => c}
+									placeholder="Workspace ID"
+								/>
+							{/if}
 						</div>
 						<div class="max-w mt-2 items-center gap-1 pt-2">
 							{#if nconfig?.worker_tags !== undefined && nconfig?.worker_tags.length > 0}
@@ -665,7 +714,7 @@ let createdTags = [];
 								dirtyCode = true
 								const code = e.detail
 								if (code != '') {
-									nconfig.init_bash = code
+									nconfig.init_bash = code?.replace(/\r\n/g, '\n')
 								} else {
 									nconfig.init_bash = undefined
 								}
@@ -716,8 +765,7 @@ let createdTags = [];
 	</DrawerContent>
 </Drawer>
 
-<div class="flex gap-2 items-center"
-	><h4 class="py-4 truncate w-40 text-primary">{name}</h4>
+<div class="flex gap-2 items-center justify-end flex-row my-2">
 	{#if $superadmin}
 		<Button
 			color="light"
@@ -727,12 +775,30 @@ let createdTags = [];
 				loadNConfig()
 				drawer.openDrawer()
 			}}
+			startIcon={{ icon: config == undefined ? Plus : Settings }}
 		>
 			<div class="flex flex-row gap-1 items-center">
-				{config == undefined ? 'create' : 'edit'} config
+				{config == undefined ? 'Create' : 'Edit'} config
 			</div>
 		</Button>
 
+		<Button
+			color="light"
+			size="xs"
+			on:click={() => {
+				navigator.clipboard.writeText(
+					YAML.stringify({
+						name,
+						...config
+					})
+				)
+				sendUserToast('Worker config copied to clipboard as YAML')
+			}}
+			startIcon={{ icon: Copy }}
+		>
+			Copy config
+		</Button>
+
 		{#if config}
 			<Button
 				color="light"
@@ -744,9 +810,10 @@ let createdTags = [];
 						openDelete = true
 					}
 				}}
+				startIcon={{ icon: Trash }}
 				btnClasses="text-red-400"
 			>
-				delete config
+				Delete config
 			</Button>
 		{/if}
 
@@ -759,8 +826,9 @@ let createdTags = [];
 				openClean = true
 			}}
 			btnClasses="text-red-400"
+			startIcon={{ icon: RefreshCcwIcon }}
 		>
-			clean cache
+			Clean cache
 		</Button>
 	{:else if config}
 		<Button
@@ -774,9 +842,4 @@ let createdTags = [];
 			<div class="flex flex-row gap-1 items-center"> config </div>
 		</Button>
 	{/if}
-	{#if activeWorkers > 1}
-		<span class="ml-4 text-xs"
-			>{activeWorkers} Workers <Tooltip>Number of workers active in the last 10s</Tooltip></span
-		>
-	{/if}
 </div>

package/package/components/WorkspaceGroup.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         };
         activeWorkers: number;
         customTags: string[] | undefined;
+        defaultTagPerWorkspace?: boolean | undefined;
     };
     events: {
         reload: CustomEvent<any>;

package/package/components/app_connect.d.ts

@@ -0,0 +1,7 @@
+export declare const apiTokenApps: Record<string, {
+    img?: string;
+    instructions: string[];
+    linkedSecret?: string;
+}>;
+export declare function linkedSecretValue(x: string): number;
+export declare function forceSecretValue(resourceType: string): string | undefined;

package/package/components/app_connect.js

@@ -0,0 +1,78 @@
+export const apiTokenApps = {
+    airtable: {
+        img: '/airtable_connect.png',
+        instructions: [
+            'Go to <a href="https://airtable.com/create/tokens" target="_blank" rel=”noopener noreferrer”>https://airtable.com/create/tokens</a>',
+            'Click on "Create new token"',
+            'Set a name, specify the scopes or the access level and click on "Create token"',
+            'Copy the token'
+        ]
+    },
+    discord_webhook: {
+        img: '/discord_webhook.png',
+        instructions: ['Click on Server Settings', 'Click on Integration', 'Find "Webhooks"'],
+        linkedSecret: 'webhook_url'
+    },
+    toggl: {
+        img: '/toggl_connect.png',
+        instructions: [
+            'Go to <a href="https://track.toggl.com/profile" target="_blank" rel=”noopener noreferrer”>https://track.toggl.com/profile</a>',
+            'Find "API Token"'
+        ]
+    },
+    mailchimp: {
+        img: '/mailchimp_connect.png',
+        instructions: [
+            'Go to <a href="https://admin.mailchimp.com/account/api" target="_blank" rel=”noopener noreferrer”>https://admin.mailchimp.com/account/api</a>',
+            'Find "Your API Keys"'
+        ]
+    },
+    sendgrid: {
+        img: '/sendgrid_connect.png',
+        instructions: [
+            'Go to <a href="https://app.sendgrid.com/settings/api_keys" target="_blank" rel=”noopener noreferrer”>https://app.sendgrid.com/settings/api_keys</a>',
+            'Create an API key',
+            'Copy your key'
+        ]
+    },
+    supabase: {
+        img: '/supabase_connect.png',
+        instructions: ['Go to the API Settings of your app to find the project URL and key']
+    },
+    square: {
+        img: '/square_connect.gif',
+        instructions: [
+            'Go to <a href="https://developer.squareup.com/apps" target="_blank" rel=”noopener noreferrer”>https://developer.squareup.com/apps</a>',
+            'In the left pane, choose Credentials',
+            'At the top of the page, choose Production mode for a production access token or Sandbox mode for a Sandbox access token.'
+        ]
+    }
+};
+export function linkedSecretValue(x) {
+    let r = 0;
+    let lowerCasedX = x.toLowerCase();
+    if (lowerCasedX.includes('secret')) {
+        r += 10;
+    }
+    if (lowerCasedX.includes('password')) {
+        r += 5;
+    }
+    if (lowerCasedX.includes('private')) {
+        r += 4;
+    }
+    if (lowerCasedX.includes('key')) {
+        r += 3;
+    }
+    if (lowerCasedX.includes('token')) {
+        r += 2;
+    }
+    if (lowerCasedX.includes('pass')) {
+        r += 1;
+    }
+    return r;
+}
+export function forceSecretValue(resourceType) {
+    if (resourceType == 'git_repository') {
+        return 'url';
+    }
+}

package/package/components/apps/components/buttons/AppButton.svelte

@@ -26,6 +26,7 @@ export let errorHandledByComponent = false;
 export let extraKey = undefined;
 export let isMenuItem = false;
 export let noInitialize = false;
+export let replaceCallback = false;
 export let controls = undefined;
 const { worldStore, app, componentControl, selectedComponent } = getContext('AppViewerContext');
 const rowContext = getContext('RowWrapperContext');
@@ -147,9 +148,9 @@ let css = initCss($app.css?.buttoncomponent, customCss);
 		if (iterContext && listInputs) {
 			listInputs.set(id, inputOutput)
 		}
-		console.log('success', r)
 	}}
 	refreshOnStart={resolvedConfig.triggerOnAppLoad}
+	{replaceCallback}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment} class="wm-button-wrapper">
 		{#if errorsMessage}

package/package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         extraKey?: string | undefined;
         isMenuItem?: boolean | undefined;
         noInitialize?: boolean | undefined;
+        replaceCallback?: boolean | undefined;
         controls?: {
             left: () => boolean;
             right: () => boolean | string;

package/package/components/apps/components/display/AppAlert.svelte

@@ -7,7 +7,7 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { twMerge } from 'tailwind-merge';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { Alert } from '../../../common';
-import { AlignWrapper } from '../helpers';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;

package/package/components/apps/components/display/AppCustomComponent.svelte

@@ -2,8 +2,8 @@
 import { initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { sendUserToast } from '../../../../toast';
-import { RunnableWrapper } from '../helpers';
 import { Loader2 } from 'lucide-svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let render;
 export let componentInput;

package/package/components/apps/components/display/AppDisplayComponent.svelte

@@ -50,10 +50,10 @@ let css = initCss($app.css?.displaycomponent, customCss);
 {/each}
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	<div class="flex flex-col w-full h-full">
+	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				'w-full border-b p-2 text-xs font-semibold text-primary bg-surface-secondary',
 				css?.header?.class,
 				'wm-rich-result-header'
 			)}

package/package/components/apps/components/display/AppDownload.svelte

@@ -5,11 +5,11 @@ import { components } from '../../editor/component';
 import { initCss, transformBareBase64IfNecessary } from '../../utils';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
-import { AlignWrapper } from '../helpers';
 import { Button } from '../../../common';
 import { loadIcon } from '../icon';
 import ComponentErrorHandler from '../helpers/ComponentErrorHandler.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;

package/package/components/apps/components/display/AppFlowStatusComponent.svelte

@@ -1,72 +1,15 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import { initOutput } from '../../editor/appUtils';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import { initCss } from '../../utils';
-import FlowStatusViewer from '../../../FlowStatusViewer.svelte';
-import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let componentInput;
-export let initializing = false;
-export let customCss = undefined;
-export let render;
-const { app, worldStore, workspace } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-initializing = false;
-let css = initCss($app.css?.flowstatuscomponent, customCss);
-let jobId;
+<script>import { Alert } from '../../../common';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 </script>
 
-{#each Object.keys(css ?? {}) as key (key)}
-	<ResolveStyle
-		{id}
-		{customCss}
-		{key}
-		bind:css={css[key]}
-		componentStyle={$app.css?.flowstatuscomponent}
-	/>
-{/each}
-
-<RunnableWrapper
-	on:started={(e) => {
-		jobId = e.detail
-	}}
-	{outputs}
-	{render}
-	{componentInput}
-	{id}
->
-	<div class="flex flex-col w-full h-full">
-		<div
-			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-				css?.header?.class,
-				'wm-flow-status-header'
-			)}
-			style={css?.header?.style}
-		>
-			Flow Status
-		</div>
-		<div
-			style={twMerge(
-				$app.css?.['flowstatuscomponent']?.['container']?.style,
-				customCss?.container?.style
-			)}
-			class={twMerge(
-				'p-2 grow overflow-auto',
-				$app.css?.['flowstatuscomponent']?.['container']?.class,
-				customCss?.container?.class,
-				'wm-flow-status-container'
-			)}
-		>
-			{#if jobId}
-				<FlowStatusViewer workspaceId={workspace} {jobId} />
-			{:else}
-				<span class="text-secondary text-xs">No flow</span>
-			{/if}
-		</div>
-	</div>
-</RunnableWrapper>
+<AlignWrapper verticalAlignment="center" horizontalAlignment="center">
+	<Alert
+		title="Deprecated component"
+		documentationLink="https://www.windmill.dev/docs/apps/app_configuration_settings/flow_status"
+		tooltip="See documentation of the new component:"
+		type="error"
+	>
+		This component is deprecated and has been removed. Please use the Flow status by Job Id
+		component instead.
+	</Alert>
+</AlignWrapper>

package/package/components/apps/components/display/AppFlowStatusComponent.svelte.d.ts

@@ -1,14 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: AppInput | undefined;
-        initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'flowstatuscomponent'> | undefined;
-        render: boolean;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/components/display/AppIcon.svelte

@@ -1,13 +1,13 @@
 <script>import { getContext } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
-import { AlignWrapper } from '../helpers';
 import { loadIcon } from '../icon';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 export let id;
 export let horizontalAlignment = 'left';
 export let verticalAlignment = undefined;

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -1,23 +1,23 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { initCss } from '../../utils';
 import FlowStatusViewer from '../../../FlowStatusViewer.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
 export let id;
-export let componentInput;
 export let initializing = false;
 export let customCss = undefined;
-export let render;
 export let configuration;
+export let render;
 const { app, worldStore, workspace } = getContext('AppViewerContext');
-let resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
+const resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
-    loading: false
+    loading: false,
+    jobId: undefined
 });
 initializing = false;
 let css = initCss($app.css?.jobidflowstatuscomponent, customCss);
@@ -43,11 +43,13 @@ $: jobId = resolvedConfig.jobId;
 	/>
 {/each}
 
-<RunnableWrapper {outputs} {render} {componentInput} {id}>
-	<div class="flex flex-col w-full h-full">
+<InitializeComponent {id} />
+
+{#if render}
+	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				'w-full border-b p-2 text-xs font-semibold text-primary bg-surface-secondary',
 				css?.header?.class
 			)}
 			style={css?.header?.style}
@@ -66,10 +68,21 @@ $: jobId = resolvedConfig.jobId;
 			)}
 		>
 			{#if jobId}
-				<FlowStatusViewer workspaceId={workspace} {jobId} />
+				<FlowStatusViewer
+					workspaceId={workspace}
+					{jobId}
+					on:start={() => {
+						outputs?.jobId.set(jobId)
+						outputs?.loading.set(true)
+					}}
+					on:done={(e) => {
+						outputs?.loading.set(false)
+						outputs?.result.set(e?.detail?.result)
+					}}
+				/>
 			{:else}
 				<span class="text-secondary text-xs">No flow</span>
 			{/if}
 		</div>
 	</div>
-</RunnableWrapper>
+{/if}

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte.d.ts

@@ -1,14 +1,12 @@
 import { SvelteComponent } from "svelte";
-import type { AppInput } from '../../inputType';
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'jobidflowstatuscomponent'> | undefined;
-        render: boolean;
         configuration: RichConfigurations;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -1,20 +1,19 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { initCss } from '../../utils';
 import LogViewer from '../../../LogViewer.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
 export let id;
-export let componentInput;
 export let initializing = false;
 export let customCss = undefined;
-export let render;
 export let configuration;
-const { app, worldStore } = getContext('AppViewerContext');
+export let render;
+const { app, worldStore, workspace } = getContext('AppViewerContext');
 let resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
@@ -27,6 +26,7 @@ let testJobLoader = undefined;
 let testIsLoading = false;
 let testJob = undefined;
 $: if (resolvedConfig.jobId) {
+    outputs.loading.set(true);
     testJobLoader?.watchJob(resolvedConfig?.['jobId']);
 }
 </script>
@@ -50,13 +50,25 @@ $: if (resolvedConfig.jobId) {
 	/>
 {/each}
 
-<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
+<TestJobLoader
+	workspaceOverride={workspace}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+	on:done={(e) => {
+		outputs.loading.set(false)
+		outputs.jobId.set(e.detail.id)
+		outputs.result.set(e.detail.result)
+	}}
+/>
+
+<InitializeComponent {id} />
 
-<RunnableWrapper {outputs} {render} {componentInput} {id}>
-	<div class="flex flex-col w-full h-full">
+{#if render}
+	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				'w-full border-b p-2 text-xs font-semibold text-primary bg-surface-secondary',
 				css?.header?.class
 			)}
 			style={css?.header?.style}
@@ -65,7 +77,7 @@ $: if (resolvedConfig.jobId) {
 		</div>
 		<div
 			style={css?.container?.style}
-			class={twMerge('p-2 grow overflow-auto', css?.container?.class, 'wm-log-container')}
+			class={twMerge('grow overflow-auto', css?.container?.class, 'wm-log-container')}
 		>
 			<LogViewer
 				jobId={testJob?.id}
@@ -77,4 +89,4 @@ $: if (resolvedConfig.jobId) {
 			/>
 		</div>
 	</div>
-</RunnableWrapper>
+{/if}