@ihyeon/flow-qa 0.2.9 → 0.4.0

package/dist/src/ui/public/app.js

@@ -4,7 +4,7 @@
   const i18n = window.FlowQAI18n;
   const t = i18n.t;
   const names = { scenario: 'nav.scenario', library: 'nav.library', history: 'nav.history', settings: 'nav.settings' };
-  const app = { state: null, connected: false, displayTargets: [], draft: null, script: '', savedFile: '', savedHash: '', origin: 'none', sourceFlow: '', boundSource: null, stale: false, dirty: false, busy: false, planning: false, planRequest: 0, stopping: false, report: null, reportMarkdown: '', selectedRun: '', view: 'scenario' };
+  const app = { state: null, connected: false, displayTargets: [], draft: null, selectedCaseIds: new Set(), script: '', savedFile: '', savedHash: '', origin: 'none', sourceFlow: '', boundSource: null, stale: false, dirty: false, busy: false, planning: false, planRequest: 0, stopping: false, report: null, reportMarkdown: '', selectedRun: '', comparison: null, comparisonRequest: 0, comparisonBusy: false, comparisonStatus: 'comparison.selectBoth', view: 'scenario' };
 
   function el(tag, className, value) {
     const node = document.createElement(tag);
@@ -53,7 +53,7 @@
     });
     $('breadcrumb').textContent = t('app.breadcrumb', { name: t(names[name]) });
     $('sidebar').classList.remove('nav-open'); $('nav-toggle').setAttribute('aria-expanded', 'false');
-    if (name === 'history') renderHistory();
+    if (name === 'history') { renderHistory(); renderComparisonOptions(); }
   }
   function suitePlatform() { return app.draft?.platform || 'web'; }
   function targetPlatform(target) { return target?.kind === 'mobile' ? 'mobile' : 'web'; }
@@ -61,6 +61,37 @@
   function targetLabel(target) { return target?.kind === 'mobile' ? `${target.platform === 'ios' ? 'iOS' : 'Android'} · ${target.bundleId} · ${target.device}` : target?.url || ''; }
   function targetDisplay(target) { return `${target?.name || t('app.noTarget')} · ${targetLabel(target)}`; }
   function compatibleTarget() { const target = selectedTarget(); return target && targetPlatform(target) === suitePlatform(); }
+  function selectedCases() { return (app.draft?.cases || []).filter((item) => app.selectedCaseIds.has(item.id)); }
+  function selectionScope(selection) {
+    return selection && Array.isArray(selection.caseIds) && Number.isInteger(selection.totalCases) && selection.caseIds.length < selection.totalCases
+      ? t('app.selectedScope', { selected: selection.caseIds.length, total: selection.totalCases }) : '';
+  }
+  function renderCaseSelection() {
+    const host = $('case-selection-list'); replace(host);
+    for (const item of app.draft?.cases || []) {
+      const label = el('label', 'case-selection-item');
+      const input = el('input'); input.type = 'checkbox'; input.dataset.caseId = item.id; input.checked = app.selectedCaseIds.has(item.id);
+      label.append(input, el('span', '', `${item.id} · ${item.title}`)); host.append(label);
+    }
+    updateCaseSelection();
+  }
+  function updateCaseSelection() {
+    const total = app.draft?.cases?.length || 0;
+    $('case-selection-summary').textContent = t('scenario.selectionSummary', { selected: selectedCases().length, total });
+    const disabled = !app.draft || app.busy || !!app.state?.active;
+    for (const input of $('case-selection-list').querySelectorAll('input[data-case-id]')) {
+      input.checked = app.selectedCaseIds.has(input.dataset.caseId);
+      input.disabled = disabled;
+    }
+    $('select-all-cases').disabled = disabled || selectedCases().length === total;
+    $('clear-case-selection').disabled = disabled || !app.selectedCaseIds.size;
+  }
+  function changeCaseSelection(ids) {
+    if (!app.draft || app.busy || app.state?.active) return;
+    const next = new Set(ids);
+    if (next.size === app.selectedCaseIds.size && [...next].every((id) => app.selectedCaseIds.has(id))) return;
+    app.selectedCaseIds = next; $('review-checkbox').checked = false; readiness();
+  }
   function canDownloadSavedCases() {
     return Boolean(app.draft && app.script && app.savedFile && app.savedHash && !app.dirty && !app.stale && !app.busy && !hasUnsavedScenario());
   }
@@ -68,7 +99,8 @@
   function readiness() {
     const active = app.state?.active;
     const ready = !!app.draft && !!app.script && !app.stale && !app.dirty;
-    $('run-btn').disabled = !app.connected || !ready || !app.savedFile || !app.savedHash || !$('review-checkbox').checked || !compatibleTarget() || !!active || app.busy;
+    $('run-btn').disabled = !app.connected || !ready || !app.savedFile || !app.savedHash || !selectedCases().length || !$('review-checkbox').checked || !compatibleTarget() || !!active || app.busy;
+    updateCaseSelection();
     $('save-btn').disabled = !ready || app.busy;
     $('suite-download').disabled = !canDownloadSavedCases();
     $('flow-download').disabled = !canDownloadSourceMarkdown();
@@ -95,12 +127,13 @@
       : app.dirty ? 'app.dirty'
       : !ready ? 'app.needValidated'
       : !app.savedFile || !app.savedHash ? 'app.needSaved'
+      : !selectedCases().length ? 'app.needCaseSelection'
       : !$('target-select').value ? 'app.needTarget'
       : !compatibleTarget() ? 'app.platformMismatch'
       : !$('review-checkbox').checked ? 'app.needReview' : 'app.ready');
-    const cases = app.draft?.cases || [];
+    const cases = selectedCases();
     const blocked = cases.filter((item) => item.questions?.length || (item.steps.some((step) => ['act', 'assertAgent'].includes(step.type)) && !app.state?.models?.agent?.keyReady)).length;
-    $('case-readiness').textContent = ready ? t('app.caseReadiness', { total: cases.length, ready: cases.length - blocked, blocked, hint: blocked ? t('app.blockedHint') : '' }) : '';
+    $('case-readiness').textContent = ready ? t(cases.length < (app.draft?.cases.length || 0) ? 'app.selectedCaseReadiness' : 'app.caseReadiness', { total: cases.length, ready: cases.length - blocked, blocked, hint: blocked ? t('app.blockedHint') : '' }) : '';
     const pill = $('draft-status');
     pill.textContent = t(app.stale ? 'app.regenerate' : app.dirty ? 'app.revalidate' : ready ? 'app.validated' : 'scenario.noDraft');
     pill.className = 'status-pill' + (ready ? ' ready' : app.stale || app.dirty ? ' dirty' : '');
@@ -169,7 +202,8 @@
     $('suite-editor').value = JSON.stringify(suite, null, 2);
     $('scenario-platform').value = suite.platform || 'web';
     $('review-checkbox').checked = false;
-    summarize(suite); readiness();
+    app.selectedCaseIds = new Set((suite.cases || []).map((item) => item.id));
+    summarize(suite); renderCaseSelection(); readiness();
   }
   function targetOptions() {
     const selected = $('target-select').value;
@@ -236,9 +270,102 @@
     if (!matchingRuns.length) { host.append(el('p', 'empty', t(query ? 'app.historyNoSearchMatches' : 'app.historyNoStatusMatches'))); return; }
     for (const run of matchingRuns) {
       const row = el('div', 'list-row'); const copy = el('div'); copy.append(el('strong', '', `${run.suiteId} · ${i18n.status(run.status)}`), el('small', '', t('app.runMeta', { date: formatDate(run.startedAt), target: targetDisplay(run.target), passed: run.passedCount ?? 0, total: run.caseCount ?? 0, id: run.runId })));
+      const scope = selectionScope(run.selection); if (scope) copy.append(el('small', 'selection-scope', scope));
       const button = el('button', 'button', t('app.viewReport')); button.type = 'button'; button.disabled = run.status === 'running' || run.status === 'stopping'; button.addEventListener('click', () => loadReport(run.runId)); row.append(copy, button); host.append(row);
     }
   }
+  const comparisonCategories = ['newly-failed', 'now-passed', 'changed', 'unchanged', 'added', 'missing'];
+  const comparisonCategoryKeys = { 'newly-failed': 'comparison.newlyFailed', 'now-passed': 'comparison.nowPassed', changed: 'comparison.changed', unchanged: 'comparison.unchanged', added: 'comparison.added', missing: 'comparison.missing' };
+  const comparisonWarningKeys = { 'suite-changed': 'comparison.warningSuite', 'reverse-order': 'comparison.warningReverse', 'incomplete-run': 'comparison.warningIncomplete', 'mobile-identity-unverified': 'comparison.warningMobileIdentity', 'partial-run': 'comparison.warningPartial', 'selection-changed': 'comparison.warningSelectionChanged' };
+  function comparisonPair() { return { baseline: $('compare-baseline').value, current: $('compare-current').value }; }
+  function comparisonValid() { const { baseline, current } = comparisonPair(); return !!baseline && !!current && baseline !== current; }
+  function comparisonStatus(key, params = {}, error = false) {
+    app.comparisonStatus = key; app.comparisonStatusParams = params;
+    const node = $('comparison-status'); node.textContent = t(key, params); node.classList.toggle('report-errors', error);
+  }
+  function comparisonControls() {
+    const { baseline, current } = comparisonPair();
+    $('compare-btn').disabled = !comparisonValid() || app.comparisonBusy;
+    $('compare-swap').disabled = !baseline || !current || baseline === current;
+    const ready = !!app.comparison && comparisonValid() && app.comparison.baseline.runId === baseline && app.comparison.current.runId === current;
+    for (const id of ['comparison-md', 'comparison-json', 'compare-open-baseline', 'compare-open-current']) $(id).disabled = !ready;
+    $('comparison-results').hidden = !ready;
+  }
+  function clearComparison() {
+    app.comparisonRequest += 1; app.comparisonBusy = false; app.comparison = null; app.comparisonMarkdown = '';
+    $('comparison-summary').replaceChildren(); $('comparison-warnings').replaceChildren(); $('comparison-content').replaceChildren();
+    comparisonStatus('comparison.selectBoth'); comparisonControls();
+  }
+  function renderComparisonOptions() {
+    const runs = (app.state?.runs || []).slice(0, 50);
+    let missing = false;
+    for (const id of ['compare-baseline', 'compare-current']) {
+      const select = $(id); const selected = select.value;
+      select.replaceChildren(el('option', '', t('comparison.choose'))); select.firstChild.value = '';
+      for (const run of runs) {
+        const option = el('option', '', `${t('comparison.runLabel', { id: run.runId, shortId: run.runId.slice(-8), date: formatDate(run.startedAt), suite: run.suiteId, target: targetDisplay(run.target), status: i18n.status(run.status) })}${selectionScope(run.selection) ? ` · ${selectionScope(run.selection)}` : ''}`);
+        option.value = run.runId; select.append(option);
+      }
+      select.value = runs.some((run) => run.runId === selected) ? selected : '';
+      if (selected && !select.value) missing = true;
+    }
+    if (missing) clearComparison();
+    if (!runs.length && !app.comparison) comparisonStatus('comparison.noRuns');
+    comparisonControls();
+  }
+  async function compareRuns() {
+    if (!comparisonValid()) return;
+    const { baseline, current } = comparisonPair(); const locale = i18n.locale(); const request = ++app.comparisonRequest;
+    app.comparisonBusy = true; app.comparison = null; app.comparisonMarkdown = '';
+    comparisonStatus('comparison.loading'); comparisonControls();
+    try {
+      const result = await api(`/api/comparison?baseline=${encodeURIComponent(baseline)}&current=${encodeURIComponent(current)}`);
+      if (request !== app.comparisonRequest || locale !== i18n.locale() || baseline !== $('compare-baseline').value || current !== $('compare-current').value) return;
+      app.comparison = result.comparison; app.comparisonMarkdown = result.markdown;
+      comparisonStatus('comparison.ready'); renderComparison();
+    } catch (error) {
+      if (request === app.comparisonRequest && locale === i18n.locale() && baseline === $('compare-baseline').value && current === $('compare-current').value) comparisonStatus('comparison.error', { message: error instanceof Error ? error.message : String(error) }, true);
+    } finally { if (request === app.comparisonRequest) { app.comparisonBusy = false; comparisonControls(); } }
+  }
+  function renderComparison() {
+    const result = app.comparison; if (!result) { comparisonControls(); return; }
+    const warnings = $('comparison-warnings'); replace(warnings);
+    for (const code of result.warnings || []) warnings.append(el('p', 'comparison-warning', t(comparisonWarningKeys[code] || 'comparison.warningUnknown', { code })));
+    const summary = $('comparison-summary'); replace(summary);
+    const meta = el('p', 'comparison-meta', `${result.baseline.runId} · ${formatDate(result.baseline.startedAt)}${selectionScope(result.baseline.selection) ? ` · ${selectionScope(result.baseline.selection)}` : ''} → ${result.current.runId} · ${formatDate(result.current.startedAt)}${selectionScope(result.current.selection) ? ` · ${selectionScope(result.current.selection)}` : ''}`); summary.append(meta);
+    const counts = el('div', 'comparison-counts');
+    for (const category of comparisonCategories) {
+      const item = el('div', 'comparison-count');
+      item.append(el('strong', '', String(result.counts?.[category] ?? 0)), el('span', '', t(comparisonCategoryKeys[category]))); counts.append(item);
+    }
+    summary.append(counts);
+    const host = $('comparison-content'); replace(host);
+    const selected = $('comparison-filter').value;
+    const cases = (result.cases || []).filter((item) => !selected || item.category === selected);
+    if (!cases.length) host.append(el('p', 'empty', t('comparison.noCases')));
+    for (const item of cases) {
+      const section = el('section', 'case-report comparison-case'); section.dataset.category = item.category;
+      section.append(el('h3', '', `${item.id} · ${t(comparisonCategoryKeys[item.category] || 'comparison.changed')} · ${t('comparison.pair', { baseline: item.baseline ? i18n.status(item.baseline.status) : t('comparison.notPresent'), current: item.current ? i18n.status(item.current.status) : t('comparison.notPresent') })}`));
+      for (const [side, entry] of [['baseline', item.baseline], ['current', item.current]]) {
+        if (!entry) continue;
+        section.append(el('p', '', t(side === 'baseline' ? 'comparison.baselineCase' : 'comparison.currentCase', { title: entry.title, status: i18n.status(entry.status) })));
+        if (entry.expected?.length) { const list = el('ul', 'compact-list'); for (const value of entry.expected) list.append(el('li', '', String(value))); section.append(el('p', '', t('app.expected')), list); }
+        if (entry.reason) section.append(el('p', '', t('comparison.reason', { value: entry.reason })));
+      }
+      host.append(section);
+    }
+    comparisonControls();
+  }
+  async function downloadComparisonMarkdown() {
+    if (!app.comparison || !comparisonValid()) return;
+    const { baseline, current } = comparisonPair(); const locale = i18n.locale(); const request = app.comparisonRequest;
+    try {
+      const result = await api(`/api/comparison?baseline=${encodeURIComponent(baseline)}&current=${encodeURIComponent(current)}`);
+      if (request !== app.comparisonRequest || locale !== i18n.locale() || baseline !== $('compare-baseline').value || current !== $('compare-current').value || !app.comparison) return;
+      app.comparisonMarkdown = result.markdown;
+      download(`${baseline}-to-${current}.md`, result.markdown, 'text/markdown');
+    } catch (error) { if (request === app.comparisonRequest && locale === i18n.locale()) comparisonStatus('comparison.error', { message: error instanceof Error ? error.message : String(error) }, true); }
+  }
   function renderActive() {
     const active = app.state?.active;
     $('active-indicator').textContent = !app.connected ? t('app.disconnected') : active ? `${t(active.status === 'stopping' ? 'app.activeStopping' : active.kind === 'plan' ? 'app.activePlanning' : 'app.activeRunning')}${active.kind === 'run' ? ` · ${active.title}` : ''}` : t(app.planning ? 'app.requestingPlan' : 'top.waiting');
@@ -258,7 +385,7 @@
     const libraryChanged = JSON.stringify(app.state?.suites) !== JSON.stringify(state.suites);
     const historyChanged = JSON.stringify(app.state?.runs) !== JSON.stringify(state.runs);
     app.state = state; app.connected = true;
-    renderActive(); if (libraryChanged) renderLibrary(); if (historyChanged) renderHistory();
+    renderActive(); if (libraryChanged) renderLibrary(); if (historyChanged) { renderHistory(); renderComparisonOptions(); }
     if (full || initialize) { targetOptions(); modelForms(); }
     if (previousActive?.kind === 'run' && !state.active) { if (state.lastError) notice(state.lastError, true); else noticeKey('app.runEnded'); }
     if (state.lastError && state.lastError !== app.lastError) { app.lastError = state.lastError; notice(state.lastError, true); }
@@ -331,7 +458,7 @@
     noticeKey('app.compileComplete');
   }); }
   async function save() { await work(async () => { if (!app.draft || app.dirty || app.stale) throw localizedError('app.needValidated'); const body = { suite: app.draft }; if (!app.boundSource && app.sourceFlow && (app.origin === 'imported' ? editableFlow(app.sourceFlow) === $('flow-input').value : app.sourceFlow === $('flow-input').value.trim())) body.flow = app.sourceFlow; const result = await api('/api/save', body); const saved = await api(`/api/suite?file=${encodeURIComponent(result.file)}`); $('flow-input').value = saved.flow || ''; setDraft(saved.suite, saved.script, 'library', saved.flow || '', result.file, saved.suiteHash || ''); noticeKey('app.savedSuite', { file: result.file }); await refresh(false); }); }
-  async function run() { await work(async () => { if (!app.draft || !app.script || !app.savedFile || !app.savedHash || app.dirty || app.stale || !$('review-checkbox').checked || !compatibleTarget()) throw localizedError('app.runNotReady'); const target = selectedTarget(); const result = await api('/api/run', { suite: app.savedFile, suiteHash: app.savedHash, targetName: target.name, targetFingerprint: target.targetFingerprint }); noticeKey('app.runStarted', { id: result.operationId }); await refresh(false); }); }
+  async function run() { await work(async () => { if (!app.draft || !app.script || !app.savedFile || !app.savedHash || app.dirty || app.stale || !selectedCases().length || !$('review-checkbox').checked || !compatibleTarget()) throw localizedError('app.runNotReady'); const target = selectedTarget(); const body = { suite: app.savedFile, suiteHash: app.savedHash, targetName: target.name, targetFingerprint: target.targetFingerprint }; if (selectedCases().length < app.draft.cases.length) body.caseIds = selectedCases().map((item) => item.id); const result = await api('/api/run', body); noticeKey('app.runStarted', { id: result.operationId }); await refresh(false); }); }
   async function stop() {
     if (app.stopping || !app.state?.active) return;
     if (app.state.active.kind === 'plan' && app.planning) app.planRequest += 1;
@@ -355,7 +482,7 @@
     const report = app.report; if (!report) return;
     $('report-heading').textContent = `${report.runId} · ${i18n.status(report.status)} · ${targetDisplay(report.target)}`;
     const host = $('report-content'); replace(host);
-    const meta = el('div', 'report-meta'); for (const value of [t('app.reportStatus', { status: i18n.status(report.status) }), t('app.reportTarget', { target: targetDisplay(report.target) }), t('app.reportStarted', { date: formatDate(report.startedAt) }), t('app.reportFinished', { date: formatDate(report.finishedAt) })]) meta.append(el('span', '', value)); host.append(meta);
+    const meta = el('div', 'report-meta'); for (const value of [t('app.reportStatus', { status: i18n.status(report.status) }), t('app.reportTarget', { target: targetDisplay(report.target) }), t('app.reportStarted', { date: formatDate(report.startedAt) }), t('app.reportFinished', { date: formatDate(report.finishedAt) })]) meta.append(el('span', '', value)); const scope = selectionScope(report.selection); if (scope) meta.append(el('span', 'selection-scope', scope)); host.append(meta);
     if (report.usage) host.append(el('p', 'hint', t('app.usage', { tokens: report.usage.modelTokens ?? t('app.unavailable'), cost: typeof report.usage.estimatedCostUsd === 'number' ? `$${report.usage.estimatedCostUsd.toFixed(4)}` : t('app.unavailable') })));
     if (report.errors?.length) host.append(el('p', 'report-errors', report.errors.join('\n')));
     for (const item of report.cases || []) {
@@ -405,8 +532,9 @@
       const input = form?.elements.namedItem(focus.name);
       if (input) { input.focus(); if (Number.isInteger(focus.start)) input.setSelectionRange(focus.start, focus.end); }
     }
-    summarize(app.draft, true);
-    renderActive(); targetDescription(); renderLibrary(); renderHistory(); renderReport();
+    summarize(app.draft, true); renderCaseSelection();
+    renderActive(); targetDescription(); renderLibrary(); renderHistory(); renderComparisonOptions(); renderComparison(); renderReport();
+    if (app.comparisonStatus) comparisonStatus(app.comparisonStatus, app.comparisonStatusParams || {}, app.comparisonStatus === 'comparison.error');
     app.reportMarkdown = '';
     if (app.notice) $('notice').textContent = t(app.notice.key, app.notice.params);
     else if (!$('notice').hidden) notice(''); // A server error has no stable code to translate; the next request uses the selected language.
@@ -417,6 +545,14 @@
     $('library-search').addEventListener('input', renderLibrary);
     $('history-search').addEventListener('input', renderHistory);
     $('history-status-filter').addEventListener('change', renderHistory);
+    for (const id of ['compare-baseline', 'compare-current']) $(id).addEventListener('change', clearComparison);
+    $('compare-btn').addEventListener('click', compareRuns);
+    $('compare-swap').addEventListener('click', () => { const pair = comparisonPair(); $('compare-baseline').value = pair.current; $('compare-current').value = pair.baseline; clearComparison(); });
+    $('comparison-filter').addEventListener('change', renderComparison);
+    $('comparison-md').addEventListener('click', downloadComparisonMarkdown);
+    $('comparison-json').addEventListener('click', () => { if (app.comparison && comparisonValid()) { const { baseline, current } = comparisonPair(); download(`${baseline}-to-${current}.json`, JSON.stringify(app.comparison, null, 2), 'application/json'); } });
+    $('compare-open-baseline').addEventListener('click', () => { if (app.comparison && comparisonValid()) loadReport(app.comparison.baseline.runId); });
+    $('compare-open-current').addEventListener('click', () => { if (app.comparison && comparisonValid()) loadReport(app.comparison.current.runId); });
     $('nav-toggle').addEventListener('click', () => { const open = $('sidebar').classList.toggle('nav-open'); $('nav-toggle').setAttribute('aria-expanded', String(open)); });
     $('library-shortcut').addEventListener('click', () => view('library'));
     $('new-draft-btn').addEventListener('click', () => {
@@ -424,10 +560,10 @@
       const json = $('suite-editor').value;
       const unsavedJson = json.trim() && (!app.savedFile || json !== JSON.stringify(app.draft, null, 2));
       if (unsavedJson && !confirmScenarioReplacement('app.confirmNewDraft')) return;
-      app.draft = null; app.script = ''; app.savedFile = ''; app.savedHash = '';
+      app.draft = null; app.selectedCaseIds = new Set(); app.script = ''; app.savedFile = ''; app.savedHash = '';
       app.origin = 'none'; app.sourceFlow = ''; app.boundSource = null; app.stale = false; app.dirty = false;
       $('suite-editor').value = ''; $('review-checkbox').checked = false;
-      summarize(null); readiness();
+      summarize(null); renderCaseSelection(); readiness();
       noticeKey('app.newDraftNotice');
       $('suite-editor').focus();
     });
@@ -435,6 +571,9 @@
     $('scenario-platform').addEventListener('change', () => { app.planRequest += 1; if (app.draft) { app.stale = true; app.savedHash = ''; } $('review-checkbox').checked = false; readiness(); });
     $('suite-editor').addEventListener('input', () => { app.dirty = true; app.script = ''; app.savedFile = ''; app.savedHash = ''; if (app.origin === 'none') app.origin = 'manual'; $('review-checkbox').checked = false; summarize(null); readiness(); });
     $('review-checkbox').addEventListener('change', readiness); $('target-select').addEventListener('change', () => { $('review-checkbox').checked = false; targetDescription(); });
+    $('case-selection-list').addEventListener('change', (event) => { const input = event.target.closest('input[data-case-id]'); if (!input) return; const next = new Set(app.selectedCaseIds); if (input.checked) next.add(input.dataset.caseId); else next.delete(input.dataset.caseId); changeCaseSelection(next); });
+    $('select-all-cases').addEventListener('click', () => changeCaseSelection((app.draft?.cases || []).map((item) => item.id)));
+    $('clear-case-selection').addEventListener('click', () => changeCaseSelection([]));
     $('plan-btn').addEventListener('click', generate); $('prompt-btn').addEventListener('click', prompt); $('compile-btn').addEventListener('click', compile); $('save-btn').addEventListener('click', save); $('run-btn').addEventListener('click', run); $('stop-btn').addEventListener('click', stop);
     $('import-btn').addEventListener('click', importFiles);
     $('global-stop-btn').addEventListener('click', stop);
@@ -447,7 +586,7 @@
     $('target-form').addEventListener('submit', saveTarget);
     $('target-kind').addEventListener('change', targetFields); targetFields();
     $('language-select').addEventListener('change', (event) => i18n.setLocale(event.currentTarget.value));
-    i18n.onChange(renderLanguage);
+    i18n.onChange(() => { app.comparisonRequest += 1; if (app.comparisonBusy || app.comparisonStatus === 'comparison.error') comparisonStatus(app.comparison ? 'comparison.ready' : 'comparison.selectBoth'); app.comparisonBusy = false; renderLanguage(); comparisonControls(); });
     let refreshing = false;
     const poll = async () => { if (document.hidden || refreshing) return; refreshing = true; try { await refresh(false); } catch { /* Connection state offers explicit retry; avoid repeated alerts. */ } finally { refreshing = false; } };
     document.addEventListener('visibilitychange', poll);

package/dist/src/ui/public/i18n.js

@@ -56,6 +56,12 @@
     'scenario.newDraft': ['New JSON draft', '새 JSON 초안'],
     'scenario.compile': ['Validate JSON · Generate script', 'JSON 검증 · 스크립트 생성'],
     'scenario.script': ['Run script', '실행 스크립트'],
+    'scenario.fullSuiteScript': ['Script preview and download include the full suite, regardless of the run selection.', '스크립트 미리보기와 다운로드에는 실행 선택과 관계없이 전체 스위트가 포함됩니다.'],
+    'scenario.selectionTitle': ['Cases to run', '실행할 케이스'],
+    'scenario.selectionSummary': ['{selected} selected / {total} total', '선택 {selected}개 / 전체 {total}개'],
+    'scenario.selectionHint': ['Each selected case must establish its own starting state. Excluded cases are not assessed.', '선택한 각 케이스는 자체 시작 상태를 설정해야 합니다. 제외한 케이스는 평가하지 않습니다.'],
+    'scenario.selectAllCases': ['Select all', '전체 선택'],
+    'scenario.clearSelection': ['Clear selection', '선택 해제'],
     'scenario.downloadScript': ['Download script ↓', '스크립트 다운로드 ↓'],
     'scenario.scriptPlaceholder': ['The script for validated cases will appear here.', '검증된 케이스의 스크립트가 여기에 표시됩니다.'],
     'scenario.runTitle': ['Review, then run', '검토 후 실행'],
@@ -83,6 +89,47 @@
     'history.searchPlaceholder': ['Suite ID, run ID, or target name', '스위트 ID, 실행 ID 또는 대상 이름'],
     'history.statusFilter': ['Run status', '실행 상태'],
     'history.statusAll': ['All statuses', '전체 상태'],
+    'comparison.title': ['Compare two runs', '실행 2건 비교'],
+    'comparison.help': ['Choose a baseline and current run to compare case outcomes. Inspect detailed reports for evidence.', '기준 실행과 현재 실행을 선택해 케이스 결과를 비교하세요. 증거는 상세 보고서에서 확인하세요.'],
+    'comparison.baseline': ['Baseline run', '기준 실행'],
+    'comparison.current': ['Current run', '현재 실행'],
+    'comparison.choose': ['Choose a run', '실행 선택'],
+    'comparison.compare': ['Compare', '비교하기'],
+    'comparison.swap': ['Swap runs', '실행 순서 바꾸기'],
+    'comparison.filter': ['Show cases', '케이스 표시'],
+    'comparison.all': ['All categories', '전체 분류'],
+    'comparison.newlyFailed': ['Newly failed', '새로 실패'],
+    'comparison.nowPassed': ['Now passed', '이제 통과'],
+    'comparison.changed': ['Changed status', '상태 변경'],
+    'comparison.unchanged': ['Same status', '상태 동일'],
+    'comparison.added': ['Added to current', '현재에만 있음'],
+    'comparison.missing': ['Missing from current', '현재 기록에 없음'],
+    'comparison.downloadMarkdown': ['Download comparison Markdown', '비교 Markdown 다운로드'],
+    'comparison.downloadJson': ['Download comparison JSON', '비교 JSON 다운로드'],
+    'comparison.openBaseline': ['View baseline report', '기준 실행 보고서 보기'],
+    'comparison.openCurrent': ['View current report', '현재 실행 보고서 보기'],
+    'comparison.selectBoth': ['Select two different runs to compare.', '서로 다른 실행 2건을 선택하세요.'],
+    'comparison.noRuns': ['No recent runs available to compare.', '비교할 최근 실행이 없습니다.'],
+    'comparison.loading': ['Comparing selected runs…', '선택한 실행을 비교하고 있습니다…'],
+    'comparison.limit': ['Choose from the 50 most recent runs. Comparison counts describe observed statuses; they do not establish failure cause or prove a defect was fixed.', '최근 실행 50건에서 선택하세요. 비교 수치는 관찰된 상태만 나타내며 실패 원인이나 결함 수정 여부를 입증하지 않습니다.'],
+    'comparison.ready': ['Comparison ready. Categories describe observed case status changes.', '비교 결과가 준비됐습니다. 분류는 관찰된 케이스 상태 차이입니다.'],
+    'comparison.noCases': ['No cases in this category.', '이 분류에 해당하는 케이스가 없습니다.'],
+    'comparison.warningSuite': ['Suite content changed. Steps or expectations may differ, so these counts do not establish equivalent regressions or fixes.', '스위트 내용이 바뀌었습니다. 단계나 기대 결과가 다를 수 있으므로 이 수치만으로 같은 조건의 회귀나 수정이라고 판단할 수 없습니다.'],
+    'comparison.warningReverse': ['The selected current run started before the baseline run.', '선택한 현재 실행이 기준 실행보다 먼저 시작됐습니다.'],
+    'comparison.warningIncomplete': ['At least one run is incomplete. Interpret case outcomes with its detailed report.', '완료되지 않은 실행이 있습니다. 상세 보고서와 함께 결과를 해석하세요.'],
+    'comparison.warningMobileIdentity': ['Mobile comparison matches recorded app and device settings. It does not verify that both runs used the same physical device.', '모바일 비교는 기록된 앱과 기기 설정을 기준으로 합니다. 두 실행이 같은 실제 기기를 사용했는지는 확인하지 않습니다.'],
+    'comparison.warningPartial': ['At least one run assessed only selected cases. Missing outcomes do not mean those cases passed.', '하나 이상의 실행에서 선택한 케이스만 평가했습니다. 결과가 없는 케이스를 통과로 해석할 수 없습니다.'],
+    'comparison.warningSelectionChanged': ['The runs selected different case sets. Compare only outcomes for cases assessed in both runs.', '두 실행에서 선택한 케이스가 다릅니다. 두 실행 모두에서 평가한 케이스의 결과만 비교하세요.'],
+    'comparison.warningUnknown': ['Comparison warning: {code}', '비교 주의: {code}'],
+    'comparison.pair': ['{baseline} → {current}', '{baseline} → {current}'],
+    'comparison.notPresent': ['not present', '없음'],
+    'comparison.baselineCase': ['Baseline: {title} · {status}', '기준: {title} · {status}'],
+    'comparison.currentCase': ['Current: {title} · {status}', '현재: {title} · {status}'],
+    'comparison.expected': ['Expected: {value}', '기대 결과: {value}'],
+    'comparison.reason': ['Reason: {value}', '사유: {value}'],
+    'comparison.count': ['{category}: {count}', '{category}: {count}'],
+    'comparison.error': ['Comparison failed: {message}', '비교 실패: {message}'],
+    'comparison.runLabel': ['{date} · {suite} · {shortId} · {target} · {status} · {id}', '{date} · {suite} · {shortId} · {target} · {status} · {id}'],
     'history.report': ['Detailed report', '상세 보고서'],
     'history.downloadMarkdown': ['Download Markdown', 'Markdown 다운로드'],
     'history.downloadJson': ['Download JSON', 'JSON 다운로드'],
@@ -153,7 +200,10 @@
     'app.needTarget': ['Select a run target.', '실행 대상을 선택하세요.'],
     'app.platformMismatch': ['The case platform and target type must match.', '케이스 플랫폼과 대상 유형이 일치해야 합니다.'],
     'app.needReview': ['Review the contents, then select the checkbox.', '내용 검토 후 확인란을 선택하세요.'],
+    'app.needCaseSelection': ['Select at least one case to run.', '실행할 케이스를 하나 이상 선택하세요.'],
     'app.ready': ['Ready to run.', '실행할 준비가 됐습니다.'],
+    'app.selectedScope': ['Selected {selected}/{total} cases · excluded cases not assessed', '선택 {selected}/{total}개 · 제외한 케이스는 평가하지 않음'],
+    'app.selectedCaseReadiness': ['{total} selected · {ready} runnable · {blocked} blocked before run{hint}', '선택 {total}개 · 실행 가능 {ready}개 · 사전 차단 {blocked}개{hint}'],
     'app.caseReadiness': ['{total} total · {ready} runnable · {blocked} blocked before run{hint}', '전체 {total}개 · 실행 가능 {ready}개 · 사전 차단 {blocked}개{hint}'],
     'app.blockedHint': [' — Check open questions or run agent settings.', ' — 확인 질문이나 실행 모델 설정을 확인하세요.'],
     'app.regenerate': ['Regenerate required', '재생성 필요'],

package/dist/src/ui/public/index.html

@@ -72,6 +72,7 @@
                     <textarea id="suite-editor" class="code-editor" rows="13" spellcheck="false" placeholder="Load a local demo case from the library or enter suite JSON." data-i18n-placeholder="scenario.suitePlaceholder"></textarea>
                     <div class="actions"><button id="new-draft-btn" type="button" class="button quiet" data-i18n="scenario.newDraft">New JSON draft</button><button id="compile-btn" type="button" class="button" data-i18n="scenario.compile">Validate JSON · Generate script</button></div>
                     <div class="script-head"><h3 data-i18n="scenario.script">Run script</h3><button type="button" id="script-download" class="text-button" disabled data-i18n="scenario.downloadScript">Download script ↓</button></div>
+                    <p class="hint" data-i18n="scenario.fullSuiteScript">Script preview and download include the full suite, regardless of the run selection.</p>
                     <pre id="script-preview" class="script-preview" data-i18n="scenario.scriptPlaceholder">The script for validated cases will appear here.</pre>
                   </div>
                 </details>
@@ -81,7 +82,7 @@
               <div class="section-head"><span class="section-number">03</span><div><h2 id="run-title" data-i18n="scenario.runTitle">Review, then run</h2><p data-i18n="scenario.runHelp">Select a target and confirm you have reviewed the cases.</p></div></div>
               <div class="execution-grid">
                 <div class="target-field"><label for="target-select" class="field-label" data-i18n="scenario.target">Run target</label><select id="target-select"><option value="" data-i18n="scenario.selectTarget">Select a target</option></select><p id="target-description" class="hint" data-i18n="scenario.targetHint">You can add a target in Connections.</p><p id="mobile-setup-hint" class="hint" hidden data-i18n="scenario.mobileSetup">For iOS, prepare Xcode, a simulator or signed device, and app signing. For Android, prepare the Android SDK and an emulator or authorized device. Configuration alone does not verify device access.</p></div>
-                <div class="execution-confirm"><p id="case-readiness" class="hint"></p><label class="review-line"><input type="checkbox" id="review-checkbox"><span data-i18n="scenario.reviewConfirm">I have reviewed the requirements, case steps, and expected results.</span></label><div class="run-bar"><span id="run-readiness" data-i18n="scenario.runInitial">Validated cases and a run target are required.</span><div class="actions"><button type="button" id="stop-btn" class="button quiet" hidden data-i18n="scenario.stop">Stop run</button><button type="button" id="run-btn" class="button primary" disabled><span data-i18n="scenario.run">Run QA</span><span aria-hidden="true">→</span></button></div></div></div>
+                <div class="execution-confirm"><div class="case-selection"><div class="case-selection-head"><h3 id="case-selection-title" data-i18n="scenario.selectionTitle">Cases to run</h3><span id="case-selection-summary" role="status" aria-live="polite"></span></div><p class="hint" data-i18n="scenario.selectionHint">Each selected case must establish its own starting state. Excluded cases are not assessed.</p><div class="actions"><button type="button" id="select-all-cases" class="button quiet" data-i18n="scenario.selectAllCases">Select all</button><button type="button" id="clear-case-selection" class="button quiet" data-i18n="scenario.clearSelection">Clear selection</button></div><div id="case-selection-list" role="group" aria-labelledby="case-selection-title"></div></div><p id="case-readiness" class="hint"></p><label class="review-line"><input type="checkbox" id="review-checkbox"><span data-i18n="scenario.reviewConfirm">I have reviewed the requirements, case steps, and expected results.</span></label><div class="run-bar"><span id="run-readiness" data-i18n="scenario.runInitial">Validated cases and a run target are required.</span><div class="actions"><button type="button" id="stop-btn" class="button quiet" hidden data-i18n="scenario.stop">Stop run</button><button type="button" id="run-btn" class="button primary" disabled><span data-i18n="scenario.run">Run QA</span><span aria-hidden="true">→</span></button></div></div></div>
               </div>
             </section>
           </div>
@@ -93,7 +94,17 @@
         <section id="view-history" class="view" hidden>
           <div class="page-heading"><p class="eyebrow" data-i18n="history.eyebrow">03 / RUNS</p><h1 data-i18n="nav.history">Run history</h1><p data-i18n="history.intro">Only runs that actually started appear here. Once results are saved, you can view the detailed report.</p></div>
           <section class="list-section"><div class="section-head"><span class="section-number">01</span><div><h2 data-i18n="history.title">Runs</h2><p data-i18n="history.help">Check the completed report for the final status.</p></div></div><div class="section-body form-stack"><label for="history-search" data-i18n="history.searchLabel">Search runs</label><input id="history-search" type="search" aria-controls="history-list" placeholder="Suite ID, run ID, or target name" data-i18n-placeholder="history.searchPlaceholder"><label for="history-status-filter" data-i18n="history.statusFilter">Run status</label><select id="history-status-filter" aria-controls="history-list"><option value="" data-i18n="history.statusAll">All statuses</option><option value="passed" data-i18n="status.passed">passed</option><option value="failed" data-i18n="status.failed">failed</option><option value="blocked" data-i18n="status.blocked">blocked</option><option value="error" data-i18n="status.error">error</option><option value="interrupted" data-i18n="status.interrupted">interrupted</option></select><div id="history-list" class="list-body"></div></div></section>
-          <section id="report-panel" class="report-panel" hidden><div class="section-head"><span class="section-number">02</span><div><h2 data-i18n="history.report">Detailed report</h2><p id="report-heading"></p></div></div><div class="section-body"><div class="actions"><button type="button" id="report-md" class="button" data-i18n="history.downloadMarkdown">Download Markdown</button><button type="button" id="report-json" class="button quiet" data-i18n="history.downloadJson">Download JSON</button></div><p class="hint" data-i18n="history.evidenceHint">The report summarizes results. Open or download screenshots and recordings from each attempt. Evidence files are not included in report downloads.</p><div id="report-content"></div></div></section>
+          <section id="comparison-panel" class="comparison-panel" aria-labelledby="comparison-title">
+            <div class="section-head"><span class="section-number">02</span><div><h2 id="comparison-title" data-i18n="comparison.title">Compare two runs</h2><p data-i18n="comparison.help">Choose a baseline and current run to compare case outcomes. This does not replace either detailed report.</p></div></div>
+            <div class="section-body">
+              <p class="hint" data-i18n="comparison.limit">Choose from the 50 most recent runs. Comparison counts describe observed statuses; they do not establish failure cause or prove a defect was fixed.</p>
+              <div class="comparison-selects"><div><label for="compare-baseline" data-i18n="comparison.baseline">Baseline run</label><select id="compare-baseline" aria-controls="comparison-content"><option value="" data-i18n="comparison.choose">Choose a run</option></select></div><div><label for="compare-current" data-i18n="comparison.current">Current run</label><select id="compare-current" aria-controls="comparison-content"><option value="" data-i18n="comparison.choose">Choose a run</option></select></div></div>
+              <div class="actions comparison-actions"><button type="button" id="compare-btn" class="button primary" data-i18n="comparison.compare" disabled>Compare</button><button type="button" id="compare-swap" class="button quiet" data-i18n="comparison.swap" disabled>Swap runs</button></div>
+              <p id="comparison-status" class="hint" role="status" aria-live="polite"></p>
+              <div id="comparison-results" hidden><div id="comparison-warnings"></div><div id="comparison-summary"></div><div class="comparison-filter-row"><label for="comparison-filter" data-i18n="comparison.filter">Show cases</label><select id="comparison-filter" aria-controls="comparison-content"><option value="" data-i18n="comparison.all">All categories</option><option value="newly-failed" data-i18n="comparison.newlyFailed">Newly failed</option><option value="now-passed" data-i18n="comparison.nowPassed">Now passed</option><option value="changed" data-i18n="comparison.changed">Changed status</option><option value="unchanged" data-i18n="comparison.unchanged">Same status</option><option value="added" data-i18n="comparison.added">Added to current</option><option value="missing" data-i18n="comparison.missing">Missing from current</option></select></div><div class="actions comparison-actions"><button type="button" id="comparison-md" class="button" data-i18n="comparison.downloadMarkdown" disabled>Download comparison Markdown</button><button type="button" id="comparison-json" class="button quiet" data-i18n="comparison.downloadJson" disabled>Download comparison JSON</button><button type="button" id="compare-open-baseline" class="button quiet" data-i18n="comparison.openBaseline" disabled>View baseline report</button><button type="button" id="compare-open-current" class="button quiet" data-i18n="comparison.openCurrent" disabled>View current report</button></div><div id="comparison-content"></div></div>
+            </div>
+          </section>
+          <section id="report-panel" class="report-panel" hidden><div class="section-head"><span class="section-number">03</span><div><h2 data-i18n="history.report">Detailed report</h2><p id="report-heading"></p></div></div><div class="section-body"><div class="actions"><button type="button" id="report-md" class="button" data-i18n="history.downloadMarkdown">Download Markdown</button><button type="button" id="report-json" class="button quiet" data-i18n="history.downloadJson">Download JSON</button></div><p class="hint" data-i18n="history.evidenceHint">The report summarizes results. Open or download screenshots and recordings from each attempt. Evidence files are not included in report downloads.</p><div id="report-content"></div></div></section>
         </section>
         <section id="view-settings" class="view" hidden>
           <div class="page-heading"><p class="eyebrow" data-i18n="settings.eyebrow">04 / CONNECTIONS</p><h1 data-i18n="nav.settings">Connections</h1><p data-i18n="settings.intro">Configure run targets and models separately. Key values are read only from server environment variables.</p></div>

package/dist/src/ui/public/style.css

@@ -52,7 +52,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
 .page-heading h1 em { color: var(--accent-text); font-style: normal; }
 .page-heading > p:last-child { max-width: 56ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
 .workflow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(26px, 3vw, 46px); row-gap: calc(var(--space-factor) * 34px); }
-.work-section, .execution-section, .list-section, .report-panel, .settings-section { min-width: 0; border-top: 2px solid var(--ink); }
+.work-section, .execution-section, .list-section, .report-panel, .comparison-panel, .settings-section { min-width: 0; border-top: 2px solid var(--ink); }
 .section-head { display: flex; align-items: flex-start; gap: 13px; min-width: 0; padding: calc(var(--space-factor) * 19px) 0 calc(var(--space-factor) * 18px); border-bottom: 1px solid var(--line); }
 .section-head > div { min-width: 0; }
 .section-number { flex: none; min-width: 26px; padding-top: 4px; color: var(--accent-text); font-family: 'DM Sans', monospace; font-size: 11px; font-weight: 800; }
@@ -126,17 +126,46 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
 .target-field { min-width: 0; }
 .target-field select { min-height: 45px; }
 .execution-confirm { display: flex; flex-direction: column; min-width: 0; }
+.case-selection { min-width: 0; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
+.case-selection-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
+.case-selection-head h3 { margin: 0; font-size: 14px; }
+#case-selection-summary { color: var(--muted); font-size: 12px; }
+.case-selection .actions { margin: 12px 0; }
+#case-selection-list { display: grid; gap: 0; max-height: 250px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-control); }
+.case-selection-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
+.case-selection-item:last-child { border-bottom: 0; }
+.case-selection-item input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--accent-solid); }
+.case-selection-item span { min-width: 0; overflow-wrap: anywhere; }
+.selection-scope { color: var(--accent-text) !important; font-weight: 700; }
 .review-line { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; cursor: pointer; }
 .review-line input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--accent-solid); }
 .run-bar { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 18px; }
 .run-bar > span { max-width: 37ch; color: var(--muted); font-size: 12px; line-height: 1.5; }
-.list-section, .report-panel { margin-top: calc(var(--space-factor) * 28px); }
+.list-section, .report-panel, .comparison-panel { margin-top: calc(var(--space-factor) * 28px); }
 .list-body { min-width: 0; }
 .list-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: calc(var(--space-factor) * 19px) 0; border-bottom: 1px solid var(--line); }
 .list-row > div { min-width: 0; }
 .list-row strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
 .list-row small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
 .empty { max-width: 50ch; margin: 0; padding: 32px 0; color: var(--muted); line-height: 1.7; }
+
+.comparison-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
+.comparison-selects > div { min-width: 0; }
+.comparison-selects label, .comparison-filter-row label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 750; }
+.comparison-selects select, .comparison-filter-row select { display: block; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper); color: var(--ink); }
+.comparison-actions { margin: 18px 0; }
+#comparison-status { min-height: 20px; }
+.comparison-warning { padding: 12px 14px; border-left: 3px solid var(--accent-solid); background: var(--surface); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
+.comparison-meta { font-size: 13px; overflow-wrap: anywhere; }
+.comparison-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); margin: 18px 0; }
+.comparison-count { min-width: 0; padding: 12px; border-right: 1px solid var(--line); overflow-wrap: anywhere; }
+.comparison-count:nth-child(3n) { border-right: 0; }
+.comparison-count:nth-child(n+4) { border-top: 1px solid var(--line); }
+.comparison-count strong, .comparison-count span { display: block; }
+.comparison-count strong { font-size: 22px; }
+.comparison-count span { color: var(--muted); font-size: 12px; }
+.comparison-filter-row { max-width: 320px; }
+#comparison-content, .comparison-panel { min-width: 0; }
 .report-panel .actions { margin-bottom: 25px; }
 .report-meta { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 23px; }
 .report-meta span { padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius-control); font-size: 12px; }
@@ -189,6 +218,9 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
   .execution-grid { grid-template-columns: 1fr; gap: 16px; }
   .run-bar { align-items: start; flex-direction: column; }
   .list-row { align-items: start; flex-direction: column; gap: 12px; }
+  .comparison-selects { grid-template-columns: 1fr; }
+  .comparison-count { padding: 9px 5px; }
+  .comparison-count strong { font-size: 19px; }
   .draft-topline { align-items: start; flex-direction: column; }
   .summary { padding: 17px; }
   .summary-stat { padding-inline: 5px; }

package/dist/src/ui/server.js

@@ -8,11 +8,13 @@ import { z } from 'zod';
 import { createPreferenceScript } from '@hyeonse/design-system/preferences';
 import { chromium } from 'playwright';
 import { compileSuite } from "../compiler.js";
+import { CaseSelectionError, isReportSelectionValid, selectCases } from "../case-selection.js";
 import { runSuite } from "../engine.js";
 import { localeFromAcceptLanguage, localizeProductMessage } from "../i18n.js";
 import { EvidenceError, readEvidence } from "./evidence.js";
 import { buildPlanningPrompt, planFlow, PlannerError } from "../planner.js";
 import { renderMarkdown } from "../report.js";
+import { compareReports, ComparisonError, renderComparisonMarkdown } from "../run-comparison.js";
 import { configSchema, idSchema, modelSchema, suiteSchema, targetSchema } from "../schema.js";
 import { targetFingerprint } from "../targets.js";
 import { CONFIG_FILE, sha256 } from "../workspace.js";
@@ -37,7 +39,8 @@ const reportEnvelope = z.object({
     cases: z.array(z.object({ id: z.string(), title: z.string(), status: z.enum(['passed', 'failed', 'flaky', 'blocked', 'skipped', 'error']),
         expected: z.array(z.string()), attempts: z.array(z.unknown()), reason: z.string().optional() }).passthrough()),
     errors: z.array(z.string()), usage: z.object({ modelTokens: z.number(), modelCachedTokens: z.number().optional(), estimatedCostUsd: z.number().optional() }).optional(),
-}).passthrough();
+    selection: z.unknown().optional(),
+}).passthrough().refine((report) => isReportSelectionValid(report.cases, report.selection));
 const PUBLIC_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), 'public');
 const STATIC_FILES = {
     '/': { file: path.join(PUBLIC_DIR, 'index.html'), type: 'text/html; charset=utf-8' },
@@ -71,7 +74,7 @@ const SCHEMA_FIELDS = new Set([
     'requirementIds', 'preconditions', 'questions', 'steps', 'type', 'path', 'instruction',
     'locator', 'by', 'value', 'name', 'visible', 'expected', 'match', 'flow', 'role', 'url',
     'description', 'baseURL', 'model', 'apiKeyEnv', 'clear', 'targetName', 'targetURL', 'targetFingerprint', 'suiteHash',
-    'kind', 'platform', 'bundleId', 'device', 'direction',
+    'kind', 'platform', 'bundleId', 'device', 'direction', 'caseIds',
 ]);
 const KNOWN_SCHEMA_MESSAGES = new Map([
     ['IDs must be unique.', 'IDs must be unique.'],
@@ -401,7 +404,7 @@ export async function startUIServer(options) {
                 history.push({ runId: item.runId, suiteId: item.suiteId, status: item.status, startedAt: item.startedAt,
                     finishedAt: item.finishedAt, caseCount: item.cases.length,
                     passedCount: item.cases.filter((entry) => entry.status === 'passed' || entry.status === 'flaky').length,
-                    target: item.target });
+                    target: item.target, ...(item.selection ? { selection: item.selection } : {}) });
             }
             catch { /* incomplete or unsafe run */ }
         }
@@ -468,6 +471,25 @@ export async function startUIServer(options) {
                 sendJSON(response, 200, await report(runId, true, locale));
                 return;
             }
+            if (url.pathname === '/api/comparison') {
+                const baseline = url.searchParams.get('baseline');
+                const current = url.searchParams.get('current');
+                if (!baseline || !current)
+                    invalid('Both run IDs are required.');
+                const baselineReport = (await report(baseline, false)).report;
+                const currentReport = (await report(current, false)).report;
+                let comparison;
+                try {
+                    comparison = compareReports(baselineReport, currentReport);
+                }
+                catch (error) {
+                    if (error instanceof ComparisonError)
+                        throw new HTTPError(error.status, error.message);
+                    throw error;
+                }
+                sendJSON(response, 200, { comparison, markdown: renderComparisonMarkdown(comparison, locale) });
+                return;
+            }
             if (url.pathname === '/api/artifact') {
                 const runId = url.searchParams.get('runId');
                 const caseId = url.searchParams.get('caseId');
@@ -688,14 +710,24 @@ export async function startUIServer(options) {
         if (url.pathname === '/api/run') {
             enterMutation();
             try {
-                const { suite: file, suiteHash, targetName, targetURL, targetFingerprint: reviewedFingerprint } = parse(z.object({
+                const { suite: file, suiteHash, targetName, targetURL, targetFingerprint: reviewedFingerprint, caseIds } = parse(z.object({
                     suite: z.string(), suiteHash: z.string().regex(/^[a-f0-9]{64}$/), targetName: idSchema,
                     targetURL: z.string().optional(), targetFingerprint: z.string().regex(/^[a-f0-9]{64}$/).optional(),
+                    caseIds: z.array(idSchema).min(1).max(100).optional(),
                 }).strict(), body);
                 const selected = await getSuite(file, true);
                 if (selected.suiteHash !== suiteHash)
                     throw new HTTPError(409, 'The reviewed case file changed. Open it again to review.');
                 const { suite } = selected;
+                let selectedIds;
+                try {
+                    selectedIds = selectCases(suite, caseIds).selection?.caseIds;
+                }
+                catch (error) {
+                    if (error instanceof CaseSelectionError)
+                        invalid('Select one or more unique cases from this suite.');
+                    throw error;
+                }
                 const settings = await config();
                 const target = settings.targets[targetName];
                 if (!target)
@@ -719,7 +751,8 @@ export async function startUIServer(options) {
                 lastError = undefined;
                 const suiteSnapshot = structuredClone(suite);
                 const configSnapshot = structuredClone(settings);
-                runTask = Promise.resolve().then(() => run({ workspace, suite: suiteSnapshot, config: configSnapshot, targetName, signal: abort.signal }))
+                runTask = Promise.resolve().then(() => run({ workspace, suite: suiteSnapshot, config: configSnapshot, targetName, signal: abort.signal,
+                    ...(selectedIds ? { caseIds: [...selectedIds] } : {}) }))
                     .then(() => undefined)
                     .catch(() => { lastError = 'Could not complete the run. Check the local records.'; })
                     .finally(() => { active = null; controller = undefined; busy = false; runTask = undefined; });