---
title: "Agent Architecture Visualizer"
emoji: 🔄
colorFrom: blue
colorTo: indigo
sdk: gradio
sdk_version: 4.36.0
app_file: app.py
pinned: false
---

# Agent Architecture Visualizer

Interactive visualization of Claude Code's agent loop architecture based on the paper "Dive into Claude Code: The Design Space of Today's and Future AI Agent Systems" (arXiv:2604.14228).

## Core Concepts Demonstrated

1. **The Agent Loop**: Model → Tools → Repeat cycle with state persistence
2. **Permission Gates**: 7-mode permission system with ML-based classification
3. **Context Compaction**: Five-layer pipeline for managing context windows
4. **Subagent Delegation**: Worktree-isolated task spawning

## Paper Insight

The paper reveals that while the core agent loop is simple (a while-loop calling the model and executing tools), most complexity lives in the surrounding systems: permission classification, context management, extensibility mechanisms, and session storage.

## Space Features

- Interactive agent loop simulator
- Permission mode visualizer
- Context compaction demo
- Subagent delegation trace

## Citation

```bibtex
@article{liu2026claudecode,
  title={Dive into Claude Code: The Design Space of Today's and Future AI Agent Systems},
  author={Liu, Jiacheng and Zhao, Xiaohan and Shang, Xinyi and Shen, Zhiqiang},
  year={2026}
}
```