vibe-monitor 1.0.0

package/README.md

@@ -0,0 +1,281 @@
+# Vibe Monitor Desktop App
+
+Electron-based desktop app for real-time monitoring of AI coding assistants (Claude Code, Kiro IDE/CLI) with pixel art character.
+
+## Features
+
+- **Frameless Window**: Clean floating design
+- **Always on Top**: Always displayed above other windows
+- **System Tray**: Quick control from the menu bar
+- **HTTP API**: Easy integration with IDE hooks (Claude Code, Kiro)
+- **Draggable**: Move the window to any position
+
+## Installation
+
+```bash
+cd desktop
+npm install
+```
+
+## Usage
+
+### Run the App
+
+```bash
+npm start
+```
+
+### Update Status via HTTP API
+
+```bash
+# Change to working state
+curl -X POST http://127.0.0.1:19280/status \
+  -H "Content-Type: application/json" \
+  -d '{"state":"working","tool":"Bash","project":"my-project","model":"opus","memory":"45%"}'
+
+# Check current status
+curl http://127.0.0.1:19280/status
+```
+
+### IDE Hooks Integration
+
+#### Claude Code
+
+Uses `hooks/vibe-monitor.sh` - see [main README](../README.md#claude-code-setup) for setup.
+
+#### Kiro IDE
+
+Copy hook files to `~/.kiro/hooks/` (or your project's `.kiro/hooks/` folder):
+
+```bash
+# Global installation (recommended)
+mkdir -p ~/.kiro/hooks
+cp config/kiro/hooks/*.kiro.hook ~/.kiro/hooks/
+
+# Or project-level installation
+# cp config/kiro/hooks/*.kiro.hook your-project/.kiro/hooks/
+```
+
+**Hook files:**
+- `vibe-monitor-agent-spawn.kiro.hook` - Sends `start` on `agentSpawn`
+- `vibe-monitor-prompt-submit.kiro.hook` - Sends `working` on `promptSubmit`
+- `vibe-monitor-pre-tool-use.kiro.hook` - Sends `working` on `preToolUse`
+- `vibe-monitor-agent-stop.kiro.hook` - Sends `idle` on `agentStop`
+
+## Supported IDEs
+
+| IDE | Hook System | Status |
+|-----|-------------|--------|
+| **Claude Code** | Shell hooks via `settings.json` | ✅ Supported |
+| **Kiro IDE** | `.kiro.hook` files in `.kiro/hooks/` | ✅ Supported |
+
+## States & Characters
+
+See [main README](../README.md#state-display) for details on states, animations, and characters.
+
+## API
+
+### POST /status
+
+Update status
+
+```json
+{
+  "state": "working",
+  "event": "PreToolUse",
+  "tool": "Bash",
+  "project": "vibe-monitor",
+  "model": "opus",
+  "memory": "45%",
+  "character": "clawd"
+}
+```
+
+### GET /status
+
+Get current status
+
+```json
+{
+  "state": "working",
+  "project": "vibe-monitor",
+  "tool": "Bash",
+  "model": "opus",
+  "memory": "45%"
+}
+```
+
+### GET /health
+
+Health check endpoint
+
+```json
+{
+  "status": "ok"
+}
+```
+
+### POST /show
+
+Show window and position to top-right corner
+
+```json
+{
+  "success": true
+}
+```
+
+### GET /debug
+
+Get display and window debug information (useful for troubleshooting positioning issues)
+
+```json
+{
+  "primaryDisplay": {
+    "bounds": { "x": 0, "y": 0, "width": 1920, "height": 1080 },
+    "workArea": { "x": 0, "y": 0, "width": 1920, "height": 1040 },
+    "scaleFactor": 1
+  },
+  "window": { "x": 1748, "y": 0, "width": 172, "height": 348 },
+  "platform": "darwin"
+}
+```
+
+## WSL (Windows Subsystem for Linux)
+
+Running the Electron app on WSL requires WSLg (Windows 11) and additional dependencies.
+
+### Prerequisites
+
+1. **Windows 11** with WSLg support
+2. **Update WSL**:
+   ```bash
+   wsl --update
+   ```
+
+### Install Dependencies
+
+Electron requires several system libraries that are not installed by default on WSL:
+
+```bash
+# Ubuntu 24.04 (Noble) or later
+sudo apt-get update && sudo apt-get install -y \
+  libasound2t64 \
+  libatk1.0-0 \
+  libatk-bridge2.0-0 \
+  libcups2 \
+  libdrm2 \
+  libgbm1 \
+  libgtk-3-0 \
+  libnss3 \
+  libxcomposite1 \
+  libxdamage1 \
+  libxfixes3 \
+  libxkbcommon0 \
+  libxrandr2 \
+  libxshmfence1 \
+  libglu1-mesa
+
+# Ubuntu 22.04 (Jammy) or earlier
+sudo apt-get update && sudo apt-get install -y \
+  libasound2 \
+  libatk1.0-0 \
+  libatk-bridge2.0-0 \
+  libcups2 \
+  libdrm2 \
+  libgbm1 \
+  libgtk-3-0 \
+  libnss3 \
+  libxcomposite1 \
+  libxdamage1 \
+  libxfixes3 \
+  libxkbcommon0 \
+  libxrandr2
+```
+
+### Run
+
+```bash
+cd desktop
+npm install
+npm start
+```
+
+### Troubleshooting
+
+**Error: `libasound.so.2: cannot open shared object file`**
+
+Install the audio library:
+```bash
+# Ubuntu 24.04+
+sudo apt-get install -y libasound2t64
+
+# Ubuntu 22.04 or earlier
+sudo apt-get install -y libasound2
+```
+
+**GPU process errors (can be ignored)**
+
+WSL may show GPU-related warnings like:
+```
+Exiting GPU process due to errors during initialization
+```
+These warnings don't affect app functionality.
+
+**Window not appearing**
+
+Ensure WSLg is working:
+```bash
+# Test with a simple GUI app
+sudo apt-get install -y x11-apps
+xclock
+```
+
+If xclock doesn't appear, WSLg may need to be enabled or updated.
+
+## Build
+
+Build for macOS:
+
+```bash
+npm run build:mac
+```
+
+Build DMG only:
+
+```bash
+npm run build:dmg
+```
+
+Build for Windows:
+
+```bash
+npm run build:win
+```
+
+Build for Linux:
+
+```bash
+npm run build:linux
+```
+
+Build for all platforms:
+
+```bash
+npm run build:all
+```
+
+## Tray Menu
+
+Click the system tray icon to:
+- Check current status
+- Manually change status
+- Toggle Always on Top
+- Show/Hide window
+- Quit
+
+## Port
+
+Default HTTP server port: `19280`
+
+(Can be changed via `HTTP_PORT` constant in main.js)

package/assets/generate-icons.js

@@ -0,0 +1,86 @@
+const { createCanvas } = require('canvas');
+const fs = require('fs');
+const path = require('path');
+
+const COLOR_CLAUDE = '#D97757';
+const COLOR_EYE = '#000000';
+const COLOR_BG = '#FFCC00';
+
+function drawIcon(size) {
+  const canvas = createCanvas(size, size);
+  const ctx = canvas.getContext('2d');
+  const scale = size / 64;
+
+  function rect(x, y, w, h, color) {
+    ctx.fillStyle = color;
+    ctx.fillRect(x * scale, y * scale, w * scale, h * scale);
+  }
+
+  // Round rectangle background
+  const radius = size * 0.15;
+  ctx.fillStyle = COLOR_BG;
+  ctx.beginPath();
+  ctx.roundRect(0, 0, size, size, radius);
+  ctx.fill();
+
+  // Character positioning
+  const offsetX = 0;
+  const offsetY = 4;
+
+  // Main body (52x36)
+  rect(6 + offsetX, 8 + offsetY, 52, 36, COLOR_CLAUDE);
+
+  // Arms (6x10)
+  rect(0 + offsetX, 22 + offsetY, 6, 10, COLOR_CLAUDE);
+  rect(58 + offsetX, 22 + offsetY, 6, 10, COLOR_CLAUDE);
+
+  // Legs (4 legs)
+  rect(10 + offsetX, 44 + offsetY, 6, 12, COLOR_CLAUDE);
+  rect(18 + offsetX, 44 + offsetY, 6, 12, COLOR_CLAUDE);
+  rect(40 + offsetX, 44 + offsetY, 6, 12, COLOR_CLAUDE);
+  rect(48 + offsetX, 44 + offsetY, 6, 12, COLOR_CLAUDE);
+
+  // Alert eyes (round)
+  const leftX = 14 + offsetX;
+  const rightX = 44 + offsetX;
+  const eyeY = 22 + offsetY;
+
+  // Left eye
+  rect(leftX + 1, eyeY, 4, 6, COLOR_EYE);
+  rect(leftX, eyeY + 1, 6, 4, COLOR_EYE);
+
+  // Right eye
+  rect(rightX + 1, eyeY, 4, 6, COLOR_EYE);
+  rect(rightX, eyeY + 1, 6, 4, COLOR_EYE);
+
+  // Question mark
+  const qx = 50 + offsetX;
+  const qy = 2 + offsetY;
+  rect(qx + 1, qy, 4, 2, COLOR_EYE);
+  rect(qx + 4, qy + 2, 2, 2, COLOR_EYE);
+  rect(qx + 2, qy + 4, 2, 2, COLOR_EYE);
+  rect(qx + 2, qy + 6, 2, 2, COLOR_EYE);
+  rect(qx + 2, qy + 10, 2, 2, COLOR_EYE);
+
+  return canvas;
+}
+
+// Generate icons
+const sizes = [512, 256, 128, 64, 32, 16];
+const assetsDir = __dirname;
+
+console.log('Generating icons...');
+
+sizes.forEach(size => {
+  const canvas = drawIcon(size);
+  const filename = size === 512 ? 'icon.png' : `icon-${size}.png`;
+  const filepath = path.join(assetsDir, filename);
+  const buffer = canvas.toBuffer('image/png');
+  fs.writeFileSync(filepath, buffer);
+  console.log(`Created: ${filename} (${size}x${size})`);
+});
+
+console.log('\nDone! PNG files created.');
+console.log('\nNext steps:');
+console.log('1. For Windows (.ico): convert icon-256.png icon-128.png icon-64.png icon-32.png icon-16.png icon.ico');
+console.log('2. For macOS (.icns): See instructions in icon-generator.html');

package/assets/icon-generator.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Vibe Monitor Icon Generator</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #1a1a2e;
+      color: white;
+      padding: 40px;
+      text-align: center;
+    }
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 40px;
+      margin-top: 30px;
+    }
+    .icon-box {
+      background: #2d2d2d;
+      padding: 20px;
+      border-radius: 12px;
+    }
+    .icon-box h3 {
+      margin: 0 0 15px 0;
+      font-size: 14px;
+      color: #888;
+    }
+    canvas {
+      display: block;
+      margin: 0 auto 15px;
+      border-radius: 8px;
+    }
+    button {
+      background: #D97757;
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      margin: 5px;
+    }
+    button:hover {
+      background: #c86a2f;
+    }
+    .info {
+      max-width: 600px;
+      margin: 30px auto;
+      text-align: left;
+      background: #2d2d2d;
+      padding: 20px;
+      border-radius: 12px;
+    }
+    .info h2 {
+      margin-top: 0;
+      color: #D97757;
+    }
+    .info code {
+      background: #1a1a1a;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+    .info pre {
+      background: #1a1a1a;
+      padding: 10px;
+      border-radius: 6px;
+      overflow-x: auto;
+    }
+  </style>
+</head>
+<body>
+  <h1>Vibe Monitor Icon Generator</h1>
+  <p>Notification character icons for desktop app</p>
+
+  <div class="container">
+    <div class="icon-box">
+      <h3>512x512 (Linux)</h3>
+      <canvas id="icon512" width="512" height="512"></canvas>
+      <button onclick="download('icon512', 'icon.png')">Download PNG</button>
+    </div>
+    <div class="icon-box">
+      <h3>256x256 (Windows)</h3>
+      <canvas id="icon256" width="256" height="256"></canvas>
+      <button onclick="download('icon256', 'icon-256.png')">Download PNG</button>
+    </div>
+    <div class="icon-box">
+      <h3>128x128</h3>
+      <canvas id="icon128" width="128" height="128"></canvas>
+      <button onclick="download('icon128', 'icon-128.png')">Download PNG</button>
+    </div>
+    <div class="icon-box">
+      <h3>64x64</h3>
+      <canvas id="icon64" width="64" height="64"></canvas>
+      <button onclick="download('icon64', 'icon-64.png')">Download PNG</button>
+    </div>
+    <div class="icon-box">
+      <h3>32x32</h3>
+      <canvas id="icon32" width="32" height="32"></canvas>
+      <button onclick="download('icon32', 'icon-32.png')">Download PNG</button>
+    </div>
+    <div class="icon-box">
+      <h3>16x16</h3>
+      <canvas id="icon16" width="16" height="16"></canvas>
+      <button onclick="download('icon16', 'icon-16.png')">Download PNG</button>
+    </div>
+  </div>
+
+  <div class="info">
+    <h2>How to Create Icon Files</h2>
+    <p><strong>1. Download the PNG files</strong></p>
+    <p><strong>2. For Windows (.ico):</strong></p>
+    <pre>brew install imagemagick
+convert icon-256.png icon-128.png icon-64.png icon-32.png icon-16.png icon.ico</pre>
+
+    <p><strong>3. For macOS (.icns):</strong></p>
+    <pre>mkdir icon.iconset
+cp icon.png icon.iconset/icon_512x512.png
+sips -z 256 256 icon.png --out icon.iconset/icon_256x256.png
+sips -z 128 128 icon.png --out icon.iconset/icon_128x128.png
+sips -z 64 64 icon.png --out icon.iconset/icon_64x64.png
+sips -z 32 32 icon.png --out icon.iconset/icon_32x32.png
+sips -z 16 16 icon.png --out icon.iconset/icon_16x16.png
+iconutil -c icns icon.iconset</pre>
+
+    <p><strong>4. Place files in <code>desktop/assets/</code>:</strong></p>
+    <ul>
+      <li><code>icon.png</code> - 512x512 for Linux</li>
+      <li><code>icon.ico</code> - for Windows</li>
+      <li><code>icon.icns</code> - for macOS</li>
+    </ul>
+  </div>
+
+  <script>
+    const COLOR_CLAUDE = '#D97757';
+    const COLOR_EYE = '#000000';
+
+    // Base design is 64x64, scale up for larger sizes
+    function drawIcon(canvasId, size) {
+      const canvas = document.getElementById(canvasId);
+      const ctx = canvas.getContext('2d');
+      const scale = size / 64;
+
+      function rect(x, y, w, h, color) {
+        ctx.fillStyle = color;
+        ctx.fillRect(x * scale, y * scale, w * scale, h * scale);
+      }
+
+      // Clear with transparent background
+      ctx.clearRect(0, 0, size, size);
+
+      // Round rectangle background (optional - for rounded icon look)
+      const radius = size * 0.15;
+      ctx.fillStyle = '#FFCC00';
+      ctx.beginPath();
+      ctx.roundRect(0, 0, size, size, radius);
+      ctx.fill();
+
+      // Character body - centered in 64x64 space
+      // Original positions adjusted for centering
+      const offsetX = 0;
+      const offsetY = 4;
+
+      // Main body (52x36 at position 6,8)
+      rect(6 + offsetX, 8 + offsetY, 52, 36, COLOR_CLAUDE);
+
+      // Arms (6x10)
+      rect(0 + offsetX, 22 + offsetY, 6, 10, COLOR_CLAUDE);    // Left
+      rect(58 + offsetX, 22 + offsetY, 6, 10, COLOR_CLAUDE);   // Right
+
+      // Legs (4 legs)
+      rect(10 + offsetX, 44 + offsetY, 6, 12, COLOR_CLAUDE);   // Left outer
+      rect(18 + offsetX, 44 + offsetY, 6, 12, COLOR_CLAUDE);   // Left inner
+      rect(40 + offsetX, 44 + offsetY, 6, 12, COLOR_CLAUDE);   // Right inner
+      rect(48 + offsetX, 44 + offsetY, 6, 12, COLOR_CLAUDE);   // Right outer
+
+      // Alert eyes (round)
+      const leftX = 14 + offsetX;
+      const rightX = 44 + offsetX;
+      const eyeY = 22 + offsetY;
+
+      // Left eye (circle approximation)
+      rect(leftX + 1, eyeY, 4, 6, COLOR_EYE);
+      rect(leftX, eyeY + 1, 6, 4, COLOR_EYE);
+
+      // Right eye (circle approximation)
+      rect(rightX + 1, eyeY, 4, 6, COLOR_EYE);
+      rect(rightX, eyeY + 1, 6, 4, COLOR_EYE);
+
+      // Question mark above head
+      const qx = 50 + offsetX;
+      const qy = 2 + offsetY;
+      rect(qx + 1, qy, 4, 2, COLOR_EYE);        // Top curve
+      rect(qx + 4, qy + 2, 2, 2, COLOR_EYE);    // Right side
+      rect(qx + 2, qy + 4, 2, 2, COLOR_EYE);    // Middle
+      rect(qx + 2, qy + 6, 2, 2, COLOR_EYE);    // Lower middle
+      rect(qx + 2, qy + 10, 2, 2, COLOR_EYE);   // Dot
+    }
+
+    function download(canvasId, filename) {
+      const canvas = document.getElementById(canvasId);
+      const link = document.createElement('a');
+      link.download = filename;
+      link.href = canvas.toDataURL('image/png');
+      link.click();
+    }
+
+    // Draw all icons
+    window.onload = function() {
+      drawIcon('icon512', 512);
+      drawIcon('icon256', 256);
+      drawIcon('icon128', 128);
+      drawIcon('icon64', 64);
+      drawIcon('icon32', 32);
+      drawIcon('icon16', 16);
+    };
+  </script>
+</body>
+</html>

package/bin/cli.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+const electron = require('electron');
+const appPath = path.join(__dirname, '..');
+
+spawn(electron, [appPath], {
+  stdio: 'inherit'
+});

package/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vibe Monitor</title>
+  <link rel="stylesheet" href="../shared/styles.css">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- Draggable Title Bar -->
+  <div class="title-bar">
+    <div class="title-bar-buttons">
+      <button class="title-bar-btn btn-close" onclick="window.electronAPI.closeWindow()"></button>
+      <button class="title-bar-btn btn-minimize" onclick="window.electronAPI.minimizeWindow()"></button>
+    </div>
+    <span class="title-text">VibeMon</span>
+    <div style="width: 20px;"></div>
+  </div>
+
+  <!-- Display -->
+  <div class="device-frame">
+    <div class="display" id="display">
+      <canvas id="character-canvas" width="128" height="128"></canvas>
+      <div class="status-text" id="status-text">Ready</div>
+      <div class="loading-dots" id="loading-dots">
+        <div class="dot dim"></div>
+        <div class="dot dim"></div>
+        <div class="dot dim"></div>
+        <div class="dot dim"></div>
+      </div>
+      <div class="info-text project-text">
+        <span class="info-label"><span class="emoji-icon">📂 </span><canvas class="pixel-icon" id="icon-project" width="8" height="8"></canvas></span>
+        <span class="info-value" id="project-value">-</span>
+      </div>
+      <div class="info-text tool-text" id="tool-line">
+        <span class="info-label"><span class="emoji-icon">🛠️ </span><canvas class="pixel-icon" id="icon-tool" width="8" height="8"></canvas></span>
+        <span class="info-value" id="tool-value">-</span>
+      </div>
+      <div class="info-text model-text" id="model-line">
+        <span class="info-label"><span class="emoji-icon">🤖 </span><canvas class="pixel-icon" id="icon-model" width="8" height="8"></canvas></span>
+        <span class="info-value" id="model-value">-</span>
+      </div>
+      <div class="info-text memory-text" id="memory-line">
+        <span class="info-label"><span class="emoji-icon">🧠 </span><canvas class="pixel-icon" id="icon-memory" width="8" height="8"></canvas></span>
+        <span class="info-value" id="memory-value">-</span>
+      </div>
+      <div class="memory-bar-container" id="memory-bar-container">
+        <div class="memory-bar" id="memory-bar"></div>
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="renderer.js"></script>
+</body>
+</html>