windmill-components 1.623.1 → 1.642.0

package/package/components/debug/MonacoDebugger.svelte

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

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

package/package/components/debug/dapClient.d.ts

@@ -0,0 +1,192 @@
+/**
+ * DAP (Debug Adapter Protocol) WebSocket Client for Monaco integration.
+ *
+ * This client implements the DAP protocol over WebSocket to communicate
+ * with a Python debugpy-based debug server.
+ */
+export interface DAPMessage {
+    seq: number;
+    type: 'request' | 'response' | 'event';
+    command?: string;
+    event?: string;
+    request_seq?: number;
+    success?: boolean;
+    message?: string;
+    body?: Record<string, unknown>;
+    arguments?: Record<string, unknown>;
+}
+export interface Breakpoint {
+    id: number;
+    verified: boolean;
+    line: number;
+    source?: {
+        path: string;
+        name?: string;
+    };
+}
+export interface StackFrame {
+    id: number;
+    name: string;
+    source?: {
+        path: string;
+        name?: string;
+    };
+    line: number;
+    column: number;
+}
+export interface Variable {
+    name: string;
+    value: string;
+    type?: string;
+    variablesReference: number;
+}
+export interface Scope {
+    name: string;
+    variablesReference: number;
+    expensive: boolean;
+}
+export interface DebugState {
+    connected: boolean;
+    initialized: boolean;
+    running: boolean;
+    stopped: boolean;
+    stoppedReason?: string;
+    currentLine?: number;
+    currentFile?: string;
+    stackFrames: StackFrame[];
+    scopes: Scope[];
+    variables: Map<number, Variable[]>;
+    breakpoints: Map<string, Breakpoint[]>;
+    output: string[];
+    logs: string;
+    result?: unknown;
+    error?: string;
+}
+export declare const debugState: import("svelte/store").Writable<DebugState>;
+export declare class DAPClient {
+    private ws;
+    private seq;
+    private pendingRequests;
+    private url;
+    constructor(url?: string);
+    /**
+     * Connect to the DAP server.
+     */
+    connect(): Promise<void>;
+    /**
+     * Disconnect from the DAP server.
+     */
+    disconnect(): void;
+    /**
+     * Send a request to the DAP server and wait for a response.
+     */
+    private sendRequest;
+    /**
+     * Handle incoming messages from the DAP server.
+     */
+    private handleMessage;
+    /**
+     * Handle DAP events.
+     */
+    private handleEvent;
+    /**
+     * Initialize the debug session.
+     */
+    initialize(): Promise<DAPMessage>;
+    /**
+     * Set breakpoints in a source file.
+     */
+    setBreakpoints(path: string, lines: number[]): Promise<Breakpoint[]>;
+    /**
+     * Notify the server that configuration is done.
+     */
+    configurationDone(): Promise<void>;
+    /**
+     * Launch a script for debugging.
+     */
+    launch(options: {
+        program?: string;
+        code?: string;
+        args?: string[] | Record<string, unknown>;
+        cwd?: string;
+        callMain?: boolean;
+        env?: Record<string, string>;
+        token?: string;
+    }): Promise<void>;
+    /**
+     * Continue execution.
+     */
+    continue_(): Promise<void>;
+    /**
+     * Step over (next).
+     */
+    stepOver(): Promise<void>;
+    /**
+     * Step into.
+     */
+    stepIn(): Promise<void>;
+    /**
+     * Step out.
+     */
+    stepOut(): Promise<void>;
+    /**
+     * Pause execution.
+     */
+    pause(): Promise<void>;
+    /**
+     * Terminate the debug session.
+     */
+    terminate(): Promise<void>;
+    /**
+     * Get threads.
+     */
+    getThreads(): Promise<{
+        id: number;
+        name: string;
+    }[]>;
+    /**
+     * Get stack trace.
+     */
+    getStackTrace(threadId?: number): Promise<StackFrame[]>;
+    /**
+     * Get scopes for a stack frame.
+     */
+    getScopes(frameId: number): Promise<Scope[]>;
+    /**
+     * Get variables for a scope.
+     */
+    getVariables(variablesReference: number): Promise<Variable[]>;
+    /**
+     * Evaluate an expression.
+     * @param expression The expression to evaluate
+     * @param frameId Optional frame ID to evaluate in
+     * @param context The evaluation context
+     * @param token Optional JWT token for signed expression (audit logging)
+     */
+    evaluate(expression: string, frameId?: number, context?: 'watch' | 'repl' | 'hover', token?: string): Promise<{
+        result: string;
+        variablesReference: number;
+    }>;
+    /**
+     * Fetch stack trace (called automatically when stopped).
+     */
+    private fetchStackTrace;
+    /**
+     * Clear output.
+     */
+    clearOutput(): void;
+    /**
+     * Check if connected.
+     */
+    isConnected(): boolean;
+    /**
+     * Check if running.
+     */
+    isRunning(): boolean;
+    /**
+     * Check if stopped at a breakpoint.
+     */
+    isStopped(): boolean;
+}
+export declare function getDAPClient(url?: string): DAPClient;
+export declare function resetDAPClient(): void;