vibemon 1.5.0

package/shared/config.cjs

@@ -0,0 +1,64 @@
+/**
+ * Shared configuration for Vibe Monitor (CommonJS)
+ * App settings from constants.json
+ * Rendering data is in vibemon-engine-standalone.js
+ *
+ * Constants are in constants.cjs - re-exported here for convenience
+ */
+
+const path = require('path');
+const os = require('os');
+
+// Re-export all constants for backward compatibility
+const constants = require('./constants.cjs');
+
+// =============================================================================
+// WebSocket Configuration (from environment variables)
+// =============================================================================
+const WS_URL = process.env.VIBEMON_WS_URL || 'wss://ws.vibemon.io';
+const WS_TOKEN = process.env.VIBEMON_WS_TOKEN || null;
+
+// =============================================================================
+// Paths
+// =============================================================================
+const STATS_CACHE_PATH = path.join(os.homedir(), '.claude', 'stats-cache.json');
+
+// =============================================================================
+// State & Character Data (from constants.json)
+// =============================================================================
+
+// Directly from constants.json
+const {
+  VALID_STATES,
+  STATE_COLORS,
+  CHARACTER_NAMES,
+  CHARACTER_COLORS
+} = constants;
+
+// Derived CHARACTER_CONFIG for backward compatibility
+const CHARACTER_CONFIG = Object.fromEntries(
+  CHARACTER_NAMES.map(name => [name, {
+    name,
+    color: CHARACTER_COLORS[name]
+  }])
+);
+
+module.exports = {
+  // Re-export all constants
+  ...constants,
+
+  // Paths
+  STATS_CACHE_PATH,
+
+  // State data (from constants.json)
+  VALID_STATES,
+  STATE_COLORS,
+
+  // Character data (from constants.json)
+  CHARACTER_CONFIG,
+  CHARACTER_NAMES,
+
+  // WebSocket
+  WS_URL,
+  WS_TOKEN
+};

package/shared/constants.cjs

@@ -0,0 +1,8 @@
+/**
+ * Shared constants for Vibe Monitor (CommonJS)
+ * Loads from single source of truth: data/constants.json
+ */
+
+const constants = require('./data/constants.json');
+
+module.exports = constants;

package/shared/data/constants.json

@@ -0,0 +1,86 @@
+{
+  "HTTP_PORT": 19280,
+  "MAX_PAYLOAD_SIZE": 10240,
+
+  "WINDOW_WIDTH": 172,
+  "WINDOW_HEIGHT": 348,
+  "SNAP_THRESHOLD": 30,
+  "SNAP_DEBOUNCE": 150,
+  "WINDOW_GAP": 10,
+  "MAX_WINDOWS": 5,
+  "MAX_PROJECT_LIST": 10,
+
+  "IDLE_TIMEOUT": 60000,
+  "SLEEP_TIMEOUT": 300000,
+  "WINDOW_CLOSE_TIMEOUT": 600000,
+
+  "TRAY_ICON_SIZE": 22,
+
+  "DEFAULT_CHARACTER": "clawd",
+  "CHAR_SIZE": 128,
+  "SCALE": 2,
+
+  "COLOR_EYE": "#000000",
+  "COLOR_WHITE": "#FFFFFF",
+
+  "FLOAT_AMPLITUDE_X": 3,
+  "FLOAT_AMPLITUDE_Y": 5,
+  "CHAR_X_BASE": 22,
+  "CHAR_Y_BASE": 20,
+
+  "FRAME_INTERVAL": 100,
+  "FLOAT_CYCLE_FRAMES": 32,
+  "LOADING_DOT_COUNT": 4,
+  "THINKING_ANIMATION_SLOWDOWN": 3,
+  "BLINK_START_FRAME": 30,
+  "BLINK_END_FRAME": 31,
+
+  "PROJECT_NAME_MAX_LENGTH": 20,
+  "PROJECT_NAME_TRUNCATE_AT": 17,
+  "MODEL_NAME_MAX_LENGTH": 14,
+  "MODEL_NAME_TRUNCATE_AT": 11,
+
+  "MATRIX_STREAM_DENSITY": 0.7,
+  "MATRIX_SPEED_MIN": 1,
+  "MATRIX_SPEED_MAX": 6,
+  "MATRIX_COLUMN_WIDTH": 4,
+  "MATRIX_FLICKER_PERIOD": 3,
+  "MATRIX_TAIL_LENGTH_FAST": 8,
+  "MATRIX_TAIL_LENGTH_SLOW": 6,
+
+  "LOCK_MODES": {
+    "first-project": "First Project",
+    "on-thinking": "On Thinking"
+  },
+
+  "ALWAYS_ON_TOP_MODES": {
+    "active-only": "Active Only",
+    "all": "All Windows",
+    "disabled": "Disabled"
+  },
+
+  "ACTIVE_STATES": ["thinking", "planning", "working", "notification", "packing"],
+
+  "VALID_STATES": ["start", "idle", "thinking", "planning", "working", "packing", "notification", "sleep", "done"],
+
+  "CHARACTER_NAMES": ["apto", "clawd", "kiro", "claw"],
+
+  "CHARACTER_COLORS": {
+    "apto": "#797C98",
+    "clawd": "#D97757",
+    "kiro": "#FFFFFF",
+    "claw": "#DD4444"
+  },
+
+  "STATE_COLORS": {
+    "start": "#00CCCC",
+    "idle": "#00AA00",
+    "thinking": "#9933FF",
+    "planning": "#008888",
+    "working": "#0066CC",
+    "packing": "#AAAAAA",
+    "notification": "#FFCC00",
+    "sleep": "#111144",
+    "done": "#00AA00"
+  }
+}

package/stats.html

@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Claude Code Stats</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html, body {
+      background: transparent;
+      width: 640px;
+      height: 475px;
+      overflow: hidden;
+    }
+
+    body {
+      font-family: 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      color: #1C1917;
+    }
+
+    .window {
+      width: 640px;
+      height: 475px;
+      background: #FAF9F6;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+    }
+
+    .title-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 16px;
+      background: #D97706;
+      -webkit-app-region: drag;
+      cursor: grab;
+    }
+
+    .title-bar h1 {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: #FFFFFF;
+      margin: 0;
+    }
+
+    .close-btn {
+      -webkit-app-region: no-drag;
+      width: 20px;
+      height: 20px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.3);
+      color: #FFFFFF;
+      font-size: 14px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s;
+    }
+
+    .close-btn:hover {
+      background: rgba(255, 255, 255, 0.5);
+    }
+
+    .content {
+      padding: 12px 16px;
+      height: calc(475px - 40px);
+      overflow: hidden;
+    }
+
+    /* Summary Cards */
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+
+    .summary-card {
+      background: #FFFFFF;
+      border: 1px solid #E7E5E4;
+      border-radius: 8px;
+      padding: 8px 6px;
+      text-align: center;
+    }
+
+    .summary-card .value {
+      font-size: 1.1rem;
+      font-weight: 700;
+      margin-bottom: 2px;
+    }
+
+    .summary-card .label {
+      font-size: 0.6rem;
+      color: #78716C;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .summary-card.sessions .value { color: #D97706; }
+    .summary-card.messages .value { color: #9333EA; }
+    .summary-card.tools .value { color: #059669; }
+    .summary-card.tokens .value { color: #DC2626; }
+    .summary-card.days .value { color: #2563EB; }
+    .summary-card.longest .value { color: #EA580C; }
+
+    /* Contributions Graph */
+    .contributions-section {
+      background: #FFFFFF;
+      border: 1px solid #E7E5E4;
+      border-radius: 8px;
+      padding: 12px;
+      margin-bottom: 12px;
+    }
+
+    .contributions-section h2 {
+      font-size: 0.75rem;
+      margin-bottom: 8px;
+      color: #44403C;
+      font-weight: 600;
+    }
+
+    .contributions-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .contributions-graph {
+      display: flex;
+      gap: 2px;
+      overflow: hidden;
+    }
+
+    .contrib-week {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .contrib-day {
+      width: 9px;
+      height: 9px;
+      border-radius: 2px;
+      background: #EBEDF0;
+    }
+
+    .contrib-day.level-1 { background: #FED7AA; }
+    .contrib-day.level-2 { background: #FDBA74; }
+    .contrib-day.level-3 { background: #F97316; }
+    .contrib-day.level-4 { background: #C2410C; }
+
+    .contrib-legend {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 4px;
+      font-size: 0.65rem;
+      color: #78716C;
+    }
+
+    .contrib-legend span {
+      margin: 0 2px;
+    }
+
+    .legend-box {
+      width: 9px;
+      height: 9px;
+      border-radius: 2px;
+    }
+
+    /* Bottom Row */
+    .bottom-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      height: 180px;
+    }
+
+    .chart-section {
+      background: #FFFFFF;
+      border: 1px solid #E7E5E4;
+      border-radius: 8px;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .chart-section h2 {
+      font-size: 0.75rem;
+      margin-bottom: 8px;
+      color: #44403C;
+      font-weight: 600;
+    }
+
+    .chart-container {
+      flex: 1;
+      position: relative;
+      min-height: 0;
+    }
+
+    /* Model List */
+    .model-list {
+      font-size: 0.7rem;
+    }
+
+    .model-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 6px 0;
+      border-bottom: 1px solid #F5F5F4;
+    }
+
+    .model-item:last-child {
+      border-bottom: none;
+    }
+
+    .model-name {
+      color: #D97706;
+      font-weight: 600;
+    }
+
+    .model-tokens {
+      color: #78716C;
+    }
+
+    /* Hour Line Chart */
+    .hour-chart {
+      width: 100%;
+      height: 100%;
+    }
+
+    .hour-chart .line {
+      fill: none;
+      stroke: #D97706;
+      stroke-width: 1;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .hour-chart .area {
+      fill: url(#areaGradient);
+    }
+
+    .hour-chart .axis {
+      font-size: 9px;
+      fill: #A8A29E;
+    }
+
+    .hour-chart .grid {
+      stroke: #E7E5E4;
+      stroke-width: 1;
+    }
+
+    /* Loading & Error */
+    .loading, .error {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #78716C;
+    }
+
+    .error { color: #DC2626; }
+  </style>
+</head>
+<body>
+  <div class="window">
+    <div class="title-bar">
+      <h1>Claude Stats</h1>
+      <button class="close-btn" onclick="window.close()">×</button>
+    </div>
+    <div class="content">
+      <div id="content">
+        <div class="loading">Loading...</div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const COLORS = {
+      coral: '#D97706',
+      purple: '#9333EA',
+      green: '#059669',
+      red: '#DC2626',
+      blue: '#2563EB'
+    };
+
+    const formatNumber = (num) => {
+      if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+      if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+      return num.toLocaleString();
+    };
+
+    const formatDuration = (ms) => {
+      const hours = Math.floor(ms / 3600000);
+      const minutes = Math.floor((ms % 3600000) / 60000);
+      if (hours > 0) return `${hours}h ${minutes}m`;
+      return `${minutes}m`;
+    };
+
+    const getModelShortName = (model) => {
+      if (model.includes('opus')) return 'Opus 4.5';
+      if (model.includes('sonnet')) return 'Sonnet 4.5';
+      if (model.includes('haiku')) return 'Haiku';
+      return model.split('-').slice(1, 3).join(' ');
+    };
+
+    async function loadStats() {
+      try {
+        const response = await fetch('/stats/data');
+        if (!response.ok) throw new Error('Failed to load');
+        const data = await response.json();
+        renderStats(data);
+      } catch (error) {
+        document.getElementById('content').innerHTML = `<div class="error">Failed to load stats</div>`;
+      }
+    }
+
+    function renderStats(data) {
+      const { dailyActivity, modelUsage, totalSessions, totalMessages, longestSession, firstSessionDate, hourCounts } = data;
+
+      const totalToolCalls = dailyActivity.reduce((sum, d) => sum + d.toolCallCount, 0);
+      const totalTokens = Object.values(modelUsage || {}).reduce((sum, m) => sum + (m.inputTokens || 0) + (m.outputTokens || 0), 0);
+      const daysSinceStart = firstSessionDate ? Math.ceil((new Date() - new Date(firstSessionDate)) / 86400000) : 0;
+      const activeDays = dailyActivity?.length || 0;
+
+      document.getElementById('content').innerHTML = `
+        <div class="summary-grid">
+          <div class="summary-card sessions">
+            <div class="value">${formatNumber(totalSessions || 0)}</div>
+            <div class="label">Sessions</div>
+          </div>
+          <div class="summary-card messages">
+            <div class="value">${formatNumber(totalMessages || 0)}</div>
+            <div class="label">Messages</div>
+          </div>
+          <div class="summary-card tools">
+            <div class="value">${formatNumber(totalToolCalls)}</div>
+            <div class="label">Tools</div>
+          </div>
+          <div class="summary-card tokens">
+            <div class="value">${formatNumber(totalTokens)}</div>
+            <div class="label">Tokens</div>
+          </div>
+          <div class="summary-card days">
+            <div class="value">${activeDays}</div>
+            <div class="label">Days</div>
+          </div>
+          <div class="summary-card longest">
+            <div class="value">${longestSession ? formatDuration(longestSession.duration) : '-'}</div>
+            <div class="label">Longest</div>
+          </div>
+        </div>
+
+        <div class="contributions-section">
+          <h2>Activity</h2>
+          <div class="contributions-wrapper">
+            <div class="contributions-graph" id="contribGraph"></div>
+            <div class="contrib-legend">
+              <span>Less</span>
+              <div class="legend-box" style="background:#EBEDF0"></div>
+              <div class="legend-box" style="background:#FED7AA"></div>
+              <div class="legend-box" style="background:#FDBA74"></div>
+              <div class="legend-box" style="background:#F97316"></div>
+              <div class="legend-box" style="background:#C2410C"></div>
+              <span>More</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="bottom-row">
+          <div class="chart-section">
+            <h2>By Hour</h2>
+            <div class="chart-container" id="hourChart"></div>
+          </div>
+          <div class="chart-section">
+            <h2>Models</h2>
+            <div class="model-list" id="modelList"></div>
+          </div>
+        </div>
+      `;
+
+      renderContributions(dailyActivity || []);
+      renderHourBars(hourCounts || {});
+      renderModelList(modelUsage || {});
+    }
+
+    function renderContributions(dailyActivity) {
+      const container = document.getElementById('contribGraph');
+
+      // Create activity map
+      const activityMap = {};
+      let maxActivity = 0;
+      dailyActivity.forEach(d => {
+        activityMap[d.date] = d.messageCount;
+        if (d.messageCount > maxActivity) maxActivity = d.messageCount;
+      });
+
+      // Generate last 52 weeks (364 days)
+      const today = new Date();
+      const weeks = [];
+
+      // Find the start of the week grid (going back ~52 weeks, starting from Sunday)
+      const startDate = new Date(today);
+      startDate.setDate(startDate.getDate() - 363);
+      // Adjust to previous Sunday
+      startDate.setDate(startDate.getDate() - startDate.getDay());
+
+      let currentDate = new Date(startDate);
+
+      for (let w = 0; w < 52; w++) {
+        const week = [];
+        for (let d = 0; d < 7; d++) {
+          const dateStr = currentDate.toISOString().split('T')[0];
+          const activity = activityMap[dateStr] || 0;
+          let level = 0;
+          if (activity > 0) {
+            const ratio = activity / maxActivity;
+            if (ratio > 0.75) level = 4;
+            else if (ratio > 0.5) level = 3;
+            else if (ratio > 0.25) level = 2;
+            else level = 1;
+          }
+          week.push({ date: dateStr, level, activity });
+          currentDate.setDate(currentDate.getDate() + 1);
+        }
+        weeks.push(week);
+      }
+
+      container.innerHTML = weeks.map(week => `
+        <div class="contrib-week">
+          ${week.map(day => `
+            <div class="contrib-day level-${day.level}" title="${day.date}: ${day.activity} messages"></div>
+          `).join('')}
+        </div>
+      `).join('');
+    }
+
+    function renderHourBars(hourCounts) {
+      const container = document.getElementById('hourChart');
+      const hours = Array.from({ length: 24 }, (_, i) => i);
+      const counts = hours.map(h => hourCounts[h] || 0);
+      const maxCount = Math.max(...counts, 1);
+
+      const width = 280;
+      const height = 140;
+      const padding = { top: 10, right: 10, bottom: 20, left: 25 };
+      const chartW = width - padding.left - padding.right;
+      const chartH = height - padding.top - padding.bottom;
+
+      // Generate points
+      const points = hours.map((h, i) => {
+        const x = padding.left + (i / 23) * chartW;
+        const y = padding.top + chartH - (counts[i] / maxCount) * chartH;
+        return { x, y, h, count: counts[i] };
+      });
+
+      // Create smooth curve path using cubic bezier
+      const tension = 0.15;
+      const maxY = padding.top + chartH; // bottom limit (y increases downward)
+      const clampY = (y) => Math.min(y, maxY);
+      let linePath = `M ${points[0].x} ${points[0].y}`;
+      for (let i = 1; i < points.length; i++) {
+        const p0 = points[i - 2] || points[0];
+        const p1 = points[i - 1];
+        const p2 = points[i];
+        const p3 = points[i + 1] || points[points.length - 1];
+        const cp1x = p1.x + (p2.x - p0.x) * tension;
+        const cp1y = clampY(p1.y + (p2.y - p0.y) * tension);
+        const cp2x = p2.x - (p3.x - p1.x) * tension;
+        const cp2y = clampY(p2.y - (p3.y - p1.y) * tension);
+        linePath += ` C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${p2.x} ${p2.y}`;
+      }
+      const areaPath = linePath + ` L ${points[23].x} ${padding.top + chartH} L ${padding.left} ${padding.top + chartH} Z`;
+
+      container.innerHTML = `
+        <svg class="hour-chart" viewBox="0 0 ${width} ${height}">
+          <defs>
+            <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#D97706" stop-opacity="0.3"/>
+              <stop offset="100%" stop-color="#D97706" stop-opacity="0.05"/>
+            </linearGradient>
+          </defs>
+          <path class="area" d="${areaPath}"/>
+          <path class="line" d="${linePath}"/>
+          ${[0, 6, 12, 18].map(h => {
+            const x = padding.left + (h / 23) * chartW;
+            return `<text class="axis" x="${x}" y="${height - 5}" text-anchor="middle">${h}</text>`;
+          }).join('')}
+          <text class="axis" x="${width - padding.right}" y="${height - 5}" text-anchor="end">23</text>
+        </svg>
+      `;
+    }
+
+    function renderModelList(modelUsage) {
+      const container = document.getElementById('modelList');
+      const entries = Object.entries(modelUsage);
+
+      container.innerHTML = entries.map(([model, usage]) => {
+        const total = (usage.inputTokens || 0) + (usage.outputTokens || 0);
+        return `
+          <div class="model-item">
+            <span class="model-name">${getModelShortName(model)}</span>
+            <span class="model-tokens">${formatNumber(total)} tokens</span>
+          </div>
+        `;
+      }).join('');
+    }
+
+    loadStats();
+  </script>
+</body>
+</html>