windmill-components 1.623.1 → 1.642.0

package/package/components/debug/DebugConsole.svelte

@@ -0,0 +1,277 @@
+<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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,97 @@
+<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

@@ -0,0 +1,11 @@
+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;

package/package/components/debug/DebugToolbar.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">import { Bug, Play, Square, SkipForward, ArrowDownToLine, ArrowUpFromLine, Trash2, AlertTriangle, X } from 'lucide-svelte';
+import { Button } from '../common';
+let { connected, running, stopped, breakpointCount, onStart, onStop, onContinue, onStepOver, onStepIn, onStepOut, onClearBreakpoints, onExitDebug } = $props();
+let loading = $state(false);
+async function handleStart() {
+    loading = true;
+    try {
+        await onStart();
+    }
+    finally {
+        loading = false;
+    }
+}
+async function handleStop() {
+    loading = true;
+    try {
+        await onStop();
+    }
+    finally {
+        loading = false;
+    }
+}
+</script>
+
+<div class="flex items-center gap-1 p-1 border-b border-surface-secondary bg-surface-secondary">
+	<div class="flex items-center gap-1 mr-2">
+		<Bug size={16} class="text-orange-500" />
+		<span class="text-xs font-medium text-secondary">Debug</span>
+		{#if connected}
+			<span class="w-2 h-2 rounded-full bg-green-500" title="Connected"></span>
+		{:else}
+			<span class="w-2 h-2 rounded-full bg-gray-400" title="Disconnected"></span>
+		{/if}
+	</div>
+
+	<div class="h-4 w-px bg-surface-tertiary mx-1"></div>
+
+	{#if !connected || (!running && !stopped)}
+		<Button
+			size="xs"
+			color="green"
+			variant="contained"
+			startIcon={{ icon: Play }}
+			onclick={handleStart}
+			disabled={loading}
+		>
+			Debug
+		</Button>
+	{:else}
+		<Button
+			size="xs"
+			color="red"
+			variant="contained"
+			startIcon={{ icon: Square }}
+			onclick={handleStop}
+			disabled={loading}
+		>
+			Stop
+		</Button>
+	{/if}
+
+	<div class="h-4 w-px bg-surface-tertiary mx-1"></div>
+
+	<!-- Step controls - only enabled when stopped -->
+	<div class="flex items-center gap-1">
+		<Button
+			size="xs"
+			color="light"
+			startIcon={{ icon: Play }}
+			onclick={onContinue}
+			disabled={!stopped}
+			title="Continue (F8) - Resume execution until the next breakpoint"
+			iconOnly
+		/>
+		<Button
+			size="xs"
+			color="light"
+			startIcon={{ icon: SkipForward }}
+			onclick={onStepOver}
+			disabled={!stopped}
+			title="Step Over (F6) - Execute the current line, skipping over function details"
+			iconOnly
+		/>
+		<Button
+			size="xs"
+			color="light"
+			startIcon={{ icon: ArrowDownToLine }}
+			onclick={onStepIn}
+			disabled={!stopped}
+			title="Step Into (F7) - Enter the function call and debug inside it"
+			iconOnly
+		/>
+		<Button
+			size="xs"
+			color="light"
+			startIcon={{ icon: ArrowUpFromLine }}
+			onclick={onStepOut}
+			disabled={!stopped}
+			title="Step Out (Shift+F8) - Run until the current function returns"
+			iconOnly
+		/>
+	</div>
+
+	<div class="h-4 w-px bg-surface-tertiary mx-1"></div>
+
+	<Button
+		size="xs"
+		color="light"
+		startIcon={{ icon: Trash2 }}
+		onclick={onClearBreakpoints}
+		title="Clear All Breakpoints"
+		iconOnly
+	/>
+
+	{#if onExitDebug}
+		<div class="h-4 w-px bg-surface-tertiary mx-1"></div>
+
+		<Button
+			size="xs"
+			color="red"
+			variant="border"
+			startIcon={{ icon: X }}
+			onclick={onExitDebug}
+			title="Exit Debug Mode"
+		>
+			Exit Debug
+		</Button>
+	{/if}
+
+	{#if running && !stopped}
+		<span class="ml-2 text-xs text-tertiary flex items-center gap-1">
+			<span class="animate-pulse">Running...</span>
+		</span>
+	{:else if stopped}
+		<span class="ml-2 text-xs text-orange-500 flex items-center gap-1"> Paused </span>
+	{/if}
+</div>
+
+{#if breakpointCount === 0 && !running && !stopped}
+	<div
+		class="flex items-center gap-1 px-2 py-1 bg-yellow-50 dark:bg-yellow-900/20 border-b border-yellow-200 dark:border-yellow-800"
+	>
+		<AlertTriangle size={14} class="text-yellow-600 dark:text-yellow-500" />
+		<span class="text-xs text-yellow-700 dark:text-yellow-400">
+			No breakpoints set - click in the gutter to add one
+		</span>
+	</div>
+{/if}

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

@@ -0,0 +1,17 @@
+interface Props {
+    connected: boolean;
+    running: boolean;
+    stopped: boolean;
+    breakpointCount: number;
+    onStart: () => Promise<void>;
+    onStop: () => Promise<void>;
+    onContinue: () => Promise<void>;
+    onStepOver: () => Promise<void>;
+    onStepIn: () => Promise<void>;
+    onStepOut: () => Promise<void>;
+    onClearBreakpoints: () => void;
+    onExitDebug?: () => void;
+}
+declare const DebugToolbar: import("svelte").Component<Props, {}, "">;
+type DebugToolbar = ReturnType<typeof DebugToolbar>;
+export default DebugToolbar;

package/package/components/debug/DebugVariableViewer.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">import { ChevronRight, ChevronDown } from 'lucide-svelte';
+import DebugVariableViewer from './DebugVariableViewer.svelte';
+let { variable, client, level = 0, prefix = '' } = $props();
+let expanded = $state(false);
+let children = $state([]);
+let loading = $state(false);
+let loaded = $state(false);
+const hasChildren = $derived(variable.variablesReference > 0);
+const isExpandable = $derived(hasChildren);
+async function toggleExpand() {
+    if (!isExpandable)
+        return;
+    if (!expanded && !loaded && client) {
+        loading = true;
+        try {
+            children = await client.getVariables(variable.variablesReference);
+            loaded = true;
+        }
+        catch (error) {
+            console.error('Failed to fetch nested variables:', error);
+        }
+        finally {
+            loading = false;
+        }
+    }
+    expanded = !expanded;
+}
+function getTypeColor(type) {
+    switch (type) {
+        case 'string':
+            return 'text-green-600 dark:text-green-400/80';
+        case 'number':
+            return 'text-orange-600 dark:text-orange-400/90';
+        case 'boolean':
+            return 'text-blue-600 dark:text-blue-400/90';
+        case 'undefined':
+        case 'null':
+            return 'text-tertiary';
+        case 'function':
+            return 'text-purple-600 dark:text-purple-400/90';
+        default:
+            return 'text-primary';
+    }
+}
+function formatValue(value, type) {
+    // For objects/arrays with children, just show type indicator
+    if (hasChildren) {
+        if (type === 'object' || value.startsWith('{')) {
+            return '{...}';
+        }
+        if (value.startsWith('[')) {
+            return '[...]';
+        }
+    }
+    return value;
+}
+</script>
+
+<div class="font-mono text-xs" style="padding-left: {level * 12}px">
+	<div class="flex items-start gap-0.5 py-0.5 hover:bg-surface-hover rounded group">
+		{#if isExpandable}
+			<button
+				class="flex-shrink-0 p-0.5 hover:bg-surface-secondary rounded"
+				onclick={toggleExpand}
+			>
+				{#if loading}
+					<span class="inline-block w-3 h-3 border border-tertiary border-t-transparent rounded-full animate-spin"></span>
+				{:else if expanded}
+					<ChevronDown size={12} class="text-tertiary" />
+				{:else}
+					<ChevronRight size={12} class="text-tertiary" />
+				{/if}
+			</button>
+		{:else}
+			<span class="w-4 flex-shrink-0"></span>
+		{/if}
+
+		<div class="flex-1 flex flex-wrap items-baseline gap-1 min-w-0">
+			<span class="text-blue-500 font-medium">{variable.name}</span>
+			<span class="text-tertiary">=</span>
+			<span class={getTypeColor(variable.type)} title={variable.value}>
+				{#if hasChildren && expanded}
+					{variable.type === 'object' || variable.value.startsWith('{') ? '{' : '['}
+				{:else}
+					{formatValue(variable.value, variable.type)}
+				{/if}
+			</span>
+			{#if variable.type && !hasChildren}
+				<span class="text-tertiary text-[10px]">({variable.type})</span>
+			{/if}
+		</div>
+	</div>
+
+	{#if expanded && hasChildren}
+		<div class="border-l border-dotted border-surface-secondary ml-2">
+			{#if children.length === 0 && loaded}
+				<div class="text-tertiary italic py-0.5" style="padding-left: {12}px">
+					No properties
+				</div>
+			{:else}
+				{#each children as child (child.name)}
+					<DebugVariableViewer
+						variable={child}
+						{client}
+						level={level + 1}
+						prefix={prefix ? `${prefix}.${variable.name}` : variable.name}
+					/>
+				{/each}
+			{/if}
+		</div>
+		<div class="text-primary" style="padding-left: {(level + 1) * 12}px">
+			{variable.type === 'object' || variable.value.startsWith('{') ? '}' : ']'}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Variable, DAPClient } from './dapClient';
+import DebugVariableViewer from './DebugVariableViewer.svelte';
+interface Props {
+    variable: Variable;
+    client: DAPClient | null;
+    level?: number;
+    prefix?: string;
+}
+declare const DebugVariableViewer: import("svelte").Component<Props, {}, "">;
+type DebugVariableViewer = ReturnType<typeof DebugVariableViewer>;
+export default DebugVariableViewer;