...

pkg/heroagent/web/static/js/admin.js

@@ -0,0 +1,239 @@
+// Admin Dashboard JavaScript - Documentation Style
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Highlight active navigation links
+  highlightActiveLinks();
+  
+  // Setup UI toggles
+  setupUIToggles();
+  
+  // Setup search functionality
+  setupSearch();
+});
+
+// Highlight the current active navigation links
+function highlightActiveLinks() {
+  const currentPath = window.location.pathname;
+  
+  // Handle top navigation links
+  const navLinks = document.querySelectorAll('.nav-link');
+  navLinks.forEach(link => {
+    link.classList.remove('active');
+    const href = link.getAttribute('href');
+    
+    // Check if current path starts with the nav link path
+    // This allows section links to be highlighted when on sub-pages
+    if (currentPath === href || 
+        (href !== '/admin' && currentPath.startsWith(href))) {
+      link.classList.add('active');
+    }
+  });
+  
+  // Handle sidebar links
+  const sidebarLinks = document.querySelectorAll('.doc-link');
+  sidebarLinks.forEach(link => {
+    link.classList.remove('active');
+    if (link.getAttribute('href') === currentPath) {
+      link.classList.add('active');
+      
+      // Also highlight parent section if needed
+      const parentSection = link.closest('.sidebar-section');
+      if (parentSection) {
+        parentSection.classList.add('active-section');
+      }
+    }
+  });
+}
+
+// Setup UI toggle functionality
+function setupUIToggles() {
+  // Toggle sidebar on mobile
+  const menuToggle = document.querySelector('.menu-toggle');
+  const sidebar = document.querySelector('.sidebar');
+  
+  if (menuToggle && sidebar) {
+    menuToggle.addEventListener('click', function() {
+      sidebar.classList.toggle('open');
+    });
+  }
+  
+  // Toggle log panel
+  const logToggle = document.querySelector('.log-toggle');
+  const logPanel = document.querySelector('.log-panel');
+  
+  if (logToggle && logPanel) {
+    logToggle.addEventListener('click', function() {
+      logPanel.classList.toggle('open');
+    });
+  }
+  
+  // Setup Docusaurus-style collapsible menu
+  setupTreeviewMenu();
+}
+
+// Setup sidebar navigation
+function setupTreeviewMenu() {
+  // Set active sidebar links based on current URL
+  setActiveSidebarLinks();
+  
+  // Setup collapsible sections
+  setupCollapsibleSections();
+}
+
+// Set active sidebar links based on current URL
+function setActiveSidebarLinks() {
+  const currentPath = window.location.pathname;
+  
+  // Find all sidebar links
+  const sidebarLinks = document.querySelectorAll('.sidebar-link');
+  
+  // Remove any existing active classes
+  sidebarLinks.forEach(link => {
+    link.classList.remove('active');
+  });
+  
+  // Find and mark active links
+  let activeFound = false;
+  sidebarLinks.forEach(link => {
+    const linkPath = link.getAttribute('href');
+    
+    // Check if the current path matches or starts with the link path
+    // For exact matches or if it's a parent path
+    if (currentPath === linkPath || 
+        (linkPath !== '/admin' && currentPath.startsWith(linkPath))) {
+      // Mark this link as active
+      link.classList.add('active');
+      activeFound = true;
+      
+      // Expand the parent section if this link is inside a collapsible section
+      const parentSection = link.closest('.sidebar-content-section')?.parentElement;
+      if (parentSection && parentSection.classList.contains('collapsible')) {
+        parentSection.classList.remove('collapsed');
+      }
+    }
+  });
+}
+
+// Setup collapsible sections
+function setupCollapsibleSections() {
+  // Find all toggle headings
+  const toggleHeadings = document.querySelectorAll('.sidebar-heading.toggle');
+  
+  // Set all sections as collapsed by default
+  document.querySelectorAll('.sidebar-section.collapsible').forEach(section => {
+    section.classList.add('collapsed');
+  });
+  
+  toggleHeadings.forEach(heading => {
+    // Add click event to toggle section
+    heading.addEventListener('click', function() {
+      const section = this.parentElement;
+      section.classList.toggle('collapsed');
+    });
+  });
+  
+  // Open the section that contains the active link
+  const activeLink = document.querySelector('.sidebar-link.active');
+  if (activeLink) {
+    const parentSection = activeLink.closest('.sidebar-section.collapsible');
+    if (parentSection) {
+      parentSection.classList.remove('collapsed');
+    }
+  }
+}
+
+// Refresh processes data without page reload
+function refreshProcesses() {
+  // Show loading indicator
+  const loadingIndicator = document.getElementById('refresh-loading');
+  if (loadingIndicator) {
+    loadingIndicator.style.display = 'inline';
+  }
+  
+  // Get the processes content element
+  const tableContent = document.querySelector('.processes-table-content');
+  
+  // Use Unpoly to refresh the content
+  if (tableContent && window.up) {
+    // Use Unpoly's API to reload the fragment
+    up.reload('.processes-table-content', {
+      url: '/admin/system/processes-data',
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    }).then(() => {
+      console.log('Process data refreshed successfully via Unpoly');
+    }).catch(error => {
+      console.error('Error refreshing processes data:', error);
+    }).finally(() => {
+      // Hide loading indicator
+      if (loadingIndicator) {
+        loadingIndicator.style.display = 'none';
+      }
+    });
+  } else {
+    // Fallback to fetch if Unpoly is not available
+    fetch('/admin/system/processes-data', {
+      method: 'GET',
+      headers: {
+        'Accept': 'text/html',
+        'X-Requested-With': 'XMLHttpRequest'
+      },
+      cache: 'no-store'
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok: ' + response.status);
+      }
+      return response.text();
+    })
+    .then(html => {
+      // Update the processes table content
+      if (tableContent) {
+        // Replace the table content with the new HTML
+        tableContent.innerHTML = html;
+        console.log('Process data refreshed successfully via fetch');
+      } else {
+        console.error('Could not find processes table content element');
+      }
+    })
+    .catch(error => {
+      console.error('Error refreshing processes data:', error);
+    })
+    .finally(() => {
+      // Hide loading indicator
+      if (loadingIndicator) {
+        loadingIndicator.style.display = 'none';
+      }
+    });
+  }
+}
+
+// Note: Logging functionality has been moved to Unpoly-based implementation
+
+// Setup search functionality
+function setupSearch() {
+  const searchInput = document.querySelector('.search-box input');
+  if (searchInput) {
+    searchInput.addEventListener('keyup', function(e) {
+      if (e.key === 'Enter') {
+        performSearch(this.value);
+      }
+    });
+  }
+}
+
+// Perform search
+function performSearch(query) {
+  if (!query.trim()) return;
+  
+  // Log the search query
+  window.adminLog(`Searching for: ${query}`, 'info');
+  
+  // In a real application, this would send an AJAX request to search the docs
+  // For now, just simulate a search by redirecting to a search results page
+  // window.location.href = `/admin/search?q=${encodeURIComponent(query)}`;
+  
+  // For demo purposes, show a message in the console
+  console.log(`Search query: ${query}`);
+}

pkg/heroagent/web/static/js/charts/cpu-chart.js

@@ -0,0 +1,89 @@
+// CPU chart initialization and update functions
+document.addEventListener('DOMContentLoaded', function() {
+  // Background color for charts
+  var chartBgColor = '#1e1e2f';
+  
+  // Initialize CPU chart
+  var cpuChartDom = document.getElementById('cpu-chart');
+  if (!cpuChartDom) return;
+  
+  var cpuChart = echarts.init(cpuChartDom, {renderer: 'canvas', useDirtyRect: false, backgroundColor: chartBgColor});
+  var cpuOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: function(params) {
+        // Get the PID from the data
+        var pid = params.data.pid || 'N/A';
+        return params.seriesName + '<br/>' + 
+               params.name + ' (PID: ' + pid + ')<br/>' + 
+               'CPU: ' + Math.round(params.value) + '%';
+      }
+    },
+    legend: {
+      orient: 'vertical',
+      left: 10,
+      top: 'center',
+      textStyle: {
+        color: '#fff'
+      },
+      formatter: function(name) {
+        // Display full process name without truncation
+        return name;
+      },
+      itemGap: 8,
+      itemWidth: 15,
+      padding: 10
+    },
+    series: [
+      {
+        name: 'Process CPU Usage',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 16,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [{ name: 'Loading...', value: 100 }]
+      }
+    ]
+  };
+  cpuChart.setOption(cpuOption);
+  
+  // Function to update CPU chart
+  window.updateCpuChart = function(processes) {
+    // Calculate total CPU usage for top 5 processes
+    var topProcesses = processes.slice(0, 5);
+    var cpuUsageData = topProcesses.map(p => ({
+      name: p.name, // Use full process name
+      value: p.cpu_percent,
+      pid: p.pid // Store PID for tooltip
+    }));
+    
+    // Update chart option
+    cpuOption.series[0].data = cpuUsageData;
+    
+    // Apply updated option
+    cpuChart.setOption(cpuOption);
+  };
+  
+  // Handle window resize
+  window.addEventListener('resize', function() {
+    cpuChart && cpuChart.resize();
+  });
+});

pkg/heroagent/web/static/js/charts/memory-chart.js

@@ -0,0 +1,96 @@
+// Memory chart initialization and update functions
+document.addEventListener('DOMContentLoaded', function() {
+  // Background color for charts
+  var chartBgColor = '#1e1e2f';
+  
+  // Initialize Memory chart
+  var memoryChartDom = document.getElementById('memory-chart');
+  if (!memoryChartDom) return;
+  
+  var memoryChart = echarts.init(memoryChartDom, {renderer: 'canvas', useDirtyRect: false, backgroundColor: chartBgColor});
+  var memoryOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: function(params) {
+        // Get the PID from the data
+        var pid = params.data.pid || 'N/A';
+        return params.seriesName + '<br/>' + 
+               params.name + ' (PID: ' + pid + ')<br/>' + 
+               'Memory: ' + Math.round(params.value) + ' MB';
+      },
+      textStyle: {
+        fontSize: 14
+      }
+    },
+    legend: {
+      orient: 'vertical',
+      left: 10,
+      top: 'center',
+      textStyle: {
+        color: '#fff'
+      },
+      formatter: function(name) {
+        // Display full process name without truncation
+        return name;
+      },
+      itemGap: 12, // Increased gap for better readability
+      itemWidth: 15,
+      padding: 10
+    },
+    series: [
+      {
+        name: 'Process Memory Usage',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 16,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [{ name: 'Loading...', value: 100 }]
+      }
+    ]
+  };
+  memoryChart.setOption(memoryOption);
+  
+  // Function to update Memory chart
+  window.updateMemoryChart = function(processes) {
+    // Sort processes by memory usage (descending)
+    var topProcesses = processes
+      .slice()
+      .sort((a, b) => b.memory_mb - a.memory_mb)
+      .slice(0, 5);
+    
+    var memoryUsageData = topProcesses.map(p => ({
+      name: p.name, // Use full process name
+      value: p.memory_mb,
+      pid: p.pid // Store PID for tooltip
+    }));
+    
+    // Update chart option
+    memoryOption.series[0].data = memoryUsageData;
+    
+    // Apply updated option
+    memoryChart.setOption(memoryOption);
+  };
+  
+  // Handle window resize
+  window.addEventListener('resize', function() {
+    memoryChart && memoryChart.resize();
+  });
+});

pkg/heroagent/web/static/js/charts/network-chart.js

@@ -0,0 +1,116 @@
+// Network chart initialization and update functions
+document.addEventListener('DOMContentLoaded', function() {
+  // Background color for charts
+  var chartBgColor = '#1e1e2f';
+  
+  // Initialize network chart
+  var networkChartDom = document.getElementById('network-chart');
+  if (!networkChartDom) return;
+  
+  var networkChart = echarts.init(networkChartDom, {renderer: 'canvas', useDirtyRect: false, backgroundColor: chartBgColor});
+  var networkOption = {
+    title: {
+      text: 'Network Traffic',
+      left: 'center',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['Upload', 'Download'],
+      textStyle: {
+        color: '#fff'
+      },
+      bottom: 10
+    },
+    xAxis: {
+      type: 'category',
+      data: [],
+      axisLabel: {
+        color: '#fff'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: '#fff',
+        formatter: '{value} KB/s'
+      }
+    },
+    series: [
+      {
+        name: 'Upload',
+        type: 'line',
+        data: []
+      },
+      {
+        name: 'Download',
+        type: 'line',
+        data: []
+      }
+    ]
+  };
+  networkChart.setOption(networkOption);
+  
+  // Data for network chart
+  var timestamps = [];
+  var uploadData = [];
+  var downloadData = [];
+  
+  // Function to update network chart
+  window.updateNetworkChart = function(upSpeed, downSpeed) {
+    // Convert speeds to KB/s for consistent units
+    var upKBps = convertToKBps(upSpeed);
+    var downKBps = convertToKBps(downSpeed);
+    
+    // Add current timestamp
+    var now = new Date();
+    var timeString = now.getHours() + ':' + 
+                    (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()) + ':' + 
+                    (now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds());
+    
+    // Update data arrays
+    timestamps.push(timeString);
+    uploadData.push(upKBps);
+    downloadData.push(downKBps);
+    
+    // Keep only the last 10 data points
+    if (timestamps.length > 10) {
+      timestamps.shift();
+      uploadData.shift();
+      downloadData.shift();
+    }
+    
+    // Update chart option
+    networkOption.xAxis.data = timestamps;
+    networkOption.series[0].data = uploadData;
+    networkOption.series[1].data = downloadData;
+    
+    // Apply updated option
+    networkChart.setOption(networkOption);
+  };
+  
+  // Helper function to convert network speeds to KB/s
+  function convertToKBps(speedString) {
+    var value = parseFloat(speedString);
+    var unit = speedString.replace(/[\d.]/g, '');
+    
+    if (unit === 'Mbps') {
+      return value * 125; // 1 Mbps = 125 KB/s
+    } else if (unit === 'Kbps') {
+      return value / 8; // 1 Kbps = 0.125 KB/s
+    } else if (unit === 'Gbps') {
+      return value * 125000; // 1 Gbps = 125000 KB/s
+    } else {
+      return 0;
+    }
+  }
+  
+  // Handle window resize
+  window.addEventListener('resize', function() {
+    networkChart && networkChart.resize();
+  });
+});

pkg/heroagent/web/static/js/charts/stats-fetcher.js

@@ -0,0 +1,88 @@
+// Data fetching functions for system stats
+document.addEventListener('DOMContentLoaded', function() {
+  // Function to fetch hardware stats
+  function fetchHardwareStats() {
+    fetch('/api/hardware-stats')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        // Extract network speeds
+        var upSpeed = data.network && data.network.upload_speed ? data.network.upload_speed : '0Mbps';
+        var downSpeed = data.network && data.network.download_speed ? data.network.download_speed : '0Mbps';
+        
+        // Update the network chart
+        if (window.updateNetworkChart) {
+          window.updateNetworkChart(upSpeed, downSpeed);
+        }
+      })
+      .catch(error => {
+        console.error('Error fetching hardware stats:', error);
+      });
+  }
+  
+  // Function to fetch process stats
+  function fetchProcessStats() {
+    fetch('/api/process-stats')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        // Update the CPU and Memory charts with new data
+        if (window.updateCpuChart && data.processes) {
+          window.updateCpuChart(data.processes);
+        }
+        if (window.updateMemoryChart && data.processes) {
+          window.updateMemoryChart(data.processes);
+        }
+      })
+      .catch(error => {
+        console.error('Error fetching process stats:', error);
+      });
+  }
+  
+  // Function to fetch all stats
+  function fetchAllStats() {
+    fetchHardwareStats();
+    fetchProcessStats();
+    
+    // Schedule the next update - use requestAnimationFrame for smoother updates
+    requestAnimationFrame(function() {
+      setTimeout(fetchAllStats, 2000); // Update every 2 seconds
+    });
+  }
+  
+  // Start fetching all stats if we're on the system info page
+  if (document.getElementById('cpu-chart') || 
+      document.getElementById('memory-chart') || 
+      document.getElementById('network-chart')) {
+    fetchAllStats();
+  }
+  
+  // Also update the chart when new hardware stats are loaded via Unpoly
+  document.addEventListener('up:fragment:loaded', function(event) {
+    if (event.target && event.target.classList.contains('hardware-stats')) {
+      // Extract network speeds from the table
+      var networkCell = event.target.querySelector('tr:nth-child(4) td');
+      if (networkCell) {
+        var networkText = networkCell.textContent;
+        var upMatch = networkText.match(/Up: ([\d.]+Mbps)/);
+        var downMatch = networkText.match(/Down: ([\d.]+Mbps)/);
+        
+        var upSpeed = upMatch ? upMatch[1] : '0Mbps';
+        var downSpeed = downMatch ? downMatch[1] : '0Mbps';
+        
+        // Update the chart with new data
+        if (window.updateNetworkChart) {
+          window.updateNetworkChart(upSpeed, downSpeed);
+        }
+      }
+    }
+  });
+});

pkg/heroagent/web/static/js/service-logs.js

@@ -0,0 +1,305 @@
+// Variables for logs functionality
+let currentServiceName = '';
+let autoRefreshEnabled = false;
+let autoRefreshInterval = null;
+const AUTO_REFRESH_RATE = 3000; // 3 seconds
+
+// Function to show process logs
+function showProcessLogs(name) {
+  currentServiceName = name;
+  
+  // Create modal if it doesn't exist
+  let modal = document.getElementById('logs-modal');
+  if (!modal) {
+    modal = createLogsModal();
+  }
+  
+  document.getElementById('logs-modal-title').textContent = `Service Logs: ${name}`;
+  modal.style.display = 'block';
+  fetchProcessLogs(name);
+}
+
+// Function to create the logs modal
+function createLogsModal() {
+  const modal = document.createElement('div');
+  modal.id = 'logs-modal';
+  modal.className = 'modal';
+  modal.style.display = 'none';
+  modal.innerHTML = `
+    <div class="modal-background" onclick="closeLogsModal()"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 id="logs-modal-title">Service Logs</h3>
+        <span class="close" onclick="closeLogsModal()">&times;</span>
+      </div>
+      <div class="modal-body">
+        <pre id="logs-content">Loading logs...</pre>
+      </div>
+      <div class="modal-footer">
+        <label class="auto-refresh-toggle">
+          <input type="checkbox" id="auto-refresh-checkbox" onchange="toggleAutoRefresh()">
+          <span>Auto-refresh</span>
+        </label>
+        <button class="button secondary" onclick="closeLogsModal()">Close</button>
+        <button class="button primary" onclick="refreshLogs()">Refresh</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+  
+  // Add modal styles
+  const style = document.createElement('style');
+  style.textContent = `
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0,0,0,0.4);
+    }
+    
+    .modal-content {
+      background-color: #fefefe;
+      margin: 10% auto;
+      padding: 0;
+      border: 1px solid #888;
+      width: 80%;
+      max-width: 800px;
+      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+      border-radius: 4px;
+    }
+    
+    .modal-header {
+      padding: 10px 15px;
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #dee2e6;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .modal-header h3 {
+      margin: 0;
+    }
+    
+    .close {
+      color: #aaa;
+      font-size: 28px;
+      font-weight: bold;
+      cursor: pointer;
+    }
+    
+    .close:hover,
+    .close:focus {
+      color: black;
+      text-decoration: none;
+    }
+    
+    .modal-body {
+      padding: 15px;
+      max-height: 500px;
+      overflow-y: auto;
+    }
+    
+    .modal-body pre {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      background-color: #f8f9fa;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid #dee2e6;
+      font-family: monospace;
+      margin: 0;
+      height: 400px;
+      overflow-y: auto;
+    }
+    
+    .modal-footer {
+      padding: 10px 15px;
+      background-color: #f8f9fa;
+      border-top: 1px solid #dee2e6;
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+    
+    .auto-refresh-toggle {
+      display: flex;
+      align-items: center;
+      margin-right: auto;
+      cursor: pointer;
+    }
+    
+    .auto-refresh-toggle input {
+      margin-right: 5px;
+    }
+  `;
+  document.head.appendChild(style);
+  
+  return modal;
+}
+
+// Function to close the logs modal
+function closeLogsModal() {
+  const modal = document.getElementById('logs-modal');
+  if (modal) {
+    modal.style.display = 'none';
+  }
+  
+  // Disable auto-refresh when closing the modal
+  disableAutoRefresh();
+  currentServiceName = '';
+}
+
+// Function to fetch process logs
+function fetchProcessLogs(name, lines = 10000) {
+  const formData = new FormData();
+  formData.append('name', name);
+  formData.append('lines', lines);
+  
+  const logsContent = document.getElementById('logs-content');
+  if (!logsContent) return;
+  
+  // Save scroll position if auto-refreshing
+  const isAutoRefresh = autoRefreshEnabled;
+  const scrollTop = isAutoRefresh ? logsContent.scrollTop : 0;
+  const scrollHeight = isAutoRefresh ? logsContent.scrollHeight : 0;
+  const clientHeight = isAutoRefresh ? logsContent.clientHeight : 0;
+  const wasScrolledToBottom = scrollHeight - scrollTop <= clientHeight + 5; // 5px tolerance
+  
+  // Only show loading indicator on first load, not during auto-refresh
+  if (!isAutoRefresh) {
+    logsContent.textContent = 'Loading logs...';
+  }
+  
+  fetch('/admin/services/logs', {
+    method: 'POST',
+    body: formData
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data.error) {
+        logsContent.textContent = `Error: ${data.error}`;
+      } else {
+        // Clean up the logs by removing **RESULT** and **ENDRESULT** markers
+        let cleanedLogs = data.logs || 'No logs available';
+        cleanedLogs = cleanedLogs.replace(/\*\*RESULT\*\*/g, '');
+        cleanedLogs = cleanedLogs.replace(/\*\*ENDRESULT\*\*/g, '');
+        // Trim extra whitespace
+        cleanedLogs = cleanedLogs.trim();
+        
+        // Format the logs with stderr lines in red
+        if (cleanedLogs.length > 0) {
+          // Clear the logs content
+          logsContent.textContent = '';
+          
+          // Split the logs into lines and process each line
+          const lines = cleanedLogs.split('\n');
+          lines.forEach(line => {
+            const logLine = document.createElement('div');
+            
+            // Check if this is a stderr line (starts with timestamp followed by E)
+            if (line.match(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2} E /)) {
+              logLine.className = 'stderr-log';
+              logLine.style.color = '#ff3333'; // Red color for stderr
+            }
+            
+            logLine.textContent = line;
+            logsContent.appendChild(logLine);
+          });
+          
+          // Add some styling for the pre element to maintain formatting
+          logsContent.style.fontFamily = 'monospace';
+          logsContent.style.whiteSpace = 'pre-wrap';
+          
+          // Scroll to bottom for first load or if auto-refreshing and was at bottom
+          if (!isAutoRefresh || wasScrolledToBottom) {
+            // Scroll to the bottom of the logs
+            logsContent.scrollTop = logsContent.scrollHeight;
+          } else {
+            // For auto-refresh when not at bottom, maintain the same scroll position
+            logsContent.scrollTop = scrollTop;
+          }
+        } else {
+          logsContent.textContent = 'No logs available';
+        }
+      }
+    })
+    .catch(error => {
+      logsContent.textContent = `Error loading logs: ${error.message}`;
+    });
+}
+
+// Function to refresh logs for the current service
+function refreshLogs() {
+  if (currentServiceName) {
+    fetchProcessLogs(currentServiceName);
+  }
+}
+
+// Function to toggle auto-refresh
+function toggleAutoRefresh() {
+  const checkbox = document.getElementById('auto-refresh-checkbox');
+  if (checkbox && checkbox.checked) {
+    enableAutoRefresh();
+  } else {
+    disableAutoRefresh();
+  }
+}
+
+// Function to enable auto-refresh
+function enableAutoRefresh() {
+  // Don't create multiple intervals
+  if (autoRefreshInterval) {
+    clearInterval(autoRefreshInterval);
+  }
+  
+  // Set the flag
+  autoRefreshEnabled = true;
+  
+  // Create the interval
+  autoRefreshInterval = setInterval(() => {
+    if (currentServiceName) {
+      fetchProcessLogs(currentServiceName);
+    }
+  }, AUTO_REFRESH_RATE);
+  
+  console.log('Auto-refresh enabled with interval:', AUTO_REFRESH_RATE, 'ms');
+}
+
+// Function to disable auto-refresh
+function disableAutoRefresh() {
+  autoRefreshEnabled = false;
+  
+  if (autoRefreshInterval) {
+    clearInterval(autoRefreshInterval);
+    autoRefreshInterval = null;
+  }
+  
+  // Uncheck the checkbox if it exists
+  const checkbox = document.getElementById('auto-refresh-checkbox');
+  if (checkbox) {
+    checkbox.checked = false;
+  }
+  
+  console.log('Auto-refresh disabled');
+}
+
+// Close modal when clicking outside of it
+window.addEventListener('click', function(event) {
+  const modal = document.getElementById('logs-modal');
+  if (modal && event.target === modal) {
+    closeLogsModal();
+  }
+});
+
+// Allow ESC key to close the modal
+document.addEventListener('keydown', function(event) {
+  if (event.key === 'Escape') {
+    closeLogsModal();
+  }
+});

pkg/heroagent/web/static/js/services.js

@@ -0,0 +1,260 @@
+// Function to refresh services
+function refreshServices() {
+    const servicesTable = document.getElementById('services-table');
+    fetch('/admin/services/data')
+        .then(response => {
+            if (!response.ok) {
+                return response.json().then(err => {
+                    throw new Error(err.error || 'Failed to refresh services');
+                });
+            }
+            return response.text();
+        })
+        .then(html => {
+            servicesTable.innerHTML = html;
+        })
+        .catch(error => {
+            console.error('Error refreshing services:', error);
+            // Show error message in the services table instead of replacing it
+            const errorHtml = `<table><tbody><tr><td colspan="4"><div class="alert alert-danger">Error refreshing services: ${error.message}</div></td></tr></tbody></table>`;
+            servicesTable.innerHTML = errorHtml;
+            // Try again after a short delay
+            setTimeout(() => {
+                refreshServices();
+            }, 3000);
+        });
+}
+
+// Refresh services as soon as the page loads
+document.addEventListener('DOMContentLoaded', function() {
+    refreshServices();
+});
+
+// Function to start a new service
+function startService(event) {
+    event.preventDefault();
+    const form = document.getElementById('start-service-form');
+    const resultDiv = document.getElementById('start-result');
+    
+    const formData = new FormData(form);
+    
+    fetch('/admin/services/start', {
+        method: 'POST',
+        body: formData
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                resultDiv.className = 'alert alert-danger';
+                resultDiv.textContent = data.error;
+            } else {
+                resultDiv.className = 'alert alert-success';
+                resultDiv.textContent = data.message;
+                form.reset();
+                refreshServices();
+            }
+            resultDiv.style.display = 'block';
+            setTimeout(() => {
+                resultDiv.style.display = 'none';
+            }, 5000);
+        })
+        .catch(error => {
+            resultDiv.className = 'alert alert-danger';
+            resultDiv.textContent = 'An error occurred: ' + error.message;
+            resultDiv.style.display = 'block';
+        });
+}
+
+// Function to stop a process
+function stopProcess(name) {
+    if (!confirm('Are you sure you want to stop this service?')) return;
+    
+    const formData = new FormData();
+    formData.append('name', name);
+    
+    fetch('/admin/services/stop', {
+        method: 'POST',
+        body: formData
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert('Error: ' + data.error);
+            } else {
+                refreshServices();
+            }
+        })
+        .catch(error => {
+            alert('An error occurred: ' + error.message);
+        });
+}
+
+// Function to restart a process
+function restartProcess(name) {
+    if (!confirm('Are you sure you want to restart this service?')) return;
+    
+    const formData = new FormData();
+    formData.append('name', name);
+    
+    fetch('/admin/services/restart', {
+        method: 'POST',
+        body: formData
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert('Error: ' + data.error);
+            } else {
+                refreshServices();
+            }
+        })
+        .catch(error => {
+            alert('An error occurred: ' + error.message);
+        });
+}
+
+// Function to delete a process
+function deleteProcess(name) {
+    if (!confirm('Are you sure you want to delete this service? This cannot be undone.')) return;
+    
+    const formData = new FormData();
+    formData.append('name', name);
+    
+    fetch('/admin/services/delete', {
+        method: 'POST',
+        body: formData
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert('Error: ' + data.error);
+            } else {
+                refreshServices();
+            }
+        })
+        .catch(error => {
+            alert('An error occurred: ' + error.message);
+        });
+}
+
+// Function to show process logs
+function showProcessLogs(name) {
+    // Create a modal to show logs
+    const modal = document.createElement('div');
+    modal.className = 'modal';
+    modal.innerHTML = `
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Logs for ${name}</h2>
+                <span class="close">&times;</span>
+            </div>
+            <div class="modal-body">
+                <pre id="log-content" style="height: 400px; overflow-y: auto; background: #f5f5f5; padding: 10px;">Loading logs...</pre>
+            </div>
+            <div class="modal-footer">
+                <button class="button refresh" onclick="refreshLogs('${name}')">Refresh Logs</button>
+                <button class="button secondary" onclick="closeModal()">Close</button>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(modal);
+    
+    // Add modal styles if not already present
+    if (!document.getElementById('modal-styles')) {
+        const style = document.createElement('style');
+        style.id = 'modal-styles';
+        style.innerHTML = `
+            .modal {
+                display: block;
+                position: fixed;
+                z-index: 1000;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0,0,0,0.4);
+            }
+            .modal-content {
+                background-color: #fefefe;
+                margin: 5% auto;
+                padding: 20px;
+                border: 1px solid #888;
+                width: 80%;
+                max-width: 800px;
+                border-radius: 5px;
+                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            }
+            .modal-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                border-bottom: 1px solid #eee;
+                padding-bottom: 10px;
+                margin-bottom: 15px;
+            }
+            .modal-footer {
+                border-top: 1px solid #eee;
+                padding-top: 15px;
+                margin-top: 15px;
+                text-align: right;
+            }
+            .close {
+                color: #aaa;
+                font-size: 28px;
+                font-weight: bold;
+                cursor: pointer;
+            }
+            .close:hover {
+                color: black;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
+    // Close modal when clicking the X
+    modal.querySelector('.close').onclick = closeModal;
+    
+    // Load the logs
+    loadLogs(name);
+    
+    // Close modal when clicking outside
+    window.onclick = function(event) {
+        if (event.target === modal) {
+            closeModal();
+        }
+    };
+}
+
+// Function to load logs
+function loadLogs(name) {
+    fetch(`/admin/services/logs?name=${encodeURIComponent(name)}&lines=100`)
+        .then(response => response.json())
+        .then(data => {
+            const logContent = document.getElementById('log-content');
+            if (data.error) {
+                logContent.textContent = `Error: ${data.error}`;
+            } else {
+                logContent.textContent = data.logs || 'No logs available';
+                // Scroll to bottom
+                logContent.scrollTop = logContent.scrollHeight;
+            }
+        })
+        .catch(error => {
+            document.getElementById('log-content').textContent = `Error loading logs: ${error.message}`;
+        });
+}
+
+// Function to refresh logs
+function refreshLogs(name) {
+    document.getElementById('log-content').textContent = 'Refreshing logs...';
+    loadLogs(name);
+}
+
+// Function to close the modal
+function closeModal() {
+    const modal = document.querySelector('.modal');
+    if (modal) {
+        document.body.removeChild(modal);
+    }
+    window.onclick = null;
+}