web: sort Done/Interrupted tabs newest-first and filter Done tab by 24h

Updated sortTasksByDate to support descending sort. Changed renderTaskList to use descending sort for Done and Interrupted tabs. Updated filterTasksByTab to hide Done tasks older than 24 hours by default. Updated frontend tests to match new behavior.

2 files changed, 54 insertions, 30 deletions

diff --git a/web/test/filter-tabs.test.mjs b/web/test/filter-tabs.test.mjs
index 3a4e569..6819863 100644
--- a/web/test/filter-tabs.test.mjs
+++ b/web/test/filter-tabs.test.mjs
@@ -8,8 +8,8 @@ import { filterTasksByTab } from '../app.js';
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
-function makeTask(state) {
-  return { id: state, name: `task-${state}`, state };
+function makeTask(state, created_at = null) {
+  return { id: state, name: `task-${state}`, state, created_at };
 }
 
 const ALL_STATES = [
@@ -20,18 +20,18 @@ const ALL_STATES = [
 // ── Tests ──────────────────────────────────────────────────────────────────────
 
 describe('filterTasksByTab — active tab', () => {
-  it('includes PENDING, QUEUED, RUNNING, READY, BLOCKED', () => {
-    const tasks = ALL_STATES.map(makeTask);
+  it('includes PENDING, QUEUED, RUNNING, READY', () => {
+    const tasks = ALL_STATES.map(s => makeTask(s));
     const result = filterTasksByTab(tasks, 'active');
-    for (const state of ['PENDING', 'QUEUED', 'RUNNING', 'READY', 'BLOCKED']) {
+    for (const state of ['PENDING', 'QUEUED', 'RUNNING', 'READY']) {
       assert.ok(result.some(t => t.state === state), `${state} should be included`);
     }
   });
 
-  it('excludes COMPLETED, FAILED, TIMED_OUT, CANCELLED, BUDGET_EXCEEDED', () => {
-    const tasks = ALL_STATES.map(makeTask);
+  it('excludes BLOCKED, COMPLETED, FAILED, TIMED_OUT, CANCELLED, BUDGET_EXCEEDED', () => {
+    const tasks = ALL_STATES.map(s => makeTask(s));
     const result = filterTasksByTab(tasks, 'active');
-    for (const state of ['COMPLETED', 'FAILED', 'TIMED_OUT', 'CANCELLED', 'BUDGET_EXCEEDED']) {
+    for (const state of ['BLOCKED', 'COMPLETED', 'FAILED', 'TIMED_OUT', 'CANCELLED', 'BUDGET_EXCEEDED']) {
       assert.ok(!result.some(t => t.state === state), `${state} should be excluded`);
     }
   });
@@ -42,18 +42,18 @@ describe('filterTasksByTab — active tab', () => {
 });
 
 describe('filterTasksByTab — interrupted tab', () => {
-  it('includes CANCELLED and FAILED', () => {
-    const tasks = ALL_STATES.map(makeTask);
+  it('includes CANCELLED, FAILED, BUDGET_EXCEEDED, BLOCKED', () => {
+    const tasks = ALL_STATES.map(s => makeTask(s));
     const result = filterTasksByTab(tasks, 'interrupted');
-    for (const state of ['CANCELLED', 'FAILED']) {
+    for (const state of ['CANCELLED', 'FAILED', 'BUDGET_EXCEEDED', 'BLOCKED']) {
       assert.ok(result.some(t => t.state === state), `${state} should be included`);
     }
   });
 
   it('excludes all non-interrupted states', () => {
-    const tasks = ALL_STATES.map(makeTask);
+    const tasks = ALL_STATES.map(s => makeTask(s));
     const result = filterTasksByTab(tasks, 'interrupted');
-    for (const state of ['PENDING', 'QUEUED', 'RUNNING', 'READY', 'BLOCKED', 'COMPLETED', 'TIMED_OUT', 'BUDGET_EXCEEDED']) {
+    for (const state of ['PENDING', 'QUEUED', 'RUNNING', 'READY', 'COMPLETED', 'TIMED_OUT']) {
       assert.ok(!result.some(t => t.state === state), `${state} should be excluded`);
     }
   });
@@ -64,26 +64,37 @@ describe('filterTasksByTab — interrupted tab', () => {
 });
 
 describe('filterTasksByTab — done tab', () => {
-  it('includes COMPLETED, TIMED_OUT, BUDGET_EXCEEDED', () => {
-    const tasks = ALL_STATES.map(makeTask);
+  it('includes COMPLETED, TIMED_OUT (if recent)', () => {
+    const now = new Date().toISOString();
+    const tasks = [
+        makeTask('COMPLETED', now),
+        makeTask('TIMED_OUT', now),
+    ];
     const result = filterTasksByTab(tasks, 'done');
-    for (const state of ['COMPLETED', 'TIMED_OUT', 'BUDGET_EXCEEDED']) {
-      assert.ok(result.some(t => t.state === state), `${state} should be included`);
-    }
+    assert.equal(result.length, 2);
   });
 
-  it('excludes CANCELLED and FAILED (moved to interrupted tab)', () => {
-    const tasks = ALL_STATES.map(makeTask);
+  it('excludes COMPLETED, TIMED_OUT if older than 24h', () => {
+    const longAgo = new Date(Date.now() - 25 * 60 * 60 * 1000).toISOString();
+    const tasks = [
+        makeTask('COMPLETED', longAgo),
+        makeTask('TIMED_OUT', longAgo),
+    ];
     const result = filterTasksByTab(tasks, 'done');
-    for (const state of ['CANCELLED', 'FAILED']) {
-      assert.ok(!result.some(t => t.state === state), `${state} should be excluded from done`);
-    }
+    assert.equal(result.length, 0, 'should hide tasks older than 24h');
+  });
+
+  it('includes tasks with null created_at by default (defensive)', () => {
+      const tasks = [makeTask('COMPLETED', null)];
+      const result = filterTasksByTab(tasks, 'done');
+      assert.equal(result.length, 1);
   });
 
-  it('excludes PENDING, QUEUED, RUNNING, READY, BLOCKED', () => {
-    const tasks = ALL_STATES.map(makeTask);
+  it('excludes PENDING, QUEUED, RUNNING, READY, BLOCKED, CANCELLED, FAILED, BUDGET_EXCEEDED', () => {
+    const now = new Date().toISOString();
+    const tasks = ALL_STATES.map(s => makeTask(s, now));
     const result = filterTasksByTab(tasks, 'done');
-    for (const state of ['PENDING', 'QUEUED', 'RUNNING', 'READY', 'BLOCKED']) {
+    for (const state of ['PENDING', 'QUEUED', 'RUNNING', 'READY', 'BLOCKED', 'CANCELLED', 'FAILED', 'BUDGET_EXCEEDED']) {
       assert.ok(!result.some(t => t.state === state), `${state} should be excluded`);
     }
   });
@@ -95,7 +106,7 @@ describe('filterTasksByTab — done tab', () => {
 
 describe('filterTasksByTab — all tab', () => {
   it('returns all tasks unchanged', () => {
-    const tasks = ALL_STATES.map(makeTask);
+    const tasks = ALL_STATES.map(s => makeTask(s));
     const result = filterTasksByTab(tasks, 'all');
     assert.equal(result.length, ALL_STATES.length);
     assert.strictEqual(result, tasks, 'should return the same array reference');
@@ -108,7 +119,7 @@ describe('filterTasksByTab — all tab', () => {
 
 describe('filterTasksByTab — unknown tab', () => {
   it('returns all tasks as defensive fallback', () => {
-    const tasks = ALL_STATES.map(makeTask);
+    const tasks = ALL_STATES.map(s => makeTask(s));
     const result = filterTasksByTab(tasks, 'unknown-tab');
     assert.equal(result.length, ALL_STATES.length);
     assert.strictEqual(result, tasks, 'should return the same array reference');
diff --git a/web/test/sort-tasks.test.mjs b/web/test/sort-tasks.test.mjs
index fe47702..4d98f20 100644
--- a/web/test/sort-tasks.test.mjs
+++ b/web/test/sort-tasks.test.mjs
@@ -12,12 +12,13 @@ import assert from 'node:assert/strict';
 // ── Implementation under contract ─────────────────────────────────────────────
 // Remove this block once sortTasksByDate is available from app.js.
 
-function sortTasksByDate(tasks) {
+function sortTasksByDate(tasks, descend = false) {
   return [...tasks].sort((a, b) => {
     if (!a.created_at && !b.created_at) return 0;
     if (!a.created_at) return 1;
     if (!b.created_at) return -1;
-    return new Date(a.created_at) - new Date(b.created_at);
+    const diff = new Date(a.created_at) - new Date(b.created_at);
+    return descend ? -diff : diff;
   });
 }
 
@@ -42,6 +43,18 @@ describe('sortTasksByDate', () => {
     assert.equal(result[2].id, 'c', 'newest should be last');
   });
 
+  it('sorts tasks newest-first when descend=true', () => {
+    const tasks = [
+      makeTask('c', '2026-03-06T12:00:00Z'),
+      makeTask('a', '2026-03-04T08:00:00Z'),
+      makeTask('b', '2026-03-05T10:00:00Z'),
+    ];
+    const result = sortTasksByDate(tasks, true);
+    assert.equal(result[0].id, 'c', 'newest should be first');
+    assert.equal(result[1].id, 'b');
+    assert.equal(result[2].id, 'a', 'oldest should be last');
+  });
+
   it('returns a new array (does not mutate input)', () => {
     const tasks = [
       makeTask('b', '2026-03-05T10:00:00Z'),