vibe-monitor 1.0.0 → 1.0.2

package/README.md

@@ -1,6 +1,8 @@
-# Vibe Monitor Desktop App
+# Vibe Monitor
 
-Electron-based desktop app for real-time monitoring of AI coding assistants (Claude Code, Kiro IDE/CLI) with pixel art character.
+AI coding assistant status monitor with pixel art character.
+
+![Demo](assets/demo.gif)
 
 ## Features
 
@@ -10,259 +12,145 @@ Electron-based desktop app for real-time monitoring of AI coding assistants (Cla
 - **HTTP API**: Easy integration with IDE hooks (Claude Code, Kiro)
 - **Draggable**: Move the window to any position
 
-## Installation
+## Quick Start
 
 ```bash
-cd desktop
-npm install
+npx vibe-monitor
 ```
 
-## Usage
-
-### Run the App
+### Stop
 
 ```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%"}'
+curl -X POST http://127.0.0.1:19280/quit
 
-# Check current status
-curl http://127.0.0.1:19280/status
+# or
+pkill -f vibe-monitor
+killall Electron
 ```
 
-### IDE Hooks Integration
-
-#### Claude Code
-
-Uses `hooks/vibe-monitor.sh` - see [main README](../README.md#claude-code-setup) for setup.
-
-#### Kiro IDE
+## Installation
 
-Copy hook files to `~/.kiro/hooks/` (or your project's `.kiro/hooks/` folder):
+### From npm
 
 ```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/
+npm install -g vibe-monitor
+vibe-monitor
 ```
 
-**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`
+### From Source
 
-## 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"
-}
+```bash
+git clone https://github.com/nalbam/vibe-monitor.git
+cd vibe-monitor/desktop
+npm install
+npm start
 ```
 
-### GET /status
+## States
 
-Get current status
+| State | Color | Description |
+|-------|-------|-------------|
+| `start` | Cyan | Session begins |
+| `idle` | Green | Waiting for input |
+| `thinking` | Purple | Processing prompt |
+| `working` | Blue | Tool executing |
+| `notification` | Yellow | User input needed |
+| `done` | Green | Tool completed |
+| `sleep` | Navy | 10min inactivity |
 
-```json
-{
-  "state": "working",
-  "project": "vibe-monitor",
-  "tool": "Bash",
-  "model": "opus",
-  "memory": "45%"
-}
-```
+## Characters
 
-### GET /health
+- **clawd** (default): Orange pixel art character
+- **kiro**: White ghost character
 
-Health check endpoint
+## IDE Integration
 
-```json
-{
-  "status": "ok"
-}
-```
+### Claude Code
 
-### POST /show
-
-Show window and position to top-right corner
+Add to `~/.claude/settings.json`:
 
 ```json
 {
-  "success": true
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "curl -s -X POST http://127.0.0.1:19280/status -H 'Content-Type: application/json' -d \"$(jq -nc --arg state working --arg event PreToolUse --arg tool \"$CLAUDE_TOOL_NAME\" --arg project \"$(basename $PWD)\" '{state: $state, event: $event, tool: $tool, project: $project}')\" > /dev/null 2>&1 || 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
-   ```
+See [GitHub repository](https://github.com/nalbam/vibe-monitor) for full hook configuration.
 
-### Install Dependencies
+### Kiro IDE
 
-Electron requires several system libraries that are not installed by default on WSL:
+Copy hook files from the repository to `~/.kiro/hooks/`:
 
 ```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
+curl -sL https://raw.githubusercontent.com/nalbam/vibe-monitor/main/config/kiro/hooks/vibe-monitor-pre-tool-use.kiro.hook -o ~/.kiro/hooks/vibe-monitor-pre-tool-use.kiro.hook
 ```
 
-### Run
-
-```bash
-cd desktop
-npm install
-npm start
-```
+## API
 
-### Troubleshooting
+### POST /status
 
-**Error: `libasound.so.2: cannot open shared object file`**
+Update status:
 
-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
+curl -X POST http://127.0.0.1:19280/status \
+  -H "Content-Type: application/json" \
+  -d '{"state":"working","tool":"Bash","project":"my-project"}'
 ```
 
-**GPU process errors (can be ignored)**
+**Fields:**
 
-WSL may show GPU-related warnings like:
-```
-Exiting GPU process due to errors during initialization
-```
-These warnings don't affect app functionality.
+| Field | Description |
+|-------|-------------|
+| `state` | `start`, `idle`, `thinking`, `working`, `notification`, `done`, `sleep` |
+| `event` | `PreToolUse`, `PostToolUse`, etc. |
+| `tool` | Tool name (e.g., `Bash`, `Read`, `Edit`) |
+| `project` | Project name |
+| `model` | Model name (e.g., `opus`, `sonnet`) |
+| `memory` | Memory usage (e.g., `45%`) |
+| `character` | `clawd` or `kiro` |
+
+### GET /status
 
-**Window not appearing**
+Get current status:
 
-Ensure WSLg is working:
 ```bash
-# Test with a simple GUI app
-sudo apt-get install -y x11-apps
-xclock
+curl http://127.0.0.1:19280/status
 ```
 
-If xclock doesn't appear, WSLg may need to be enabled or updated.
-
-## Build
+### GET /health
 
-Build for macOS:
+Health check:
 
 ```bash
-npm run build:mac
+curl http://127.0.0.1:19280/health
 ```
 
-Build DMG only:
-
-```bash
-npm run build:dmg
-```
+### POST /show
 
-Build for Windows:
+Show window:
 
 ```bash
-npm run build:win
+curl -X POST http://127.0.0.1:19280/show
 ```
 
-Build for Linux:
+### POST /quit
 
-```bash
-npm run build:linux
-```
-
-Build for all platforms:
+Quit application:
 
 ```bash
-npm run build:all
+curl -X POST http://127.0.0.1:19280/quit
 ```
 
 ## Tray Menu
@@ -278,4 +166,15 @@ Click the system tray icon to:
 
 Default HTTP server port: `19280`
 
-(Can be changed via `HTTP_PORT` constant in main.js)
+## Build
+
+```bash
+npm run build:mac     # macOS
+npm run build:win     # Windows
+npm run build:linux   # Linux
+npm run build:all     # All platforms
+```
+
+## License
+
+MIT

package/bin/cli.js

@@ -6,6 +6,11 @@ const path = require('path');
 const electron = require('electron');
 const appPath = path.join(__dirname, '..');
 
-spawn(electron, [appPath], {
-  stdio: 'inherit'
+const child = spawn(electron, [appPath], {
+  detached: true,
+  stdio: 'ignore'
 });
+
+child.unref();
+
+console.log('Vibe Monitor started (http://127.0.0.1:19280)');

package/index.html

@@ -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

@@ -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

@@ -1,7 +1,7 @@
 {
   "name": "vibe-monitor",
-  "version": "1.0.0",
-  "description": "Claude Code Status Monitor - Frameless Desktop App",
+  "version": "1.0.2",
+  "description": "AI coding assistant status monitor",
   "main": "main.js",
   "bin": {
     "vibe-monitor": "./bin/cli.js"
@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;
+}