windmill-components 1.623.1 → 1.623.2

package/package/components/InviteUser.svelte

@@ -1,60 +1,29 @@
-<script lang="ts">import { sendUserToast } from '../toast';
-import { createEventDispatcher } from 'svelte';
-import { globalEmailInvite, superadmin, workspaceStore } from '../stores';
-import { UserService, WorkspaceService } from '../gen';
-import { Button } from './common';
+<script lang="ts">import { Button } from './common';
 import Popover from './meltComponents/Popover.svelte';
-import { isCloudHosted } from '../cloud';
-import { goto } from '../navigation';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import { MailPlus } from 'lucide-svelte';
-const dispatch = createEventDispatcher();
+const { inviteUser } = $props();
 let email = $state('');
 function handleKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {
         event.preventDefault();
-        inviteUser();
+        inviteUser(email, selected);
+        email = '';
     }
 }
-async function inviteUser() {
-    await WorkspaceService.inviteUser({
-        workspace: $workspaceStore,
-        requestBody: {
-            email,
-            is_admin: selected == 'admin',
-            operator: selected == 'operator'
-        }
-    });
-    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');
-    email = '';
-}
 let selected = $state('developer');
 </script>
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
 	{#snippet trigger()}
-		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: MailPlus }}>
+		<Button
+			variant="default"
+			unifiedSize="md"
+			nonCaptureEvent={true}
+			startIcon={{ icon: MailPlus }}
+		>
 			Invite
 		</Button>
 	{/snippet}
@@ -91,7 +60,12 @@ let selected = $state('developer');
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
-			<Button variant="accent" size="sm" on:click={inviteUser} disabled={email === undefined}>
+			<Button
+				variant="accent"
+				unifiedSize="md"
+				on:click={() => inviteUser(email, selected)}
+				disabled={!email || email.trim() === ''}
+			>
 				Invite
 			</Button>
 		</div>

package/package/components/InviteUser.svelte.d.ts

@@ -1,20 +1,6 @@
-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;
+interface Props {
+    inviteUser: (email: string, selected: 'operator' | 'developer' | 'admin') => Promise<void>;
 }
-declare const InviteUser: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    new: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type InviteUser = InstanceType<typeof InviteUser>;
+declare const InviteUser: import("svelte").Component<Props, {}, "">;
+type InviteUser = ReturnType<typeof InviteUser>;
 export default InviteUser;

package/package/components/JobLoader.svelte.d.ts

@@ -63,6 +63,6 @@ declare const JobLoader: import("svelte").Component<Props, {
     cancelJob: () => Promise<void>;
     clearCurrentJob: () => Promise<void>;
     watchJob: (testId: string, callbacks?: Callbacks) => Promise<void>;
-}, "isLoading" | "job" | "notfound" | "jobUpdateLastFetch" | "scriptProgress">;
+}, "job" | "isLoading" | "notfound" | "jobUpdateLastFetch" | "scriptProgress">;
 type JobLoader = ReturnType<typeof JobLoader>;
 export default JobLoader;

package/package/components/JobOtelTraces.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">import { workspaceStore } from '../stores';
+import { Alert, Skeleton } from './common';
+import { Activity } from 'lucide-svelte';
+import { JobService } from '../gen';
+import { msToReadableTime } from '../utils';
+// OTEL SpanKind enum values from opentelemetry-proto/opentelemetry/proto/trace/v1/trace.proto
+const SpanKind = {
+    UNSPECIFIED: 0,
+    INTERNAL: 1,
+    SERVER: 2,
+    CLIENT: 3,
+    PRODUCER: 4,
+    CONSUMER: 5
+};
+// OTEL StatusCode enum values from opentelemetry-proto/opentelemetry/proto/trace/v1/trace.proto
+const StatusCode = {
+    UNSET: 0,
+    OK: 1,
+    ERROR: 2
+};
+let { jobId } = $props();
+let traces = $state([]);
+let loading = $state(true);
+let error = $state(null);
+let expandedSpans = $state(new Set());
+$effect(() => {
+    if (jobId) {
+        loadTraces();
+    }
+});
+async function loadTraces() {
+    if (!$workspaceStore || !jobId)
+        return;
+    loading = true;
+    error = null;
+    try {
+        const response = await JobService.getJobOtelTraces({
+            workspace: $workspaceStore,
+            id: jobId
+        });
+        traces = response;
+    }
+    catch (e) {
+        if (e?.status === 404) {
+            traces = [];
+        }
+        else {
+            error = `Error loading traces: ${e?.message ?? e}`;
+        }
+    }
+    finally {
+        loading = false;
+    }
+}
+function getDurationMs(span) {
+    return (span.end_time_unix_nano - span.start_time_unix_nano) / 1_000_000;
+}
+function formatTimestamp(ns) {
+    const date = new Date(ns / 1000000);
+    return date.toISOString();
+}
+function getStatusColor(statusCode) {
+    switch (statusCode) {
+        case StatusCode.UNSET:
+            return 'text-secondary';
+        case StatusCode.OK:
+            return 'text-green-600';
+        case StatusCode.ERROR:
+            return 'text-red-600';
+        default:
+            return 'text-secondary';
+    }
+}
+function getStatusLabel(statusCode) {
+    switch (statusCode) {
+        case StatusCode.UNSET:
+            return 'Unset';
+        case StatusCode.OK:
+            return 'OK';
+        case StatusCode.ERROR:
+            return 'Error';
+        default:
+            return 'Unknown';
+    }
+}
+function toggleSpan(spanId) {
+    const newSet = new Set(expandedSpans);
+    if (newSet.has(spanId)) {
+        newSet.delete(spanId);
+    }
+    else {
+        newSet.add(spanId);
+    }
+    expandedSpans = newSet;
+}
+function getKindLabel(kind) {
+    switch (kind) {
+        case SpanKind.INTERNAL: return 'Internal';
+        case SpanKind.SERVER: return 'Server';
+        case SpanKind.CLIENT: return 'Client';
+        case SpanKind.PRODUCER: return 'Producer';
+        case SpanKind.CONSUMER: return 'Consumer';
+        default: return 'Unknown';
+    }
+}
+// Parse OTEL proto AnyValue to a simple value
+function parseAnyValue(anyValue) {
+    if (!anyValue)
+        return null;
+    if (anyValue.stringValue !== undefined)
+        return anyValue.stringValue;
+    if (anyValue.intValue !== undefined)
+        return anyValue.intValue;
+    if (anyValue.boolValue !== undefined)
+        return anyValue.boolValue;
+    if (anyValue.doubleValue !== undefined)
+        return anyValue.doubleValue;
+    if (anyValue.arrayValue?.values) {
+        return anyValue.arrayValue.values.map(parseAnyValue);
+    }
+    if (anyValue.kvlistValue?.values) {
+        return parseAttributes(anyValue.kvlistValue.values);
+    }
+    return JSON.stringify(anyValue);
+}
+// Parse OTEL proto attributes array to a simple key-value object
+function parseAttributes(attributes) {
+    if (!attributes)
+        return {};
+    if (!Array.isArray(attributes))
+        return attributes; // already parsed
+    const result = {};
+    for (const attr of attributes) {
+        if (attr.key && attr.value !== undefined) {
+            result[attr.key] = parseAnyValue(attr.value);
+        }
+    }
+    return result;
+}
+// Calculate timeline metrics
+function getTimelineMetrics(spans) {
+    if (spans.length === 0)
+        return { minTime: 0, maxTime: 0, totalDuration: 0 };
+    const minTime = Math.min(...spans.map((s) => s.start_time_unix_nano));
+    const maxTime = Math.max(...spans.map((s) => s.end_time_unix_nano));
+    return { minTime, maxTime, totalDuration: maxTime - minTime };
+}
+let timelineMetrics = $derived(getTimelineMetrics(traces));
+</script>
+
+<div class="p-4">
+	{#if loading}
+		<Skeleton layout={[[4], [8], [6], [10]]} />
+	{:else if error}
+		<Alert type="error" title="Error">{error}</Alert>
+	{:else if traces.length === 0}
+		<div class="flex flex-col items-center justify-center py-8 text-secondary">
+			<Activity size={48} class="mb-4 opacity-50" />
+			<p class="text-lg font-medium">No HTTP requests captured</p>
+			<p class="text-sm mt-2">
+				This job did not make any HTTP/HTTPS requests, or HTTP Request Tracing is not enabled in instance settings.
+			</p>
+		</div>
+	{:else}
+		<div class="space-y-4">
+			<div class="flex items-center justify-between">
+				<h3 class="text-lg font-semibold">Traces ({traces.length} spans)</h3>
+				<button
+					class="text-sm text-blue-600 hover:underline"
+					onclick={loadTraces}
+				>
+					Refresh
+				</button>
+			</div>
+
+			<!-- Timeline view -->
+			<div class="border rounded-lg overflow-hidden">
+				<div class="bg-surface-secondary px-4 py-2 border-b">
+					<div class="grid grid-cols-12 gap-2 text-xs font-medium text-secondary">
+						<div class="col-span-4">Operation</div>
+						<div class="col-span-1">Status</div>
+						<div class="col-span-5">Timeline</div>
+						<div class="col-span-2 text-right">Duration</div>
+					</div>
+				</div>
+
+				<div class="divide-y">
+					{#each traces as span (span.span_id)}
+						{@const durationNs = span.end_time_unix_nano - span.start_time_unix_nano}
+						{@const startOffset =
+							((span.start_time_unix_nano - timelineMetrics.minTime) /
+								timelineMetrics.totalDuration) *
+							100}
+						{@const width = (durationNs / timelineMetrics.totalDuration) * 100}
+						{@const statusCode = span.status?.code ?? 0}
+
+						<div class="hover:bg-surface-hover">
+							<button
+								class="w-full px-4 py-2 text-left"
+								onclick={() => toggleSpan(span.span_id)}
+							>
+								<div class="grid grid-cols-12 gap-2 items-center">
+									<div class="col-span-4 flex items-center gap-2">
+										<span class="text-xs text-secondary">
+											{expandedSpans.has(span.span_id) ? '▼' : '▶'}
+										</span>
+										<span class="font-medium truncate" title={span.name}>
+											{span.name}
+										</span>
+									</div>
+									<div class="col-span-1">
+										<span class={`text-xs font-medium ${getStatusColor(statusCode)}`}>
+											{getStatusLabel(statusCode)}
+										</span>
+									</div>
+									<div class="col-span-5 relative h-4">
+										<div class="absolute inset-0 bg-surface-secondary rounded"></div>
+										<div
+											class="absolute h-full bg-blue-500 rounded opacity-75"
+											style="left: {startOffset}%; width: {Math.max(width, 0.5)}%;"
+										></div>
+									</div>
+									<div class="col-span-2 text-right text-sm font-mono">
+										{msToReadableTime(getDurationMs(span))}
+									</div>
+								</div>
+							</button>
+
+							{#if expandedSpans.has(span.span_id)}
+								{@const parsedAttrs = parseAttributes(span.attributes)}
+								<div class="px-4 pb-4 bg-surface-secondary/50">
+									<div class="grid grid-cols-2 gap-4 text-sm">
+										<div>
+											<p class="text-xs text-secondary mb-1">Trace ID</p>
+											<p class="font-mono text-xs break-all">{span.trace_id}</p>
+										</div>
+										<div>
+											<p class="text-xs text-secondary mb-1">Span ID</p>
+											<p class="font-mono text-xs">{span.span_id}</p>
+										</div>
+										{#if span.parent_span_id}
+											<div>
+												<p class="text-xs text-secondary mb-1">Parent Span ID</p>
+												<p class="font-mono text-xs">{span.parent_span_id}</p>
+											</div>
+										{/if}
+										<div>
+											<p class="text-xs text-secondary mb-1">Kind</p>
+											<p class="font-mono text-xs">{getKindLabel(span.kind)}</p>
+										</div>
+										<div>
+											<p class="text-xs text-secondary mb-1">Start Time</p>
+											<p class="font-mono text-xs">{formatTimestamp(span.start_time_unix_nano)}</p>
+										</div>
+										<div>
+											<p class="text-xs text-secondary mb-1">End Time</p>
+											<p class="font-mono text-xs">{formatTimestamp(span.end_time_unix_nano)}</p>
+										</div>
+										{#if span.status?.message}
+											<div class="col-span-2">
+												<p class="text-xs text-secondary mb-1">Status Message</p>
+												<p class="text-xs">{span.status.message}</p>
+											</div>
+										{/if}
+										{#if Object.keys(parsedAttrs).length > 0}
+											<div class="col-span-2">
+												<p class="text-xs text-secondary mb-1">Attributes</p>
+												<div class="bg-surface-secondary p-2 rounded text-xs space-y-1">
+													{#each Object.entries(parsedAttrs) as [key, value]}
+														<div class="flex gap-2">
+															<span class="text-secondary font-medium shrink-0">{key}:</span>
+															<span class="font-mono break-all">{typeof value === 'object' ? JSON.stringify(value) : value}</span>
+														</div>
+													{/each}
+												</div>
+											</div>
+										{/if}
+									</div>
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/package/components/JobOtelTraces.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    jobId: string;
+}
+declare const JobOtelTraces: import("svelte").Component<Props, {}, "">;
+type JobOtelTraces = ReturnType<typeof JobOtelTraces>;
+export default JobOtelTraces;

package/package/components/JsonInputs.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">import SimpleEditor from './SimpleEditor.svelte';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
-export let updateOnBlur = true;
-export let placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}';
-export let selected = false;
-let pendingJson = '';
-let simpleEditor = undefined;
-let focusTrap;
+let { updateOnBlur = true, placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}', selected = false } = $props();
+let pendingJson = $state('');
+let simpleEditor = $state(undefined);
+let focusTrap = $state();
 function updatePayloadFromJson(jsonInput) {
     if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
         dispatch('select', undefined);
@@ -36,12 +34,12 @@ function handleKeydown(event) {
 }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <!-- Add a hidden button that can receive focus -->
 <button bind:this={focusTrap} class="sr-only" tabindex="-1" aria-hidden="true">Focus trap</button>
 
-<div class="h-full py-3 rounded-md border">
+<div class="h-full rounded-md border">
 	<SimpleEditor
 		bind:this={simpleEditor}
 		on:focus={() => {

package/package/components/JsonInputs.svelte.d.ts

@@ -1,3 +1,8 @@
+interface Props {
+    updateOnBlur?: boolean;
+    placeholder?: string;
+    selected?: boolean;
+}
 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;
@@ -11,13 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const JsonInputs: $$__sveltets_2_IsomorphicComponent<{
-    updateOnBlur?: boolean;
-    placeholder?: string;
-    selected?: boolean;
-    setCode?: (code: string) => void;
-    resetSelected?: (dispatchEvent?: boolean) => void;
-}, {
+declare const JsonInputs: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
     select: CustomEvent<any>;
@@ -26,6 +25,6 @@ declare const JsonInputs: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {
     setCode: (code: string) => void;
     resetSelected: (dispatchEvent?: boolean) => void;
-}, string>;
+}, "">;
 type JsonInputs = InstanceType<typeof JsonInputs>;
 export default JsonInputs;

package/package/components/LogViewer.svelte

@@ -1,9 +1,11 @@
 <script lang="ts" module>"use strict";
 const s3LogPrefixes = [
-    '\n[windmill] Previous logs have been saved to object storage at logs/',
-    '\n[windmill] Previous logs have been saved to disk at logs/',
-    '\n[windmill] No object storage set in instance settings. Previous logs have been saved to disk at logs/'
+    '[windmill] Previous logs have been saved to object storage at logs/',
+    '[windmill] Previous logs have been saved to disk at logs/',
+    '[windmill] No object storage set in instance settings. Previous logs have been saved to disk at logs/'
 ];
+// Only search within first N characters to avoid expensive full-content scans
+const S3_LOG_SEARCH_LIMIT = 2000;
 </script>
 
 <script lang="ts">import { ClipboardCopy, Download, Expand, Loader2 } from 'lucide-svelte';
@@ -28,33 +30,60 @@ let LOG_INC = 10000;
 let LOG_LIMIT = $state(LOG_INC);
 let lastJobId = $state(jobId);
 let loadedFromObjectStore = $state('');
-function findPrefixIndex(truncateContent) {
-    let index = s3LogPrefixes.findIndex((x) => truncateContent.startsWith(x));
-    if (index == -1) {
+function findPrefixInfo(truncateContent) {
+    // Quick check - [windmill] is rare, so bail early in the common case
+    // This is much faster than doing 3 long string indexOf searches
+    const windmillPos = truncateContent.indexOf('[windmill]');
+    if (windmillPos === -1 || windmillPos >= S3_LOG_SEARCH_LIMIT) {
         return undefined;
     }
-    return index;
+    // Found [windmill] marker, now determine which specific prefix matches
+    for (let i = 0; i < s3LogPrefixes.length; i++) {
+        const prefix = s3LogPrefixes[i];
+        if (truncateContent.length >= windmillPos + prefix.length &&
+            truncateContent.startsWith(prefix, windmillPos)) {
+            return { prefixIndex: i, position: windmillPos };
+        }
+    }
+    return undefined;
 }
-function findStartUrl(truncateContent, prefixIndex = undefined) {
-    if (prefixIndex == undefined) {
+function findStartUrl(truncateContent, prefixInfo) {
+    if (!prefixInfo) {
         return undefined;
     }
-    const end = truncateContent.substring(1).indexOf('\n');
-    return prefixIndex != undefined && truncateContent
-        ? truncateContent.substring(s3LogPrefixes[prefixIndex]?.length, end == -1 ? undefined : end + 1)
-        : undefined;
+    const { prefixIndex, position } = prefixInfo;
+    const prefix = s3LogPrefixes[prefixIndex];
+    const startOfPath = position + prefix.length;
+    const endOfLine = truncateContent.indexOf('\n', startOfPath);
+    return truncateContent.substring(startOfPath, endOfLine === -1 ? undefined : endOfLine);
+}
+function splitAtWindmillLine(content, prefixInfo) {
+    const { prefixIndex, position } = prefixInfo;
+    const prefix = s3LogPrefixes[prefixIndex];
+    // Find line boundaries
+    const lineStart = position > 0 && content[position - 1] === '\n' ? position - 1 : position;
+    const pathStart = position + prefix.length;
+    const lineEnd = content.indexOf('\n', pathStart);
+    if (lineEnd === -1) {
+        // [windmill] line is at the end
+        return { before: content.substring(0, lineStart), after: '' };
+    }
+    return {
+        before: content.substring(0, lineStart),
+        after: content.substring(lineEnd)
+    };
 }
-function tooltipText(prefixIndex) {
-    if (prefixIndex == undefined) {
+function tooltipText(prefixInfo) {
+    if (prefixInfo == undefined) {
         return 'No path/file detected to download from';
     }
-    else if (prefixIndex == 0) {
+    else if (prefixInfo.prefixIndex == 0) {
         return 'Download the previous logs from the instance configured object store';
     }
-    else if (prefixIndex == 1) {
+    else if (prefixInfo.prefixIndex == 1) {
         return 'Attempt to download the logs from disk. Assume there is a shared disk between the workers and the server at /tmp/windmill/logs. Upgrade to EE to use an object store such as S3 instead of a shared volume.';
     }
-    else if (prefixIndex == 2) {
+    else if (prefixInfo.prefixIndex == 2) {
         return 'Attempt to download the logs from disk. Assume there is a shared disk between the workers and the server at /tmp/windmill/logs. Since you are on EE, you can alternatively use an object store such as S3 configured in the instance settings instead of a shared volume..';
     }
 }
@@ -77,7 +106,6 @@ async function getStoreLogs() {
             workspace: $workspaceStore ?? '',
             path: downloadStartUrl
         }));
-        downloadStartUrl = undefined;
         LOG_LIMIT += Math.min(LOG_INC, res.length);
         loadedFromObjectStore = res + loadedFromObjectStore;
         let newC = truncateContent(content, loadedFromObjectStore, LOG_LIMIT);
@@ -105,14 +133,36 @@ $effect.pre(() => {
     }
 });
 let truncatedContent = $derived(truncateContent(content, loadedFromObjectStore, LOG_LIMIT));
-let prefixIndex = $derived(findPrefixIndex(truncatedContent));
-let downloadStartUrl = $derived(findStartUrl(truncatedContent, prefixIndex));
+let prefixInfo = $derived(findPrefixInfo(truncatedContent));
+let downloadStartUrl = $derived(findStartUrl(truncatedContent, prefixInfo));
 $effect.pre(() => {
     truncatedContent && scrollToBottom();
 });
-let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != undefined
-    ? truncatedContent.substring(truncatedContent.substring(1).indexOf('\n') + 2, truncatedContent.length)
-    : truncatedContent));
+// When [windmill] line is NOT at start, split into before/after to render button inline
+let splitHtml = $derived.by(() => {
+    if (prefixInfo == undefined || prefixInfo.position === 0) {
+        return undefined;
+    }
+    const { before, after } = splitAtWindmillLine(truncatedContent, prefixInfo);
+    return {
+        before: ansi_up.ansi_to_html(before),
+        after: ansi_up.ansi_to_html(after)
+    };
+});
+// Only compute html when splitHtml won't be used (avoids wasteful ansi_to_html call)
+let html = $derived.by(() => {
+    if (splitHtml) {
+        // splitHtml is active - skip expensive computation
+        return '';
+    }
+    if (prefixInfo == undefined) {
+        // No [windmill] line - return full content
+        return ansi_up.ansi_to_html(truncatedContent);
+    }
+    // [windmill] at start - strip the line and return the rest
+    const { after } = splitAtWindmillLine(truncatedContent, prefixInfo);
+    return ansi_up.ansi_to_html(after);
+});
 </script>
 
 <Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
@@ -148,12 +198,15 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 				class="bg-surface-secondary text-primary text-xs w-full p-2 whitespace-pre-wrap border rounded-md"
 				>{#if content}{@const len =
 						(content?.length ?? 0) +
-						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
+						(loadedFromObjectStore?.length ?? 0)}{#if splitHtml}{@html splitHtml.before}<button
+								onclick={getStoreLogs}
+								>Show more... <Tooltip>{tooltipText(prefixInfo)}</Tooltip></button
+							>{@html splitHtml.after}{:else if downloadStartUrl}<button
 							onclick={getStoreLogs}
-							>Show more... <Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
-						><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)...<br
+							>Show more... <Tooltip>{tooltipText(prefixInfo)}</Tooltip></button
+						><br />{@html html}{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)...<br
 						/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br
-						/>{/if}{@html html}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+						/>{@html html}{:else}{@html html}{/if}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
 			>
 		</div>
 	</DrawerContent>
@@ -230,13 +283,18 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 				)}
 				>{#if content}{@const len =
 						(content?.length ?? 0) +
-						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
+						(loadedFromObjectStore?.length ?? 0)}{#if splitHtml}<span>{@html splitHtml.before}</span><button
+								onclick={getStoreLogs}
+								>Show more... &nbsp;<Tooltip>{tooltipText(prefixInfo)}</Tooltip></button
+							><span>{@html splitHtml.after}</span
+						>{:else if downloadStartUrl}<button
 							onclick={getStoreLogs}
-							>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
-						><br />{:else if len > LOG_LIMIT}<button onclick={() => showMoreTruncate(len)}
+							>Show more... &nbsp;<Tooltip>{tooltipText(prefixInfo)}</Tooltip></button
+						><br /><span>{@html html}</span
+						>{:else if len > LOG_LIMIT}<button onclick={() => showMoreTruncate(len)}
 							>Show more..</button
-						>&nbsp;({LOG_LIMIT}/{len} chars)<br />{/if}<span>{@html html}</span
-					>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
+						>&nbsp;({LOG_LIMIT}/{len} chars)<br /><span>{@html html}</span
+						>{:else}<span>{@html html}</span>{/if}{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
 			>
 		</div>
 	</div>