...

pkg/heroagent/web/endpoint_test.go

@@ -0,0 +1,132 @@
+package web
+
+import (
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"strings"
+	"testing"
+	"time"
+)
+
+// TestConfig holds configuration for the tests
+type TestConfig struct {
+	BaseURL string
+	Timeout time.Duration
+}
+
+// NewTestConfig creates a new test configuration
+func NewTestConfig() *TestConfig {
+	return &TestConfig{
+		BaseURL: "http://localhost:9021",
+		Timeout: 5 * time.Second,
+	}
+}
+
+// testEndpoint tests a single endpoint
+func testEndpoint(t *testing.T, config *TestConfig, method, path string, expectedStatus int, formData map[string]string) {
+	t.Helper()
+
+	client := &http.Client{
+		Timeout: config.Timeout,
+	}
+
+	var req *http.Request
+	var err error
+
+	fullURL := config.BaseURL + path
+
+	if method == "GET" {
+		req, err = http.NewRequest(method, fullURL, nil)
+	} else if method == "POST" {
+		if formData != nil {
+			form := make(url.Values)
+			for key, value := range formData {
+				form.Add(key, value)
+			}
+			req, err = http.NewRequest(method, fullURL, strings.NewReader(form.Encode()))
+			if err == nil {
+				req.Header.Add("Content-Type", "application/x-www-form-urlencoded")
+			}
+		} else {
+			req, err = http.NewRequest(method, fullURL, nil)
+		}
+	}
+
+	if err != nil {
+		t.Fatalf("Failed to create request: %v", err)
+	}
+
+	resp, err := client.Do(req)
+	if err != nil {
+		t.Fatalf("Failed to make request: %v", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != expectedStatus {
+		body, _ := io.ReadAll(resp.Body)
+		t.Errorf("Expected status %d for %s %s, got %d. Response: %s",
+			expectedStatus, method, path, resp.StatusCode, string(body))
+	} else {
+		t.Logf("✅ %s %s - Status: %d", method, path, resp.StatusCode)
+	}
+}
+
+// TestGetEndpoints tests all GET endpoints
+func TestGetEndpoints(t *testing.T) {
+	config := NewTestConfig()
+
+	// All endpoints to test
+	getEndpoints := []string{
+		"/",                       // Root redirect to admin
+		"/admin",                  // Admin dashboard
+		"/admin/system/info",      // System info page
+		"/admin/services",         // Services page
+		"/admin/system/processes", // Processes page
+		"/admin/system/logs",      // System logs page
+		"/admin/system/settings",  // System settings page
+	}
+
+	// Test all endpoints
+	for _, endpoint := range getEndpoints {
+		t.Run(fmt.Sprintf("GET %s", endpoint), func(t *testing.T) {
+			testEndpoint(t, config, "GET", endpoint, http.StatusOK, nil)
+		})
+	}
+}
+
+// TestAPIEndpoints tests all API endpoints
+func TestAPIEndpoints(t *testing.T) {
+	t.Skip("API endpoints need to be fixed")
+	config := NewTestConfig()
+
+	apiEndpoints := []string{
+		"/admin/api/hardware-stats", // Hardware stats API
+		"/admin/api/process-stats",  // Process stats API
+	}
+
+	for _, endpoint := range apiEndpoints {
+		t.Run(fmt.Sprintf("GET %s", endpoint), func(t *testing.T) {
+			testEndpoint(t, config, "GET", endpoint, http.StatusOK, nil)
+		})
+	}
+}
+
+// TestFragmentEndpoints tests all fragment endpoints used for AJAX updates
+func TestFragmentEndpoints(t *testing.T) {
+	config := NewTestConfig()
+
+	// All fragment endpoints to test
+	fragmentEndpoints := []string{
+		"/admin/system/hardware-stats", // Hardware stats fragment
+		"/admin/system/processes-data", // Processes data fragment
+	}
+
+	// Test all fragment endpoints
+	for _, endpoint := range fragmentEndpoints {
+		t.Run(fmt.Sprintf("GET %s", endpoint), func(t *testing.T) {
+			testEndpoint(t, config, "GET", endpoint, http.StatusOK, nil)
+		})
+	}
+}

pkg/heroagent/web/static/css/admin.css

@@ -0,0 +1,739 @@
+/* Admin Dashboard Styles */
+
+/* Base Font Size and Typography */
+:root {
+  --pico-font-size: 16px;
+  --pico-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --pico-line-height: 1.5;
+}
+
+html {
+  font-size: 100%;
+  font-family: var(--pico-font-family);
+  line-height: var(--pico-line-height);
+}
+
+/* Layout */
+body {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: 60px 1fr;
+  grid-template-areas:
+    "header header"
+    "sidebar main";
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  gap: 0;
+}
+
+/* Header - Documentation Style */
+header {
+  grid-area: header;
+  padding: 0 2rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: #1a1f2b;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+}
+
+.top-nav {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0 auto;
+  width: 100%;
+  height: 60px;
+}
+
+.top-nav .brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.top-nav .brand a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: #00a8ff;
+  font-weight: 600;
+}
+
+.brand-icon {
+  width: 24px;
+  height: 24px;
+  filter: drop-shadow(0 0 2px rgba(0, 168, 255, 0.5));
+}
+
+/* Documentation-style navigation */
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin-left: 2rem;
+}
+
+.nav-link {
+  text-decoration: none;
+  color: var(--pico-muted-color);
+  font-weight: 500;
+  padding: 0.5rem 0;
+  position: relative;
+  transition: color 0.2s ease;
+}
+
+.nav-link:hover, .nav-link.active {
+  color: var(--pico-primary);
+}
+
+.nav-link.active::after {
+  content: '';
+  position: absolute;
+  bottom: -0.8rem;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--pico-primary);
+}
+
+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: auto;
+}
+
+.search-box {
+  width: auto !important;
+  margin: auto !important;
+}
+
+/* Sidebar */
+.sidebar {
+  grid-area: sidebar;
+  background-color: #1a1f2b;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 0;
+  overflow-y: auto;
+  height: calc(100vh - 60px);
+  position: fixed;
+  top: 60px;
+  left: 0;
+  width: 300px;
+  color: #c5d0e6;
+  z-index: 100;
+  font-family: var(--pico-font-family);
+  font-size: var(--pico-font-size);
+  margin-top: 0;
+}
+
+.sidebar-content {
+  padding: 1rem 0;
+  display: block;
+  width: 100%;
+}
+
+/* Sidebar Navigation */
+.sidebar-wrapper {
+  width: 100%;
+  padding: 10px 0px;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.sidebar-section {
+  margin-bottom: 0.5rem;
+}
+
+/* Collapsible sidebar sections */
+.sidebar-heading.toggle {
+  cursor: pointer;
+  position: relative;
+}
+
+.sidebar-heading.toggle::after {
+  content: '▼';
+  font-size: 10px;
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease;
+}
+
+.sidebar-section.collapsed .sidebar-heading.toggle::after {
+  transform: translateY(-50%) rotate(-90deg);
+}
+
+.sidebar-section.collapsed .sidebar-content-section {
+  display: none;
+}
+
+.sidebar-heading {
+  font-size: var(--pico-font-size);
+  font-weight: 600;
+  color: #8c9db5;
+  padding: 0.25rem 1.25rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.sidebar-link {
+  display: block;
+  padding: 0.35rem 1.25rem;
+  color: #a3b3cc;
+  text-decoration: none;
+  font-size: var(--pico-font-size);
+  border-left: 3px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.sidebar-link.child {
+  padding-left: 2.5rem;
+}
+
+.sidebar-link:hover {
+  color: #00a8ff;
+  background-color: rgba(0, 168, 255, 0.05);
+}
+
+.sidebar-link.active {
+  color: #00a8ff;
+  background-color: rgba(0, 168, 255, 0.1);
+  border-left-color: #00a8ff;
+  font-weight: 500;
+}
+
+/* Vertical menu styling */
+.sidebar-menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  width: 100%;
+}
+
+.menu-item {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.menu-link {
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1.25rem;
+  color: #a3b3cc;
+  text-decoration: none;
+  font-size: 0.9rem;
+  border-left: 3px solid transparent;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.menu-link:hover {
+  color: #00a8ff;
+  background-color: rgba(0, 168, 255, 0.05);
+}
+
+.menu-link.active {
+  color: #00a8ff;
+  background-color: rgba(0, 168, 255, 0.1);
+  border-left-color: #00a8ff;
+  font-weight: 500;
+}
+
+/* Submenu styling */
+.has-submenu > .menu-link {
+  position: relative;
+}
+
+.has-submenu > .menu-link:after {
+  content: '▼';
+  font-size: 0.6rem;
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease;
+}
+
+.has-submenu.open > .menu-link:after {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.submenu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  display: block;
+  width: 100%;
+}
+
+.has-submenu.open > .submenu {
+  max-height: 500px;
+}
+
+.submenu .menu-item {
+  display: block;
+  width: 100%;
+}
+
+.submenu .menu-link {
+  padding-left: 2.5rem;
+  font-size: 0.85rem;
+}
+
+/* Main Content */
+main {
+  grid-area: main;
+  padding: 0;
+  overflow-y: auto;
+  margin-top: 0;
+  font-family: var(--pico-font-family);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  color: #c5d0e6;
+  background-color: #1a1f2b;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Content Section */
+.content-section {
+  padding: 0;
+  margin-top: 0;
+}
+
+/* Services Page */
+.services-page {
+  padding: 0;
+  margin-top: -60px;
+}
+
+/* Removed section-header styling as it's not needed */
+
+.section-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 0.1rem;
+  margin-top: 0;
+  color: #e0e6f0;
+  padding-top: 0;
+  padding-left: 1.25rem;
+}
+
+.section-description {
+  font-size: 0.85rem;
+  color: #8c9db5;
+  margin-bottom: 0.25rem;
+  padding-left: 1.25rem;
+}
+
+/* Typography consistency */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--pico-font-family);
+  line-height: 1.2;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+h1 { font-size: 2rem; }
+h2 { font-size: 1.75rem; }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.25rem; }
+h5 { font-size: 1.1rem; }
+h6 { font-size: 1rem; }
+
+p, ul, ol, dl, table {
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  margin-bottom: 1rem;
+}
+
+/* Cards and panels */
+.card, .panel {
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  background-color: #232836;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  padding: 0.75rem;
+  margin-bottom: 0.5rem;
+  height: fit-content;
+}
+
+.card-title, .panel-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #e0e6f0;
+  padding-bottom: 0.35rem;
+}
+
+/* Tables */
+table {
+  font-size: 0.9rem;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-bottom: 0.5rem;
+}
+
+th {
+  font-weight: 600;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: #8c9db5;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+}
+
+td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  color: #c5d0e6;
+}
+
+tr:hover td {
+  background-color: rgba(0, 168, 255, 0.05);
+}
+
+/* Forms */
+input, select, textarea, button {
+  font-family: var(--pico-font-family);
+  font-size: var(--pico-font-size);
+  background-color: #2a303e;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 0.5rem 0.75rem;
+  color: #c5d0e6;
+  width: 100%;
+}
+
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #8c9db5;
+  font-weight: 500;
+}
+
+fieldset {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+legend {
+  padding: 0 0.5rem;
+  color: #8c9db5;
+  font-weight: 500;
+}
+
+button, .button {
+  background-color: #00a8ff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.4rem 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  width: auto;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+button:hover, .button:hover {
+  background-color: #0090e0;
+}
+
+button.secondary, .button.secondary {
+  background-color: #2a303e;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #a3b3cc;
+}
+
+button.secondary:hover, .button.secondary:hover {
+  background-color: #343d4f;
+}
+
+button.danger, .button.danger {
+  background-color: #e53935;
+  color: #fff;
+}
+
+.button-group button.danger,
+.button-group .button.danger {
+  background-color: #e53935;
+  color: #fff;
+}
+
+button.danger:hover, .button.danger:hover,
+.button-group button.danger:hover,
+.button-group .button.danger:hover {
+  background-color: #c62828;
+}
+
+/* Section layouts */
+.content-section {
+  margin-bottom: 0.5rem;
+}
+
+/* Removed duplicate section-title definition */
+
+.section-description {
+  color: #8c9db5;
+  margin-bottom: 1rem;
+}
+
+/* Grid layouts */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+/* Two-column layout */
+.two-column-layout {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 0.75rem;
+  align-items: start;
+  margin-top: 0.25rem;
+  padding: 0 1.25rem;
+}
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: center;
+  letter-spacing: 0.02em;
+}
+
+.badge.success {
+  background-color: rgba(38, 194, 129, 0.15);
+  color: #26c281;
+  border: 1px solid rgba(38, 194, 129, 0.3);
+}
+
+.badge.warning {
+  background-color: rgba(255, 168, 0, 0.15);
+  color: #ffa800;
+  border: 1px solid rgba(255, 168, 0, 0.3);
+}
+
+.badge.danger {
+  background-color: rgba(255, 76, 76, 0.15);
+  color: #ff4c4c;
+  border: 1px solid rgba(255, 76, 76, 0.3);
+}
+
+/* Log Panel */
+.log-panel {
+  position: fixed;
+  right: 0;
+  top: 60px;
+  width: 400px;
+  height: calc(100vh - 60px);
+  background-color: var(--pico-card-background-color);
+  border-left: 1px solid var(--pico-muted-border-color);
+  padding: 1rem;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  z-index: 90;
+  overflow-y: auto;
+}
+
+.log-panel.open {
+  transform: translateX(0);
+}
+
+.log-toggle {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 100;
+}
+
+.log-content {
+  font-family: monospace;
+  white-space: pre-wrap;
+  font-size: 0.85rem;
+  background-color: var(--pico-code-background-color);
+  padding: 1rem;
+  border-radius: var(--pico-border-radius);
+  height: calc(100% - 3rem);
+  overflow-y: auto;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  body {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main";
+  }
+  
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 60px;
+    width: 250px;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    z-index: 95;
+  }
+  
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  
+  .menu-toggle {
+    display: block !important;
+  }
+}
+
+@media (min-width: 769px) {
+  .menu-toggle {
+    display: none !important;
+  }
+}
+
+/* Log Level Styles */
+.log-info {
+  background-color: rgba(13, 110, 253, 0.15);
+  color: #0d6efd;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.log-warning {
+  background-color: rgba(255, 193, 7, 0.15);
+  color: #ffc107;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.log-error {
+  background-color: rgba(220, 53, 69, 0.15);
+  color: #dc3545;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.log-debug {
+  background-color: rgba(108, 117, 125, 0.15);
+  color: #6c757d;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Log Page Specific Styles */
+.flex-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.filter-controls {
+  margin-bottom: 1.5rem;
+}
+
+.filter-grid {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  align-items: end;
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-button {
+  display: flex;
+  align-items: flex-end;
+}
+
+.filter-apply {
+  width: 100%;
+  margin-top: 0.5rem;
+  padding: 0.6rem 1rem;
+}
+
+/* Pagination improvements */
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  margin-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.pagination-info {
+  font-size: 0.9rem;
+  color: #8c9db5;
+}
+
+.pagination-controls {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.pagination-btn {
+  min-width: 100px;
+  text-align: center;
+  padding: 0.5rem 1rem;
+}
+
+/* Utility classes */
+.hidden {
+  display: none !important;
+}

pkg/heroagent/web/static/css/jobs.css

@@ -0,0 +1,76 @@
+/* Jobs page styles */
+
+.status-badge {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.85em;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.status-pending {
+    background-color: #f0f0f0;
+    color: #666;
+}
+
+.status-running {
+    background-color: #e3f2fd;
+    color: #0d47a1;
+}
+
+.status-completed {
+    background-color: #e8f5e9;
+    color: #1b5e20;
+}
+
+.status-failed {
+    background-color: #ffebee;
+    color: #b71c1c;
+}
+
+.status-scheduled {
+    background-color: #fff8e1;
+    color: #ff6f00;
+}
+
+.status-canceled {
+    background-color: #ede7f6;
+    color: #4527a0;
+}
+
+/* Form styles */
+#jobs-filter-form {
+    margin-bottom: 20px;
+}
+
+/* Table styles */
+.table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.table th, 
+.table td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid #eee;
+}
+
+.table th {
+    font-weight: 600;
+    background-color: #f9f9f9;
+}
+
+.table tr:hover {
+    background-color: #f5f5f5;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.button-small {
+    padding: 4px 8px;
+    font-size: 0.85em;
+}

pkg/heroagent/web/static/css/logs.css

@@ -0,0 +1,99 @@
+/* Styles for the logs page */
+
+.log-container {
+  margin-top: 1.5rem;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.log-table {
+  overflow-x: auto;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.log-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.log-table th {
+  position: sticky;
+  top: 0;
+  background-color: var(--card-background-color);
+  z-index: 10;
+  padding: 0.75rem;
+  text-align: left;
+  font-weight: 600;
+  border-bottom: 1px solid var(--card-border-color);
+}
+
+.log-table td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--card-border-color);
+  font-family: var(--font-family-monospace);
+  font-size: 0.9rem;
+}
+
+/* Log level styles */
+.log-info {
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.log-warning {
+  color: var(--warning);
+  font-weight: 500;
+}
+
+.log-error {
+  color: var(--danger);
+  font-weight: 500;
+}
+
+/* Filter controls */
+.filter-controls {
+  background-color: var(--card-background-color);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--card-border-color);
+}
+
+.filter-grid {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  align-items: end;
+}
+
+.filter-button {
+  display: flex;
+  align-items: flex-end;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  margin-top: 1rem;
+}
+
+.pagination-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.pagination-btn {
+  padding: 0.25rem 0.75rem;
+}
+
+/* Loading indicator */
+.loading-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  color: var(--muted-color);
+}

pkg/heroagent/web/static/css/unpoly.min.css

@@ -0,0 +1,6 @@
+[hidden][hidden]{display:none !important}
+up-wrapper{display:inline-block}
+up-bounds{position:absolute}.up-focus-hidden:focus-visible{outline-color:rgba(0,0,0,0) !important;outline-style:none !important}body.up-scrollbar-away{padding-right:calc(var(--up-scrollbar-width) + var(--up-original-padding-right)) !important}body.up-scrollbar-away,html:has(>body.up-scrollbar-away){overflow-y:hidden !important}body.up-scrollbar-away .up-scrollbar-away{right:calc(var(--up-scrollbar-width) + var(--up-original-right)) !important}
+.up-request-loader{display:none}up-progress-bar{position:fixed;top:0;left:0;z-index:999999999;height:3px;background-color:#007bff}
+up-focus-trap{position:fixed;top:0;left:0;width:0;height:0}up-cover-viewport,up-drawer-viewport,up-modal-viewport,up-drawer-backdrop,up-modal-backdrop,up-cover,up-drawer,up-modal{top:0;left:0;bottom:0;right:0}up-drawer-box,up-modal-box{box-shadow:0 0 10px 1px rgba(0,0,0,.3)}up-popup{box-shadow:0 0 4px rgba(0,0,0,.3)}up-popup:focus,up-cover-box:focus,up-drawer-box:focus,up-modal-box:focus,up-cover:focus,up-drawer:focus,up-modal:focus,up-popup:focus-visible,up-cover-box:focus-visible,up-drawer-box:focus-visible,up-modal-box:focus-visible,up-cover:focus-visible,up-drawer:focus-visible,up-modal:focus-visible{outline:none}up-cover,up-drawer,up-modal{z-index:2000;position:fixed}up-drawer-backdrop,up-modal-backdrop{position:absolute;background:rgba(0,0,0,.4)}up-cover-viewport,up-drawer-viewport,up-modal-viewport{position:absolute;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center}up-popup,up-cover-box,up-drawer-box,up-modal-box{position:relative;box-sizing:border-box;max-width:100%;background-color:#fff;padding:20px;overflow-x:hidden}up-popup-content,up-cover-content,up-drawer-content,up-modal-content{display:block}up-popup{z-index:1000}up-popup-dismiss,up-cover-dismiss,up-drawer-dismiss,up-modal-dismiss{color:#888;position:absolute;top:10px;right:10px;font-size:1.7rem;line-height:.5;cursor:pointer}up-modal[nesting="0"] up-modal-viewport{padding:25px 15px}up-modal[nesting="1"] up-modal-viewport{padding:50px 30px}up-modal[nesting="2"] up-modal-viewport{padding:75px 45px}up-modal[nesting="3"] up-modal-viewport{padding:100px 60px}up-modal[nesting="4"] up-modal-viewport{padding:125px 75px}up-modal[size=small] up-modal-box{width:350px}up-modal[size=medium] up-modal-box{width:650px}up-modal[size=large] up-modal-box{width:1000px}up-modal[size=grow] up-modal-box{width:auto}up-modal[size=full] up-modal-box{width:100%}up-drawer-viewport{justify-content:flex-start}up-drawer[position=right] up-drawer-viewport{justify-content:flex-end}up-drawer-box{min-height:100vh}up-drawer[size=small] up-drawer-box{width:150px}up-drawer[size=medium] up-drawer-box{width:340px}up-drawer[size=large] up-drawer-box{width:600px}up-drawer[size=grow] up-drawer-box{width:auto}up-drawer[size=full] up-drawer-box{width:100%}up-cover-box{width:100%;min-height:100vh;padding:0}up-popup{padding:15px;text-align:left}up-popup[size=small]{width:180px}up-popup[size=medium]{width:300px}up-popup[size=large]{width:550px}up-popup[size=grow] up-popup{width:auto}up-popup[size=full] up-popup{width:100%}
+[up-clickable][role=link]{cursor:pointer}[up-expand]:not([role]),[up-expand][role=link]{cursor:pointer}

pkg/heroagent/web/static/favicon.ico

@@ -0,0 +1 @@
+

pkg/heroagent/web/static/img/flower.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Flower Icon</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle fill="#4CAF50" cx="32" cy="32" r="8"></circle>
+        <path d="M32,16 C36.418278,16 40,19.581722 40,24 C40,28.418278 36.418278,32 32,32 C27.581722,32 24,28.418278 24,24 C24,19.581722 27.581722,16 32,16 Z" fill="#8BC34A" transform="translate(32.000000, 24.000000) rotate(-45.000000) translate(-32.000000, -24.000000)"></path>
+        <path d="M32,16 C36.418278,16 40,19.581722 40,24 C40,28.418278 36.418278,32 32,32 C27.581722,32 24,28.418278 24,24 C24,19.581722 27.581722,16 32,16 Z" fill="#CDDC39" transform="translate(32.000000, 24.000000) rotate(45.000000) translate(-32.000000, -24.000000)"></path>
+        <path d="M32,32 C36.418278,32 40,35.581722 40,40 C40,44.418278 36.418278,48 32,48 C27.581722,48 24,44.418278 24,40 C24,35.581722 27.581722,32 32,32 Z" fill="#FF9800" transform="translate(32.000000, 40.000000) rotate(-45.000000) translate(-32.000000, -40.000000)"></path>
+        <path d="M32,32 C36.418278,32 40,35.581722 40,40 C40,44.418278 36.418278,48 32,48 C27.581722,48 24,44.418278 24,40 C24,35.581722 27.581722,32 32,32 Z" fill="#FFC107" transform="translate(32.000000, 40.000000) rotate(45.000000) translate(-32.000000, -40.000000)"></path>
+    </g>
+</svg>

pkg/heroagent/web/static/img/hero-icon.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="heroGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#00A8FF" />
+      <stop offset="100%" stop-color="#0077CC" />
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="1" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+  </defs>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" filter="url(#glow)">
+    <!-- Hero mask/shield shape -->
+    <path d="M12,2 L21,6 C21,13.5 18,19 12,22 C6,19 3,13.5 3,6 L12,2 Z" fill="url(#heroGradient)" />
+    
+    <!-- Stylized H for Hero -->
+    <path d="M8,7 L8,17 M16,7 L16,17 M8,12 L16,12" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    
+    <!-- Small star/sparkle -->
+    <circle cx="12" cy="5" r="1" fill="#FFFFFF" />
+  </g>
+</svg>

pkg/heroagent/web/static/img/hero-logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="120px" height="30px" viewBox="0 0 120 30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <!-- Hero Icon -->
+    <g transform="translate(5, 3)" fill="#00A8FF">
+      <circle cx="12" cy="12" r="11" stroke="#00A8FF" stroke-width="2" fill="none"/>
+      <rect x="11" y="4" width="2" height="6" rx="1"/>
+      <rect x="6" y="8" width="2" height="6" rx="1"/>
+      <rect x="16" y="8" width="2" height="6" rx="1"/>
+      <rect x="11" y="14" width="2" height="6" rx="1"/>
+      <rect x="8" y="11" width="8" height="2" rx="1"/>
+    </g>
+    
+    <!-- Text -->
+    <text font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#FFFFFF">
+      <tspan x="30" y="19">HeroLauncher</tspan>
+    </text>
+  </g>
+</svg>

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

pkg/heroagent/web/templates/admin/index.jet

@@ -0,0 +1,77 @@
+{{ extends "layout" }}
+{{ block documentBody() }}
+<article>
+    <header>
+        <h2>Dashboard</h2>
+        <p>Welcome to the HeroLauncher Admin Dashboard</p>
+    </header>
+    
+    <div class="grid">
+        <div>
+            <article>
+                <header>
+                    <h3>System Status</h3>
+                </header>
+                
+                <div class="grid">
+                    <div>
+                        <h4>Services</h4>
+                        <p>
+                            <strong>12</strong> running
+                        </p>
+                    </div>
+                    
+                    <div>
+                        <h4>CPU</h4>
+                        <p>
+                            <strong>24%</strong> usage
+                        </p>
+                    </div>
+                    
+                    <div>
+                        <h4>Memory</h4>
+                        <p>
+                            <strong>1.2GB</strong> / 8GB
+                        </p>
+                    </div>
+                </div>
+            </article>
+        </div>
+        
+        <div>
+            <article>
+                <header>
+                    <h3>Recent Activity</h3>
+                </header>
+                
+                <ul>
+                    <li>Service 'redis' started (2 minutes ago)</li>
+                    <li>Package 'web-ui' updated (10 minutes ago)</li>
+                    <li>System backup completed (1 hour ago)</li>
+                    <li>User 'admin' logged in (2 hours ago)</li>
+                </ul>
+            </article>
+        </div>
+    </div>
+    
+    <article>
+        <header>
+            <h3>Quick Actions</h3>
+        </header>
+        
+        <div class="grid">
+            <div>
+                <a href="/admin/services/start" role="button">Start Service</a>
+            </div>
+            
+            <div>
+                <a href="/admin/services/stop" role="button" class="secondary">Stop Service</a>
+            </div>
+            
+            <div>
+                <a href="/admin/packages/install" role="button" class="contrast">Install Package</a>
+            </div>
+        </div>
+    </article>
+</article>
+{{ end }}

pkg/heroagent/web/templates/admin/jobs.jet

@@ -0,0 +1,56 @@
+{{ extends "./layout" }}
+
+{{ block documentBody() }}
+<div class="main-content">
+    <header class="action-header">
+        <div>
+            <h2>Jobs</h2>
+            <p>Manage all your scheduled jobs</p>
+        </div>
+        <div>
+            <a href="/admin/jobs/new" class="button">Add New Job</a>
+        </div>
+    </header>
+    
+    {{if len(warning) > 0}}
+    <div class="alert alert-warning">
+        {{warning}}
+    </div>
+    {{end}}
+    
+    {{if len(error) > 0}}
+    <div class="alert alert-error">
+        {{error}}
+    </div>
+    {{end}}
+    
+    <section>
+        <div class="card">
+            <div class="card-title">Filter Jobs</div>
+            <div class="card-content">
+                <form action="/admin/jobs/list" up-target="#jobs-list">
+                    <div class="form-group">
+                        <label for="circleid">Circle ID</label>
+                        <input id="circleid" type="text" name="circleid" placeholder="Enter circle ID">
+                    </div>
+                    <div class="form-group">
+                        <label for="topic">Topic</label>
+                        <input id="topic" type="text" name="topic" placeholder="Enter topic">
+                    </div>
+                    <div class="form-actions">
+                        <button class="button" type="submit">Filter Jobs</button>
+                        <a href="/admin/jobs/list" class="button" up-target="#jobs-list">Refresh</a>
+                    </div>
+                </form>
+            </div>
+        </div>
+        
+        <div id="jobs-list">
+            <!-- This will be populated by the server response -->
+            <div up-hungry>
+                <a href="/admin/jobs/list" up-target="#jobs-list" up-preload up-eager></a>
+            </div>
+        </div>
+    </section>
+</div>
+{{ end }}

pkg/heroagent/web/templates/admin/jobs_list_fragment.jet

@@ -0,0 +1,44 @@
+<div class="card">
+    <div class="card-title">Jobs List</div>
+    
+    {{if len(error) > 0}}
+    <div class="alert alert-error">
+        {{error}}
+    </div>
+    {{end}}
+    
+    <div class="card-content">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Job ID</th>
+                    <th>Circle ID</th>
+                    <th>Topic</th>
+                    <th>Status</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{if len(jobs) == 0}}
+                <tr>
+                    <td colspan="5" class="text-center">No jobs found</td>
+                </tr>
+                {{else}}
+                {{range job := jobs}}
+                <tr>
+                    <td>{{job.JobID}}</td>
+                    <td>{{job.CircleID}}</td>
+                    <td>{{job.Topic}}</td>
+                    <td>
+                        <span class="status-badge status-{{job.Status}}">{{job.Status}}</span>
+                    </td>
+                    <td>
+                        <a href="/admin/jobs/get/{{job.JobID}}" class="button button-small" up-target=".main-content">View</a>
+                    </td>
+                </tr>
+                {{end}}
+                {{end}}
+            </tbody>
+        </table>
+    </div>
+</div>

pkg/heroagent/web/templates/admin/layout.jet

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HeroLauncher Admin</title>
+    <link rel="icon" href="/img/hero-icon.svg" type="image/svg+xml">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/css/pico.min.css">
+    <link rel="stylesheet" href="/css/admin.css">
+    <link rel="stylesheet" href="/css/unpoly.min.css">
+    <link rel="stylesheet" href="/css/logs.css">
+    <link rel="stylesheet" href="/css/jobs.css">
+    <style>
+      :root {
+        --font-size: 70%; /* Reduce font size by 30% */
+      }
+    </style>
+  </head>
+  <body>
+    {{ include "partials/header" }}
+    <div class="sidebar">
+      <nav>
+        {{ include "partials/sidebar" }}
+      </nav>
+    </div>  
+    <main>
+      {{block documentBody()}}{{end}}
+    </main>
+    
+    <script src="/js/unpoly.min.js"></script>
+    <script src="/js/echarts/echarts.min.js"></script>
+    <script src="/js/admin.js"></script>
+    {{block scripts()}}{{end}}
+
+  </body>
+</html>

pkg/heroagent/web/templates/admin/openrpc/index.jet

@@ -0,0 +1,86 @@
+{{ extends "../layout" }}
+
+{{ block documentBody() }}
+<div class="container-fluid p-4">
+    <div class="row mb-4">
+        <div class="col">
+            <h1 class="mb-3">OpenRPC Manager</h1>
+            <p class="lead">This page provides access to all available OpenRPC servers and their APIs.</p>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col">
+            <div class="card">
+                <div class="card-header">
+                    <h5 class="mb-0">Available OpenRPC Servers</h5>
+                </div>
+                <div class="card-body">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th>Server Name</th>
+                                <th>Description</th>
+                                <th>Status</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Virtual File System (VFS)</td>
+                                <td>Provides file system operations including upload, download, and metadata management</td>
+                                <td>
+                                    <span class="badge bg-success">Running</span>
+                                </td>
+                                <td>
+                                    <a href="/admin/openrpc/vfs" class="btn btn-sm btn-primary">View API</a>
+                                    <a href="/api/vfs/openrpc" target="_blank" class="btn btn-sm btn-secondary ms-2">Schema</a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col">
+            <div class="card">
+                <div class="card-header">
+                    <h5 class="mb-0">OpenRPC Information</h5>
+                </div>
+                <div class="card-body">
+                    <p>
+                        <strong>What is OpenRPC?</strong> OpenRPC is a standard for describing JSON-RPC 2.0 APIs, similar to how OpenAPI (Swagger) describes REST APIs.
+                    </p>
+
+                    <p>
+                        <strong>Benefits:</strong>
+                        <ul>
+                            <li>Standardized API documentation</li>
+                            <li>Automatic client and server code generation</li>
+                            <li>Consistent interface across different programming languages</li>
+                            <li>Self-documenting APIs with built-in schema validation</li>
+                        </ul>
+                    </p>
+
+                    <p>
+                        <strong>Learn more:</strong>
+                        <a href="https://open-rpc.org/" target="_blank">open-rpc.org</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}
+
+{{ block scripts() }}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Add any JavaScript functionality here
+    console.log('OpenRPC Manager page loaded');
+});
+</script>
+{{ end }}

pkg/heroagent/web/templates/admin/openrpc/vfs.jet

@@ -0,0 +1,235 @@
+{{ extends "../layout" }}
+
+{{ block documentBody() }}
+<div class="container-fluid p-4">
+    <div class="row mb-4">
+        <div class="col">
+            <h1 class="mb-3">Virtual File System API</h1>
+            <p class="lead">This page provides access to the VFS OpenRPC API documentation, methods, and logs.</p>
+        </div>
+    </div>
+
+    <!-- Tabs navigation -->
+    <div class="row mb-4">
+        <div class="col">
+            <ul class="nav nav-tabs" id="vfsTabs">
+                <li class="nav-item">
+                    <a class="nav-link active" href="#overview" up-target=".tab-content">Overview</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/admin/openrpc/vfs/logs" up-target="#logs">Logs</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Tab content -->
+    <div class="tab-content">
+        <!-- Overview tab -->
+        <div id="overview">
+            {{ include "./vfs_overview" }}
+        </div>
+
+        <!-- Logs tab (will be loaded via Unpoly) -->
+        <div id="logs">
+            <div class="text-center py-5">
+                <div class="spinner-border" role="status">
+                    <div class="mt-3">Loading logs...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}
+
+{{ block scripts() }}
+<script>
+    /* Handle tab switching */
+    up.compiler('#vfsTabs a', function(element) {
+        element.addEventListener('click', function(e) {
+            /* Remove active class from all tabs */
+            document.querySelectorAll('#vfsTabs a').forEach(function(tab) {
+                tab.classList.remove('active');
+            });
+            
+            /* Add active class to clicked tab */
+            element.classList.add('active');
+            
+            /* If overview tab is clicked, show overview and hide logs */
+            if (element.getAttribute('href') === '#overview') {
+                e.preventDefault(); /* Prevent default anchor behavior */
+                document.getElementById('overview').style.display = 'block';
+                document.getElementById('logs').style.display = 'none';
+            } else {
+                /* For logs tab, hide overview (logs will be loaded via Unpoly) */
+                document.getElementById('overview').style.display = 'none';
+            }
+        });
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const methodSelect = document.getElementById('method-select');
+        const methodParams = document.getElementById('method-params');
+        const paramFields = document.getElementById('param-fields');
+        const executeBtn = document.getElementById('execute-btn');
+        const resultContainer = document.getElementById('result-container');
+        const resultOutput = document.getElementById('result-output');
+        
+        /* Method parameter definitions */
+        const methodDefinitions = {
+            'UploadFile': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'dedupepath', type: 'string', description: 'Path for deduplication' },
+                { name: 'filepath', type: 'string', description: 'Local file path to upload' }
+            ],
+            'UploadDir': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'dedupepath', type: 'string', description: 'Path for deduplication' },
+                { name: 'dirpath', type: 'string', description: 'Local directory path to upload' }
+            ],
+            'DownloadFile': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'dedupepath', type: 'string', description: 'Path for deduplication' },
+                { name: 'destpath', type: 'string', description: 'Local destination path' }
+            ],
+            'ExportMeta': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'destpath', type: 'string', description: 'Local destination path for metadata' }
+            ],
+            'ImportMeta': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'sourcepath', type: 'string', description: 'Local source path for metadata' }
+            ],
+            'ExportDedupe': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'dedupepath', type: 'string', description: 'Path for deduplication' },
+                { name: 'destpath', type: 'string', description: 'Local destination path for dedupe info' }
+            ],
+            'ImportDedupe': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'dedupepath', type: 'string', description: 'Path for deduplication' },
+                { name: 'sourcepath', type: 'string', description: 'Local source path for dedupe info' }
+            ],
+            'Send': [
+                { name: 'dedupepath', type: 'string', description: 'Path for deduplication' },
+                { name: 'pubkeydest', type: 'string', description: 'Public key of destination' },
+                { name: 'hashlist', type: 'array', description: 'List of hashes to send' },
+                { name: 'secret', type: 'string', description: 'Secret for authentication' }
+            ],
+            'SendExist': [
+                { name: 'dedupepath', type: 'string', description: 'Path for deduplication' },
+                { name: 'pubkeydest', type: 'string', description: 'Public key of destination' },
+                { name: 'hashlist', type: 'array', description: 'List of hashes to check' },
+                { name: 'secret', type: 'string', description: 'Secret for authentication' }
+            ],
+            'ExposeWebDAV': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'port', type: 'number', description: 'Port to expose on' },
+                { name: 'username', type: 'string', description: 'WebDAV username' },
+                { name: 'password', type: 'string', description: 'WebDAV password' }
+            ],
+            'Expose9P': [
+                { name: 'vfspath', type: 'string', description: 'Path in the virtual file system' },
+                { name: 'port', type: 'number', description: 'Port to expose on' },
+                { name: 'readonly', type: 'boolean', description: 'Whether to expose as read-only' }
+            ]
+        };
+
+        /* When a method is selected, show the parameter form */
+        methodSelect.addEventListener('change', function() {
+            const selectedMethod = this.value;
+            
+            if (!selectedMethod) {
+                methodParams.classList.add('d-none');
+                return;
+            }
+            
+            /* Clear previous parameters */
+            paramFields.innerHTML = '';
+            
+            /* Add parameter fields for the selected method */
+            const params = methodDefinitions[selectedMethod] || [];
+            params.forEach(param => {
+                const formGroup = document.createElement('div');
+                formGroup.className = 'form-group mb-2';
+                
+                const label = document.createElement('label');
+                label.textContent = `${param.name} (${param.type}):`;
+                label.setAttribute('for', `param-${param.name}`);
+                
+                const input = document.createElement('input');
+                input.className = 'form-control';
+                input.id = `param-${param.name}`;
+                input.name = param.name;
+                input.setAttribute('data-type', param.type);
+                
+                if (param.type === 'boolean') {
+                    input.type = 'checkbox';
+                    input.className = 'form-check-input ms-2';
+                } else {
+                    input.type = 'text';
+                }
+                
+                const small = document.createElement('small');
+                small.className = 'form-text text-muted';
+                small.textContent = param.description;
+                
+                formGroup.appendChild(label);
+                formGroup.appendChild(input);
+                formGroup.appendChild(small);
+                paramFields.appendChild(formGroup);
+            });
+            
+            methodParams.classList.remove('d-none');
+        });
+        
+        /* Execute button handler */
+        executeBtn.addEventListener('click', function() {
+            const selectedMethod = methodSelect.value;
+            if (!selectedMethod) return;
+            
+            const params = {};
+            const paramDefs = methodDefinitions[selectedMethod] || [];
+            
+            /* Collect parameter values */
+            paramDefs.forEach(param => {
+                const input = document.getElementById(`param-${param.name}`);
+                if (!input) return;
+                
+                let value = input.value;
+                if (param.type === 'boolean') {
+                    value = input.checked;
+                } else if (param.type === 'number') {
+                    value = parseFloat(value);
+                } else if (param.type === 'array' && value) {
+                    try {
+                        value = JSON.parse(value);
+                    } catch (e) {
+                        value = value.split(',').map(item => item.trim());
+                    }
+                }
+                
+                params[param.name] = value;
+            });
+            
+            /* Call the API */
+            fetch(`/api/vfs/${selectedMethod.toLowerCase()}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(params)
+            })
+            .then(response => response.json())
+            .then(data => {
+                resultOutput.textContent = JSON.stringify(data, null, 2);
+                resultContainer.classList.remove('d-none');
+            })
+            .catch(error => {
+                resultOutput.textContent = `Error: ${error.message}`;
+                resultContainer.classList.remove('d-none');
+            });
+        });
+    });
+</script>
+{{ end }}

pkg/heroagent/web/templates/admin/openrpc/vfs_overview.jet

@@ -0,0 +1,118 @@
+<div class="row mb-4">
+  <div class="col">
+    <div class="card">
+      <div class="card-header">
+        <h5 class="mb-0">OpenRPC Schema</h5>
+      </div>
+      <div class="card-body">
+        <p>The OpenRPC schema describes all available methods for interacting with the Virtual File System.</p>
+        <a href="/api/vfs/openrpc" target="_blank" class="btn btn-primary">View Schema</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col">
+    <div class="card">
+      <div class="card-header">
+        <h5 class="mb-0">Available Methods</h5>
+      </div>
+      <div class="card-body">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Method</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>UploadFile</td>
+              <td>Uploads a file to the virtual file system</td>
+            </tr>
+            <tr>
+              <td>UploadDir</td>
+              <td>Uploads a directory to the virtual file system</td>
+            </tr>
+            <tr>
+              <td>DownloadFile</td>
+              <td>Downloads a file from the virtual file system</td>
+            </tr>
+            <tr>
+              <td>ExportMeta</td>
+              <td>Exports metadata from the virtual file system</td>
+            </tr>
+            <tr>
+              <td>ImportMeta</td>
+              <td>Imports metadata to the virtual file system</td>
+            </tr>
+            <tr>
+              <td>ExportDedupe</td>
+              <td>Exports dedupe information from the virtual file system</td>
+            </tr>
+            <tr>
+              <td>ImportDedupe</td>
+              <td>Imports dedupe information to the virtual file system</td>
+            </tr>
+            <tr>
+              <td>Send</td>
+              <td>Sends files based on dedupe hashes to a destination</td>
+            </tr>
+            <tr>
+              <td>SendExist</td>
+              <td>Checks which dedupe hashes exist and returns a list</td>
+            </tr>
+            <tr>
+              <td>ExposeWebDAV</td>
+              <td>Exposes the virtual file system via WebDAV</td>
+            </tr>
+            <tr>
+              <td>Expose9P</td>
+              <td>Exposes the virtual file system via 9P protocol</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row mt-4">
+  <div class="col">
+    <div class="card">
+      <div class="card-header">
+        <h5 class="mb-0">API Testing</h5>
+      </div>
+      <div class="card-body">
+        <p class="mb-3">You can test the VFS API methods directly from this interface.</p>
+        <div class="form-group mb-3">
+          <label for="method-select">Select Method:</label>
+          <select id="method-select" class="form-control">
+            <option value="">-- Select a method --</option>
+            <option value="UploadFile">UploadFile</option>
+            <option value="UploadDir">UploadDir</option>
+            <option value="DownloadFile">DownloadFile</option>
+            <option value="ExportMeta">ExportMeta</option>
+            <option value="ImportMeta">ImportMeta</option>
+            <option value="ExportDedupe">ExportDedupe</option>
+            <option value="ImportDedupe">ImportDedupe</option>
+            <option value="Send">Send</option>
+            <option value="SendExist">SendExist</option>
+            <option value="ExposeWebDAV">ExposeWebDAV</option>
+            <option value="Expose9P">Expose9P</option>
+          </select>
+        </div>
+        <div id="method-params" class="d-none">
+          <h6 class="mb-3">Parameters:</h6>
+          <div id="param-fields"></div>
+        </div>
+        <button id="execute-btn" class="btn btn-primary mt-3">Execute Method</button>
+        <div id="result-container" class="mt-4 d-none">
+          <h6>Result:</h6>
+          <pre id="result-output" class="bg-light p-3 border rounded"></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

pkg/heroagent/web/templates/admin/partials/header.jet

@@ -0,0 +1,25 @@
+<!-- header -->
+<header>
+  <nav class="top-nav">
+    <div class="brand">
+      <a href="/admin">
+        <img class="brand-icon" src="/img/hero-icon.svg" alt="HeroLauncher Logo" width="24" height="24">
+        <span>HeroLauncher</span>
+      </a>
+    </div>
+    
+    <div class="nav-links">
+      <a class="nav-link" href="/admin">Home</a>
+      <a class="nav-link" href="/admin/services">Services</a>
+      <a class="nav-link" href="/admin/system/info">System</a>
+    </div>
+    
+    <div class="nav-right">
+      <input class="search-box" type="search" placeholder="Search...">
+      <button class="menu-toggle" aria-label="Toggle menu">
+        <span>Menu</span>
+      </button>
+      <a role="button" href="/">Back to App</a>
+    </div>
+  </nav>
+</header>

pkg/heroagent/web/templates/admin/partials/log-panel.jet

@@ -0,0 +1,7 @@
+<!-- log-panel - Log panel component -->
+<div class="log-panel">
+  <h3>System Logs</h3>
+  <div class="log-content"></div>
+</div>
+
+<button class="log-toggle" aria-label="Toggle logs">Logs</button>

pkg/heroagent/web/templates/admin/partials/sidebar.jet

@@ -0,0 +1,23 @@
+<!-- sidebar -->
+<div class="sidebar-wrapper">
+  <nav class="sidebar-nav">
+    <div class="sidebar-section">
+      <a class="sidebar-link" href="/admin">Dashboard</a>
+    </div>
+    <div class="sidebar-section">
+      <a class="sidebar-link" href="/admin/system/info">System</a>
+    </div>
+    <div class="sidebar-section">
+      <a class="sidebar-link" href="/admin/system/processes">Processes</a>
+    </div>
+    <div class="sidebar-section">
+      <a class="sidebar-link" href="/admin/services">Services</a>
+    </div>
+    <div class="sidebar-section">
+      <a class="sidebar-link" href="/jobs">Jobs</a>
+    </div>
+    <div class="sidebar-section">
+      <a class="sidebar-link" href="/admin/system/logs">Logs</a>
+    </div>
+  </nav>
+</div>

pkg/heroagent/web/templates/admin/services.jet

@@ -0,0 +1,47 @@
+{{ extends "./layout" }}
+
+{{ block documentBody() }}
+<div class="services-page">
+    <h2 class="section-title">Services</h2>
+    <p class="section-description">Manage all your running services</p>
+    <div class="two-column-layout">
+        <div class="card">
+            <div class="card-title">Active Services</div>
+            <div class="card-actions">
+                <button class="button refresh" onclick="refreshServices()">Refresh</button>
+            </div>
+            
+            <!-- Service list -->
+            <div id="services-table">
+                {{ include "./services_fragment" }}
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-title">Start New Service</div>
+            <div class="card-content">
+                <form id="start-service-form" onsubmit="startService(event)">
+                    <div class="form-group">
+                        <label for="service-name">Service Name</label>
+                        <input id="service-name" type="text" name="name" required="required">
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="service-command">Command</label>
+                        <input id="service-command" type="text" name="command" required="required">
+                    </div>
+                    
+                    <div class="form-actions">
+                        <button class="button" type="submit">Start Service</button>
+                    </div>
+                </form>
+            </div>
+            
+            <div id="start-result" class="alert" style="display: none"></div>
+        </div>
+    </div>
+</div>
+{{ end }}
+
+{{ block scripts() }}
+<script src="/js/services.js"></script>
+{{ end }}

pkg/heroagent/web/templates/admin/services_fragment.jet

@@ -0,0 +1,47 @@
+<table>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Status</th>
+            <th>PID</th>
+            <th>CPU</th>
+            <th>Memory</th>
+            <th>Uptime</th>
+            <th>Actions</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{ if processes }}
+        {{ range processes }}
+        <tr>
+            <td>{{ .Name }}</td>
+            <td>
+                {{ if .Status == "running" }}
+                <span class="badge success">Running</span>
+                {{ else if .Status == "stopped" }}
+                <span class="badge danger">Stopped</span>
+                {{ else }}
+                <span class="badge warning">{{ .Status }}</span>
+                {{ end }}
+            </td>
+            <td>{{ .ID }}</td>
+            <td>{{ if .Status == "running" }}{{ .CPU }}{{ else }}-{{ end }}</td>
+            <td>{{ if .Status == "running" }}{{ .Memory }}{{ else }}-{{ end }}</td>
+            <td>{{ if .Status == "running" }}{{ .Uptime }}{{ else }}-{{ end }}</td>
+            <td>
+                <div class="button-group">
+                    <button class="button" onclick="restartProcess('{{ .Name }}')">Restart</button>
+                    <button class="button secondary" onclick="stopProcess('{{ .Name }}')">Stop</button>
+                    <button class="button danger" style="background-color: #e53935 !important; color: #fff !important;" onclick="deleteProcess('{{ .Name }}')">Delete</button>
+                    <button class="button info" onclick="showProcessLogs('{{ .Name }}')">Logs</button>
+                </div>
+            </td>
+        </tr>
+        {{ end }}
+        {{ else }}
+        <tr>
+            <td colspan="7">No services found</td>
+        </tr>
+        {{ end }}
+    </tbody>
+</table>

pkg/heroagent/web/templates/admin/system/hardware_stats_fragment.jet

@@ -0,0 +1,19 @@
+<!-- Hardware stats fragment for polling updates -->
+<tbody>
+  <tr>
+    <th scope="row">CPU</th>
+    <td>{{ cpuInfo }} ({{ cpuUsage }})</td>
+  </tr>
+  <tr>
+    <th scope="row">Memory</th>
+    <td>{{ memoryInfo }} ({{ memUsage }})</td>
+  </tr>
+  <tr>
+    <th scope="row">Disk</th>
+    <td>{{ diskInfo }} ({{ diskUsage }})</td>
+  </tr>
+  <tr>
+    <th scope="row">Network</th>
+    <td style="white-space: pre-line;">{{ networkInfo }}</td>
+  </tr>
+</tbody>

pkg/heroagent/web/templates/admin/system/info.jet

@@ -0,0 +1,79 @@
+{{ extends "../layout" }}
+
+{{ block documentBody() }}
+  <article class="system-info">
+    <header>
+      <h2 class="title">System Information</h2>
+      <p class="description text-muted">Overview of system resources and configuration</p>
+    </header>
+
+    <div class="grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem;">
+      <div>
+        <article class="hardware-info">
+          <header>
+            <h3 id="hardware-title">Hardware</h3>
+          </header>
+          
+          <table class="table table-striped" up:poll="/admin/system/hardware-stats" up:target=".hardware-stats" up:poll-interval="1000">
+            <tbody>
+              <tr>
+                <th scope="row">CPU</th>
+                <td>{{ cpuInfo }}</td>
+              </tr>
+              <tr>
+                <th scope="row">Memory</th>
+                <td>{{ memoryInfo }}</td>
+              </tr>
+              <tr>
+                <th scope="row">Disk</th>
+                <td>{{ diskInfo }}</td>
+              </tr>
+              <tr>
+                <th scope="row">Network</th>
+                <td style="white-space: pre-line;">{{ networkInfo }}</td>
+              </tr>
+            </tbody>
+          </table>
+          
+          {{ include "partials/network_chart" }}
+        </article>
+      </div>
+
+      <div>
+        <article class="software-info">
+          <header>
+            <h3 id="software-title">Software</h3>
+          </header>
+          
+          <table class="table table-bordered" data:type="software-info">
+            <tbody>
+              <tr>
+                <th scope="row">OS</th>
+                <td>{{ osInfo }}</td>
+              </tr>
+              <tr>
+                <th scope="row">HeroLauncher</th>
+                <td>HeroLauncher</td>
+              </tr>
+              <tr>
+                <th scope="row">Uptime</th>
+                <td>{{ uptimeInfo }}</td>
+              </tr>
+            </tbody>
+          </table>
+          
+          {{ include "partials/__cpu_chart" }}
+          {{ include "partials/__memory_chart" }}
+        </article>
+      </div>
+    </div>
+  </article>
+{{ end }}
+
+{{ block scripts() }}
+<script src="/js/echarts/echarts.min.js"></script>
+<script src="/js/charts/cpu-chart.js"></script>
+<script src="/js/charts/memory-chart.js"></script>
+<script src="/js/charts/network-chart.js"></script>
+<script src="/js/charts/stats-fetcher.js"></script>
+{{ end }}

pkg/heroagent/web/templates/admin/system/jobs.jet

@@ -0,0 +1,58 @@
+{{ extends "../layout" }}
+
+<header>
+  <h2 class="title">System Jobs</h2>
+  <p class="description text-muted">Overview of scheduled jobs</p>
+</header>
+<article class="jobs-info">
+  <div class="grid" style="display: grid; grid-template-columns: 1fr; gap: 1rem;">
+    <div>
+      <article class="jobs-table">
+        <header>
+          <h3 id="jobs-title">Scheduled Jobs</h3>
+          <p class="refresh-status">
+            <button class="btn btn-sm" onclick="refreshJobs()">
+              Refresh
+              <span class="loading-indicator" id="refresh-loading" style="display: none;">&nbsp;Loading...</span>
+            </button>
+          </p>
+        </header>
+
+        <div class="jobs-table-content" up-poll="/admin/system/jobs-data" up-hungry="true" up-interval="10000" style="display: block; width: 100%;" id="jobs-content">
+          {{ if isset(., "error") }}
+            <div class="alert alert-danger">{{ .error }}</div>
+          {{ end }}
+
+          <table class="table table-striped" id="jobs-stats">
+            <thead>
+              <tr>
+                <th scope="col">ID</th>
+                <th scope="col">Name</th>
+                <th scope="col">Status</th>
+                <th scope="col">Next Run</th>
+                <th scope="col">Last Run</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{ if isset(., "jobs") && len(.jobs) > 0 }}
+                {{ range .jobs }}
+                <tr class="{{ if .is_current }}table-primary{{ end }}">
+                  <td>{{ .id }}</td>
+                  <td>{{ .name }}</td>
+                  <td>{{ .status }}</td>
+                  <td>{{ .next_run }}</td>
+                  <td>{{ .last_run }}</td>
+                </tr>
+                {{ end }}
+              {{ else }}
+                <tr>
+                  <td colspan="5">No job data available.</td>
+                </tr>
+              {{ end }}
+            </tbody>
+          </table>
+        </div>
+      </article>
+    </div>
+  </div>
+</article>

pkg/heroagent/web/templates/admin/system/logs.jet

@@ -0,0 +1,135 @@
+{{ extends "../layout" }}
+
+{{ block documentBody() }}
+  <article>
+    <header class="flex-container">
+      <div>
+        <h2>{{title}}</h2>
+        <p>View and filter logs from different sources</p>
+      </div>
+      <div>
+        <a href="/api/logs/export" role="button" class="outline">Export Logs</a>
+      </div>
+    </header>
+
+    <article class="filter-controls">
+      <form class="log-controls" id="log-filter-form" action="/admin/system/logs" method="get" up-target="#logs-table-container" up-submit>
+        <div class="grid filter-grid">
+          <div class="filter-item">
+            <label for="log-type">Log Type</label>
+            <select id="log-type" name="log_type">
+              {{range logTypes}}
+                <option value="{{.}}" {{if selectedLogType == '.'}}selected{{end}}>{{if . == "all"}}All Logs{{else if . == "system"}}System Logs{{else if . == "service"}}Service Logs{{else if . == "job"}}Job Logs{{else if . == "process"}}Process Logs{{end}}</option>
+              {{end}}
+            </select>
+          </div>
+
+          <div class="filter-item">
+            <label for="log-level">Log Level</label>
+            <select id="log-level" name="type">
+              <option value="all" {{if typeParam == "all" || typeParam == ""}}selected{{end}}>All Levels</option>
+              <option value="info" {{if typeParam == "info"}}selected{{end}}>Info</option>
+              <option value="error" {{if typeParam == "error"}}selected{{end}}>Error</option>
+            </select>
+          </div>
+
+          <div class="filter-item">
+            <label for="log-source">Log Source</label>
+            <select id="log-source" name="category">
+              <option value="" {{if categoryParam == ""}}selected{{end}}>All Sources</option>
+              <option value="system" {{if categoryParam == "system"}}selected{{end}}>System</option>
+              <option value="redis" {{if categoryParam == "redis"}}selected{{end}}>Redis</option>
+              <option value="executor" {{if categoryParam == "executor"}}selected{{end}}>Executor</option>
+              <option value="package" {{if categoryParam == "package"}}selected{{end}}>Package Manager</option>
+            </select>
+          </div>
+
+          <div class="filter-item">
+            <label for="log-from-date">From Date</label>
+            <input type="datetime-local" id="log-from-date" name="from">
+          </div>
+          
+          <div class="filter-item">
+            <label for="log-to-date">To Date</label>
+            <input type="datetime-local" id="log-to-date" name="to">
+          </div>
+
+          <div class="filter-button">
+            <button type="submit" class="filter-apply" up-target="#logs-table-container">Apply Filters</button>
+          </div>
+        </div>
+      </form>
+    </article>
+
+    <article class="log-container">
+      <header>
+        <h3>Log Output</h3>
+      </header>
+
+      <div id="logs-table-container">
+        <!-- Log content is loaded directly -->
+        {{ if isset(., "error") }}
+          <div class="alert alert-danger">{{ .error }}</div>
+        {{ end }}
+        
+        <!-- Include logs table -->
+        <div class="log-table">
+          <table>
+            <thead>
+              <tr>
+                <th>Timestamp</th>
+                <th>Level</th>
+                <th>Source</th>
+                <th>Message</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{if isset(., "logs")}}
+                {{range logs}}
+                <tr>
+                  <td>{{.timestamp}}</td>
+                  <td class="log-{{.type | lower}}">{{.type}}</td>
+                  <td>{{.category}}</td>
+                  <td>{{.message}}</td>
+                </tr>
+                {{else}}
+                <tr>
+                  <td colspan="4" class="text-center">No logs found matching your criteria</td>
+                </tr>
+                {{end}}
+              {{else}}
+              <tr>
+                <td colspan="4" class="text-center">Loading logs...</td>
+              </tr>
+              {{end}}
+            </tbody>
+          </table>
+        </div>
+        
+        <div class="pagination">
+          <div class="pagination-info">
+            {{if isset(., "logs")}}
+              {{if len(logs) > 0}}
+              <span>Showing {{showing}} of {{total}} logs</span>
+              {{else}}
+              <span>No logs found</span>
+              {{end}}
+            {{else}}
+            <span>Loading logs...</span>
+            {{end}}
+          </div>
+          <div class="pagination-controls">
+            {{if isset(., "page") && isset(., "totalPages")}}
+              {{if page > 1}}
+              <a href="/admin/system/logs?page={{page - 1}}{{if isset(., "categoryParam")}}&category={{categoryParam}}{{end}}{{if isset(., "typeParam")}}&type={{typeParam}}{{end}}{{if isset(., "fromParam")}}&from={{fromParam}}{{end}}{{if isset(., "toParam")}}&to={{toParam}}{{end}}" role="button" class="outline secondary" up-target="#logs-table-container">← Previous</a>
+              {{end}}
+              {{if page < totalPages}}
+              <a href="/admin/system/logs?page={{page + 1}}{{if isset(., "categoryParam")}}&category={{categoryParam}}{{end}}{{if isset(., "typeParam")}}&type={{typeParam}}{{end}}{{if isset(., "fromParam")}}&from={{fromParam}}{{end}}{{if isset(., "toParam")}}&to={{toParam}}{{end}}" role="button" class="outline secondary" up-target="#logs-table-container">Next →</a>
+              {{end}}
+            {{end}}
+          </div>
+        </div>
+      </div>
+    </article>
+  </article>
+{{ end }}

pkg/heroagent/web/templates/admin/system/logs_fragment.jet

@@ -0,0 +1,49 @@
+<!-- This template contains just the logs table content for Unpoly updates -->
+{{ if isset(., "error") }}
+  <div class="alert alert-danger">{{ .error }}</div>
+{{ end }}
+
+<div class="log-table">
+  <table>
+    <thead>
+      <tr>
+        <th>Timestamp</th>
+        <th>Level</th>
+        <th>Source</th>
+        <th>Message</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{range logs}}
+      <tr>
+        <td>{{.timestamp}}</td>
+        <td class="log-{{.type | lower}}">{{.type}}</td>
+        <td>{{.category}}</td>
+        <td>{{.message}}</td>
+      </tr>
+      {{else}}
+      <tr>
+        <td colspan="4" class="text-center">No logs found matching your criteria</td>
+      </tr>
+      {{end}}
+    </tbody>
+  </table>
+</div>
+
+<div class="pagination">
+  <div class="pagination-info">
+    {{if len(logs) > 0}}
+    <span>Showing {{len(logs)}} of {{total}} logs</span>
+    {{else}}
+    <span>No logs found</span>
+    {{end}}
+  </div>
+  <div class="pagination-controls">
+    {{if page > 1}}
+    <a href="/admin/system/logs?page={{page - 1}}{{if isset(., "selectedLogType")}}&log_type={{selectedLogType}}{{end}}{{if isset(., "categoryParam")}}&category={{categoryParam}}{{end}}{{if isset(., "typeParam")}}&type={{typeParam}}{{end}}{{if isset(., "fromParam")}}&from={{fromParam}}{{end}}{{if isset(., "toParam")}}&to={{toParam}}{{end}}" role="button" class="outline secondary" up-target="#logs-table-container">← Previous</a>
+    {{end}}
+    {{if page < totalPages}}
+    <a href="/admin/system/logs?page={{page + 1}}{{if isset(., "selectedLogType")}}&log_type={{selectedLogType}}{{end}}{{if isset(., "categoryParam")}}&category={{categoryParam}}{{end}}{{if isset(., "typeParam")}}&type={{typeParam}}{{end}}{{if isset(., "fromParam")}}&from={{fromParam}}{{end}}{{if isset(., "toParam")}}&to={{toParam}}{{end}}" role="button" class="outline secondary" up-target="#logs-table-container">Next →</a>
+    {{end}}
+  </div>
+</div>

pkg/heroagent/web/templates/admin/system/logs_test.jet

@@ -0,0 +1,6 @@
+{{ extends "admin/layout" }}
+
+{{ block documentBody() }}
+  <h1>Test Logs Page</h1>
+  <p>This is a simple test template</p>
+{{ end }}

pkg/heroagent/web/templates/admin/system/partials/__cpu_chart.jet

@@ -0,0 +1,2 @@
+<h4 style="margin-bottom: 10px;">Process CPU Usage</h4>
+<div id="cpu-chart" style="width: 100%; height: 300px; margin-bottom: 30px;"></div>

pkg/heroagent/web/templates/admin/system/partials/__memory_chart.jet

@@ -0,0 +1,2 @@
+<h4 style="margin-bottom: 10px;">Process Memory Usage</h4>
+<div id="memory-chart" style="width: 100%; height: 300px;"></div>

pkg/heroagent/web/templates/admin/system/partials/__stats_fetcher.jet

@@ -0,0 +1 @@
+<!-- Stats fetcher removed - now loaded from external JS file -->

pkg/heroagent/web/templates/admin/system/partials/network_chart.jet

@@ -0,0 +1,2 @@
+<h4 style="margin-bottom: 10px;">Network Traffic</h4>
+<div id="network-chart" style="width: 100%; height: 300px; margin-top: 10px;"></div>

pkg/heroagent/web/templates/admin/system/processes.jet

@@ -0,0 +1,77 @@
+{{ extends "../layout" }}
+
+{{ block documentBody() }}
+<article class="processes-info">
+  <header>
+    <h2 class="title">System Processes</h2>
+    <p class="description text-muted">Overview of running processes with CPU and memory usage</p>
+  </header>
+
+  <div class="grid" style="display: grid; grid-template-columns: 1fr; gap: 1rem;">
+    <div>
+      <article class="processes-table">
+        <header>
+          <h3 id="processes-title">Running Processes</h3>
+          <p class="refresh-status">
+            <button class="btn btn-sm" onclick="refreshProcesses()">
+              Refresh
+              <span class="loading-indicator" id="refresh-loading" style="display: none;">&nbsp;Loading...</span>
+            </button>
+          </p>
+        </header>
+
+        <div class="processes-table-content" up-poll="/admin/system/processes-data" up-hungry="true" up-interval="10000" style="display: block; width: 100%;" id="processes-content">
+          {{ if isset(., "error") }}
+            <div class="alert alert-danger">{{ .error }}</div>
+          {{ end }}
+
+          <table class="table table-striped" id="processes-stats">
+            <thead>
+              <tr>
+                <th scope="col">PID</th>
+                <th scope="col">Name</th>
+                <th scope="col">Status</th>
+                <th scope="col">CPU (%)</th>
+                <th scope="col">Memory (MB)</th>
+                <th scope="col">Created</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{ if isset(., "processes") && len(.processes) > 0 }}
+                {{ range .processes }}
+                <tr class="{{ if .is_current }}table-primary{{ end }}">
+                  <td>{{ .pid }}</td>
+                  <td>{{ .name }}</td>
+                  <td>{{ .status }}</td>
+                  <td>{{ .cpu_percent_str }}</td>
+                  <td>{{ .memory_mb_str }}</td>
+                  <td>{{ .create_time_str }}</td>
+                </tr>
+                {{ end }}
+              {{ else }}
+                <tr>
+                  <td colspan="6">No process data available.</td>
+                </tr>
+              {{ end }}
+            </tbody>
+          </table>
+        </div>
+      </article>
+    </div>
+  </div>
+</article>
+
+<script>
+  // Ensure processes data is loaded on page load
+  document.addEventListener('DOMContentLoaded', function() {
+    // Check if the processes content is empty or shows 'No process data available'
+    const processesContent = document.getElementById('processes-content');
+    const tableBody = processesContent ? processesContent.querySelector('tbody') : null;
+    
+    if (tableBody && (tableBody.innerText.includes('No process data available') || tableBody.children.length <= 1)) {
+      console.log('Triggering initial process data load');
+      refreshProcesses();
+    }
+  });
+</script>
+{{ end }}

pkg/heroagent/web/templates/admin/system/processes_data.jet

@@ -0,0 +1,48 @@
+<!-- This template contains just the process table content for AJAX updates -->
+<div class="processes-table-content">
+{{ if isset(., "error") }}
+  <div class="alert alert-danger">{{ .error }}</div>
+{{ end }}
+
+<!-- Debug info -->
+<div class="alert alert-info">
+  {{ if isset(., "debug") }}
+    Debug: {{ debug }}
+  {{ end }}
+  
+  <!-- Direct debug output to help troubleshoot -->
+  Has processes: {{ hasProcesses ? "Yes" : "No" }}
+  Process count: {{ processCount }}
+</div>
+
+<table class="table table-striped" id="processes-stats">
+  <thead>
+    <tr>
+      <th scope="col">PID</th>
+      <th scope="col">Name</th>
+      <th scope="col">Status</th>
+      <th scope="col">CPU (%)</th>
+      <th scope="col">Memory (MB)</th>
+      <th scope="col">Created</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{ if hasProcesses }}
+        {{ range processStats }}
+          <tr{{ if .is_current == true }} class="table-primary"{{ end }}>
+            <td>{{ .pid }}</td>
+            <td>{{ .name }}</td>
+            <td>{{ .status }}</td>
+            <td>{{ .cpu_percent_str }}</td>
+            <td>{{ .memory_mb_str }}</td>
+            <td>{{ .create_time_str }}</td>
+          </tr>
+        {{ end }}
+    {{ else }}
+      <tr>
+        <td colspan="6">No process data available.</td>
+      </tr>
+    {{ end }}
+  </tbody>
+</table>
+</div>

pkg/heroagent/web/templates/admin/system/processes_fragment.jet

@@ -0,0 +1,36 @@
+<!-- This template contains just the process table content for AJAX updates -->
+{{ if .error }}
+<div class="alert alert-danger">{{ .error }}</div>
+{{ end }}
+
+<!-- Process data table - regenerated on each refresh -->
+<table class="table table-striped" id="processes-table">
+  <thead>
+    <tr>
+      <th scope='col'>PID</th>
+      <th scope='col'>Name</th>
+      <th scope='col'>Status</th>
+      <th scope='col'>CPU (%)</th>
+      <th scope='col'>Memory (MB)</th>
+      <th scope='col'>Created</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{ if .processes }}
+      {{ range .processes }}
+        <tr{{ if .is_current }} class="table-primary"{{ end }}>
+          <td>{{ .pid }}</td>
+          <td>{{ .name }}</td>
+          <td>{{ .status }}</td>
+          <td>{{ .cpu_percent | printf("%.1f%%") }}</td>
+          <td>{{ .memory_mb | printf("%.1f MB") }}</td>
+          <td>{{ .create_time_str }}</td>
+        </tr>
+      {{ end }}
+    {{ else }}
+      <tr>
+        <td colspan="6">No process data available.</td>
+      </tr>
+    {{ end }}
+  </tbody>
+</table>

pkg/heroagent/web/templates/admin/system/processes_table.jet

@@ -0,0 +1,40 @@
+{{ if isset(., "error") }}
+  <div class="alert alert-danger">{{ .error }}</div>
+{{ end }}
+
+<table class="table table-striped" id="processes-stats">
+  <thead>
+    <tr>
+      <th scope="col">PID</th>
+      <th scope="col">Name</th>
+      <th scope="col">Status</th>
+      <th scope="col">CPU (%)</th>
+      <th scope="col">Memory (MB)</th>
+      <th scope="col">Created</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{ if isset(., "processes") }}
+      {{ if .processes }}
+        {{ range .processes }}
+          <tr class="{{ if .is_current }}table-primary{{ end }}">
+            <td>{{.pid}}</td>
+            <td>{{.name}}</td>
+            <td>{{.status}}</td>
+            <td>{{ printf("%.1f%%", .cpu_percent) }}</td>
+            <td>{{ printf("%.1f MB", .memory_mb) }}</td>
+            <td>{{.create_time_str}}</td>
+          </tr>
+        {{ end }}
+      {{ else }}
+        <tr>
+          <td colspan="6">No process data available.</td>
+        </tr>
+      {{ end }}
+    {{ else }}
+      <tr>
+        <td colspan="6">Loading process data...</td>
+      </tr>
+    {{ end }}
+  </tbody>
+</table>

pkg/heroagent/web/templates/admin/system/settings.jet

@@ -0,0 +1,77 @@
+{{ extends "../../layout" }}
+
+{{ block documentBody() }}
+<article>
+  <header>
+    <h2>System Settings</h2>
+    <p>Configure system parameters and preferences</p>
+  </header>
+  <form>
+    <div class="grid">
+      <div>
+        <article>
+          <header>
+            <h3>Server Settings</h3>
+          </header>
+          <label for="server-port">Server Port</label>
+          <input id="server-port" type="number" value="9001">
+          
+          <label for="log-level">Default Log Level</label>
+          <select id="log-level">
+            <option value="info">Info</option>
+            <option value="warning">Warning</option>
+            <option value="error">Error</option>
+            <option value="debug">Debug</option>
+          </select>
+          
+          <label for="max-connections">Max Connections</label>
+          <input id="max-connections" type="number" value="100">
+        </article>
+      </div>
+      <div>
+        <article>
+          <header>
+            <h3>Security Settings</h3>
+          </header>
+          <label for="enable-auth">Enable Authentication</label>
+          <input id="enable-auth" type="checkbox" checked>
+          
+          <label for="session-timeout">Session Timeout (minutes)</label>
+          <input id="session-timeout" type="number" value="30">
+          
+          <label for="allowed-origins">Allowed Origins (CORS)</label>
+          <input id="allowed-origins" type="text" value="*">
+        </article>
+      </div>
+    </div>
+    <div class="grid">
+      <div>
+        <article>
+          <header>
+            <h3>Redis Settings</h3>
+          </header>
+          <label for="redis-port">Redis Port</label>
+          <input id="redis-port" type="number" value="6378">
+          
+          <label for="redis-max-memory">Max Memory (MB)</label>
+          <input id="redis-max-memory" type="number" value="512">
+        </article>
+      </div>
+      <div>
+        <article>
+          <header>
+            <h3>Executor Settings</h3>
+          </header>
+          <label for="executor-timeout">Command Timeout (seconds)</label>
+          <input id="executor-timeout" type="number" value="60">
+          
+          <label for="executor-max-processes">Max Concurrent Processes</label>
+          <input id="executor-max-processes" type="number" value="10">
+        </article>
+      </div>
+    </div>
+    <button type="submit">Save Settings</button>
+    <button class="secondary" type="reset">Reset</button>
+  </form>
+</article>
+{{ end }}

pkg/heroagent/web/templates/admin/vfs_logs.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{.title}} - HeroLauncher</title>
+  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
+  <link rel="stylesheet" href="/static/css/custom.css">
+  <script src="/static/js/jquery.min.js"></script>
+  <script src="/static/js/bootstrap.bundle.min.js"></script>
+  <script src="/static/js/unpoly.min.js"></script>
+</head>
+<body>
+  <div class="container-fluid p-4">
+    <div class="row mb-4">
+      <div class="col">
+        <h2>{{.managerName}} Logs</h2>
+        <p>View and filter logs from the {{.managerName}} service.</p>
+      </div>
+    </div>
+
+    <div class="row mb-4">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">
+            <h5 class="mb-0">Filter Logs</h5>
+          </div>
+          <div class="card-body">
+            <form id="filter-form">
+              <input type="hidden" id="manager" name="manager" value="{{.managerName}}">
+              <input type="hidden" id="endpoint" name="endpoint" value="{{.managerEndpoint}}">
+              
+              <div class="row">
+                <div class="col-md-3">
+                  <label for="method-filter">Filter by Method:</label>
+                  <select class="form-control" id="method-filter">
+                    <option value="">All Methods</option>
+                    {{range .methods}}
+                    <option value="{{.}}">{{index $.methodDisplayNames .}}</option>
+                    {{end}}
+                  </select>
+                </div>
+                
+                <div class="col-md-3">
+                  <label for="status-filter">Filter by Status:</label>
+                  <select class="form-control" id="status-filter">
+                    <option value="">All Statuses</option>
+                    <option value="success">Success</option>
+                    <option value="error">Error</option>
+                  </select>
+                </div>
+                
+                <div class="col-md-3">
+                  <label for="date-filter">Filter by Date:</label>
+                  <input type="date" class="form-control" id="date-filter">
+                </div>
+                
+                <div class="col-md-3">
+                  <label for="limit-filter">Limit Results:</label>
+                  <select class="form-control" id="limit-filter">
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+                    <option value="200">200</option>
+                    <option value="500">500</option>
+                  </select>
+                </div>
+              </div>
+              
+              <div class="row mt-3">
+                <div class="col">
+                  <button type="button" id="apply-filters" class="btn btn-primary">Apply Filters</button>
+                  <button type="button" id="reset-filters" class="btn btn-secondary">Reset Filters</button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">
+            <h5 class="mb-0">Logs</h5>
+          </div>
+          <div class="card-body">
+            <div class="table-responsive">
+              <table class="table table-striped">
+                <thead>
+                  <tr>
+                    <th>Timestamp</th>
+                    <th>Method</th>
+                    <th>Status</th>
+                    <th>Duration</th>
+                    <th>Details</th>
+                  </tr>
+                </thead>
+                <tbody id="logs-table-body">
+                  <!-- Logs will be loaded here -->
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    $(document).ready(function() {
+      // Apply filters when the button is clicked
+      $('#apply-filters').click(function() {
+        const queryParams = new URLSearchParams();
+        
+        // Get filter values
+        const methodFilter = $('#method-filter').val();
+        const statusFilter = $('#status-filter').val();
+        const dateFilter = $('#date-filter').val();
+        const limitFilter = $('#limit-filter').val();
+        
+        // Add filters to query parameters if they are set
+        if (methodFilter) queryParams.append('method', methodFilter);
+        if (statusFilter) queryParams.append('status', statusFilter);
+        if (dateFilter) queryParams.append('date', dateFilter);
+        if (limitFilter) queryParams.append('limit', limitFilter);
+        
+        // Add the manager and endpoint parameters to preserve them when reloading
+        queryParams.append('manager', document.getElementById('manager').value);
+        queryParams.append('endpoint', document.getElementById('endpoint').value);
+        
+        // Redirect to the same page with new query parameters
+        window.location.href = '/admin/openrpc/vfs/logs?' + queryParams.toString();
+      });
+      
+      // Reset filters when the button is clicked
+      $('#reset-filters').click(function() {
+        // Clear all filter inputs
+        $('#method-filter').val('');
+        $('#status-filter').val('');
+        $('#date-filter').val('');
+        $('#limit-filter').val('50');
+        
+        // Redirect to the base URL with only manager and endpoint parameters
+        const queryParams = new URLSearchParams();
+        queryParams.append('manager', document.getElementById('manager').value);
+        queryParams.append('endpoint', document.getElementById('endpoint').value);
+        window.location.href = '/admin/openrpc/vfs/logs?' + queryParams.toString();
+      });
+    });
+  </script>
+</body>
+</html>