BFS/DFS algorithm visualization: graph nodes not rendering (blank canvas)

[GeneralJerel]

Bug Description

When the agent generates a BFS vs DFS algorithm comparison visualization, the graph node areas render as blank/empty canvases. The controls (Start node selector, Speed slider, Step both, Play, Reset buttons) and metadata rows (Visit order, Queue/Stack, Current node) all render correctly, but the actual graph visualizations where nodes and edges should appear are empty.

Screenshot

The two side-by-side panels (BFS and DFS) show blank beige rectangles where the graph nodes and edges should be drawn.

Expected Behavior

Both the BFS and DFS panels should display an interactive graph with labeled nodes and edges connecting them. The graph should be visible immediately and animate when stepping through the algorithms.

INPUT: I want to understand the difference between BFS and DFS. Create an interactive comparison on a node graph.

Likely Cause

The visualization is rendered via the widgetRenderer component which uses a sandboxed iframe (sandbox="allow-scripts"). The graph is likely drawn using either:

• SVG elements that aren't rendering inside the iframe
• A <canvas> element — but the iframe CSP or sandbox restrictions may be blocking it
• JavaScript that draws the graph on load, but the script execution timing may be off due to the iframe's content being streamed via postMessage (the shell loads empty, then content is patched in via idiomorph)

Potential issues:

1. Script execution timing: Scripts that draw the graph may run before the DOM nodes they target exist, since content is morphed in progressively
2. Canvas element restrictions: If the graph uses <canvas>, the sandbox="allow-scripts" without allow-same-origin could cause issues
3. Idiomorph stripping: The bridge JS strips <script> tags from incoming HTML and re-executes them separately — if the graph init script depends on DOM elements that idiomorph hasn't finished inserting, it will find no targets

Reproduction

Ask the agent to "compare BFS and DFS algorithms with a visualization" or similar prompt that triggers the graph traversal comparison widget.

Relevant Code

• Widget renderer: apps/app/src/components/generative-ui/widget-renderer.tsx
• Bridge JS script execution logic: lines ~414-425 in widget-renderer.tsx
• Generative UI registration: apps/app/src/hooks/use-generative-ui-examples.tsx