Flow Playback
Flow playback visualizes how requests move through your system. The simulation is event-driven: the clock jumps directly to the next meaningful event (a processing completion, a retry, a circuit breaker reopening, or a delivery arrival) rather than ticking at fixed intervals. Each frame represents a cluster of events that happen at the same virtual time.
Timeline bar
Section titled “Timeline bar”The timeline bar appears as a floating draggable panel at the bottom of the canvas. You can drag it by the grip handle to reposition it, and click the pin icon to reset its position. It contains playback controls, a visual scrubbing bar, and time/frame indicators.
Controls
Section titled “Controls”| Control | Action |
|---|---|
| Play/Pause | Start or pause animated playback (Ctrl+Space) |
| Step Forward (>) | Advance one frame (Right Arrow) |
| Step Back (<) | Go back one frame (Left Arrow) |
| Reset | Reset playback to the beginning and clear all highlights |
| Seed Packets | Stepper (1-100) to set how many requests are injected at entry points. Type a value directly or use the arrows. |
Cumulative stats
Section titled “Cumulative stats”Four compact counters display inline next to the playback controls:
| Icon | Stat | Description |
|---|---|---|
| ↓ | Entered | Total requests that entered the system |
| ↑ | Delivered | Requests that reached exit nodes |
| Queue icon | Queued | Requests currently waiting in component queues |
| Trash icon | Dropped | Requests lost (overflow, filter, circuit breaker, rate limit) |
Scrubbing bar
Section titled “Scrubbing bar”The colored bar represents the full simulation timeline. Each segment is proportional to the time gap between frames (not evenly spaced), so a 200ms processing step occupies more space than a 5ms one.
Segments are color-coded by frame health across five tiers:
- Slate: Idle frame, no activity (0 inbox, outbox, processed)
- Green: Healthy, no drops, queue depth <= 2
- Amber: Warning, queue depth > 2 (building pressure)
- Orange: Critical, queue depth > 50 (severe backup, no drops yet)
- Red: Bad, requests were dropped this frame
Past frames are fully colored. Future frames are shown at 30% opacity as a lookahead. Click or drag anywhere on the bar to scrub to that frame. Scrubbing uses actual rendered segment positions for pixel-accurate tracking. Hover shows a tooltip with per-component detail at that moment.
Below the bar, a centered counter shows the current time (clock icon) and frame (film icon), flanked by 0 on the left and the total simulation duration on the right.
Expanded detail panel
Section titled “Expanded detail panel”Click the expand chevron at the right of the timeline to toggle the detail panel. It shows:
- Virtual time at this frame, longest path duration, and simulation window
- Per-component activity: natural-language breakdown for each active component (e.g., “received 3 from Fetch, processed 2, dropped 1, 2 queued, sent to Parser”)
- Verbs adapt to the component’s behavior mode: “released” for queues, “passed” for filters, “transformed” for transforms
- Insight line: Plain-language observation about the frame (e.g., “Backing up at Parser (3 waiting)” or “Fetch losing requests”)
- Alert badges: Critical (queue backed up), failure (requests lost), or warning indicators per component
- Bottleneck callout: Names the current bottleneck component if one exists
- Run summary: When the simulation finishes and playback pauses, a narrative summary of the full run appears
KPI Overlay (SimHUD)
Section titled “KPI Overlay (SimHUD)”The KPI overlay is a floating draggable panel that provides a real-time heads-up display during simulation. It appears alongside the timeline and can be repositioned, pinned, or closed independently.
What it shows
Section titled “What it shows”| Element | Description |
|---|---|
| Health % | Aggregate system health score (0-100%) with color-coded label: green (>= 80%), amber (>= 50%), orange (>= 25%), red (< 25%) |
| Delivery bar | Visual progress bar showing the delivery rate as delivered / (delivered + dropped) |
| In / Out / Lost / Queue | Cumulative request counters matching the Overview panel |
| Time | Formatted clock showing the current simulation time |
| Step counter | Current frame / total frames |
| Alerts | Live queue warnings and bottleneck callouts as they appear |
Behavior
Section titled “Behavior”- Draggable: Grab the grip handle to reposition anywhere on the canvas
- Dismissible: Click the X button to close. The timeline also has its own close button.
- Pin reset: Click the pin icon to snap the overlay back to its default position
- Dim on idle: When no interaction is happening, the overlay fades to 40% opacity. It returns to full opacity on hover, during playback, or when scrubbing the timeline (with a 1.5-second hold after activity stops).
The KPI overlay health score is synced with the Overview panel. Both use the same aggregate calculation from flow stats so values always match.
How time works
Section titled “How time works”The simulation clock is measured in milliseconds. Each frame’s timestamp comes from the processing times, connection latencies, and behavior delays you configure on your components.
The total simulation duration is auto-calculated as:
duration = max(longestPathMs * seedPacketCount * 2.5, minimum)Where longestPathMs is computed via relaxation from entry points through all downstream connections and processing times. This means a system with 200ms steps runs on a completely different timescale than one with 3-minute batch cycles, and the timeline adapts automatically.
Time compression
Section titled “Time compression”When the raw simulation duration exceeds 1 hour, the engine applies proportional time compression. All timing values (processing times, connection latencies, retry backoff, circuit breaker cooldown) are scaled down by the same factor so that the simulation fits within the 1-hour cap.
The compression ratio is 3,600,000 / rawDuration. Because every value is scaled uniformly, relative bottleneck proportions are preserved. A component that takes 10x longer than another still takes 10x longer after compression.
This means you can use real-world durations (hours, days) on your components and the engine will compress them into a runnable simulation without losing the relative timing relationships.
Frames are throttled by a minimum interval to avoid excessive granularity. When frames are skipped, their deltas carry forward into the next emitted frame so no data is lost.
Canvas visualization during playback
Section titled “Canvas visualization during playback”Connection animation
Section titled “Connection animation”Active connections show animated dashed lines flowing in the direction of traffic:
- Active: Accent-colored dashed stroke with flowing animation (direction matches traffic flow)
- Bidirectional: Dual animated dashes with arrow markers on both ends
- Branch-colored: Connections from condition nodes are green (true path) or orange (false path) with a split percentage badge (e.g., “73%”)
- Traversed (used in prior frames but not this one): Accent-colored at 30% opacity
- Inactive (not used at all): Dimmed to 15% opacity with smooth crossfade
Component status badges
Section titled “Component status badges”During playback, icon badges stack at the top-right corner of each component (only shown when count > 0):
| Icon | Color | Stat |
|---|---|---|
| ↑ Arrow up | Green | Delivered (cumulative, exit nodes) |
| ↓ Arrow down | Blue | Entered (cumulative, entry nodes) |
| Trash | Red | Dropped (cumulative) |
| Layers | Amber | Queued (current snapshot) |
Delivered and entered counts accumulate across frames. Queue depth is a live snapshot at the current frame.
Queue saturation heatmap
Section titled “Queue saturation heatmap”As a component’s queue fills toward capacity, it tints progressively warmer (orange to red). The saturation is calculated as queueDepth / componentCapacity.
Queue depth badges
Section titled “Queue depth badges”When buffered items exceed 3, a numeric badge appears on the component. Badges reflect the actual queue state at each frame.
Inactive dimming
Section titled “Inactive dimming”Components not involved in the current simulation dim to 30% opacity. Connections with no traffic and no historical traversal dim to 15% opacity. Both use smooth 0.2s transitions and re-brighten when activity resumes or the component is selected.
Active processing indicator
Section titled “Active processing indicator”The component currently processing shows a blue halo circle at 50% opacity.
Alert indicators
Section titled “Alert indicators”Components under stress show visual alerts:
- Failure: Red flash animation (0.7s) on the component icon
- Warning/Critical: Orange or yellow flash animation (1s)
- Bottleneck borders: Pulsing orange/red borders on saturated components
Console logging
Section titled “Console logging”Open the console (` key) during playback to see timestamped debug logs. Each frame generates:
- A headline: “flow step N: components A, B, C (X requests in flight)”
- Per-event entries for drops, errors, and routing decisions
The console uses a circular buffer (max 150 entries) so it stays responsive during long runs.
GIF export
Section titled “GIF export”Export the entire flow playback as an animated GIF from the Export modal’s GIF tab. Choose a playback speed (1x, 2x, or 4x), toggle light or dark theme, then generate and download. Useful for embedding in READMEs, docs, or presentations.