v8: agent logos on idle, transparent backgrounds, fix PI settings persistence

com.streamdock.codex.monitor.sdPlugin/plugin/index.js

@@ -1,4 +1,4 @@
-const { Plugins, Actions, log } = require('./utils/plugin');
+const { Plugins, Actions, log } = require('./utils/plugin');
 const fs = require('fs');
 const path = require('path');
 const os = require('os');
@@ -8,7 +8,21 @@ const timers = {};
 const sessionOffsets = {};
 const DEBUG_LOG = path.join(__dirname, '..', 'debug.log');
 function dlog(msg) { try { fs.appendFileSync(DEBUG_LOG, '[' + new Date().toISOString() + '] ' + msg + '\n'); } catch (_) {} }
-dlog('=== AI Monitor v7 multi-agent ===');
+dlog('=== AI Monitor v8 multi-agent ===');
+
+// --- Load agent logos as data URIs ---
+function loadSvg(filename) {
+    try {
+        var file = path.join(__dirname, '..', 'static', 'img', filename);
+        var raw = fs.readFileSync(file, 'utf-8');
+        return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(raw);
+    } catch (_) { return ''; }
+}
+var AGENT_LOGOS = {
+    codex: loadSvg('codex-icon.svg'),
+    claude: loadSvg('claude-icon.svg'),
+    opencode: loadSvg('opencode-icon.svg')
+};
 
 const HOME = os.homedir();
 const DEFAULT_POLL = 1000;
@@ -107,7 +121,7 @@ function makeSvg(fill, label, blink, breathe) {
   var anim = '';
   if (blink) anim = '<animate attributeName="opacity" values="1;0.2;1" dur="0.8s" repeatCount="indefinite"/>';
   else if (breathe) anim = '<animate attributeName="opacity" values="1;0.4;1" dur="2s" repeatCount="indefinite"/>';
-  return '<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg"><rect width="144" height="144" rx="20" fill="#1a1a2e"/><circle cx="72" cy="58" r="32" fill="' + fill + '">' + anim + '</circle><text x="72" y="118" font-family="Arial" font-weight="bold" font-size="13" fill="white" text-anchor="middle">' + label + '</text></svg>';
+  return '<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg"><rect width="144" height="144" rx="20" fill="none"/><circle cx="72" cy="58" r="32" fill="' + fill + '">' + anim + '</circle><text x="72" y="118" font-family="Arial" font-weight="bold" font-size="13" fill="white" text-anchor="middle">' + label + '</text></svg>';
 }
 
 function setDisplay(context, state) {
@@ -124,7 +138,7 @@ function animateTick() {
     var alpha = d.blink ? (phase < 0.5 ? 1 : 0.2) : 0.4 + 0.6 * Math.sin(phase * Math.PI);
     var _r = parseInt(d.fill.slice(1,3),16), _g = parseInt(d.fill.slice(3,5),16), _b = parseInt(d.fill.slice(5,7),16);
     var color = 'rgb(' + Math.round(16+(_r-16)*alpha) + ',' + Math.round(16+(_g-16)*alpha) + ',' + Math.round(16+(_b-16)*alpha) + ')';
-    var svg = '<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg"><rect width="144" height="144" rx="20" fill="#1a1a2e"/><circle cx="72" cy="58" r="32" fill="' + color + '"/><text x="72" y="118" font-family="Arial" font-weight="bold" font-size="13" fill="white" text-anchor="middle">' + d.title + '</text></svg>';
+    var svg = '<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg"><rect width="144" height="144" rx="20" fill="none"/><circle cx="72" cy="58" r="32" fill="' + color + '"/><text x="72" y="118" font-family="Arial" font-weight="bold" font-size="13" fill="white" text-anchor="middle">' + d.title + '</text></svg>';
     plugin.setImage(currentCtx, 'data:image/svg+xml;charset=utf-8,' + svg);
   }
 }

com.streamdock.codex.monitor.sdPlugin/propertyInspector/codex-monitor/index.js

@@ -8,16 +8,13 @@
   const statusDot = document.getElementById('statusDot');
   const statusText = document.getElementById('statusText');
 
-  // $settings is the SDK-provided settings proxy (auto-persists)
-  $settings = $settings || {};
-
   function applySettings(settings) {
-    if (settings.agent) { agentSelect.value = settings.agent; }
+    if (settings && settings.agent) { agentSelect.value = settings.agent; }
-    if (settings.pollInterval !== undefined) {
+    if (settings && settings.pollInterval !== undefined) {
       pollSlider.value = settings.pollInterval;
       pollVal.textContent = settings.pollInterval + 'ms';
     }
-    if (settings.showHealth !== undefined) {
+    if (settings && settings.showHealth !== undefined) {
       showHealthToggle.checked = settings.showHealth;
     }
   }

com.streamdock.codex.monitor.sdPlugin/static/img/claude-icon.svg

@@ -0,0 +1,4 @@
+<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="72" cy="72" r="40" fill="none" stroke="#d97706" stroke-width="4"/>
+  <text x="72" y="82" text-anchor="middle" fill="#d97706" font-family="serif" font-size="48" font-weight="bold">C</text>
+</svg>

com.streamdock.codex.monitor.sdPlugin/static/img/codex-icon.svg

@@ -1 +1,4 @@
-<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg"><rect width="144" height="144" rx="20" fill="#1a1a2e"/><polygon points="72,24 112,60 112,108 72,144 32,108 32,60" fill="none" stroke="#f59e0b" stroke-width="3"/><text x="72" y="84" text-anchor="middle" fill="#f59e0b" font-family="Arial,sans-serif" font-size="28" font-weight="bold">CX</text></svg>
+<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="72,30 108,60 108,105 72,135 36,105 36,60" fill="none" stroke="#f59e0b" stroke-width="4"/>
+  <text x="72" y="88" text-anchor="middle" fill="#f59e0b" font-family="Arial,sans-serif" font-size="30" font-weight="bold">CX</text>
+</svg>

com.streamdock.codex.monitor.sdPlugin/static/img/opencode-icon.svg

@@ -0,0 +1,5 @@
+<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg">
+  <rect x="32" y="32" width="80" height="80" rx="12" fill="none" stroke="#06b6d4" stroke-width="4"/>
+  <line x1="52" y1="52" x2="52" y2="92" stroke="#06b6d4" stroke-width="3" stroke-linecap="round"/>
+  <line x1="52" y1="52" x2="92" y2="52" stroke="#06b6d4" stroke-width="3" stroke-linecap="round"/>
+</svg>