diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/app.js | 84 | ||||
| -rw-r--r-- | web/test/task-actions.test.mjs | 89 |
2 files changed, 122 insertions, 51 deletions
@@ -119,8 +119,11 @@ function createTaskCard(task) { } // Footer: action buttons based on state - const RESTART_STATES = new Set(['FAILED', 'CANCELLED', 'BUDGET_EXCEEDED']); - if (task.state === 'PENDING' || task.state === 'RUNNING' || task.state === 'READY' || task.state === 'BLOCKED' || task.state === 'TIMED_OUT' || RESTART_STATES.has(task.state)) { + // Interrupted states (CANCELLED, FAILED, BUDGET_EXCEEDED) show both Resume and Restart. + // TIMED_OUT shows Resume only. Others show a single action. + const RESUME_STATES = new Set(['TIMED_OUT', 'CANCELLED', 'FAILED', 'BUDGET_EXCEEDED']); + const RESTART_STATES = new Set(['CANCELLED', 'FAILED', 'BUDGET_EXCEEDED']); + if (task.state === 'PENDING' || task.state === 'RUNNING' || task.state === 'READY' || task.state === 'BLOCKED' || RESUME_STATES.has(task.state)) { const footer = document.createElement('div'); footer.className = 'task-card-footer'; @@ -161,24 +164,25 @@ function createTaskCard(task) { footer.appendChild(rejectBtn); } else if (task.state === 'BLOCKED') { renderQuestionFooter(task, footer); - } else if (task.state === 'TIMED_OUT') { - const btn = document.createElement('button'); - btn.className = 'btn-resume'; - btn.textContent = 'Resume'; - btn.addEventListener('click', (e) => { + } else if (RESUME_STATES.has(task.state)) { + const resumeBtn = document.createElement('button'); + resumeBtn.className = 'btn-resume'; + resumeBtn.textContent = 'Resume'; + resumeBtn.addEventListener('click', (e) => { e.stopPropagation(); - handleResume(task.id, btn, footer); + handleResume(task.id, resumeBtn, footer); }); - footer.appendChild(btn); - } else if (RESTART_STATES.has(task.state)) { - const btn = document.createElement('button'); - btn.className = 'btn-restart'; - btn.textContent = 'Restart'; - btn.addEventListener('click', (e) => { - e.stopPropagation(); - handleRestart(task.id, btn, footer); - }); - footer.appendChild(btn); + footer.appendChild(resumeBtn); + if (RESTART_STATES.has(task.state)) { + const restartBtn = document.createElement('button'); + restartBtn.className = 'btn-restart'; + restartBtn.textContent = 'Restart'; + restartBtn.addEventListener('click', (e) => { + e.stopPropagation(); + handleRestart(task.id, restartBtn, footer); + }); + footer.appendChild(restartBtn); + } } card.appendChild(footer); @@ -1292,6 +1296,50 @@ function renderTaskPanel(task, executions) { const content = document.getElementById('task-panel-content'); content.innerHTML = ''; + // ── Summary ── + if (task.summary) { + const summarySection = makeSection('Summary'); + const summaryEl = document.createElement('p'); + summaryEl.className = 'task-summary'; + summaryEl.textContent = task.summary; + summarySection.appendChild(summaryEl); + content.appendChild(summarySection); + } + + // ── Q&A History ── + if (task.interactions && task.interactions.length > 0) { + const qaSection = makeSection('Q&A History'); + const qaList = document.createElement('div'); + qaList.className = 'qa-list'; + for (const interaction of task.interactions) { + const qaItem = document.createElement('div'); + qaItem.className = 'qa-item'; + + const qEl = document.createElement('div'); + qEl.className = 'qa-question'; + qEl.textContent = interaction.question_text || '(question)'; + qaItem.appendChild(qEl); + + if (interaction.options && interaction.options.length > 0) { + const opts = document.createElement('div'); + opts.className = 'qa-options'; + opts.textContent = 'Options: ' + interaction.options.join(', '); + qaItem.appendChild(opts); + } + + if (interaction.answer) { + const aEl = document.createElement('div'); + aEl.className = 'qa-answer'; + aEl.textContent = interaction.answer; + qaItem.appendChild(aEl); + } + + qaList.appendChild(qaItem); + } + qaSection.appendChild(qaList); + content.appendChild(qaSection); + } + // ── Overview ── const overview = makeSection('Overview'); const overviewGrid = document.createElement('div'); diff --git a/web/test/task-actions.test.mjs b/web/test/task-actions.test.mjs index c7d666b..a1790fa 100644 --- a/web/test/task-actions.test.mjs +++ b/web/test/task-actions.test.mjs @@ -6,78 +6,101 @@ import { describe, it } from 'node:test'; import assert from 'node:assert/strict'; // ── Logic under test ────────────────────────────────────────────────────────── +// +// Interrupted states (CANCELLED, FAILED, BUDGET_EXCEEDED) get BOTH a Resume +// button and a Restart button. TIMED_OUT gets Resume only. + +const RESUME_STATES = new Set(['TIMED_OUT', 'CANCELLED', 'FAILED', 'BUDGET_EXCEEDED']); +const RESTART_STATES = new Set(['CANCELLED', 'FAILED', 'BUDGET_EXCEEDED']); + +function getCardActions(state) { + const actions = []; + if (state === 'PENDING') return ['run']; + if (state === 'RUNNING') return ['cancel']; + if (state === 'READY') return ['approve']; + if (RESUME_STATES.has(state)) actions.push('resume'); + if (RESTART_STATES.has(state)) actions.push('restart'); + return actions.length ? actions : [null]; +} -const RESTART_STATES = new Set(['FAILED', 'CANCELLED', 'BUDGET_EXCEEDED']); - -function getCardAction(state) { - if (state === 'PENDING') return 'run'; - if (state === 'RUNNING') return 'cancel'; - if (state === 'READY') return 'approve'; - if (state === 'TIMED_OUT') return 'resume'; - if (RESTART_STATES.has(state)) return 'restart'; - return null; +function getResumeEndpoint(state) { + return RESUME_STATES.has(state) ? '/resume' : null; } -function getApiEndpoint(state) { - if (state === 'TIMED_OUT') return '/resume'; - if (RESTART_STATES.has(state)) return '/run'; - return null; +function getRestartEndpoint(state) { + return RESTART_STATES.has(state) ? '/run' : null; } // ── Tests ───────────────────────────────────────────────────────────────────── describe('task card action buttons', () => { it('shows Run button for PENDING', () => { - assert.equal(getCardAction('PENDING'), 'run'); + assert.deepEqual(getCardActions('PENDING'), ['run']); }); it('shows Cancel button for RUNNING', () => { - assert.equal(getCardAction('RUNNING'), 'cancel'); + assert.deepEqual(getCardActions('RUNNING'), ['cancel']); }); - it('shows Restart button for FAILED', () => { - assert.equal(getCardAction('FAILED'), 'restart'); + it('shows Resume AND Restart buttons for FAILED', () => { + assert.deepEqual(getCardActions('FAILED'), ['resume', 'restart']); }); - it('shows Resume button for TIMED_OUT', () => { - assert.equal(getCardAction('TIMED_OUT'), 'resume'); + it('shows Resume AND Restart buttons for CANCELLED', () => { + assert.deepEqual(getCardActions('CANCELLED'), ['resume', 'restart']); }); - it('shows Restart button for CANCELLED', () => { - assert.equal(getCardAction('CANCELLED'), 'restart'); + it('shows Resume AND Restart buttons for BUDGET_EXCEEDED', () => { + assert.deepEqual(getCardActions('BUDGET_EXCEEDED'), ['resume', 'restart']); }); - it('shows Restart button for BUDGET_EXCEEDED', () => { - assert.equal(getCardAction('BUDGET_EXCEEDED'), 'restart'); + it('shows Resume button only for TIMED_OUT (no restart)', () => { + assert.deepEqual(getCardActions('TIMED_OUT'), ['resume']); }); it('shows approve buttons for READY', () => { - assert.equal(getCardAction('READY'), 'approve'); + assert.deepEqual(getCardActions('READY'), ['approve']); }); it('shows no button for COMPLETED', () => { - assert.equal(getCardAction('COMPLETED'), null); + assert.deepEqual(getCardActions('COMPLETED'), [null]); }); it('shows no button for QUEUED', () => { - assert.equal(getCardAction('QUEUED'), null); + assert.deepEqual(getCardActions('QUEUED'), [null]); }); }); describe('task action API endpoints', () => { it('TIMED_OUT uses /resume endpoint', () => { - assert.equal(getApiEndpoint('TIMED_OUT'), '/resume'); + assert.equal(getResumeEndpoint('TIMED_OUT'), '/resume'); + }); + + it('CANCELLED uses /resume endpoint for resume', () => { + assert.equal(getResumeEndpoint('CANCELLED'), '/resume'); + }); + + it('FAILED uses /resume endpoint for resume', () => { + assert.equal(getResumeEndpoint('FAILED'), '/resume'); + }); + + it('BUDGET_EXCEEDED uses /resume endpoint for resume', () => { + assert.equal(getResumeEndpoint('BUDGET_EXCEEDED'), '/resume'); + }); + + it('CANCELLED uses /run endpoint for restart', () => { + assert.equal(getRestartEndpoint('CANCELLED'), '/run'); }); - it('FAILED uses /run endpoint', () => { - assert.equal(getApiEndpoint('FAILED'), '/run'); + it('FAILED uses /run endpoint for restart', () => { + assert.equal(getRestartEndpoint('FAILED'), '/run'); }); - it('CANCELLED uses /run endpoint', () => { - assert.equal(getApiEndpoint('CANCELLED'), '/run'); + it('BUDGET_EXCEEDED uses /run endpoint for restart', () => { + assert.equal(getRestartEndpoint('BUDGET_EXCEEDED'), '/run'); }); - it('BUDGET_EXCEEDED uses /run endpoint', () => { - assert.equal(getApiEndpoint('BUDGET_EXCEEDED'), '/run'); + it('TIMED_OUT has no /run restart endpoint', () => { + assert.equal(getRestartEndpoint('TIMED_OUT'), null); }); }); |