test/client-jobs.test.js
Rama main · réplica de lectura del repositorio original.
// @vitest-environment happy-dom
import { describe, it, expect, vi, beforeEach } from 'vitest';
vi.mock('../public/modules/ws.js', () => ({ send: vi.fn(() => true) }));
// terminal.js pulls in xterm; the board only needs switchToSession and
// updateTabs from it, and stubbing it also proves the board does not depend on
// the real module loading.
vi.mock('../public/modules/terminal.js', () => ({ switchToSession: vi.fn(), restartAgent: vi.fn(), restartPending: () => false }));
import { send } from '../public/modules/ws.js';
import { switchToSession } from '../public/modules/terminal.js';
import { agents, jobs, repos, setActiveSession } from '../public/modules/state.js';
import { handleJobsList, showJobBoard, hideJobBoard, renderBoard, setupJobBoard, openJobForm, closeJobForm } from '../public/modules/jobs.js';
// A card sent to the server. Opening the form also asks for fresh models,
// which is not a save.
const JOB_SAVE = expect.objectContaining({ type: expect.stringMatching(/^job-(create|update)$/) });
const BOARD_HTML = `
<button id="btn-new-job-shortcut"></button>
<div class="spawn-form" id="spawn-form" style="display:none"></div>
<div id="terminal-viewport">
<div id="terminal-empty"></div>
<div class="job-board" id="job-board" style="display:none">
<div class="job-board-toolbar">
<button id="btn-new-job"></button>
<button id="btn-dispatcher-toggle"></button>
<button id="btn-dispatch-now"></button>
<span id="job-dispatcher-status"></span>
<input type="number" id="job-max-per-repo">
<input type="number" id="job-max-workers">
<select id="job-permission-mode">
<option value="auto">auto</option>
<option value="acceptEdits">acceptEdits</option>
<option value="bypassPermissions">bypassPermissions</option>
<option value="manual">manual</option>
<option value="dontAsk">dontAsk</option>
<option value="plan">plan</option>
</select>
<select id="job-deploy-repo"></select>
<select id="job-deploy-policy">
<option value="ask">ask</option>
<option value="ask-production-only">prod</option>
<option value="never-ask">never</option>
</select>
<button id="btn-finished-jobs"></button>
</div>
<div class="job-form" id="job-form" style="display:none">
<input type="text" id="job-title">
<select id="job-repo"></select>
<select id="job-type">
<option value="one-time">Now</option>
<option value="once">Scheduled</option>
<option value="scheduled">Recurring</option>
</select>
<div id="job-schedule-field" style="display:none">
<input type="text" id="job-schedule">
</div>
<div id="job-run-at-field" style="display:none">
<input type="datetime-local" id="job-run-at">
</div>
<select id="job-agent">
<option value="claude">Claude Code</option>
<option value="codex">Codex</option>
</select>
<select id="job-model"><option value="">CLI default</option></select>
<label id="job-pr-field">
<select id="job-requires-pr">
<option value="yes">Required</option>
<option value="no">Not required</option>
</select>
</label>
<select id="job-permission-mode-field">
<option value=""></option>
<option value="auto">auto</option>
<option value="acceptEdits" data-claude-only>acceptEdits</option>
<option value="bypassPermissions">bypassPermissions</option>
<option value="manual" data-claude-only>manual</option>
<option value="dontAsk" data-claude-only>dontAsk</option>
<option value="plan" data-claude-only>plan</option>
</select>
<textarea id="job-detail"></textarea>
<button id="btn-job-attach"></button>
<input type="file" id="job-attach-input">
<div id="job-attachments"></div>
<button id="btn-job-save"></button>
<button id="btn-job-cancel"></button>
<div id="job-form-error" style="display:none"></div>
</div>
<div class="job-columns" id="job-columns"></div>
<div class="job-finished" id="job-finished" style="display:none">
<span id="job-finished-count"></span>
<div class="job-cards" id="job-finished-cards"></div>
</div>
</div>
</div>`;
const JOB = (over = {}) => ({
id: 'job-1', title: 'Add rate limiting', detail: 'Token bucket.',
repoPath: '/repos/alpha', state: 'todo',
postedByName: 'Bill', postedAt: new Date().toISOString(),
agentSessionId: null, agentName: null, startedAt: null,
branchName: null, prUrl: null, prNumber: null, lastError: null,
prMergedAt: null, doneAt: null,
...over,
});
beforeEach(() => {
document.body.innerHTML = BOARD_HTML;
jobs.clear();
agents.clear();
repos.clear();
repos.set('/repos/alpha', { slug: 'alpha', exists: true });
setActiveSession(null);
vi.clearAllMocks();
setupJobBoard();
showJobBoard();
});
function cards() {
return [...document.querySelectorAll('.job-card')];
}
function columnCards(state) {
return [...document.querySelectorAll(`.job-column[data-state="${state}"] .job-card`)];
}
describe('board rendering', () => {
it('renders the three columns in workflow order', () => {
handleJobsList({ jobs: [], settings: {} });
const labels = [...document.querySelectorAll('.job-column')].map(c => c.dataset.state);
expect(labels).toEqual(['todo', 'in-progress', 'review']);
});
it('places each job in its own column and counts them', () => {
handleJobsList({
jobs: [
JOB({ id: 'a', state: 'todo' }),
JOB({ id: 'b', state: 'in-progress', agentSessionId: 's1', agentName: 'Viper' }),
JOB({ id: 'c', state: 'review', prUrl: 'https://x/pull/9', prNumber: 9 }),
],
settings: {},
});
expect(columnCards('todo')).toHaveLength(1);
expect(columnCards('in-progress')).toHaveLength(1);
expect(columnCards('review')).toHaveLength(1);
expect([...document.querySelectorAll('.job-column-count')].map(e => e.textContent)).toEqual(['1', '1', '1']);
});
it('shows title, repo, poster, agent and branch on the card', () => {
handleJobsList({
jobs: [JOB({
state: 'in-progress', agentSessionId: 's1', agentName: 'Viper',
branchName: 'bill/vesper', startedAt: new Date().toISOString(),
})],
settings: {},
});
const card = cards()[0];
expect(card.querySelector('.job-card-title').textContent).toBe('Add rate limiting');
expect(card.querySelector('.job-card-repo').textContent).toBe('alpha');
expect(card.querySelector('.job-card-posted').textContent).toContain('Bill');
expect(card.querySelector('.job-card-agent-name').textContent).toBe('Viper');
expect(card.querySelector('.job-card-branch').textContent).toBe('bill/vesper');
});
it('links the PR on a review card', () => {
handleJobsList({ jobs: [JOB({ state: 'review', prUrl: 'https://gh/o/r/pull/12', prNumber: 12 })], settings: {} });
const link = cards()[0].querySelector('.job-card-pr');
expect(link.textContent).toBe('PR #12');
expect(link.getAttribute('href')).toBe('https://gh/o/r/pull/12');
expect(link.getAttribute('rel')).toContain('noopener');
});
it('escapes a title containing markup rather than rendering it', () => {
handleJobsList({ jobs: [JOB({ title: '<img src=x onerror=alert(1)>' })], settings: {} });
const title = cards()[0].querySelector('.job-card-title');
expect(title.querySelector('img')).toBeNull();
expect(title.textContent).toBe('<img src=x onerror=alert(1)>');
});
it('surfaces a dispatch failure on the card', () => {
handleJobsList({ jobs: [JOB({ lastError: 'Failed to create worktree: disk full' })], settings: {} });
expect(cards()[0].querySelector('.job-card-error').textContent).toMatch(/disk full/);
});
});
describe('a redraw keeps the reader\'s place', () => {
it('updates the To do column in place: same scroller, unchanged cards kept, scroll kept', () => {
const many = Array.from({ length: 30 }, (_, i) => JOB({ id: `job-${i}`, title: `Card ${i}`, postedAt: new Date(Date.now() - (30 - i) * 1000).toISOString() }));
handleJobsList({ jobs: many, settings: { running: true } });
const scroller = document.querySelector('.job-column[data-state="todo"] .job-cards');
const container = document.getElementById('job-columns');
const first = columnCards('todo')[0];
scroller.scrollTop = 400;
container.scrollTop = 250; // the phone, where the stacked columns scroll
// A broadcast with one card edited, then the 30s clock tick.
handleJobsList({ jobs: many.map(j => j.id === 'job-5' ? { ...j, title: 'Edited' } : j), settings: { running: true } });
renderBoard();
expect(document.querySelector('.job-column[data-state="todo"] .job-cards')).toBe(scroller);
expect(scroller.scrollTop).toBe(400);
expect(container.scrollTop).toBe(250);
expect(columnCards('todo')[0]).toBe(first);
expect(columnCards('todo')[5].querySelector('.job-card-title').textContent).toContain('Edited');
expect(columnCards('todo')).toHaveLength(30);
});
});
describe('live status badge', () => {
const inProgress = (agentState, lastOutputAt = Date.now()) => {
agents.set('s1', { name: 'Viper', state: agentState, lastOutputAt, termEl: document.createElement('div') });
handleJobsList({ jobs: [JOB({ state: 'in-progress', agentSessionId: 's1', agentName: 'Viper' })], settings: {} });
return cards()[0];
};
it('marks a working agent as running', () => {
expect(inProgress('WORKING').querySelector('.job-card-status').textContent).toContain('running');
});
it('marks an agent at a permission prompt as needing the user', () => {
const card = inProgress('MESSAGE');
expect(card.querySelector('.job-card-status').textContent).toContain('needs you');
expect(card.classList.contains('status-needs-input')).toBe(true);
});
it('only flags a WAITING agent once it has been quiet past the window', () => {
expect(inProgress('WAITING', Date.now()).querySelector('.job-card-status').textContent).toContain('running');
const stale = inProgress('WAITING', Date.now() - 10 * 60 * 1000);
expect(stale.querySelector('.job-card-status').textContent).toContain('may need you');
});
it('marks a job whose agent has gone', () => {
handleJobsList({ jobs: [JOB({ state: 'in-progress', agentSessionId: 'missing', agentName: 'Ghost' })], settings: {} });
const badge = cards()[0].querySelector('.job-card-status');
expect(badge.textContent).toContain('agent gone');
expect(badge.disabled).toBe(true); // nothing to jump to
});
it('jumps to the agent terminal when the badge is clicked', () => {
const card = inProgress('MESSAGE');
card.querySelector('.job-card-status').click();
expect(switchToSession).toHaveBeenCalledWith('s1');
});
it('opens the agent tab when the card itself is clicked', () => {
const card = inProgress('WORKING');
expect(card.classList.contains('job-card-live')).toBe(true);
card.click();
expect(switchToSession).toHaveBeenCalledWith('s1');
});
it('leaves the keyboard path to the badge rather than nesting a role=button', () => {
// The card holds buttons and a link; role="button" would hide them from
// assistive tech, and the badge inside is already a real focusable button.
const card = inProgress('WORKING');
expect(card.getAttribute('role')).toBeNull();
expect(card.hasAttribute('tabindex')).toBe(false);
expect(card.querySelector('.job-card-status').disabled).toBe(false);
});
it('does not jump when the PR link on a live card is clicked', () => {
// The action buttons stopPropagation themselves; the PR anchor does not, so
// the card handler is the only thing keeping a PR click from also jumping.
agents.set('s1', { name: 'Viper', state: 'WORKING', lastOutputAt: Date.now(), termEl: document.createElement('div') });
handleJobsList({
jobs: [JOB({ state: 'in-progress', agentSessionId: 's1', agentName: 'Viper', prUrl: 'https://gh/o/r/pull/4', prNumber: 4 })],
settings: {},
});
const link = cards()[0].querySelector('.job-card-pr');
link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
expect(switchToSession).not.toHaveBeenCalled();
});
it('still jumps when the stale selection is somewhere else on the page', () => {
// Guarding on any non-empty selection would make every card unclickable
// after the user selected text in a terminal.
const card = inProgress('WORKING');
const elsewhere = document.createElement('p');
elsewhere.textContent = 'selected in another pane';
document.body.appendChild(elsewhere);
const range = document.createRange();
range.selectNodeContents(elsewhere);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
card.click();
expect(switchToSession).toHaveBeenCalledWith('s1');
sel.removeAllRanges();
});
it('does not jump when the click only ended a text selection on the card', () => {
const card = inProgress('WORKING');
const range = document.createRange();
range.selectNodeContents(card.querySelector('.job-card-detail'));
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
card.click();
expect(switchToSession).not.toHaveBeenCalled();
sel.removeAllRanges();
});
it('leaves the card inert when its agent is gone', () => {
handleJobsList({ jobs: [JOB({ state: 'in-progress', agentSessionId: 'missing', agentName: 'Ghost' })], settings: {} });
const card = cards()[0];
expect(card.classList.contains('job-card-live')).toBe(false);
card.click();
expect(switchToSession).not.toHaveBeenCalled();
});
it('does not jump when a card action button is clicked', () => {
const card = inProgress('WORKING');
window.confirm = vi.fn(() => false);
[...card.querySelectorAll('.job-card-btn')].find(b => b.textContent === 'Delete').click();
expect(switchToSession).not.toHaveBeenCalled();
});
it('does not make todo cards clickable', () => {
agents.set('s1', { name: 'Viper', state: 'WORKING', lastOutputAt: Date.now(), termEl: document.createElement('div') });
handleJobsList({
jobs: [JOB({ id: 'j1', state: 'todo', agentSessionId: 's1', agentName: 'Viper' })],
settings: {},
});
expect(document.querySelectorAll('.job-card-live')).toHaveLength(0);
});
// Review keeps its agent until the card is done, so it is a jump target too.
it('makes a review card with a kept agent clickable', () => {
agents.set('s1', { name: 'Viper', state: 'WAITING', lastOutputAt: Date.now(), termEl: document.createElement('div') });
handleJobsList({
jobs: [JOB({ id: 'j2', state: 'review', agentSessionId: 's1', agentName: 'Viper' })],
settings: {},
});
expect(document.querySelectorAll('.job-card-live')).toHaveLength(1);
});
it('shows no badge on todo or review cards', () => {
handleJobsList({ jobs: [JOB({ state: 'todo' }), JOB({ id: 'j2', state: 'review' })], settings: {} });
expect(document.querySelectorAll('.job-card-status')).toHaveLength(0);
});
});
describe('a repo with no GitHub remote', () => {
it('says on the card that the job cannot open its pull request', () => {
handleJobsList({ jobs: [JOB({ noGithubRemote: true })], settings: {} });
expect(document.querySelector('.job-card .job-card-error').textContent).toMatch(/no GitHub remote, so the job can't open a pull request/);
handleJobsList({ jobs: [JOB()], settings: {} });
expect(document.querySelector('.job-card .job-card-error')).toBeNull();
});
it('says so too when its CLI has no ship skill, naming the CLI and gstack', () => {
handleJobsList({ jobs: [JOB({ noShipSkill: 'codex' })], settings: {} });
expect(document.querySelector('.job-card .job-card-error').textContent).toMatch(/^Codex has no ship skill, so the job can't open a pull request; install gstack/);
});
it('drops both once the card has its pull request', () => {
handleJobsList({ jobs: [JOB({ noGithubRemote: true, noShipSkill: 'claude', prUrl: 'https://github.com/o/r/pull/4', prNumber: 4 })], settings: {} });
expect(document.querySelector('.job-card .job-card-error')).toBeNull();
});
});
describe('the board-wide worker limit and memory gate', () => {
const gate = (over = {}) => ({ maxWorkers: 5, cap: 5, running: 2, room: 3, level: 'ok', reasons: [], reason: null, memoryHeld: false, ...over });
const todoNote = () => document.querySelector('.job-column[data-state="todo"] .job-board-gate');
it('shows running against the limit, and the limit lowered for memory', () => {
handleJobsList({ jobs: [], settings: { running: true, maxPerRepo: 2, intervalMs: 300000, gate: gate() } });
expect(document.getElementById('job-dispatcher-status').textContent).toBe('scanning every 5m · 2/5 workers');
expect(document.getElementById('job-max-workers').value).toBe('5');
handleJobsList({ jobs: [], settings: { running: true, maxPerRepo: 2, intervalMs: 300000, gate: gate({ cap: 3, room: 1, level: 'pressure', reasons: ['swap 80% full'] }) } });
const status = document.getElementById('job-dispatcher-status');
expect(status.textContent).toBe('scanning every 5m · 2/3 workers (memory)');
expect(status.classList.contains('memory')).toBe(true);
expect(status.title).toBe('Memory: swap 80% full');
});
it('says why To do waits, and marks a card delayed by memory without dropping it', () => {
const reason = 'Waiting: Mac memory is low (6.0 GB disk free). No new workers start until it recovers; running ones continue.';
const held = gate({ cap: 0, room: 0, level: 'critical', reasons: ['6.0 GB disk free'], reason, memoryHeld: true });
handleJobsList({ jobs: [JOB({ scheduleId: 'sched-1', delayedByMemoryAt: new Date().toISOString() })], settings: { running: true, maxPerRepo: 2, gate: held } });
expect(todoNote().textContent).toBe(reason);
expect(todoNote().classList.contains('memory')).toBe(true);
expect(cards()[0].querySelector('.job-card-next').textContent).toMatch(/^delayed by memory · since /);
});
it('a full board with memory fine: the limit, not memory', () => {
const full = gate({ running: 5, room: 0, reason: "Waiting: 5 of 5 workers running, the board's limit across all repos." });
handleJobsList({ jobs: [JOB()], settings: { running: true, maxPerRepo: 2, gate: full } });
expect(todoNote().textContent).toMatch(/5 of 5 workers running/);
expect(todoNote().classList.contains('memory')).toBe(false);
expect(cards()[0].querySelector('.job-card-next').textContent).toBe('runs when a slot frees');
handleJobsList({ jobs: [JOB()], settings: { running: true, maxPerRepo: 2, gate: gate() } });
expect(todoNote()).toBeNull();
});
it('lists To do in dispatch order: urgent Billion cards and schedule runs first', () => {
const at = (m) => new Date(Date.UTC(2026, 9, 28, 8, m)).toISOString();
handleJobsList({ jobs: [
JOB({ id: 'old', title: 'old', postedAt: at(0) }),
JOB({ id: 'run', title: 'run', postedAt: at(5), scheduleId: 's' }),
JOB({ id: 'urgent', title: 'urgent', postedAt: at(9), urgent: true, postedByBillion: true }),
], settings: { running: true, maxPerRepo: 2, gate: gate() } });
expect(cards().map(c => c.dataset.jobId)).toEqual(['run', 'urgent', 'old']);
});
it('sends a new board-wide limit', () => {
const total = document.getElementById('job-max-workers');
total.value = '4';
total.dispatchEvent(new Event('change'));
expect(send).toHaveBeenCalledWith({ type: 'job-settings', maxWorkers: 4 });
});
});
describe('dispatcher controls', () => {
it('reflects the stopped state and starts on click', () => {
handleJobsList({ jobs: [], settings: { running: false, maxPerRepo: 2, intervalMs: 180000 } });
expect(document.getElementById('btn-dispatcher-toggle').textContent).toBe('Start');
expect(document.getElementById('job-dispatcher-status').textContent).toMatch(/stopped/);
document.getElementById('btn-dispatcher-toggle').click();
expect(send).toHaveBeenCalledWith({ type: 'job-settings', running: true });
});
it('reflects the running state and its interval', () => {
handleJobsList({ jobs: [], settings: { running: true, maxPerRepo: 2, intervalMs: 300000 } });
expect(document.getElementById('btn-dispatcher-toggle').textContent).toBe('Stop');
expect(document.getElementById('job-dispatcher-status').textContent).toMatch(/every 5m/);
});
it('says in To do why a card waits while the board is stopped, with Start beside it', () => {
handleJobsList({ jobs: [JOB()], settings: { running: false } });
const line = document.querySelector('.job-column[data-state="todo"] .job-board-stopped');
expect(line.textContent).toMatch(/The board is stopped: cards wait here until you press Start/);
line.querySelector('button').click();
expect(send).toHaveBeenCalledWith({ type: 'job-settings', running: true });
});
it('says nothing about a stopped board with no card waiting, or a running one', () => {
handleJobsList({ jobs: [], settings: { running: false } });
expect(document.querySelector('.job-board-stopped')).toBeNull();
handleJobsList({ jobs: [JOB()], settings: { running: true } });
expect(document.querySelector('.job-board-stopped')).toBeNull();
});
it('sends a manual scan', () => {
document.getElementById('btn-dispatch-now').click();
expect(send).toHaveBeenCalledWith({ type: 'job-dispatch-now' });
});
it('sends a new cap', () => {
const cap = document.getElementById('job-max-per-repo');
cap.value = '4';
cap.dispatchEvent(new Event('change'));
expect(send).toHaveBeenCalledWith({ type: 'job-settings', maxPerRepo: 4 });
});
it('shows the board permission mode and sends a new one', () => {
handleJobsList({ jobs: [], settings: { running: false, maxPerRepo: 2, permissionMode: 'acceptEdits' } });
const perm = document.getElementById('job-permission-mode');
expect(perm.value).toBe('acceptEdits');
perm.value = 'plan';
perm.dispatchEvent(new Event('change'));
// Sending it is also what records the choice server-side, which is what
// stops the migration in boardSettings() resetting it again.
expect(send).toHaveBeenCalledWith({ type: 'job-settings', permissionMode: 'plan' });
});
});
describe('the per-job permission mode', () => {
const perm = () => document.getElementById('job-permission-mode-field');
it('opens on "board default" for a card with no mode of its own', () => {
// Never pre-filled with the board's current value: that would freeze the
// card onto today's setting the next time anyone opened the form.
handleJobsList({ jobs: [JOB()], settings: { running: false, maxPerRepo: 2, permissionMode: 'plan' } });
cards()[0].querySelector('.job-card-actions button').click();
expect(perm().value).toBe('');
});
it('colours "board default" when what the board decides is bypass', () => {
handleJobsList({ jobs: [JOB()], settings: { running: false, maxPerRepo: 2, permissionMode: 'auto', permissionModeChosen: false,
envModes: { claude: null, codex: 'bypassPermissions' } } });
cards()[0].querySelector('.job-card-actions button').click();
expect(perm().value).toBe('');
expect(perm().classList).toContain('job-mode-danger');
handleJobsList({ jobs: [JOB()], settings: { running: false, maxPerRepo: 2, permissionMode: 'auto', permissionModeChosen: true,
envModes: { claude: null, codex: 'bypassPermissions' } } });
cards()[0].querySelector('.job-card-actions button').click();
expect(perm().classList).not.toContain('job-mode-danger'); // a picked mode overrides the .env one
handleJobsList({ jobs: [], settings: { permissionModeChosen: false, envModes: { claude: null, codex: null } } });
});
it('shows and sends the mode a card carries', () => {
handleJobsList({ jobs: [JOB({ permissionMode: 'plan' })], settings: { running: false, maxPerRepo: 2 } });
cards()[0].querySelector('.job-card-actions button').click();
expect(perm().value).toBe('plan');
perm().value = 'acceptEdits';
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({
type: 'job-update', jobId: 'job-1', permissionMode: 'acceptEdits',
}));
});
it('puts an overriding mode on the card face', () => {
handleJobsList({ jobs: [JOB({ permissionMode: 'bypassPermissions' })], settings: { running: false, maxPerRepo: 2 } });
expect(cards()[0].querySelector('.job-card-chips').textContent).toContain('bypassPermissions');
});
it('shows both the scheduled chip and the permission-mode chip together', () => {
// Two sibling .job-card-type spans. A querySelector (singular) assertion
// elsewhere would only ever see the first, so this pins both.
handleJobsList({ jobs: [JOB({ type: 'scheduled', schedule: '@daily', permissionMode: 'plan' })], settings: { running: false, maxPerRepo: 2 } });
const chips = [...cards()[0].querySelectorAll('.job-card-type')].map(c => c.textContent);
expect(chips).toEqual(['recurring', 'plan']);
});
it('colours only the bypassPermissions chip as dangerous', () => {
handleJobsList({ jobs: [JOB({ permissionMode: 'bypassPermissions' })], settings: { running: false, maxPerRepo: 2 } });
expect(cards()[0].querySelector('.job-card-type').classList).toContain('job-mode-danger');
handleJobsList({ jobs: [JOB({ permissionMode: 'plan' })], settings: { running: false, maxPerRepo: 2 } });
expect(cards()[0].querySelector('.job-card-type').classList).not.toContain('job-mode-danger');
});
it('shows the .env defaults while no mode is picked, and lets any pick override them', () => {
handleJobsList({ jobs: [], settings: { running: false, maxPerRepo: 2, permissionMode: 'auto', permissionModeChosen: false,
envModes: { claude: 'bypassPermissions', codex: null } } });
const perm = document.getElementById('job-permission-mode');
expect(perm.value).toBe('');
expect(perm.selectedOptions[0].textContent).toBe('.env: claude bypassPermissions, codex auto');
expect(perm.classList).toContain('job-mode-danger'); // workers really run in bypass
// Picking the built-in mode is a change too, so it is sent and recorded.
perm.value = 'auto';
perm.dispatchEvent(new Event('change'));
expect(send).toHaveBeenCalledWith({ type: 'job-settings', permissionMode: 'auto' });
// Once a mode is picked, the .env entry goes.
handleJobsList({ jobs: [], settings: { running: false, maxPerRepo: 2, permissionMode: 'auto', permissionModeChosen: true,
envModes: { claude: 'bypassPermissions', codex: null } } });
expect(perm.value).toBe('auto');
expect(perm.querySelector('option[value=""]')).toBeNull();
expect(perm.classList).not.toContain('job-mode-danger');
handleJobsList({ jobs: [], settings: { permissionModeChosen: false, envModes: { claude: null, codex: null } } });
});
it('marks the toolbar select when the board itself is on bypassPermissions', () => {
handleJobsList({ jobs: [], settings: { running: false, maxPerRepo: 2, permissionMode: 'bypassPermissions' } });
expect(document.getElementById('job-permission-mode').classList).toContain('job-mode-danger');
handleJobsList({ jobs: [], settings: { running: false, maxPerRepo: 2, permissionMode: 'auto' } });
expect(document.getElementById('job-permission-mode').classList).not.toContain('job-mode-danger');
});
it('leaves an inheriting card unchipped', () => {
handleJobsList({ jobs: [JOB()], settings: { running: false, maxPerRepo: 2 } });
expect(cards()[0].querySelector('.job-card-type')).toBeNull();
});
});
describe('job form', () => {
it('offers the discovered models for the chosen agent, and sends the pick', () => {
handleJobsList({ jobs: [], settings: {}, models: { claude: ['opus', 'haiku'], codex: ['gpt-6-luna'] } });
document.getElementById('btn-new-job').click();
expect(send).toHaveBeenCalledWith({ type: 'models-refresh' });
const model = document.getElementById('job-model');
expect([...model.options].map(o => o.value)).toEqual(['', 'opus', 'haiku']);
document.getElementById('job-agent').value = 'codex';
document.getElementById('job-agent').dispatchEvent(new Event('change'));
expect([...model.options].map(o => o.value)).toEqual(['', 'gpt-6-luna']);
model.value = 'gpt-6-luna';
document.getElementById('job-title').value = 'Task';
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ type: 'job-create', agent: 'codex', model: 'gpt-6-luna' }));
});
it('shows the model on the card and keeps it on an edit that does not touch it', () => {
handleJobsList({ jobs: [JOB({ model: 'opus' })], settings: {}, models: { claude: [], codex: [] } });
expect(cards()[0].querySelector('.job-card-runs-on').textContent).toBe('claude · opus');
[...cards()[0].querySelectorAll('.job-card-btn')].find(b => b.textContent === 'Edit').click();
// No longer discovered, but still the card's: offered, selected, not re-sent.
expect(document.getElementById('job-model').value).toBe('opus');
document.getElementById('btn-job-save').click();
const update = send.mock.calls.map(c => c[0]).find(m => m.type === 'job-update');
expect(update).not.toHaveProperty('model');
});
it('posts a new job with the chosen repo', () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'New task';
document.getElementById('job-detail').value = 'Some detail';
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith({
type: 'job-create', title: 'New task', detail: 'Some detail', repoPath: '/repos/alpha',
jobType: 'one-time', schedule: '', permissionMode: '', agent: 'claude', requiresPr: true, skills: [], attachments: [], model: '', runAt: null,
});
});
it('posts a codex job, hiding the Claude-only modes except one already picked', () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Codex task';
const perm = document.getElementById('job-permission-mode-field');
perm.value = 'plan';
const agent = document.getElementById('job-agent');
agent.value = 'codex';
agent.dispatchEvent(new Event('change'));
// The pick survives: the server maps plan onto Codex's read-only sandbox.
expect(perm.value).toBe('plan');
expect(perm.querySelector('option[value="plan"]').hidden).toBe(false);
expect(perm.querySelector('option[value="manual"]').hidden).toBe(true);
expect(perm.querySelector('option[value="manual"]').disabled).toBe(true);
expect(perm.querySelector('option[value="bypassPermissions"]').hidden).toBe(false);
perm.value = 'bypassPermissions';
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ type: 'job-create', agent: 'codex', permissionMode: 'bypassPermissions' }));
// Reopening for a claude card shows every mode again.
document.getElementById('btn-new-job').click();
expect(perm.querySelector('option[value="plan"]').hidden).toBe(false);
});
it('shows codex on the card and pre-fills the agent when editing', () => {
handleJobsList({ jobs: [JOB({ agent: 'codex' })], settings: { running: false, maxPerRepo: 2 } });
expect(cards()[0].querySelector('.job-card-runs-on').textContent).toBe('codex · default');
cards()[0].querySelector('.job-card-actions button').click();
expect(document.getElementById('job-agent').value).toBe('codex');
});
it('opens a codex card with the Claude-only modes hidden, and sends the agent on save', () => {
handleJobsList({ jobs: [JOB({ agent: 'codex', permissionMode: 'bypassPermissions' })], settings: { running: false, maxPerRepo: 2 } });
cards()[0].querySelector('.job-card-actions button').click();
const perm = document.getElementById('job-permission-mode-field');
expect(perm.querySelector('option[value="manual"]').hidden).toBe(true);
expect(perm.value).toBe('bypassPermissions');
expect(perm.classList).toContain('job-mode-danger');
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ type: 'job-update', jobId: 'job-1', agent: 'codex', permissionMode: 'bypassPermissions' }));
});
// A card can hold a Claude-only mode on Codex (a ws client, config.json, or
// a Claude card switched to Codex in the form); the server maps it onto a
// stricter Codex flag, so opening the card must not quietly drop it.
it('keeps a stored Claude-only mode on a codex card and sends it back unchanged', () => {
handleJobsList({ jobs: [JOB({ agent: 'codex', permissionMode: 'plan' })], settings: { running: false, maxPerRepo: 2 } });
cards()[0].querySelector('.job-card-actions button').click();
const perm = document.getElementById('job-permission-mode-field');
expect(perm.value).toBe('plan');
expect(perm.querySelector('option[value="plan"]').hidden).toBe(false);
expect(perm.querySelector('option[value="manual"]').hidden).toBe(true);
document.getElementById('job-title').value = 'typo fixed';
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ type: 'job-update', jobId: 'job-1', agent: 'codex', permissionMode: 'plan' }));
});
it('switching a card back to claude unhides every mode and sends claude', () => {
handleJobsList({ jobs: [JOB({ agent: 'codex' })], settings: { running: false, maxPerRepo: 2 } });
cards()[0].querySelector('.job-card-actions button').click();
const perm = document.getElementById('job-permission-mode-field');
const agent = document.getElementById('job-agent');
agent.value = 'claude';
agent.dispatchEvent(new Event('change'));
expect(perm.querySelector('option[value="plan"]').hidden).toBe(false);
perm.value = 'plan';
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ type: 'job-update', jobId: 'job-1', agent: 'claude', permissionMode: 'plan' }));
});
it('opens a claude card on claude even right after a codex one', () => {
handleJobsList({ jobs: [JOB({ id: 'c', agent: 'codex' }), JOB({ id: 'k' })], settings: { running: false, maxPerRepo: 2 } });
cards()[0].querySelector('.job-card-actions button').click();
expect(document.getElementById('job-agent').value).toBe('codex');
closeJobForm();
cards()[1].querySelector('.job-card-actions button').click();
expect(document.getElementById('job-agent').value).toBe('claude');
expect(document.getElementById('job-permission-mode-field').querySelector('option[value="plan"]').hidden).toBe(false);
});
it('puts the type on the title line, and leads the lower chips with the agent·model pill', () => {
handleJobsList({ jobs: [JOB({ type: 'scheduled', schedule: '@daily', agent: 'codex', model: 'gpt-5.5', permissionMode: 'plan' })], settings: { running: false, maxPerRepo: 2 } });
const chips = [...cards()[0].querySelector('.job-card-chips').children].map(c => c.textContent);
expect(chips).toEqual(['codex · gpt-5.5', 'plan']);
// The type is on the title line, not in the lower row.
expect(cards()[0].querySelector('.job-card-title .job-card-type').textContent).toBe('recurring');
handleJobsList({ jobs: [JOB({ agent: 'claude' })], settings: { running: false, maxPerRepo: 2 } });
expect([...cards()[0].querySelector('.job-card-chips').children].map(c => c.textContent)).toEqual(['claude · default']);
expect(cards()[0].querySelectorAll('.job-card-type')).toHaveLength(0);
});
it('shows every card its agent, dropping only the redundant "claude-" from the model', () => {
handleJobsList({ jobs: [JOB({ model: 'claude-opus-5-5' }), JOB({ id: 'job-2', agent: 'codex' })], settings: { running: false, maxPerRepo: 2 } });
const pill = document.querySelector('[data-job-id="job-1"] .job-card-runs-on');
expect(pill.textContent).toBe('claude · opus-5-5');
expect(pill.title).toContain('claude-opus-5-5');
const plain = document.querySelector('[data-job-id="job-2"] .job-card-runs-on');
expect(plain.textContent).toBe('codex · default');
expect(plain.title).toBe("Runs the CLI's default model");
});
// A screenshot pasted into Details becomes a named base64 attachment on the
// create message, and the terminal's own paste handler (mocked here) is not
// what receives it.
it('sends a pasted screenshot as an attachment, once it has been read', async () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Fix header';
const file = new File([new Uint8Array([1, 2, 3])], 'image.png', { type: 'image/png' });
const e = new Event('paste', { bubbles: true, cancelable: true });
e.clipboardData = { files: [file] };
document.getElementById('job-detail').dispatchEvent(e);
expect(e.defaultPrevented).toBe(true);
expect(document.querySelectorAll('.job-attachment')).toHaveLength(1);
// FileReader is async: a save before it finishes is refused, not sent half-read.
document.getElementById('btn-job-save').click();
expect(send).not.toHaveBeenCalledWith(JOB_SAVE);
expect(document.getElementById('job-form-error').textContent).toMatch(/still reading/i);
await new Promise(r => setTimeout(r, 50));
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({
type: 'job-create',
attachments: [{ name: expect.stringMatching(/^screenshot-\d+\.png$/), data: 'AQID' }],
}));
});
it('an edit that removes the last chip sends an empty list so the server deletes the file', () => {
handleJobsList({ jobs: [JOB({ attachments: [{ name: 'shot.png', path: '/cfg/x/shot.png' }] })], settings: {} });
const edit = [...cards()[0].querySelectorAll('.job-card-btn')].find(b => b.textContent === 'Edit');
edit.click();
expect(document.querySelectorAll('.job-attachment')).toHaveLength(1);
document.querySelector('.job-attachment-remove').click();
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ type: 'job-update', jobId: 'job-1', attachments: [] }));
});
it('links each attachment on the card to the download route', () => {
handleJobsList({ jobs: [JOB({ attachments: [{ name: 'a b.png', path: '/cfg/x/a b.png' }] })], settings: {} });
const link = cards()[0].querySelector('.job-card-attachment');
expect(link.getAttribute('href')).toBe('/api/jobs/job-1/attachments/a%20b.png');
expect(link.rel).toContain('noopener');
});
it('refuses an empty title instead of posting', () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = ' ';
document.getElementById('btn-job-save').click();
expect(send).not.toHaveBeenCalledWith(JOB_SAVE);
expect(document.getElementById('job-form-error').style.display).toBe('block');
});
it('explains itself when no repo has been added yet', () => {
repos.clear();
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Task';
document.getElementById('btn-job-save').click();
expect(send).not.toHaveBeenCalledWith(JOB_SAVE);
expect(document.getElementById('job-form-error').textContent).toMatch(/repository/i);
});
});
describe('cards that need no pull request', () => {
it('chips a no-PR card, shows its result in full, and leaves a plain card unchipped', () => {
handleJobsList({
jobs: [
JOB({ id: 'a', state: 'review', requiresPr: false, resultSummary: 'An unclosed onData listener in pty.js.' }),
JOB({ id: 'b', state: 'todo', requiresPr: true }),
JOB({ id: 'c', state: 'todo', type: 'scheduled', schedule: '@daily', requiresPr: false }),
],
settings: {},
});
const [review] = columnCards('review');
expect([...review.querySelectorAll('.job-card-type')].map(c => c.textContent)).toEqual(['no PR']);
expect(review.querySelector('.job-card-result').textContent).toBe('An unclosed onData listener in pty.js.');
const [plain, scheduled] = columnCards('todo');
expect(plain.querySelector('.job-card-result')).toBeNull();
expect([...plain.querySelectorAll('.job-card-type')].map(c => c.textContent)).not.toContain('no PR');
expect([...scheduled.querySelectorAll('.job-card-type')].map(c => c.textContent)).not.toContain('no PR');
});
it('opens a no-PR card on "Not required", sends it back, and defaults a schedule to Not required', () => {
handleJobsList({ jobs: [JOB({ requiresPr: false })], settings: {} });
document.querySelector('.job-card-btn').click(); // Edit
const pr = document.getElementById('job-requires-pr');
expect(pr.value).toBe('no');
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ type: 'job-update', jobId: 'job-1', requiresPr: false }));
document.getElementById('btn-new-job').click();
expect(pr.value).toBe('yes');
const type = document.getElementById('job-type');
type.value = 'scheduled';
type.dispatchEvent(new Event('change'));
expect(pr.value).toBe('no'); // a schedule's runs report a summary unless asked
type.value = 'one-time';
type.dispatchEvent(new Event('change'));
expect(pr.value).toBe('yes');
// A pick by hand sticks through a type change.
pr.value = 'no';
pr.dispatchEvent(new Event('change'));
type.value = 'scheduled';
type.dispatchEvent(new Event('change'));
type.value = 'one-time';
type.dispatchEvent(new Event('change'));
expect(pr.value).toBe('no');
});
// Same rule as the server: a type change without a pick takes the new
// type's default, whether the card is new or being edited.
it('flips an existing card\'s PR choice with its type, unless picked by hand', () => {
handleJobsList({ jobs: [JOB()], settings: {} });
document.querySelector('.job-card-btn').click(); // Edit
const type = document.getElementById('job-type');
const pr = document.getElementById('job-requires-pr');
type.value = 'scheduled';
type.dispatchEvent(new Event('change'));
expect(pr.value).toBe('no');
pr.value = 'yes';
pr.dispatchEvent(new Event('change'));
type.value = 'one-time';
type.dispatchEvent(new Event('change'));
type.value = 'scheduled';
type.dispatchEvent(new Event('change'));
expect(pr.value).toBe('yes');
});
it('opens a schedule that never chose on Not required', () => {
handleJobsList({ jobs: [JOB({ type: 'scheduled', schedule: '@daily' })], settings: {} });
document.querySelector('.job-card-btn').click(); // Edit
expect(document.getElementById('job-requires-pr').value).toBe('no');
});
it('opens a schedule that asked for PR runs on Required', () => {
handleJobsList({ jobs: [JOB({ type: 'scheduled', schedule: '@daily', requiresPr: true })], settings: {} });
document.querySelector('.job-card-btn').click(); // Edit
expect(document.getElementById('job-requires-pr').value).toBe('yes');
});
});
describe('card actions', () => {
it('offers a manual move to review while in progress', () => {
handleJobsList({ jobs: [JOB({ state: 'in-progress', agentSessionId: 's1', agentName: 'V' })], settings: {} });
const btn = [...cards()[0].querySelectorAll('.job-card-btn')].find(b => b.textContent.includes('Review'));
btn.click();
expect(send).toHaveBeenCalledWith({ type: 'job-move', jobId: 'job-1', state: 'review' });
});
it('confirms before deleting', () => {
handleJobsList({ jobs: [JOB()], settings: {} });
const del = [...cards()[0].querySelectorAll('.job-card-btn')].find(b => b.textContent === 'Delete');
window.confirm = vi.fn(() => false);
del.click();
expect(send).not.toHaveBeenCalled();
window.confirm = vi.fn(() => true);
del.click();
expect(send).toHaveBeenCalledWith({ type: 'job-delete', jobId: 'job-1' });
});
});
describe('archiving a To do card', () => {
const button = (label) => [...document.querySelectorAll('.job-card-btn')].find(b => b.textContent === label);
it('offers Archive on a To do card, asks first, then sends job-archive', () => {
handleJobsList({ jobs: [JOB({ type: 'scheduled', schedule: '0 10 24 9 *' })], settings: {} });
window.confirm = vi.fn(() => false);
button('Archive').click();
expect(send).not.toHaveBeenCalledWith(expect.objectContaining({ type: 'job-archive' }));
window.confirm = vi.fn(() => true);
button('Archive').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ type: 'job-archive', jobId: 'job-1' }));
});
it('shows an archived schedule in Finished with its note and no Pause or Archive', () => {
handleJobsList({ jobs: [JOB({ type: 'scheduled', schedule: '0 10 24 9 *', once: true, state: 'done', archivedAt: new Date().toISOString(), archivedBy: 'Billion', archivedReason: 'Ran once' })], settings: {} });
document.getElementById('btn-finished-jobs').click();
const card = document.querySelector('#job-finished-cards .job-card');
expect(card.querySelector('.job-card-finished').textContent).toMatch(/archived .* by Billion: Ran once/);
expect(card.querySelector('.job-card-type').textContent).toBe('scheduled');
expect(button('Pause')).toBeUndefined();
expect(button('Archive')).toBeUndefined();
});
});
describe('show / hide', () => {
it('hides the board and leaves the active terminal alone', () => {
const termEl = document.createElement('div');
agents.set('s9', { name: 'A', state: 'WORKING', termEl, lastOutputAt: Date.now() });
setActiveSession('s9');
showJobBoard();
expect(termEl.style.display).toBe('none');
expect(document.getElementById('job-board').style.display).toBe('flex');
hideJobBoard();
expect(document.getElementById('job-board').style.display).toBe('none');
});
it('brings the board up before opening the form from the top bar', () => {
hideJobBoard();
// app.js wires this hook to updateTabs(). The pinned board tab has to
// repaint as active, or the form appears under a tab strip still
// highlighting the agent the user was looking at.
const repaintTabs = vi.fn();
window._onBoardVisibilityChanged = repaintTabs;
try {
document.getElementById('btn-new-job-shortcut').click();
expect(document.getElementById('job-board').style.display).toBe('flex');
expect(document.getElementById('job-form').style.display).toBe('flex');
expect(repaintTabs).toHaveBeenCalled();
} finally {
delete window._onBoardVisibilityChanged;
}
});
it('dismisses the agent spawn overlay before focusing the job title', () => {
// The spawn form covers everything below the 36px header strip but leaves
// the header buttons clickable. Opening the job form underneath it would
// focus a title input the user cannot see, and eat what they typed next.
const spawn = document.getElementById('spawn-form');
spawn.style.display = 'flex';
openJobForm();
expect(spawn.style.display).toBe('none');
expect(document.activeElement.id).toBe('job-title');
});
it('dismisses the spawn overlay from the board\'s own buttons too', () => {
// The overlay sizes to its content instead of covering the viewport, so
// the board's toolbar and cards stay clickable underneath it. Every door
// into the form has to clear it, not just the top-bar shortcut.
handleJobsList({ jobs: [JOB()], settings: {} });
const spawn = document.getElementById('spawn-form');
spawn.style.display = 'flex';
document.getElementById('btn-new-job').click();
expect(spawn.style.display).toBe('none');
spawn.style.display = 'flex';
const edit = [...document.querySelectorAll('.job-card button')]
.find((b) => b.textContent === 'Edit');
edit.click();
expect(spawn.style.display).toBe('none');
});
it('opens the form even on a page with no spawn overlay', () => {
document.getElementById('spawn-form').remove();
expect(() => openJobForm()).not.toThrow();
expect(document.getElementById('job-form').style.display).toBe('flex');
});
it('closeJobForm dismisses the form so the spawn overlay cannot hide it', () => {
openJobForm();
closeJobForm();
expect(document.getElementById('job-form').style.display).toBe('none');
});
});
describe('PR link safety', () => {
it('renders an https PR link', () => {
handleJobsList({ jobs: [JOB({ state: 'review', prUrl: 'https://gh/o/r/pull/3', prNumber: 3 })], settings: {} });
expect(document.querySelector('.job-card-pr').getAttribute('href')).toBe('https://gh/o/r/pull/3');
});
it('refuses a non-http scheme rather than putting it in an href', () => {
// job.prUrl comes from `gh pr list`, but a javascript: href executes on
// click — cheap guard on a value that crosses a trust boundary.
for (const bad of ['javascript:alert(1)', 'data:text/html,<script>1</script>', 'file:///etc/passwd']) {
handleJobsList({ jobs: [JOB({ id: 'x', state: 'review', prUrl: bad, prNumber: 1 })], settings: {} });
expect(document.querySelector('.job-card-pr')).toBeNull();
}
});
});
// --- Finished jobs ---
describe('finished jobs', () => {
const finishedJob = (over = {}) => JOB({
id: 'done-1', state: 'done', title: 'Shipped thing',
branchName: 'bill/shipped', prUrl: 'https://gh/o/r/pull/12', prNumber: 12,
reviewAt: '2026-08-28T09:00:00Z',
prMergedAt: '2026-08-28T10:00:00Z', doneAt: '2026-08-28T10:00:01Z',
...over,
});
function finishedCards() {
return [...document.querySelectorAll('#job-finished-cards .job-card')];
}
it('keeps a merged job off the board entirely', () => {
// The point of the whole change: Review means "needs your review", so a
// finished card must not be sitting in it.
handleJobsList({ jobs: [finishedJob(), JOB({ id: 'r', state: 'review' })], settings: {} });
expect(columnCards('review')).toHaveLength(1);
expect(cards().map(c => c.dataset.jobId)).not.toContain('done-1');
});
it('counts the finished jobs on the toolbar button', () => {
handleJobsList({ jobs: [finishedJob(), finishedJob({ id: 'done-2' })], settings: {} });
expect(document.getElementById('btn-finished-jobs').textContent).toBe('View finished jobs (2)');
});
it('drops the count when there is nothing finished', () => {
handleJobsList({ jobs: [JOB()], settings: {} });
expect(document.getElementById('btn-finished-jobs').textContent).toBe('View finished jobs');
});
it('swaps the columns for the finished list, and back again', () => {
handleJobsList({ jobs: [finishedJob(), JOB()], settings: {} });
const columns = document.getElementById('job-columns');
const panel = document.getElementById('job-finished');
expect(panel.style.display).toBe('none');
document.getElementById('btn-finished-jobs').click();
expect(panel.style.display).toBe('flex');
expect(columns.style.display).toBe('none'); // never both at once
expect(finishedCards()).toHaveLength(1);
expect(document.getElementById('btn-finished-jobs').textContent).toMatch(/Back to board/);
document.getElementById('btn-finished-jobs').click();
expect(panel.style.display).toBe('none');
expect(columns.style.display).not.toBe('none');
expect(columnCards('todo')).toHaveLength(1);
});
it('shows when the PR merged, and keeps the link to it', () => {
handleJobsList({ jobs: [finishedJob()], settings: {} });
document.getElementById('btn-finished-jobs').click();
const card = finishedCards()[0];
expect(card.querySelector('.job-card-finished').textContent).toMatch(/^merged /);
expect(card.querySelector('.job-card-pr').getAttribute('href')).toBe('https://gh/o/r/pull/12');
});
it('says "finished" rather than "merged" for a job filed away by hand', () => {
handleJobsList({ jobs: [finishedJob({ prMergedAt: null })], settings: {} });
document.getElementById('btn-finished-jobs').click();
expect(finishedCards()[0].querySelector('.job-card-finished').textContent).toMatch(/^finished /);
});
it('lists the most recently finished first', () => {
handleJobsList({
jobs: [
finishedJob({ id: 'old', doneAt: '2026-08-01T10:00:00Z' }),
finishedJob({ id: 'new', doneAt: '2026-08-27T10:00:00Z' }),
],
settings: {},
});
document.getElementById('btn-finished-jobs').click();
expect(finishedCards().map(c => c.dataset.jobId)).toEqual(['new', 'old']);
});
it('explains the empty archive rather than showing a blank pane', () => {
handleJobsList({ jobs: [JOB()], settings: {} });
document.getElementById('btn-finished-jobs').click();
expect(document.querySelector('#job-finished-cards .job-column-empty').textContent).toMatch(/No finished jobs/);
});
it('offers no way back onto the board — only Delete', () => {
// Done is terminal: the card is the record of what shipped, and the server
// refuses every move out of it. Rendering a button the server would reject
// is worse than rendering none.
handleJobsList({ jobs: [finishedJob()], settings: {} });
document.getElementById('btn-finished-jobs').click();
const labels = [...finishedCards()[0].querySelectorAll('.job-card-btn')].map(b => b.textContent);
expect(labels).toEqual(['Delete']);
});
it('offers Done on a review card, for a merge the board cannot see', () => {
// It asks first, like Delete: the move cannot be undone.
handleJobsList({ jobs: [JOB({ id: 'r', state: 'review' })], settings: {} });
const doneBtn = [...cards()[0].querySelectorAll('.job-card-btn')]
.find(b => b.textContent.includes('Done'));
window.confirm = vi.fn(() => true);
doneBtn.click();
expect(send).toHaveBeenCalledWith({ type: 'job-move', jobId: 'r', state: 'done' });
});
it('warns that filing a card away closes its agent', () => {
// Same disclosure Delete makes: this move retires the agent, and one
// re-adopted on a shipped branch is a terminal someone is working in.
handleJobsList({ jobs: [JOB({ id: 'r', state: 'review', agentSessionId: 'session-1', agentName: 'Viper' })], settings: {} });
const doneBtn = [...cards()[0].querySelectorAll('.job-card-btn')]
.find(b => b.textContent.includes('Done'));
window.confirm = vi.fn(() => false);
doneBtn.click();
expect(window.confirm.mock.calls[0][0]).toMatch(/Viper is closed/);
});
it('does not file a card away when the confirm is declined', () => {
handleJobsList({ jobs: [JOB({ id: 'r', state: 'review' })], settings: {} });
const doneBtn = [...cards()[0].querySelectorAll('.job-card-btn')]
.find(b => b.textContent.includes('Done'));
window.confirm = vi.fn(() => false);
doneBtn.click();
expect(send).not.toHaveBeenCalled();
});
it('stays in the archive when the server broadcasts a new job list', () => {
// The live path: the server rebroadcasts on every scan, so renderBoard runs
// with the archive already open. Repainting the columns underneath would
// kick the user out mid-read.
handleJobsList({ jobs: [finishedJob()], settings: {} });
document.getElementById('btn-finished-jobs').click();
handleJobsList({ jobs: [finishedJob(), finishedJob({ id: 'done-2', doneAt: '2026-08-29T10:00:00Z' }), JOB()], settings: {} });
expect(document.getElementById('job-finished').style.display).toBe('flex');
expect(document.getElementById('job-columns').style.display).toBe('none');
expect(finishedCards().map(c => c.dataset.jobId)).toEqual(['done-2', 'done-1']);
});
it('returns to the columns when a new job is posted from the archive', () => {
// The new card lands in To do, which the archive is covering — posting from
// here would otherwise look like nothing happened.
handleJobsList({ jobs: [finishedJob()], settings: {} });
document.getElementById('btn-finished-jobs').click();
document.getElementById('btn-new-job').click();
expect(document.getElementById('job-finished').style.display).toBe('none');
});
it('keeps the toggle tooltip and aria-pressed in step with its label', () => {
handleJobsList({ jobs: [finishedJob()], settings: {} });
const btn = document.getElementById('btn-finished-jobs');
expect(btn.getAttribute('aria-pressed')).toBe('false');
const boardTitle = btn.title;
btn.click();
expect(btn.getAttribute('aria-pressed')).toBe('true');
expect(btn.title).not.toBe(boardTitle);
expect(btn.title).toMatch(/columns/);
});
it('falls back to the columns when the archive markup is missing', () => {
// A page cached from before the upgrade has the old markup and the new
// module; hiding the columns for an archive that has no container would
// leave a blank board.
handleJobsList({ jobs: [finishedJob(), JOB()], settings: {} });
document.getElementById('btn-finished-jobs').click();
document.getElementById('job-finished').remove();
renderBoard();
expect(document.getElementById('job-columns').style.display).not.toBe('none');
expect(columnCards('todo')).toHaveLength(1);
});
it('reopens on the board after the tab is left and returned to', () => {
handleJobsList({ jobs: [finishedJob()], settings: {} });
document.getElementById('btn-finished-jobs').click();
hideJobBoard();
showJobBoard();
expect(document.getElementById('job-finished').style.display).toBe('none');
});
});
describe('a finished card still shows its record', () => {
it('shows the branch even when the agent name was lost', () => {
// A restart used to null agentName, and the branch was rendered inside the
// agent block — so the card came up with nothing on it but its title.
handleJobsList({
jobs: [JOB({ state: 'review', agentName: null, branchName: 'bill10/add-job-button', prUrl: 'https://gh/o/r/pull/18', prNumber: 18 })],
settings: {},
});
const card = document.querySelector('.job-card');
expect(card.querySelector('.job-card-branch').textContent).toBe('bill10/add-job-button');
expect(card.querySelector('.job-card-agent-name')).toBeNull();
expect(card.querySelector('.job-card-pr').textContent).toBe('PR #18');
});
it('shows the agent name when there is no branch', () => {
handleJobsList({ jobs: [JOB({ state: 'review', agentName: 'Phantom', branchName: null })], settings: {} });
const card = document.querySelector('.job-card');
expect(card.querySelector('.job-card-agent-name').textContent).toBe('Phantom');
expect(card.querySelector('.job-card-branch')).toBeNull();
});
it('shows both, with when it started', () => {
handleJobsList({
jobs: [JOB({ state: 'review', agentName: 'Phantom', branchName: 'bill10/x', startedAt: new Date().toISOString() })],
settings: {},
});
const row = document.querySelector('.job-card-agent');
expect(row.textContent).toMatch(/Phantom/);
expect(row.textContent).toMatch(/started/);
// The branch pairs with the repo, not with the agent.
expect(document.querySelector('.job-card-where').textContent).toBe('alphabill10/x');
expect(row.textContent).not.toMatch(/bill10\/x/);
});
it('pairs the repo with the branch on one line, ahead of the agent', () => {
handleJobsList({ jobs: [JOB({ state: 'review', agentName: 'Phantom', branchName: 'bill10/x' })], settings: {} });
const card = document.querySelector('.job-card');
const where = card.querySelector('.job-card-where');
expect(where.querySelector('.job-card-repo').textContent).toBe('alpha');
expect(where.querySelector('.job-card-branch').title).toBe('Branch: bill10/x');
expect(where.compareDocumentPosition(card.querySelector('.job-card-agent')) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
});
it('renders no agent row at all when neither is known', () => {
handleJobsList({ jobs: [JOB({ state: 'todo', agentName: null, branchName: null })], settings: {} });
expect(document.querySelector('.job-card-agent')).toBeNull();
});
});
// --- Scheduled jobs ---
const SCHEDULED = (over = {}) => JOB({
id: 'job-sched', title: 'Daily digest', type: 'scheduled', schedule: '0 9 * * 1-5',
nextRunAt: new Date(Date.now() + 2 * 3600_000).toISOString(),
runCount: 0, lastRunAt: null,
...over,
});
describe('scheduled cards', () => {
it('marks the card and shows the cron with when it next fires', () => {
handleJobsList({ jobs: [SCHEDULED()], settings: {} });
const card = cards()[0];
expect(card.querySelector('.job-card-type').textContent).toBe('recurring');
expect(card.querySelector('.job-card-cron').textContent).toBe('0 9 * * 1-5');
expect(card.querySelector('.job-card-next').textContent).toMatch(/^runs .*·.*in 2h/);
});
it('says a recurring schedule in words and keeps the cron in the tooltip', () => {
handleJobsList({ jobs: [SCHEDULED({ scheduleWords: 'Weekdays at 9:00 AM' })], settings: {} });
const cron = cards()[0].querySelector('.job-card-cron');
expect(cron.textContent).toBe('Weekdays at 9:00 AM');
expect(cron.title).toBe('0 9 * * 1-5');
});
it('shows a one-time card with a future start as scheduled, with its date, Run now and no Pause', () => {
const at = new Date(Date.now() + 2 * 86400_000).toISOString();
handleJobsList({ jobs: [JOB({ runAt: at })], settings: {} });
const card = cards()[0];
expect(card.querySelector('.job-card-type').textContent).toBe('scheduled');
expect(card.querySelector('.job-card-cron')).toBeNull();
expect(card.querySelector('.job-card-next').textContent).toMatch(/\d.* · in 2d/);
const labels = [...card.querySelectorAll('.job-card-btn')].map(b => b.textContent);
expect(labels).toEqual(expect.arrayContaining(['Edit', 'Run now', 'Archive', 'Delete']));
expect(labels.some(l => /Pause|Resume/.test(l))).toBe(false);
[...card.querySelectorAll('.job-card-btn')].find(b => b.textContent === 'Run now').click();
expect(send).toHaveBeenCalledWith({ type: 'job-release-hold', jobId: card.dataset.jobId });
});
it('drops the scheduled look once the card has started', () => {
const at = new Date(Date.now() + 2 * 86400_000).toISOString();
handleJobsList({ jobs: [JOB({ runAt: at, state: 'in-progress' })], settings: {} });
const card = cards()[0];
expect([...card.querySelectorAll('.job-card-type')].some(c => c.textContent === 'scheduled')).toBe(false);
expect(card.querySelector('.job-card-next')).toBeNull();
});
it('still offers Resume on an old paused once card', () => {
handleJobsList({ jobs: [JOB({ runAt: new Date(Date.now() + 86400_000).toISOString(), paused: true })], settings: {} });
expect([...document.querySelectorAll('.job-card-btn')].some(b => b.textContent === 'Resume')).toBe(true);
});
it('points at its latest run and says why it last held off', () => {
handleJobsList({
jobs: [
SCHEDULED({ lastRunJobId: 'run-1', lastSkipReason: 'waiting on PR #7', lastSkipAt: new Date(Date.now() - 60_000).toISOString() }),
JOB({ id: 'run-1', state: 'review', scheduleId: 'job-sched' }),
],
settings: {},
});
const card = document.querySelector('[data-job-id="job-sched"]');
expect(card.querySelector('.job-card-lastrun').textContent).toMatch(/latest run: Review/);
expect(card.textContent).toMatch(/held off .*waiting on PR #7/);
const run = document.querySelector('[data-job-id="run-1"]');
expect([...run.querySelectorAll('.job-card-type')].map(c => c.textContent)).toContain('run');
});
it('says a run replaced earlier ones', () => {
handleJobsList({ jobs: [JOB({ id: 'run-2', state: 'review', scheduleId: 's', supersededRuns: 3 })], settings: {} });
expect(document.querySelector('[data-job-id="run-2"]').textContent).toMatch(/filed 3 earlier runs to Finished/);
});
it('says one replaced run in the singular', () => {
handleJobsList({ jobs: [JOB({ id: 'run-2', state: 'review', scheduleId: 's', supersededRuns: 1 })], settings: {} });
expect(document.querySelector('[data-job-id="run-2"]').textContent).toMatch(/filed 1 earlier run to Finished/);
});
it('marks an archived run that a newer one replaced', () => {
handleJobsList({ jobs: [JOB({ id: 'run-1', state: 'done', scheduleId: 's', supersededBy: 'run-2', doneAt: new Date().toISOString() })], settings: {} });
document.getElementById('btn-finished-jobs').click();
expect(document.querySelector('#job-finished-cards [data-job-id="run-1"]').textContent).toMatch(/superseded by a newer run/);
});
it('calls a latest run that is done "Finished"', () => {
handleJobsList({
jobs: [SCHEDULED({ lastRunJobId: 'run-1' }), JOB({ id: 'run-1', state: 'done', scheduleId: 'job-sched', doneAt: new Date().toISOString() })],
settings: {},
});
expect(document.querySelector('[data-job-id="job-sched"] .job-card-lastrun').textContent).toMatch(/latest run: Finished/);
});
it('says nothing about a latest run the board no longer has', () => {
handleJobsList({ jobs: [SCHEDULED({ lastRunJobId: 'gone' })], settings: {} });
expect(document.querySelector('.job-card-schedule').textContent).not.toMatch(/latest run/);
});
it('keeps a legacy held timestamp when new firing evidence was never recorded', () => {
handleJobsList({ jobs: [SCHEDULED({ lastSkipReason: 'the previous run is still going', lastSkipAt: new Date().toISOString(),
scheduleStatus: { label: 'Held: prior worker gone', attention: true, observedAt: null, graceMs: 300000, timeZone: 'UTC' },
})], settings: {} });
expect(document.querySelector('[data-job-id="job-sched"]').textContent).toMatch(/held off .*the previous run is still going/);
});
it('does not say it held off while it is paused', () => {
handleJobsList({ jobs: [SCHEDULED({ paused: true, lastSkipReason: 'the previous run is still going', lastSkipAt: new Date().toISOString() })], settings: {} });
expect(document.querySelector('[data-job-id="job-sched"]').textContent).not.toMatch(/held off/);
});
it('says so when the schedule will never come round again', () => {
handleJobsList({ jobs: [SCHEDULED({ schedule: '0 0 30 2 *', nextRunAt: null })], settings: {} });
expect(document.querySelector('.job-card-next').textContent).toMatch(/never fires again/);
});
it('shows the run count once it has run', () => {
handleJobsList({ jobs: [SCHEDULED({ runCount: 3, lastRunAt: new Date(Date.now() - 3600_000).toISOString() })], settings: {} });
expect(document.querySelector('.job-card-runs').textContent).toMatch(/ran 3.*last 1h ago/);
});
it('leaves a one-time card with no schedule row and no chip', () => {
handleJobsList({ jobs: [JOB({ type: 'one-time' })], settings: {} });
expect(document.querySelector('.job-card-schedule')).toBeNull();
expect(document.querySelector('.job-card-type')).toBeNull();
});
it('offers Pause and sends the toggle', () => {
handleJobsList({ jobs: [SCHEDULED()], settings: {} });
const btn = () => [...document.querySelectorAll('.job-card-btn')].find(b => /Pause|Resume/.test(b.textContent));
expect(btn().textContent).toBe('Pause');
btn().click();
expect(send).toHaveBeenCalledWith({ type: 'job-pause', jobId: 'job-sched', paused: true });
});
it('reads as paused on the card and offers Resume instead', () => {
handleJobsList({ jobs: [SCHEDULED({ paused: true })], settings: {} });
// The held due time is not shown: resuming re-arms from that moment, so a
// countdown here would be a promise the board does not keep.
expect(document.querySelector('.job-card-next').textContent).toBe('paused');
const resume = [...document.querySelectorAll('.job-card-btn')].find(b => b.textContent === 'Resume');
expect(resume).toBeTruthy();
resume.click();
expect(send).toHaveBeenCalledWith({ type: 'job-pause', jobId: 'job-sched', paused: false });
});
it('leaves a one-time card without a Pause button', () => {
handleJobsList({ jobs: [JOB({ type: 'one-time' })], settings: {} });
const labels = [...document.querySelectorAll('.job-card-btn')].map(b => b.textContent);
expect(labels).not.toContain('Pause');
});
it('opens the latest run\'s agent from the schedule when it has one', () => {
agents.set('s7', { name: 'Viper', state: 'WORKING', lastOutputAt: Date.now(), termEl: document.createElement('div') });
handleJobsList({
jobs: [SCHEDULED({ lastRunJobId: 'run-1' }), JOB({ id: 'run-1', state: 'in-progress', scheduleId: 'job-sched', agentSessionId: 's7', agentName: 'Viper' })],
settings: {},
});
document.querySelector('[data-job-id="job-sched"] .job-card-lastrun').click();
expect(switchToSession).toHaveBeenCalledWith('s7');
});
it('marks a schedule whose runs open PRs', () => {
handleJobsList({ jobs: [SCHEDULED({ requiresPr: true })], settings: {} });
expect([...document.querySelectorAll('.job-card-type')].map(c => c.textContent)).toContain('PR runs');
});
it('shows no move buttons on a schedule in any state', () => {
for (const state of ['in-progress', 'review']) {
handleJobsList({ jobs: [SCHEDULED({ state })], settings: {} });
const labels = [...document.querySelectorAll('.job-card-btn')].map(b => b.textContent);
expect(labels.filter(l => /Review|To do|Done|In progress/.test(l))).toEqual([]);
}
});
it('offers a schedule no moves — its runs are the cards that move', () => {
handleJobsList({ jobs: [SCHEDULED()], settings: {} });
const labels = [...document.querySelectorAll('.job-card-btn')].map(b => b.textContent);
expect(labels).not.toContain('→ Review');
expect(labels).not.toContain('✓ Done');
expect(labels).not.toContain('End run');
});
});
describe('the job form and schedules', () => {
const type = () => document.getElementById('job-type');
const schedule = () => document.getElementById('job-schedule');
const field = () => document.getElementById('job-schedule-field');
it('hides the cron box until the job is a scheduled one', () => {
document.getElementById('btn-new-job').click();
expect(field().style.display).toBe('none');
type().value = 'scheduled';
type().dispatchEvent(new Event('change'));
expect(field().style.display).toBe('flex');
});
it('posts the type and the schedule together', () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Daily digest';
type().value = 'scheduled';
type().dispatchEvent(new Event('change'));
schedule().value = '0 9 * * 1-5';
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({
type: 'job-create', title: 'Daily digest', jobType: 'scheduled', schedule: '0 9 * * 1-5',
}));
});
it('Once at… shows a time box instead of the cron box and posts runAt as an instant', () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Follow up';
type().value = 'once';
type().dispatchEvent(new Event('change'));
expect(field().style.display).toBe('none');
expect(document.getElementById('job-run-at-field').style.display).toBe('flex');
expect(document.getElementById('job-requires-pr').value).toBe('yes');
const at = new Date(Date.now() + 3600_000);
const p = n => String(n).padStart(2, '0');
// the box holds local wall-clock time; the request carries the same instant
document.getElementById('job-run-at').value = `${at.getFullYear()}-${p(at.getMonth() + 1)}-${p(at.getDate())}T${p(at.getHours())}:${p(at.getMinutes())}`;
document.getElementById('btn-job-save').click();
const msg = send.mock.calls.map(c => c[0]).find(m => m.type === 'job-create');
expect(msg).toMatchObject({ jobType: 'one-time' });
expect(msg).not.toHaveProperty('once');
expect(Math.abs(Date.parse(msg.runAt) - at.getTime())).toBeLessThan(60_000);
});
it('Once at… needs a time that is in the future and within a year', () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Follow up';
type().value = 'once';
const err = () => document.getElementById('job-form-error').textContent;
document.getElementById('btn-job-save').click();
expect(err()).toMatch(/Pick the date/);
document.getElementById('job-run-at').value = '2020-01-01T09:00';
document.getElementById('btn-job-save').click();
expect(err()).toMatch(/future/);
document.getElementById('job-run-at').value = '2099-01-01T09:00';
document.getElementById('btn-job-save').click();
expect(err()).toMatch(/within the next year/);
expect(send).not.toHaveBeenCalledWith(JOB_SAVE);
});
it('catches an obviously wrong cron while the form is still open', () => {
// The server's parser is the authority; this only saves the user from
// losing their text to a toast on the commonest typo.
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Daily digest';
type().value = 'scheduled';
schedule().value = 'every friday';
document.getElementById('btn-job-save').click();
expect(send).not.toHaveBeenCalledWith(JOB_SAVE);
expect(document.getElementById('job-form-error').textContent).toMatch(/cron schedule/i);
});
it('accepts the @shorthands', () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Hourly check';
type().value = 'scheduled';
schedule().value = '@hourly';
document.getElementById('btn-job-save').click();
expect(send).toHaveBeenCalledWith(expect.objectContaining({ jobType: 'scheduled', schedule: '@hourly' }));
});
it('insists on a schedule for a scheduled job', () => {
document.getElementById('btn-new-job').click();
document.getElementById('job-title').value = 'Daily digest';
type().value = 'scheduled';
document.getElementById('btn-job-save').click();
expect(send).not.toHaveBeenCalledWith(JOB_SAVE);
expect(document.getElementById('job-form-error').textContent).toMatch(/needs a cron schedule/i);
});
it('opens an existing scheduled card with its own values, cron box already showing', () => {
handleJobsList({ jobs: [SCHEDULED()], settings: {} });
document.querySelector('.job-card-btn').click(); // Edit
expect(type().value).toBe('scheduled');
expect(schedule().value).toBe('0 9 * * 1-5');
expect(field().style.display).toBe('flex');
});
it('resets the form back to one-time for the next new job', () => {
handleJobsList({ jobs: [SCHEDULED()], settings: {} });
document.querySelector('.job-card-btn').click(); // Edit the scheduled card
document.getElementById('btn-job-cancel').click();
document.getElementById('btn-new-job').click();
expect(type().value).toBe('one-time');
expect(schedule().value).toBe('');
expect(field().style.display).toBe('none');
});
});
describe('an archived run whose PR was closed', () => {
it('says the PR was closed without merging, not that it merged', () => {
handleJobsList({ jobs: [JOB({ id: 'r', state: 'done', scheduleId: 's', prClosedAt: new Date().toISOString(), doneAt: new Date().toISOString() })], settings: {} });
document.getElementById('btn-finished-jobs').click();
const text = document.querySelector('[data-job-id="r"] .job-card-finished').textContent;
expect(text).toMatch(/PR closed without merging/);
expect(text).not.toMatch(/^merged/);
});
});
describe('the run line on a To do card', () => {
const runText = (id) => document.querySelector(`[data-job-id="${id}"] .job-card-run`)?.textContent;
const at = (min) => new Date(Date.now() - min * 60_000).toISOString();
it('says the board is stopped rather than promising a run', () => {
handleJobsList({ jobs: [JOB()], settings: { running: false } });
expect(runText('job-1')).toBe('queued · board stopped');
});
it('says "runs next" while the repo has a free slot, and the queue behind a full one', () => {
agents.set('s1', { name: 'Viper', state: 'WORKING', lastOutputAt: Date.now(), termEl: document.createElement('div') });
const busy = JOB({ id: 'busy', state: 'in-progress', agentSessionId: 's1', postedAt: at(90) });
const queued = [1, 2, 3].map(i => JOB({ id: `q${i}`, postedAt: at(60 - i) }));
handleJobsList({ jobs: [busy, ...queued], settings: { running: true, maxPerRepo: 2 } });
expect(runText('q1')).toBe('runs next');
expect(runText('q2')).toBe('runs when a slot frees');
expect(runText('q3')).toBe('runs when a slot frees (1 ahead)');
expect(runText('busy')).toBeUndefined();
});
it('gives a scheduled card its start time', () => {
handleJobsList({ jobs: [JOB({ runAt: new Date(Date.now() + 2 * 3600_000).toISOString() })], settings: { running: true } });
expect(runText('job-1')).toMatch(/^runs .*\d.* · in 2h$/);
});
});
describe('what each column says first', () => {
const order = (card) => [...card.children].map(el => el.className.split(' ')[0]);
it('a To do card: title, repo, when it runs, who posted it, then the chips', () => {
handleJobsList({ jobs: [JOB({ model: 'opus', requiresPr: false })], settings: { running: true } });
expect(order(cards()[0]).slice(0, 5)).toEqual(['job-card-title', 'job-card-where', 'job-card-run', 'job-card-meta', 'job-card-chips']);
});
it('an In progress card: title, status, repo and branch, agent', () => {
agents.set('s1', { name: 'Viper', state: 'WORKING', lastOutputAt: Date.now(), termEl: document.createElement('div') });
handleJobsList({ jobs: [JOB({ state: 'in-progress', agentSessionId: 's1', agentName: 'Viper', branchName: 'b', startedAt: new Date().toISOString() })], settings: {} });
expect(order(cards()[0]).slice(0, 4)).toEqual(['job-card-title', 'job-card-state', 'job-card-where', 'job-card-agent']);
});
it('a Review card: title, PR, repo and branch, agent, the agent·model pill, then the summary', () => {
handleJobsList({ jobs: [JOB({ state: 'review', prUrl: 'https://gh/o/r/pull/3', prNumber: 3, agentName: 'Echo', branchName: 'b', model: 'opus', resultSummary: 'Done.' })], settings: {} });
const card = cards()[0];
expect(order(card).slice(0, 6)).toEqual(['job-card-title', 'job-card-state', 'job-card-where', 'job-card-agent', 'job-card-chips', 'job-card-result']);
expect(card.querySelector('.job-card-chips').firstElementChild.textContent).toBe('claude · opus');
});
});