vibe-monitor 1.0.0

package/renderer.js

@@ -0,0 +1,222 @@
+import {
+  states, CHARACTER_CONFIG, DEFAULT_CHARACTER,
+  CHAR_X_BASE, CHAR_Y_BASE, SLEEP_TIMEOUT,
+  FRAME_INTERVAL, LOADING_DOT_COUNT, THINKING_ANIMATION_SLOWDOWN,
+  BLINK_START_FRAME, BLINK_END_FRAME,
+  PROJECT_NAME_MAX_LENGTH, PROJECT_NAME_TRUNCATE_AT,
+  MODEL_NAME_MAX_LENGTH, MODEL_NAME_TRUNCATE_AT
+} from '../shared/config.js';
+import { getThinkingText, getWorkingText, updateMemoryBar } from '../shared/utils.js';
+import { initRenderer, drawCharacter } from '../shared/character.js';
+import { drawInfoIcons } from '../shared/icons.js';
+import { getFloatOffsetX, getFloatOffsetY, needsAnimationRedraw } from '../shared/animation.js';
+
+// Platform detection: macOS uses emoji, Windows/Linux uses pixel art
+const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+const useEmoji = isMac;
+
+// Animation timing
+let lastFrameTime = 0;
+
+// Current state
+let currentState = 'idle';
+let currentCharacter = 'clawd';
+let currentProject = '-';
+let currentTool = '-';
+let currentModel = '-';
+let currentMemory = '-';
+let animFrame = 0;
+let blinkFrame = 0;
+let lastActivityTime = Date.now();
+
+// Canvas
+let canvas, ctx;
+
+// Cached DOM elements (initialized once in init())
+let domCache = null;
+
+// Initialize DOM cache
+function initDomCache() {
+  domCache = {
+    display: document.getElementById('display'),
+    statusText: document.getElementById('status-text'),
+    loadingDots: document.getElementById('loading-dots'),
+    toolLine: document.getElementById('tool-line'),
+    modelLine: document.getElementById('model-line'),
+    memoryLine: document.getElementById('memory-line'),
+    projectValue: document.getElementById('project-value'),
+    toolValue: document.getElementById('tool-value'),
+    modelValue: document.getElementById('model-value'),
+    memoryValue: document.getElementById('memory-value'),
+    infoTexts: document.querySelectorAll('.info-text'),
+    infoLabels: document.querySelectorAll('.info-label'),
+    infoValues: document.querySelectorAll('.info-value'),
+    dots: document.querySelectorAll('.dot')
+  };
+}
+
+// Update canvas position for floating effect
+function updateFloatingPosition() {
+  const offsetX = getFloatOffsetX(animFrame);
+  const offsetY = getFloatOffsetY(animFrame);
+  canvas.style.left = (CHAR_X_BASE + offsetX) + 'px';
+  canvas.style.top = (CHAR_Y_BASE + offsetY) + 'px';
+}
+
+// Initialize
+function init() {
+  canvas = document.getElementById('character-canvas');
+  ctx = canvas.getContext('2d');
+  initRenderer(ctx);
+  initDomCache();
+
+  updateDisplay();
+  startAnimation();
+
+  // Listen for state updates from main process
+  if (window.electronAPI) {
+    window.electronAPI.onStateUpdate((data) => {
+      if (data.state) currentState = data.state;
+      if (data.character) currentCharacter = CHARACTER_CONFIG[data.character] ? data.character : DEFAULT_CHARACTER;
+      if (data.project) currentProject = data.project;
+      if (data.tool) currentTool = data.tool;
+      if (data.model !== undefined) currentModel = data.model || '-';
+      if (data.memory !== undefined) currentMemory = data.memory || '-';
+      lastActivityTime = Date.now();
+      updateDisplay();
+    });
+  }
+}
+
+// Update display
+function updateDisplay() {
+  const state = states[currentState] || states.idle;
+  const d = domCache;
+
+  // Update background
+  d.display.style.background = state.bgColor;
+
+  // Update text and color
+  if (currentState === 'thinking') {
+    d.statusText.textContent = getThinkingText();
+  } else if (currentState === 'working') {
+    d.statusText.textContent = getWorkingText(currentTool);
+  } else {
+    d.statusText.textContent = state.text;
+  }
+  d.statusText.style.color = state.textColor;
+
+  // Update loading dots visibility
+  d.loadingDots.style.display = state.showLoading ? 'flex' : 'none';
+
+  // Update tool line visibility
+  d.toolLine.style.display = currentState === 'working' ? 'block' : 'none';
+
+  // Update values (using constants for truncation)
+  const displayProject = currentProject.length > PROJECT_NAME_MAX_LENGTH
+    ? currentProject.substring(0, PROJECT_NAME_TRUNCATE_AT) + '...'
+    : currentProject;
+  d.projectValue.textContent = displayProject;
+  d.toolValue.textContent = currentTool;
+
+  // Update model value (truncate if too long)
+  const displayModel = currentModel.length > MODEL_NAME_MAX_LENGTH
+    ? currentModel.substring(0, MODEL_NAME_TRUNCATE_AT) + '...'
+    : currentModel;
+  d.modelValue.textContent = displayModel;
+  d.memoryValue.textContent = currentMemory;
+
+  // Update model/memory visibility (hide memory on start state)
+  d.modelLine.style.display = currentModel && currentModel !== '-' ? 'block' : 'none';
+  const showMemory = currentState !== 'start' && currentMemory && currentMemory !== '-';
+  d.memoryLine.style.display = showMemory ? 'block' : 'none';
+
+  // Update memory bar (hide on start state)
+  updateMemoryBar(showMemory ? currentMemory : null, state.bgColor);
+
+  // Update all text colors based on state (using cached elements)
+  d.infoTexts.forEach(el => el.style.color = state.textColor);
+  d.infoLabels.forEach(el => el.style.color = state.textColor);
+  d.infoValues.forEach(el => el.style.color = state.textColor);
+
+  // Draw info icons
+  drawInfoIcons(state.textColor, state.bgColor, useEmoji);
+
+  // Draw character
+  drawCharacter(state.eyeType, currentState, currentCharacter, animFrame);
+}
+
+// Update loading dots (slower for thinking state)
+function updateLoadingDots(slow = false) {
+  const frame = slow ? Math.floor(animFrame / THINKING_ANIMATION_SLOWDOWN) : animFrame;
+  const activeIndex = frame % LOADING_DOT_COUNT;
+  domCache.dots.forEach((dot, i) => {
+    dot.classList.toggle('dim', i !== activeIndex);
+  });
+}
+
+// Check sleep timer
+function checkSleepTimer() {
+  if (currentState === 'start' || currentState === 'idle' || currentState === 'done') {
+    const elapsed = Date.now() - lastActivityTime;
+    if (elapsed >= SLEEP_TIMEOUT) {
+      currentState = 'sleep';
+      updateDisplay();
+    }
+  }
+}
+
+// Animation loop using requestAnimationFrame for smoother rendering
+function animationLoop(timestamp) {
+  // Throttle to ~100ms intervals
+  if (timestamp - lastFrameTime < FRAME_INTERVAL) {
+    requestAnimationFrame(animationLoop);
+    return;
+  }
+  lastFrameTime = timestamp;
+  animFrame++;
+
+  updateFloatingPosition();
+
+  // Only redraw when necessary
+  if (needsAnimationRedraw(currentState, animFrame, blinkFrame)) {
+    if (currentState === 'start') {
+      drawCharacter('sparkle', currentState, currentCharacter, animFrame);
+    }
+
+    if (currentState === 'thinking') {
+      updateLoadingDots(true);  // Slow for thinking
+      drawCharacter('thinking', currentState, currentCharacter, animFrame);
+    }
+
+    if (currentState === 'working') {
+      updateLoadingDots(false);  // Normal speed for working
+      drawCharacter('focused', currentState, currentCharacter, animFrame);
+    }
+
+    if (currentState === 'idle') {
+      blinkFrame++;
+      if (blinkFrame === BLINK_START_FRAME) {
+        drawCharacter('blink', currentState, currentCharacter, animFrame);
+      } else if (blinkFrame === BLINK_END_FRAME) {
+        drawCharacter('normal', currentState, currentCharacter, animFrame);
+        blinkFrame = 0;
+      }
+    }
+
+    if (currentState === 'sleep') {
+      drawCharacter('sleep', currentState, currentCharacter, animFrame);
+    }
+  }
+
+  checkSleepTimer();
+  requestAnimationFrame(animationLoop);
+}
+
+// Start animation loop
+function startAnimation() {
+  requestAnimationFrame(animationLoop);
+}
+
+// Initialize on load
+window.onload = init;

package/styles.css

@@ -0,0 +1,66 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  background: transparent;
+  overflow: hidden;
+}
+
+/* Draggable title bar */
+.title-bar {
+  -webkit-app-region: drag;
+  height: 28px;
+  background: rgba(45, 45, 45, 0.95);
+  border-radius: 12px 12px 0 0;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  justify-content: space-between;
+}
+
+.title-bar-buttons {
+  -webkit-app-region: no-drag;
+  display: flex;
+  gap: 8px;
+}
+
+.title-bar-btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-close {
+  background: #ff5f57;
+}
+
+.btn-close:hover {
+  background: #ff3b30;
+}
+
+.btn-minimize {
+  background: #febc2e;
+}
+
+.btn-minimize:hover {
+  background: #ff9500;
+}
+
+.title-text {
+  color: #888;
+  font-size: 11px;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Device Frame */
+.device-frame {
+  background: rgba(45, 45, 45, 0.95);
+  padding: 0;
+  border-radius: 0 0 12px 12px;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+}