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

说明与用途

Agent Tracer 可视化 AI 代理交互，使用红色信封突出显示拒绝并显示原因，简化日志调试。

问题

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

结果

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.

工作流

• 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.

证据

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

来源

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.

来源

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.

来源