HRM Studio: A Visual Debugging and Interactive Platform for Hierarchical Reasoning Models

HRM Studio is a web-based interactive visual debugging platform specifically built for Hierarchical Reasoning Models (HRMs). It aims to address the problem that HRM's multi-time-scale reasoning process is abstract, complex, and difficult to observe and debug. By converting reasoning sequences into intuitive graphs via real-time node diagrams, it supports hierarchical reasoning tracking and interactive debugging. Developed autonomously by Angela AutoPilot based on the HRM framework, it provides AI engineers with an efficient tool for model understanding and debugging.

As large language models evolve toward enhanced reasoning capabilities, Hierarchical Reasoning Models (HRMs) have gained attention for their ability to decompose tasks and refine actions across multiple time scales. However, the abstractness and complexity of the reasoning process make it difficult for developers to understand and debug. Traditional logging and print debugging can no longer meet the needs—more intuitive and interactive observation methods are required.

1. Real-time Node Graph Visualization: Converts abstract reasoning sequences into real-time node graphs, where nodes represent states/decision points and edges indicate transition relationships;
2. Hierarchical Reasoning Tracking: Supports tracking how high-level goals are decomposed into mid-level sub-goals and mid-level ones into low-level actions, helping understand hierarchical dependencies and information flow;
3. Interactive Debugging: Provides functions like step-by-step execution, manual intervention in the reasoning process, and cross-level state analysis;
4. Developer-Friendly Experience: Intuitive UI reduces the learning curve, real-time state updates, and adjustable views/filter options to focus on key information.

HRM Studio uses a modern front-end tech stack: React (UI framework), Tailwind CSS (interface construction), Vite (build tool), React Flow (node graph visualization), Zustand (state management), and Lucide Icons (icon system). The tech selection balances performance and developer experience—React Flow provides core support for node graph interactions. It adopts a front-end and back-end separation architecture, loosely coupled with the HRM back-end reasoning framework, allowing independent evolution.

1. Development and Debugging: Helps engineers quickly locate logical errors, understand decision paths, and verify the rationality of task decomposition;
2. Teaching and Demonstration: The graphical interface lowers the barrier to understanding HRM concepts, suitable for teaching and demonstrating to non-technical personnel;
3. Agent Behavior Analysis: Assists in understanding an agent's task decomposition and decision-making process, optimizing behavior strategies;
4. Human-Machine Collaboration Optimization: Supports manual intervention, enabling flexible and controllable systems where humans guide agents at key nodes.

HRM Studio reflects a trend in the AI development toolchain: complex AI models require supporting tools for understanding and control, and visual debugging has become a necessity for production-level system development. Its autonomous generation by AutoPilot demonstrates the potential of AI-assisted development—more AI-collaborative development tools may emerge in the future. Its open-source nature facilitates community expansion, providing reference implementations and tool foundations for teams developing reasoning models and agent systems.