chore: autocommit uncommitted changes

2 files changed, 144 insertions, 1 deletions

diff --git a/web/app.js b/web/app.js
index eff8054..6070d2c 100644
--- a/web/app.js
+++ b/web/app.js
@@ -1743,7 +1743,7 @@ function makeMetaItem(label, valueText, opts = {}) {
   return item;
 }
 
-function renderTaskPanel(task, executions) {
+export function renderTaskPanel(task, executions) {
   document.getElementById('task-panel-title').textContent = task.name;
   const content = document.getElementById('task-panel-content');
   content.innerHTML = '';
diff --git a/web/test/task-panel-summary.test.mjs b/web/test/task-panel-summary.test.mjs
new file mode 100644
index 0000000..63dd483
--- /dev/null
+++ b/web/test/task-panel-summary.test.mjs
@@ -0,0 +1,143 @@
+// task-panel-summary.test.mjs — verifies task summary renders exactly once in panel.
+//
+// Run with: node --test web/test/task-panel-summary.test.mjs
+
+import { describe, it, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+
+// ── Minimal DOM mock ──────────────────────────────────────────────────────────
+
+function makeMockDOM() {
+  const elements = {};
+
+  function createElement(tag) {
+    const el = {
+      tag,
+      className: '',
+      textContent: '',
+      innerHTML: '',
+      hidden: false,
+      children: [],
+      _listeners: {},
+      appendChild(child) { this.children.push(child); return child; },
+      prepend(...nodes) { this.children.unshift(...nodes); },
+      append(...nodes) { nodes.forEach(n => this.children.push(n)); },
+      querySelector(sel) {
+        const cls = sel.startsWith('.') ? sel.slice(1) : null;
+        function search(el) {
+          if (cls && el.className && el.className.split(' ').includes(cls)) return el;
+          for (const c of el.children || []) {
+            const found = search(c);
+            if (found) return found;
+          }
+          return null;
+        }
+        return search(this);
+      },
+      querySelectorAll(sel) {
+        const cls = sel.startsWith('.') ? sel.slice(1) : null;
+        const results = [];
+        function search(el) {
+          if (cls && el.className && el.className.split(' ').includes(cls)) results.push(el);
+          for (const c of el.children || []) search(c);
+        }
+        search(this);
+        return results;
+      },
+      addEventListener(ev, fn) {},
+    };
+    return el;
+  }
+
+  // Named panel elements referenced by getElementById
+  const panelTitle = createElement('h2');
+  const panelContent = createElement('div');
+  elements['task-panel-title'] = panelTitle;
+  elements['task-panel-content'] = panelContent;
+
+  const doc = {
+    createElement,
+    getElementById(id) { return elements[id] || null; },
+  };
+
+  return { doc, panelContent };
+}
+
+// ── Import renderTaskPanel ────────────────────────────────────────────────────
+
+import { renderTaskPanel } from '../app.js';
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('renderTaskPanel summary rendering', () => {
+  it('renders task summary exactly once for a COMPLETED task', () => {
+    const { doc, panelContent } = makeMockDOM();
+
+    // Must set global document before calling renderTaskPanel
+    global.document = doc;
+
+    const task = {
+      id: 'task-1',
+      name: 'Fix the bug',
+      state: 'COMPLETED',
+      summary: 'Resolved the nil pointer in the payment handler.',
+      priority: 'normal',
+      created_at: '2026-03-17T10:00:00Z',
+      updated_at: '2026-03-17T10:05:00Z',
+      tags: [],
+    };
+
+    renderTaskPanel(task, []);
+
+    // Count all elements with class 'task-summary' or 'task-summary-text'
+    const summaryEls = panelContent.querySelectorAll('.task-summary');
+    const summaryTextEls = panelContent.querySelectorAll('.task-summary-text');
+
+    const total = summaryEls.length + summaryTextEls.length;
+    assert.equal(total, 1, `Expected exactly 1 summary element, got ${total} (task-summary: ${summaryEls.length}, task-summary-text: ${summaryTextEls.length})`);
+  });
+
+  it('uses task-summary class (not task-summary-text) for good contrast', () => {
+    const { doc, panelContent } = makeMockDOM();
+    global.document = doc;
+
+    const task = {
+      id: 'task-2',
+      name: 'Another task',
+      state: 'COMPLETED',
+      summary: 'All done.',
+      priority: 'high',
+      created_at: '2026-03-17T10:00:00Z',
+      updated_at: '2026-03-17T10:05:00Z',
+      tags: [],
+    };
+
+    renderTaskPanel(task, []);
+
+    const summaryEls = panelContent.querySelectorAll('.task-summary');
+    assert.equal(summaryEls.length, 1, 'Expected .task-summary element');
+    assert.equal(summaryEls[0].textContent, task.summary);
+  });
+
+  it('renders no summary section when task has no summary', () => {
+    const { doc, panelContent } = makeMockDOM();
+    global.document = doc;
+
+    const task = {
+      id: 'task-3',
+      name: 'Pending task',
+      state: 'PENDING',
+      summary: null,
+      priority: 'normal',
+      created_at: '2026-03-17T10:00:00Z',
+      updated_at: '2026-03-17T10:00:00Z',
+      tags: [],
+    };
+
+    renderTaskPanel(task, []);
+
+    const summaryEls = panelContent.querySelectorAll('.task-summary');
+    const summaryTextEls = panelContent.querySelectorAll('.task-summary-text');
+    assert.equal(summaryEls.length + summaryTextEls.length, 0, 'Expected no summary when task.summary is null');
+  });
+});