I built Packet Tracer for AI agents — and the red packets are the point

Description and use

Agent Tracer visualizes AI agent interactions, highlighting refusals as red envelopes with reasons, making log debugging straightforward.

Problem

Agent logs are stored in tables, making it hard to see where conversations fail or why agents refuse actions.

Outcome

Agent Tracer turns opaque tabular logs into an interactive visual flow, making refusals and their reasons immediately visible and enabling quick debugging of agent interactions.

Workflow

• 1. Create a single HTML file (Agent Tracer).
• 2. Open the file in a browser; the demo conversation starts automatically.
• 3. Each agent is a box; each message is an envelope sliding between boxes.
• 4. Green envelopes indicate acceptance; red envelopes indicate refusal with a displayed "why" field.
• 5. Use Pause, Step, or click a log line to jump to specific moments.
• 6. Drag a JSON log file onto the page to visualize custom logs; no server or dependencies are required.
• 7. The JSON format includes agents, messages with from, to, verb, subject, and optional why fields.
• 8. Run the tracer to identify zero red envelopes as a sign of a safe system.

Evidence

Agent Tracer is one HTML file. You open it in a browser and it starts moving on its own: a demo conversationa reviewer and a tester plays out, envelope by en

Source

Each agent is a box on the board. Each message is an envelope sliding. Green envelope: the gate said ye. Red envelope: the gate refused on screen.

Source

Drag a file onto the page, or use Opaded — there is no server to upload to, no fetch, no telemetry. The file is read in your browser and stays there.

Source