Timeline View

Timeline View is a Pro-only canvas mode that re-arranges your design along a time axis instead of a spatial one. Topology View answers what does my system do? Timeline View answers where is my latency budget going?

The view derives entirely from the static processing time of each component and the latency of each connection. No simulation required — Timeline updates the instant you edit a metric.

Switching views

Bottom-left toolbar has two icons:

Icon	View
Workflow	Topology — the editable canvas (default).
Clock	Timeline — read-only, time-axis layout (Pro).

Free users clicking the Timeline icon get the upgrade modal. Topology stays the only editing surface in both views — Timeline is for reading the design, not changing it.

Sub-modes: Spine vs Gantt

A floating control strip lives top-center of the timeline canvas. It carries the sub-mode toggle, zoom controls, and current zoom percentage. Single source of truth — there’s no duplicate toggle in the workspace toolbar.

Mode	Best for
Spine	Telling the story of the system. Components float as numbered “stations” along a clean horizontal spine with alternating icon + text on opposite sides. Looks polished, presentable, shareable.
Gantt	Diagnosing latency. One row per component, bars sized by metrics.processingTime. The longest bar IS your bottleneck, at a glance. LoL HP-bar styling: rectangular bars with vertical tick segments, framed outlines.

Spine ignores actual durations when laying out — items are evenly spaced in topological order. Gantt is data-accurate — bar widths and positions reflect real time.

Color philosophy

Color carries meaning, not decoration. The same rule applies in both modes and in the hover card:

Element	Color
Default (passthrough component)	Neutral slate / border-strong
Behavior mode set (retry, batch, circuit breaker, etc.)	That behavior’s color
Critical path	Red (#ef4444)

Critical state shows on the ring of the icon circle (Spine) or the bar fill (Gantt) and on the duration text, but not on the icon glyph itself. The glyph stays in the behavior color or soft text. The hover card follows the exact same rules — no inconsistencies anywhere.

Spine layout

Each component owns a vertical column. Even-indexed items (0, 2, 4, …) get the icon above the spine and the text block below. Odd-indexed items mirror that — text above, icon below. The icon and text are always on opposite sides of the spine.

Text format per column (centered horizontally on the icon column):

STEP NN · duration · STATUS    (uppercase mono caps line)
Component Name                  (big bold)
Description...                  (wrapped to up to 3 lines)

STATUS shows CRITICAL (red) when the component is on the critical path, the behavior mode in uppercase (RETRY, BATCH, CIRCUITBREAKER, etc.) when one is set, otherwise nothing.

A long colored rod connects the icon to its numbered station circle on the spine. The text side intentionally has no rod — proximity + the station number is enough to anchor it, and a rod ending in empty space above the text just looks like noise.

Hovering anywhere in a column thickens the ring on both the icon circle AND the station circle, plus pops up a detail card with the full description, start/end times, and percentage of total duration.

Gantt layout

One row per component, ordered topologically. The row gutter (left side, 240px) shows the component icon, name, optional description, and total duration. Components on the critical path get a CRIT prefix on the duration in accent color.

Each row contains:

• Background track — full-width muted rectangle, the “lane” the bar sits in.
• Bar — rectangular with 2px corner rounding, fill is solid muted slate (passthrough) or behavior color or accent (critical path). Subtle vertical gradient gives the “lit from above” feel.
• Segment dividers — vertical tick lines inside the bar at the global time-ruler positions (every 8.3min, 16.7min, etc. depending on the duration scale). League of Legends HP-bar aesthetic.
• Frame outline — 1px dark border wrapping the bar. The “metal frame around the HP bar” effect.
• Inline duration — white monospace text centered in the bar, paint-order stroked for legibility on any color.

Right-angle elbow arrows connect bars to their downstream components, drawn behind the bars at low opacity so they read as context, not content.

Critical path

Both modes compute the critical path automatically: starting from the latest-ending component, walking backward along the predecessor whose end time defined the start time. The result is the longest entry-to-exit chain — your latency budget. Highlighted in red in both views and in the hover card.

If you have a 51-minute total duration and the critical path covers 49 minutes of that, those red components are where every minute of optimization buys you a real win. Fixing a non-critical component might make the system look prettier but won’t reduce total latency.

Zoom and pan

Gesture	Result
Plain mouse wheel	Zoom in / out (0.3x to 2.5x).
Shift + wheel	Native horizontal scroll (pan when zoomed past viewport).
Floating panel — / +	Step zoom out / in.
Floating panel — fit icon	Reset zoom to 0.8 (the default “show a few notches out” baseline).

The floating panel always shows the current zoom percentage so you know where you are. Default 0.8x gives a comfortable overview of typical designs.

Hover card

Hover any column (Spine) or any row (Gantt) for a floating overlay with:

• Icon + step number + critical badge
• Component label, type, behavior mode
• Description (full, untruncated)
• Duration, % of total, start time, end time
• Behavior color chip (when applicable)

Position auto-flips to stay inside the viewport. The icon glyph color in the hover card matches the timeline icon exactly — absolute parity.

Empty state

Timeline View requires a flow with a clear entry point. If your design has no components with zero incoming connections (i.e. nothing to start from), or contains only cycles, the view shows an empty state with a “Back to Topology” button. Add an entry component (a Person or Trigger with no incoming connections), wire downstream steps, and switch back.

Sim playback overlay (Gantt only)

When a sim is playing or paused mid-run, the Gantt view overlays a vertical sweep line at the current real-elapsed-time X position. Spans all rows, diamond cap at the top, monospace time label above it. Sky-cyan with a soft glow — matches the LCD SimClock HUD so the two read as a coherent set.

The Spine view intentionally skips the overlay since Spine is topo-order-spaced (not time-accurate), so a time-positioned sweep line wouldn’t correspond to any visible feature.

Things Timeline View doesn’t do (yet)

• No editing. Drag, connect, edit all happen in Topology. Timeline is a read-only diagnostic view.
• No exports yet. PNG export of the timeline view is on the roadmap; for now use a screenshot.

When to use which view

Question	Use
”Does my pipeline have a sensible flow?”	Topology
”Where would a new engineer get lost?”	Spine
”Which step is eating my latency budget?”	Gantt
”Can I show this design to a stakeholder?”	Spine
”Is this part of the critical path?”	Either timeline mode
”I need to add or rewire something.”	Topology (Timeline is read-only)