windmill-components 1.623.2 → 1.655.0

package/package/components/TableCustom.svelte.d.ts

@@ -1,3 +1,11 @@
+interface Props {
+    paginated?: boolean;
+    currentPage?: number;
+    showNext?: boolean;
+    class?: string;
+    headerRow?: import('svelte').Snippet;
+    body?: import('svelte').Snippet;
+}
 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,19 +19,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TableCustom: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    paginated?: boolean | undefined;
-    currentPage?: number | undefined;
-    showNext?: boolean | undefined;
-}, {
+declare const TableCustom: $$__sveltets_2_IsomorphicComponent<Props, {
     next: CustomEvent<any>;
     previous: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    'header-row': {};
-    body: {};
-}, {}, string>;
+}, {}, {}, "">;
 type TableCustom = InstanceType<typeof TableCustom>;
 export default TableCustom;

package/package/components/TaggedTextInput.svelte

@@ -0,0 +1,449 @@
+<script lang="ts">let { tags, value = $bindable(''), placeholder = '', highlights, onCurrentTagChange, onTextSegmentAtCursorChange, class: className = '' } = $props();
+let contentEditableDiv;
+let isUpdating = false;
+$effect(() => {
+    if (!value.trim() && value !== '')
+        value = '';
+});
+let _preventCursorMoveOnNextSync = false;
+// Update the displayed HTML when value changes externally
+$effect(() => {
+    if (contentEditableDiv && !isUpdating) {
+        const currentText = getTextContent();
+        if (currentText !== value) {
+            updateDisplay(value);
+            if (!_preventCursorMoveOnNextSync) {
+                restoreCursor(value.length);
+                const cursorPos = getCursorPosition();
+                updateCurrentTag(cursorPos);
+            }
+        }
+    }
+    _preventCursorMoveOnNextSync = false;
+});
+export function preventCursorMoveOnNextSync() {
+    _preventCursorMoveOnNextSync = true;
+}
+function getTextContent() {
+    if (!contentEditableDiv)
+        return '';
+    return contentEditableDiv.textContent || '';
+}
+function updateDisplay(text) {
+    if (!contentEditableDiv)
+        return;
+    const html = highlightText(text);
+    contentEditableDiv.innerHTML = html;
+}
+/** Apply secondary highlight spans within a raw-text chunk. Returns HTML. */
+function applyHighlightsToChunk(rawText) {
+    if (!highlights || highlights.length === 0)
+        return escapeHtml(rawText);
+    // Find all highlight matches in the raw text
+    const hlMatches = [];
+    for (const hl of highlights) {
+        const regex = new RegExp(hl.regex, 'g');
+        let m;
+        while ((m = regex.exec(rawText)) !== null) {
+            hlMatches.push({ start: m.index, end: m.index + m[0].length, classes: hl.classes });
+        }
+    }
+    if (hlMatches.length === 0)
+        return escapeHtml(rawText);
+    // Sort and deduplicate (keep first on overlap)
+    hlMatches.sort((a, b) => a.start - b.start);
+    const filtered = [];
+    let lastEnd = -1;
+    for (const m of hlMatches) {
+        if (m.start >= lastEnd) {
+            filtered.push(m);
+            lastEnd = m.end;
+        }
+    }
+    let result = '';
+    let idx = 0;
+    for (const m of filtered) {
+        if (m.start > idx) {
+            result += escapeHtml(rawText.slice(idx, m.start));
+        }
+        result += `<span class="${m.classes}">${escapeHtml(rawText.slice(m.start, m.end))}</span>`;
+        idx = m.end;
+    }
+    if (idx < rawText.length) {
+        result += escapeHtml(rawText.slice(idx));
+    }
+    return result;
+}
+function highlightText(text) {
+    if (!text)
+        return '';
+    // Create a list of all matches with their positions
+    const matches = [];
+    tags.forEach((tag, tagIndex) => {
+        const regex = new RegExp(tag.regex, 'g');
+        let match;
+        while ((match = regex.exec(text)) !== null) {
+            matches.push({
+                start: match.index,
+                end: match.index + match[0].length,
+                tagIndex
+            });
+        }
+    });
+    // Sort matches by start position
+    matches.sort((a, b) => a.start - b.start);
+    // Remove overlapping matches (keep the first one)
+    const filteredMatches = [];
+    let lastEnd = -1;
+    for (const match of matches) {
+        if (match.start >= lastEnd) {
+            filteredMatches.push(match);
+            lastEnd = match.end;
+        }
+    }
+    // Build HTML with highlighted segments
+    let html = '';
+    let lastIndex = 0;
+    for (const match of filteredMatches) {
+        // Add text before the match (apply secondary highlights)
+        if (match.start > lastIndex) {
+            html += applyHighlightsToChunk(text.slice(lastIndex, match.start));
+        }
+        // Add highlighted match (with secondary highlights applied inside)
+        const matchedText = text.slice(match.start, match.end);
+        const tagId = tags[match.tagIndex].id;
+        const hasClear = !!tags[match.tagIndex].onClear;
+        const clearBtn = hasClear
+            ? `<span data-clear-tag="${tagId}" class="inline-flex w-2.5 h-3 ml-1 cursor-pointer opacity-50 hover:opacity-100" style="vertical-align: middle;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="pointer-events:none"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>`
+            : '';
+        html += `<span class="bg-surface-sunken/50 border border-border-light py-0.5 px-1.5 rounded" data-tag-id="${tagId}">${applyHighlightsToChunk(matchedText)}${clearBtn}</span>`;
+        lastIndex = match.end;
+    }
+    // Add remaining text (apply secondary highlights)
+    if (lastIndex < text.length) {
+        html += applyHighlightsToChunk(text.slice(lastIndex));
+    }
+    return html;
+}
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    let html = div.innerHTML;
+    html = html.replace(/\\(n|r|.)/g, (match, c) => {
+        const display = c === 'n' ? '↵' : c === 'r' ? '↵' : c;
+        return ('<span style="display: inline; width: 0; height: 0; overflow: hidden; position: absolute;">\\</span>' +
+            display);
+    });
+    return html;
+}
+let lastText = '';
+function applyTextUpdate(newText, newCursorPos) {
+    value = newText;
+    updateDisplay(newText);
+    restoreCursor(newCursorPos);
+    updateCurrentTag(newCursorPos);
+    lastText = newText;
+    isUpdating = false;
+}
+function handleInput() {
+    isUpdating = true;
+    const cursorPos = getCursorPosition();
+    let newText = getTextContent();
+    // Remove any "\." sequences that were added by browser smart punctuation
+    // These would only be created by macOS/browser when user double-presses space
+    if (newText.includes('\\.')) {
+        const cleanedText = newText.replace(/\\\./g, '');
+        const removedCount = (newText.length - cleanedText.length) / 2; // Each "\." is 2 chars
+        applyTextUpdate(cleanedText, cursorPos - removedCount * 2);
+        return;
+    }
+    // Escape any literal newlines (e.g. from Shift+Enter or IME input)
+    if (newText.includes('\n') || newText.includes('\r')) {
+        const before = newText.slice(0, cursorPos);
+        const newlinesBefore = (before.match(/[\n\r]/g) || []).length;
+        const cleanedText = newText.replace(/\r\n/g, '\\n').replace(/[\n\r]/g, '\\n');
+        // Each newline becomes 2 chars (\n), so cursor shifts by +1 per newline before it
+        applyTextUpdate(cleanedText, cursorPos + newlinesBefore);
+        return;
+    }
+    // Check if user just typed an escaped character
+    if (newText.length > lastText.length &&
+        (newText[cursorPos - 1] === ' ' ||
+            newText[cursorPos - 1] === '\u00A0' ||
+            newText[cursorPos - 1] === '\\')) {
+        // Check if there's already an escaped space right before the cursor (e.g., "tag\ |")
+        // If user types another space, just remove the backslash instead of adding "\ \"
+        if ((newText[cursorPos - 1] === ' ' || newText[cursorPos - 1] === '\u00A0') &&
+            newText[cursorPos - 3] === '\\' &&
+            (newText[cursorPos - 2] === ' ' || newText[cursorPos - 2] === '\u00A0')) {
+            // Remove the backslash before the existing space
+            newText = newText.slice(0, cursorPos - 3) + newText.slice(cursorPos - 2);
+            applyTextUpdate(newText, cursorPos - 1);
+            return;
+        }
+        // Escape the space/backslash by adding backslash before it
+        newText = newText.slice(0, cursorPos - 1) + '\\' + newText.slice(cursorPos - 1);
+        applyTextUpdate(newText, cursorPos + 1);
+        return;
+    }
+    applyTextUpdate(newText, cursorPos);
+}
+function getTextSegmentAtCursor(cursorPos) {
+    // Find all tag positions
+    const tagPositions = [];
+    for (const tag of tags) {
+        const regex = new RegExp(tag.regex, 'g');
+        let match;
+        while ((match = regex.exec(value)) !== null) {
+            tagPositions.push({
+                start: match.index,
+                end: match.index + match[0].length
+            });
+        }
+    }
+    // Sort by start position
+    tagPositions.sort((a, b) => a.start - b.start);
+    // Find the text segment containing the cursor
+    let segmentStart = 0;
+    let segmentEnd = value.length;
+    for (const tag of tagPositions) {
+        if (cursorPos <= tag.start) {
+            // Cursor is before this tag
+            segmentEnd = tag.start;
+            break;
+        }
+        else if (cursorPos > tag.end) {
+            // Cursor is after this tag
+            segmentStart = tag.end;
+        }
+        else {
+            // Cursor is inside a tag
+            return null;
+        }
+    }
+    return {
+        text: value.slice(segmentStart, segmentEnd).trim(),
+        start: segmentStart,
+        end: segmentEnd
+    };
+}
+function updateCurrentTag(cursorPos) {
+    let currentTag = null;
+    for (const tag of tags) {
+        const regex = new RegExp(tag.regex, 'g');
+        let match;
+        while ((match = regex.exec(value)) !== null) {
+            const start = match.index;
+            const end = match.index + match[0].length;
+            if (cursorPos >= start && cursorPos <= end) {
+                currentTag = { id: tag.id };
+                onCurrentTagChange?.(currentTag);
+                onTextSegmentAtCursorChange?.({ text: '', start: 0, end: 0 });
+                return;
+            }
+        }
+    }
+    onCurrentTagChange?.(null);
+    // Get text segment at cursor when not in a tag
+    const textSegment = getTextSegmentAtCursor(cursorPos);
+    if (textSegment) {
+        onTextSegmentAtCursorChange?.(textSegment);
+    }
+}
+function handleClick(e) {
+    // Check if the click landed on a clear button
+    const target = e.target;
+    const clearTarget = target?.closest('[data-clear-tag]');
+    if (clearTarget) {
+        const tagId = clearTarget.dataset.clearTag;
+        const tag = tags.find((t) => t.id === tagId);
+        tag?.onClear?.();
+        return;
+    }
+    const cursorPos = getCursorPosition();
+    updateCurrentTag(cursorPos);
+}
+function handleKeyup(e) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter')
+        return;
+    const cursorPos = getCursorPosition();
+    updateCurrentTag(cursorPos);
+}
+function handleKeyDown(e) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter')
+        return;
+    const cursorPos = getCursorPosition();
+    const text = getTextContent();
+    // Handle Backspace key to remove escape sequences
+    if (e.key === 'Backspace') {
+        // Check if we're right after an escaped character (e.g., "abc\ |def")
+        // We want to remove both the backslash and the escaped character
+        if (cursorPos >= 2 && text[cursorPos - 2] === '\\') {
+            e.preventDefault();
+            isUpdating = true;
+            const newText = text.slice(0, cursorPos - 2) + text.slice(cursorPos);
+            applyTextUpdate(newText, cursorPos - 2);
+            return;
+        }
+    }
+    // Handle Delete key to remove escape sequences
+    if (e.key === 'Delete') {
+        // Check if the character at cursor position is a backslash (escape character)
+        if (cursorPos < text.length && text[cursorPos] === '\\' && cursorPos + 1 < text.length) {
+            e.preventDefault();
+            isUpdating = true;
+            const newText = text.slice(0, cursorPos) + text.slice(cursorPos + 2);
+            applyTextUpdate(newText, cursorPos);
+            return;
+        }
+    }
+    // Handle arrow key navigation to skip escape sequences
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        if (e.key === 'ArrowLeft' && cursorPos > 0) {
+            // Moving left: check if we're right after an escaped character (e.g., "abc\ |def")
+            // We want to skip over the backslash and the escaped character
+            if (cursorPos >= 2 && text[cursorPos - 2] === '\\') {
+                e.preventDefault();
+                isUpdating = true;
+                restoreCursor(cursorPos - 2);
+                updateCurrentTag(cursorPos - 2);
+                isUpdating = false;
+                return;
+            }
+        }
+        else if (e.key === 'ArrowRight') {
+            // Moving right: check if we're at a backslash (e.g., "abc|\ def")
+            // We want to skip over the backslash and the escaped character
+            if (cursorPos < text.length && text[cursorPos] === '\\' && cursorPos + 1 < text.length) {
+                e.preventDefault();
+                isUpdating = true;
+                restoreCursor(cursorPos + 2);
+                updateCurrentTag(cursorPos + 2);
+                isUpdating = false;
+                return;
+            }
+            // If user pressed right arrow and is at the end, add a space if needed
+            if (cursorPos === text.length &&
+                text.length > 0 &&
+                ((text[text.length - 1] !== ' ' && text[text.length - 1] !== '\u00A0') ||
+                    text[text.length - 2] === '\\')) {
+                e.preventDefault();
+                isUpdating = true;
+                const newText = text + '\u00A0';
+                applyTextUpdate(newText, newText.length);
+                return;
+            }
+        }
+    }
+}
+function getCursorPosition() {
+    if (!contentEditableDiv)
+        return 0;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return 0;
+    const range = selection.getRangeAt(0);
+    const preCaretRange = range.cloneRange();
+    preCaretRange.selectNodeContents(contentEditableDiv);
+    preCaretRange.setEnd(range.endContainer, range.endOffset);
+    return preCaretRange.toString().length;
+}
+function restoreCursor(position) {
+    if (!contentEditableDiv)
+        return;
+    const selection = window.getSelection();
+    if (!selection)
+        return;
+    let currentPos = 0;
+    let node = null;
+    let offset = 0;
+    function traverse(n) {
+        if (n.nodeType === Node.TEXT_NODE) {
+            const textLength = n.textContent?.length || 0;
+            if (currentPos + textLength >= position) {
+                node = n;
+                offset = position - currentPos;
+                return true;
+            }
+            currentPos += textLength;
+        }
+        else {
+            for (let i = 0; i < n.childNodes.length; i++) {
+                if (traverse(n.childNodes[i])) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    traverse(contentEditableDiv);
+    if (node) {
+        const range = document.createRange();
+        range.setStart(node, offset);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        // Ensure cursor is visible by scrolling if needed
+        ensureCursorVisible();
+    }
+}
+function ensureCursorVisible() {
+    if (!contentEditableDiv)
+        return;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const containerRect = contentEditableDiv.getBoundingClientRect();
+    // Check if cursor is outside the visible area horizontally
+    if (rect.left < containerRect.left) {
+        // Cursor is to the left of visible area
+        contentEditableDiv.scrollLeft -= containerRect.left - rect.left + 10;
+    }
+    else if (rect.right > containerRect.right) {
+        // Cursor is to the right of visible area
+        contentEditableDiv.scrollLeft += rect.right - containerRect.right + 10;
+    }
+}
+function handlePaste(e) {
+    e.preventDefault();
+    let text = e.clipboardData?.getData('text/plain') || '';
+    // Escape backslashes, spaces, and newlines
+    text = text
+        .replace(/\\/g, '\\\\')
+        .replace(/ /g, '\\ ')
+        .replace(/\r\n/g, '\\n')
+        .replace(/[\n\r]/g, '\\n');
+    document.execCommand('insertText', false, text);
+}
+export function focusAtEnd() {
+    if (!contentEditableDiv)
+        return;
+    contentEditableDiv.focus();
+    restoreCursor(value.length);
+    updateCurrentTag(value.length);
+    contentEditableDiv.scrollLeft = contentEditableDiv.scrollWidth;
+}
+</script>
+
+<div
+	bind:this={contentEditableDiv}
+	contenteditable="true"
+	oninput={handleInput}
+	onpaste={handlePaste}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+	onkeyup={handleKeyup}
+	class="outline-none text-nowrap pt-[0.45rem] {className}"
+	class:text-hint={value === ''}
+	data-placeholder={placeholder}
+	role="textbox"
+	tabindex="0"
+	spellcheck="false"
+></div>
+
+<style>
+	[contenteditable][data-placeholder]:empty::before {
+		content: attr(data-placeholder);
+	}</style>

package/package/components/TaggedTextInput.svelte.d.ts

@@ -0,0 +1,28 @@
+type $$ComponentProps = {
+    tags: {
+        regex: RegExp;
+        id: string;
+        onClear?: () => void;
+    }[];
+    value?: string;
+    placeholder?: string;
+    highlights?: {
+        regex: RegExp;
+        classes: string;
+    }[];
+    onCurrentTagChange?: (tag: {
+        id: string;
+    } | null) => void;
+    onTextSegmentAtCursorChange?: (segment: {
+        text: string;
+        start: number;
+        end: number;
+    }) => void;
+    class?: string;
+};
+declare const TaggedTextInput: import("svelte").Component<$$ComponentProps, {
+    preventCursorMoveOnNextSync: () => void;
+    focusAtEnd: () => void;
+}, "value">;
+type TaggedTextInput = ReturnType<typeof TaggedTextInput>;
+export default TaggedTextInput;

package/package/components/TeamSelector.svelte

@@ -15,7 +15,6 @@ let totalCount = $state(0);
 let preSearchTeams = $state(null);
 let preSearchNextLink = $state(null);
 let preSearchTotalCount = $state(0);
-let selectedTeamId = $state(selectedTeam?.team_id);
 const searchMode = $derived(!teams);
 // Check if there are more teams to load (based on next_link presence)
 const hasMoreTeams = $derived(!!nextLink);
@@ -28,19 +27,19 @@ let displayTeams = $derived.by(() => {
     }
     return baseTeams;
 });
-$effect(() => {
-    const newTeam = selectedTeamId
-        ? displayTeams.find((t) => t.team_id === selectedTeamId)
-        : undefined;
-    if (newTeam?.team_id !== selectedTeam?.team_id) {
-        selectedTeam = newTeam;
+// Single getter/setter to bridge Select's string value ↔ selectedTeam object.
+// This replaces the previous two bidirectional $effect sync blocks.
+function setSelectedTeamById(newId) {
+    if (newId) {
+        const team = displayTeams.find((t) => t.team_id === newId);
+        if (team && team.team_id !== selectedTeam?.team_id) {
+            selectedTeam = team;
+        }
     }
-});
-$effect(() => {
-    if (selectedTeam?.team_id !== selectedTeamId) {
-        selectedTeamId = selectedTeam?.team_id;
+    else if (selectedTeam !== undefined) {
+        selectedTeam = undefined;
     }
-});
+}
 let previousTeamId = $state(undefined);
 $effect(() => {
     if (selectedTeam?.team_id !== previousTeamId) {
@@ -77,6 +76,7 @@ $effect(() => {
     }
 });
 function restorePreSearchState() {
+    debouncedSearch.clearDebounce();
     searchRequestId++; // Invalidate any in-flight search
     if (preSearchTeams !== null) {
         // Restore the accumulated teams from before the search
@@ -216,7 +216,10 @@ async function refreshTeams() {
 						disabled={disabled || isFetching}
 						loading={isFetching}
 						bind:filterText={searchFilterText}
-						bind:value={selectedTeamId}
+						bind:value={
+							() => selectedTeam?.team_id,
+							(newId) => setSelectedTeamById(newId)
+						}
 					/>
 				{:else}
 					<Select
@@ -228,7 +231,10 @@ async function refreshTeams() {
 						placeholder="Select a team"
 						clearable
 						disabled={disabled || isFetching}
-						bind:value={selectedTeamId}
+						bind:value={
+							() => selectedTeam?.team_id,
+							(newId) => setSelectedTeamById(newId)
+						}
 					/>
 				{/if}
 			</div>

package/package/components/TemplateEditor.svelte

@@ -341,7 +341,7 @@ if (typeof code != 'string') {
 }
 const lang = 'template';
 const dispatch = createEventDispatcher();
-const uri = `file:///${hash}.ts`;
+const uri = `file:///${untrack(() => hash)}.ts`;
 export function insertAtCursor(code) {
     if (editor) {
         editor.trigger('keyboard', 'type', { text: code });
@@ -362,7 +362,6 @@ export function getCode() {
 }
 let cip;
 let extraModel;
-let width = $state(0);
 // let widgets: HTMLElement | undefined = document.getElementById('monaco-widgets-root') ?? undefined
 let initialized = $state(false);
 let jsLoader = undefined;
@@ -454,10 +453,6 @@ async function loadMonaco() {
             if (divEl) {
                 divEl.style.height = `${contentHeight}px`;
             }
-            try {
-                editor?.layout({ width, height: contentHeight });
-            }
-            catch { }
         };
         editor.onDidContentSizeChange(updateHeight);
         updateHeight();
@@ -607,7 +602,6 @@ $effect(() => {
 		bind:this={divEl}
 		style="height: 18px;"
 		class="template nonmain-editor rounded-md overflow-clip {!editor ? 'hidden' : ''}"
-		bind:clientWidth={width}
 	></div>
 </div>
 

package/package/components/TestConnection.svelte

@@ -4,10 +4,7 @@ import Button from './common/button/Button.svelte';
 import { sendUserToast } from '../toast';
 import { workspaceStore } from '../stores';
 import { tryEvery } from '../utils';
-export let workspaceOverride = undefined;
-export let resourceType;
-export let args = {};
-export let buttonTextOverride = undefined;
+let { workspaceOverride = undefined, resourceType, args = {}, buttonTextOverride = undefined } = $props();
 const scripts = {
     postgresql: {
         code: `SELECT 1`,
@@ -153,7 +150,7 @@ export async function main(bucket: any) {
         argName: 'bucket'
     }
 };
-let loading = false;
+let loading = $state(false);
 async function testConnection() {
     if (!resourceType)
         return;

package/package/components/TestConnection.svelte.d.ts

@@ -1,23 +1,9 @@
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TestConnection: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     workspaceOverride?: string | undefined;
     resourceType: string | undefined;
     args?: Record<string, any> | any;
     buttonTextOverride?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TestConnection = InstanceType<typeof TestConnection>;
+}
+declare const TestConnection: import("svelte").Component<Props, {}, "">;
+type TestConnection = ReturnType<typeof TestConnection>;
 export default TestConnection;

package/package/components/TimelineBar.svelte

@@ -11,7 +11,7 @@ let { position = 'center', total, min, started_at, len, id, running, concat = fa
 	{/if}
 	<Popover
 		style="width: {(len / total) * 100}%"
-		class="h-4 {gray
+		class="h-4 relative {gray
 			? 'bg-gray-300 dark:bg-gray-600'
 			: running
 				? 'bg-blue-400/90'
@@ -27,7 +27,10 @@ let { position = 'center', total, min, started_at, len, id, running, concat = fa
 			>
 		{/snippet}
 		{#if len > 0}
-			<span class={len / total < 0.09 ? '-ml-14 text-primary font-mono' : 'font-mono'}
+			{@const narrow = len / total < 0.09}
+			{@const endPos = started_at != undefined && min != undefined ? (started_at - min + len) / total : 1}
+			{@const nearStart = endPos < 0.15}
+			<span class={narrow ? (nearStart ? 'absolute left-full ml-2 text-primary font-mono' : 'absolute right-full mr-1 text-primary font-mono') : 'font-mono'}
 				>{#if len}{msToSec(len, 1)}s{/if}</span
 			>
 		{/if}