From 17ff3811f873791289896aa9ef87edcf978bbbc0 Mon Sep 17 00:00:00 2001
From: Mikhail Chusavitin <mchusavitin@mchusmbp.local>
Date: Thu, 2 Apr 2026 13:43:59 +0300
Subject: [PATCH] fix(webui): improve tasks logs and ordering

---
 audit/internal/webui/api.go         |   5 +-
 audit/internal/webui/pages.go       |  90 +++++++++++++++++---
 audit/internal/webui/server_test.go |  19 +++++
 audit/internal/webui/tasks.go       |  85 +++++++++++++++----
 audit/internal/webui/tasks_test.go  | 126 ++++++++++++++++++++++++++++
 5 files changed, 297 insertions(+), 28 deletions(-)

diff --git a/audit/internal/webui/api.go b/audit/internal/webui/api.go
index 5fb23fc..24d0823 100644
--- a/audit/internal/webui/api.go
+++ b/audit/internal/webui/api.go
@@ -63,6 +63,10 @@ func streamJob(w http.ResponseWriter, r *http.Request, j *jobState) {
 	if !sseStart(w) {
 		return
 	}
+	streamSubscribedJob(w, r, j)
+}
+
+func streamSubscribedJob(w http.ResponseWriter, r *http.Request, j *jobState) {
 	existing, ch := j.subscribe()
 	for _, line := range existing {
 		sseWrite(w, "", line)
@@ -428,7 +432,6 @@ func (h *handler) handleAPIExportList(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, entries)
 }
 
-
 func (h *handler) handleAPIExportUSBTargets(w http.ResponseWriter, _ *http.Request) {
 	if h.opts.App == nil {
 		writeError(w, http.StatusServiceUnavailable, "app not configured")
diff --git a/audit/internal/webui/pages.go b/audit/internal/webui/pages.go
index 7818fc3..558b4f9 100644
--- a/audit/internal/webui/pages.go
+++ b/audit/internal/webui/pages.go
@@ -1559,23 +1559,37 @@ func renderTasks() string {
 <div class="card">
 <div id="tasks-table"><p style="color:var(--muted);font-size:13px;padding:16px">Loading...</p></div>
 </div>
-<div id="task-log-section" style="display:none;margin-top:16px" class="card">
-  <div class="card-head">Logs — <span id="task-log-title"></span>
-    <button class="btn btn-sm btn-secondary" onclick="closeTaskLog()" style="margin-left:auto">&#10005;</button>
+<div id="task-log-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:120;align-items:center;justify-content:center;padding:16px">
+  <div style="background:#fff;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.35);width:calc(100vw - 32px);max-width:1600px;height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;position:relative">
+    <div class="card-head" style="padding:14px 18px;font-size:14px">Logs — <span id="task-log-title"></span>
+      <button class="btn btn-sm btn-secondary" onclick="closeTaskLog()" style="margin-left:auto">&#10005;</button>
+    </div>
+    <div class="card-body" style="padding:16px;flex:1;min-height:0"><div id="task-log-terminal" class="terminal" style="height:100%;max-height:none"></div></div>
   </div>
-  <div class="card-body"><div id="task-log-terminal" class="terminal" style="max-height:500px"></div></div>
 </div>
 <script>
 var _taskLogES = null;
 var _taskRefreshTimer = null;
+var _tasksAll = [];
+var _taskPage = 1;
+var _taskPageSize = 50;
+var _taskLogID = '';
 
 function loadTasks() {
   fetch('/api/tasks').then(r=>r.json()).then(tasks => {
-    if (!tasks || tasks.length === 0) {
+    _tasksAll = Array.isArray(tasks) ? tasks : [];
+    if (_tasksAll.length === 0) {
+      _taskPage = 1;
       document.getElementById('tasks-table').innerHTML = '<p style="color:var(--muted);font-size:13px;padding:16px">No tasks.</p>';
+      syncTaskLogFromHash();
       return;
     }
-    const rows = tasks.map(t => {
+    const totalPages = Math.max(1, Math.ceil(_tasksAll.length / _taskPageSize));
+    if (_taskPage > totalPages) _taskPage = totalPages;
+    if (_taskPage < 1) _taskPage = 1;
+    const start = (_taskPage - 1) * _taskPageSize;
+    const pageTasks = _tasksAll.slice(start, start + _taskPageSize);
+    const rows = pageTasks.map(t => {
       const dur = t.elapsed_sec ? formatDurSec(t.elapsed_sec) : '';
       const statusClass = {running:'badge-ok',pending:'badge-unknown',done:'badge-ok',failed:'badge-err',cancelled:'badge-unknown'}[t.status]||'badge-unknown';
       const statusLabel = {running:'&#9654; running',pending:'pending',done:'&#10003; done',failed:'&#10007; failed',cancelled:'cancelled'}[t.status]||t.status;
@@ -1594,8 +1608,20 @@ function loadTasks() {
         '<td>'+t.priority+'</td>' +
         '<td>'+actions+'</td></tr>';
     }).join('');
+    const showingFrom = start + 1;
+    const showingTo = Math.min(start + pageTasks.length, _tasksAll.length);
+    const pager =
+      '<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--border-lite);background:var(--surface-2)">' +
+        '<div style="font-size:12px;color:var(--muted)">Showing '+showingFrom+'-'+showingTo+' of '+_tasksAll.length+' tasks</div>' +
+        '<div style="display:flex;align-items:center;gap:8px">' +
+          '<button class="btn btn-sm btn-secondary" onclick="setTaskPage('+(_taskPage-1)+')" '+(_taskPage <= 1 ? 'disabled' : '')+'>Previous</button>' +
+          '<span style="font-size:12px;color:var(--muted)">Page '+_taskPage+' / '+totalPages+'</span>' +
+          '<button class="btn btn-sm btn-secondary" onclick="setTaskPage('+(_taskPage+1)+')" '+(_taskPage >= totalPages ? 'disabled' : '')+'>Next</button>' +
+        '</div>' +
+      '</div>';
     document.getElementById('tasks-table').innerHTML =
-      '<table><tr><th>Name</th><th>Status</th><th>Created</th><th>Duration</th><th>Priority</th><th>Actions</th></tr>'+rows+'</table>';
+      '<table><tr><th>Name</th><th>Status</th><th>Created</th><th>Duration</th><th>Priority</th><th>Actions</th></tr>'+rows+'</table>' + pager;
+    syncTaskLogFromHash();
   });
 }
 
@@ -1607,6 +1633,11 @@ function formatDurSec(sec) {
   const m = Math.floor(sec/60), ss = sec%60;
   return m+'m '+ss+'s';
 }
+function setTaskPage(page) {
+  const totalPages = Math.max(1, Math.ceil(_tasksAll.length / _taskPageSize));
+  _taskPage = Math.min(totalPages, Math.max(1, page));
+  loadTasks();
+}
 
 function cancelTask(id) {
   fetch('/api/tasks/'+id+'/cancel',{method:'POST'}).then(()=>loadTasks());
@@ -1633,24 +1664,59 @@ function setPriority(id, delta) {
   fetch('/api/tasks/'+id+'/priority',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({delta:delta})})
     .then(()=>loadTasks());
 }
+function resetTaskLog(term, text) {
+  term.textContent = text ? text + '\n' : '';
+  if (text) term.dataset.placeholder = '1';
+  else delete term.dataset.placeholder;
+}
+function prependTaskLogLine(term, line) {
+  if (term.dataset.placeholder === '1') {
+    term.textContent = '';
+    delete term.dataset.placeholder;
+  }
+  term.prepend(document.createTextNode(line + '\n'));
+  term.scrollTop = 0;
+}
 function viewLog(id, name) {
   if (_taskLogES) { _taskLogES.close(); _taskLogES = null; }
-  document.getElementById('task-log-section').style.display = '';
+  _taskLogID = id;
+  window.location.hash = id;
+  document.getElementById('task-log-overlay').style.display = 'flex';
   document.getElementById('task-log-title').textContent = name;
   const term = document.getElementById('task-log-terminal');
-  term.textContent = 'Connecting...\n';
+  resetTaskLog(term, 'Connecting...');
   _taskLogES = new EventSource('/api/tasks/'+id+'/stream');
-  _taskLogES.onmessage = e => { term.textContent += e.data+'\n'; term.scrollTop=term.scrollHeight; };
+  _taskLogES.onopen = () => {
+    if (term.dataset.placeholder === '1') resetTaskLog(term, 'Connected. Waiting for output...');
+  };
+  _taskLogES.onmessage = e => { prependTaskLogLine(term, e.data); };
   _taskLogES.addEventListener('done', e => {
     _taskLogES.close(); _taskLogES=null;
-    term.textContent += (e.data ? '\nERROR: '+e.data : '\nDone.')+'\n';
+    prependTaskLogLine(term, e.data ? 'ERROR: '+e.data : 'Done.');
   });
 }
+function syncTaskLogFromHash() {
+  const id = (window.location.hash || '').replace(/^#/, '');
+  if (!id || id === _taskLogID) return;
+  const task = _tasksAll.find(t => t.id === id);
+  if (!task) return;
+  viewLog(task.id, task.name || task.id);
+}
 function closeTaskLog() {
   if (_taskLogES) { _taskLogES.close(); _taskLogES=null; }
-  document.getElementById('task-log-section').style.display='none';
+  _taskLogID = '';
+  if (window.location.hash) history.replaceState(null, '', '/tasks');
+  document.getElementById('task-log-overlay').style.display='none';
 }
 
+document.getElementById('task-log-overlay').addEventListener('click', function(e) {
+  if (e.target === this) closeTaskLog();
+});
+window.addEventListener('hashchange', syncTaskLogFromHash);
+window.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape' && document.getElementById('task-log-overlay').style.display !== 'none') closeTaskLog();
+});
+
 loadTasks();
 _taskRefreshTimer = setInterval(loadTasks, 2000);
 </script>`
diff --git a/audit/internal/webui/server_test.go b/audit/internal/webui/server_test.go
index e563876..6978f82 100644
--- a/audit/internal/webui/server_test.go
+++ b/audit/internal/webui/server_test.go
@@ -359,6 +359,25 @@ func TestAuditPageRendersViewerFrameAndActions(t *testing.T) {
 	}
 }
 
+func TestTasksPageRendersLogModalAndPaginationControls(t *testing.T) {
+	handler := NewHandler(HandlerOptions{})
+	rec := httptest.NewRecorder()
+	handler.ServeHTTP(rec, httptest.NewRequest(http.MethodGet, "/tasks", nil))
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status=%d", rec.Code)
+	}
+	body := rec.Body.String()
+	if !strings.Contains(body, `id="task-log-overlay"`) {
+		t.Fatalf("tasks page missing log modal overlay: %s", body)
+	}
+	if !strings.Contains(body, `_taskPageSize = 50`) {
+		t.Fatalf("tasks page missing pagination size config: %s", body)
+	}
+	if !strings.Contains(body, `Previous</button>`) || !strings.Contains(body, `Next</button>`) {
+		t.Fatalf("tasks page missing pagination controls: %s", body)
+	}
+}
+
 func TestViewerRendersLatestSnapshot(t *testing.T) {
 	dir := t.TempDir()
 	path := filepath.Join(dir, "audit.json")
diff --git a/audit/internal/webui/tasks.go b/audit/internal/webui/tasks.go
index 4341740..a11dd4d 100644
--- a/audit/internal/webui/tasks.go
+++ b/audit/internal/webui/tasks.go
@@ -291,6 +291,30 @@ func (q *taskQueue) findJob(id string) (*jobState, bool) {
 	return t.job, true
 }
 
+type taskStreamSource struct {
+	status  string
+	errMsg  string
+	logPath string
+	job     *jobState
+}
+
+func (q *taskQueue) taskStreamSource(id string) (taskStreamSource, bool) {
+	q.mu.Lock()
+	defer q.mu.Unlock()
+	for _, t := range q.tasks {
+		if t.ID != id {
+			continue
+		}
+		return taskStreamSource{
+			status:  t.Status,
+			errMsg:  t.ErrMsg,
+			logPath: t.LogPath,
+			job:     t.job,
+		}, true
+	}
+	return taskStreamSource{}, false
+}
+
 func (q *taskQueue) hasActiveTarget(target string) bool {
 	q.mu.Lock()
 	defer q.mu.Unlock()
@@ -305,7 +329,7 @@ func (q *taskQueue) hasActiveTarget(target string) bool {
 	return false
 }
 
-// snapshot returns a copy of all tasks sorted for display (running first, then pending by priority, then done by doneAt desc).
+// snapshot returns a copy of all tasks sorted for display with newest tasks first.
 func (q *taskQueue) snapshot() []Task {
 	q.mu.Lock()
 	defer q.mu.Unlock()
@@ -315,6 +339,9 @@ func (q *taskQueue) snapshot() []Task {
 		out[i].ElapsedSec = taskElapsedSec(&out[i], time.Now())
 	}
 	sort.SliceStable(out, func(i, j int) bool {
+		if !out[i].CreatedAt.Equal(out[j].CreatedAt) {
+			return out[i].CreatedAt.After(out[j].CreatedAt)
+		}
 		si := statusOrder(out[i].Status)
 		sj := statusOrder(out[j].Status)
 		if si != sj {
@@ -323,7 +350,7 @@ func (q *taskQueue) snapshot() []Task {
 		if out[i].Priority != out[j].Priority {
 			return out[i].Priority > out[j].Priority
 		}
-		return out[i].CreatedAt.Before(out[j].CreatedAt)
+		return out[i].Name < out[j].Name
 	})
 	return out
 }
@@ -750,21 +777,49 @@ func (h *handler) handleAPITasksKillWorkers(w http.ResponseWriter, _ *http.Reque
 
 func (h *handler) handleAPITasksStream(w http.ResponseWriter, r *http.Request) {
 	id := r.PathValue("id")
-	// Wait up to 5s for the task to get a job (it may be pending)
-	deadline := time.Now().Add(5 * time.Second)
-	var j *jobState
-	for time.Now().Before(deadline) {
-		if jj, ok := globalQueue.findJob(id); ok {
-			j = jj
-			break
-		}
-		time.Sleep(200 * time.Millisecond)
-	}
-	if j == nil {
-		http.Error(w, "task not found or not yet started", http.StatusNotFound)
+	src, ok := globalQueue.taskStreamSource(id)
+	if !ok {
+		http.Error(w, "task not found", http.StatusNotFound)
 		return
 	}
-	streamJob(w, r, j)
+	if src.job != nil {
+		streamJob(w, r, src.job)
+		return
+	}
+	if src.status == TaskDone || src.status == TaskFailed || src.status == TaskCancelled {
+		j := newTaskJobState(src.logPath)
+		j.finish(src.errMsg)
+		streamJob(w, r, j)
+		return
+	}
+	if !sseStart(w) {
+		return
+	}
+	sseWrite(w, "", "Task is queued. Waiting for worker...")
+	ticker := time.NewTicker(200 * time.Millisecond)
+	defer ticker.Stop()
+	for {
+		select {
+		case <-ticker.C:
+			src, ok = globalQueue.taskStreamSource(id)
+			if !ok {
+				sseWrite(w, "done", "task not found")
+				return
+			}
+			if src.job != nil {
+				streamSubscribedJob(w, r, src.job)
+				return
+			}
+			if src.status == TaskDone || src.status == TaskFailed || src.status == TaskCancelled {
+				j := newTaskJobState(src.logPath)
+				j.finish(src.errMsg)
+				streamSubscribedJob(w, r, j)
+				return
+			}
+		case <-r.Context().Done():
+			return
+		}
+	}
 }
 
 func (q *taskQueue) assignTaskLogPathLocked(t *Task) {
diff --git a/audit/internal/webui/tasks_test.go b/audit/internal/webui/tasks_test.go
index 8ba6788..27a32f6 100644
--- a/audit/internal/webui/tasks_test.go
+++ b/audit/internal/webui/tasks_test.go
@@ -2,6 +2,8 @@ package webui
 
 import (
 	"context"
+	"net/http"
+	"net/http/httptest"
 	"os"
 	"os/exec"
 	"path/filepath"
@@ -122,6 +124,130 @@ func TestNewTaskJobStateLoadsExistingLog(t *testing.T) {
 	}
 }
 
+func TestTaskQueueSnapshotSortsNewestFirst(t *testing.T) {
+	now := time.Date(2026, 4, 2, 12, 0, 0, 0, time.UTC)
+	q := &taskQueue{
+		tasks: []*Task{
+			{
+				ID:        "old-running",
+				Name:      "Old Running",
+				Status:    TaskRunning,
+				Priority:  10,
+				CreatedAt: now.Add(-3 * time.Minute),
+			},
+			{
+				ID:        "new-done",
+				Name:      "New Done",
+				Status:    TaskDone,
+				Priority:  0,
+				CreatedAt: now.Add(-1 * time.Minute),
+			},
+			{
+				ID:        "mid-pending",
+				Name:      "Mid Pending",
+				Status:    TaskPending,
+				Priority:  1,
+				CreatedAt: now.Add(-2 * time.Minute),
+			},
+		},
+	}
+
+	got := q.snapshot()
+	if len(got) != 3 {
+		t.Fatalf("snapshot len=%d want 3", len(got))
+	}
+	if got[0].ID != "new-done" || got[1].ID != "mid-pending" || got[2].ID != "old-running" {
+		t.Fatalf("snapshot order=%q,%q,%q", got[0].ID, got[1].ID, got[2].ID)
+	}
+}
+
+func TestHandleAPITasksStreamReplaysPersistedLogWithoutLiveJob(t *testing.T) {
+	dir := t.TempDir()
+	logPath := filepath.Join(dir, "task.log")
+	if err := os.WriteFile(logPath, []byte("line1\nline2\n"), 0644); err != nil {
+		t.Fatal(err)
+	}
+
+	globalQueue.mu.Lock()
+	origTasks := globalQueue.tasks
+	globalQueue.tasks = []*Task{{
+		ID:        "done-1",
+		Name:      "Done Task",
+		Status:    TaskDone,
+		CreatedAt: time.Now(),
+		LogPath:   logPath,
+	}}
+	globalQueue.mu.Unlock()
+	t.Cleanup(func() {
+		globalQueue.mu.Lock()
+		globalQueue.tasks = origTasks
+		globalQueue.mu.Unlock()
+	})
+
+	req := httptest.NewRequest(http.MethodGet, "/api/tasks/done-1/stream", nil)
+	req.SetPathValue("id", "done-1")
+	rec := httptest.NewRecorder()
+
+	h := &handler{}
+	h.handleAPITasksStream(rec, req)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status=%d body=%s", rec.Code, rec.Body.String())
+	}
+	body := rec.Body.String()
+	if !strings.Contains(body, "data: line1\n\n") || !strings.Contains(body, "data: line2\n\n") {
+		t.Fatalf("body=%q", body)
+	}
+	if !strings.Contains(body, "event: done\n") {
+		t.Fatalf("missing done event: %q", body)
+	}
+}
+
+func TestHandleAPITasksStreamPendingTaskStartsSSEImmediately(t *testing.T) {
+	globalQueue.mu.Lock()
+	origTasks := globalQueue.tasks
+	globalQueue.tasks = []*Task{{
+		ID:        "pending-1",
+		Name:      "Pending Task",
+		Status:    TaskPending,
+		CreatedAt: time.Now(),
+	}}
+	globalQueue.mu.Unlock()
+	t.Cleanup(func() {
+		globalQueue.mu.Lock()
+		globalQueue.tasks = origTasks
+		globalQueue.mu.Unlock()
+	})
+
+	ctx, cancel := context.WithCancel(context.Background())
+	req := httptest.NewRequest(http.MethodGet, "/api/tasks/pending-1/stream", nil).WithContext(ctx)
+	req.SetPathValue("id", "pending-1")
+	rec := httptest.NewRecorder()
+
+	done := make(chan struct{})
+	go func() {
+		h := &handler{}
+		h.handleAPITasksStream(rec, req)
+		close(done)
+	}()
+
+	deadline := time.Now().Add(2 * time.Second)
+	for time.Now().Before(deadline) {
+		if strings.Contains(rec.Body.String(), "Task is queued. Waiting for worker...") {
+			cancel()
+			<-done
+			if rec.Code != http.StatusOK {
+				t.Fatalf("status=%d body=%s", rec.Code, rec.Body.String())
+			}
+			return
+		}
+		time.Sleep(20 * time.Millisecond)
+	}
+	cancel()
+	<-done
+	t.Fatalf("stream did not emit queued status promptly, body=%q", rec.Body.String())
+}
+
 func TestResolveBurnPreset(t *testing.T) {
 	tests := []struct {
 		profile string