windmill-components 1.665.0 → 1.677.0

package/package/components/Password.svelte

@@ -1,15 +1,32 @@
 <script lang="ts">import { createBubbler } from 'svelte/legacy';
+import { tick } from 'svelte';
 import Button from './common/button/Button.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import { Eye, EyeClosed } from 'lucide-svelte';
 const bubble = createBubbler();
-let { password = $bindable(), placeholder = '******', disabled = false, required = false, small = false, id, onKeyDown, onBlur } = $props();
+let { password = $bindable(), placeholder = '******', disabled = false, required = false, small = false, minRows, id, onKeyDown, onBlur } = $props();
 let red = $derived(required && (password == '' || password == undefined));
 let hideValue = $state(true);
+let forceMultiline = $state(false);
+let isMultiline = $derived(forceMultiline || (minRows != null && minRows > 1) || (password?.includes('\n') ?? false));
+let textareaRef = $state();
+function insertAndSwitchToMultiline(input, text) {
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    if (start != null && end != null) {
+        password = (password ?? '').substring(0, start) + text + (password ?? '').substring(end);
+    }
+    else {
+        // selectionStart/End are null for type="password" inputs
+        password = (password ?? '') + text;
+    }
+    forceMultiline = true;
+    tick().then(() => textareaRef?.focus());
+}
 </script>
 
 <div class="relative w-full {small ? 'max-w-lg' : ''}">
-	<div class="absolute inset-y-0 right-1 flex items-center">
+	<div class="absolute {isMultiline ? 'top-1' : 'inset-y-0'} right-1 flex items-center z-10">
 		<Button
 			unifiedSize="sm"
 			onClick={() => (hideValue = !hideValue)}
@@ -19,24 +36,61 @@ let hideValue = $state(true);
 			wrapperClasses="bg-surface-input"
 		/>
 	</div>
-	<TextInput
-		size="md"
-		error={red}
-		bind:value={password}
-		inputProps={{
-			id,
-			disabled,
-			placeholder,
-			autocomplete: 'new-password',
-			onblur: (e) => onBlur?.(e),
-			onkeydown: (e) => {
-				onKeyDown?.(e)
-				bubble('keydown')(e)
-			},
-			type: hideValue ? 'password' : 'text'
-		}}
-		class="pr-8"
-	/>
+	{#if isMultiline}
+		<TextInput
+			bind:this={textareaRef}
+			size="md"
+			error={red}
+			bind:value={password}
+			underlyingInputEl="textarea"
+			inputProps={{
+				id,
+				disabled,
+				placeholder,
+				rows: minRows ?? 3,
+				autocomplete: 'new-password',
+				onblur: (e) => onBlur?.(e),
+				onkeydown: (e) => {
+					onKeyDown?.(e)
+					bubble('keydown')(e)
+				},
+				style: hideValue ? '-webkit-text-security: disc' : ''
+			}}
+			class="pr-8"
+			unifiedHeight={false}
+		/>
+	{:else}
+		<TextInput
+			size="md"
+			error={red}
+			bind:value={password}
+			inputProps={{
+				id,
+				disabled,
+				placeholder,
+				autocomplete: 'new-password',
+				onblur: (e) => onBlur?.(e),
+				onkeydown: (e) => {
+					if (e.key === 'Enter') {
+						e.preventDefault()
+						insertAndSwitchToMultiline(e.currentTarget as HTMLInputElement, '\n')
+						return
+					}
+					onKeyDown?.(e)
+					bubble('keydown')(e)
+				},
+				onpaste: (e) => {
+					const text = e.clipboardData?.getData('text')
+					if (text?.includes('\n')) {
+						e.preventDefault()
+						insertAndSwitchToMultiline(e.currentTarget as HTMLInputElement, text)
+					}
+				},
+				type: hideValue ? 'password' : 'text'
+			}}
+			class="pr-8"
+		/>
+	{/if}
 </div>
 {#if red}
 	<div class="text-red-600 text-2xs grow">This field is required</div>

package/package/components/Password.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     disabled?: boolean;
     required?: boolean;
     small?: boolean;
+    minRows?: number;
     id?: string;
     onKeyDown?: (event: KeyboardEvent) => void;
     onBlur?: (event: FocusEvent) => void;

package/package/components/PasswordArgInput.svelte

@@ -4,7 +4,7 @@ import { generateRandomString } from '../utils';
 import { Button } from './common';
 import Password from './Password.svelte';
 import { untrack } from 'svelte';
-let { value = $bindable(undefined), disabled } = $props();
+let { value = $bindable(undefined), disabled, minRows } = $props();
 let path = $state('');
 let password = $state(value && typeof value === 'string' && !value.startsWith('$var:') ? value : '');
 let isGenerating = false;
@@ -80,5 +80,5 @@ $effect(() => {
 		</Button>
 	</div>
 {:else}
-	<Password {disabled} bind:password />
+	<Password {disabled} {minRows} bind:password />
 {/if}

package/package/components/PasswordArgInput.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     value?: string | undefined;
     disabled: boolean;
+    minRows?: number;
 }
 declare const PasswordArgInput: import("svelte").Component<Props, {}, "value">;
 type PasswordArgInput = ReturnType<typeof PasswordArgInput>;

package/package/components/Path.svelte

@@ -17,6 +17,7 @@ import { Folder, Loader2, SearchCode, User } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import { tick } from 'svelte';
 import FolderPicker from './FolderPicker.svelte';
+import PathNameAutocomplete from './PathNameAutocomplete.svelte';
 import TextInput from './text_input/TextInput.svelte';
 let meta = $state(undefined);
 let { fullNamePlaceholder = undefined, namePlaceholder = '', initialPath, path = $bindable(undefined), error = $bindable(undefined), disabled = $bindable(false), checkInitialPathExistence = false, autofocus = true, dirty = $bindable(false), kind, hideUser = false, disableEditing = false, hideFullPath = false, size = 'md', drawerOffset = 0 } = $props();
@@ -397,20 +398,17 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 			<div class="text-sm text-secondary">/</div>
 			<label class="block grow min-w-32 max-w-md">
 				<!-- svelte-ignore a11y_autofocus -->
-				<TextInput
+				<PathNameAutocomplete
 					bind:this={inputP}
 					bind:value={meta.name}
+					prefix={`${meta.ownerKind?.charAt(0) ?? ''}/${meta.owner ?? ''}/`}
 					{size}
 					{error}
-					inputProps={{
-						disabled: disabled || disableEditing,
-						type: 'text',
-						id: 'path',
-						autofocus,
-						autocomplete: 'off',
-						onkeyup: handleKeyUp,
-						placeholder: namePlaceholder
-					}}
+					{autofocus}
+					id="path"
+					placeholder={namePlaceholder}
+					disabled={disabled || disableEditing}
+					onkeyup={handleKeyUp}
 				/>
 			</label>
 		{/if}

package/package/components/PathNameAutocomplete.svelte

@@ -0,0 +1,308 @@
+<script module lang="ts">import { PathAutocompleteService } from '../gen';
+/** Client-side TTL for the workspace path list (mirrors backend cache). */
+const PATH_LIST_TTL_MS = 60_000;
+/** Module-level shared cache so multiple PathNameAutocomplete instances on
+ * the same page reuse a single fetch per workspace. */
+const pathListCache = new Map();
+export async function fetchWorkspacePaths(workspace) {
+    const now = Date.now();
+    const existing = pathListCache.get(workspace);
+    if (existing) {
+        if (existing.paths && now - existing.at < PATH_LIST_TTL_MS)
+            return existing.paths;
+        if (existing.pending)
+            return existing.pending;
+    }
+    const pending = (async () => {
+        try {
+            const res = await PathAutocompleteService.listPathAutocompletePaths({ workspace });
+            const paths = res.paths ?? [];
+            pathListCache.set(workspace, { at: Date.now(), paths, pending: null });
+            return paths;
+        }
+        catch (_e) {
+            pathListCache.delete(workspace);
+            return [];
+        }
+    })();
+    pathListCache.set(workspace, { at: now, paths: null, pending });
+    return pending;
+}
+export function invalidateWorkspacePaths(workspace) {
+    pathListCache.delete(workspace);
+}
+/** Derive the set of path segments that exist directly under a given folder
+ * prefix, from the flat list of all workspace paths. */
+export function segmentsUnderPrefix(paths, folderPrefix) {
+    const seen = new Map();
+    const prefixLen = folderPrefix.length;
+    for (const p of paths) {
+        if (!p.startsWith(folderPrefix))
+            continue;
+        const remainder = p.slice(prefixLen);
+        if (remainder.length === 0)
+            continue;
+        const slash = remainder.indexOf('/');
+        if (slash >= 0) {
+            seen.set(remainder.slice(0, slash), true);
+        }
+        else if (!seen.has(remainder)) {
+            seen.set(remainder, false);
+        }
+    }
+    return Array.from(seen, ([name, is_folder]) => ({ name, is_folder })).sort((a, b) => a.name.localeCompare(b.name));
+}
+</script>
+
+<script lang="ts">import TextInput from './text_input/TextInput.svelte';
+import { workspaceStore } from '../stores';
+import { untrack } from 'svelte';
+let { prefix, value = $bindable(), placeholder = '', disabled = false, autofocus = false, id, size = 'md', error, onkeyup } = $props();
+let inputEl = $state(undefined);
+export function focus() {
+    inputEl?.focus();
+}
+let allPaths = $state([]);
+let cycleMode = $state(null);
+let dismissedFor = $state(undefined);
+let hasFocus = $state(false);
+// Flag set when keydown consumes Enter for ghost-text acceptance.
+// Checked in keyup to suppress Path.svelte's 'enter' dispatch.
+let enterConsumed = false;
+let currentSegment = $derived.by(() => {
+    const v = value ?? '';
+    const idx = v.lastIndexOf('/');
+    return idx >= 0 ? v.slice(idx + 1) : v;
+});
+let folderPrefix = $derived.by(() => {
+    const v = value ?? '';
+    const idx = v.lastIndexOf('/');
+    return prefix + (idx >= 0 ? v.slice(0, idx + 1) : '');
+});
+let fullPrefix = $derived(prefix + (value ?? ''));
+let derivedFolderMatches = $derived.by(() => {
+    if (allPaths.length === 0)
+        return [];
+    return segmentsUnderPrefix(allPaths, folderPrefix).filter((s) => s.is_folder && s.name.startsWith(currentSegment));
+});
+let displayedOptions = $derived(cycleMode ? cycleMode.options : derivedFolderMatches);
+let displayedActiveIndex = $derived(cycleMode ? cycleMode.index : -1);
+// Ghost text: longest common prefix across all matching folder names,
+// beyond what the user has already typed. Shows the unambiguous part
+// the user can accept with Enter (multi-match) or Tab (single match).
+let ghostText = $derived.by(() => {
+    if (cycleMode)
+        return '';
+    if (derivedFolderMatches.length === 0)
+        return '';
+    const names = derivedFolderMatches.map((s) => s.name);
+    // Compute LCP of all matching folder names
+    let lcp = names[0];
+    for (let i = 1; i < names.length; i++) {
+        let j = 0;
+        while (j < lcp.length && j < names[i].length && lcp[j] === names[i][j])
+            j++;
+        lcp = lcp.slice(0, j);
+    }
+    if (lcp.length <= currentSegment.length)
+        return '';
+    const completion = lcp.slice(currentSegment.length);
+    // Append '/' only when the LCP fully resolves to one folder name
+    const trailingSlash = derivedFolderMatches.length === 1 ? '/' : '';
+    return completion + trailingSlash;
+});
+let showList = $derived(!disabled && dismissedFor !== fullPrefix && hasFocus && displayedOptions.length > 0);
+function applyCycleOrComplete(direction) {
+    if (cycleMode) {
+        const n = cycleMode.options.length;
+        const nextIdx = (cycleMode.index + direction + n) % n;
+        cycleMode = { ...cycleMode, index: nextIdx };
+        value = cycleMode.cyclePrefix + cycleMode.options[nextIdx].name + '/';
+        return true;
+    }
+    if (derivedFolderMatches.length === 0)
+        return false;
+    const opts = [...derivedFolderMatches];
+    const vNow = value ?? '';
+    const slash = vNow.lastIndexOf('/');
+    const cyclePrefix = slash >= 0 ? vNow.slice(0, slash + 1) : '';
+    if (opts.length === 1) {
+        value = cyclePrefix + opts[0].name + '/';
+        return true;
+    }
+    const idx = direction === 1 ? 0 : opts.length - 1;
+    cycleMode = { cyclePrefix, options: opts, index: idx };
+    value = cyclePrefix + opts[idx].name + '/';
+    return true;
+}
+function handleKeydown(e) {
+    if (e.key === 'Tab' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const dir = e.shiftKey ? -1 : 1;
+        if (applyCycleOrComplete(dir)) {
+            e.preventDefault();
+            return;
+        }
+        return;
+    }
+    // Enter picks the currently highlighted folder (from Tab cycling)
+    // or the first match, and navigates into it.
+    if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
+        let pick;
+        let committed = '';
+        if (cycleMode) {
+            pick = cycleMode.options[cycleMode.index];
+            committed = cycleMode.cyclePrefix;
+        }
+        else if (derivedFolderMatches.length > 0) {
+            pick = derivedFolderMatches[0];
+            const vNow = value ?? '';
+            const slash = vNow.lastIndexOf('/');
+            committed = slash >= 0 ? vNow.slice(0, slash + 1) : '';
+        }
+        if (pick) {
+            e.preventDefault();
+            e.stopPropagation();
+            enterConsumed = true;
+            value = committed + pick.name + '/';
+            cycleMode = null;
+            return;
+        }
+    }
+    if (e.key === 'Escape' && (cycleMode || showList || ghostText)) {
+        e.stopPropagation();
+        cycleMode = null;
+        dismissedFor = fullPrefix;
+        return;
+    }
+}
+function selectOption(opt) {
+    const vNow = value ?? '';
+    const slash = vNow.lastIndexOf('/');
+    const valueCommitted = slash >= 0 ? vNow.slice(0, slash + 1) : '';
+    value = valueCommitted + opt.name + '/';
+    cycleMode = null;
+    inputEl?.focus();
+}
+async function loadPaths(workspace) {
+    const paths = await fetchWorkspacePaths(workspace);
+    // Guard against workspace changing during the in-flight fetch.
+    if ($workspaceStore === workspace)
+        allPaths = paths;
+}
+$effect(() => {
+    const ws = $workspaceStore;
+    if (ws)
+        void loadPaths(ws);
+});
+$effect(() => {
+    void value;
+    void prefix;
+    // Re-arm after the dismissed prefix is left.
+    if (untrack(() => dismissedFor) !== undefined) {
+        const curr = untrack(() => fullPrefix);
+        if (untrack(() => dismissedFor) !== curr)
+            dismissedFor = undefined;
+    }
+    // Exit cycle mode if the value no longer matches the cycled option.
+    const cm = untrack(() => cycleMode);
+    if (cm) {
+        const expected = cm.cyclePrefix + cm.options[cm.index].name + '/';
+        if ((value ?? '') !== expected)
+            cycleMode = null;
+    }
+});
+const overlayPaddingX = {
+    xs: 'px-1',
+    sm: 'px-2',
+    md: 'px-2',
+    lg: 'px-2'
+};
+const overlayHeight = {
+    xs: 'h-5',
+    sm: 'h-7',
+    md: 'h-8',
+    lg: 'h-10'
+};
+function onInputFocus() {
+    hasFocus = true;
+    // Opportunistic refresh if the cache is stale.
+    if ($workspaceStore)
+        void loadPaths($workspaceStore);
+}
+function onInputBlur() {
+    setTimeout(() => {
+        hasFocus = false;
+    }, 150);
+}
+</script>
+
+<div class="relative w-full">
+	<div class="relative w-full">
+		<TextInput
+			bind:this={inputEl}
+			bind:value
+			{size}
+			{error}
+			inputProps={{
+				disabled,
+				type: 'text',
+				id,
+				autofocus,
+				autocomplete: 'off',
+				spellcheck: false,
+				placeholder: showList || ghostText ? '' : placeholder,
+				onkeydown: handleKeydown,
+				onkeyup: (e: KeyboardEvent) => {
+					if (e.key === 'Enter' && enterConsumed) {
+						e.preventDefault()
+						e.stopPropagation()
+						enterConsumed = false
+						return
+					}
+					onkeyup?.(e)
+				},
+				onfocus: onInputFocus,
+				onblur: onInputBlur
+			}}
+		/>
+		{#if ghostText && hasFocus && !cycleMode}
+			<div
+				class="pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-pre font-normal text-xs text-primary {overlayPaddingX[
+					size
+				]} {overlayHeight[size]}"
+				aria-hidden="true"
+			>
+				<span class="invisible">{value ?? ''}</span>
+				<span class="text-tertiary/70">{ghostText}</span>
+				<span
+					class="ml-1.5 px-1 py-0 rounded border border-border-light text-[10px] text-tertiary bg-surface-secondary"
+				>
+					Enter
+				</span>
+			</div>
+		{/if}
+	</div>
+	{#if showList}
+		<div
+			class="absolute left-0 top-full z-10 mt-1 flex max-w-full flex-wrap items-center gap-1 rounded border border-border-light bg-surface px-1.5 py-1 shadow-sm"
+		>
+			<span class="text-[10px] text-tertiary mr-0.5">
+				{cycleMode ? 'Tab to cycle' : 'Tab'}
+			</span>
+			{#each displayedOptions as opt, i (opt.name)}
+				<button
+					type="button"
+					tabindex="-1"
+					onmousedown={(e) => e.preventDefault()}
+					onclick={() => selectOption(opt)}
+					class="px-1.5 py-0 rounded border text-[11px] font-mono leading-5 transition-colors
+						{i === displayedActiveIndex
+						? 'border-border-selected bg-surface-selected text-primary'
+						: 'border-border-light bg-surface-secondary text-secondary hover:border-border-selected'}"
+				>
+					{opt.name}/
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>

package/package/components/PathNameAutocomplete.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { ButtonType } from './common/button/model';
+type InputSize = ButtonType.UnifiedSize;
+export type AutocompleteSegment = {
+    name: string;
+    is_folder: boolean;
+};
+export declare function fetchWorkspacePaths(workspace: string): Promise<string[]>;
+export declare function invalidateWorkspacePaths(workspace: string): void;
+/** Derive the set of path segments that exist directly under a given folder
+ * prefix, from the flat list of all workspace paths. */
+export declare function segmentsUnderPrefix(paths: string[], folderPrefix: string): AutocompleteSegment[];
+type Props = {
+    prefix: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    id?: string;
+    size?: InputSize;
+    error?: string | boolean;
+    onkeyup?: (e: KeyboardEvent) => void;
+};
+declare const PathNameAutocomplete: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type PathNameAutocomplete = ReturnType<typeof PathNameAutocomplete>;
+export default PathNameAutocomplete;

package/package/components/PowerShellCommonParams.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">import { Badge } from './common';
+import Toggle from './Toggle.svelte';
+import Select from './select/Select.svelte';
+import { untrack } from 'svelte';
+import { ChevronRight } from 'lucide-svelte';
+let { args = $bindable({}) } = $props();
+let verbose = $state(false);
+let debug = $state(false);
+let errorAction = $state(undefined);
+let collapsed = $state(true);
+let initialized = false;
+const errorActionItems = [
+    { label: 'Stop', value: 'Stop' },
+    { label: 'Continue', value: 'Continue' },
+    { label: 'SilentlyContinue', value: 'SilentlyContinue' }
+];
+let activeBadges = $derived.by(() => {
+    const badges = [];
+    if (verbose)
+        badges.push('Verbose');
+    if (debug)
+        badges.push('Debug');
+    if (errorAction)
+        badges.push(`ErrorAction: ${errorAction}`);
+    return badges;
+});
+// Initialize toggles from pre-populated args (e.g. "Run again")
+$effect(() => {
+    if (!initialized && args && Object.keys(args).length > 0) {
+        initialized = true;
+        untrack(() => {
+            verbose = args['_wm_ps_verbose'] === true;
+            debug = args['_wm_ps_debug'] === true;
+            errorAction = args['_wm_ps_error_action'] ?? undefined;
+        });
+    }
+});
+// Sync toggles → args
+$effect(() => {
+    const newArgs = {};
+    if (verbose)
+        newArgs['_wm_ps_verbose'] = true;
+    if (debug)
+        newArgs['_wm_ps_debug'] = true;
+    if (errorAction)
+        newArgs['_wm_ps_error_action'] = errorAction;
+    args = newArgs;
+});
+</script>
+
+<div class="flex flex-col">
+	<button
+		class="flex items-center gap-1 text-xs text-secondary hover:text-primary transition-colors"
+		onclick={() => (collapsed = !collapsed)}
+	>
+		<ChevronRight size={12} class="transition duration-200 {collapsed ? '' : 'rotate-90'}" />
+		CmdletBinding parameters
+		{#if collapsed && activeBadges.length > 0}
+			<div class="flex gap-1 ml-1">
+				{#each activeBadges as label}
+					<Badge color="blue">{label}</Badge>
+				{/each}
+			</div>
+		{/if}
+	</button>
+	{#if !collapsed}
+		<div class="flex flex-col gap-2 mt-2 ml-4">
+			<Toggle options={{ right: 'Verbose' }} bind:checked={verbose} size="xs" />
+			<Toggle options={{ right: 'Debug' }} bind:checked={debug} size="xs" />
+			<div class="flex items-center gap-2">
+				<span class="text-xs text-secondary">ErrorAction</span>
+				<div class="w-40">
+					<Select
+						items={errorActionItems}
+						bind:value={errorAction}
+						placeholder="Default"
+						clearable
+						size="sm"
+					/>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/package/components/PowerShellCommonParams.svelte.d.ts

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

package/package/components/Range.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { run, createBubbler, stopPropagation } from 'svelte/legacy';
 const bubble = createBubbler();
 import RangeSlider from 'svelte-range-slider-pips';
-let { min = 0, max = 100, initialValue = 0, value = $bindable(typeof initialValue === 'string' ? parseInt(initialValue) : initialValue), disabled = false, defaultValue = undefined, format = (v) => `${v}`, hideInput = false } = $props();
+let { min = 0, max = 100, initialValue = 0, value = $bindable(), disabled = false, defaultValue = undefined, format = (v) => `${v}`, hideInput = false } = $props();
 let step = 1;
 let slider = $state();
 function calculateAxisStep(min, max) {
@@ -9,8 +9,13 @@ function calculateAxisStep(min, max) {
     return range < 100 ? 1 : range / 20;
 }
 run(() => {
-    if (value === null) {
-        value = 0;
+    if (value === null || value === undefined || Number.isNaN(value)) {
+        const fallback = initialValue !== undefined
+            ? typeof initialValue === 'string'
+                ? parseInt(initialValue)
+                : initialValue
+            : (min ?? 0);
+        value = Number.isNaN(fallback) ? (min ?? 0) : fallback;
     }
 });
 let axisStep = $derived(calculateAxisStep(min, max));