Method getHtml

frontend/src/webview.ts:601–656

(graph: WorkflowGraph, loadingOptions?: LoadingOptions)

    }

    private getHtml(graph: WorkflowGraph, loadingOptions?: LoadingOptions): string {
        const webview = this.panel!.webview;

        // Generate nonce for CSP
        const nonce = this.getNonce();

        // Get URIs for static files
        const scriptUri = webview.asWebviewUri(
            vscode.Uri.joinPath(this.context.extensionUri, 'out', 'webview-client', 'main.js')
        );
        const d3Uri = webview.asWebviewUri(
            vscode.Uri.joinPath(this.context.extensionUri, 'media', 'webview', 'd3.v7.min.js')
        );
        const fontsUri = webview.asWebviewUri(
            vscode.Uri.joinPath(this.context.extensionUri, 'media', 'webview', 'fonts')
        );

        // Stringify graph data safely
        let graphJson: string;
        try {
            graphJson = JSON.stringify(graph);
        } catch (error) {
            console.error('Failed to stringify graph:', error);
            graphJson = '{"nodes":[],"edges":[],"llms_detected":[],"workflows":[]}';
        }

        // Read and process CSS with font URI replacement
        const cssPath = path.join(this.context.extensionPath, 'media', 'webview', 'styles.css');
        let css = fs.readFileSync(cssPath, 'utf8');
        css = css.replace(/\{\{fontsUri\}\}/g, fontsUri.toString());

        // Read static HTML template
        const htmlPath = path.join(this.context.extensionPath, 'media', 'webview', 'index.html');
        let html = fs.readFileSync(htmlPath, 'utf8');

        // Replace placeholders
        html = html.replace(/\{\{nonce\}\}/g, nonce);
        html = html.replace(/\{\{cspSource\}\}/g, webview.cspSource);
        html = html.replace(/\{\{d3Uri\}\}/g, d3Uri.toString());
        // Inline the processed CSS (with font URIs resolved)
        html = html.replace(/\{\{inlineStyles\}\}/g, css);

        // Replace script tag with graph data injection and bundled script
        const loadingState = loadingOptions?.loading ? 'true' : 'false';
        const scriptReplacement = `
    <script nonce="${nonce}">
        window.__GRAPH_DATA__ = ${graphJson};
        window.__LOADING_STATE__ = ${loadingState};
    </script>
    <script nonce="${nonce}" src="${scriptUri}"></script>
</body>`;

        html = html.replace('</body>', scriptReplacement);

        return html;
    }

    private getNonce(): string {