yessGlory17/argus: Claude Code Session Debugger & Performance Analyzer · GitHub

💥 Check out this insightful post from Hacker News 📖

📂 **Category**:

✅ **What You’ll Learn**:

🔮 Named after the all-seeing giant of Greek mythology — Argus watches over your Claude Code sessions, detecting inefficiencies, tracking costs, and optimizing your AI development experience.

Argus is a powerful VS Code extension that provides deep insights into Claude Code sessions, helping developers optimize their AI-assisted workflows through intelligent analysis and beautiful visualizations.

💸

Save Money

_{Identify wasted API calls and optimize token usage}

⚡

Speed Up Development

_{Detect retry loops and duplicate operations}

🔬

Deep Analysis

_{Understand how Claude Code works under the hood}

📊

Visual Insights

_{Beautiful dashboards with real-time monitoring}

🎓

Learn & Improve

_{Understand patterns and optimize your prompts}

🔍 Intelligent Session Discovery

Click to expand

Feature	Description
🔎 Automatic Scanning	Discovers all Claude Code sessions from `~/.claude/projects/`
🎛️ Smart Filtering	Configurable depth scanning with performance optimizations
📡 Real-time Monitoring	Watch sessions update as they progress
📂 Multi-project Support	Manages sessions across multiple projects simultaneously

📊 Comprehensive Analysis Dashboard

8 Powerful Analysis Tabs

Tab	Features
📋 Overview	Session statistics • Cost analysis • Timeline visualization • Quick summary
🔍 Analysis	6 intelligent rules: Duplicate Reads • Unused Operations • Retry Loops • Failed Tools • Context Pressure • Compaction Events
💰 Cost	Step-by-step breakdown • Token visualization • Cache hit ratio • Model attribution • Spending graphs
⚡ Performance	Efficiency score • Wasted cost calculations • Timing analysis • Bottleneck identification
🌊 Flow	Interactive dependency graph • File operation flow • Read/Write/Edit tracking • Step relationships
🧠 Context	Token usage tracking • Cache performance • Window utilization • I/O distribution
📝 Steps	Detailed execution log • Tool call inspection • Input/output viewing • Per-step timing & costs
💡 Insights	AI-powered recommendations • Pattern recognition • Optimization suggestions • Best practices

React-powered Webviews: Smooth, responsive interface built with React 19
Interactive Visualizations: Charts powered by Chart.js and Recharts
D3.js Graphs: Beautiful dependency flow diagrams
Dark Mode Native: Seamlessly integrates with VS Code themes
Lucide Icons: Modern, consistent iconography

🔧 Developer Experience

Tree View Integration: Sessions appear in VS Code sidebar
Command Palette: Quick access to all features
Status Bar Item: One-click dashboard access
Hot Reload: Vite-powered development for instant updates
TypeScript: Fully typed for better DX and reliability

Intelligent detection of duplicate reads, retry loops, and optimization opportunities

Analysis Tab

Detailed breakdown of token usage and API costs per step with interactive charts

Cost Tab

Session efficiency scores, wasted cost analysis, and performance metrics

Performance Tab

Interactive dependency graph showing file operations and step relationships

Flow Tab

Step-by-step execution log with detailed tool call inspection and timing

Steps Tab

Token usage tracking, cache performance, and context window utilization

Context Tab

AI-powered recommendations, pattern recognition, and optimization suggestions

Insights Tab

Option 1: From VSIX (Recommended)

# Download the latest .vsix file from releases
code --install-extension argus-0.1.0.vsix

# Clone the repository
git clone https://github.com/yessGlory17/argus.git
cd argus-vscode

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Build webview
npm run build:webview

# Package extension
npx vsce package

# Install the packaged extension
code --install-extension argus-0.1.0.vsix

Setting Up Development Environment

# Clone and install
git clone https://github.com/yessGlory17/argus.git
cd argus-vscode
npm install

Running in Development Mode

# Terminal 1: Watch TypeScript changes
npm run watch

# Terminal 2: Watch webview changes
npm run dev:webview

Then press F5 in VS Code to launch the Extension Development Host.

# Compile TypeScript
npm run compile

# Build production webview
npm run build:webview

# Run linter
npm run lint

# Package extension
npx vsce package

Contributions are welcome! Please:

🍴 Fork the repository
🌿 Create a feature branch (git checkout -b feature/amazing-feature)
✏️ Make your changes
✅ Add tests if applicable
📝 Commit your changes (git commit -m 'Add amazing feature')
🚀 Push to the branch (git push origin feature/amazing-feature)
🎉 Open a Pull Request

Open VS Code

_{With the Argus extension installed}

Find Argus Icon

_{Look for in the Activity Bar (left sidebar)}

Explore Sessions

_{Sessions appear automatically – just click to analyze!}

Access via Command Palette (Ctrl/Cmd + Shift + P):

Argus: Refresh Sessions – Manually refresh the session list
Argus: Open Session Detail – View specific session analysis

Customize Argus in VS Code Settings:

🔥

argus-vscode/
├── src/                        # Extension source code
│   ├── extension.ts           # Main entry point
│   ├── types/                 # TypeScript definitions
│   │   ├── models.ts          # Core data models
│   │   └── parser.ts          # JSONL parsing types
│   ├── services/              # Business logic layer
│   │   ├── discoveryService.ts    # Session discovery & scanning
│   │   ├── parserService.ts       # JSONL parser
│   │   └── analyzerService.ts     # Analysis engine with rules
│   └── providers/             # VS Code API providers
│       ├── sessionTreeProvider.ts      # Tree view in sidebar
│       └── sessionWebviewProvider.ts   # React webview host
│
├── webview/                   # React UI
│   ├── src/
│   │   ├── main.tsx          # React entry point
│   │   ├── components/       # UI components
│   │   │   ├── AnalysisTab.tsx
│   │   │   ├── CostTab.tsx
│   │   │   ├── PerformanceTab.tsx
│   │   │   ├── FlowTab.tsx
│   │   │   ├── ContextTab.tsx
│   │   │   ├── StepsTab.tsx
│   │   │   ├── InsightsTab.tsx
│   │   │   ├── DependencyGraph.tsx
│   │   │   ├── LiveMonitor.tsx
│   │   │   ├── SessionNotes.tsx
│   │   │   └── GlobalSearch.tsx
│   │   └── types/            # Frontend types
│   └── index.html            # Webview template
│
├── package.json              # Extension manifest
├── tsconfig.json            # TypeScript config
└── vite.config.js          # Vite bundler config

Argus uses a rule-based analysis system:

interface AnalysisRule 🔥

// Built-in Rules:
- DuplicateReadRule       // Detects duplicate file reads
- UnusedReadRule          // Finds unused tool outputs
- RetryLoopRule           // Identifies retry patterns
- FailedToolRule          // Tracks failures
- ContextPressureRule     // Memory pressure detection
- CompactionDetectedRule  // Context compression events

_{Lines of Code}	_{TypeScript Files}	_{React Components}	_{Analysis Rules}
_{Visualization Types}	_{Languages (EN/TR)}	_Dependencies	_{Dev Dependencies}

✅ JSONL Parsing: High-performance streaming parser for large session files
✅ Cost Calculation: Accurate token-based cost estimation
✅ Dependency Tracking: File operation dependency graph generation
✅ Context Metrics: Cache hit ratio and token utilization analysis
✅ Real-time Updates: Live session monitoring as Claude Code runs
✅ Multi-session Management: Handle dozens of sessions simultaneously
✅ Export Capabilities: Save analysis results for sharing
✅ Search & Filter: Quick navigation across large sessions

Argus follows the “Ocular Systems” philosophy:

“See everything, understand everything, optimize everything”

Visibility: Make the invisible visible
🎯 Precision: Accurate, actionable insights
⚡ Performance: Fast, responsive, non-intrusive
🎨 Beauty: Delightful UI that makes analysis enjoyable
🔬 Depth: Surface-level overview to deep technical details

🔄 Ported from Wails Desktop App

Argus VS Code extension is a complete rewrite of the original Argus desktop application:

Original (Wails)	VS Code Extension
Go backend	TypeScript backend
React SPA	React Webview
Wails bridge	VS Code Extension API
Standalone desktop app	Integrated VS Code experience
Manual session import	Automatic discovery

✅ Native Integration: Works where developers already are
✅ Better UX: No app switching, seamless workflow
✅ Auto Discovery: No manual session loading
✅ Theming: Inherits VS Code theme automatically
✅ Commands: Accessible via Command Palette

👨‍💻 For Developers

✅ Understand how Claude Code approaches your problems
✅ Learn which prompts are most efficient
✅ Optimize your interaction patterns
✅ Track AI-assisted development costs

✅ Audit AI usage across projects
✅ Identify best practices
✅ Training material for effective Claude Code usage
✅ Cost management and budgeting

✅ Study LLM-based development patterns
✅ Analyze tool usage patterns
✅ Understand context management strategies
✅ Research AI-human collaboration workflows

MIT License – see LICENSE file for details

👁️ Built with Argus, Analyzed by Argus

Made with ❤️ by developers, for developers

Report Bug
Request Feature
Documentation

_{⭐ Star us on GitHub if you find Argus useful!}

{💬|⚡|🔥} **What’s your take?**
Share your thoughts in the comments below!

#️⃣ **#yessGlory17argus #Claude #Code #Session #Debugger #Performance #Analyzer #GitHub**

🕒 **Posted on**: 1772901400

🌟 **Want more?** Click here for more info! 🌟