## Execution Overlay: Page Layout

How should the diagram + execution details be arranged?

DIAGRAM
from:jms
log
bean
to:http
100%
Loop 2/5
Input Output Headers Error Timeline
{"orderId": "ORD-1234",
"product": "Widget A",
"quantity": 5}

### A: Top/Bottom Split (IDE Style)

Diagram on top, tabbed detail panel below. Resizable splitter between them. Maximizes diagram width. Tabs: Input, Output, Headers, Error, Timeline.

#### Pros

- Full diagram width
- Familiar IDE pattern
- Detail panel always visible

#### Cons

- Vertical space shared
- Diagram shrinks on small screens

DIAGRAM
from:jms
log
bean
100%
log (processor-3)
COMPLETED - 12ms
Input Output Headers
{"orderId": "ORD-1234",
"product": "Widget A",
"quantity": 5,
"price": 29.99}

### B: Left/Right Split

Diagram on left, collapsible detail panel on right. Slide-in when node selected. Diagram keeps full height.

#### Pros

- Full diagram height
- Panel can collapse
- Good for wide screens

#### Cons

- Steals diagram width
- Tight on narrow screens

DIAGRAM
from:jms
log
bean
to:http
100%
Processors
from:jms - 2ms
log - 12ms
bean - FAILED
to:http - skipped
Input Output Headers
{"orderId": "ORD-1234",
"product": "Widget A"}

### C: Top/Bottom with Processor List

Diagram on top, bottom split into processor list (left) + detail tabs (right). Clicking processor in list or diagram syncs selection. Most information density.

#### Pros

- Processor list as navigation
- Full diagram width
- Maximum information density

#### Cons

- More complex layout
- May feel crowded