Add real-time log stream viewer to admin dashboard

New /admin/logs page with SSE-based tailing of wpcomposer.log and
pipeline.log. Handles missing files gracefully (waits for creation),
supports log rotation, and caps browser-side lines at 5000.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: retlehs

internal/http/handlers.go

@@ -9,6 +9,7 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+	"time"
 	"slices"
 	"strconv"
 	"strings"
@@ -317,6 +318,129 @@ func handleAdminBuilds(a *app.App, tmpl *templateSet) http.HandlerFunc {
 	}
 }
 
+var logFiles = map[string]string{
+	"wpcomposer": filepath.Join("storage", "logs", "wpcomposer.log"),
+	"pipeline":   filepath.Join("storage", "logs", "pipeline.log"),
+}
+
+func handleAdminLogs(tmpl *templateSet) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		render(w, tmpl.adminLogs, "admin_layout", nil)
+	}
+}
+
+func handleAdminLogStream(a *app.App) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		file := r.URL.Query().Get("file")
+		logPath, ok := logFiles[file]
+		if !ok {
+			http.Error(w, "unknown log file", http.StatusBadRequest)
+			return
+		}
+
+		flusher, ok := w.(http.Flusher)
+		if !ok {
+			http.Error(w, "streaming not supported", http.StatusInternalServerError)
+			return
+		}
+
+		w.Header().Set("Content-Type", "text/event-stream")
+		w.Header().Set("Cache-Control", "no-cache")
+		w.Header().Set("Connection", "keep-alive")
+		w.Header().Set("X-Accel-Buffering", "no")
+
+		ctx := r.Context()
+		ticker := time.NewTicker(500 * time.Millisecond)
+		defer ticker.Stop()
+
+		// Wait for the file to exist
+		var f *os.File
+		for f == nil {
+			if opened, err := os.Open(logPath); err == nil {
+				f = opened
+			} else {
+				fmt.Fprintf(w, "data: Waiting for %s ...\n\n", filepath.Base(logPath))
+				flusher.Flush()
+				select {
+				case <-ctx.Done():
+					return
+				case <-time.After(2 * time.Second):
+				}
+			}
+		}
+		defer f.Close()
+
+		// Send initial batch: last 200 lines
+		lines := tailFile(logPath, 200)
+		for _, line := range lines {
+			fmt.Fprintf(w, "data: %s\n\n", line)
+		}
+		flusher.Flush()
+
+		// Seek to end for tailing
+		offset, _ := f.Seek(0, 2)
+
+		buf := make([]byte, 64*1024)
+		var partial string
+		for {
+			select {
+			case <-ctx.Done():
+				return
+			case <-ticker.C:
+				info, err := os.Stat(logPath)
+				if err != nil {
+					continue
+				}
+				if info.Size() < offset {
+					// File was truncated/rotated, reopen
+					f.Close()
+					f, err = os.Open(logPath)
+					if err != nil {
+						continue
+					}
+					offset = 0
+				}
+				if info.Size() == offset {
+					continue
+				}
+				_, _ = f.Seek(offset, 0)
+				n, err := f.Read(buf)
+				if n > 0 {
+					offset += int64(n)
+					chunk := partial + string(buf[:n])
+					partial = ""
+					newLines := strings.Split(chunk, "\n")
+					if !strings.HasSuffix(chunk, "\n") {
+						partial = newLines[len(newLines)-1]
+						newLines = newLines[:len(newLines)-1]
+					}
+					for _, line := range newLines {
+						if line != "" {
+							fmt.Fprintf(w, "data: %s\n\n", line)
+						}
+					}
+					flusher.Flush()
+				}
+				if err != nil {
+					continue
+				}
+			}
+		}
+	}
+}
+
+func tailFile(path string, n int) []string {
+	data, err := os.ReadFile(path)
+	if err != nil {
+		return nil
+	}
+	lines := strings.Split(strings.TrimRight(string(data), "\n"), "\n")
+	if len(lines) > n {
+		lines = lines[len(lines)-n:]
+	}
+	return lines
+}
+
 // ogImageURL returns the full OG image URL for a given key.
 // In production, it uses the CDN. In local dev, it uses /og/ routes.
 func ogImageURL(cfg *config.Config, key string) string {

internal/http/router.go

@@ -91,6 +91,8 @@ func NewRouter(a *app.App) chi.Router {
 		r.Get("/", handleAdminDashboard(a, tmpl))
 		r.Get("/packages", handleAdminPackages(a, tmpl))
 		r.Get("/builds", handleAdminBuilds(a, tmpl))
+		r.Get("/logs", handleAdminLogs(tmpl))
+		r.Get("/logs/stream", handleAdminLogStream(a))
 	})
 
 	r.Mount("/admin", admin)

internal/http/templates.go

@@ -36,6 +36,7 @@ type templateSet struct {
 	adminDashboard *template.Template
 	adminPackages  *template.Template
 	adminBuilds    *template.Template
+	adminLogs      *template.Template
 }
 
 func loadTemplates(env string) *templateSet {
@@ -50,6 +51,7 @@ func loadTemplates(env string) *templateSet {
 		adminDashboard: parse("templates/admin_layout.html", "templates/admin_dashboard.html"),
 		adminPackages:  parse("templates/admin_layout.html", "templates/admin_packages.html"),
 		adminBuilds:    parse("templates/admin_layout.html", "templates/admin_builds.html"),
+		adminLogs:      parse("templates/admin_layout.html", "templates/admin_logs.html"),
 	}
 }
 

internal/http/templates/admin_layout.html

@@ -19,6 +19,7 @@
 <a href="/admin" class="hover:text-gray-300">Dashboard</a>
 <a href="/admin/packages" class="hover:text-gray-300">Packages</a>
 <a href="/admin/builds" class="hover:text-gray-300">Builds</a>
+<a href="/admin/logs" class="hover:text-gray-300">Logs</a>
 <form method="POST" action="/admin/logout" class="inline">
 <button type="submit" class="hover:text-gray-300">Logout</button>
 </form>

internal/http/templates/admin_logs.html

@@ -0,0 +1,90 @@
+{{template "admin_layout" .}}
+{{define "title"}}Logs{{end}}
+{{define "content"}}
+<div class="flex items-center justify-between mb-4">
+<h1 class="text-xl font-bold">Logs</h1>
+<div class="flex items-center gap-2 text-sm">
+<span id="status" class="text-gray-400">Connecting...</span>
+<button onclick="toggleScroll()" id="scrollBtn" class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-50 text-xs">Auto-scroll: ON</button>
+<button onclick="clearLog()" class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-50 text-xs">Clear</button>
+</div>
+</div>
+<div class="flex gap-1 mb-2" role="tablist">
+<button onclick="switchTab('wpcomposer')" id="tab-wpcomposer" role="tab" class="px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-300 bg-white">wpcomposer.log</button>
+<button onclick="switchTab('pipeline')" id="tab-pipeline" role="tab" class="px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-200 bg-gray-100 text-gray-500">pipeline.log</button>
+</div>
+<div id="log-container" class="bg-gray-900 text-gray-100 rounded-b rounded-r border border-gray-300 font-mono text-xs leading-relaxed overflow-auto" style="height: calc(100vh - 260px);">
+<pre id="log-output" class="p-4 whitespace-pre-wrap break-all"></pre>
+</div>
+<script>
+let currentTab = 'wpcomposer';
+let eventSource = null;
+let autoScroll = true;
+const maxLines = 5000;
+
+function switchTab(tab) {
+  currentTab = tab;
+  document.querySelectorAll('[role="tab"]').forEach(function(el) {
+    if (el.id === 'tab-' + tab) {
+      el.className = 'px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-300 bg-white';
+    } else {
+      el.className = 'px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-200 bg-gray-100 text-gray-500';
+    }
+  });
+  document.getElementById('log-output').textContent = '';
+  connect();
+}
+
+function connect() {
+  if (eventSource) {
+    eventSource.close();
+  }
+  var status = document.getElementById('status');
+  status.textContent = 'Connecting...';
+  status.className = 'text-gray-400';
+
+  eventSource = new EventSource('/admin/logs/stream?file=' + currentTab);
+  eventSource.onopen = function() {
+    status.textContent = 'Connected';
+    status.className = 'text-green-600';
+  };
+  eventSource.onmessage = function(e) {
+    var output = document.getElementById('log-output');
+    var container = document.getElementById('log-container');
+    output.textContent += e.data + '\n';
+
+    // Trim if too many lines
+    var lines = output.textContent.split('\n');
+    if (lines.length > maxLines) {
+      output.textContent = lines.slice(lines.length - maxLines).join('\n');
+    }
+
+    if (autoScroll) {
+      container.scrollTop = container.scrollHeight;
+    }
+  };
+  eventSource.onerror = function() {
+    status.textContent = 'Disconnected';
+    status.className = 'text-red-500';
+    eventSource.close();
+    setTimeout(connect, 3000);
+  };
+}
+
+function toggleScroll() {
+  autoScroll = !autoScroll;
+  var btn = document.getElementById('scrollBtn');
+  btn.textContent = 'Auto-scroll: ' + (autoScroll ? 'ON' : 'OFF');
+  if (autoScroll) {
+    var container = document.getElementById('log-container');
+    container.scrollTop = container.scrollHeight;
+  }
+}
+
+function clearLog() {
+  document.getElementById('log-output').textContent = '';
+}
+
+connect();
+</script>
+{{end}}