diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/app.js | 94 | ||||
| -rw-r--r-- | web/index.html | 6 | ||||
| -rw-r--r-- | web/style.css | 59 | ||||
| -rw-r--r-- | web/test/changestats.test.mjs | 125 | ||||
| -rw-r--r-- | web/test/tab-badges.test.mjs | 110 |
5 files changed, 391 insertions, 3 deletions
@@ -74,6 +74,24 @@ function formatDate(iso) { }); } +// Returns formatted string for changestats, e.g. "5 files, +127 -43". +// Returns empty string for null/undefined input. +export function formatChangestats(stats) { + if (stats == null) return ''; + return `${stats.files_changed} files, +${stats.lines_added} -${stats.lines_removed}`; +} + +// Returns a <span class="changestats-badge"> element for the given stats, +// or null if stats is null/undefined. +// Accepts an optional doc parameter for testability (defaults to document). +export function renderChangestatsBadge(stats, doc = (typeof document !== 'undefined' ? document : null)) { + if (stats == null || doc == null) return null; + const span = doc.createElement('span'); + span.className = 'changestats-badge'; + span.textContent = formatChangestats(stats); + return span; +} + function createTaskCard(task) { const card = document.createElement('div'); card.className = 'task-card'; @@ -118,6 +136,13 @@ function createTaskCard(task) { card.appendChild(desc); } + // Changestats badge for COMPLETED/READY tasks + const CHANGESTATS_STATES = new Set(['COMPLETED', 'READY']); + if (CHANGESTATS_STATES.has(task.state) && task.changestats != null) { + const csBadge = renderChangestatsBadge(task.changestats); + if (csBadge) card.appendChild(csBadge); + } + // Footer: action buttons based on state // Interrupted states (CANCELLED, FAILED, BUDGET_EXCEEDED) show both Resume and Restart. // TIMED_OUT shows Resume only. Others show a single action. @@ -339,6 +364,46 @@ export function setTaskFilterTab(tab) { localStorage.setItem('taskFilterTab', tab); } +// ── Tab badge counts ─────────────────────────────────────────────────────────── + +/** + * Computes badge counts for the 'interrupted', 'ready', and 'running' tabs. + * Returns { interrupted: N, ready: N, running: N }. + */ +export function computeTabBadgeCounts(tasks) { + let interrupted = 0; + let ready = 0; + let running = 0; + for (const t of tasks) { + if (INTERRUPTED_STATES.has(t.state)) interrupted++; + if (t.state === 'READY') ready++; + if (t.state === 'RUNNING') running++; + } + return { interrupted, ready, running }; +} + +/** + * Updates the badge count spans inside the tab buttons for + * 'interrupted', 'ready', and 'running'. + * Badge is hidden (display:none) when count is zero. + */ +export function updateTabBadges(tasks, doc = (typeof document !== 'undefined' ? document : null)) { + if (!doc) return; + const counts = computeTabBadgeCounts(tasks); + for (const [tab, count] of Object.entries(counts)) { + const btn = doc.querySelector(`.tab[data-tab="${tab}"]`); + if (!btn) continue; + let badge = btn.querySelector('.tab-count-badge'); + if (!badge) { + badge = doc.createElement('span'); + badge.className = 'tab-count-badge'; + btn.appendChild(badge); + } + badge.textContent = String(count); + badge.hidden = count === 0; + } +} + // ── Stats computations ───────────────────────────────────────────────────────── /** @@ -961,6 +1026,8 @@ async function poll() { const tasks = await fetchTasks(); if (isUserEditing()) return; + updateTabBadges(tasks); + const activeTab = getActiveTab(); switch (activeTab) { case 'queue': @@ -1648,6 +1715,33 @@ function renderTaskPanel(task, executions) { exitEl.textContent = `exit: ${exec.ExitCode ?? '—'}`; row.appendChild(exitEl); + if (exec.Changestats != null) { + const csBadge = renderChangestatsBadge(exec.Changestats); + if (csBadge) row.appendChild(csBadge); + } + + if (exec.Commits && exec.Commits.length > 0) { + const commitList = document.createElement('div'); + commitList.className = 'execution-commits'; + for (const commit of exec.Commits) { + const item = document.createElement('div'); + item.className = 'commit-item'; + + const hash = document.createElement('span'); + hash.className = 'commit-hash'; + hash.textContent = commit.hash.slice(0, 7); + item.appendChild(hash); + + const msg = document.createElement('span'); + msg.className = 'commit-msg'; + msg.textContent = commit.message; + item.appendChild(msg); + + commitList.appendChild(item); + } + row.appendChild(commitList); + } + const logsBtn = document.createElement('button'); logsBtn.className = 'btn-view-logs'; logsBtn.textContent = 'View Logs'; diff --git a/web/index.html b/web/index.html index 19cba2c..59bc56e 100644 --- a/web/index.html +++ b/web/index.html @@ -23,9 +23,9 @@ </header> <nav class="tab-bar"> <button class="tab active" data-tab="queue" title="Queue">⏳</button> - <button class="tab" data-tab="interrupted" title="Interrupted">⚠️</button> - <button class="tab" data-tab="ready" title="Ready">✅</button> - <button class="tab" data-tab="running" title="Running">▶️</button> + <button class="tab" data-tab="interrupted" title="Interrupted">⚠️<span class="tab-count-badge" hidden></span></button> + <button class="tab" data-tab="ready" title="Ready">✅<span class="tab-count-badge" hidden></span></button> + <button class="tab" data-tab="running" title="Running">▶️<span class="tab-count-badge" hidden></span></button> <button class="tab" data-tab="all" title="All">☰</button> <button class="tab" data-tab="stats" title="Stats">📊</button> <button class="tab" data-tab="settings" title="Settings">⚙️</button> diff --git a/web/style.css b/web/style.css index ee1b69c..e7d1de4 100644 --- a/web/style.css +++ b/web/style.css @@ -111,6 +111,25 @@ header h1 { border-bottom-color: var(--accent); } +.tab-count-badge { + display: inline-block; + margin-left: 0.3em; + padding: 0 0.4em; + border-radius: 999px; + font-size: 0.7em; + font-weight: 700; + line-height: 1.5; + background: var(--accent); + color: #fff; + vertical-align: middle; + min-width: 1.4em; + text-align: center; +} + +.tab-count-badge[hidden] { + display: none; +} + /* Main layout */ main { max-width: 640px; @@ -774,6 +793,39 @@ dialog label select:focus { flex-wrap: wrap; } +.execution-commits { + width: 100%; + margin-top: 0.25rem; + display: flex; + flex-direction: column; + gap: 0.25rem; + font-size: 0.8rem; + color: var(--text-muted); + border-top: 1px solid var(--border-light); + padding-top: 0.5rem; +} + +.commit-item { + display: flex; + gap: 0.5rem; + align-items: baseline; +} + +.commit-hash { + font-family: var(--font-mono); + color: var(--text); + background: var(--bg-hover); + padding: 0.125rem 0.25rem; + border-radius: 0.25rem; + font-size: 0.75rem; +} + +.commit-msg { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .execution-id { font-family: monospace; font-size: 0.72rem; @@ -804,6 +856,13 @@ dialog label select:focus { white-space: nowrap; } +.changestats-badge { + font-family: monospace; + font-size: 0.72rem; + color: var(--text-muted); + white-space: nowrap; +} + .btn-view-logs { font-size: 0.72rem; font-weight: 600; diff --git a/web/test/changestats.test.mjs b/web/test/changestats.test.mjs new file mode 100644 index 0000000..5363812 --- /dev/null +++ b/web/test/changestats.test.mjs @@ -0,0 +1,125 @@ +// changestats.test.mjs — Unit tests for changestats display functions. +// +// Run with: node --test web/test/changestats.test.mjs + +import { describe, it } from 'node:test'; +import assert from 'node:assert/strict'; +import { formatChangestats, renderChangestatsBadge } from '../app.js'; + +// ── Mock DOM ─────────────────────────────────────────────────────────────────── + +function makeDoc() { + return { + createElement(tag) { + const el = { + tag, + className: '', + textContent: '', + children: [], + appendChild(child) { this.children.push(child); return child; }, + }; + return el; + }, + }; +} + +// ── formatChangestats ────────────────────────────────────────────────────────── + +describe('formatChangestats', () => { + it('formats valid stats as "N files, +A -R"', () => { + const result = formatChangestats({ files_changed: 5, lines_added: 127, lines_removed: 43 }); + assert.equal(result, '5 files, +127 -43'); + }); + + it('returns empty string for null', () => { + const result = formatChangestats(null); + assert.equal(result, ''); + }); + + it('returns empty string for undefined', () => { + const result = formatChangestats(undefined); + assert.equal(result, ''); + }); + + it('formats zero values correctly', () => { + const result = formatChangestats({ files_changed: 0, lines_added: 0, lines_removed: 0 }); + assert.equal(result, '0 files, +0 -0'); + }); + + it('formats single file correctly', () => { + const result = formatChangestats({ files_changed: 1, lines_added: 10, lines_removed: 2 }); + assert.equal(result, '1 files, +10 -2'); + }); +}); + +// ── renderChangestatsBadge ───────────────────────────────────────────────────── + +describe('renderChangestatsBadge', () => { + it('returns element with class changestats-badge for valid stats', () => { + const doc = makeDoc(); + const el = renderChangestatsBadge({ files_changed: 5, lines_added: 127, lines_removed: 43 }, doc); + assert.ok(el, 'element should not be null'); + assert.equal(el.className, 'changestats-badge'); + }); + + it('returns element with correct text content', () => { + const doc = makeDoc(); + const el = renderChangestatsBadge({ files_changed: 5, lines_added: 127, lines_removed: 43 }, doc); + assert.equal(el.textContent, '5 files, +127 -43'); + }); + + it('returns null for null stats', () => { + const doc = makeDoc(); + const el = renderChangestatsBadge(null, doc); + assert.equal(el, null); + }); + + it('returns null for undefined stats', () => { + const doc = makeDoc(); + const el = renderChangestatsBadge(undefined, doc); + assert.equal(el, null); + }); +}); + +// ── State-based visibility ──────────────────────────────────────────────────── +// +// Changestats badge should appear on COMPLETED (and READY) tasks that have +// changestats data, and must not appear on QUEUED tasks. + +const CHANGESTATS_STATES = new Set(['COMPLETED', 'READY']); + +function shouldShowChangestats(task) { + return CHANGESTATS_STATES.has(task.state) && task.changestats != null; +} + +describe('changestats badge visibility by task state', () => { + it('COMPLETED task with changestats shows badge', () => { + const task = { state: 'COMPLETED', changestats: { files_changed: 3, lines_added: 50, lines_removed: 10 } }; + assert.equal(shouldShowChangestats(task), true); + }); + + it('READY task with changestats shows badge', () => { + const task = { state: 'READY', changestats: { files_changed: 1, lines_added: 5, lines_removed: 2 } }; + assert.equal(shouldShowChangestats(task), true); + }); + + it('QUEUED task hides changestats', () => { + const task = { state: 'QUEUED', changestats: { files_changed: 3, lines_added: 50, lines_removed: 10 } }; + assert.equal(shouldShowChangestats(task), false); + }); + + it('COMPLETED task without changestats hides badge', () => { + const task = { state: 'COMPLETED', changestats: null }; + assert.equal(shouldShowChangestats(task), false); + }); + + it('RUNNING task hides changestats', () => { + const task = { state: 'RUNNING', changestats: null }; + assert.equal(shouldShowChangestats(task), false); + }); + + it('PENDING task hides changestats', () => { + const task = { state: 'PENDING', changestats: null }; + assert.equal(shouldShowChangestats(task), false); + }); +}); diff --git a/web/test/tab-badges.test.mjs b/web/test/tab-badges.test.mjs new file mode 100644 index 0000000..c07338f --- /dev/null +++ b/web/test/tab-badges.test.mjs @@ -0,0 +1,110 @@ +// tab-badges.test.mjs — TDD tests for computeTabBadgeCounts +// +// Tests the pure function that computes badge counts for the +// 'interrupted', 'ready', and 'running' tabs. +// +// Run with: node --test web/test/tab-badges.test.mjs + +import { describe, it } from 'node:test'; +import assert from 'node:assert/strict'; + +// ── Inline implementation (will be replaced by import once exported) ─────────── + +const INTERRUPTED_STATES = new Set(['CANCELLED', 'FAILED', 'BUDGET_EXCEEDED', 'BLOCKED']); + +function computeTabBadgeCounts(tasks) { + let interrupted = 0; + let ready = 0; + let running = 0; + for (const t of tasks) { + if (INTERRUPTED_STATES.has(t.state)) interrupted++; + if (t.state === 'READY') ready++; + if (t.state === 'RUNNING') running++; + } + return { interrupted, ready, running }; +} + +// ── Helpers ──────────────────────────────────────────────────────────────────── + +function makeTask(state) { + return { id: state, name: `task-${state}`, state }; +} + +// ── Tests ────────────────────────────────────────────────────────────────────── + +describe('computeTabBadgeCounts', () => { + it('returns all zeros for empty task list', () => { + assert.deepEqual(computeTabBadgeCounts([]), { interrupted: 0, ready: 0, running: 0 }); + }); + + it('counts RUNNING tasks', () => { + const tasks = [makeTask('RUNNING'), makeTask('RUNNING'), makeTask('QUEUED')]; + const counts = computeTabBadgeCounts(tasks); + assert.equal(counts.running, 2); + assert.equal(counts.ready, 0); + assert.equal(counts.interrupted, 0); + }); + + it('counts READY tasks', () => { + const tasks = [makeTask('READY'), makeTask('READY'), makeTask('QUEUED')]; + const counts = computeTabBadgeCounts(tasks); + assert.equal(counts.ready, 2); + assert.equal(counts.running, 0); + assert.equal(counts.interrupted, 0); + }); + + it('counts CANCELLED as interrupted', () => { + const counts = computeTabBadgeCounts([makeTask('CANCELLED')]); + assert.equal(counts.interrupted, 1); + }); + + it('counts FAILED as interrupted', () => { + const counts = computeTabBadgeCounts([makeTask('FAILED')]); + assert.equal(counts.interrupted, 1); + }); + + it('counts BUDGET_EXCEEDED as interrupted', () => { + const counts = computeTabBadgeCounts([makeTask('BUDGET_EXCEEDED')]); + assert.equal(counts.interrupted, 1); + }); + + it('counts BLOCKED as interrupted', () => { + const counts = computeTabBadgeCounts([makeTask('BLOCKED')]); + assert.equal(counts.interrupted, 1); + }); + + it('does not count COMPLETED as interrupted', () => { + const counts = computeTabBadgeCounts([makeTask('COMPLETED')]); + assert.equal(counts.interrupted, 0); + }); + + it('does not count TIMED_OUT as interrupted', () => { + const counts = computeTabBadgeCounts([makeTask('TIMED_OUT')]); + assert.equal(counts.interrupted, 0); + }); + + it('counts across multiple states simultaneously', () => { + const tasks = [ + makeTask('RUNNING'), + makeTask('RUNNING'), + makeTask('READY'), + makeTask('CANCELLED'), + makeTask('FAILED'), + makeTask('BLOCKED'), + makeTask('QUEUED'), + makeTask('COMPLETED'), + ]; + const counts = computeTabBadgeCounts(tasks); + assert.equal(counts.running, 2); + assert.equal(counts.ready, 1); + assert.equal(counts.interrupted, 3); + }); + + it('returns zero for a tab when no tasks match that state', () => { + const tasks = [makeTask('QUEUED'), makeTask('PENDING'), makeTask('COMPLETED')]; + const counts = computeTabBadgeCounts(tasks); + assert.equal(counts.running, 0); + assert.equal(counts.ready, 0); + assert.equal(counts.interrupted, 0); + }); +}); |