Skip to content

Commit 0ccd4a1

Browse files
jonwigginsclaude
jonwiggins
and
claude
committed
Initial commit: Claude Code Algorithm Visualizer
An interactive educational webapp that visualizes how Claude Code works internally. Features: - Interactive flowchart visualization using React Flow - Step-by-step scenario playback with multiple scenarios - Algorithm Overview showing the complete agentic loop - Comprehensive Learn page with documentation - Sandbox configuration for permissions and hooks - Resizable sidebars and responsive design Tech stack: React 18, TypeScript, Vite, Tailwind CSS v4, Zustand, React Router 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
0 parents  commit 0ccd4a1

30 files changed

Lines changed: 8886 additions & 0 deletions

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# Claude Code Algorithm Visualizer
2+
3+
An interactive educational webapp that visualizes how [Claude Code](https://github.com/anthropics/claude-code) works internally. Explore the agentic loop algorithm through interactive flowcharts and step-by-step scenario walkthroughs.
4+
5+
![Claude Code Visualizer](https://img.shields.io/badge/React-18-blue) ![TypeScript](https://img.shields.io/badge/TypeScript-5-blue) ![Tailwind CSS](https://img.shields.io/badge/Tailwind-4-blue)
6+
7+
## Features
8+
9+
### Interactive Visualizer
10+
- **Scenario-based learning**: Walk through real-world scenarios like file reads, multi-tool tasks, permission denials, and subagent delegation
11+
- **Step-by-step playback**: Use playback controls to step forward/backward through each execution step
12+
- **Live flowchart**: Watch the algorithm flow animate as you step through scenarios
13+
- **Detailed inspection**: Click any node to see payload data, tool inputs/outputs, and hook configurations
14+
15+
### Algorithm Overview
16+
- **Complete reference diagram**: See the entire Claude Code algorithm as an interactive flowchart
17+
- **20 algorithm nodes** covering session lifecycle, context management, agentic loop, tool execution, hooks, subagents, and output
18+
- **Click for details**: Each node shows detailed explanations and code examples
19+
20+
### Comprehensive Documentation
21+
- **Learn tab**: ~15 minute read covering all aspects of the algorithm
22+
- **ASCII diagrams**: Visual explanations of data flow
23+
- **Pseudocode**: Understand the logic without implementation details
24+
- **Real code examples**: JSON configurations and TypeScript snippets
25+
26+
### Sandbox Configuration
27+
- **Permission modes**: Toggle between default, acceptEdits, plan, and more
28+
- **Permission rules**: See how deny/ask/allow rules affect execution
29+
- **Hook configuration**: Understand how hooks intercept and modify behavior
30+
31+
## Tech Stack
32+
33+
- **React 18** with TypeScript
34+
- **Vite** for fast development and building
35+
- **React Flow** (@xyflow/react) for interactive flowcharts
36+
- **Dagre** for automatic graph layout
37+
- **Zustand** for state management
38+
- **Tailwind CSS v4** for styling
39+
- **React Router** for navigation
40+
- **Prism React Renderer** for syntax highlighting
41+
- **Lucide React** for icons
42+
43+
## Getting Started
44+
45+
### Prerequisites
46+
47+
- Node.js 18+
48+
- npm or yarn
49+
50+
### Installation
51+
52+
```bash
53+
# Clone the repository
54+
git clone https://github.com/yourusername/claude-code-visualizer.git
55+
cd claude-code-visualizer
56+
57+
# Install dependencies
58+
npm install
59+
60+
# Start the development server
61+
npm run dev
62+
```
63+
64+
The app will be available at `http://localhost:5173`
65+
66+
### Building for Production
67+
68+
```bash
69+
# Build the app
70+
npm run build
71+
72+
# Preview the production build
73+
npm run preview
74+
```
75+
76+
## Project Structure
77+
78+
```
79+
src/
80+
├── components/ # React components
81+
│ ├── FlowCanvas.tsx # Main flowchart visualization
82+
│ ├── FlowNode.tsx # Custom node component
83+
│ ├── ScenarioPicker.tsx
84+
│ ├── PlaybackControls.tsx
85+
│ ├── ExecutionLog.tsx
86+
│ ├── DetailPanel.tsx
87+
│ ├── SandboxPanel.tsx
88+
│ └── CodeBlock.tsx # Syntax-highlighted code
89+
├── pages/
90+
│ ├── VisualizerPage.tsx # Interactive visualizer
91+
│ └── LearnPage.tsx # Documentation article
92+
├── algorithmOverview.ts # Algorithm nodes and edges data
93+
├── scenarios.ts # Scenario definitions
94+
├── store.ts # Zustand state management
95+
├── types.ts # TypeScript type definitions
96+
├── App.tsx # Main app with routing
97+
└── main.tsx # Entry point
98+
```
99+
100+
## Scenarios
101+
102+
The visualizer includes several pre-built scenarios:
103+
104+
1. **Algorithm Overview** - Complete reference diagram of the Claude Code algorithm
105+
2. **Simple File Read** - Basic tool execution flow with Read tool
106+
3. **Multi-Tool Task** - Multiple tools used in sequence (Glob → Bash → Read)
107+
4. **Subagent Delegation** - Spawning an Explore subagent for codebase analysis
108+
5. **Permission Denied** - How deny rules block tool execution
109+
6. **Hook Blocking** - PreToolUse hook modifying tool input
110+
7. **Context Compaction** - Automatic summarization when context limit is reached
111+
112+
## How It Works
113+
114+
### The Agentic Loop
115+
116+
Claude Code operates through a continuous loop:
117+
118+
1. **User Input** → User sends a message
119+
2. **Model Inference** → Claude analyzes and decides on action
120+
3. **Tool Execution** → If needed, tools are executed (with permission checks)
121+
4. **Result Integration** → Tool results are added to context
122+
5. **Loop** → Back to inference until task is complete
123+
6. **Response** → Final response sent to user
124+
125+
### Key Concepts Visualized
126+
127+
- **Session Lifecycle**: Initialization, hooks, context loading
128+
- **Permission System**: deny > ask > allow rule evaluation
129+
- **Hooks**: PreToolUse, PostToolUse, Stop, and other extension points
130+
- **Subagents**: Isolated agents for specialized tasks
131+
- **Context Compaction**: Automatic summarization for long conversations
132+
133+
## Contributing
134+
135+
Contributions are welcome! Please feel free to submit issues and pull requests.
136+
137+
## License
138+
139+
MIT License - see LICENSE file for details.
140+
141+
## Acknowledgments
142+
143+
- Built to help developers understand [Claude Code](https://github.com/anthropics/claude-code) by Anthropic
144+
- Uses [React Flow](https://reactflow.dev/) for flowchart visualization
145+
- Inspired by the official Claude Code documentation
146+
147+
---
148+
149+
**Note**: This is an educational visualization tool and is not officially affiliated with Anthropic. For official documentation, visit [claude.ai/code](https://claude.ai/code).

‎eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { defineConfig, globalIgnores } from 'eslint/config'
7+
8+
export default defineConfig([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs.flat.recommended,
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

‎index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Claude Code Algorithm Visualizer</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.tsx"></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)