windmill-components 1.122.0 → 1.138.2

package/package/components/FlowViewer.svelte

@@ -20,7 +20,8 @@ $: flowFiltered = {
     value: flow.value,
     schema: flow.schema
 };
-export let tab = 'ui';
+export let noGraph = false;
+export let tab = noGraph ? 'schema' : 'ui';
 export let noSummary = false;
 let open = {};
 if (initialOpen) {
@@ -32,7 +33,9 @@ function toAny(x) {
 </script>
 
 <Tabs bind:selected={tab}>
-	<Tab value="ui">Graph</Tab>
+	{#if !noGraph}
+		<Tab value="ui">Graph</Tab>
+	{/if}
 	<Tab value="json">JSON</Tab>
 	<Tab value="schema">Input Schema</Tab>
 
@@ -66,7 +69,7 @@ function toAny(x) {
 						{/each}
 					</ul>
 				{:else}
-					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
+					<div class="text-secondary text-xs italic mb-4">No inputs</div>
 				{/if}
 				<FlowGraphViewer download {noSide} {flow} overflowAuto />
 			</div>
@@ -75,9 +78,9 @@ function toAny(x) {
 			<div class="relative pt-2">
 				<Button
 					on:click={() => copyToClipboard(JSON.stringify(flowFiltered, null, 4))}
-					color="dark"
+					color="light"
 					variant="border"
-					size="sm"
+					size="xs"
 					startIcon={{ icon: faClipboard }}
 					btnClasses="absolute top-2 right-2 w-min"
 				>

package/package/components/FlowViewer.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         };
         initialOpen?: number | undefined;
         noSide?: boolean | undefined;
+        noGraph?: boolean | undefined;
         tab?: "json" | "schema" | "ui" | undefined;
         noSummary?: boolean | undefined;
     };

package/package/components/FolderEditor.svelte

@@ -122,7 +122,7 @@ async function addGroup() {
 	<h2>Permissions ({perms?.length ?? 0})</h2>
 	{#if can_write}
 		<Alert role="info" title="New permissions may take up to 60s to apply"
-			><span class="text-xs text-gray-500">Due to permissions cache invalidation</span></Alert
+			><span class="text-xs text-tertiary">Due to permissions cache invalidation</span></Alert
 		>
 		<div class="flex items-center gap-1">
 			<div>
@@ -254,7 +254,7 @@ async function addGroup() {
 										>
 										<ToggleButton position="center" value="writer" size="xs"
 											>Writer&nbsp;<Tooltip
-												>A viewer of a folder has read AND write access to all the elements
+												>A writer of a folder has read AND write access to all the elements
 												(scripts/flows/apps/schedules/resources/variables) inside the folder</Tooltip
 											></ToggleButton
 										>
@@ -316,7 +316,7 @@ async function addGroup() {
 			</div>
 		{/if} -->
 		<!-- {#if managing_folders.length == 0}
-			<p class="text-gray-600 text-sm">No folder is managing this folder</p>
+			<p class="text-tertiary text-sm">No folder is managing this folder</p>
 		{:else}
 			<TableCustom>
 				<tr slot="header-row">

package/package/components/FolderInfo.svelte

@@ -4,9 +4,9 @@ export let members;
 
 <Popover
 	><div class="inline-flex gap-1 items-end"
-		><span class="text-gray-500 text-xs mb-0.5">({members.length})</span>
+		><span class="text-tertiary text-xs mb-0.5">({members.length})</span>
 		<div class="max-w-xs truncate"
-			><span class="text-gray-600 text-xs ">{members?.join(', ')}</span></div
+			><span class="text-tertiary text-xs">{members?.join(', ')}</span></div
 		></div
 	>
 	<span slot="text">{members?.join(', ')}</span></Popover

package/package/components/FolderUsageInfo.svelte

@@ -17,7 +17,7 @@ async function loadUsage() {
 		</td>
 	{/each}
 {:else}
-	<div class="flex flex-col text-xs text-gray-600">
+	<div class="flex flex-col text-xs text-tertiary">
 		{#each Object.entries(usage) as [k, v]}
 			<div>
 				{k}: {v}

package/package/components/GroupEditor.svelte

@@ -12,6 +12,7 @@ import { canWrite } from '../utils';
 export let name;
 let can_write = false;
 let group;
+let instance_group;
 let members = undefined;
 let usernames = [];
 let username = '';
@@ -25,8 +26,7 @@ $: {
     }
 }
 async function load() {
-    await loadGroup();
-    loadUsernames();
+    return Promise.all([loadGroup(), loadInstanceGroup(), loadUsernames()]);
 }
 async function addToGroup() {
     await GroupService.addUserToGroup({
@@ -36,18 +36,30 @@ async function addToGroup() {
     });
     loadGroup();
 }
+async function loadInstanceGroup() {
+    instance_group = await GroupService.getInstanceGroup({ name });
+}
 async function loadGroup() {
-    group = await GroupService.getGroup({ workspace: $workspaceStore, name });
-    can_write = canWrite(name, group.extra_perms ?? {}, $userStore);
-    members = Array.from(new Set(Object.entries(group?.extra_perms ?? {})
-        .filter(([k, v]) => k.startsWith('u/') && v)
-        .map(([k, _]) => k.split('/')[1])
-        .concat(group?.members ?? []))).map((x) => {
-        return {
-            member_name: x,
-            role: getRole(x)
+    try {
+        group = await GroupService.getGroup({ workspace: $workspaceStore, name });
+        can_write = canWrite(name, group.extra_perms ?? {}, $userStore);
+        members = Array.from(new Set(Object.entries(group?.extra_perms ?? {})
+            .filter(([k, v]) => k.startsWith('u/') && v)
+            .map(([k, _]) => k.split('/')[1])
+            .concat(group?.members ?? []))).map((x) => {
+            return {
+                member_name: x,
+                role: getRole(x)
+            };
+        });
+    }
+    catch (e) {
+        can_write = false;
+        members = [];
+        group = {
+            name
         };
-    });
+    }
 }
 function getRole(x) {
     const writer = 'u/' + x in (group?.extra_perms ?? {}) && (group?.extra_perms ?? {})['u/' + x];
@@ -229,6 +241,21 @@ function getRole(x) {
 					</tr>{/each}
 			</tbody>
 		</TableCustom>
+
+		{#if instance_group?.emails}
+			<h2 class="mt-10">Members from the instance group</h2>
+			<TableCustom>
+				<tr slot="header-row">
+					<th>user</th>
+				</tr>
+				<tbody slot="body">
+					{#each instance_group?.emails ?? [] as email}<tr>
+							<td>{email}</td>
+						</tr>{/each}
+				</tbody>
+			</TableCustom>
+		{/if}
+
 		<!-- <h2 class="mt-10"
 			>Groups managing this group <Tooltip>Any member of those groups can manage this group</Tooltip
 			></h2
@@ -248,7 +275,7 @@ function getRole(x) {
 			</div>
 		{/if}
 		{#if managing_groups.length == 0}
-			<p class="text-gray-600 text-sm">No group is managing this group</p>
+			<p class="text-tertiary text-sm">No group is managing this group</p>
 		{:else}
 			<TableCustom>
 				<tr slot="header-row">

package/package/components/GroupInfo.svelte

@@ -12,9 +12,9 @@ async function loadMembers() {
 {#if members}
 	<Popover
 		><div class="inline-flex gap-1 items-end"
-			><span class="text-gray-500 text-xs mb-0.5">({members.length})</span>
+			><span class="text-tertiary text-xs mb-0.5">({members.length})</span>
 			<div class="max-w-xs truncate"
-				><span class="text-gray-600 text-xs ">{members?.join(', ')}</span></div
+				><span class="text-tertiary text-xs">{members?.join(', ')}</span></div
 			></div
 		>
 		<span slot="text">{members?.join(', ')}</span></Popover

package/package/components/HighlightCode.svelte

@@ -12,6 +12,10 @@ function getLang(lang) {
             return python;
         case 'deno':
             return typescript;
+        case 'nativets':
+            return typescript;
+        case 'bun':
+            return typescript;
         case 'go':
             return go;
         case 'bash':

package/package/components/HighlightCode.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Script } from '../gen';
 declare const __propDef: {
     props: {
         [x: string]: any;
         code?: string | undefined;
-        language: 'python3' | 'deno' | 'go' | 'bash' | undefined;
+        language: Script.language | undefined;
         lines?: boolean | undefined;
     };
     events: {

package/package/components/IconedResourceType.svelte

@@ -13,7 +13,7 @@ $: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.spl
 		{name}
 	{/if}
 	{#if iconComponent}
-		<span class="text-gray-700 grayscale">
+		<span class="text-secondary grayscale">
 			<svelte:component this={iconComponent} {height} {width} />
 		</span>
 	{:else}

package/package/components/InlineCodeCopy.svelte

@@ -5,7 +5,8 @@ export let content;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap my-2"
+<pre
+	class="bg-surface-secondary text-secondary p-2 font-mono text-sm whitespace-pre-wrap my-2 rounded-md"
 	>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
 		><Icon data={faClipboard} /></span
 	></pre

package/package/components/InputTransformForm.svelte

@@ -172,24 +172,20 @@ loadResourceTypes();
 							<ToggleButton
 								tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 								light
-								position="left"
 								value="static"
 								size="xs2"
-								small
 								label={'${}'}
 							/>
 						{:else}
-							<ToggleButton small label="Static" position="left" value="static" size="xs2" />
+							<ToggleButton small label="Static" value="static" />
 						{/if}
 
 						<ToggleButton
 							small
 							light
 							tooltip="Javascript expression ('flow_input' or 'results')."
-							position="right"
 							value="javascript"
 							icon={Code}
-							size="xs2"
 						/>
 					</ToggleButtonGroup>
 				</div>

package/package/components/InputTransformSchemaForm.svelte

@@ -66,7 +66,7 @@ $: {
 			{/if}
 		{/each}
 	{:else}
-		<div class="text-gray-500 text-sm">No inputs</div>
+		<div class="text-tertiary text-sm">No inputs</div>
 	{/if}
 </div>
 
@@ -87,7 +87,7 @@ $: {
 >
 	<div
 		slot="submission"
-		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+		class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 	>
 		<Button
 			variant="border"

package/package/components/InputTransformsViewer.svelte

@@ -8,7 +8,7 @@ $: entries = Object.entries(inputTransforms);
 	<ul class="mb-1">
 		{#each entries as [key, val]}
 			<li class="flex pb-2 last:pb-0">
-				<span class="font-black text-gray-700 text-xs">{key}:</span>
+				<span class="font-black text-secondary text-xs">{key}:</span>
 				{#if val.type == 'static'}
 					{#if typeof val.value == 'object'}
 						<ObjectViewer json={val.value} />
@@ -26,5 +26,5 @@ $: entries = Object.entries(inputTransforms);
 		{/each}
 	</ul>
 {:else}
-	<div class="text-gray-600 text-sm"> No inputs </div>
+	<div class="text-tertiary text-sm"> No inputs </div>
 {/if}

package/package/components/InviteGlobalUser.svelte

@@ -3,50 +3,61 @@ import { createEventDispatcher } from 'svelte';
 import { UserService } from '../gen';
 import { Button } from './common';
 import Toggle from './Toggle.svelte';
+import { generateRandomString } from '../utils';
+import { globalEmailInvite } from '../stores';
 const dispatch = createEventDispatcher();
-let email;
 let is_super_admin = false;
-let password;
+let password = generateRandomString(10);
 let name;
 let company;
-function handleKeyUp(event) {
-    const key = event.key;
-    if (key === 'Enter') {
-        event.preventDefault();
-        addUser();
-    }
-}
 async function addUser() {
     await UserService.createUserGlobally({
         requestBody: {
-            email,
+            email: $globalEmailInvite,
             password,
             super_admin: is_super_admin,
             name,
             company
         }
     });
-    sendUserToast(`Added ${email}`);
+    sendUserToast(`Added ${$globalEmailInvite}`);
+    $globalEmailInvite = '';
+    password = generateRandomString(10);
     dispatch('new');
 }
 </script>
 
-<div class="flex flex-row space-x-1">
-	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
-
-	<Toggle class="mx-2" bind:checked={is_super_admin} options={{ right: 'superadmin' }} />
-	<input on:keyup={handleKeyUp} type="password" placeholder="password" bind:value={password} />
-	<input type="text" on:keyup={handleKeyUp} placeholder="name" bind:value={name} />
-	<input type="text" on:keyup={handleKeyUp} placeholder="company" bind:value={company} />
+<div class="flex flex-row gap-2 mb-2 items-end">
+	<label class="block shrink min-w-0">
+		<span class="text-secondary text-sm">Email</span>
+		<input type="email" placeholder="email" bind:value={$globalEmailInvite} />
+	</label>
+	<label class="block shrink min-w-0">
+		<span class="text-secondary text-sm">Password</span>
+		<input bind:value={password} />
+	</label>
 
-	<Button
-		variant="contained"
-		color="blue"
-		size="sm"
-		btnClasses="!ml-4 !w-40"
-		on:click={addUser}
-		disabled={email == undefined || password == undefined}
-	>
-		Add
-	</Button>
+	<Toggle class="mx-2" bind:checked={is_super_admin} options={{ right: 'Superadmin' }} />
+	<div class="flex flex-row-reverse grow">
+		<div class="flex">
+			<Button
+				variant="contained"
+				color="dark"
+				size="sm"
+				on:click={addUser}
+				disabled={$globalEmailInvite == '' || password == undefined}
+			>
+				Add user to instance
+			</Button>
+		</div>
+	</div>
+</div>
+<div class="flex gap-2 items-end">
+	<div>
+		<input type="text" placeholder="name (optional)" bind:value={name} />
+	</div>
+	<div>
+		<input type="text" placeholder="company (optional)" bind:value={company} />
+	</div>
+	<div class="text-xs text-tertiary grow text-right"> Email will be sent if SMTP configured </div>
 </div>

package/package/components/InviteUser.svelte

@@ -1,9 +1,11 @@
 <script>import { sendUserToast } from '../toast';
 import { createEventDispatcher } from 'svelte';
-import { workspaceStore } from '../stores';
-import { WorkspaceService } from '../gen';
+import { globalEmailInvite, superadmin, workspaceStore } from '../stores';
+import { UserService, WorkspaceService } from '../gen';
 import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import Tooltip from './Tooltip.svelte';
+import { isCloudHosted } from '../cloud';
+import { goto } from '$app/navigation';
 const dispatch = createEventDispatcher();
 let email;
 function handleKeyUp(event) {
@@ -23,6 +25,24 @@ async function inviteUser() {
         }
     });
     sendUserToast(`Invited ${email}`);
+    if (!(await UserService.existsEmail({ email }))) {
+        let isSuperadmin = $superadmin;
+        if (!isCloudHosted()) {
+            sendUserToast(`User ${email} is not registered yet on the instance. ${!isSuperadmin
+                ? `If not using SSO, ask an administrator to add ${email} to the instance`
+                : ''}`, true, isSuperadmin
+                ? [
+                    {
+                        label: 'Add user to the instance',
+                        callback: () => {
+                            $globalEmailInvite = email;
+                            goto('#superadmin-settings');
+                        }
+                    }
+                ]
+                : []);
+        }
+    }
     dispatch('new');
 }
 let selected = 'author';
@@ -34,15 +54,17 @@ let selected = 'author';
 		<ToggleButton position="left" value="operator" size="sm"
 			>Operator <Tooltip
 				>An operator can only execute and view scripts/flows/apps from your workspace, and only
-				those that he has visibility on</Tooltip
+				those that he has visibility on.</Tooltip
 			></ToggleButton
 		>
 		<ToggleButton position="center" value="author" size="sm"
 			>Author <Tooltip
-				>An Author can execute and view scripts/flows/apps, but he can also create new ones</Tooltip
+				>An Author can execute and view scripts/flows/apps, but he can also create new ones.</Tooltip
 			></ToggleButton
 		>
-		<ToggleButton position="right" value="admin" size="sm">Admin</ToggleButton>
+		<ToggleButton position="right" value="admin" size="sm">Admin<Tooltip
+			>An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace.</Tooltip
+		></ToggleButton>
 	</ToggleButtonGroup>
 	<Button
 		variant="contained"

package/package/components/ItemPicker.svelte

@@ -44,7 +44,13 @@ let drawer;
 />
 
 <Drawer bind:this={drawer} size="600px">
-	<DrawerContent {tooltip} {documentationLink} overflow_y={false} title="Search {itemName}s" on:close={drawer.closeDrawer}>
+	<DrawerContent
+		{tooltip}
+		{documentationLink}
+		overflow_y={false}
+		title="Search {itemName}s"
+		on:close={drawer.closeDrawer}
+	>
 		<div class="w-full h-full flex flex-col">
 			<div class="w-12/12 pb-4">
 				<input
@@ -59,20 +65,20 @@ let drawer;
 					<Skeleton layout={[[2], 0.7]} />
 				{/each}
 			{:else if !items?.length}
-				<div class="text-center text-sm text-gray-600 mt-2">
+				<div class="text-center text-sm text-tertiary mt-2">
 					{@html noItemMessage}
 				</div>
 			{:else if filteredItems?.length}
-				<div class="border rounded-md divide-y divide-gray-200 w-full overflow-auto pb-12 grow">
+				<div class="border rounded-md divide-y w-full overflow-auto pb-12 grow">
 					{#each filteredItems as obj}
 						<div
-							class="hover:bg-gray-50 w-full flex items-center p-4 gap-4 first-of-type:!border-t-0 
+							class="hover:bg-surface-hover w-full flex items-center p-4 gap-4 first-of-type:!border-t-0
 						first-of-type:rounded-t-md last-of-type:rounded-b-md"
 						>
 							<div class="inline-flex items-center grow">
 								<button
 									class="py-2 px-1 gap-1 flex grow border-gray-300 border-opacity-0
-									 text-black"
+									 text-primary"
 									on:click={() => {
 										if (closeOnClick) {
 											drawer.closeDrawer()
@@ -81,12 +87,12 @@ let drawer;
 									}}
 								>
 									{#if `app` in obj}
-										<div class="mr-2 text-sm text-left center-center  w-30">
+										<div class="mr-2 text-sm text-left center-center w-30">
 											<IconedResourceType after={true} silent={false} name={obj['app']} />
 										</div>
 									{/if}
 									{#if `resource_type` in obj}
-										<div class="mr-2  text-left w-30  center-center  text-sm">
+										<div class="mr-2 text-left w-30 center-center text-sm">
 											<IconedResourceType after={true} name={obj['resource_type']} />
 										</div>
 									{/if}

package/package/components/JobArgs.svelte

@@ -41,7 +41,7 @@ ${Object.entries(args)
 </script>
 
 <div class="relative">
-	<div class="text-gray-500 text-xs absolute top-8 right-0">
+	<div class="text-tertiary text-xs absolute top-8 right-0">
 		<button
 			on:click={() => {
 				jsonStr = JSON.stringify(args, null, 4)
@@ -63,7 +63,7 @@ ${Object.entries(args)
 					</tr>
 				{/each}
 			{:else if args}
-				<tr><div class="text-gray-600 pt-2 pl-1 text-sm">No arguments</div></tr>
+				<tr><div class="text-secondary pt-2 pl-1 text-sm">No arguments</div></tr>
 			{:else}
 				<tr>
 					<td>
@@ -83,7 +83,7 @@ ${Object.entries(args)
 		<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
 			<svelte:fragment slot="actions">
 				<a
-					class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+					class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-surface-hover rounded-lg"
 					download="windmill-args.json"
 					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
 					>Download <Download size={14} /></a
@@ -96,7 +96,7 @@ ${Object.entries(args)
 				</Button>
 			</svelte:fragment>
 			{#if jsonStr.length > 100000}
-				<div class="text-sm mb-2 text-gray-600">
+				<div class="text-sm mb-2 text-tertiary">
 					<a
 						download="windmill-args.json"
 						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a

package/package/components/LightweightArgInput.svelte

@@ -82,7 +82,7 @@ export function focus() {
 }
 function validateInput(pattern, v) {
     if (required && (v == undefined || v == null || v === '')) {
-        error = 'This field is required';
+        error = 'Required';
         valid = false;
     }
     else {
@@ -217,7 +217,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								{/if}
 								<button
 									transition:fade|local={{ duration: 100 }}
-									class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 ml-2"
+									class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
 									aria-label="Clear"
 									on:click={() => {
 										value = value.filter((el) => el != v)
@@ -331,7 +331,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			<slot name="actions" />
 		</div>
 		{#if error && error != ''}
-			<div class="text-right text-xs text-red-600">
+			<div class="text-right text-xs text-red-600 dark:text-red-400">
 				{#if error === ''}
 					&nbsp;
 				{:else}

package/package/components/LogViewer.svelte

@@ -2,18 +2,22 @@
 import { Button, Drawer, DrawerContent } from './common';
 import { copyToClipboard } from '../utils';
 import { workspaceStore } from '../stores';
+import AnsiUp from 'ansi_up';
 export let content;
 export let isLoading;
 export let duration = undefined;
 export let mem = undefined;
 export let wrapperClass = '';
 export let jobId = undefined;
+// @ts-ignore
+const ansi_up = new AnsiUp();
 let scroll = true;
 let div = null;
 $: if (content != undefined) {
     isLoading = false;
 }
 $: content && scrollToBottom();
+$: html = ansi_up.ansi_to_html(content ?? '');
 export function scrollToBottom() {
     scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
 }
@@ -24,7 +28,7 @@ let logViewer;
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
 		<svelte:fragment slot="actions">
 			<a
-				class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+				class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-surface-hover rounded-lg"
 				download="windmill-logs.json"
 				href="/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}">Download <Download size={14} /></a
 			>
@@ -33,7 +37,7 @@ let logViewer;
 			</Button>
 		</svelte:fragment>
 		<div>
-			<pre class="bg-gray-50 text-xs w-full p-2"
+			<pre class="bg-surface-secondary text-secondary 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>
@@ -54,17 +58,18 @@ let logViewer;
 		{#if isLoading}
 			<Loader2 class="animate-spin absolute top-2 left-2" />
 		{:else if duration}
-			<span class="absolute text-xs text-gray-500 dark:text-gray-400 top-2 left-2"
+			<span class="absolute text-xs text-tertiary dark:text-gray-400 top-2 left-2"
 				>took {duration}ms</span
 			>
 		{/if}
 		{#if mem}
-			<span class="absolute text-xs text-gray-500 dark:text-gray-400 top-2 left-36"
+			<span class="absolute text-xs text-tertiary dark:text-gray-400 top-2 left-36"
 				>mem peak: {(mem / 1024).toPrecision(4)}MB</span
 			>
 		{/if}
 		<pre class="whitespace-pre-wrap break-words text-xs w-full p-2"
-			>{#if content}<span>{content}</span>{:else if !isLoading}<span>No logs are available yet</span
+			>{#if content}<span>{@html html}</span>{:else if !isLoading}<span
+					>No logs are available yet</span
 				>{/if}</pre
 		>
 	</div>