ARGUS

Claude Code Session Debugger & Performance Analyzer

👁️ SEE EVERYTHING

🎯 OPTIMIZE EVERYTHING

⚡ SAVE TIME

✨ Features • 📸 Screenshots • 📦 Installation • 🚀 Usage • 🏗️ Architecture • 📊 Stats

🔮 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.

🎯 What is Argus?

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.

✨ Features

🔍 Intelligent Session Discovery

📊 Comprehensive Analysis Dashboard

🎨 Modern UI/UX

• 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

📸 Screenshots

📦 Installation

Option 1: From VSIX (Recommended)

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

Option 2: From Source

# 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

🛠️ Development

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.

Building

# Compile TypeScript
npm run compile

# Build production webview
npm run build:webview

# Run linter
npm run lint

# Package extension
npx vsce package

Contributing

Contributions are welcome! Please:

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

🚀 Usage

Quick Start

Commands

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

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

Configuration

Customize Argus in VS Code Settings:

{
  "argus.scanDepth": 5,        // Directory depth for scanning (default: 5)
  "argus.language": "en"       // UI language: "en" or "tr"
}

🏗️ Architecture

Technology Stack

Project Structure

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

Analysis Engine

Argus uses a rule-based analysis system:

interface AnalysisRule {
  name: string;
  analyze(steps: Step[]): Finding[];
}

// 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

📊 Project Stats

Key Capabilities

• ✅ 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

🎨 Design Philosophy

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:

Migration Journey

Why VS Code?

• ✅ 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

📚 Use Cases

📄 License

MIT License - see LICENSE file for details