agent-tank 0.9.0

package/src/client-auto-refresh.js

@@ -0,0 +1,321 @@
+// Client-side JavaScript for auto-refresh system
+// This module exports a string containing the XHR-based auto-refresh code
+
+const { colorHelpers, timeHelpers, metricExtractors } = require('./client-auto-refresh-helpers');
+
+const autoRefreshScript = `
+    // ===== Auto-Refresh System (XHR-based) =====
+    // Fetches /status endpoint and updates the DOM without page reload
+
+${colorHelpers}
+${timeHelpers}
+${metricExtractors}
+
+    // Update a single metric's DOM elements
+    function updateMetricDOM(metric) {
+      const { metricId, percent, resetsIn, cycle } = metric;
+      const color = getProgressColorFromPercent(percent);
+      const colorClass = getColorClassFromPercent(percent);
+      const statusDotClass = getStatusDotClassFromPercent(percent);
+      const isZero = percent === 0;
+
+      // Find the usage-item row and track button
+      const usageItem = document.querySelector(\`.usage-item[data-metric-id="\${metricId}"]\`);
+      const trackBtn = document.querySelector(\`.track-btn[data-metric-id="\${metricId}"]\`);
+
+      if (usageItem) {
+        // Update data attributes
+        usageItem.dataset.percent = percent;
+        usageItem.dataset.color = color;
+        usageItem.dataset.resetsIn = resetsIn;
+
+        // Update zero-usage class
+        if (isZero) {
+          usageItem.classList.add('zero-usage');
+        } else {
+          usageItem.classList.remove('zero-usage');
+        }
+
+        // Update the percentage text
+        const percentSpan = usageItem.querySelector('.usage-percent');
+        if (percentSpan) {
+          percentSpan.textContent = percent;
+        }
+
+        // Update the color class on usage-value
+        const usageValue = usageItem.querySelector('.usage-value');
+        if (usageValue) {
+          usageValue.classList.remove('high', 'medium', 'low');
+          usageValue.classList.add(colorClass);
+        }
+
+        // Update the status dot
+        const statusDot = usageItem.querySelector('.status-dot');
+        if (statusDot) {
+          statusDot.classList.remove('status-green', 'status-yellow', 'status-red');
+          statusDot.classList.add(statusDotClass);
+        }
+      }
+
+      if (trackBtn) {
+        // Update track button data attributes
+        trackBtn.dataset.percent = percent;
+        trackBtn.dataset.color = color;
+        trackBtn.dataset.resetsIn = resetsIn;
+      }
+
+      // Find and update the progress bar (should be next sibling of usage-item)
+      const progressBar = usageItem ? usageItem.nextElementSibling : null;
+      if (progressBar && progressBar.classList.contains('progress-bar')) {
+        // Update zero-usage class on progress bar
+        if (isZero) {
+          progressBar.classList.add('zero-usage');
+        } else {
+          progressBar.classList.remove('zero-usage');
+        }
+
+        // Update progress fill
+        const progressFill = progressBar.querySelector('.progress-fill');
+        if (progressFill) {
+          progressFill.style.width = percent + '%';
+          progressFill.style.background = color;
+        }
+      }
+
+      // Update the "Resets in" info if present
+      const modelContainer = usageItem ? usageItem.closest('.model-container') : null;
+      if (modelContainer) {
+        const resetWrapper = modelContainer.querySelector('.reset-info-wrapper');
+        if (resetWrapper) {
+          if (isZero || !resetsIn) {
+            // Hide "Resets in" when at 0%
+            resetWrapper.style.display = 'none';
+          } else {
+            resetWrapper.style.display = '';
+            // Update the reset text
+            const resetValue = resetWrapper.querySelector('.usage-value');
+            if (resetValue) {
+              resetValue.textContent = resetsIn;
+            }
+            // Update time progress bar
+            const timeProgressFill = resetWrapper.querySelector('.time-progress-fill');
+            if (timeProgressFill && cycle && CYCLE_DURATIONS[cycle]) {
+              const resetsInSeconds = parseResetsInToSeconds(resetsIn);
+              if (resetsInSeconds !== null) {
+                const cycleDuration = CYCLE_DURATIONS[cycle];
+                const elapsedSeconds = cycleDuration - resetsInSeconds;
+                const elapsedPercent = Math.min(100, Math.max(0, (elapsedSeconds / cycleDuration) * 100));
+                timeProgressFill.style.width = elapsedPercent + '%';
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Update the "Last checked" timestamp in the nav
+    function updateLastCheckedTime() {
+      const lastCheckedEl = document.querySelector('.last-checked');
+      if (lastCheckedEl) {
+        const now = new Date();
+        const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        lastCheckedEl.textContent = 'Last checked: ' + timeStr;
+      }
+    }
+
+    // Main function to fetch /status and update DOM
+    async function performAutoRefresh() {
+      try {
+        const response = await fetch('/status');
+        if (!response.ok) {
+          console.error('[Auto-refresh] Failed to fetch /status:', response.status);
+          return;
+        }
+
+        const status = await response.json();
+        const allMetrics = [];
+
+        // Extract and update all metrics from each agent
+        for (const [agentName, agentData] of Object.entries(status)) {
+          if (!agentData.usage) continue;
+
+          let metrics = [];
+          if (agentName === 'claude') {
+            metrics = extractClaudeMetrics(agentData.usage);
+          } else if (agentName === 'gemini') {
+            metrics = extractGeminiMetrics(agentData.usage);
+          } else if (agentName === 'codex') {
+            metrics = extractCodexMetrics(agentData.usage);
+          }
+
+          // Update DOM for each metric
+          for (const metric of metrics) {
+            updateMetricDOM(metric);
+            allMetrics.push(metric);
+          }
+
+          // Update agent card error state
+          const agentCard = document.querySelector(\`.agent-card.agent-\${agentName}\`);
+          if (agentCard) {
+            if (agentData.error) {
+              agentCard.classList.add('error');
+              agentCard.classList.remove('ok', 'refreshing');
+            } else if (agentData.isRefreshing) {
+              agentCard.classList.add('refreshing');
+              agentCard.classList.remove('ok', 'error');
+            } else {
+              agentCard.classList.add('ok');
+              agentCard.classList.remove('error', 'refreshing');
+            }
+          }
+        }
+
+        // Update "Last checked" time
+        updateLastCheckedTime();
+
+        // Recalculate highest metric and update tracked metric
+        recalculateTrackedMetric(allMetrics);
+
+        // Update favicon and title based on new data
+        updateFaviconAndTitle();
+        checkAndNotify();
+
+        console.log('[Auto-refresh] Updated', allMetrics.length, 'metrics');
+      } catch (error) {
+        console.error('[Auto-refresh] Error:', error);
+      }
+    }
+
+    // Recalculate tracked metric after refresh
+    function recalculateTrackedMetric(allMetrics) {
+      if (pinnedMetric) {
+        // Manual mode: update pinned metric with fresh data
+        const freshData = allMetrics.find(m => m.metricId === pinnedMetric.metricId);
+        if (freshData) {
+          pinnedMetric.percent = freshData.percent;
+          pinnedMetric.color = getProgressColorFromPercent(freshData.percent);
+          pinnedMetric.resetsIn = freshData.resetsIn;
+          trackedMetric = pinnedMetric;
+          localStorage.setItem('pinnedMetric', JSON.stringify(pinnedMetric));
+        }
+      } else {
+        // Automatic mode: find highest usage metric
+        let highestMetric = null;
+        let highestPercent = -1;
+        for (const metric of allMetrics) {
+          if (metric.percent > highestPercent) {
+            highestPercent = metric.percent;
+            highestMetric = {
+              metricId: metric.metricId,
+              agent: metric.agent,
+              label: metric.label,
+              percent: metric.percent,
+              color: getProgressColorFromPercent(metric.percent),
+              resetsIn: metric.resetsIn
+            };
+          }
+        }
+        if (highestMetric) {
+          // Clear previous highlight
+          const prevTracked = document.querySelector('.track-btn.tracking');
+          if (prevTracked && prevTracked.dataset.metricId !== highestMetric.metricId) {
+            prevTracked.classList.remove('tracking');
+            const prevRow = document.querySelector('.usage-item.tracking');
+            if (prevRow) prevRow.classList.remove('tracking');
+          }
+          trackedMetric = highestMetric;
+          highlightTrackedMetric();
+        }
+      }
+    }
+
+    // Fetch backend configuration and initialize auto-refresh
+    async function initAutoRefreshFromBackend() {
+      try {
+        const response = await fetch('/config');
+        if (!response.ok) {
+          console.warn('[Auto-refresh] Could not fetch /config, using defaults');
+          startAutoRefreshWithConfig(autoRefreshConfig.enabled, autoRefreshConfig.interval);
+          return;
+        }
+
+        const config = await response.json();
+        const backendEnabled = config.autoRefresh?.enabled ?? false;
+        const backendInterval = config.autoRefresh?.interval ?? 0;
+        const lastRefreshedAt = config.lastRefreshedAt;
+
+        // If backend auto-refresh is disabled, disable frontend auto-refresh too
+        if (!backendEnabled || backendInterval <= 0) {
+          console.log('[Auto-refresh] Disabled (backend auto-refresh is off)');
+          autoRefreshConfig.enabled = false;
+          autoRefreshConfig.interval = 0;
+          return;
+        }
+
+        // Update frontend config to match backend
+        autoRefreshConfig.enabled = true;
+        autoRefreshConfig.interval = backendInterval * 1000;
+
+        // Calculate delay to sync with backend refresh cycle
+        let initialDelay = 2000;
+        if (lastRefreshedAt) {
+          const lastRefreshTime = new Date(lastRefreshedAt).getTime();
+          const now = Date.now();
+          const timeSinceLastRefresh = now - lastRefreshTime;
+          const intervalMs = backendInterval * 1000;
+          const timeUntilNextRefresh = intervalMs - (timeSinceLastRefresh % intervalMs);
+          initialDelay = timeUntilNextRefresh + 2000;
+          if (timeUntilNextRefresh < 1000) {
+            initialDelay = intervalMs + 2000;
+          }
+        }
+
+        console.log('[Auto-refresh] Backend interval:', backendInterval, 'seconds');
+        console.log('[Auto-refresh] Initial delay:', Math.round(initialDelay / 1000), 'seconds');
+        startAutoRefreshWithDelay(initialDelay, autoRefreshConfig.interval);
+      } catch (error) {
+        console.error('[Auto-refresh] Error fetching config:', error);
+        startAutoRefreshWithConfig(autoRefreshConfig.enabled, autoRefreshConfig.interval);
+      }
+    }
+
+    // Start auto-refresh with a specific initial delay and then regular interval
+    function startAutoRefreshWithDelay(initialDelay, interval) {
+      if (autoRefreshTimer) {
+        clearInterval(autoRefreshTimer);
+        autoRefreshTimer = null;
+      }
+      setTimeout(async () => {
+        await performAutoRefresh();
+        autoRefreshTimer = setInterval(performAutoRefresh, interval);
+        console.log('[Auto-refresh] Regular interval started:', interval, 'ms');
+      }, initialDelay);
+    }
+
+    // Start auto-refresh with given configuration
+    function startAutoRefreshWithConfig(enabled, intervalMs) {
+      if (!enabled || intervalMs === 0) {
+        console.log('[Auto-refresh] Disabled by configuration');
+        return;
+      }
+      if (autoRefreshTimer) {
+        clearInterval(autoRefreshTimer);
+      }
+      autoRefreshTimer = setInterval(performAutoRefresh, intervalMs);
+      console.log('[Auto-refresh] Started with interval:', intervalMs, 'ms');
+    }
+
+    // Stop auto-refresh polling
+    function stopAutoRefresh() {
+      if (autoRefreshTimer) {
+        clearInterval(autoRefreshTimer);
+        autoRefreshTimer = null;
+        console.log('[Auto-refresh] Stopped');
+      }
+    }
+
+    // Initialize auto-refresh from backend config on page load
+    initAutoRefreshFromBackend();
+`;
+
+module.exports = { autoRefreshScript };

package/src/client-favicon.js

@@ -0,0 +1,198 @@
+// Client-side JavaScript for favicon generation
+// This module exports a string containing the favicon generation code
+
+const faviconScript = `
+    // Generate vertical tank favicon using Canvas API
+    // Tank drains/fills based on usage - available space shown as liquid level
+    function generateProgressFavicon(percent, color) {
+      const canvas = document.createElement('canvas');
+      const size = 64; // Favicon size
+      canvas.width = size;
+      canvas.height = size;
+      const ctx = canvas.getContext('2d');
+
+      // Clear canvas
+      ctx.clearRect(0, 0, size, size);
+
+      // Tank dimensions - U-shaped vertical tank
+      const tankLeft = 12;
+      const tankRight = size - 12;
+      const tankTop = 8;
+      const tankBottom = size - 4;
+      const tankWidth = tankRight - tankLeft;
+      const tankHeight = tankBottom - tankTop;
+      const cornerRadius = 8;
+
+      // Determine fill color based on percentage thresholds
+      // 0-50% green (plenty left), 51-80% yellow (caution), 81-100% red (critical)
+      let fillColor;
+      if (percent <= 50) {
+        fillColor = '#48bb78'; // Green - plenty available
+      } else if (percent <= 80) {
+        fillColor = '#ecc94b'; // Yellow - caution
+      } else {
+        fillColor = '#e53e3e'; // Red - critical
+      }
+
+      // Calculate liquid level (inverted - 0% usage = full tank, 100% usage = empty tank)
+      const availablePercent = 100 - percent;
+      const liquidHeight = (availablePercent / 100) * (tankHeight - cornerRadius);
+      const liquidTop = tankBottom - cornerRadius - liquidHeight;
+
+      // Draw tank background (empty space)
+      ctx.fillStyle = 'rgba(100, 100, 100, 0.3)';
+      ctx.beginPath();
+      ctx.moveTo(tankLeft, tankTop);
+      ctx.lineTo(tankRight, tankTop);
+      ctx.lineTo(tankRight, tankBottom - cornerRadius);
+      ctx.quadraticCurveTo(tankRight, tankBottom, tankRight - cornerRadius, tankBottom);
+      ctx.lineTo(tankLeft + cornerRadius, tankBottom);
+      ctx.quadraticCurveTo(tankLeft, tankBottom, tankLeft, tankBottom - cornerRadius);
+      ctx.lineTo(tankLeft, tankTop);
+      ctx.closePath();
+      ctx.fill();
+
+      // Draw liquid fill
+      if (availablePercent > 0) {
+        ctx.fillStyle = fillColor;
+        ctx.beginPath();
+
+        // Start from bottom-left corner
+        if (liquidTop >= tankBottom - cornerRadius) {
+          // Liquid is below the curved part
+          ctx.moveTo(tankLeft, liquidTop);
+          ctx.lineTo(tankRight, liquidTop);
+          ctx.lineTo(tankRight, tankBottom - cornerRadius);
+          ctx.quadraticCurveTo(tankRight, tankBottom, tankRight - cornerRadius, tankBottom);
+          ctx.lineTo(tankLeft + cornerRadius, tankBottom);
+          ctx.quadraticCurveTo(tankLeft, tankBottom, tankLeft, tankBottom - cornerRadius);
+        } else {
+          // Liquid extends into the curved area or fills more
+          ctx.moveTo(tankLeft, liquidTop);
+          ctx.lineTo(tankRight, liquidTop);
+          ctx.lineTo(tankRight, tankBottom - cornerRadius);
+          ctx.quadraticCurveTo(tankRight, tankBottom, tankRight - cornerRadius, tankBottom);
+          ctx.lineTo(tankLeft + cornerRadius, tankBottom);
+          ctx.quadraticCurveTo(tankLeft, tankBottom, tankLeft, tankBottom - cornerRadius);
+        }
+        ctx.closePath();
+        ctx.fill();
+
+        // Add liquid shine effect
+        const gradient = ctx.createLinearGradient(tankLeft, 0, tankRight, 0);
+        gradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
+        gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.1)');
+        gradient.addColorStop(1, 'rgba(0, 0, 0, 0.1)');
+        ctx.fillStyle = gradient;
+        ctx.fill();
+      }
+
+      // Draw tank outline
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(tankLeft, tankTop);
+      ctx.lineTo(tankRight, tankTop);
+      ctx.lineTo(tankRight, tankBottom - cornerRadius);
+      ctx.quadraticCurveTo(tankRight, tankBottom, tankRight - cornerRadius, tankBottom);
+      ctx.lineTo(tankLeft + cornerRadius, tankBottom);
+      ctx.quadraticCurveTo(tankLeft, tankBottom, tankLeft, tankBottom - cornerRadius);
+      ctx.lineTo(tankLeft, tankTop);
+      ctx.stroke();
+
+      // Draw measurement tick marks
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+      ctx.lineWidth = 1;
+      for (let i = 1; i <= 4; i++) {
+        const tickY = tankTop + (tankHeight - cornerRadius) * (i / 5);
+        ctx.beginPath();
+        ctx.moveTo(tankLeft + 2, tickY);
+        ctx.lineTo(tankLeft + 8, tickY);
+        ctx.stroke();
+      }
+
+      // Convert to favicon
+      const faviconUrl = canvas.toDataURL('image/png');
+
+      // Update or create favicon link
+      let faviconLink = document.querySelector('link[rel="icon"]');
+      if (!faviconLink) {
+        faviconLink = document.createElement('link');
+        faviconLink.rel = 'icon';
+        document.head.appendChild(faviconLink);
+      }
+      faviconLink.href = faviconUrl;
+    }
+
+    // Generate default idle tank favicon when monitoring is not active
+    function generateDefaultFavicon() {
+      const canvas = document.createElement('canvas');
+      const size = 64;
+      canvas.width = size;
+      canvas.height = size;
+      const ctx = canvas.getContext('2d');
+
+      // Clear canvas
+      ctx.clearRect(0, 0, size, size);
+
+      // Tank dimensions - same as progress favicon
+      const tankLeft = 12;
+      const tankRight = size - 12;
+      const tankTop = 8;
+      const tankBottom = size - 4;
+      const tankWidth = tankRight - tankLeft;
+      const tankHeight = tankBottom - tankTop;
+      const cornerRadius = 8;
+
+      // Draw empty tank background (no liquid)
+      ctx.fillStyle = 'rgba(100, 100, 100, 0.25)';
+      ctx.beginPath();
+      ctx.moveTo(tankLeft, tankTop);
+      ctx.lineTo(tankRight, tankTop);
+      ctx.lineTo(tankRight, tankBottom - cornerRadius);
+      ctx.quadraticCurveTo(tankRight, tankBottom, tankRight - cornerRadius, tankBottom);
+      ctx.lineTo(tankLeft + cornerRadius, tankBottom);
+      ctx.quadraticCurveTo(tankLeft, tankBottom, tankLeft, tankBottom - cornerRadius);
+      ctx.lineTo(tankLeft, tankTop);
+      ctx.closePath();
+      ctx.fill();
+
+      // Draw tank outline (subdued color for idle state)
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(tankLeft, tankTop);
+      ctx.lineTo(tankRight, tankTop);
+      ctx.lineTo(tankRight, tankBottom - cornerRadius);
+      ctx.quadraticCurveTo(tankRight, tankBottom, tankRight - cornerRadius, tankBottom);
+      ctx.lineTo(tankLeft + cornerRadius, tankBottom);
+      ctx.quadraticCurveTo(tankLeft, tankBottom, tankLeft, tankBottom - cornerRadius);
+      ctx.lineTo(tankLeft, tankTop);
+      ctx.stroke();
+
+      // Draw measurement tick marks (subdued)
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+      ctx.lineWidth = 1;
+      for (let i = 1; i <= 4; i++) {
+        const tickY = tankTop + (tankHeight - cornerRadius) * (i / 5);
+        ctx.beginPath();
+        ctx.moveTo(tankLeft + 2, tickY);
+        ctx.lineTo(tankLeft + 8, tickY);
+        ctx.stroke();
+      }
+
+      // Convert to favicon
+      const faviconUrl = canvas.toDataURL('image/png');
+
+      // Update or create favicon link
+      let faviconLink = document.querySelector('link[rel="icon"]');
+      if (!faviconLink) {
+        faviconLink = document.createElement('link');
+        faviconLink.rel = 'icon';
+        document.head.appendChild(faviconLink);
+      }
+      faviconLink.href = faviconUrl;
+    }
+`;
+
+module.exports = { faviconScript };