🧠 Code Context Recorder

Never Lose the WHY Behind Your Code Again

🚀 Quick Start • 📖 Documentation • 🎯 Demo • 💬 Community

---

---

💥 The Problem

Ever experienced this? 🤔 - "Why did we do it this way?" - "Who wrote this and why??" - "What was the reasoning here?" - Lost critical context forever - Hours debugging old code - New devs can't understand decisions

Git tracks WHAT changed Comments explain HOW it works But nothing captures WHY "The most valuable code isn't the code itself—it's the context around it."

---

✨ The Solution

Code Context Recorder is your team's knowledge time machine ⏰

Automatically captures and preserves the complete story behind your code:

Feature	Description	Status
📚 Research Tracking	Links to Stack Overflow, docs, GitHub issues you referenced	✅ Ready
💬 Decision History	Associated Slack threads, meeting notes, bug tickets	✅ Ready
🎤 Voice Notes	Audio explanations of tricky decisions	🚧 Coming Soon
⏱️ Timeline View	Replay the entire decision-making process	✅ Ready
🔍 AI Search	Find context using natural language	✅ Ready
👥 Team Sync	Share context across your entire team	🚧 Coming Soon

---

🎯 See It In Action

🎬 Adding Context to Your Code

graph LR
    A[🖊️ You Write Code] --> B[🤔 Add Context]
    B --> C[💾 Auto-Saved]
    C --> D[🔍 Searchable Forever]
    D --> E[👥 Team Knowledge]
    
    style A fill:#4CAF50,stroke:#2E7D32,color:#fff
    style B fill:#2196F3,stroke:#1565C0,color:#fff
    style C fill:#FF9800,stroke:#E65100,color:#fff
    style D fill:#9C27B0,stroke:#6A1B9A,color:#fff
    style E fill:#F44336,stroke:#C62828,color:#fff

Loading

📝 Before CCR // TODO: Fix this later function calculatePrice(items) { return items.reduce((a,b) => a + b.price * 0.87, 0); } Why 0.87? Nobody knows anymore 😰

✅ With CCR // Context: Using 0.87 multiplier for bulk discount // Decision: After meeting with sales team // Ticket: JIRA-1234 function calculatePrice(items) { return items.reduce((a,b) => a + b.price * 0.87, 0); } Full context preserved forever 🎉

🎥 Live Demo

Open Interactive Demo — Try Code Context Recorder in your browser

---

🚀 Quick Start

Installation is a breeze! Choose your path:

🎨 VS Code Extension (Recommended)

# Install from VS Code Marketplace (Coming Soon)
code --install-extension code-context-recorder

# Or install from source
git clone https://github.com/koushik4475/code-context-recorder.git
cd code-context-recorder
npm install
npm run build
cd packages/vscode-extension
npm run install-extension

On Windows PowerShell use ; instead of && between commands, or run each line separately.

Keyboard Shortcuts:

• Ctrl+Shift+C - Add context
• Ctrl+Shift+T - View timeline
• Ctrl+Shift+F - Search contexts
• Ctrl+Shift+V - Voice note (coming soon)

💻 CLI Tool

# Install globally
npm install -g @ccr/cli

# Or use in your project
npm install --save-dev @ccr/cli

# Initialize in your project
ccr init

🔗 Git Hooks

# Automatically prompt for context on commits
cd your-project
npx ccr-hooks install

---

🎨 Features

🔥 Core Capabilities

📊 Smart Timeline View complete decision history for any file with beautiful visual timeline

🎯 Instant Search Find context using natural language queries in milliseconds

🔄 Auto-Capture Automatically links browser research to your commits

💡 Usage Examples

📝 Recording Context

# Add context to current file
ccr add "Chose this approach because X API was deprecated" --file src/auth.ts

# Add context with links
ccr add "Following this pattern: https://..." --file src/auth.ts

# Record important decisions (use add with a clear message)
ccr add "Decision: Use PostgreSQL over MongoDB. Need ACID transactions for financial data." --file src/db.ts --tags "decision,architecture"

🔍 Searching Context

# Natural language search
ccr search "why did we choose PostgreSQL over MongoDB"

# Search by file pattern
ccr search "authentication" --file "*.ts"

# Search by type
ccr search "decision" --type decision

📈 View Analytics

# Show project statistics
ccr stats

# Output:
# 📊 Total Contexts: 247
# 📈 Avg per Commit: 2.3
# 🔥 Most Documented Files:
#    ├─ src/auth.ts (45)
#    ├─ src/api.ts (32)
#    └─ src/utils.ts (28)

⏱️ View Timeline

# See complete history for a file
ccr timeline src/components/Auth.tsx
ccr timeline src/api.ts

---

🏗️ Architecture

graph TB
    subgraph "User Interfaces"
        A[VS Code Extension]
        B[CLI Tool]
        C[Browser Extension]
        D[Web Viewer]
    end
    
    subgraph "Core Engine"
        E[Context Capture]
        F[Storage Layer]
        G[Search Engine]
    end
    
    subgraph "Integrations"
        H[Git Hooks]
        I[Slack]
        J[Linear/Jira]
    end
    
    A --> E
    B --> E
    C --> E
    D --> G
    E --> F
    F --> G
    H --> E
    E --> I
    E --> J
    
    style A fill:#007ACC,stroke:#005A9C,color:#fff
    style B fill:#4CAF50,stroke:#2E7D32,color:#fff
    style C fill:#FF9800,stroke:#E65100,color:#fff
    style D fill:#9C27B0,stroke:#6A1B9A,color:#fff
    style E fill:#2196F3,stroke:#1565C0,color:#fff
    style F fill:#F44336,stroke:#C62828,color:#fff
    style G fill:#00BCD4,stroke:#00838F,color:#fff

Loading

📦 Project Structure

code-context-recorder/
├── 🎯 packages/
│   ├── core/              # TypeScript core library
│   ├── vscode-extension/  # VS Code integration
│   ├── cli/               # Command-line interface
│   ├── git-hooks/         # Git integration
│   ├── browser-extension/ # Browser tracking
│   └── web-viewer/        # React web UI
├── 📖 docs/               # Documentation
└── 🧪 tests/              # Test suites

---

🎨 Tech Stack

Core TypeScript (Strict Mode) Node.js SQLite (better-sqlite3)

Search MiniSearch Full-text indexing Fuzzy matching

UI VS Code Extension API React + TailwindCSS WebExtensions API

---

📊 Configuration

Create .ccrrc.json in your project root:

{
  "storage": {
    "type": "sqlite",
    "path": ".ccr"
  },
  "capture": {
    "autoCapture": true,
    "includeBrowserHistory": true,
    "includeVoiceNotes": true
  },
  "integrations": {
    "slack": { "enabled": false },
    "linear": { "enabled": false },
    "jira": { "enabled": false }
  },
  "privacy": {
    "excludePatterns": ["*.env", "*.key", "secrets/*"],
    "localOnly": true
  }
}

---

🗺️ Roadmap

Where We're Going 🚀

gantt
    title Code Context Recorder Development Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Core Engine & Storage     :done, 2024-01-01, 30d
    VS Code Extension MVP     :done, 2024-01-15, 30d
    Git Hooks Integration     :done, 2024-02-01, 15d
    
    section Phase 2
    Voice Note Recording      :active, 2024-02-15, 30d
    Web Viewer UI             :active, 2024-02-20, 45d
    Browser Extension         :active, 2024-03-01, 30d
    
    section Phase 3
    Team Collaboration        :2024-04-01, 45d
    AI-Powered Features       :2024-05-01, 60d
    Mobile App                :2024-06-01, 90d

Loading

✅ Completed

• Core storage and API
• SQLite integration with WAL mode
• VS Code extension MVP
• Git hooks integration
• Full-text search engine
• Timeline visualization
• CLI tool
• Analytics dashboard

🚧 In Progress

• Voice note recording (60% complete)
• Browser extension (40% complete)
• Web viewer UI (30% complete)

🔮 Coming Soon

• Team collaboration features
• Slack/Linear/Jira integrations
• AI-powered context suggestions
• Semantic search improvements
• Mobile app for viewing context
• Real-time sync
• Cloud backup (optional)

---

🤝 Contributing

We ❤️ contributions! Check out our Contributing Guide

🌟 Contributors

Made with contrib.rocks

Development Setup

# Clone the repository
git clone https://github.com/koushik4475/code-context-recorder.git
cd code-context-recorder

# Install dependencies
npm install

# Run in development mode
npm run dev

# Run tests
npm test

# Build all packages
npm run build

---

📚 Documentation

📖 Usage Guide Learn how to use CCR effectively

🏗️ Architecture Technical deep-dive

🤝 Contributing Join the community

---

🌟 Why Use Code Context Recorder?

🎯 For Individual Developers ✅ Never forget why you wrote something ✅ Resume work instantly after breaks ✅ Build a knowledge base of your decisions ✅ Improve code review quality ✅ Learn from your past choices

👥 For Teams ✅ Onboard new developers 10x faster ✅ Preserve institutional knowledge ✅ Reduce time debugging legacy code ✅ Improve team communication ✅ Create living documentation

---

💬 Community

• 💬 Discord Server - Get help and chat
• 🐛 Issue Tracker - Report bugs
• 💡 Discussions - Share ideas
• 📧 Email: hello@code-context-recorder.dev

---

📄 License

Code Context Recorder is MIT licensed.

---

🙏 Acknowledgments

Built with ❤️ by developers who are tired of losing context.

Special thanks to:

• The amazing open-source community
• Early adopters and beta testers
• All contributors who made this possible

---

⭐ Star us on GitHub — it motivates us a lot!

---

⬆ Back to Top