vibemon 1.9.3 → 1.10.1

package/README.md

@@ -20,11 +20,17 @@ The app launches in the system tray and listens on `http://127.0.0.1:19280`.
 
 ## Supported Tools
 
-- **Apto** - Personal AI coding assistant
 - **[Claude Code](https://claude.ai/code)** - Anthropic's AI coding assistant
+- **[Codex](https://openai.com/codex)** - OpenAI's AI coding agent
 - **[Kiro](https://kiro.dev/)** - AWS's AI coding assistant
 - **[OpenClaw](https://openclaw.ai/)** - Open-source computer use agent
 
+## Integration Notes
+
+- **Claude Code** and **Kiro** are the cleanest real-time integrations because they expose direct hook events around prompts, tool use, and turn completion.
+- **Codex** is supported, but its interactive hook surface is currently narrower than Claude Code. For automation, `codex exec --json` provides richer telemetry.
+- **OpenClaw** support is plugin-based. VibeMon uses a bridge plugin because OpenClaw's simpler internal hooks are not designed around the same tool loop.
+
 ## Features
 
 - **Frameless Window** - Clean floating design

package/modules/tray-manager.cjs

@@ -72,6 +72,18 @@ function createTrayIcon(state, character = 'clawd') {
     rect(13, 16, 3, 3, charColor);  // Right leg
     rect(7, 10, 2, 2, '#40E0D0');   // Left eye (cyan)
     rect(13, 10, 2, 2, '#40E0D0');  // Right eye (cyan)
+  } else if (charName === 'codex') {
+    // Draw codex character (green terminal robot)
+    rect(8, 2, 6, 2, charColor);    // Top cap
+    rect(6, 4, 10, 2, charColor);   // Head taper
+    rect(5, 6, 12, 9, charColor);   // Main body
+    rect(3, 9, 2, 5, charColor);    // Left arm
+    rect(17, 9, 2, 5, charColor);   // Right arm
+    rect(7, 15, 3, 4, charColor);   // Left leg
+    rect(12, 15, 3, 4, charColor);  // Right leg
+    rect(7, 9, 2, 2, COLOR_EYE);    // Left eye
+    rect(12, 9, 2, 2, COLOR_EYE);   // Right eye
+    rect(9, 12, 4, 1, COLOR_EYE);   // Mouth
   } else {
     // Draw clawd character (default)
     rect(4, 6, 14, 8, charColor);   // Body

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibemon",
-  "version": "1.9.3",
+  "version": "1.10.1",
   "description": "AI assistant status monitor",
   "main": "main.js",
   "bin": {

package/renderer.js

@@ -24,10 +24,10 @@ async function init() {
   vibeMonEngine = createVibeMonEngine(container, {
     useEmoji,
     characterImageUrls: {
-      apto: `${STATIC_BASE}/characters/apto.png`,
       clawd: `${STATIC_BASE}/characters/clawd.png`,
       kiro: `${STATIC_BASE}/characters/kiro.png`,
-      claw: `${STATIC_BASE}/characters/claw.png`
+      claw: `${STATIC_BASE}/characters/claw.png`,
+      codex: `${STATIC_BASE}/characters/codex.png`
     }
   });
   await vibeMonEngine.init();

package/shared/data/constants.json

@@ -63,13 +63,13 @@
 
   "VALID_STATES": ["start", "idle", "thinking", "planning", "working", "packing", "notification", "done", "sleep", "alert"],
 
-  "CHARACTER_NAMES": ["apto", "clawd", "kiro", "claw"],
+  "CHARACTER_NAMES": ["clawd", "kiro", "claw", "codex"],
 
   "CHARACTER_COLORS": {
-    "apto": "#797C98",
     "clawd": "#D97757",
     "kiro": "#FFFFFF",
-    "claw": "#DD4444"
+    "claw": "#DD4444",
+    "codex": "#10A37F"
   },
 
   "STATE_COLORS": {

package/stats.html

@@ -306,11 +306,62 @@
       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(' ');
+    const titleCase = (value) => value
+      .split(/[\s_-]+/)
+      .filter(Boolean)
+      .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+      .join(' ');
+
+    const getNumericVersion = (parts, startIndex) => {
+      const versionParts = [];
+
+      for (let i = startIndex; i < parts.length; i++) {
+        const part = parts[i];
+        if (!/^\d+$/.test(part)) break;
+        // Ignore trailing release-date style suffixes like 20251101.
+        if (part.length >= 6) break;
+        versionParts.push(part);
+        if (versionParts.length === 2) break;
+      }
+
+      return versionParts.join('.');
+    };
+
+    const getModelInfo = (model) => {
+      if (!model || typeof model !== 'string') {
+        return { key: 'unknown', name: 'Unknown' };
+      }
+
+      const parts = model.toLowerCase().split('-').filter(Boolean);
+      if (parts.length === 0) {
+        return { key: model, name: model };
+      }
+
+      const provider = parts[0];
+      const family = parts[1] || 'unknown';
+      const version = getNumericVersion(parts, 2);
+      const familyName = titleCase(family);
+      const name = version ? `${familyName} ${version}` : familyName;
+      const key = [provider, family, version].filter(Boolean).join(':');
+
+      return { key, name };
+    };
+
+    const aggregateModelUsage = (modelUsage) => {
+      return Object.entries(modelUsage || {}).reduce((acc, [model, usage]) => {
+        const info = getModelInfo(model);
+        if (!acc[info.key]) {
+          acc[info.key] = { name: info.name };
+        }
+
+        Object.entries(usage || {}).forEach(([metric, value]) => {
+          if (typeof value === 'number' && Number.isFinite(value)) {
+            acc[info.key][metric] = (acc[info.key][metric] || 0) + value;
+          }
+        });
+
+        return acc;
+      }, {});
     };
 
     async function loadStats() {
@@ -502,13 +553,18 @@
 
     function renderModelList(modelUsage) {
       const container = document.getElementById('modelList');
-      const entries = Object.entries(modelUsage);
-
-      container.innerHTML = entries.map(([model, usage]) => {
+      const entries = Object.values(aggregateModelUsage(modelUsage))
+        .sort((a, b) => {
+          const totalA = (a.inputTokens || 0) + (a.outputTokens || 0);
+          const totalB = (b.inputTokens || 0) + (b.outputTokens || 0);
+          return totalB - totalA;
+        });
+
+      container.innerHTML = entries.map((usage) => {
         const total = (usage.inputTokens || 0) + (usage.outputTokens || 0);
         return `
           <div class="model-item">
-            <span class="model-name">${getModelShortName(model)}</span>
+            <span class="model-name">${usage.name}</span>
             <span class="model-tokens">${formatNumber(total)} tokens</span>
           </div>
         `;