windmill-components 1.623.1 → 1.642.0

package/package/components/debug/dapClient.js

@@ -0,0 +1,426 @@
+/**
+ * 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.
+ */
+import { writable, get } from 'svelte/store';
+const initialState = {
+    connected: false,
+    initialized: false,
+    running: false,
+    stopped: false,
+    stackFrames: [],
+    scopes: [],
+    variables: new Map(),
+    breakpoints: new Map(),
+    output: [],
+    logs: '',
+    result: undefined,
+    error: undefined
+};
+export const debugState = writable({ ...initialState });
+export class DAPClient {
+    ws = null;
+    seq = 1;
+    pendingRequests = new Map();
+    url;
+    constructor(url = 'ws://localhost:3003') {
+        this.url = url;
+    }
+    /**
+     * Connect to the DAP server.
+     */
+    async connect() {
+        return new Promise((resolve, reject) => {
+            try {
+                console.log('[DAP] Connecting to:', this.url);
+                this.ws = new WebSocket(this.url);
+                this.ws.onopen = () => {
+                    console.log('[DAP] Connected successfully');
+                    debugState.update((s) => ({ ...s, connected: true }));
+                    resolve();
+                };
+                this.ws.onclose = () => {
+                    console.log('[DAP] WebSocket closed');
+                    debugState.update((s) => ({
+                        ...initialState,
+                        breakpoints: s.breakpoints,
+                        // Preserve result and logs after disconnect
+                        result: s.result,
+                        logs: s.logs,
+                        output: s.output
+                    }));
+                    this.pendingRequests.clear();
+                };
+                this.ws.onerror = (error) => {
+                    console.error('DAP WebSocket error:', error);
+                    reject(new Error('WebSocket connection failed'));
+                };
+                this.ws.onmessage = (event) => {
+                    this.handleMessage(event.data);
+                };
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    /**
+     * Disconnect from the DAP server.
+     */
+    disconnect() {
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+        debugState.set({ ...initialState });
+    }
+    /**
+     * Send a request to the DAP server and wait for a response.
+     */
+    async sendRequest(command, args) {
+        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+            throw new Error('Not connected to DAP server');
+        }
+        const seq = this.seq++;
+        const message = {
+            seq,
+            type: 'request',
+            command,
+            arguments: args
+        };
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                this.pendingRequests.delete(seq);
+                reject(new Error(`Request timeout: ${command}`));
+            }, 10000);
+            this.pendingRequests.set(seq, {
+                resolve: (value) => {
+                    clearTimeout(timeout);
+                    resolve(value);
+                },
+                reject: (error) => {
+                    clearTimeout(timeout);
+                    reject(error);
+                }
+            });
+            this.ws.send(JSON.stringify(message));
+        });
+    }
+    /**
+     * Handle incoming messages from the DAP server.
+     */
+    handleMessage(data) {
+        try {
+            const message = JSON.parse(data);
+            if (message.type === 'response') {
+                const pending = this.pendingRequests.get(message.request_seq);
+                if (pending) {
+                    this.pendingRequests.delete(message.request_seq);
+                    if (message.success) {
+                        pending.resolve(message);
+                    }
+                    else {
+                        pending.reject(new Error(message.message || 'Request failed'));
+                    }
+                }
+            }
+            else if (message.type === 'event') {
+                console.log('[DAP] Event received:', message.event, message.body);
+                this.handleEvent(message);
+            }
+        }
+        catch (error) {
+            console.error('Failed to parse DAP message:', error);
+        }
+    }
+    /**
+     * Handle DAP events.
+     */
+    handleEvent(event) {
+        console.log('[DAP] Handling event:', event.event);
+        const body = event.body;
+        switch (event.event) {
+            case 'initialized':
+                // Clear logs and result when starting a new session
+                debugState.update((s) => ({
+                    ...s,
+                    initialized: true,
+                    logs: '',
+                    output: [],
+                    result: undefined,
+                    error: undefined
+                }));
+                break;
+            case 'stopped':
+                debugState.update((s) => ({
+                    ...s,
+                    stopped: true,
+                    running: false,
+                    stoppedReason: body?.reason,
+                    currentLine: body?.line
+                }));
+                // Automatically fetch stack trace when stopped
+                this.fetchStackTrace();
+                break;
+            case 'continued':
+                debugState.update((s) => ({
+                    ...s,
+                    stopped: false,
+                    running: true,
+                    stoppedReason: undefined
+                }));
+                break;
+            case 'terminated':
+                debugState.update((s) => ({
+                    ...s,
+                    running: false,
+                    stopped: false,
+                    initialized: false,
+                    result: body?.result,
+                    error: body?.error
+                }));
+                break;
+            case 'output':
+                if (body?.output) {
+                    debugState.update((s) => ({
+                        ...s,
+                        output: [...s.output, body.output],
+                        logs: s.logs + body.output
+                    }));
+                }
+                break;
+            case 'breakpoint':
+                // Breakpoint was verified/modified by the server
+                break;
+            default:
+                console.log('Unhandled DAP event:', event.event);
+        }
+    }
+    /**
+     * Initialize the debug session.
+     */
+    async initialize() {
+        const response = await this.sendRequest('initialize', {
+            clientID: 'windmill',
+            clientName: 'Windmill Script Editor',
+            adapterID: 'python',
+            pathFormat: 'path',
+            linesStartAt1: true,
+            columnsStartAt1: true,
+            supportsVariableType: true,
+            supportsVariablePaging: false,
+            supportsRunInTerminalRequest: false,
+            locale: 'en-US'
+        });
+        return response;
+    }
+    /**
+     * Set breakpoints in a source file.
+     */
+    async setBreakpoints(path, lines) {
+        console.log('[DAP] Setting breakpoints at path:', path, 'lines:', lines);
+        const response = await this.sendRequest('setBreakpoints', {
+            source: { path },
+            breakpoints: lines.map((line) => ({ line }))
+        });
+        console.log('[DAP] Breakpoints response:', response.body);
+        const breakpoints = response.body?.breakpoints || [];
+        debugState.update((s) => {
+            const newBreakpoints = new Map(s.breakpoints);
+            newBreakpoints.set(path, breakpoints);
+            return { ...s, breakpoints: newBreakpoints };
+        });
+        return breakpoints;
+    }
+    /**
+     * Notify the server that configuration is done.
+     */
+    async configurationDone() {
+        await this.sendRequest('configurationDone');
+    }
+    /**
+     * Launch a script for debugging.
+     */
+    async launch(options) {
+        await this.sendRequest('launch', {
+            program: options.program,
+            code: options.code,
+            args: options.args || {},
+            cwd: options.cwd || '.',
+            callMain: options.callMain || false,
+            env: options.env || {},
+            // Pass JWT token to debugger for verification
+            token: options.token
+        });
+        debugState.update((s) => ({ ...s, running: true }));
+    }
+    /**
+     * Continue execution.
+     */
+    async continue_() {
+        await this.sendRequest('continue', { threadId: 1 });
+        debugState.update((s) => ({ ...s, stopped: false, running: true }));
+    }
+    /**
+     * Step over (next).
+     */
+    async stepOver() {
+        await this.sendRequest('next', { threadId: 1 });
+    }
+    /**
+     * Step into.
+     */
+    async stepIn() {
+        await this.sendRequest('stepIn', { threadId: 1 });
+    }
+    /**
+     * Step out.
+     */
+    async stepOut() {
+        await this.sendRequest('stepOut', { threadId: 1 });
+    }
+    /**
+     * Pause execution.
+     */
+    async pause() {
+        await this.sendRequest('pause', { threadId: 1 });
+    }
+    /**
+     * Terminate the debug session.
+     */
+    async terminate() {
+        await this.sendRequest('terminate');
+    }
+    /**
+     * Get threads.
+     */
+    async getThreads() {
+        const response = await this.sendRequest('threads');
+        return response.body?.threads || [];
+    }
+    /**
+     * Get stack trace.
+     */
+    async getStackTrace(threadId = 1) {
+        const response = await this.sendRequest('stackTrace', {
+            threadId,
+            startFrame: 0,
+            levels: 20
+        });
+        const frames = response.body?.stackFrames || [];
+        debugState.update((s) => ({
+            ...s,
+            stackFrames: frames,
+            currentLine: frames[0]?.line,
+            currentFile: frames[0]?.source?.path
+        }));
+        return frames;
+    }
+    /**
+     * Get scopes for a stack frame.
+     */
+    async getScopes(frameId) {
+        console.log('[DAP] getScopes called with frameId:', frameId);
+        const response = await this.sendRequest('scopes', { frameId });
+        console.log('[DAP] getScopes response:', response);
+        const scopes = response.body?.scopes || [];
+        console.log('[DAP] getScopes parsed scopes:', scopes);
+        debugState.update((s) => ({ ...s, scopes }));
+        return scopes;
+    }
+    /**
+     * Get variables for a scope.
+     */
+    async getVariables(variablesReference) {
+        console.log('[DAP] getVariables called with variablesReference:', variablesReference);
+        const response = await this.sendRequest('variables', { variablesReference });
+        console.log('[DAP] getVariables response:', response);
+        const variables = response.body?.variables || [];
+        console.log('[DAP] getVariables parsed variables:', variables);
+        debugState.update((s) => {
+            const newVariables = new Map(s.variables);
+            newVariables.set(variablesReference, variables);
+            return { ...s, variables: newVariables };
+        });
+        return variables;
+    }
+    /**
+     * 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)
+     */
+    async evaluate(expression, frameId, context = 'repl', token) {
+        const response = await this.sendRequest('evaluate', {
+            expression,
+            frameId,
+            context,
+            token
+        });
+        return {
+            result: response.body?.result,
+            variablesReference: response.body?.variablesReference
+        };
+    }
+    /**
+     * Fetch stack trace (called automatically when stopped).
+     */
+    async fetchStackTrace() {
+        console.log('[DAP] fetchStackTrace called');
+        try {
+            const frames = await this.getStackTrace();
+            console.log('[DAP] fetchStackTrace got frames:', frames);
+            if (frames.length > 0) {
+                console.log('[DAP] fetchStackTrace calling getScopes with frameId:', frames[0].id);
+                await this.getScopes(frames[0].id);
+            }
+            else {
+                console.log('[DAP] fetchStackTrace: no frames, skipping getScopes');
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch stack trace:', error);
+        }
+    }
+    /**
+     * Clear output.
+     */
+    clearOutput() {
+        debugState.update((s) => ({ ...s, output: [] }));
+    }
+    /**
+     * Check if connected.
+     */
+    isConnected() {
+        return get(debugState).connected;
+    }
+    /**
+     * Check if running.
+     */
+    isRunning() {
+        return get(debugState).running;
+    }
+    /**
+     * Check if stopped at a breakpoint.
+     */
+    isStopped() {
+        return get(debugState).stopped;
+    }
+}
+// Singleton instance
+let dapClientInstance = null;
+export function getDAPClient(url) {
+    if (!dapClientInstance) {
+        dapClientInstance = new DAPClient(url);
+    }
+    return dapClientInstance;
+}
+export function resetDAPClient() {
+    if (dapClientInstance) {
+        dapClientInstance.disconnect();
+        dapClientInstance = null;
+    }
+}

package/package/components/debug/debugUtils.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Shared debug utility functions used across ScriptEditor, FlowModuleComponent,
+ * and RawAppInlineScriptEditor.
+ */
+/**
+ * Fetch contextual variables (WM_WORKSPACE, WM_TOKEN, etc.) for the debugger.
+ * Creates a fresh short-lived token for the debug session.
+ */
+export declare function fetchContextualVariables(workspace: string): Promise<Record<string, string>>;
+/**
+ * Sign a debug request with the backend. This creates an audit log entry
+ * and returns a signed token that authorizes the debug session.
+ */
+export declare function signDebugRequest(workspace: string, code: string, language: string): Promise<{
+    token: string;
+    code: string;
+    job_id: string;
+}>;
+/**
+ * Get a user-friendly error message for debug errors
+ */
+export declare function getDebugErrorMessage(error: unknown): string;
+/**
+ * Check if a language supports debugging
+ */
+export declare function isDebuggableLanguage(language: string | undefined): boolean;
+/**
+ * Get the file extension for a language (used for debug file path)
+ */
+export declare function getDebugFileExtension(language: string | undefined): string;

package/package/components/debug/debugUtils.js

@@ -0,0 +1,131 @@
+/**
+ * Shared debug utility functions used across ScriptEditor, FlowModuleComponent,
+ * and RawAppInlineScriptEditor.
+ */
+import { VariableService, UserService } from '../../gen';
+/**
+ * Fetch contextual variables (WM_WORKSPACE, WM_TOKEN, etc.) for the debugger.
+ * Creates a fresh short-lived token for the debug session.
+ */
+export async function fetchContextualVariables(workspace) {
+    if (!workspace) {
+        return {};
+    }
+    try {
+        const variables = await VariableService.listContextualVariables({ workspace });
+        const envVars = {};
+        for (const v of variables) {
+            envVars[v.name] = v.value;
+        }
+        // Create a fresh token with 15-minute expiration for the debugger
+        try {
+            const expirationDate = new Date(Date.now() + 15 * 60 * 1000);
+            const freshToken = await UserService.createToken({
+                requestBody: {
+                    label: 'debugger-token',
+                    expiration: expirationDate.toISOString(),
+                    workspace_id: workspace
+                }
+            });
+            envVars['WM_TOKEN'] = freshToken;
+        }
+        catch (tokenError) {
+            console.error('Failed to create debugger token:', tokenError);
+        }
+        return envVars;
+    }
+    catch (error) {
+        console.error('Failed to fetch contextual variables:', error);
+        return {};
+    }
+}
+/**
+ * Sign a debug request with the backend. This creates an audit log entry
+ * and returns a signed token that authorizes the debug session.
+ */
+export async function signDebugRequest(workspace, code, language) {
+    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, language })
+    });
+    if (!response.ok) {
+        const errorText = await response.text();
+        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();
+}
+/**
+ * Get a user-friendly error message for debug errors
+ */
+export 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 HTTP errors
+    if (message.includes('401') || message.includes('Unauthorized')) {
+        return 'Debug session unauthorized. Please check your permissions.';
+    }
+    if (message.includes('404')) {
+        return 'Debug service not available. Please check if the debugger is enabled.';
+    }
+    if (message.includes('timeout') || message.includes('ETIMEDOUT')) {
+        return 'Debug service connection timed out. Please try again.';
+    }
+    // Handle signing errors
+    if (message.includes('not configured on the server')) {
+        return message;
+    }
+    return message || 'An unexpected error occurred while starting the debugger.';
+}
+/**
+ * Check if a language supports debugging
+ */
+export function isDebuggableLanguage(language) {
+    if (!language)
+        return false;
+    return ['python3', 'bun', 'typescript', 'deno', 'nativets'].includes(language);
+}
+/**
+ * Get the file extension for a language (used for debug file path)
+ */
+export function getDebugFileExtension(language) {
+    switch (language) {
+        case 'python3':
+            return '.py';
+        case 'bun':
+        case 'typescript':
+        case 'deno':
+        case 'nativets':
+            return '.ts';
+        default:
+            return '.txt';
+    }
+}

package/package/components/debug/index.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Debug module exports for Python and TypeScript debugging in Windmill.
+ *
+ * This module provides a minimal DAP (Debug Adapter Protocol) implementation
+ * for debugging scripts in the Monaco editor.
+ *
+ * Supported Languages:
+ * - Python: Uses debugpy via the unified DAP Debug Service
+ * - TypeScript/Bun: Uses V8 Inspector Protocol via the unified DAP Debug Service
+ *
+ * Usage:
+ * 1. Start the unified DAP Debug Service:
+ *    bun run src/lib/debug/dap_debug_service.ts
+ *
+ * 2. Import and use MonacoDebugger component in your editor
+ *
+ * The service provides path-based routing:
+ * - /python     - Python debugging via debugpy
+ * - /typescript - TypeScript/Bun debugging via WebKit Inspector
+ * - /bun        - Alias for /typescript
+ *
+ * Example:
+ * ```svelte
+ * <script>
+ *   import MonacoDebugger from '../../debug/MonacoDebugger.svelte'
+ *   let editor // Monaco editor instance
+ *   let code = 'console.log("Hello")'
+ * </script>
+ *
+ * <!-- Option 1: Use language prop (recommended) -->
+ * <MonacoDebugger {editor} {code} language="bun" />
+ *
+ * <!-- Option 2: Explicit URL and path -->
+ * <MonacoDebugger
+ *   {editor}
+ *   {code}
+ *   dapServerUrl="ws://localhost:3003/typescript"
+ *   filePath="/tmp/script.ts"
+ * />
+ * ```
+ */
+export { default as MonacoDebugger } from './MonacoDebugger.svelte';
+export { default as DebugToolbar } from './DebugToolbar.svelte';
+export { default as DebugPanel } from './DebugPanel.svelte';
+export { default as DebugVariableViewer } from './DebugVariableViewer.svelte';
+export { default as DebugConsole } from './DebugConsole.svelte';
+export { DAPClient, getDAPClient, resetDAPClient, debugState, type DebugState, type Breakpoint, type StackFrame, type Variable, type Scope } from './dapClient';
+export { fetchContextualVariables, signDebugRequest, getDebugErrorMessage, isDebuggableLanguage, getDebugFileExtension } from './debugUtils';
+/**
+ * Language to debug endpoint path mapping.
+ * Uses the unified DAP Debug Service with path-based routing.
+ */
+export declare const DAP_ENDPOINT_PATHS: {
+    readonly python3: "/python";
+    readonly bun: "/bun";
+    readonly typescript: "/typescript";
+    readonly nativets: "/typescript";
+    readonly deno: "/typescript";
+};
+/**
+ * Supported debug languages
+ */
+export type DebugLanguage = keyof typeof DAP_ENDPOINT_PATHS;
+/**
+ * Get the WebSocket URL for the DAP debug server.
+ * Routes through the reverse proxy at /ws_debug/* in production.
+ *
+ * @param language - The script language (python3, bun, typescript, etc.)
+ * @returns The full WebSocket URL for the debug server
+ */
+export declare function getDebugServerUrl(language: DebugLanguage): string;
+/**
+ * @deprecated Use isDebuggableLanguage instead
+ */
+export declare function isDebuggable(language: string): boolean;