🔮 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 |
Click to expand
| Feature | Description |
|---|---|
| 🔎 Automatic Scanning | Discovers all Claude Code sessions from ~/.claude/projects/ |
| 🎛️ Smart Filtering | Filter by model (Opus/Sonnet/Haiku), date presets (1h, 24h, 7d, 30d), or custom calendar range |
| 📅 Custom Calendar Picker | Built-in range selector with month navigation, today highlight, and range visualization |
| 📡 Real-time Monitoring | Watch sessions update as they progress with live file watching |
| 📂 Session Grouping | Group sessions by project or model, with collapsible sections |
| 🔄 Refresh with Progress | Manual refresh with progress notification and optimized discovery |
7 Powerful Analysis Tabs
| Tab | Features |
|---|---|
| 📝 Steps | Full-text search • Multi-select tool filter • Status filter (Success/Failed/Issues) • Sort by time or cost • Per-step duration • Lucide icons per tool type • Inline findings |
| 🔍 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 |
| 💡 Insights | AI-powered recommendations • Pattern recognition • Optimization suggestions • Best practices |
- React-powered Webviews: Smooth, responsive interface built with React 19
- Custom Dropdowns & Calendar: Fully styled filter controls — no native browser widgets
- 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: Per-tool-type stroke icons with a pastel color palette
- Sticky Filters: Header, tabs, and filters stay fixed while content scrolls
- Sidebar Webview: Sessions listed with inline search, model & date filters
- Command Palette: Quick access to all features
- Status Bar Item: Argus indicator in the status bar
- 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
Detailed breakdown of token usage and API costs per step with interactive charts
Session efficiency scores, wasted cost analysis, and performance metrics
Interactive dependency graph showing file operations and step relationships
Step-by-step execution log with detailed tool call inspection and timing
Token usage tracking, cache performance, and context window utilization
AI-powered recommendations, pattern recognition, and optimization suggestions
# 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# Clone and install
git clone https://github.com/yessGlory17/argus.git
cd argus-vscode
npm install# Terminal 1: Watch TypeScript changes
npm run watch
# Terminal 2: Watch webview changes
npm run dev:webviewThen 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 packageContributions 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):
| Command | Description |
|---|---|
Argus: Refresh Sessions |
Refresh the session list with progress indicator |
Argus: Open Session Detail |
Open detailed analysis for a session |
Argus: Clear All Filters |
Reset all sidebar filters |
Argus: Group by Project |
Group sessions by project directory |
Argus: Group by Model |
Group sessions by Claude model |
Argus: Flat List |
Remove session grouping |
Customize Argus in VS Code Settings:
{
"argus.scanDepth": 5, // Directory depth for scanning (default: 5)
"argus.language": "en" // UI language: "en" or "tr"
}|
|
|
argus-vscode/
├── src/ # Extension source code
│ ├── extension.ts # Main entry point & command registration
│ ├── types/ # TypeScript definitions
│ │ ├── models.ts # Core data models & filter state
│ │ └── parser.ts # JSONL parsing types
│ ├── services/ # Business logic layer
│ │ ├── discoveryService.ts # Session discovery & file system scanning
│ │ ├── parserService.ts # JSONL streaming parser & cost calculation
│ │ └── analyzerService.ts # Analysis engine with 6 rules
│ └── providers/ # VS Code API providers
│ ├── sessionListViewProvider.ts # Sidebar: search, filters, calendar, session list
│ ├── sessionWebviewProviderReact.ts # React webview host & live file watcher
│ └── datePickerPanel.ts # Custom date picker panel
│
├── webview/ # React UI
│ ├── src/
│ │ ├── main.tsx # React entry point
│ │ ├── App.tsx # Main app with tab routing
│ │ ├── components/ # UI components (11 tabs + utilities)
│ │ │ ├── StepsTab.tsx # Steps with search, filter dropdowns, icons
│ │ │ ├── AnalysisTab.tsx # Findings & rule results
│ │ │ ├── CostTab.tsx # Cost breakdown & charts
│ │ │ ├── FlowTab.tsx # File operation flow
│ │ │ ├── ContextTab.tsx # Token & cache analysis
│ │ │ ├── PerformanceTab.tsx # Efficiency scoring
│ │ │ ├── InsightsTab.tsx # Recommendations
│ │ │ ├── DependencyGraph.tsx # D3-powered graph
│ │ │ ├── SessionNotes.tsx # Per-session notes
│ │ │ └── ...
│ │ ├── styles/ # Global CSS & theme variables
│ │ └── types/ # Frontend types
│ └── index.html # Webview template
│
├── package.json # Extension manifest
├── tsconfig.json # TypeScript config
└── vite.config.ts # Vite bundler config
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|
Lines of Code |
Source Files |
React Components |
Analysis Rules |
|
Visualization Types |
Languages (EN/TR) |
Dependencies |
Dev Dependencies |
- ✅ JSONL Parsing: High-performance streaming parser with early-exit optimization
- ✅ Cost Calculation: Accurate token-based cost estimation per step and session
- ✅ Dependency Tracking: File operation dependency graph generation with D3.js
- ✅ Context Metrics: Cache hit ratio and token utilization analysis
- ✅ Real-time Updates: Live session monitoring via file watchers as Claude Code runs
- ✅ Multi-session Management: Handle dozens of sessions with grouping and filtering
- ✅ Advanced Filtering: Model/date/text search in sidebar, tool/status/sort in Steps tab
- ✅ Custom Calendar: Built-in date range picker with range visualization
- ✅ Step Duration: Per-step timing calculated from consecutive timestamps
- ✅ Session Notes: Persist notes per session for future reference
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
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
|
|
|
MIT License - see LICENSE file for details
