The event flow overview helps you inspect a screen's interaction handlers without opening each widget one by one. It combines a canvas overlay with an audit view in the bottom panel so you can answer three questions quickly:

  • Which widgets trigger events on this screen
  • What each handler targets
  • Which handlers are incomplete, broken, or leave the current screen

The overview is read-only. Use it to inspect and navigate; edit the actual handler in the inspector's Event tab.

Canvas overlay

On the canvas, event flow appears as an overlay layer:

  • Turn it on from the canvas toolbar with the flow icon.
  • Use Ctrl/Cmd+Shift+E to toggle it from the keyboard.
  • Arrows connect a source widget to the widget or screen it affects.
  • Badges mark handlers that do not produce a normal arrow, such as self-target handlers or screen lifecycle handlers.
  • Error and warning colors match the document's compliance diagnostics, so broken targets stay visible in the overview.

The overlay is decluttered automatically as you zoom. At low zoom it keeps only the essential paths; at higher zoom it reveals labels for the links you are looking at.

Jump to the owning handler

Every arrow, badge, and overview item can jump back to the handler that owns it:

  1. Click the event-flow item on the canvas or in the panel.
  2. The editor selects the source widget.
  3. The inspector switches to the Event tab.
  4. The owning event row is revealed and highlighted.

This makes the overview a navigation surface rather than a second editor.

Events tab

When this build enables the event overview tab, the bottom panel adds Events next to other audit tabs such as Problems.

The List view shows one row per event action on the active screen, including handlers the canvas cannot draw as normal arrows:

  • actions with no target, such as call_function or delay
  • empty or missing targets
  • screen-level lifecycle handlers
  • cross-screen actions such as change_screen

You can filter the list by severity to review errors and warnings first.

Flows view

Inside the Events tab, switch from List to Flows to see cross-screen navigation as a screen map:

  • each screen becomes a card
  • each change_screen relation becomes an arrow
  • card counts show outbound and inbound screen links
  • clicking a card opens that screen
  • clicking a flow arrow jumps to the owning handler

Use this view when the question is about screen-to-screen transitions rather than widget-to-widget behavior.

What the overview is good for

  • Audit a screen after agent-generated edits
  • Find broken or dangling event targets before export
  • Understand which widget starts a behavior chain
  • Trace where a change_screen action leads
  • Review all handlers on the current screen without hunting through the hierarchy