Skip to content
All work

Agentic systems2026

Agent Orchestration Simulator

A deterministic, in-browser simulation of a planner, researcher, executor and reviewer working through real-world tasks.

Abstract system portrait, drawn in your browser. Not a screenshot.
Role
Your role on this project
Timeline
2026
Team
Solo or team size
Stack
  • TypeScript,
  • React,
  • Next.js,
  • Canvas 2D,
  • Motion,
  • GSAP
Links

Run it yourself

The simulator lives in the Lab on the home page. Pick a scenario, step through it, inject a fault or approve a checkpoint.

Simulation, runs in your browser, no AI model is called.

Overview

The Lab on this site is a working model of how I structure multi-agent systems. Visitors pick a task, then watch an orchestrator route work between four specialist agents and their tools, with every message recorded in a live trace.

Problem

Agent systems are hard to explain with a diagram. The interesting parts are dynamic: delegation, tool calls, review loops, failures and recovery. A static picture hides all of it, and a live AI backend would be slow, costly and non-deterministic for a portfolio.

Approach

Each scenario is a script of generator functions run by a small discrete-event scheduler with a virtual clock. That makes every run deterministic, pausable, steppable and speed-adjustable. A canvas renderer draws the graph and message packets every frame without touching React state, while React only re-renders on discrete events such as a new trace entry.

Architecture

  • Scenario scripts to Event scheduler, yield
  • Run options to Event scheduler
  • Virtual clock to Event scheduler, tick
  • Event scheduler to Agent state
  • Event scheduler to Trace store, emit
  • Agent state to Canvas renderer, per frame
  • Trace store to React console, on event
Scenario scripts drive a virtual-clock scheduler. Rendering and UI subscribe to it independently.

Gallery

Challenges and solutions

Challenge: Smooth animation without re-rendering React sixty times a second.
Solution: The renderer reads simulation state directly inside requestAnimationFrame. React subscribes through useSyncExternalStore to a version counter that only changes on discrete events.
Challenge: Branching runs (faults, approvals) that still replay identically.
Solution: Scenarios are generators with explicit branches on run options and human decisions. No randomness, so the same inputs always produce the same trace.
Challenge: Honest framing.
Solution: The Lab is labeled as a simulation everywhere it appears. No model is called and no output is presented as live AI.

Outcomes

  • Visitors can run, pause, step, inject faults and approve checkpoints in four scenarios.
  • Add a measurable outcome if you have one