chore: remove build artifacts from version control

- Remove agent and server binaries from git tracking
- These files are now properly ignored via .gitignore

.gitignore

@@ -31,3 +31,7 @@ Thumbs.db
 # Local configuration
 config.local.yaml
 .env.*.local
+
+# Temporary build files
+agent
+server

AGENTS.md

@@ -1,42 +1,20 @@
 # Nerd Monitor - Agent Guidelines
 
 ## Build & Test Commands
+- **Generate templates**: `make templ`
+- **Build**: `make build` (server + agent) or `make build-server`/`make build-agent`
+- **Cross-platform**: `make build-all`
+- **Clean**: `make clean`
+- **Test all**: `go test ./...`
+- **Test single**: `go test -run TestName ./package`
+- **Format**: `gofmt -w ./cmd ./internal ./views`
 
-```bash
+Note: Go 1.23+ project using Templ templating. Run `make templ` before building.
-# Generate Templ templates (required before building)
-make templ
-
-# Build server and agent for current OS
-make build
-
-# Build individual components
-make build-server
-make build-agent
-
-# Build for all platforms (Linux, macOS, Windows)
-make build-all
-
-# Clean build artifacts
-make clean
-```
-
-Note: This Go 1.21 project uses Templ for templating. Always run `make templ` before building.
 
 ## Code Style Guidelines
-
+- **Imports**: stdlib → third-party → internal (alphabetical within groups)
-**Imports**: Standard library first, then third-party packages, then internal modules. Organize alphabetically within each group.
+- **Formatting**: `gofmt` standards, explicit exported struct comments
-
+- **Naming**: CamelCase exports, lowercase unexported, single-letter receivers (e.g., `(h *Handler)`)
-**Formatting & Types**: Use `gofmt` standards. Explicit struct field comments for exported types. Prefer `error` return values (no panic for recoverable errors).
+- **Error Handling**: Explicit checks, `http.Error()` for HTTP, contextual wrapping
-
+- **Concurrency**: `sync.RWMutex` for shared state, defer lock releases, small critical sections
-**Naming**: CamelCase for exported symbols, lowercase for unexported. Receiver names as single letters (e.g., `(m *Manager)`). Constants use ALL_CAPS_SNAKE_CASE.
+- **HTTP**: Chi router, `func (h *Handler) Method(w http.ResponseWriter, r *http.Request)`, set Content-Type, validate early
-
-**Error Handling**: Define sentinel errors in dedicated files (e.g., `auth/errors.go`). Check errors explicitly; use `http.Error(w, "message", status)` for HTTP responses. Wrap errors with context when needed.
-
-**Project Structure**: 
-- `cmd/`: Executable entry points (server, agent)
-- `internal/`: Packages (api, auth, stats, store, ui)
-- `views/`: Templ templates (*.templ files)
-
-**Concurrency**: Use `sync.RWMutex` for shared state. Always defer lock releases. Keep critical sections small.
-
-**HTTP**: Use Chi router. Handlers follow `func (h *Handler) Name(w http.ResponseWriter, r *http.Request)`. Set Content-Type headers explicitly. Validate query parameters early and return 400/404 appropriately.

README.md

@@ -1,22 +1,25 @@
 # Nerd Monitor 📊
 
-A lightweight, cross-platform system monitoring solution written in Go. Monitor CPU, memory, and disk usage across multiple machines with a beautiful web dashboard.
+A lightweight, cross-platform system monitoring solution written in Go. Monitor CPU, memory, and disk usage across multiple machines with a beautiful web dashboard featuring instant real-time updates powered by Server-Sent Events and HTMX.
 
 ![Go](https://img.shields.io/badge/Go-1.23-blue?logo=go)
+![Real-time](https://img.shields.io/badge/real--time-SSE%20%2B%20HTMX-orange?logo=lightning)
 ![License](https://img.shields.io/badge/license-MIT-green)
 ![Platforms](https://img.shields.io/badge/platforms-Linux%20%7C%20macOS%20%7C%20Windows-important)
 
 ## Features
 
 - 🖥️ **Multi-platform Support** - Deploy agents on Linux, macOS, and Windows (AMD64 & ARM64)
-- 📈 **Real-time Monitoring** - Track CPU, RAM, and Disk usage with 15-second refresh intervals
+- ⚡ **Instant Real-time Updates** - Stats update immediately when agents report, not on fixed intervals
 - 🟢 **Live Status Indicators** - See which machines are online/offline at a glance
 - 🔒 **Secure Authentication** - Session-based admin authentication for the dashboard
 - 🧹 **Stale Agent Management** - Automatically detect and remove agents inactive for 6+ months
-- 📱 **Responsive Dashboard** - Beautiful, modern UI with auto-refresh
+- 📱 **Responsive Dashboard** - Beautiful, modern UI with seamless HTMX-powered updates
-- 🚀 **Minimal Dependencies** - Only Chi router and Templ templating engine (plus Go stdlib)
+- 🚀 **Minimal Dependencies** - Only Chi router, Templ templating, and HTMX (plus Go stdlib)
 - ⚙️ **Auto-Generation** - Agent IDs automatically generated from hostname
 - 💾 **In-Memory Storage** - Fast, zero-database setup (perfect for small to medium deployments)
+- 📡 **Server-Sent Events** - Real-time push notifications from server to web clients
+- 📝 **Structured Logging** - Comprehensive slog-based logging throughout the application
 
 ## Quick Start
 
@@ -54,7 +57,7 @@ Binaries are created in the `bin/` directory.
   -password securepassword
 ```
 
-Then access the dashboard at `http://localhost:8080`
+Then access the dashboard at `http://localhost:8080`. The interface provides real-time updates - stats refresh instantly when agents report new data!
 
 ### Running Agents
 
@@ -87,7 +90,7 @@ nerd-monitor-agent.bat --server 10.0.20.80:9090 --interval 30s
 
 ### Overview Page
 
-Shows all connected agents with real-time metrics:
+Shows all connected agents with instant real-time metrics:
 
 - **Status Badge** - Green (Online) or Red (Offline)
   - Online: Last report within 15 seconds
@@ -96,16 +99,18 @@ Shows all connected agents with real-time metrics:
 - **Memory Usage** - Used / Total with visual progress bar
 - **Disk Usage** - Used / Total with visual progress bar
 - **Last Seen** - Human-readable timestamp
+- **Live Updates** - Stats refresh immediately when agents report new data
 
 ### Agent Detail Page
 
-Click any agent hostname to see detailed statistics:
+Click any agent hostname to see detailed statistics with live updates:
 
-- Large CPU usage display with progress bar
+- Large CPU usage display with progress bar (updates in real-time)
 - Memory and disk breakdowns
 - Agent ID and detailed metadata
 - Last exact timestamp
 - Delete button for removing the agent
+- **Instant Updates** - CPU stats refresh immediately when agent reports
 
 ### Stale Agent Management
 
@@ -122,10 +127,15 @@ Agents inactive for 6+ months:
 - **HTTP Router**: Chi v5 for efficient routing
 - **Authentication**: Session-based auth with 24-hour expiry
 - **Storage**: In-memory concurrent-safe store (sync.RWMutex)
+- **Real-time Broadcasting**: Server-Sent Events (SSE) for instant UI updates
+- **Structured Logging**: slog-based logging with debug/info levels
 - **API Endpoints**:
-  - `POST /api/report` - Agent stats reporting
+  - `POST /api/report` - Agent stats reporting (triggers real-time broadcasts)
   - `GET /api/agents` - List all agents
   - `GET /api/agents/{id}` - Get specific agent stats
+  - `GET /api/dashboard/table` - HTML fragment for HTMX dashboard updates
+  - `GET /api/agents/{id}/stats` - HTML fragment for HTMX agent detail updates
+  - `GET /api/events` - Server-Sent Events for real-time notifications
 
 ### Agent (`cmd/agent/`)
 
@@ -138,8 +148,9 @@ Agents inactive for 6+ months:
 ### Views (`views/`)
 
 - **Templ Templates**: Type-safe HTML templating
+- **HTMX Integration**: Smooth, instant updates without page refreshes
+- **Server-Sent Events**: Real-time push notifications from server
 - **Responsive Design**: Works on desktop, tablet, and mobile
-- **Auto-Refresh**: Dashboard refreshes every 5 seconds
 - **Color-coded Status**: Visual indicators for system health
 
 ## Project Structure
@@ -148,28 +159,28 @@ Agents inactive for 6+ months:
 nerd-monitor/
 ├── cmd/
 │   ├── agent/
-│   │   └── main.go           # Agent executable
+│   │   └── main.go           # Agent executable with slog logging
 │   └── server/
-│       └── main.go           # Server executable
+│       └── main.go           # Server executable with slog logging
 ├── internal/
 │   ├── api/
-│   │   └── api.go            # API handlers
+│   │   └── api.go            # API handlers + real-time broadcaster
 │   ├── auth/
-│   │   ├── middleware.go     # Auth middleware
+│   │   ├── middleware.go     # Auth middleware with detailed logging
 │   │   └── errors.go         # Error definitions
 │   ├── stats/
 │   │   └── stats.go          # System stats collection
 │   ├── store/
-│   │   └── store.go          # In-memory agent storage
+│   │   └── store.go          # In-memory agent storage with logging
 │   └── ui/
-│       └── handlers.go       # Dashboard handlers
+│       └── handlers.go       # Dashboard handlers + HTMX endpoints
 ├── views/
-│   ├── layout.templ          # Base layout template
+│   ├── layout.templ          # Base layout with HTMX + SSE
-│   ├── dashboard.templ       # Dashboard page
+│   ├── dashboard.templ       # Dashboard with real-time updates
-│   ├── agent_detail.templ    # Agent detail page
+│   ├── agent_detail.templ    # Agent detail with live stats
 │   ├── login.templ           # Login page
 │   ├── components.templ      # Reusable components
-│   └── generate.go           # Templ code generation
+│   └── *_templ.go            # Generated Templ code
 ├── Makefile                  # Build system
 ├── go.mod / go.sum           # Go dependencies
 ├── AGENTS.md                 # Agent guidelines
@@ -231,9 +242,10 @@ Options:
 
 - **Agent Memory**: ~8-10 MB (depending on platform)
 - **Server Memory**: Scales with connected agents (~1 MB per 1000 agents)
-- **Network**: Minimal bandwidth (~1 KB per report)
+- **Network**: Minimal bandwidth (~1 KB per report + SSE connections)
-- **Dashboard Refresh**: 5 seconds (configurable)
+- **Real-time Updates**: Instant UI updates when agents report stats
 - **Agent Reporting**: 15 seconds (configurable)
+- **SSE Connections**: Lightweight persistent connections for real-time notifications
 
 ## Building for Specific Platforms
 
@@ -261,6 +273,8 @@ make build-all
 - `github.com/go-chi/chi/v5` - HTTP router
 - `github.com/a-h/templ` - HTML templating
 - `github.com/shirou/gopsutil/v3` - System statistics
+- **HTMX** (CDN) - Frontend interactivity and real-time updates
+- **Server-Sent Events** (Go stdlib) - Real-time push notifications
 
 ### Go Standard Library
 
@@ -270,6 +284,7 @@ make build-all
 - `time` - Timestamps and durations
 - `os` - Hostname, signals, I/O
 - `crypto/rand` - Token generation
+- `log/slog` - Structured logging throughout application
 
 ## Troubleshooting
 
@@ -279,6 +294,15 @@ make build-all
 2. Check agent logs for connection errors
 3. Ensure correct server address and port
 4. Check firewall rules allow outbound connections
+5. Check server logs for SSE broadcasting activity
+
+### Stats not updating in real-time
+
+1. Verify browser supports Server-Sent Events (SSE)
+2. Check browser developer tools for JavaScript errors
+3. Ensure `/api/events` endpoint is accessible (requires authentication)
+4. Check server logs for SSE connection/disconnection messages
+5. Verify HTMX library loaded correctly
 
 ### Agent shows "Offline" immediately
 
@@ -286,6 +310,7 @@ make build-all
 2. Verify server address is reachable: `ping 10.0.20.80`
 3. Check if server is listening on the correct port
 4. Review server logs for errors
+5. Note: Agents are marked offline if no report received in 15 seconds
 
 ### Can't login to dashboard
 
@@ -293,6 +318,7 @@ make build-all
 2. Try the default: `admin` / `admin`
 3. If changed, restart server with original credentials to reconfigure
 4. Check browser cookies are enabled
+5. Clear browser cache if SSE connections seem stuck
 
 ### Windows agent window appears then closes
 
@@ -312,6 +338,18 @@ make templ
 go run github.com/a-h/templ/cmd/templ@latest generate
 ```
 
+### Viewing Logs
+
+The application uses structured logging with `slog`. Set log level with:
+
+```bash
+# Debug logging (shows all activity)
+export GOLOGLEVEL=debug
+
+# Info logging (default, shows important events)
+export GOLOGLEVEL=info
+```
+
 ### Running Tests
 
 ```bash
@@ -324,20 +362,42 @@ go test ./...
 gofmt -w ./cmd ./internal ./views
 ```
 
+### Testing Real-time Features
+
+To test SSE and HTMX functionality:
+
+```bash
+# Start server
+./bin/nerd-monitor-server
+
+# In another terminal, send test stats
+curl -X POST "http://localhost:8080/api/report?id=test-agent" \
+  -H "Content-Type: application/json" \
+  -d '{"hostname": "test", "cpuUsage": 25.5, "ramUsage": 1000000, "ramTotal": 8000000, "diskUsage": 50000000, "diskTotal": 100000000}'
+```
+
 ## Contributing
 
 Contributions are welcome! Please follow the code style guidelines in `AGENTS.md`.
 
+## Recent Updates
+
+- ✅ **Real-time Updates**: Instant UI updates via Server-Sent Events and HTMX
+- ✅ **Structured Logging**: Comprehensive slog-based logging throughout
+- ✅ **Enhanced Monitoring**: Better debugging and operational visibility
+
 ## Future Enhancements
 
 - [ ] Database persistence (SQLite/PostgreSQL)
 - [ ] Alerting system (email/Slack notifications)
-- [ ] Historical data / graphing
+- [ ] Historical data / graphing with time-series storage
 - [ ] Agent grouping and tagging
 - [ ] Custom metric collection
 - [ ] TLS/HTTPS support
 - [ ] Multi-tenancy
-- [ ] API documentation (Swagger)
+- [ ] API documentation (Swagger/OpenAPI)
+- [ ] Webhook integrations
+- [ ] Mobile app companion
 
 ## License
 

cmd/agent/main.go

@@ -5,7 +5,7 @@ import (
 	"encoding/json"
 	"flag"
 	"fmt"
-	"log"
+	"log/slog"
 	"net/http"
 	"net/url"
 	"os"
@@ -25,8 +25,12 @@ func main() {
 	)
 	flag.Parse()
 
+	// Set up verbose logging
+	slog.SetLogLoggerLevel(slog.LevelDebug)
+
 	if *server == "" {
-		log.Fatal("--server flag is required")
+		slog.Error("Server flag is required")
+		os.Exit(1)
 	}
 
 	// Normalize server URL (add http:// if missing)
@@ -38,12 +42,13 @@ func main() {
 		var err error
 		id, err = generateAgentID()
 		if err != nil {
-			log.Fatalf("Failed to generate agent ID: %v", err)
+			slog.Error("Failed to generate agent ID", "error", err)
+			os.Exit(1)
 		}
 	}
 
-	log.Printf("Starting agent with ID: %s\n", id)
+	slog.Info("Starting agent", "id", id)
-	log.Printf("Reporting to: %s every %v\n", *server, *interval)
+	slog.Info("Reporting configuration", "server", *server, "interval", *interval)
 
 	// Initialize stats collector
 	collector := stats.NewCollector()
@@ -64,7 +69,7 @@ func main() {
 		case <-ticker.C:
 			reportStats(id, *server, collector)
 		case <-sigChan:
-			log.Println("Agent shutting down gracefully...")
+			slog.Info("Agent shutting down gracefully")
 			os.Exit(0)
 		}
 	}
@@ -79,37 +84,39 @@ func reportStats(agentID, serverURL string, collector *stats.Collector) {
 
 	stat, err := collector.Collect(hostname)
 	if err != nil {
-		log.Printf("Error collecting stats: %v", err)
+		slog.Error("Error collecting stats", "agentID", agentID, "hostname", hostname, "error", err)
 		return
 	}
 
 	// Marshal to JSON
 	body, err := json.Marshal(stat)
 	if err != nil {
-		log.Printf("Error marshaling stats: %v", err)
+		slog.Error("Error marshaling stats", "agentID", agentID, "error", err)
 		return
 	}
 
 	// Send to server
 	reportURL := fmt.Sprintf("%s/api/report?id=%s", serverURL, agentID)
+	slog.Debug("Sending stats report", "agentID", agentID, "url", reportURL, "bodySize", len(body))
 	resp, err := http.Post(reportURL, "application/json", bytes.NewReader(body))
 	if err != nil {
-		log.Printf("Error reporting stats: %v", err)
+		slog.Error("Error reporting stats", "agentID", agentID, "url", reportURL, "error", err)
 		return
 	}
 	defer resp.Body.Close()
 
 	if resp.StatusCode != http.StatusOK {
-		log.Printf("Server returned status %d", resp.StatusCode)
+		slog.Error("Server returned non-OK status", "agentID", agentID, "statusCode", resp.StatusCode, "url", reportURL)
 		return
 	}
 
-	log.Printf("Stats reported: CPU %.1f%% | RAM %s / %s | Disk %s / %s",
+	slog.Debug("Stats reported successfully",
-		stat.CPUUsage,
+		"agentID", agentID,
-		formatBytes(stat.RAMUsage),
+		"cpu", stat.CPUUsage,
-		formatBytes(stat.RAMTotal),
+		"ramUsage", formatBytes(stat.RAMUsage),
-		formatBytes(stat.DiskUsage),
+		"ramTotal", formatBytes(stat.RAMTotal),
-		formatBytes(stat.DiskTotal),
+		"diskUsage", formatBytes(stat.DiskUsage),
+		"diskTotal", formatBytes(stat.DiskTotal),
 	)
 }
 

cmd/server/main.go

@@ -2,7 +2,7 @@ package main
 
 import (
 	"flag"
-	"log"
+	"log/slog"
 	"net/http"
 	"os"
 	"os/signal"
@@ -24,6 +24,9 @@ func main() {
 	)
 	flag.Parse()
 
+	// Set up verbose logging
+	slog.SetLogLoggerLevel(slog.LevelDebug)
+
 	// Initialize dependencies
 	s := store.New()
 	authMgr := auth.New(*username, *password)
@@ -40,11 +43,20 @@ func main() {
 	r.Get("/login", uiHandler.Login)
 	r.Post("/login", uiHandler.Login)
 
+	// Public routes (no auth required)
+	r.Post("/api/report", apiHandler.ReportStats)
+	r.Get("/api/agents", apiHandler.ListAgents)
+	r.Get("/api/agents/{id}", apiHandler.GetAgent)
+
 	// Protected routes (auth required)
 	r.Group(func(protectedRoutes chi.Router) {
 		protectedRoutes.Use(authMgr.Middleware)
 		protectedRoutes.Get("/", uiHandler.Dashboard)
 		protectedRoutes.Get("/agents/{id}", uiHandler.AgentDetail)
+		protectedRoutes.Get("/api/dashboard/table", uiHandler.GetDashboardTable)
+		protectedRoutes.Get("/api/agents/{id}/stats", uiHandler.GetAgentStats)
+		protectedRoutes.Get("/api/events", uiHandler.Events)
+		protectedRoutes.Post("/agents/{id}/hostname", uiHandler.UpdateAgentHostname)
 		protectedRoutes.Post("/logout", uiHandler.Logout)
 		protectedRoutes.Post("/api/agents/remove-stale", uiHandler.RemoveStaleAgents)
 		protectedRoutes.Post("/api/agents/{id}/delete", uiHandler.DeleteAgent)
@@ -62,14 +74,15 @@ func main() {
 
 	go func() {
 		<-sigChan
-		log.Println("Shutting down server...")
+		slog.Info("Shutting down server...")
 		server.Close()
 		os.Exit(0)
 	}()
 
-	log.Printf("Starting server on http://%s:%s\n", *addr, *port)
+	slog.Info("Starting server", "addr", *addr+":"+*port, "url", "http://"+*addr+":"+*port)
-	log.Printf("Login with %s / %s\n", *username, *password)
+	slog.Info("Login credentials", "username", *username, "password", *password)
 	if err := server.ListenAndServe(); err != nil && err != http.ErrServerClosed {
-		log.Fatalf("Server error: %v", err)
+		slog.Error("Server error", "error", err)
+		os.Exit(1)
 	}
 }

internal/api/api.go

@@ -2,11 +2,59 @@ package api
 
 import (
 	"encoding/json"
+	"log/slog"
+	"net/http"
+	"sync"
+
+	"github.com/go-chi/chi/v5"
 	"nerd-monitor/internal/stats"
 	"nerd-monitor/internal/store"
-	"net/http"
 )
 
+// Broadcaster manages Server-Sent Events clients.
+type Broadcaster struct {
+	clients map[chan string]bool
+	mu      sync.RWMutex
+}
+
+var apiBroadcaster = &Broadcaster{
+	clients: make(map[chan string]bool),
+}
+
+// Broadcast sends a message to all connected SSE clients.
+func (b *Broadcaster) Broadcast(message string) {
+	b.mu.RLock()
+	defer b.mu.RUnlock()
+
+	for clientChan := range b.clients {
+		select {
+		case clientChan <- message:
+		default:
+			// Client channel is full, skip
+		}
+	}
+}
+
+// AddClient adds a new SSE client.
+func (b *Broadcaster) AddClient(clientChan chan string) {
+	b.mu.Lock()
+	defer b.mu.Unlock()
+	b.clients[clientChan] = true
+}
+
+// RemoveClient removes an SSE client.
+func (b *Broadcaster) RemoveClient(clientChan chan string) {
+	b.mu.Lock()
+	defer b.mu.Unlock()
+	delete(b.clients, clientChan)
+	close(clientChan)
+}
+
+// GetAPIBroadcaster returns the API broadcaster instance.
+func GetAPIBroadcaster() *Broadcaster {
+	return apiBroadcaster
+}
+
 // Handler manages HTTP requests.
 type Handler struct {
 	store *store.Store
@@ -19,57 +67,121 @@ func New(s *store.Store) *Handler {
 
 // ReportStats handles agent stats reports.
 func (h *Handler) ReportStats(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming stats report request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
 	agentID := r.URL.Query().Get("id")
 	if agentID == "" {
+		slog.Warn("Missing agent ID in stats report", "remoteAddr", r.RemoteAddr)
 		http.Error(w, "missing agent id", http.StatusBadRequest)
 		return
 	}
 
 	var stat stats.Stats
 	if err := json.NewDecoder(r.Body).Decode(&stat); err != nil {
+		slog.Error("Invalid request body in stats report", "agentID", agentID, "error", err)
 		http.Error(w, "invalid request body", http.StatusBadRequest)
 		return
 	}
 
+	slog.Debug("Updating agent stats", "agentID", agentID, "hostname", stat.Hostname, "cpu", stat.CPUUsage)
 	h.store.UpdateAgent(agentID, &stat)
+
+	// Broadcast update to all connected SSE clients
+	message := "event: stats-update\ndata: {\"type\": \"stats-update\", \"agentId\": \"" + agentID + "\"}\n\n"
+	slog.Info("Broadcasting stats update", "agentID", agentID)
+	apiBroadcaster.Broadcast(message)
+
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(map[string]string{"status": "ok"})
+	slog.Debug("Stats report processed successfully", "agentID", agentID)
 }
 
 // GetAgent returns stats for a single agent.
 func (h *Handler) GetAgent(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming get agent request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
 	agentID := r.URL.Query().Get("id")
 	if agentID == "" {
+		slog.Warn("Missing agent ID in get agent request", "remoteAddr", r.RemoteAddr)
 		http.Error(w, "missing agent id", http.StatusBadRequest)
 		return
 	}
 
+	slog.Debug("Retrieving agent stats", "agentID", agentID)
 	agent := h.store.GetAgent(agentID)
 	if agent == nil {
+		slog.Warn("Agent not found", "agentID", agentID)
 		http.Error(w, "agent not found", http.StatusNotFound)
 		return
 	}
 
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(agent)
+	slog.Debug("Agent stats retrieved successfully", "agentID", agentID)
 }
 
 // ListAgents returns all agents.
 func (h *Handler) ListAgents(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming list agents request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
+	slog.Debug("Retrieving all agents")
 	agents := h.store.GetAllAgents()
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(agents)
+	slog.Debug("All agents listed successfully", "count", len(agents))
 }
 
 // DeleteAgent removes an agent.
 func (h *Handler) DeleteAgent(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming delete agent request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
 	agentID := r.URL.Query().Get("id")
 	if agentID == "" {
+		slog.Warn("Missing agent ID in delete agent request", "remoteAddr", r.RemoteAddr)
 		http.Error(w, "missing agent id", http.StatusBadRequest)
 		return
 	}
 
+	slog.Info("Deleting agent", "agentID", agentID)
 	h.store.DeleteAgent(agentID)
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(map[string]string{"status": "deleted"})
+	slog.Info("Agent deleted successfully", "agentID", agentID)
+}
+
+// UpdateHostname updates the hostname for an agent.
+func (h *Handler) UpdateHostname(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming update hostname request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
+	if r.Method != http.MethodPost {
+		slog.Warn("Invalid method for update hostname", "method", r.Method)
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	agentID := chi.URLParam(r, "id")
+	if agentID == "" {
+		slog.Warn("Missing agent ID in update hostname request", "remoteAddr", r.RemoteAddr)
+		http.Error(w, "missing agent id", http.StatusBadRequest)
+		return
+	}
+
+	hostname := r.FormValue("hostname")
+	if hostname == "" {
+		slog.Warn("Missing hostname in update request", "agentID", agentID)
+		http.Error(w, "missing hostname", http.StatusBadRequest)
+		return
+	}
+
+	slog.Info("Updating agent hostname", "agentID", agentID, "newHostname", hostname)
+	err := h.store.UpdateHostname(agentID, hostname)
+	if err != nil {
+		slog.Warn("Failed to update hostname - agent not found", "agentID", agentID, "error", err)
+		http.Error(w, "agent not found", http.StatusNotFound)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(map[string]string{"status": "updated"})
+	slog.Info("Agent hostname updated successfully", "agentID", agentID, "hostname", hostname)
 }

internal/auth/middleware.go

@@ -3,6 +3,7 @@ package auth
 import (
 	"crypto/rand"
 	"encoding/hex"
+	"log/slog"
 	"net/http"
 	"sync"
 	"time"
@@ -36,11 +37,13 @@ func New(username, password string) *Manager {
 // Login validates credentials and creates a session.
 func (m *Manager) Login(username, password string) (string, error) {
 	if username != m.username || password != m.password {
+		slog.Debug("Login failed - invalid credentials", "username", username)
 		return "", ErrInvalidCredentials
 	}
 
 	token, err := generateToken()
 	if err != nil {
+		slog.Error("Failed to generate session token", "error", err)
 		return "", err
 	}
 
@@ -52,6 +55,7 @@ func (m *Manager) Login(username, password string) (string, error) {
 		ExpiresAt: time.Now().Add(m.expiryDur),
 	}
 
+	slog.Debug("Login successful, session created", "username", username, "token", token[:8]+"...")
 	return token, nil
 }
 
@@ -62,10 +66,17 @@ func (m *Manager) Validate(token string) bool {
 
 	session, ok := m.sessions[token]
 	if !ok {
+		slog.Debug("Session validation failed - token not found", "token", token[:8]+"...")
 		return false
 	}
 
-	return session.ExpiresAt.After(time.Now())
+	if !session.ExpiresAt.After(time.Now()) {
+		slog.Debug("Session validation failed - token expired", "token", token[:8]+"...", "expiredAt", session.ExpiresAt)
+		return false
+	}
+
+	slog.Debug("Session validation successful", "token", token[:8]+"...")
+	return true
 }
 
 // Logout invalidates a session.
@@ -74,16 +85,24 @@ func (m *Manager) Logout(token string) {
 	defer m.mu.Unlock()
 
 	delete(m.sessions, token)
+	slog.Debug("Session logged out", "token", token[:8]+"...")
 }
 
 // Middleware returns a Chi middleware for authentication.
 func (m *Manager) Middleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		cookie, err := r.Cookie("session_token")
-		if err != nil || !m.Validate(cookie.Value) {
+		if err != nil {
+			slog.Debug("Authentication failed - no session cookie", "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
 			http.Redirect(w, r, "/login", http.StatusSeeOther)
 			return
 		}
+		if !m.Validate(cookie.Value) {
+			slog.Debug("Authentication failed - invalid session", "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+			http.Redirect(w, r, "/login", http.StatusSeeOther)
+			return
+		}
+		slog.Debug("Authentication successful", "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
 		next.ServeHTTP(w, r)
 	})
 }

internal/store/store.go

@@ -1,12 +1,19 @@
 package store
 
 import (
+	"errors"
+	"log/slog"
 	"sync"
 	"time"
 
 	"nerd-monitor/internal/stats"
 )
 
+var (
+	// ErrAgentNotFound is returned when an agent is not found.
+	ErrAgentNotFound = errors.New("agent not found")
+)
+
 // AgentStats represents the latest stats for an agent.
 type AgentStats struct {
 	ID        string
@@ -47,6 +54,7 @@ func (s *Store) UpdateAgent(id string, stat *stats.Stats) {
 		DiskTotal: stat.DiskTotal,
 		LastSeen:  time.Now(),
 	}
+	slog.Debug("Agent stats updated", "agentID", id, "hostname", stat.Hostname, "cpu", stat.CPUUsage)
 }
 
 // GetAgent retrieves agent stats by ID.
@@ -54,7 +62,13 @@ func (s *Store) GetAgent(id string) *AgentStats {
 	s.mu.RLock()
 	defer s.mu.RUnlock()
 
-	return s.agents[id]
+	agent := s.agents[id]
+	if agent != nil {
+		slog.Debug("Agent retrieved", "agentID", id, "hostname", agent.Hostname)
+	} else {
+		slog.Debug("Agent not found", "agentID", id)
+	}
+	return agent
 }
 
 // GetAllAgents returns all agents.
@@ -66,6 +80,7 @@ func (s *Store) GetAllAgents() []*AgentStats {
 	for _, agent := range s.agents {
 		agents = append(agents, agent)
 	}
+	slog.Debug("All agents retrieved", "count", len(agents))
 	return agents
 }
 
@@ -75,4 +90,21 @@ func (s *Store) DeleteAgent(id string) {
 	defer s.mu.Unlock()
 
 	delete(s.agents, id)
+	slog.Debug("Agent deleted", "agentID", id)
+}
+
+// UpdateHostname updates the hostname for an agent.
+func (s *Store) UpdateHostname(id string, hostname string) error {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	agent, exists := s.agents[id]
+	if !exists {
+		slog.Debug("Agent not found for hostname update", "agentID", id)
+		return ErrAgentNotFound
+	}
+
+	agent.Hostname = hostname
+	slog.Debug("Agent hostname updated", "agentID", id, "hostname", hostname)
+	return nil
 }

internal/ui/handlers.go

@@ -2,9 +2,13 @@ package ui
 
 import (
 	"context"
+	"fmt"
+	"log/slog"
 	"net/http"
 	"time"
 
+	"github.com/go-chi/chi/v5"
+	"nerd-monitor/internal/api"
 	"nerd-monitor/internal/auth"
 	"nerd-monitor/internal/store"
 	"nerd-monitor/views"
@@ -12,44 +16,61 @@ import (
 
 // Handler serves UI pages.
 type Handler struct {
-	store *store.Store
+	store       *store.Store
-	auth  *auth.Manager
+	auth        *auth.Manager
+	broadcaster interface {
+		AddClient(chan string)
+		RemoveClient(chan string)
+	}
 }
 
 // New creates a new UI handler.
 func New(s *store.Store, a *auth.Manager) *Handler {
 	return &Handler{
-		store: s,
+		store:       s,
-		auth:  a,
+		auth:        a,
+		broadcaster: api.GetAPIBroadcaster(),
 	}
 }
 
 // Dashboard renders the dashboard page.
 func (h *Handler) Dashboard(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming dashboard request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
+	slog.Debug("Rendering dashboard", "agentCount", len(h.store.GetAllAgents()), "staleAgentCount", len(h.getStaleAgents()))
 	agents := h.store.GetAllAgents()
 	staleAgents := h.getStaleAgents()
 
 	component := views.Dashboard(agents, staleAgents)
 	component.Render(context.Background(), w)
+	slog.Debug("Dashboard rendered successfully")
 }
 
 // AgentDetail renders the agent detail page.
 func (h *Handler) AgentDetail(w http.ResponseWriter, r *http.Request) {
-	agentID := r.PathValue("id")
+	slog.Debug("Incoming agent detail request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
+	agentID := chi.URLParam(r, "id")
+	slog.Debug("Retrieving agent detail", "agentID", agentID)
 	agent := h.store.GetAgent(agentID)
 
 	if agent == nil {
+		slog.Warn("Agent not found for detail view", "agentID", agentID)
 		http.NotFound(w, r)
 		return
 	}
 
 	component := views.AgentDetail(agent)
 	component.Render(context.Background(), w)
+	slog.Debug("Agent detail rendered successfully", "agentID", agentID)
 }
 
 // Login renders the login page.
 func (h *Handler) Login(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming login request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
 	if r.Method == http.MethodGet {
+		slog.Debug("Rendering login page")
 		component := views.LoginPage("")
 		component.Render(context.Background(), w)
 		return
@@ -59,13 +80,16 @@ func (h *Handler) Login(w http.ResponseWriter, r *http.Request) {
 		username := r.FormValue("username")
 		password := r.FormValue("password")
 
+		slog.Debug("Attempting login", "username", username, "remoteAddr", r.RemoteAddr)
 		token, err := h.auth.Login(username, password)
 		if err != nil {
+			slog.Warn("Login failed - invalid credentials", "username", username, "remoteAddr", r.RemoteAddr, "error", err)
 			component := views.LoginPage("Invalid credentials")
 			component.Render(context.Background(), w)
 			return
 		}
 
+		slog.Info("Login successful", "username", username, "remoteAddr", r.RemoteAddr)
 		http.SetCookie(w, &http.Cookie{
 			Name:     "session_token",
 			Value:    token,
@@ -79,19 +103,26 @@ func (h *Handler) Login(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	slog.Warn("Invalid method for login", "method", r.Method)
 	http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
 }
 
 // Logout handles logout.
 func (h *Handler) Logout(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming logout request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
 	if r.Method != http.MethodPost {
+		slog.Warn("Invalid method for logout", "method", r.Method)
 		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
 		return
 	}
 
 	cookie, err := r.Cookie("session_token")
 	if err == nil {
+		slog.Info("Logging out user", "remoteAddr", r.RemoteAddr)
 		h.auth.Logout(cookie.Value)
+	} else {
+		slog.Debug("Logout attempted without valid session", "remoteAddr", r.RemoteAddr)
 	}
 
 	http.SetCookie(w, &http.Cookie{
@@ -107,32 +138,73 @@ func (h *Handler) Logout(w http.ResponseWriter, r *http.Request) {
 
 // RemoveStaleAgents handles bulk removal of stale agents.
 func (h *Handler) RemoveStaleAgents(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming remove stale agents request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
 	if r.Method != http.MethodPost {
+		slog.Warn("Invalid method for remove stale agents", "method", r.Method)
 		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
 		return
 	}
 
 	agentIDs := r.Form["agent_ids"]
+	slog.Info("Removing stale agents", "count", len(agentIDs), "agentIDs", agentIDs)
 	for _, id := range agentIDs {
 		h.store.DeleteAgent(id)
 	}
 
+	slog.Info("Stale agents removed successfully", "count", len(agentIDs))
 	http.Redirect(w, r, "/", http.StatusSeeOther)
 }
 
 // DeleteAgent handles single agent deletion.
 func (h *Handler) DeleteAgent(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming delete agent request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
 	if r.Method != http.MethodPost {
+		slog.Warn("Invalid method for delete agent", "method", r.Method)
 		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
 		return
 	}
 
-	agentID := r.PathValue("id")
+	agentID := chi.URLParam(r, "id")
+	slog.Info("Deleting agent", "agentID", agentID)
 	h.store.DeleteAgent(agentID)
 
+	slog.Info("Agent deleted successfully", "agentID", agentID)
 	http.Redirect(w, r, "/", http.StatusSeeOther)
 }
 
+// UpdateAgentHostname handles hostname updates for agents.
+func (h *Handler) UpdateAgentHostname(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("Incoming update agent hostname request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
+	if r.Method != http.MethodPost {
+		slog.Warn("Invalid method for update agent hostname", "method", r.Method)
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	agentID := chi.URLParam(r, "id")
+	hostname := r.FormValue("hostname")
+
+	if hostname == "" {
+		slog.Warn("Empty hostname provided for update", "agentID", agentID)
+		http.Error(w, "Hostname cannot be empty", http.StatusBadRequest)
+		return
+	}
+
+	slog.Info("Updating agent hostname", "agentID", agentID, "newHostname", hostname)
+	err := h.store.UpdateHostname(agentID, hostname)
+	if err != nil {
+		slog.Warn("Failed to update hostname - agent not found", "agentID", agentID, "error", err)
+		http.NotFound(w, r)
+		return
+	}
+
+	slog.Info("Agent hostname updated successfully", "agentID", agentID, "hostname", hostname)
+	http.Redirect(w, r, "/agents/"+agentID, http.StatusSeeOther)
+}
+
 // getStaleAgents returns agents that haven't reported in 6 months.
 func (h *Handler) getStaleAgents() []*store.AgentStats {
 	const staleThreshold = 6 * 30 * 24 * time.Hour
@@ -147,3 +219,177 @@ func (h *Handler) getStaleAgents() []*store.AgentStats {
 
 	return stale
 }
+
+// GetDashboardTable returns HTML fragment for the agent table.
+func (h *Handler) GetDashboardTable(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("HTMX dashboard table request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
+	agents := h.store.GetAllAgents()
+
+	w.Header().Set("Content-Type", "text/html")
+	w.Header().Set("Cache-Control", "no-cache")
+
+	if len(agents) == 0 {
+		w.Write([]byte(`<div class="alert alert-info">
+			<strong>ℹ️ No agents connected</strong>
+			<p style="margin-top: 0.5rem; font-size: 0.875rem;">
+				Start an agent to see its statistics appear here.
+			</p>
+		</div>`))
+		return
+	}
+
+	w.Write([]byte(`<div class="card">
+		<div class="card-title">Active Agents</div>
+		<table>
+			<thead>
+				<tr>
+					<th>Hostname</th>
+					<th>CPU Usage</th>
+					<th>Memory</th>
+					<th>Disk</th>
+					<th>Last Seen</th>
+				</tr>
+			</thead>
+			<tbody>`))
+
+	for _, agent := range agents {
+		// Determine online status (agent is online if reported within last 15 seconds)
+		isOnline := time.Since(agent.LastSeen) < 15*time.Second
+		statusClass := "status-red"
+		statusText := "Offline"
+		if isOnline {
+			statusClass = "status-green"
+			statusText = "Online"
+		}
+
+		row := fmt.Sprintf(`<tr>
+			<td>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<span class="status-badge %s" style="margin: 0;">%s</span>
+					<a href="/agents/%s" style="color: #3b82f6; text-decoration: none;">%s</a>
+				</div>
+			</td>
+			<td>%.1f%%</td>
+			<td>%s / %s</td>
+			<td>%s / %s</td>
+			<td class="timestamp">%s</td>
+		</tr>`,
+			statusClass,
+			statusText,
+			agent.ID,
+			agent.Hostname,
+			agent.CPUUsage,
+			formatBytes(agent.RAMUsage),
+			formatBytes(agent.RAMTotal),
+			formatBytes(agent.DiskUsage),
+			formatBytes(agent.DiskTotal),
+			agent.LastSeen.Format("2006-01-02 15:04:05"))
+		w.Write([]byte(row))
+	}
+
+	w.Write([]byte(`</tbody></table></div>`))
+}
+
+// GetAgentStats returns HTML fragment for agent statistics.
+func (h *Handler) GetAgentStats(w http.ResponseWriter, r *http.Request) {
+	slog.Debug("HTMX agent stats request", "method", r.Method, "path", r.URL.Path, "remoteAddr", r.RemoteAddr)
+
+	agentID := chi.URLParam(r, "id")
+	if agentID == "" {
+		slog.Warn("Missing agent ID in stats request", "remoteAddr", r.RemoteAddr)
+		http.Error(w, "missing agent id", http.StatusBadRequest)
+		return
+	}
+
+	agent := h.store.GetAgent(agentID)
+	if agent == nil {
+		slog.Warn("Agent not found for stats request", "agentID", agentID)
+		http.Error(w, "agent not found", http.StatusNotFound)
+		return
+	}
+
+	w.Header().Set("Content-Type", "text/html")
+	w.Header().Set("Cache-Control", "no-cache")
+
+	// Return just the stats content that should be updated
+	statsHTML := fmt.Sprintf(`<div style="font-size: 2rem; margin: 1rem 0;">%.1f%%</div>
+	<div class="progress-bar">
+		<div class="progress-fill" style="width: %.1f%%"></div>
+	</div>
+	<div style="margin-top: 1rem; font-size: 0.875rem; color: #94a3b8;">
+		Last updated: %s
+	</div>`,
+		agent.CPUUsage,
+		agent.CPUUsage,
+		agent.LastSeen.Format("2006-01-02 15:04:05"))
+
+	w.Write([]byte(statsHTML))
+}
+
+// Events provides Server-Sent Events for real-time updates.
+func (h *Handler) Events(w http.ResponseWriter, r *http.Request) {
+	slog.Info("SSE connection established", "remoteAddr", r.RemoteAddr)
+
+	// Set headers for Server-Sent Events
+	w.Header().Set("Content-Type", "text/event-stream")
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Connection", "keep-alive")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+
+	// Create a channel for this client
+	clientChan := make(chan string, 10)
+	h.broadcaster.AddClient(clientChan)
+
+	// Clean up when client disconnects
+	go func() {
+		<-r.Context().Done()
+		slog.Debug("SSE client disconnected", "remoteAddr", r.RemoteAddr)
+		h.broadcaster.RemoveClient(clientChan)
+	}()
+
+	// Send initial connection event
+	fmt.Fprintf(w, "event: connected\ndata: {}\n\n")
+	w.(http.Flusher).Flush()
+
+	// Send a test event after 2 seconds
+	go func() {
+		time.Sleep(2 * time.Second)
+		select {
+		case clientChan <- "event: test\ndata: {\"message\": \"SSE working\"}\n\n":
+		default:
+		}
+	}()
+
+	// Listen for broadcast messages
+	for {
+		select {
+		case <-r.Context().Done():
+			return
+		case message := <-clientChan:
+			slog.Debug("Sending SSE message to client", "remoteAddr", r.RemoteAddr, "message", message)
+			fmt.Fprintf(w, "%s\n", message)
+			w.(http.Flusher).Flush()
+		}
+	}
+}
+
+// formatBytes converts bytes to human-readable format.
+func formatBytes(bytes uint64) string {
+	const (
+		kb = 1024
+		mb = kb * 1024
+		gb = mb * 1024
+	)
+
+	switch {
+	case bytes >= gb:
+		return fmt.Sprintf("%.1f GB", float64(bytes)/float64(gb))
+	case bytes >= mb:
+		return fmt.Sprintf("%.1f MB", float64(bytes)/float64(mb))
+	case bytes >= kb:
+		return fmt.Sprintf("%.1f KB", float64(bytes)/float64(kb))
+	default:
+		return fmt.Sprintf("%d B", bytes)
+	}
+}

views/agent_detail.templ

@@ -9,29 +9,37 @@ templ AgentDetail(agent *store.AgentStats) {
 	@BaseLayout(agent.Hostname, agentDetailContent(agent))
 }
 
+templ AgentDetailContent(agent *store.AgentStats) {
+	@agentDetailContent(agent)
+}
+
 templ agentDetailContent(agent *store.AgentStats) {
 	<a href="/" class="back-link">← Back to Dashboard</a>
-	
+
 	<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
 		<h2 style="margin: 0;">{ agent.Hostname }</h2>
 		@AgentStatusBadge(agent.LastSeen)
 	</div>
 	
+	<!-- CPU Usage Card -->
 	<div class="grid" style="grid-template-columns: 1fr;">
 		<div class="card">
 			<div class="card-title">CPU Usage</div>
-			<div class="metric-value" style="font-size: 2rem; margin: 1rem 0;">
+			<div id="cpu-stats" hx-get={ templ.SafeURL("/api/agents/" + agent.ID + "/stats") } hx-trigger="stats-update" hx-swap="innerHTML">
-				{ FormatPercent(agent.CPUUsage) }
+				<div class="metric-value" style="font-size: 2rem; margin: 1rem 0;">
-			</div>
+					{ FormatPercent(agent.CPUUsage) }
-			<div class="progress-bar">
+				</div>
-				<div class={ "progress-fill", calcProgressClass(agent.CPUUsage/100) } style={ fmt.Sprintf("width: %.1f%%", agent.CPUUsage) }></div>
+				<div class="progress-bar">
-			</div>
+					<div class="progress-fill" class={ "progress-fill", calcProgressClass(agent.CPUUsage/100) } style={ fmt.Sprintf("width: %.1f%%", agent.CPUUsage) }></div>
-			<div style="margin-top: 1rem; font-size: 0.875rem; color: #94a3b8;">
+				</div>
-				Last updated: { FormatTime(agent.LastSeen) }
+				<div style="margin-top: 1rem; font-size: 0.875rem; color: #94a3b8;">
+					Last updated: { FormatTime(agent.LastSeen) }
+				</div>
 			</div>
 		</div>
 	</div>
 	
+	<!-- Memory and Disk Usage Cards -->
 	<div class="grid" style="margin-top: 1.5rem;">
 		<div class="card">
 			<div class="card-title">Memory Usage</div>
@@ -43,24 +51,49 @@ templ agentDetailContent(agent *store.AgentStats) {
 		</div>
 	</div>
 	
+	<!-- Agent Information and Settings -->
 	<div class="card" style="margin-top: 1.5rem;">
 		<div class="card-title">Agent Information</div>
 		<div class="metric-row">
 			<span class="metric-label">Agent ID</span>
 			<span class="metric-value" style="font-family: monospace; font-size: 0.875rem;">{ agent.ID }</span>
 		</div>
-		<div class="metric-row">
-			<span class="metric-label">Hostname</span>
-			<span class="metric-value">{ agent.Hostname }</span>
-		</div>
 		<div class="metric-row">
 			<span class="metric-label">Last Seen</span>
 			<span class="metric-value">{ agent.LastSeen.Format("2006-01-02 15:04:05") }</span>
 		</div>
 	</div>
 	
-	<div class="btn-group" style="margin-top: 1.5rem;">
+	<!-- Hostname Settings -->
-		<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/api/agents/%s/delete", agent.ID)) } style="margin: 0;" onsubmit="return confirm('Are you sure you want to remove this agent?');">
+	<div class="card" style="margin-top: 1.5rem;">
+		<div class="card-title">Settings</div>
+		<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/agents/%s/hostname", agent.ID)) } style="display: flex; flex-direction: column; gap: 1rem;">
+			<div style="display: flex; flex-direction: column; gap: 0.5rem;">
+				<label for="hostname" style="font-size: 0.875rem; font-weight: 500; color: #cbd5e1;">
+					Hostname
+				</label>
+				<input 
+					type="text" 
+					id="hostname" 
+					name="hostname" 
+					value={ agent.Hostname }
+					required
+					style="padding: 0.5rem 0.75rem; background-color: #1e293b; border: 1px solid #475569; border-radius: 0.375rem; color: #e2e8f0; font-size: 0.875rem;"
+				/>
+			</div>
+			<button type="submit" class="btn btn-primary" style="align-self: flex-start;">
+				Update Hostname
+			</button>
+		</form>
+	</div>
+	
+	<!-- Danger Zone -->
+	<div class="card" style="margin-top: 1.5rem; border-left: 3px solid #ef4444;">
+		<div class="card-title" style="color: #ef4444;">Danger Zone</div>
+		<p style="margin: 0 0 1rem 0; color: #94a3b8; font-size: 0.875rem;">
+			Deleting this agent will remove all its data and history.
+		</p>
+		<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/api/agents/%s/delete", agent.ID)) } style="margin: 0;" onsubmit="return confirm('Are you sure you want to remove this agent? This action cannot be undone.');">
 			<button type="submit" class="btn btn-danger">Delete Agent</button>
 		</form>
 	</div>

views/dashboard.templ

@@ -8,74 +8,80 @@ templ Dashboard(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
 	@BaseLayout("Dashboard", dashboardContent(agents, staleAgents))
 }
 
+templ DashboardContent(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
+	@dashboardContent(agents, staleAgents)
+}
+
 templ dashboardContent(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
 	<h2 style="margin-bottom: 1rem;">Agent Status Overview</h2>
-	
+
-	@StaleAgentAlert(len(staleAgents), nil)
+		@StaleAgentAlert(len(staleAgents), nil)
-	
+
-	if len(agents) == 0 {
+		<div id="agent-table-container" hx-get="/api/dashboard/table" hx-trigger="stats-update" hx-swap="innerHTML">
-		<div class="alert alert-info">
+			if len(agents) == 0 {
-			<strong>ℹ️ No agents connected</strong>
+				<div class="alert alert-info">
-			<p style="margin-top: 0.5rem; font-size: 0.875rem;">
+					<strong>ℹ️ No agents connected</strong>
-				Start an agent to see its statistics appear here.
+					<p style="margin-top: 0.5rem; font-size: 0.875rem;">
-			</p>
+						Start an agent to see its statistics appear here.
-		</div>
+					</p>
-	} else {
-		<div class="card">
-			<div class="card-title">Active Agents</div>
-			<table>
-				<thead>
-					<tr>
-						<th>Hostname</th>
-						<th>CPU Usage</th>
-						<th>Memory</th>
-						<th>Disk</th>
-						<th>Last Seen</th>
-					</tr>
-				</thead>
-				<tbody>
-					for _, agent := range agents {
-						@AgentRow(agent.ID, agent.Hostname, agent.CPUUsage, agent.RAMUsage, agent.RAMTotal, agent.DiskUsage, agent.DiskTotal, agent.LastSeen)
-					}
-				</tbody>
-			</table>
-		</div>
-	}
-	
-	if len(staleAgents) > 0 {
-		<div class="card" style="margin-top: 2rem; border-color: #d97706;">
-			<div class="card-title" style="color: #f59e0b;">
-				Stale Agents ({ len(staleAgents) })
-			</div>
-			<form method="POST" action="/api/agents/remove-stale" style="margin-top: 1rem;">
-				<table>
-					<thead>
-						<tr>
-							<th style="width: 30px;"><input type="checkbox" id="select-all" onchange="toggleAll(this)" /></th>
-							<th>Hostname</th>
-							<th>Last Seen</th>
-						</tr>
-					</thead>
-					<tbody>
-						for _, agent := range staleAgents {
-							<tr>
-								<td><input type="checkbox" name="agent_ids" value={ agent.ID } class="agent-checkbox" /></td>
-								<td>{ agent.Hostname }</td>
-								<td class="timestamp">{ FormatTime(agent.LastSeen) }</td>
-							</tr>
-						}
-					</tbody>
-				</table>
-				<div class="btn-group">
-					<button type="submit" class="btn btn-danger" style="margin-top: 1rem;">Remove Selected</button>
 				</div>
-			</form>
+			} else {
+				<div class="card">
+					<div class="card-title">Active Agents</div>
+					<table>
+						<thead>
+							<tr>
+								<th>Hostname</th>
+								<th>CPU Usage</th>
+								<th>Memory</th>
+								<th>Disk</th>
+								<th>Last Seen</th>
+							</tr>
+						</thead>
+						<tbody>
+							for _, agent := range agents {
+								@AgentRow(agent.ID, agent.Hostname, agent.CPUUsage, agent.RAMUsage, agent.RAMTotal, agent.DiskUsage, agent.DiskTotal, agent.LastSeen)
+							}
+						</tbody>
+					</table>
+				</div>
+			}
 		</div>
-		<script>
+	
-		function toggleAll(checkbox) {
+		if len(staleAgents) > 0 {
-			const checkboxes = document.querySelectorAll('.agent-checkbox');
+			<div class="card" style="margin-top: 2rem; border-color: #d97706;">
-			checkboxes.forEach(cb => cb.checked = checkbox.checked);
+				<div class="card-title" style="color: #f59e0b;">
+					Stale Agents ({ len(staleAgents) })
+				</div>
+				<form method="POST" action="/api/agents/remove-stale" style="margin-top: 1rem;">
+					<table>
+						<thead>
+							<tr>
+								<th style="width: 30px;"><input type="checkbox" id="select-all" onchange="toggleAll(this)" /></th>
+								<th>Hostname</th>
+								<th>Last Seen</th>
+							</tr>
+						</thead>
+						<tbody>
+							for _, agent := range staleAgents {
+								<tr>
+									<td><input type="checkbox" name="agent_ids" value={ agent.ID } class="agent-checkbox" /></td>
+									<td>{ agent.Hostname }</td>
+									<td class="timestamp">{ FormatTime(agent.LastSeen) }</td>
+								</tr>
+							}
+						</tbody>
+					</table>
+					<div class="btn-group">
+						<button type="submit" class="btn btn-danger" style="margin-top: 1rem;">Remove Selected</button>
+					</div>
+				</form>
+			</div>
 		}
-		</script>
+	<script>
+	function toggleAll(checkbox) {
+		const checkboxes = document.querySelectorAll('.agent-checkbox');
+		checkboxes.forEach(cb => cb.checked = checkbox.checked);
 	}
+	</script>
 }

views/generate.go

@@ -1,3 +0,0 @@
-//go:generate templ generate
-
-package views

views/layout.templ

@@ -6,8 +6,31 @@ templ BaseLayout(title string, content templ.Component) {
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta http-equiv="refresh" content="5" />
 		<title>{ title } - Nerd Monitor</title>
+		<script src="https://unpkg.com/htmx.org@2.0.4"></script>
+		<script>
+			document.addEventListener('DOMContentLoaded', function() {
+				// Connect to Server-Sent Events for real-time updates
+				const eventSource = new EventSource('/api/events');
+				eventSource.onmessage = function(event) {
+					console.log('SSE message received:', event.data);
+				};
+				eventSource.addEventListener('stats-update', function(event) {
+					console.log('Stats update event:', event.data);
+					// Trigger HTMX updates using HTMX's API
+					const agentTable = document.getElementById('agent-table-container');
+					const cpuStats = document.getElementById('cpu-stats');
+					if (agentTable) htmx.trigger(agentTable, 'stats-update');
+					if (cpuStats) htmx.trigger(cpuStats, 'stats-update');
+				});
+				eventSource.addEventListener('connected', function(event) {
+					console.log('SSE connected');
+				});
+				eventSource.onerror = function(event) {
+					console.log('SSE error:', event);
+				};
+			});
+		</script>
 		<style>
 			* {
 				margin: 0;