Agent flow prototypes

The agent-flow prototype is shipped at Agents in motion. It is a deterministic mock replay, not a live OMP session. Read agent-flow-concept for the modelling rules and future adapter boundary; this page is the concrete surface that shipped.

Routes and views

There are two directly addressable views:

• Waves is the default. It reads the authored delegation-wave scene as a time-forward fan-out: Main starts, direct children appear, siblings exchange Hub messages, a nested scout appears, branches block or return, and Main composes the result.
• Hierarchy reads the authored seat-hierarchy scene as containment: operator seat, Main session, direct subagents, a nested review scout, and an adjacent advisor span.
• Bare route resolves to ?view=waves. Any value other than hierarchy selects the waves view, so the default is stable and shareable.

The view switch changes the query string with replaceState, preserves focus, and avoids changing the underlying story. Both scenes are marked mock: true and run for 24,000 milliseconds.

flowchart TD
    Route["/demo/agents"] --> Waves["?view=waves default"]
    Route --> Hierarchy["?view=hierarchy"]
    Waves --> WaveScene["delegation-wave scene"]
    Hierarchy --> HierarchyScene["seat-hierarchy scene"]
    WaveScene --> Frame["frameAt scene time"]
    HierarchyScene --> Frame
    Frame --> Canvas["Svelte Flow canvas"]
    Frame --> Details["event ledger and status details"]

Data model

The source names are intentionally exposed here so that a visual claim can be checked against the implementation rather than against a screenshot.

record	fields in the shipped model
Scene	id, title, summary, mock: true, durationMs, agents, events
SceneAgent	id, label, role, optional parent, seat, lane
SceneEvent	id, t, kind, actor, optional target, label, optional detail, optional durationMs
EventKind	seat.start, agent.spawn, agent.start, hub.message, agent.block, agent.unblock, agent.result, advisor.span, signal, receipt.readback
FrameAgent	id, status, optional startedAt, optional endedAt, optional blockedReason
FrameMessage	id, from, to, label, progress
FrameAdvisor	id, target, label, from, to
Frame	t, agents, messages, advisors, spawned, completed, blocked, signalled, receiptVerified

AgentRole is main, task, scout, designer, or advisor. The mock AgentStatus is pending, running, waiting, blocked, done, or failed. This is a presentation contract, not the normalized OMP status union. In particular, Frame.agents excludes advisor records; advisors are represented only by active FrameAdvisor windows.

frameAt(scene, t) derives a frame from the event prefix at t. It sorts equal-time events deterministically, applies agent.spawn, agent.start, block/unblock and result transitions, keeps waiting-for-children state explicit, and then projects message and advisor windows. MESSAGE_FLIGHT_MS is 250, so a message pulse lasts for one bounded trip. Seeking calls the same derivation and does not replay effects or mutate a session.

The two scenes tell the same kind of story with distinct labels and seat values. delegation-wave uses operator-seat for its authored cast and emphasizes the fan-out. seat-hierarchy uses paths such as seat:operator, seat:operator/main, and seat:operator/main/task-review; the hierarchy view turns those paths into SeatGroupNode containment. Result relations use an explicit event target when present and otherwise point to the actor’s parent.

Visual grammar

The canvas uses AgentNode, SeatGroupNode, and AgentEdge. Nodes are not draggable, connectable, or deletable: the graph is a replay surface, not an editor, and keyboard deletion cannot remove a replay node. Waves uses stable lane/depth offsets for a time-forward reading. Hierarchy adds seat group nodes and places nested agents by seat depth and ownership depth; an advisor is compact and placed beside its host rather than consuming a task desk.

The three causal relations are not distinguished by colour alone:

relation	static signature	bounded motion or meaning
spawn	solid fork with a closed arrow	parent-to-child relation becomes visible at agent.spawn
Hub message	dashed arc with an open arrow	one travelling pulse follows the directed hub.message for 250 ms, then the arc remains static
result	thicker return with a double chevron	child-to-parent or explicit-target result is visible only after its event

Two supporting relations have their own signatures. An advisor span is a fine dotted tether with a hollow circle and is active only during its from/to window. Where relationFor can resolve both endpoints, a signal uses a dashed wake-up relation with a hollow marker; operator-seat targets that are not scene-agent IDs are intentionally not forced onto the canvas. The authoritative shipped signal surface is the signal-and-receipt panel and event ledger. receipt.readback is intentionally not drawn as a fifth causal edge: it updates that panel, the canvas chain indicator, and the event ledger.

State also has redundant, inspectable shapes:

• a revealed running agent has an open activity treatment;
• waiting uses a quiet dashed treatment and no spinner;
• blocked uses a hatch/pause glyph and exposes blockedReason as text;
• done uses a check and failed uses a cross;
• pending or not-yet-revealed agents remain visibly distinct from an agent whose final result is merely known elsewhere.

Role icons, status classes, labels, and aria-label values accompany the shapes. Semantic colours reinforce relation and status, but the line pattern, marker, glyph, text, position, and terminal form carry the distinction without requiring colour vision.

Playback, timing, and scrubbing

The transport offers Play/Pause, Replay, previous-event and next-event stepping, speed choices of 0.5×, 1×, 2×, and 4×, a 50-millisecond scrub step, and a current/total time readout. Replay stops playback and sets timeMs to zero. Step controls stop playback and jump to the previous or next unique authored event timestamp, falling back to the beginning or the 24-second end.

The event ledger retains the complete authored list. Events whose t is after the current frame are labelled upcoming; they are not rendered as if they had already happened. Canvas relations use the same prefix rule and are hidden until their event time. An active message is transient only in Frame.messages; after its 250-millisecond flight the recorded relation stays static. An advisor is visible only while its derived span is active.

The signal card states the completion boundary in plain language: signal is “wake-up only,” while receipt readback can become “verified completion.” This is a scripted mock transition. It does not turn delivery into proof and does not imply a live recipient read the signal.

When prefers-reduced-motion: reduce matches, the route stops continuous playback and presents Step mode. Scrubbing and event stepping remain available, and the page says that the story remains fully inspectable. AgentEdge omits animateMotion for the message pulse in reduced-motion mode while retaining its endpoint, arrow, label, and relation class. No animation is required to discover nesting, direction, blocked state, result state, or the signal/receipt distinction.

Honest limitations

• Every scene, label, timestamp, duration, role, seat, status transition, signal, and receipt is authored mock data. The MOCK DATA badges are part of the surface.
• There is no live adapter now. The route does not read OMP JSONL, subscribe to RPC, attach to Collab, poll a process registry, or communicate with a running Main or task subagent.
• The 24-second clock is not a measured scheduler timeline. It has no real process start/end, queue latency, tool span, model change, token cost, parent acceptance timestamp, or network transit measurement.
• The mock adds scout and designer roles and explicit blocked/waiting/pending statuses for illustration. A real OMP adapter would need to preserve the normalized schema’s narrower agent kinds and its unknown lifecycle states rather than copying this union.
• seat strings are display containment, not native process ownership. A seat group can explain the intended visual hierarchy but cannot establish which host owns a session.
• The route does not ship skip-idle warping, live-follow, trace export, broadcast bundling, or a terminal-completion inference algorithm. In particular, the receipt checkbox changes only when the authored receipt.readback event is reached.
• Svelte Flow supplies the canvas presentation. This prototype is not a forensic trace viewer, an editor, a scheduler, an execution monitor, or a production accessibility/security/performance certification.

Use agent-flow-concept for the rules behind these limits, concepts for the ordinary graph model, and private page (sign-in required) for publication and runtime procedures. The ordinary demo index remains at demos, and the wiki map is index.

Source map

• /home/loca/dev/sflw/src/routes/demo/agents/+page.svelte — route URLs, query-param view selection, scene selection, transport controls, reduced-motion handling, node/edge projection, signal/receipt panel, and event ledger.
• /home/loca/dev/sflw/src/lib/agentviz/types.ts — AgentRole, AgentStatus, EventKind, SceneAgent, SceneEvent, Scene, FrameAgent, FrameMessage, FrameAdvisor, and Frame definitions.
• /home/loca/dev/sflw/src/lib/agentviz/scene.ts — the delegation-wave and seat-hierarchy mock scenes and their authored agent/event arrays.
• /home/loca/dev/sflw/src/lib/agentviz/timeline.ts — MESSAGE_FLIGHT_MS, pure frameAt, message progress, advisor windows, blocked/unblock transitions, and signal/receipt flags.
• /home/loca/dev/sflw/src/lib/agentviz/index.ts — public exports for the agentviz modules.
• /home/loca/dev/sflw/src/lib/components/agentviz/types.ts — AgentView, node data, AgentRelationKind, and edge data used by the Svelte Flow projection.
• /home/loca/dev/sflw/src/lib/components/agentviz/AgentNode.svelte — role/status labels, glyphs, blocked reason, receipt line, and accessible node identity.
• /home/loca/dev/sflw/src/lib/components/agentviz/AgentEdge.svelte — marker, dash, stroke, pulse, and reduced-motion rendering for each relation kind.
• /home/loca/dev/sflw/src/lib/components/agentviz/SeatGroupNode.svelte — the seat / session containment group and agent count shown in hierarchy mode.