💧 Hydra Buddy

Your friendly animated hydration companion inside VS Code. Stay healthy, stay hydrated — without leaving your code!

✨ Features

🎭 Animated Companion

• Drippy — a cute water droplet character lives in your editor panel
• Idle bounce animation keeps the panel feeling alive
• Blinks every few seconds with natural timing variation
• Waves occasionally to get your attention
• Walks in when it's time to remind you
• Celebrates with confetti when you log water

💧 Smart Water Reminders

• Configurable reminder intervals: 30, 45, 60, 90, or 120 minutes
• Glassmorphism speech bubble appears with friendly dialogue
• Click "Yes I did!" → celebration animation + confetti 🎉
• Click "Later" → snoozed for 10 minutes with a friendly message
• Maximum one reminder per 10 minutes (never annoying)
• Concerned dialogue if you've been ignoring reminders

🎭 Mood System

📊 Daily Statistics

• Today's glass count with visual progress bar
• 🔥 Day streak tracker
• 🏆 All-time total
• 📅 Longest streak ever
• ⏱ Last drink timestamp
• 🔔 Total reminders shown

🎨 Status Bar

The status bar always shows your current progress:

💧 Water: 3/8 → 🫗 Water: 0/8 (empty)
🌊 Water: 6/8 (almost there)
🏆 Water: 8/8 (goal achieved!)

Click it to open the dashboard.

⚙️ Settings

All settings are configurable via VS Code's Settings UI (Ctrl+, → search "Hydra Buddy"):

🚀 Installation

From VSIX (Local)

1. Clone the repository:

   git clone https://github.com/your-org/hydra-buddy
   cd hydra-buddy
   

2. Install dependencies:

   npm install
   

3. Compile TypeScript:

   npm run compile
   

4. Package the extension:

   npm run package
   

5. Install the .vsix file:

   • Open VS Code
   • Press Ctrl+Shift+P → Extensions: Install from VSIX...
   • Select the generated .vsix file

Development Mode (F5)

1. Open the project in VS Code
2. Press F5 to launch the Extension Development Host
3. Hydra Buddy will automatically activate

🎮 Commands

Open the Command Palette (Ctrl+Shift+P) and search for "Hydra Buddy":

🏗️ Architecture

src/
├── extension.ts              # Entry point
├── commands/                 # One file per command (SRP)
│   ├── drinkWater.ts
│   ├── snooze.ts
│   ├── openDashboard.ts
│   ├── resetStats.ts
│   └── changeCharacter.ts
├── storage/                  # Persistence layer
│   ├── StateManager.ts       # VS Code GlobalState wrapper
│   └── types.ts              # Shared interfaces & defaults
├── characters/               # Character system (OCP)
│   ├── BaseCharacter.ts      # Interface contract
│   ├── WaterDroplet.ts       # Drippy — default character
│   └── CharacterRegistry.ts  # Singleton registry
├── webview/                  # WebView panels
│   ├── CompanionPanel.ts     # Animated companion
│   ├── DashboardPanel.ts     # Statistics view
│   └── WebviewMessageHandler.ts  # Type-safe message bus
└── utils/
    ├── ReminderScheduler.ts  # Timer management
    ├── StatusBarManager.ts   # Status bar item
    └── logger.ts             # Debug logger

Adding a New Character

1. Create src/characters/YourCharacter.ts implementing BaseCharacter:

   export class Cat implements BaseCharacter {
     readonly id = 'cat';
     readonly name = 'Whiskers';
     // ... implement all interface methods
   }
   

2. Register it in CharacterRegistry.ts:

   this.register(new Cat());
   

3. Add it to the characterId enum in package.json.

That's it — no other changes needed! ✅

🎨 Design Principles

• Pure CSS animations — all animations use transform and opacity for GPU-composited 60fps rendering
• No React, no Electron — lightweight HTML/CSS/SVG inside VS Code's native WebView API
• Glassmorphism — speech bubble uses backdrop-filter: blur() for a premium feel
• VS Code native — uses --vscode-* CSS variables for automatic light/dark theme support
• SOLID principles — Single Responsibility (commands), Open/Closed (characters), Dependency Inversion (message handler)

🔧 Development

# Install dependencies
npm install

# Compile TypeScript (watch mode)
npm run watch

# Compile once
npm run compile

# Lint
npm run lint

# Package
npm run package

Debugging

1. Open the project in VS Code
2. Press F5 → Extension Development Host opens
3. Use Developer Tools (Ctrl+Shift+I in the Extension Host) to inspect the WebView

Set HYDRA_DEBUG=true in your environment to enable verbose logging.

📝 License

MIT — see LICENSE