windmill-components 1.613.5 → 1.623.1

package/package/components/copilot/chat/AppAvailableContextList.svelte

@@ -1,263 +0,0 @@
-<script lang="ts">import { ContextIconMap } from './context';
-import { ArrowLeft, ChevronRight, FileCode, Code2, Table2 } from 'lucide-svelte';
-const { availableContext, selectedContext, onSelect, setShowing, showAllAvailable = false, stringSearch = '', onViewChange } = $props();
-// Current view state: 'categories' or specific category type
-let currentView = $state('categories');
-// Selected index for keyboard navigation
-let itemSelectedIndex = $state(0);
-let categorySelectedIndex = $state(0);
-// Category definitions for app mode
-const categories = [
-    { id: 'files', label: 'Frontend Files', icon: FileCode },
-    { id: 'runnables', label: 'Backend Runnables', icon: Code2 },
-    { id: 'datatables', label: 'Datatables', icon: Table2 }
-];
-const filteredAvailableContext = $derived(availableContext.filter((context) => {
-    const filtered = (showAllAvailable ||
-        !selectedContext.some((sc) => sc.type === context.type && sc.title === context.title)) &&
-        (!stringSearch || context.title.toLowerCase().includes(stringSearch.toLowerCase()));
-    return filtered;
-}));
-// Group context by category
-const contextByCategory = $derived.by(() => {
-    const grouped = {
-        files: [],
-        runnables: [],
-        datatables: []
-    };
-    filteredAvailableContext.forEach((context) => {
-        if (context.type === 'app_frontend_file')
-            grouped.files.push(context);
-        else if (context.type === 'app_backend_runnable')
-            grouped.runnables.push(context);
-        else if (context.type === 'app_datatable')
-            grouped.datatables.push(context);
-    });
-    return grouped;
-});
-const currentCategoryItems = $derived(currentView !== 'categories' ? contextByCategory[currentView] : []);
-// Filter to only show categories with items
-const availableCategories = $derived(categories.filter((cat) => contextByCategory[cat.id].length > 0));
-// Report view changes
-$effect(() => {
-    if (onViewChange) {
-        if (currentView === 'categories') {
-            onViewChange(availableCategories.length);
-        }
-        else {
-            onViewChange(currentCategoryItems.length + 1);
-        }
-    }
-});
-function handleCategoryClick(categoryId) {
-    currentView = categoryId;
-    itemSelectedIndex = 0;
-}
-function handleBackClick() {
-    currentView = 'categories';
-    itemSelectedIndex = 0;
-}
-function handleKeyDown(e) {
-    if (stringSearch.length > 0) {
-        // Navigation in search view (flat list)
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            e.stopPropagation();
-            if (filteredAvailableContext.length > 0) {
-                itemSelectedIndex = (itemSelectedIndex + 1) % filteredAvailableContext.length;
-            }
-        }
-        else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            e.stopPropagation();
-            if (filteredAvailableContext.length > 0) {
-                itemSelectedIndex =
-                    (itemSelectedIndex - 1 + filteredAvailableContext.length) %
-                        filteredAvailableContext.length;
-            }
-        }
-        else if (e.key === 'Enter' || e.key === 'Tab') {
-            if (e.key === 'Tab')
-                e.preventDefault();
-            e.stopPropagation();
-            const selectedItem = filteredAvailableContext[itemSelectedIndex];
-            if (selectedItem) {
-                onSelect(selectedItem);
-            }
-        }
-    }
-    else if (currentView === 'categories') {
-        // Navigation in categories view
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            e.stopPropagation();
-            categorySelectedIndex = (categorySelectedIndex + 1) % availableCategories.length;
-        }
-        else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            e.stopPropagation();
-            categorySelectedIndex =
-                (categorySelectedIndex - 1 + availableCategories.length) % availableCategories.length;
-        }
-        else if (e.key === 'Enter' || e.key === 'ArrowRight' || e.key === 'Tab') {
-            e.preventDefault();
-            e.stopPropagation();
-            const selectedCategory = availableCategories[categorySelectedIndex];
-            if (selectedCategory) {
-                handleCategoryClick(selectedCategory.id);
-            }
-        }
-        else if (e.key === 'Escape' || e.key === 'ArrowLeft') {
-            e.preventDefault();
-            e.stopPropagation();
-            setShowing?.(false);
-        }
-    }
-    else {
-        // Navigation in category items view
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            e.stopPropagation();
-            if (currentCategoryItems.length > 0) {
-                itemSelectedIndex = (itemSelectedIndex + 1) % currentCategoryItems.length;
-            }
-        }
-        else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            e.stopPropagation();
-            if (currentCategoryItems.length > 0) {
-                itemSelectedIndex =
-                    (itemSelectedIndex - 1 + currentCategoryItems.length) % currentCategoryItems.length;
-            }
-        }
-        else if (e.key === 'Enter' || e.key === 'Tab') {
-            if (e.key === 'Tab')
-                e.preventDefault();
-            e.stopPropagation();
-            const selectedItem = currentCategoryItems[itemSelectedIndex];
-            if (selectedItem) {
-                onSelect(selectedItem);
-                currentView = 'categories'; // Go back to categories after selection
-            }
-        }
-        else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
-            e.preventDefault();
-            e.stopPropagation();
-            handleBackClick();
-        }
-    }
-}
-// Listen for keyboard events
-$effect(() => {
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-    };
-});
-$effect(() => {
-    if (stringSearch.length > 0) {
-        itemSelectedIndex = 0;
-    }
-});
-function getDisplayTitle(element) {
-    if (element.type === 'app_frontend_file') {
-        return element.path;
-    }
-    else if (element.type === 'app_backend_runnable') {
-        return element.key;
-    }
-    else if (element.type === 'app_datatable') {
-        // Show as datatable/table or datatable/schema:table
-        return element.title;
-    }
-    return element.title;
-}
-</script>
-
-<div
-	class="flex flex-col gap-1 text-primary text-xs p-1 pr-0 min-w-24 max-h-48 overflow-y-scroll"
-	onmousedown={(e) =>
-		// avoids triggering onblur on the textinput and closing the tooltip
-		e.preventDefault()}
-	role="listbox"
-	tabindex={0}
->
-	{#if stringSearch.length > 0}
-		<!-- Search view - show flat list -->
-		{#each filteredAvailableContext as element, i (element.type + '-' + element.title)}
-			{@const Icon = ContextIconMap[element.type]}
-			<button
-				class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
-				itemSelectedIndex
-					? 'bg-surface-hover'
-					: ''}"
-				onclick={() => {
-					onSelect(element)
-				}}
-			>
-				{#if Icon}
-					<Icon size={16} />
-				{/if}
-				<span class="truncate">
-					{getDisplayTitle(element)}
-				</span>
-			</button>
-		{/each}
-		{#if filteredAvailableContext.length === 0}
-			<div class="text-center text-primary text-xs py-2">No matching context</div>
-		{/if}
-	{:else if currentView === 'categories'}
-		<!-- Categories view -->
-		{#each availableCategories as category, i (category.id)}
-			{@const Icon = category.icon}
-			<button
-				class="hover:bg-surface-hover rounded-md p-1 pr-0 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
-				categorySelectedIndex
-					? 'bg-surface-hover'
-					: ''}"
-				onclick={() => handleCategoryClick(category.id)}
-			>
-				<Icon size={16} />
-				<span class="flex-1">{category.label}</span>
-				<ChevronRight size={16} />
-			</button>
-		{/each}
-		{#if availableCategories.length === 0}
-			<div class="text-center text-primary text-xs py-2">No available context</div>
-		{/if}
-	{:else}
-		<!-- Category items view -->
-		<button
-			class="hover:bg-surface-hover rounded-md text-left flex flex-row gap-1 items-center font-normal transition-colors mb-1"
-			onclick={handleBackClick}
-		>
-			<ArrowLeft size={12} />
-			<span class="text-xs">Go back</span>
-		</button>
-
-		{#if currentCategoryItems.length === 0}
-			<div class="text-center text-primary text-xs py-2">No items in this category</div>
-		{:else}
-			{#each currentCategoryItems as element, i (element.type + '-' + element.title)}
-				{@const Icon = ContextIconMap[element.type]}
-				<button
-					class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal transition-colors {i ===
-					itemSelectedIndex
-						? 'bg-surface-hover'
-						: ''}"
-					onclick={() => {
-						onSelect(element)
-						currentView = 'categories' // Go back to categories after selection
-					}}
-				>
-					{#if Icon}
-						<Icon size={16} />
-					{/if}
-					<span class="truncate">
-						{getDisplayTitle(element)}
-					</span>
-				</button>
-			{/each}
-		{/if}
-	{/if}
-</div>

package/package/components/copilot/chat/AppAvailableContextList.svelte.d.ts

@@ -1,13 +0,0 @@
-import { type ContextElement } from './context';
-interface Props {
-    availableContext: ContextElement[];
-    selectedContext: ContextElement[];
-    onSelect: (element: ContextElement) => void;
-    setShowing?: (showing: boolean) => void;
-    showAllAvailable?: boolean;
-    stringSearch?: string;
-    onViewChange?: (newNumber: number) => void;
-}
-declare const AppAvailableContextList: import("svelte").Component<Props, {}, "">;
-type AppAvailableContextList = ReturnType<typeof AppAvailableContextList>;
-export default AppAvailableContextList;

package/package/components/debug/DebugConsole.svelte

@@ -1,277 +0,0 @@
-<script lang="ts">import { X, AlertCircle, Trash2 } from 'lucide-svelte';
-let { client, currentFrameId, onClose, workspace, jobId } = $props();
-let inputValue = $state('');
-let history = $state([]);
-let commandHistory = $state([]);
-let historyIndex = $state(-1);
-let isEvaluating = $state(false);
-let nextId = $state(1);
-let consoleRef = $state(null);
-let inputRef = $state(null);
-/**
- * Sign an expression for audit logging before evaluation.
- * Returns the JWT token if signing succeeds, or undefined if signing is not available.
- */
-async function signExpression(expression) {
-    if (!workspace || !jobId) {
-        // If workspace or jobId not provided, skip signing (for backwards compatibility)
-        return undefined;
-    }
-    try {
-        const response = await fetch(`/api/w/${workspace}/debug/sign_expression`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ expression, job_id: jobId })
-        });
-        if (!response.ok) {
-            console.warn('Failed to sign expression:', await response.text());
-            // Don't block evaluation if signing fails - just log it
-            return undefined;
-        }
-        const result = await response.json();
-        return result.token;
-    }
-    catch (error) {
-        console.warn('Failed to sign expression:', error);
-        // Don't block evaluation if signing fails - just log it
-        return undefined;
-    }
-}
-// Focus input - only when explicitly requested (not on every click)
-function focusInput() {
-    // Use requestAnimationFrame to ensure DOM is ready
-    requestAnimationFrame(() => {
-        inputRef?.focus();
-    });
-}
-// Handle click on container - only focus if clicking on empty background areas
-function handleContainerClick(e) {
-    // Don't focus if user has selected text
-    const selection = window.getSelection();
-    if (selection && selection.toString().length > 0) {
-        return;
-    }
-    // Only focus if clicking directly on container divs, not on text content
-    const target = e.target;
-    // Skip if clicking on interactive elements
-    if (target.tagName === 'BUTTON' || target.tagName === 'INPUT' || target.closest('button')) {
-        return;
-    }
-    // Skip if clicking on text content (span elements with output)
-    if (target.tagName === 'SPAN' && target.textContent && target.textContent.trim().length > 0) {
-        return;
-    }
-    focusInput();
-}
-async function evaluate() {
-    const expression = inputValue.trim();
-    if (!expression || !client || isEvaluating)
-        return;
-    // Add to command history
-    if (commandHistory[commandHistory.length - 1] !== expression) {
-        commandHistory = [...commandHistory, expression];
-    }
-    historyIndex = -1;
-    // Add input entry
-    history = [
-        ...history,
-        {
-            id: nextId++,
-            type: 'input',
-            content: expression,
-            timestamp: new Date()
-        }
-    ];
-    inputValue = '';
-    isEvaluating = true;
-    try {
-        // Sign the expression for audit logging (if workspace and jobId are available)
-        const token = await signExpression(expression);
-        // Evaluate with the signed token
-        const result = await client.evaluate(expression, currentFrameId, 'repl', token);
-        history = [
-            ...history,
-            {
-                id: nextId++,
-                type: 'output',
-                content: result.result ?? 'undefined',
-                timestamp: new Date()
-            }
-        ];
-    }
-    catch (error) {
-        history = [
-            ...history,
-            {
-                id: nextId++,
-                type: 'error',
-                content: error instanceof Error ? error.message : String(error),
-                timestamp: new Date()
-            }
-        ];
-    }
-    finally {
-        isEvaluating = false;
-        // Scroll to bottom and refocus
-        setTimeout(() => {
-            if (consoleRef) {
-                consoleRef.scrollTop = consoleRef.scrollHeight;
-            }
-            focusInput();
-        }, 0);
-    }
-}
-function handleKeydown(event) {
-    if (event.key === 'Enter' && !event.shiftKey) {
-        event.preventDefault();
-        evaluate();
-    }
-    else if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        if (commandHistory.length > 0) {
-            if (historyIndex === -1) {
-                historyIndex = commandHistory.length - 1;
-            }
-            else if (historyIndex > 0) {
-                historyIndex--;
-            }
-            inputValue = commandHistory[historyIndex];
-        }
-    }
-    else if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        if (historyIndex !== -1) {
-            if (historyIndex < commandHistory.length - 1) {
-                historyIndex++;
-                inputValue = commandHistory[historyIndex];
-            }
-            else {
-                historyIndex = -1;
-                inputValue = '';
-            }
-        }
-    }
-    else if (event.key === 'l' && event.ctrlKey) {
-        event.preventDefault();
-        clearConsole();
-    }
-    else if (event.key === 'Escape') {
-        event.preventDefault();
-        onClose?.();
-    }
-}
-function clearConsole() {
-    history = [];
-    focusInput();
-}
-// Format value for display (Chrome-like)
-function formatValue(content, type) {
-    if (type === 'error')
-        return content;
-    // Try to detect type for coloring
-    if (content === 'undefined' || content === 'null')
-        return content;
-    if (content === 'true' || content === 'false')
-        return content;
-    if (/^-?\d+(\.\d+)?$/.test(content))
-        return content;
-    if (content.startsWith('"') && content.endsWith('"'))
-        return content;
-    return content;
-}
-function getValueClass(content, type) {
-    if (type === 'error')
-        return 'text-red-500';
-    if (content === 'undefined' || content === 'null')
-        return 'text-gray-500';
-    if (content === 'true' || content === 'false')
-        return 'text-blue-600 dark:text-blue-400';
-    if (/^-?\d+(\.\d+)?$/.test(content))
-        return 'text-blue-600 dark:text-blue-400';
-    if (content.startsWith('"') && content.endsWith('"'))
-        return 'text-red-600 dark:text-red-400';
-    if (content.startsWith('{') || content.startsWith('['))
-        return 'text-primary';
-    return 'text-primary';
-}
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="flex flex-col h-full bg-[#242424] text-[#d4d4d4] font-mono text-xs select-text"
-	onclick={handleContainerClick}
->
-	<!-- Header -->
-	<div class="flex items-center justify-between px-2 py-1 bg-[#1e1e1e] border-b border-[#3c3c3c]">
-		<span class="text-[11px] text-[#969696]">Console</span>
-		<div class="flex items-center gap-1">
-			<button
-				class="p-0.5 hover:bg-[#3c3c3c] rounded text-[#969696] hover:text-[#d4d4d4]"
-				onclick={(e) => { e.stopPropagation(); clearConsole(); }}
-				title="Clear console (Ctrl+L)"
-			>
-				<Trash2 size={12} />
-			</button>
-			{#if onClose}
-				<button
-					class="p-0.5 hover:bg-[#3c3c3c] rounded text-[#969696] hover:text-[#d4d4d4]"
-					onclick={(e) => { e.stopPropagation(); onClose?.(); }}
-					title="Close console (Esc)"
-				>
-					<X size={14} />
-				</button>
-			{/if}
-		</div>
-	</div>
-
-	<!-- Console output -->
-	<div
-		bind:this={consoleRef}
-		class="flex-1 overflow-auto min-h-0"
-	>
-		{#if history.length === 0}
-			<div class="px-3 py-2 text-[#969696] text-[11px]">
-				Evaluate expressions in the current scope. Use ↑↓ for history.
-			</div>
-		{/if}
-		{#each history as entry (entry.id)}
-			<div
-				class="flex items-start px-2 py-0.5 border-b border-[#3c3c3c]/50 hover:bg-[#2a2a2a]"
-				class:bg-[#332222]={entry.type === 'error'}
-			>
-				{#if entry.type === 'input'}
-					<span class="text-[#569cd6] mr-2 select-none">&gt;</span>
-					<span class="text-[#ce9178] break-all whitespace-pre-wrap">{entry.content}</span>
-				{:else if entry.type === 'output'}
-					<span class="text-[#569cd6] mr-2 select-none opacity-0">&gt;</span>
-					<span class="{getValueClass(entry.content, 'output')} break-all whitespace-pre-wrap">{formatValue(entry.content, 'output')}</span>
-				{:else}
-					<AlertCircle size={12} class="text-red-500 mr-2 mt-0.5 flex-shrink-0" />
-					<span class="text-red-400 break-all whitespace-pre-wrap">{entry.content}</span>
-				{/if}
-			</div>
-		{/each}
-	</div>
-
-	<!-- Input line -->
-	<div class="flex items-center px-2 py-1 border-t border-[#3c3c3c] bg-[#1e1e1e]">
-		<span class="text-[#569cd6] mr-2 select-none">&gt;</span>
-		<input
-			bind:this={inputRef}
-			type="text"
-			bind:value={inputValue}
-			onkeydown={handleKeydown}
-			placeholder={client ? '' : 'Waiting for debugger...'}
-			disabled={!client}
-			class="flex-1 bg-transparent text-[#d4d4d4] placeholder-[#6e6e6e] focus:outline-none disabled:opacity-50"
-			autocomplete="off"
-			autocorrect="off"
-			autocapitalize="off"
-			spellcheck="false"
-		/>
-		{#if isEvaluating}
-			<div class="w-3 h-3 border border-[#569cd6] border-t-transparent rounded-full animate-spin ml-2"></div>
-		{/if}
-	</div>
-</div>

package/package/components/debug/DebugConsole.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { DAPClient } from './dapClient';
-interface Props {
-    client: DAPClient | null;
-    currentFrameId?: number;
-    onClose?: () => void;
-    /** Workspace ID for signing expressions (audit logging) */
-    workspace?: string;
-    /** Job ID of the parent debug session (for expression signing) */
-    jobId?: string;
-}
-declare const DebugConsole: import("svelte").Component<Props, {}, "">;
-type DebugConsole = ReturnType<typeof DebugConsole>;
-export default DebugConsole;

package/package/components/debug/DebugPanel.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">import { Search, Layers, Variable } from 'lucide-svelte';
-import DebugVariableViewer from './DebugVariableViewer.svelte';
-let { stackFrames, scopes, variables, client, selectedFrameId = $bindable(null) } = $props();
-let searchQuery = $state('');
-// Auto-expand scopes when they become available
-$effect(() => {
-    console.log('[DebugPanel] effect running, scopes:', scopes, 'variables:', variables);
-    for (const scope of scopes) {
-        console.log('[DebugPanel] checking scope:', scope.name, 'ref:', scope.variablesReference, 'has:', variables.has(scope.variablesReference));
-        if (!variables.has(scope.variablesReference) && client) {
-            console.log('[DebugPanel] fetching variables for scope:', scope.name);
-            client.getVariables(scope.variablesReference);
-        }
-    }
-});
-async function selectFrame(frame) {
-    selectedFrameId = frame.id;
-    if (client) {
-        await client.getScopes(frame.id);
-    }
-}
-// Get all variables from all scopes, filtered by search query
-const filteredVariables = $derived.by(() => {
-    const allVars = [];
-    for (const scope of scopes) {
-        const scopeVars = variables.get(scope.variablesReference) || [];
-        for (const v of scopeVars) {
-            if (!searchQuery || v.name.toLowerCase().includes(searchQuery.toLowerCase())) {
-                allVars.push({ scope: scope.name, variable: v });
-            }
-        }
-    }
-    return allVars;
-});
-</script>
-
-<div class="flex h-full bg-surface border-t border-surface-secondary">
-	<!-- Variables Panel -->
-	<div class="flex-1 flex flex-col border-r border-surface-secondary min-w-0">
-		<div
-			class="flex items-center gap-1 px-2 py-1 border-b border-surface-secondary bg-surface-secondary"
-		>
-			<Variable size={12} class="text-secondary" />
-			<span class="text-xs font-medium text-secondary">Variables</span>
-		</div>
-		<div class="px-1.5 py-1 border-b border-surface-secondary">
-			<div
-				class="flex items-center gap-1.5 px-1.5 py-0.5 bg-surface border border-surface-secondary rounded focus-within:border-blue-500"
-			>
-				<Search size={12} class="text-tertiary flex-shrink-0" />
-				<input
-					type="text"
-					placeholder="Filter..."
-					bind:value={searchQuery}
-					class="flex-1 text-xs bg-transparent focus:outline-none min-w-0"
-				/>
-			</div>
-		</div>
-		<div class="flex-1 overflow-auto p-1">
-			{#if scopes.length === 0}
-				<div class="text-xs text-tertiary italic px-1">No variables</div>
-			{:else if filteredVariables.length === 0}
-				<div class="text-xs text-tertiary italic px-1">No matches</div>
-			{:else}
-				{#each filteredVariables as { scope, variable } (scope + variable.name)}
-					<DebugVariableViewer {variable} {client} />
-				{/each}
-			{/if}
-		</div>
-	</div>
-
-	<!-- Call Stack Panel -->
-	<div class="w-40 flex flex-col min-w-0">
-		<div
-			class="flex items-center gap-1 px-2 py-1 border-b border-surface-secondary bg-surface-secondary"
-		>
-			<Layers size={12} class="text-secondary" />
-			<span class="text-xs font-medium text-secondary">Call Stack</span>
-		</div>
-		<div class="flex-1 overflow-auto p-1">
-			{#if stackFrames.length === 0}
-				<div class="text-xs text-tertiary italic px-1">No call stack</div>
-			{:else}
-				{#each stackFrames as frame (frame.id)}
-					<button
-						class="w-full text-left px-1 py-0.5 text-xs hover:bg-surface-hover rounded flex items-center gap-1 font-mono"
-						class:bg-surface-selected={selectedFrameId === frame.id}
-						onclick={() => selectFrame(frame)}
-					>
-						<span class="text-primary font-medium truncate">{frame.name}</span>
-						<span class="text-tertiary text-[10px] whitespace-nowrap">:{frame.line}</span>
-					</button>
-				{/each}
-			{/if}
-		</div>
-	</div>
-</div>

package/package/components/debug/DebugPanel.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { StackFrame, Scope, Variable as VariableType, DAPClient } from './dapClient';
-interface Props {
-    stackFrames: StackFrame[];
-    scopes: Scope[];
-    variables: Map<number, VariableType[]>;
-    client: DAPClient | null;
-    selectedFrameId?: number | null;
-}
-declare const DebugPanel: import("svelte").Component<Props, {}, "selectedFrameId">;
-type DebugPanel = ReturnType<typeof DebugPanel>;
-export default DebugPanel;