npm - vibe-monitor - Versions diffs - 1.0.1 → 1.0.2 - Mend

vibe-monitor 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md CHANGED Viewed

@@ -18,6 +18,16 @@ AI coding assistant status monitor with pixel art character.
 npx vibe-monitor
 ```
+### Stop
+```bash
+curl -X POST http://127.0.0.1:19280/quit
+# or
+pkill -f vibe-monitor
+killall Electron
+```
 ## Installation
 ### From npm
@@ -135,6 +145,14 @@ Show window:
 curl -X POST http://127.0.0.1:19280/show
 ```
+### POST /quit
+Quit application:
+```bash
+curl -X POST http://127.0.0.1:19280/quit
+```
 ## Tray Menu
 Click the system tray icon to:

package/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
   <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="./shared/styles.css">
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
@@ -48,6 +48,7 @@
       <div class="memory-bar-container" id="memory-bar-container">
         <div class="memory-bar" id="memory-bar"></div>
       </div>
+      <div class="version-text" id="version-text"></div>
     </div>
   </div>

package/main.js CHANGED Viewed

@@ -256,6 +256,10 @@ function updateTrayMenu() {
       label: `HTTP Server: localhost:${HTTP_PORT}`,
       enabled: false
     },
+    {
+      label: `Version: ${app.getVersion()}`,
+      enabled: false
+    },
     { type: 'separator' },
     {
       label: 'Quit',
@@ -445,6 +449,10 @@ function startHttpServer() {
         window: windowBounds,
         platform: process.platform
       }, null, 2));
+    } else if (req.method === 'POST' && req.url === '/quit') {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: true }));
+      setTimeout(() => app.quit(), 100);
     } else {
       res.writeHead(404);
       res.end('Not Found');
@@ -464,6 +472,10 @@ function startHttpServer() {
 }
 // IPC handlers
+ipcMain.handle('get-version', () => {
+  return app.getVersion();
+});
 ipcMain.on('close-window', () => {
   if (mainWindow) {
     mainWindow.hide();

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vibe-monitor",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "AI coding assistant status monitor",
   "main": "main.js",
   "bin": {
@@ -18,10 +18,10 @@
   "author": "nalbam",
   "license": "MIT",
   "dependencies": {
+    "canvas": "^3.2.1",
     "electron": "^33.0.0"
   },
   "devDependencies": {
-    "canvas": "^3.2.1",
     "electron-builder": "^25.0.0"
   },
   "files": [
@@ -31,7 +31,8 @@
     "index.html",
     "renderer.js",
     "styles.css",
-    "assets/"
+    "assets/",
+    "shared/"
   ],
   "build": {
     "appId": "com.nalbam.vibe-monitor",

package/preload.js CHANGED Viewed

@@ -5,5 +5,6 @@ contextBridge.exposeInMainWorld('electronAPI', {
   minimizeWindow: () => ipcRenderer.send('minimize-window'),
   onStateUpdate: (callback) => {
     ipcRenderer.on('state-update', (event, data) => callback(data));
-  }
+  },
+  getVersion: () => ipcRenderer.invoke('get-version')
 });

package/renderer.js CHANGED Viewed

@@ -5,11 +5,11 @@ import {
   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';
+} 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;
@@ -70,6 +70,13 @@ function init() {
   initRenderer(ctx);
   initDomCache();
+  // Display version (set in HTML, updated dynamically if needed)
+  if (window.electronAPI?.getVersion) {
+    window.electronAPI.getVersion().then(version => {
+      document.getElementById('version-text').textContent = `v${version}`;
+    }).catch(() => {});
+  }
   updateDisplay();
   startAnimation();

package/shared/animation.js ADDED Viewed

@@ -0,0 +1,29 @@
+// Shared animation utilities
+import { FLOAT_AMPLITUDE_X, FLOAT_AMPLITUDE_Y } from './config.js';
+// Calculate floating X offset using cosine wave (~3.2 second cycle at 100ms interval)
+export function getFloatOffsetX(animFrame) {
+  const angle = (animFrame % 32) * (2.0 * Math.PI / 32.0);
+  return Math.cos(angle) * FLOAT_AMPLITUDE_X;
+}
+// Calculate floating Y offset using sine wave
+export function getFloatOffsetY(animFrame) {
+  const angle = (animFrame % 32) * (2.0 * Math.PI / 32.0);
+  return Math.sin(angle) * FLOAT_AMPLITUDE_Y;
+}
+// Check if animation frame requires redraw for given state
+export function needsAnimationRedraw(state, animFrame, blinkFrame) {
+  switch (state) {
+    case 'start':
+    case 'thinking':
+    case 'working':
+    case 'sleep':
+      return true;  // Always animate these states
+    case 'idle':
+      return blinkFrame === 30 || blinkFrame === 31;  // Only during blink
+    default:
+      return false;
+  }
+}

package/shared/character.js ADDED Viewed

@@ -0,0 +1,79 @@
+import { CHAR_SIZE, SCALE, CHARACTER_CONFIG, DEFAULT_CHARACTER, states } from './config.js';
+import { drawEyes, drawMatrixBackground } from './effects.js';
+let ctx = null;
+// Character images cache
+const characterImages = {};
+let imagesLoaded = false;
+// Image paths for each character
+const CHARACTER_IMAGES = {
+  clawd: '../images/clawd-128.png',
+  kiro: '../images/kiro-128.png'
+};
+// Preload character images
+function preloadImages() {
+  if (imagesLoaded) return Promise.resolve();
+  const promises = Object.entries(CHARACTER_IMAGES).map(([name, path]) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        characterImages[name] = img;
+        resolve();
+      };
+      img.onerror = () => {
+        console.warn(`Failed to load image for ${name}: ${path}`);
+        resolve();
+      };
+      img.src = path;
+    });
+  });
+  return Promise.all(promises).then(() => {
+    imagesLoaded = true;
+  });
+}
+// Check if character has image
+function hasImage(characterName) {
+  return characterImages[characterName] !== undefined;
+}
+// Initialize renderer with canvas context
+export function initRenderer(canvasCtx) {
+  ctx = canvasCtx;
+  preloadImages();
+}
+// Helper: draw scaled rect
+export function drawRect(x, y, w, h, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x * SCALE, y * SCALE, w * SCALE, h * SCALE);
+}
+// Draw character (128x128, scaled 2x from 64x64)
+export function drawCharacter(eyeType, currentState, currentCharacter, animFrame) {
+  const state = states[currentState] || states.idle;
+  const char = CHARACTER_CONFIG[currentCharacter] || CHARACTER_CONFIG[DEFAULT_CHARACTER];
+  // Clear with background color
+  ctx.fillStyle = state.bgColor;
+  ctx.fillRect(0, 0, CHAR_SIZE, CHAR_SIZE);
+  // Draw matrix background for working state (behind character)
+  if (currentState === 'working') {
+    drawMatrixBackground(animFrame, drawRect, CHAR_SIZE / SCALE, char.body);
+  }
+  // Draw character image
+  if (hasImage(currentCharacter)) {
+    const img = characterImages[currentCharacter];
+    ctx.drawImage(img, 0, 0, CHAR_SIZE, CHAR_SIZE);
+  }
+  // Draw eyes (for all characters)
+  drawEyes(eyeType, char, animFrame, drawRect);
+}

package/shared/config.js ADDED Viewed

@@ -0,0 +1,146 @@
+// Character size (128x128, doubled from 64)
+export const CHAR_SIZE = 128;
+export const SCALE = 2;
+// Colors
+export const COLOR_EYE = '#000000';
+export const COLOR_WHITE = '#FFFFFF';
+// State configuration
+export const states = {
+  start: {
+    bgColor: '#00CCCC',
+    text: 'Hello!',
+    eyeType: 'sparkle',
+    showLoading: false,
+    textColor: '#000000'
+  },
+  idle: {
+    bgColor: '#00AA00',
+    text: 'Ready',
+    eyeType: 'normal',
+    showLoading: false,
+    textColor: '#FFFFFF'
+  },
+  thinking: {
+    bgColor: '#6633CC',
+    text: 'Thinking',
+    eyeType: 'thinking',
+    showLoading: true,
+    textColor: '#FFFFFF'
+  },
+  working: {
+    bgColor: '#0066CC',
+    text: 'Working',
+    eyeType: 'focused',
+    showLoading: true,
+    textColor: '#FFFFFF'
+  },
+  notification: {
+    bgColor: '#FFCC00',
+    text: 'Input?',
+    eyeType: 'alert',
+    showLoading: false,
+    textColor: '#000000'
+  },
+  done: {
+    bgColor: '#00AA00',
+    text: 'Done!',
+    eyeType: 'happy',
+    showLoading: false,
+    textColor: '#FFFFFF'
+  },
+  sleep: {
+    bgColor: '#1a1a4e',
+    text: 'Zzz...',
+    eyeType: 'sleep',
+    showLoading: false,
+    textColor: '#FFFFFF'
+  }
+};
+// Character configurations - Single source of truth
+export const CHARACTER_CONFIG = {
+  clawd: {
+    name: 'clawd',
+    displayName: 'Clawd',
+    color: '#D97757',
+    body: { x: 6, y: 8, w: 52, h: 36 },
+    arms: { left: { x: 0, y: 22, w: 6, h: 10 }, right: { x: 58, y: 22, w: 6, h: 10 } },
+    legs: [
+      { x: 10, y: 44, w: 6, h: 12 },
+      { x: 18, y: 44, w: 6, h: 12 },
+      { x: 40, y: 44, w: 6, h: 12 },
+      { x: 48, y: 44, w: 6, h: 12 }
+    ],
+    tail: null,
+    eyes: { left: { x: 14, y: 22 }, right: { x: 44, y: 22 }, size: 6 },
+    isGhost: false
+  },
+  kiro: {
+    name: 'kiro',
+    displayName: 'Kiro',
+    color: '#FFFFFF',
+    // Sprite-based rendering (see sprites.js) - 64x64 sprite
+    body: { x: 10, y: 3, w: 44, h: 30 },
+    arms: null,
+    legs: [],
+    tail: [],
+    // Eyes positioned in sprite (drawn by drawEyes, not in sprite)
+    eyes: { left: { x: 29, y: 21 }, right: { x: 39, y: 21 }, w: 5, h: 8 },
+    isGhost: true
+  }
+};
+export const CHARACTER_NAMES = Object.keys(CHARACTER_CONFIG);
+export const DEFAULT_CHARACTER = 'clawd';
+// Thinking state texts (random selection)
+export const THINKING_TEXTS = ['Thinking', 'Hmm', 'Let me see'];
+// Tool-based status texts for working state (lowercase keys)
+export const TOOL_TEXTS = {
+  'bash': ['Running', 'Executing', 'Processing'],
+  'read': ['Reading', 'Scanning', 'Checking'],
+  'edit': ['Editing', 'Modifying', 'Fixing'],
+  'write': ['Writing', 'Creating', 'Saving'],
+  'grep': ['Searching', 'Finding', 'Looking'],
+  'glob': ['Scanning', 'Browsing', 'Finding'],
+  'task': ['Thinking', 'Working', 'Planning'],
+  'webfetch': ['Fetching', 'Loading', 'Getting'],
+  'websearch': ['Searching', 'Googling', 'Looking'],
+  'default': ['Working', 'Busy', 'Coding']
+};
+// Floating animation constants
+export const FLOAT_AMPLITUDE_X = 3;
+export const FLOAT_AMPLITUDE_Y = 5;
+export const CHAR_X_BASE = 22;
+export const CHAR_Y_BASE = 20;
+// State timeouts
+export const DONE_TO_IDLE_TIMEOUT = 60 * 1000;    // 1 minute
+export const SLEEP_TIMEOUT = 600 * 1000;          // 10 minutes
+// Animation constants
+export const FRAME_INTERVAL = 100;                // 100ms per frame
+export const FLOAT_CYCLE_FRAMES = 32;             // ~3.2 seconds at 100ms tick
+export const LOADING_DOT_COUNT = 4;
+export const THINKING_ANIMATION_SLOWDOWN = 3;     // 3x slower for thinking state
+export const BLINK_START_FRAME = 30;
+export const BLINK_END_FRAME = 31;
+// Text truncation limits
+export const PROJECT_NAME_MAX_LENGTH = 16;
+export const PROJECT_NAME_TRUNCATE_AT = 13;
+export const MODEL_NAME_MAX_LENGTH = 14;
+export const MODEL_NAME_TRUNCATE_AT = 11;
+// Matrix effect constants
+export const MATRIX_STREAM_DENSITY = 0.7;         // 70% of streams visible
+export const MATRIX_SPEED_MIN = 1;
+export const MATRIX_SPEED_MAX = 6;
+export const MATRIX_COLUMN_WIDTH = 4;
+export const MATRIX_FLICKER_PERIOD = 3;
+export const MATRIX_TAIL_LENGTH_FAST = 8;         // speed > 3
+export const MATRIX_TAIL_LENGTH_SLOW = 6;

package/shared/effects.js ADDED Viewed

@@ -0,0 +1,240 @@
+import {
+  COLOR_EYE, COLOR_WHITE, CHARACTER_CONFIG, DEFAULT_CHARACTER,
+  MATRIX_STREAM_DENSITY, MATRIX_SPEED_MIN, MATRIX_SPEED_MAX,
+  MATRIX_COLUMN_WIDTH, MATRIX_FLICKER_PERIOD,
+  MATRIX_TAIL_LENGTH_FAST, MATRIX_TAIL_LENGTH_SLOW
+} from './config.js';
+// Effect color for white characters (orange)
+const COLOR_EFFECT_ALT = '#FFA500';
+// Sunglasses colors
+const COLOR_SUNGLASSES_FRAME = '#111111';
+const COLOR_SUNGLASSES_LENS = '#001100';
+const COLOR_SUNGLASSES_SHINE = '#003300';
+// Get eye cover position (used by sunglasses and sleep eyes)
+function getEyeCoverPosition(leftX, rightX, eyeY, eyeW, eyeH, isKiro = false) {
+  const lensW = eyeW + 4;
+  const lensH = eyeH + 2;
+  // Kiro: shift up 2px
+  const lensY = eyeY - 1 - (isKiro ? 2 : 0);
+  // Kiro: left lens 2px right, right lens 5px right
+  const leftLensX = leftX - 2 + (isKiro ? 2 : 0);
+  const rightLensX = rightX - 2 + (isKiro ? 5 : 0);
+  return { lensW, lensH, lensY, leftLensX, rightLensX };
+}
+// Draw sunglasses (Matrix style)
+function drawSunglasses(leftX, rightX, eyeY, eyeW, eyeH, drawRect, isKiro = false) {
+  const { lensW, lensH, lensY, leftLensX, rightLensX } = getEyeCoverPosition(leftX, rightX, eyeY, eyeW, eyeH, isKiro);
+  // Sunglasses colors (same for all characters)
+  const frameColor = COLOR_SUNGLASSES_FRAME;
+  const lensColor = COLOR_SUNGLASSES_LENS;
+  const shineColor = COLOR_SUNGLASSES_SHINE;
+  // Left lens (dark green tint)
+  drawRect(leftLensX, lensY, lensW, lensH, lensColor);
+  // Left lens shine
+  drawRect(leftLensX + 1, lensY + 1, 2, 1, shineColor);
+  // Right lens (dark green tint)
+  drawRect(rightLensX, lensY, lensW, lensH, lensColor);
+  // Right lens shine
+  drawRect(rightLensX + 1, lensY + 1, 2, 1, shineColor);
+  // Frame - top
+  drawRect(leftLensX - 1, lensY - 1, lensW + 2, 1, frameColor);
+  drawRect(rightLensX - 1, lensY - 1, lensW + 2, 1, frameColor);
+  // Frame - bottom
+  drawRect(leftLensX - 1, lensY + lensH, lensW + 2, 1, frameColor);
+  drawRect(rightLensX - 1, lensY + lensH, lensW + 2, 1, frameColor);
+  // Frame - sides
+  drawRect(leftLensX - 1, lensY, 1, lensH, frameColor);
+  drawRect(leftLensX + lensW, lensY, 1, lensH, frameColor);
+  drawRect(rightLensX - 1, lensY, 1, lensH, frameColor);
+  drawRect(rightLensX + lensW, lensY, 1, lensH, frameColor);
+  // Bridge (connects two lenses)
+  const bridgeY = lensY + Math.floor(lensH / 2);
+  drawRect(leftLensX + lensW, bridgeY, rightLensX - leftLensX - lensW, 1, frameColor);
+}
+// Draw sleep eyes (closed eyes with body color background)
+function drawSleepEyes(leftX, rightX, eyeY, eyeW, eyeH, drawRect, bodyColor, isKiro = false) {
+  const { lensW, lensH, lensY, leftLensX, rightLensX } = getEyeCoverPosition(leftX, rightX, eyeY, eyeW, eyeH, isKiro);
+  // Cover original eyes with body color (same area as sunglasses)
+  drawRect(leftLensX, lensY, lensW, lensH, bodyColor);
+  drawRect(rightLensX, lensY, lensW, lensH, bodyColor);
+  // Draw closed eyes (horizontal lines in the middle)
+  const closedEyeY = lensY + Math.floor(lensH / 2);
+  const closedEyeH = 2;  // 2px thick line
+  drawRect(leftLensX + 1, closedEyeY, lensW - 2, closedEyeH, COLOR_EYE);
+  drawRect(rightLensX + 1, closedEyeY, lensW - 2, closedEyeH, COLOR_EYE);
+}
+// Get effect color based on character color
+function getEffectColor(char) {
+  return char.color === '#FFFFFF' ? COLOR_EFFECT_ALT : COLOR_WHITE;
+}
+// Draw eyes (scaled 2x)
+// Note: Eyes are now part of character images, only draw effects and sunglasses
+export function drawEyes(eyeType, char, animFrame, drawRect) {
+  char = char || CHARACTER_CONFIG[DEFAULT_CHARACTER];
+  const leftX = char.eyes.left.x;
+  const rightX = char.eyes.right.x;
+  const eyeY = char.eyes.left.y;
+  // Support separate width/height or fallback to size
+  const eyeW = char.eyes.w || char.eyes.size || 6;
+  const eyeH = char.eyes.h || char.eyes.size || 6;
+  const isKiro = char.name === 'kiro';
+  const effectColor = getEffectColor(char);
+  // Effect position (relative to character, above eyes)
+  const effectX = rightX + eyeW + 2;
+  const effectY = eyeY - 18;
+  switch (eyeType) {
+    case 'focused':
+      // Sunglasses for Matrix style (working state)
+      drawSunglasses(leftX, rightX, eyeY, eyeW, eyeH, drawRect, isKiro);
+      break;
+    case 'alert':
+      // Question mark effect (notification state)
+      drawQuestionMark(effectX, effectY, drawRect);
+      break;
+    case 'sparkle':
+      // Sparkle effect (start state)
+      drawSparkle(effectX, effectY + 2, animFrame, drawRect, effectColor);
+      break;
+    case 'thinking':
+      // Thought bubble effect (thinking state)
+      drawThoughtBubble(effectX, effectY, animFrame, drawRect, effectColor);
+      break;
+    case 'sleep':
+      // Sleep eyes (closed eyes) and Zzz effect
+      drawSleepEyes(leftX, rightX, eyeY, eyeW, eyeH, drawRect, char.color, isKiro);
+      drawZzz(effectX, effectY, animFrame, drawRect, effectColor);
+      break;
+  }
+}
+// Draw sparkle (scaled 2x)
+export function drawSparkle(x, y, animFrame, drawRect, color = COLOR_WHITE) {
+  const frame = animFrame % 4;
+  drawRect(x + 2, y + 2, 2, 2, color);
+  if (frame === 0 || frame === 2) {
+    drawRect(x + 2, y, 2, 2, color);
+    drawRect(x + 2, y + 4, 2, 2, color);
+    drawRect(x, y + 2, 2, 2, color);
+    drawRect(x + 4, y + 2, 2, 2, color);
+  } else {
+    drawRect(x, y, 2, 2, color);
+    drawRect(x + 4, y, 2, 2, color);
+    drawRect(x, y + 4, 2, 2, color);
+    drawRect(x + 4, y + 4, 2, 2, color);
+  }
+}
+// Draw question mark
+export function drawQuestionMark(x, y, drawRect) {
+  const color = '#000000';
+  drawRect(x + 1, y, 4, 2, color);
+  drawRect(x + 4, y + 2, 2, 2, color);
+  drawRect(x + 2, y + 4, 2, 2, color);
+  drawRect(x + 2, y + 6, 2, 2, color);
+  drawRect(x + 2, y + 10, 2, 2, color);
+}
+// Draw Zzz animation for sleep state
+export function drawZzz(x, y, animFrame, drawRect, color = COLOR_WHITE) {
+  const frame = animFrame % 20;
+  if (frame < 10) {
+    drawRect(x, y, 6, 1, color);
+    drawRect(x + 4, y + 1, 2, 1, color);
+    drawRect(x + 3, y + 2, 2, 1, color);
+    drawRect(x + 2, y + 3, 2, 1, color);
+    drawRect(x + 1, y + 4, 2, 1, color);
+    drawRect(x, y + 5, 6, 1, color);
+  }
+}
+// Draw thought bubble animation for thinking state
+export function drawThoughtBubble(x, y, animFrame, drawRect, color = COLOR_WHITE) {
+  const frame = animFrame % 12;
+  // Small dots leading to bubble (always visible)
+  drawRect(x, y + 6, 2, 2, color);
+  drawRect(x + 2, y + 3, 2, 2, color);
+  // Main bubble (animated size)
+  if (frame < 6) {
+    // Larger bubble
+    drawRect(x + 3, y - 2, 6, 2, color);
+    drawRect(x + 2, y, 8, 3, color);
+    drawRect(x + 3, y + 3, 6, 1, color);
+  } else {
+    // Smaller bubble
+    drawRect(x + 4, y - 1, 4, 2, color);
+    drawRect(x + 3, y + 1, 6, 2, color);
+  }
+}
+// Matrix rain colors (green shades - movie style)
+const COLOR_MATRIX_WHITE = '#CCFFCC';
+const COLOR_MATRIX_BRIGHT = '#00FF00';
+const COLOR_MATRIX_MID = '#00BB00';
+const COLOR_MATRIX_DIM = '#008800';
+const COLOR_MATRIX_DARK = '#004400';
+// Pseudo-random number generator for consistent randomness
+function pseudoRandom(seed) {
+  const x = Math.sin(seed * 9999) * 10000;
+  return x - Math.floor(x);
+}
+// Draw matrix background effect (full area, movie style)
+export function drawMatrixBackground(animFrame, drawRect, size = 64, body = null) {
+  // Draw streams across entire area (character will be drawn on top)
+  const streamCount = Math.floor(size / MATRIX_COLUMN_WIDTH);
+  for (let i = 0; i < streamCount; i++) {
+    const seed = i * 23 + 7;
+    // Show streams based on density setting
+    if (pseudoRandom(seed + 100) > MATRIX_STREAM_DENSITY) continue;
+    const x = i * MATRIX_COLUMN_WIDTH;
+    const offset = Math.floor(pseudoRandom(seed) * size);
+    // Variable speed
+    const speedRange = MATRIX_SPEED_MAX - MATRIX_SPEED_MIN + 1;
+    const speed = MATRIX_SPEED_MIN + Math.floor(pseudoRandom(seed + 1) * speedRange);
+    // Variable tail length based on speed
+    const tailLen = speed > 3 ? MATRIX_TAIL_LENGTH_FAST : MATRIX_TAIL_LENGTH_SLOW;
+    drawMatrixStreamMovie(x, 0, animFrame, drawRect, offset, size, speed, tailLen, seed);
+  }
+}
+// Draw matrix stream with movie-style effect
+function drawMatrixStreamMovie(x, y, animFrame, drawRect, offset, height, speed, tailLen, seed) {
+  if (height < MATRIX_COLUMN_WIDTH) return;
+  const pos = (animFrame * speed + offset) % height;
+  // Head: bright white/green (flicker effect)
+  const flicker = (animFrame + seed) % MATRIX_FLICKER_PERIOD === 0;
+  const headColor = flicker ? COLOR_MATRIX_WHITE : COLOR_MATRIX_BRIGHT;
+  drawRect(x, y + pos, 2, 2, headColor);
+  // Tail with gradient
+  if (pos >= 2) drawRect(x, y + pos - 2, 2, 2, COLOR_MATRIX_BRIGHT);
+  if (pos >= 4) drawRect(x, y + pos - 4, 2, 2, COLOR_MATRIX_MID);
+  if (pos >= 6) drawRect(x, y + pos - 6, 2, 2, COLOR_MATRIX_MID);
+  if (tailLen >= 8 && pos >= 8) drawRect(x, y + pos - 8, 2, 2, COLOR_MATRIX_DIM);
+  if (tailLen >= 8 && pos >= 10) drawRect(x, y + pos - 10, 2, 2, COLOR_MATRIX_DARK);
+}

package/shared/icons.js ADDED Viewed

@@ -0,0 +1,93 @@
+// Cached DOM elements and canvas contexts
+let iconCache = null;
+// Initialize icon cache (called once on first drawInfoIcons call)
+function initIconCache() {
+  const iconProject = document.getElementById('icon-project');
+  const iconTool = document.getElementById('icon-tool');
+  const iconModel = document.getElementById('icon-model');
+  const iconMemory = document.getElementById('icon-memory');
+  iconCache = {
+    emojiIcons: document.querySelectorAll('.emoji-icon'),
+    pixelIcons: document.querySelectorAll('.pixel-icon'),
+    // Cache both canvas elements and their contexts
+    canvases: [
+      { canvas: iconProject, ctx: iconProject?.getContext('2d') },
+      { canvas: iconTool, ctx: iconTool?.getContext('2d') },
+      { canvas: iconModel, ctx: iconModel?.getContext('2d') },
+      { canvas: iconMemory, ctx: iconMemory?.getContext('2d') }
+    ]
+  };
+}
+// Draw folder icon - 8x7 pixels
+export function drawFolderIcon(iconCtx, color) {
+  iconCtx.fillStyle = color;
+  iconCtx.fillRect(0, 0, 3, 1);
+  iconCtx.fillRect(0, 1, 8, 6);
+  iconCtx.fillStyle = '#000000';
+  iconCtx.fillRect(1, 2, 6, 1);
+}
+// Draw tool/wrench icon - 8x8 pixels
+export function drawToolIcon(iconCtx, color) {
+  iconCtx.fillStyle = color;
+  iconCtx.fillRect(1, 0, 6, 3);
+  iconCtx.fillStyle = '#000000';
+  iconCtx.fillRect(3, 0, 2, 1);
+  iconCtx.fillStyle = color;
+  iconCtx.fillRect(3, 3, 2, 5);
+}
+// Draw robot icon - 8x8 pixels
+export function drawRobotIcon(iconCtx, color) {
+  iconCtx.fillStyle = color;
+  iconCtx.fillRect(3, 0, 2, 1);
+  iconCtx.fillRect(1, 1, 6, 5);
+  iconCtx.fillStyle = '#000000';
+  iconCtx.fillRect(2, 2, 1, 2);
+  iconCtx.fillRect(5, 2, 1, 2);
+  iconCtx.fillRect(2, 5, 4, 1);
+  iconCtx.fillStyle = color;
+  iconCtx.fillRect(0, 2, 1, 2);
+  iconCtx.fillRect(7, 2, 1, 2);
+}
+// Draw brain icon - 8x7 pixels
+export function drawBrainIcon(iconCtx, color) {
+  iconCtx.fillStyle = color;
+  iconCtx.fillRect(1, 0, 6, 7);
+  iconCtx.fillRect(0, 1, 8, 5);
+  iconCtx.fillStyle = '#000000';
+  iconCtx.fillRect(4, 1, 1, 5);
+  iconCtx.fillRect(2, 0, 1, 1);
+  iconCtx.fillRect(5, 0, 1, 1);
+}
+// Draw all info icons
+export function drawInfoIcons(color, bgColor, useEmoji) {
+  // Initialize cache on first call
+  if (!iconCache) {
+    initIconCache();
+  }
+  const c = iconCache;
+  // Toggle emoji/pixel icon visibility (using cached elements)
+  c.emojiIcons.forEach(el => el.style.display = useEmoji ? 'inline' : 'none');
+  c.pixelIcons.forEach(el => el.style.display = useEmoji ? 'none' : 'inline-block');
+  if (!useEmoji) {
+    const drawFuncs = [drawFolderIcon, drawToolIcon, drawRobotIcon, drawBrainIcon];
+    // Use cached contexts instead of calling getContext('2d') each time
+    c.canvases.forEach((item, index) => {
+      if (item.ctx) {
+        item.ctx.fillStyle = bgColor;
+        item.ctx.fillRect(0, 0, 8, 8);
+        drawFuncs[index](item.ctx, color);
+      }
+    });
+  }
+}

package/shared/styles.css ADDED Viewed

@@ -0,0 +1,129 @@
+/* Display Screen */
+.display {
+  width: 172px;
+  height: 320px;
+  background: #000;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  image-rendering: pixelated;
+}
+/* Character Canvas - 128x128, centered */
+#character-canvas {
+  position: absolute;
+  top: 20px;
+  left: 22px;
+  width: 128px;
+  height: 128px;
+  image-rendering: pixelated;
+  transition: top 0.1s ease-out, left 0.1s ease-out;
+}
+/* Status Text */
+.status-text {
+  position: absolute;
+  top: 160px;
+  width: 100%;
+  text-align: center;
+  font-family: 'Courier New', monospace;
+  font-size: 24px;
+  font-weight: bold;
+  color: white;
+}
+/* Loading Dots */
+.loading-dots {
+  position: absolute;
+  top: 190px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #7BEF7B;
+  transition: background 0.1s;
+}
+.dot.dim {
+  background: #3a3a3a;
+}
+/* Info Text */
+.info-text {
+  position: absolute;
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  color: white;
+  left: 10px;
+}
+.project-text {
+  top: 220px;
+}
+.tool-text {
+  top: 235px;
+}
+.model-text {
+  top: 250px;
+}
+.memory-text {
+  top: 265px;
+}
+.memory-bar-container {
+  position: absolute;
+  top: 285px;
+  left: 10px;
+  width: 152px;
+  height: 8px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  box-sizing: border-box;
+}
+.memory-bar {
+  height: 100%;
+  border-radius: 0px;
+  transition: width 0.3s, background 0.3s;
+}
+.info-label {
+  color: white;
+  display: inline-flex;
+  align-items: center;
+}
+.info-value {
+  color: #aaa;
+}
+.pixel-icon {
+  width: 8px;
+  height: 8px;
+  margin-right: 2px;
+  image-rendering: pixelated;
+  vertical-align: middle;
+  display: none;
+}
+.emoji-icon {
+  display: inline;
+}
+.icon-canvas {
+  width: 8px;
+  height: 8px;
+  image-rendering: pixelated;
+  vertical-align: middle;
+  margin-right: 2px;
+}

package/shared/utils.js ADDED Viewed

@@ -0,0 +1,77 @@
+import { TOOL_TEXTS, THINKING_TEXTS } from './config.js';
+// Get thinking text (random selection)
+export function getThinkingText() {
+  return THINKING_TEXTS[Math.floor(Math.random() * THINKING_TEXTS.length)];
+}
+// Get working text based on tool (random selection, case-insensitive)
+export function getWorkingText(tool) {
+  const key = (tool || '').toLowerCase();
+  const texts = TOOL_TEXTS[key] || TOOL_TEXTS['default'];
+  return texts[Math.floor(Math.random() * texts.length)];
+}
+// Interpolate between two colors based on ratio (0-1)
+export function lerpColor(color1, color2, ratio) {
+  const r1 = parseInt(color1.slice(1, 3), 16);
+  const g1 = parseInt(color1.slice(3, 5), 16);
+  const b1 = parseInt(color1.slice(5, 7), 16);
+  const r2 = parseInt(color2.slice(1, 3), 16);
+  const g2 = parseInt(color2.slice(3, 5), 16);
+  const b2 = parseInt(color2.slice(5, 7), 16);
+  const r = Math.round(r1 + (r2 - r1) * ratio);
+  const g = Math.round(g1 + (g2 - g1) * ratio);
+  const b = Math.round(b1 + (b2 - b1) * ratio);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+// Get gradient colors based on percentage (smooth transition)
+export function getMemoryGradient(percent) {
+  const green = '#00AA00';
+  const yellow = '#FFCC00';
+  const red = '#FF4444';
+  let startColor, endColor;
+  if (percent < 50) {
+    const ratio = percent / 50;
+    startColor = lerpColor(green, yellow, ratio * 0.5);
+    endColor = lerpColor(green, yellow, Math.min(1, ratio * 0.5 + 0.3));
+  } else {
+    const ratio = (percent - 50) / 50;
+    startColor = lerpColor(yellow, red, ratio * 0.7);
+    endColor = lerpColor(yellow, red, Math.min(1, ratio * 0.7 + 0.3));
+  }
+  return `linear-gradient(to right, ${startColor}, ${endColor})`;
+}
+// Update memory bar display
+export function updateMemoryBar(memoryUsage, bgColor) {
+  const memoryBar = document.getElementById('memory-bar');
+  const memoryBarContainer = document.getElementById('memory-bar-container');
+  if (!memoryUsage || memoryUsage === '-') {
+    memoryBarContainer.style.display = 'none';
+    return;
+  }
+  memoryBarContainer.style.display = 'block';
+  const isDarkBg = (bgColor === '#0066CC' || bgColor === '#1a1a4e');
+  if (isDarkBg) {
+    memoryBarContainer.style.borderColor = 'rgba(255, 255, 255, 0.6)';
+    memoryBarContainer.style.background = 'rgba(255, 255, 255, 0.2)';
+  } else {
+    memoryBarContainer.style.borderColor = 'rgba(0, 0, 0, 0.6)';
+    memoryBarContainer.style.background = 'rgba(0, 0, 0, 0.3)';
+  }
+  const percent = parseInt(memoryUsage.replace('%', '')) || 0;
+  const clampedPercent = Math.min(100, Math.max(0, percent));
+  memoryBar.style.width = clampedPercent + '%';
+  memoryBar.style.background = getMemoryGradient(clampedPercent);
+}

package/styles.css CHANGED Viewed

@@ -64,3 +64,14 @@ html, body {
   border-radius: 0 0 12px 12px;
   box-shadow: 0 10px 40px rgba(0,0,0,0.5);
 }
+/* Version text */
+.version-text {
+  position: absolute;
+  bottom: 4px;
+  width: 100%;
+  text-align: center;
+  font-size: 9px;
+  color: #666;
+  font-family: monospace;
+}