🧠 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

📝 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

📦 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

✅ Completed

🚧 In Progress

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

🔮 Coming Soon

🤝 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: [email protected]

📄 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

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
assets		assets
packages		packages
.ccrrc.example.json		.ccrrc.example.json
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierrc.js		.prettierrc.js
ARCHITECTURE.md		ARCHITECTURE.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
USAGE.md		USAGE.md
demo.html		demo.html
hero-banner.svg		hero-banner.svg
package.json		package.json
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

🧠 Code Context Recorder

Never Lose the WHY Behind Your Code Again

💥 The Problem

✨ The Solution

🎯 See It In Action

🎬 Adding Context to Your Code

📝 Before CCR

✅ With CCR

🎥 Live Demo

🚀 Quick Start

Installation is a breeze! Choose your path:

🎨 Features

🔥 Core Capabilities

📊 Smart Timeline

🎯 Instant Search

🔄 Auto-Capture

💡 Usage Examples

🏗️ Architecture

📦 Project Structure

🎨 Tech Stack

📊 Configuration

🗺️ Roadmap

Where We're Going 🚀

🤝 Contributing

🌟 Contributors

Development Setup

📚 Documentation

📖 Usage Guide

🏗️ Architecture

🤝 Contributing

🌟 Why Use Code Context Recorder?

🎯 For Individual Developers

👥 For Teams

💬 Community

📄 License

🙏 Acknowledgments

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

About

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages