Agent Flow is a real-time visualization tool for monitoring AI agent orchestration, specifically designed for Claude Code and Codex sessions. It captures agent events via hook scripts and file tailing, processes them through a simulation layer, and renders an interactive node graph showing agent relationships, tool calls, discoveries, and performance metrics. The system comprises three main components: a VS Code extension for editor integration, a standalone Node.js server for direct use, and a Next.js-based web application serving as the core visualization frontend. Events are transmitted via Server-Sent Events (SSE) from a relay server to the frontend, which uses React with Tailwind CSS and d3-force for physics-based layout. Key features include live monitoring, timeline scrubbing, session replay, file attention tracking, token usage visualization, and stress testing scenarios. The architecture emphasizes performance through ref-based state management, memoized computations, and virtualized lists for handling large event logs.
Pixel Agents is a developer tool that visualizes AI coding agents (primarily Claude Code) as animated pixel-art characters in a virtual office environment. It ships as both a VS Code extension and a standalone CLI (`npx pixel-agents`), sharing a common runtime. The system monitors agent sessions in real-time via HTTP hooks (preferred) or JSONL file polling (fallback), normalizes events through a provider abstraction, and renders agent state (tool usage, context tokens, team structures, permissions) on a Canvas-based pixel-art office map. The architecture follows a hub-and-spoke pattern: a Fastify HTTP/WebSocket server aggregates agent activity, an AgentRuntime manages lifecycle and state, and a MessageTransport abstraction (PostMessage for VS Code, WebSocket for standalone) broadcasts updates to the React 19 + Canvas webview UI. The codebase is well-structured with clean interfaces (HookProvider, TeamProvider, StateAdapter), extensive test coverage (unit, integration, and Playwright e2e with a mock Claude CLI), and CI-enforced contract drift detection (AsyncAPI spec ↔ generated TypeScript, e2e inventory). While only the Claude provider ships, the provider registry is designed for multi-CLI support. The project demonstrates strong engineering practices with some complexity risks in dual-mode detection, consent flow edge cases, and cross-platform path handling.
Agentic Metric is a local-only monitoring tool for AI coding agents that tracks token usage and costs across Claude Code, Codex, OpenCode, Qwen Code, and VS Code (Copilot Chat). It features a TUI dashboard and CLI for real-time monitoring, historical trends, and cost estimation. The architecture uses a plugin-based collector system for each agent type, incremental file parsing for efficient live updates, and a SQLite database for data aggregation. Key design strengths include smart session upsert logic to prevent metric regression, cross-platform process detection, and a flexible pricing system with family-based fallbacks.