vibemon 1.5.0

package/README.md

@@ -0,0 +1,40 @@
+# VibeMon
+
+[![npm version](https://img.shields.io/npm/v/vibemon.svg)](https://www.npmjs.com/package/vibemon)
+[![npm downloads](https://img.shields.io/npm/dm/vibemon.svg)](https://www.npmjs.com/package/vibemon)
+[![license](https://img.shields.io/npm/l/vibemon.svg)](https://github.com/nalbam/vibemon-app/blob/main/LICENSE)
+
+**Real-time status monitor for AI assistants with pixel art character display.**
+
+See at a glance what your AI assistant is doing — thinking, working, or waiting for input. A cute pixel art character visually represents the current state.
+
+![Demo](https://raw.githubusercontent.com/nalbam/vibemon-app/main/screenshots/demo.gif)
+
+## Supported Tools
+
+- **[Claude Code](https://claude.ai/code)** - Anthropic's AI coding assistant
+- **[Kiro](https://kiro.dev/)** - AWS's AI coding assistant
+- **[OpenClaw](https://openclaw.ai/)** - Open-source computer use agent
+
+## Features
+
+- **Frameless Window** - Clean floating design
+- **Always on Top** - Always displayed above other windows
+- **System Tray** - Quick control from the menu bar
+- **Multi-window** - One window per project (up to 5)
+- **HTTP API** - Easy integration with hooks
+- **Auto-launch** - Hook scripts auto-start via `npx vibemon`
+
+## Documentation
+
+For installation and setup instructions, visit **[vibemon.io/docs](https://vibemon.io/docs)**.
+
+## Links
+
+- [Homepage](https://nalbam.github.io/vibemon-app/)
+- [GitHub Repository](https://github.com/nalbam/vibemon-app)
+- [Full Documentation](https://github.com/nalbam/vibemon-app#readme)
+
+## License
+
+MIT

package/assets/generators/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/generators/icon-generator.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>VibeMon 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>VibeMon 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,16 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+const electron = require('electron');
+const appPath = path.join(__dirname, '..');
+
+const child = spawn(electron, [appPath], {
+  detached: true,
+  stdio: 'ignore'
+});
+
+child.unref();
+
+console.log('VibeMon started (http://127.0.0.1:19280)');

package/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VibeMon</title>
+  <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>
+    </div>
+    <span class="title-text" id="title-text">VibeMon</span>
+    <div style="width: 20px;"></div>
+  </div>
+
+  <!-- Display -->
+  <div class="device-frame">
+    <div class="vibemon-display" id="vibemon-display"></div>
+  </div>
+
+  <script type="module" src="renderer.js"></script>
+</body>
+</html>