windmill-components 1.613.5 → 1.623.1

package/package/components/debug/DebugToolbar.svelte

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

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

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

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

package/package/components/debug/MonacoDebugger.svelte

@@ -1,384 +0,0 @@
-<script lang="ts">import { onMount, onDestroy } from 'svelte';
-import { SvelteSet } from 'svelte/reactivity';
-import { debugState, getDAPClient, resetDAPClient } from './dapClient';
-import DebugToolbar from './DebugToolbar.svelte';
-import DebugPanel from './DebugPanel.svelte';
-import { getDebugServerUrl, getDebugFileExtension } from './index';
-import { VariableService } from '../../gen';
-let { editor, code, language = 'bun', filePath, dapServerUrl, workspace } = $props();
-// Derive the server URL from language if not explicitly provided
-const effectiveServerUrl = $derived(dapServerUrl ?? getDebugServerUrl(language));
-// Derive file path from language if not explicitly provided
-const effectiveFilePath = $derived(filePath ?? `/tmp/script${getDebugFileExtension(language)}`);
-let client = $state(null);
-let breakpointDecorations = $state([]);
-let currentLineDecoration = $state([]);
-let disposables = [];
-// Breakpoint glyph margin decoration
-const breakpointDecorationType = {
-    glyphMarginClassName: 'debug-breakpoint-glyph',
-    glyphMarginHoverMessage: { value: 'Breakpoint' },
-    stickiness: 1 // NeverGrowsWhenTypingAtEdges
-};
-// Current line decoration (yellow background when stopped)
-const currentLineDecorationType = {
-    isWholeLine: true,
-    className: 'debug-current-line',
-    glyphMarginClassName: 'debug-current-line-glyph'
-};
-// Track breakpoints by line number
-let breakpoints = new SvelteSet();
-// Track the last used server URL to detect changes
-let lastServerUrl = undefined;
-// React to language/server URL changes - fully exit debug mode and reset client
-$effect(() => {
-    const newUrl = effectiveServerUrl;
-    if (lastServerUrl !== undefined && lastServerUrl !== newUrl) {
-        // Server URL changed (language switched), fully exit debug mode
-        console.log('[DAP] Language changed, switching from', lastServerUrl, 'to', newUrl);
-        // Terminate and disconnect if we have an active session
-        if (client) {
-            if (client.isConnected()) {
-                // Try to terminate gracefully, then disconnect
-                client
-                    .terminate()
-                    .catch(() => { })
-                    .finally(() => {
-                    client?.disconnect();
-                });
-            }
-        }
-        // Reset the singleton and clear local client reference
-        resetDAPClient();
-        client = null;
-        // Clear current line decoration since we're exiting debug mode
-        if (editor) {
-            currentLineDecoration = editor.deltaDecorations(currentLineDecoration, []);
-        }
-    }
-    lastServerUrl = newUrl;
-});
-// Export function to refresh breakpoint positions - called by parent when code changes
-export function refreshBreakpoints() {
-    updateBreakpointPositionsFromDecorations();
-}
-onMount(() => {
-    if (!editor)
-        return;
-    client = getDAPClient(effectiveServerUrl);
-    lastServerUrl = effectiveServerUrl;
-    // Add click handler for glyph margin (breakpoint toggle)
-    const mouseDownDisposable = editor.onMouseDown((e) => {
-        if (e.target.type === 2) {
-            // MouseTargetType.GUTTER_GLYPH_MARGIN
-            const line = e.target.position?.lineNumber;
-            if (line) {
-                toggleBreakpoint(line);
-            }
-        }
-    });
-    disposables.push(mouseDownDisposable);
-    // Add keyboard shortcut F9 for toggling breakpoint
-    editor.addCommand(120, // KeyCode.F9
-    () => {
-        const position = editor?.getPosition();
-        if (position) {
-            toggleBreakpoint(position.lineNumber);
-        }
-    });
-    // Update decorations when state changes
-    const unsubscribe = debugState.subscribe((state) => {
-        updateCurrentLineDecoration(state.currentLine);
-    });
-    return () => {
-        unsubscribe();
-    };
-});
-onDestroy(() => {
-    disposables.forEach((d) => d.dispose());
-    disposables = [];
-});
-function toggleBreakpoint(line) {
-    if (breakpoints.has(line)) {
-        breakpoints.delete(line);
-    }
-    else {
-        breakpoints.add(line);
-    }
-    // SvelteSet is reactive, no need to reassign
-    updateBreakpointDecorations();
-    syncBreakpointsWithServer();
-}
-function updateBreakpointDecorations() {
-    if (!editor)
-        return;
-    const model = editor.getModel();
-    if (!model)
-        return;
-    const decorations = Array.from(breakpoints).map((line) => ({
-        range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
-        options: breakpointDecorationType
-    }));
-    breakpointDecorations = editor.deltaDecorations(breakpointDecorations, decorations);
-}
-// Update breakpoint line numbers from decoration positions after code edits
-function updateBreakpointPositionsFromDecorations() {
-    console.log('[DAP] updateBreakpointPositionsFromDecorations called, decorations:', breakpointDecorations.length);
-    if (!editor || breakpointDecorations.length === 0)
-        return;
-    const model = editor.getModel();
-    if (!model)
-        return;
-    // Get current line numbers from decorations (using plain Set as this is not reactive state)
-    const newLines = new Set();
-    for (const decorationId of breakpointDecorations) {
-        const range = model.getDecorationRange(decorationId);
-        if (range) {
-            newLines.add(range.startLineNumber);
-        }
-    }
-    // Check if positions changed
-    const oldLines = Array.from(breakpoints).sort((a, b) => a - b);
-    const updatedLines = Array.from(newLines).sort((a, b) => a - b);
-    console.log('[DAP] Old breakpoint lines:', oldLines, 'New lines from decorations:', updatedLines);
-    const positionsChanged = oldLines.length !== updatedLines.length ||
-        oldLines.some((line, i) => line !== updatedLines[i]);
-    if (positionsChanged) {
-        console.log('[DAP] Breakpoint positions changed, syncing with server');
-        // Update breakpoints set with new positions
-        breakpoints.clear();
-        for (const line of newLines) {
-            breakpoints.add(line);
-        }
-        // Sync updated positions with server
-        syncBreakpointsWithServer();
-    }
-}
-function updateCurrentLineDecoration(line) {
-    if (!editor)
-        return;
-    if (!line) {
-        currentLineDecoration = editor.deltaDecorations(currentLineDecoration, []);
-        return;
-    }
-    const decorations = [
-        {
-            range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
-            options: currentLineDecorationType
-        }
-    ];
-    currentLineDecoration = editor.deltaDecorations(currentLineDecoration, decorations);
-    // Scroll to the current line
-    editor.revealLineInCenter(line);
-}
-async function syncBreakpointsWithServer() {
-    console.log('[DAP] syncBreakpointsWithServer called, connected:', client?.isConnected(), 'breakpoints:', Array.from(breakpoints));
-    if (!client || !client.isConnected()) {
-        console.log('[DAP] Not syncing - client not connected');
-        return;
-    }
-    try {
-        console.log('[DAP] Sending setBreakpoints to server:', effectiveFilePath, Array.from(breakpoints));
-        await client.setBreakpoints(effectiveFilePath, Array.from(breakpoints));
-        console.log('[DAP] setBreakpoints completed');
-    }
-    catch (error) {
-        console.error('Failed to sync breakpoints:', error);
-    }
-}
-/**
- * Fetch contextual variables from the backend to pass to the debugger
- */
-async function fetchContextualVariables() {
-    console.log('[DAP] fetchContextualVariables called, workspace:', workspace);
-    if (!workspace) {
-        console.log('[DAP] No workspace provided, skipping contextual variables');
-        return {};
-    }
-    try {
-        console.log('[DAP] Fetching contextual variables for workspace:', workspace);
-        const variables = await VariableService.listContextualVariables({ workspace });
-        console.log('[DAP] Got contextual variables:', variables);
-        const envVars = {};
-        for (const v of variables) {
-            envVars[v.name] = v.value;
-        }
-        console.log('[DAP] Parsed env vars:', Object.keys(envVars));
-        return envVars;
-    }
-    catch (error) {
-        console.error('Failed to fetch contextual variables:', error);
-        return {};
-    }
-}
-async function signDebugRequest(codeToSign, lang) {
-    if (!workspace) {
-        throw new Error('No workspace selected');
-    }
-    const response = await fetch(`/api/w/${workspace}/debug/sign`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ code: codeToSign, language: lang })
-    });
-    if (!response.ok) {
-        const errorText = await response.text();
-        // Parse specific error cases for better user messages
-        if (errorText.includes('not initialized')) {
-            throw new Error('Debug signing is not configured on the server. Please contact your administrator.');
-        }
-        throw new Error(errorText || 'Failed to authorize debug session');
-    }
-    return await response.json();
-}
-function getDebugErrorMessage(error) {
-    const message = error instanceof Error ? error.message : String(error);
-    // Handle token verification errors from debugger
-    if (message.includes('Token verification failed') || message.includes('Debug token required')) {
-        if (message.includes('expired')) {
-            return 'Debug session expired. Please try again.';
-        }
-        if (message.includes('Invalid JWT signature')) {
-            return 'Debug authorization failed. The signing key may be misconfigured.';
-        }
-        if (message.includes('Code hash mismatch')) {
-            return 'Code was modified after signing. Please try again.';
-        }
-        if (message.includes('Public key not available')) {
-            return 'Debug server cannot verify tokens. Please check WINDMILL_BASE_URL configuration.';
-        }
-        if (message.includes('Debug token required')) {
-            return 'Debug authorization required. The debug session must be signed by the backend.';
-        }
-        return 'Debug authorization failed. Please try again.';
-    }
-    // Handle connection errors
-    if (message.includes('WebSocket') || message.includes('connection failed')) {
-        return 'Could not connect to debug server. Make sure the DAP server is running.';
-    }
-    // Handle signing errors
-    if (message.includes('not configured on the server')) {
-        return message;
-    }
-    return message || 'An unexpected error occurred while starting the debugger.';
-}
-async function startDebugging() {
-    // Always reset and create a fresh client with the current server URL
-    // This ensures we connect to the correct endpoint for the current language
-    resetDAPClient();
-    client = getDAPClient(effectiveServerUrl);
-    try {
-        // Fetch contextual variables (WM_WORKSPACE, WM_TOKEN, etc.) from backend
-        const env = await fetchContextualVariables();
-        console.log('[DAP] Starting debug with env vars:', Object.keys(env), env);
-        // Sign the debug request (creates audit log entry)
-        let signedPayload;
-        try {
-            signedPayload = await signDebugRequest(code ?? '', language);
-            console.log('[DAP] Got signed payload from backend');
-        }
-        catch (signError) {
-            console.error('[DAP] Signing failed:', getDebugErrorMessage(signError));
-            return;
-        }
-        await client.connect();
-        await client.initialize();
-        await client.setBreakpoints(effectiveFilePath, Array.from(breakpoints));
-        await client.configurationDone();
-        await client.launch({
-            code,
-            cwd: '/tmp',
-            env,
-            // JWT token for verification by the debugger
-            token: signedPayload.token
-        });
-        console.log('[DAP] Launch completed with env');
-    }
-    catch (error) {
-        console.error('[DAP] Failed to start debugging:', getDebugErrorMessage(error));
-    }
-}
-async function stopDebugging() {
-    if (!client)
-        return;
-    try {
-        await client.terminate();
-        client.disconnect();
-    }
-    catch (error) {
-        console.error('Failed to stop debugging:', error);
-    }
-}
-async function continueExecution() {
-    if (!client)
-        return;
-    await client.continue_();
-}
-async function stepOver() {
-    if (!client)
-        return;
-    await client.stepOver();
-}
-async function stepIn() {
-    if (!client)
-        return;
-    await client.stepIn();
-}
-async function stepOut() {
-    if (!client)
-        return;
-    await client.stepOut();
-}
-function clearAllBreakpoints() {
-    breakpoints.clear();
-    updateBreakpointDecorations();
-    syncBreakpointsWithServer();
-}
-</script>
-
-<div class="flex flex-col h-full">
-	<DebugToolbar
-		connected={$debugState.connected}
-		running={$debugState.running}
-		stopped={$debugState.stopped}
-		breakpointCount={breakpoints.size}
-		onStart={startDebugging}
-		onStop={stopDebugging}
-		onContinue={continueExecution}
-		onStepOver={stepOver}
-		onStepIn={stepIn}
-		onStepOut={stepOut}
-		onClearBreakpoints={clearAllBreakpoints}
-	/>
-
-	{#if $debugState.connected}
-		<DebugPanel
-			stackFrames={$debugState.stackFrames}
-			scopes={$debugState.scopes}
-			variables={$debugState.variables}
-			{client}
-		/>
-	{/if}
-</div>
-
-<style>
-	:global(.debug-breakpoint-glyph) {
-		background-color: #e51400;
-		border-radius: 50%;
-		width: 10px !important;
-		height: 10px !important;
-		margin-left: 5px;
-		margin-top: 4px;
-	}
-
-	:global(.debug-current-line) {
-		background-color: rgba(255, 238, 0, 0.2);
-	}
-
-	:global(.debug-current-line-glyph) {
-		background-color: #ffcc00;
-		clip-path: polygon(0 0, 100% 50%, 0 100%);
-		width: 10px !important;
-		height: 14px !important;
-		margin-left: 5px;
-		margin-top: 2px;
-	}</style>

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

@@ -1,15 +0,0 @@
-import type { editor as meditor } from 'monaco-editor';
-import { type DebugLanguage } from './index';
-interface Props {
-    editor: meditor.IStandaloneCodeEditor | null;
-    code: string;
-    language?: DebugLanguage;
-    filePath?: string;
-    dapServerUrl?: string;
-    workspace?: string;
-}
-declare const MonacoDebugger: import("svelte").Component<Props, {
-    refreshBreakpoints: () => void;
-}, "">;
-type MonacoDebugger = ReturnType<typeof MonacoDebugger>;
-export default MonacoDebugger;