@ihyeon/flow-qa 0.5.0 → 0.7.0

package/README.ko.md

@@ -72,6 +72,8 @@ CLI에서는 `flow-qa run cases/task-flow.json --target demo --case TC-001 --cas
 
 ## 실행 결과 비교
 
+`0.6.0`부터 **실행 기록**에서 저장된 전체 보고서를 스위트 ID·실행 ID·대상 이름으로 검색하고 실행 상태로 함께 좁힐 수 있습니다. 결과는 50건씩 표시하며 **더 보기**로 이전 기록을 불러옵니다. **실행 기록 새로고침**은 검색·상태 조건을 유지한 채 목록을 갱신합니다. 오래된 보고서도 다운로드와 실패 케이스 준비를 사용할 수 있습니다. `0.7.0`부터 각 기록의 **기준으로 선택**·**현재로 선택**으로 이전 실행끼리 비교할 수 있으며, 검색이나 새로고침 후에도 선택을 유지합니다. 자세한 동작은 [기록 검색·페이지 조회](docs/ui.md#search-run-history)를 참고하세요.
+
 **실행 기록 → 실행 2건 비교**에서 같은 스위트와 대상의 두 기록을 선택하면 통과→실패, 실패→통과, 그 외 상태 변경, 동일 상태, 추가·누락 케이스를 확인할 수 있습니다. 분류별로 보거나 전체 비교를 Markdown·JSON으로 내려받으세요. 테스트 내용 변경과 불완전한 실행은 별도로 표시하며, 상태 변화만으로 제품 버그의 발생·해결을 확정하지 않습니다. 자세한 동작은 [UI 가이드](docs/ui.md#compare-two-runs)를 참고하세요.
 
 ## 모바일 대상

package/README.md

@@ -72,6 +72,8 @@ From `0.5.0`, open a detailed report and choose **Prepare failed/error cases** t
 
 ## Compare recorded runs
 
+From `0.6.0`, **Run history** searches all valid saved reports by suite ID, run ID, or target name, combined with the run-status filter. Results load 50 at a time; use **Load more** for older results and **Refresh history** to update the list while keeping your filters. Older reports support the same downloads and failed-case preparation. From `0.7.0`, choose **Use as baseline** and **Use as current** on any history rows to compare older runs, retaining the pair through searches and refreshes. See [history search and paging](docs/ui.md#search-run-history).
+
 In **Run history → Compare two runs**, select two reports from the same suite and target to see passed-to-failed, failed-to-passed, other status changes, unchanged, added, and missing cases. Filter the comparison or download all results as Markdown/JSON. Changed test definitions and incomplete runs carry explicit warnings; observed status changes do not prove a product defect was introduced or fixed. See the [UI guide](docs/ui.md#compare-two-runs).
 
 ## Mobile targets

package/dist/src/i18n.js

@@ -62,6 +62,10 @@ const koreanMessages = {
     'Invalid request origin.': '요청 출처가 올바르지 않습니다.',
     'A case file name is required.': '케이스 파일 이름이 필요합니다.',
     'A run ID is required.': '실행 ID가 필요합니다.',
+    'Invalid run limit.': '조회할 실행 기록 수는 1~50 사이의 정수여야 합니다.',
+    'Run query is too long.': '실행 기록 검색어는 200자 이하여야 합니다.',
+    'Invalid run status.': '실행 상태 필터가 올바르지 않습니다.',
+    'Invalid run cursor.': '이전 기록 조회 위치가 올바르지 않습니다. 기록을 새로고침한 뒤 다시 시도하세요.',
     'Both run IDs are required.': '비교할 두 실행 ID가 필요합니다.',
     'A comparison needs two different runs.': '서로 다른 두 실행을 선택해야 합니다.',
     'Both reports must belong to the same suite.': '두 리포트의 케이스 모음이 같아야 합니다.',

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, 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: '', rerunOrigin: null, rerunTargetMismatch: false, navigationVersion: 0, comparison: null, comparisonRequest: 0, comparisonBusy: false, comparisonStatus: 'comparison.selectBoth', 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: '', rerunOrigin: null, rerunTargetMismatch: false, navigationVersion: 0, comparison: null, comparisonRequest: 0, comparisonBusy: false, comparisonStatus: 'comparison.selectBoth', comparisonPins: { baseline: null, current: null }, comparisonSelectionGeneration: 0, comparisonValidation: null, history: { runs: [], nextCursor: null, pagesLoaded: 0, loaded: false, loading: false, request: 0, debounce: null, kind: null, error: null, updatesAvailable: false, pendingRecentUpdate: false }, view: 'scenario' };
 
   function el(tag, className, value) {
     const node = document.createElement(tag);
@@ -38,8 +38,10 @@
     try { result = await response.json(); } catch { throw localizedError('app.responseUnreadable', { status: response.status }); }
     if (!response.ok) {
       const issues = Array.isArray(result?.issues) ? result.issues.slice(0, 8).map((issue) => `${issue.path}: ${issue.message}`).join('\n') : '';
-      if (!result?.error && !issues) throw localizedError('app.requestFailed', { status: response.status });
-      throw new Error(`${result?.error || t('app.requestFailed', { status: response.status })}${issues ? `\n${issues}` : ''}`);
+      const error = !result?.error && !issues ? localizedError('app.requestFailed', { status: response.status })
+        : new Error(`${result?.error || t('app.requestFailed', { status: response.status })}${issues ? `\n${issues}` : ''}`);
+      error.status = response.status;
+      throw error;
     }
     return result;
   }
@@ -54,7 +56,11 @@
     });
     $('breadcrumb').textContent = t('app.breadcrumb', { name: t(names[name]) });
     $('sidebar').classList.remove('nav-open'); $('nav-toggle').setAttribute('aria-expanded', 'false');
-    if (name === 'history') { renderHistory(); renderComparisonOptions(); }
+    if (name === 'history') {
+      if (!app.history.loaded && !app.history.loading) refreshHistory();
+      else renderHistory();
+      renderComparisonOptions();
+    }
   }
   function suitePlatform() { return app.draft?.platform || 'web'; }
   function targetPlatform(target) { return target?.kind === 'mobile' ? 'mobile' : 'web'; }
@@ -266,30 +272,126 @@
       const button = el('button', 'button', t('app.load')); button.type = 'button'; button.addEventListener('click', () => loadSuite(suite.file)); row.append(copy, button); host.append(row);
     }
   }
+  function historyFilters() { return { query: $('history-search').value.trim(), status: $('history-status-filter').value }; }
   function renderHistory() {
+    const history = app.history;
     const host = $('history-list'); replace(host);
-    const runs = app.state?.runs || [];
-    if (!runs.length) { host.append(el('p', 'empty', t(app.state?.active ? 'app.historyActiveEmpty' : 'app.historyEmpty'))); return; }
-    const status = $('history-status-filter').value;
-    const query = $('history-search').value.trim().toLowerCase();
-    const matchingRuns = runs.filter((run) => {
-      const matchesStatus = !status || run.status === status;
-      const matchesSearch = !query || [run.suiteId, run.runId, run.target?.name]
-        .some((field) => String(field ?? '').toLowerCase().includes(query));
-      return matchesStatus && matchesSearch;
-    });
-    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 })));
+    host.setAttribute('aria-busy', String(history.loading));
+    if (!history.runs.length) {
+      const { query, status } = historyFilters();
+      const key = history.loading ? 'history.loading' : history.error && !history.loaded ? 'history.loadError'
+        : query ? 'app.historyNoSearchMatches' : status ? 'app.historyNoStatusMatches'
+          : app.state?.active ? 'app.historyActiveEmpty' : 'app.historyEmpty';
+      host.append(el('p', 'empty', t(key)));
+    }
+    const pair = comparisonPair();
+    for (const run of history.runs) {
+      const row = el('div', 'list-row history-run-row'); row.dataset.runId = run.runId;
+      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 actions = el('div', 'run-row-actions');
+      const button = el('button', 'button', t('app.viewReport')); button.type = 'button'; button.dataset.action = 'view-report'; button.disabled = run.status === 'running' || run.status === 'stopping'; button.addEventListener('click', () => loadReport(run.runId)); actions.append(button);
+      for (const [role, label] of [['baseline', 'comparison.useBaseline'], ['current', 'comparison.useCurrent']]) {
+        const select = el('button', 'button quiet', t(label)); select.type = 'button'; select.dataset.action = role === 'baseline' ? 'compare-baseline' : 'compare-current';
+        select.setAttribute('aria-pressed', String(pair[role] === run.runId));
+        select.disabled = run.status === 'running' || run.status === 'stopping';
+        select.addEventListener('click', () => selectComparisonRun(role, run)); actions.append(select);
+      }
+      row.append(copy, actions); host.append(row);
     }
+    const messages = [];
+    if (history.loaded) messages.push(t('history.pageCount', { count: history.runs.length }));
+    if (history.loading) messages.push(t(history.kind === 'more' ? 'history.loadingMore' : 'history.loading'));
+    if (history.error) messages.push(t(history.error === 'more' ? 'history.loadMoreError' : 'history.loadError'));
+    if (history.updatesAvailable) messages.push(t('history.updatesAvailable'));
+    if (history.loaded && !history.loading && !history.error && !history.nextCursor) messages.push(t('history.end'));
+    const status = $('history-page-status'); status.textContent = messages.join(' · ');
+    status.classList.toggle('report-errors', !!history.error);
+    const more = $('history-load-more');
+    more.hidden = !history.loaded || !history.nextCursor;
+    more.disabled = history.loading;
+    more.textContent = t(history.error === 'more' ? 'history.retryMore' : 'history.loadMore');
+  }
+  async function fetchHistoryPage(request, filters, cursor = null) {
+    const history = app.history;
+    const append = cursor !== null;
+    const params = new URLSearchParams({ query: filters.query, status: filters.status, limit: '50' });
+    if (append) params.set('cursor', cursor);
+    try {
+      const result = await api(`/api/runs?${params}`);
+      if (request !== history.request) return;
+      if (!Array.isArray(result.runs) || !(result.nextCursor === null || typeof result.nextCursor === 'string')) throw new Error('Invalid run history response.');
+      const seen = new Set(append ? history.runs.map((run) => run.runId) : []);
+      const incoming = result.runs.filter((run) => {
+        if (seen.has(run.runId)) return false;
+        seen.add(run.runId); return true;
+      });
+      history.runs = append ? [...history.runs, ...incoming] : incoming;
+      history.nextCursor = result.nextCursor;
+      history.pagesLoaded = append ? history.pagesLoaded + 1 : 1;
+      history.loaded = true;
+      history.error = null;
+      if (!append) history.updatesAvailable = false;
+      renderComparisonOptions();
+    } catch {
+      if (request !== history.request) return;
+      history.error = append ? 'more' : 'first';
+    } finally {
+      if (request !== history.request) return;
+      history.loading = false; history.kind = null;
+      if (history.pendingRecentUpdate) {
+        history.pendingRecentUpdate = false;
+        if (history.pagesLoaded > 1 || history.error === 'more') history.updatesAvailable = true;
+        else if (history.loaded && !history.error) { refreshHistory(); return; }
+      }
+      renderHistory();
+    }
+  }
+  function refreshHistory(delay = 0) {
+    const history = app.history;
+    if (history.debounce !== null) clearTimeout(history.debounce);
+    history.debounce = null;
+    const request = ++history.request;
+    history.runs = []; history.nextCursor = null; history.pagesLoaded = 0; history.loaded = false;
+    history.loading = true; history.kind = 'first'; history.error = null; history.updatesAvailable = false; history.pendingRecentUpdate = false;
+    renderHistory(); renderComparisonOptions();
+    const filters = historyFilters();
+    if (delay) history.debounce = setTimeout(() => { history.debounce = null; void fetchHistoryPage(request, filters); }, delay);
+    else void fetchHistoryPage(request, filters);
+  }
+  function loadMoreHistory() {
+    const history = app.history;
+    if (!history.loaded || history.loading || !history.nextCursor) return;
+    const request = ++history.request;
+    history.loading = true; history.kind = 'more'; history.error = null;
+    renderHistory();
+    void fetchHistoryPage(request, historyFilters(), history.nextCursor);
+  }
+  function recentRunsChanged() {
+    const history = app.history;
+    if (history.loading) { history.pendingRecentUpdate = true; return; }
+    if (!history.loaded) return;
+    if (history.pagesLoaded > 1) {
+      history.updatesAvailable = true;
+      renderHistory();
+    } else refreshHistory();
   }
   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 comparisonRun(runId) {
+    return (app.state?.runs || []).find((run) => run.runId === runId)
+      || app.history.runs.find((run) => run.runId === runId)
+      || Object.values(app.comparisonPins).find((run) => run?.runId === runId);
+  }
+  function comparisonValid() {
+    const { baseline, current } = comparisonPair();
+    return !!baseline && !!current && baseline !== current && [baseline, current].every((id) => {
+      const run = comparisonRun(id);
+      return run && run.status !== 'running' && run.status !== 'stopping';
+    });
+  }
   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);
@@ -307,23 +409,78 @@
     $('comparison-summary').replaceChildren(); $('comparison-warnings').replaceChildren(); $('comparison-content').replaceChildren();
     comparisonStatus('comparison.selectBoth'); comparisonControls();
   }
+  function selectComparisonRun(role, run) {
+    if (run && (run.status === 'running' || run.status === 'stopping')) return;
+    const select = $(role === 'baseline' ? 'compare-baseline' : 'compare-current');
+    const runId = run?.runId || '';
+    if (select.value === runId && (app.comparisonPins[role]?.runId || '') === runId) return;
+    app.comparisonPins[role] = run || null;
+    app.comparisonSelectionGeneration += 1;
+    renderComparisonOptions();
+    select.value = runId;
+    clearComparison(); renderHistory();
+  }
   function renderComparisonOptions() {
-    const runs = (app.state?.runs || []).slice(0, 50);
-    let missing = false;
+    const runs = new Map();
+    for (const run of [...(app.state?.runs || []).slice(0, 50), ...app.history.runs, ...Object.values(app.comparisonPins)]) {
+      if (run?.runId && !runs.has(run.runId)) runs.set(run.runId, run);
+    }
     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) {
+      for (const run of runs.values()) {
         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);
+        option.value = run.runId; option.disabled = run.status === 'running' || run.status === 'stopping'; select.append(option);
       }
-      select.value = runs.some((run) => run.runId === selected) ? selected : '';
-      if (selected && !select.value) missing = true;
+      select.value = runs.has(selected) ? selected : '';
     }
-    if (missing) clearComparison();
-    if (!runs.length && !app.comparison) comparisonStatus('comparison.noRuns');
+    if (!runs.size && !app.comparison) comparisonStatus('comparison.noRuns');
     comparisonControls();
   }
+  async function validateComparisonSelection(state) {
+    if (app.comparisonValidation) return app.comparisonValidation;
+    const pair = comparisonPair();
+    const generation = app.comparisonSelectionGeneration;
+    const recent = new Set((state.runs || []).map((run) => run.runId));
+    const ids = [...new Set(Object.values(pair).filter((id) => id && !recent.has(id)))];
+    if (!ids.length) return;
+    const validation = Promise.all(ids.map(async (runId) => {
+      try {
+        const result = await api(`/api/run-summary?runId=${encodeURIComponent(runId)}`);
+        if (result?.run?.runId !== runId) throw new Error('Invalid run summary response.');
+        return { runId, run: result.run };
+      } catch (error) { return { runId, error }; }
+    }));
+    app.comparisonValidation = validation;
+    try {
+      const outcomes = await validation;
+      const selected = comparisonPair();
+      if (generation !== app.comparisonSelectionGeneration || selected.baseline !== pair.baseline || selected.current !== pair.current) return;
+      let missing = false;
+      let updated = false;
+      for (const outcome of outcomes) {
+        if (outcome.error?.status === 404) {
+          for (const role of ['baseline', 'current']) {
+            if (selected[role] === outcome.runId) {
+              $(role === 'baseline' ? 'compare-baseline' : 'compare-current').value = '';
+              app.comparisonPins[role] = null;
+              missing = true;
+            }
+          }
+          app.history.runs = app.history.runs.filter((run) => run.runId !== outcome.runId);
+        } else if (outcome.run) {
+          for (const role of ['baseline', 'current']) if (selected[role] === outcome.runId) app.comparisonPins[role] = outcome.run;
+          updated = true;
+        }
+      }
+      if (missing) {
+        app.comparisonSelectionGeneration += 1;
+        clearComparison();
+        if (app.history.loading) refreshHistory(); else renderHistory();
+      }
+      if (missing || updated) renderComparisonOptions();
+    } finally { if (app.comparisonValidation === validation) app.comparisonValidation = null; }
+  }
   async function compareRuns() {
     if (!comparisonValid()) return;
     const { baseline, current } = comparisonPair(); const locale = i18n.locale(); const request = ++app.comparisonRequest;
@@ -396,10 +553,11 @@
     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(); renderComparisonOptions(); }
+    renderActive(); if (libraryChanged) renderLibrary(); if (historyChanged) { recentRunsChanged(); 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); }
+    await validateComparisonSelection(state);
   }
   async function work(fn) { if (app.busy) return; app.busy = true; readiness(); notice(''); try { await fn(); } catch (error) { showError(error); } finally { app.busy = false; readiness(); } }
   async function loadSuite(file) { await work(async () => { const result = await api(`/api/suite?file=${encodeURIComponent(file)}`); if (!confirmScenarioReplacement('app.confirmReplaceDraft')) return; $('flow-input').value = result.flow || ''; setDraft(result.suite, result.script, 'library', result.flow || '', file, result.suiteHash || ''); noticeKey('app.suiteLoaded'); view('scenario'); }); }
@@ -578,11 +736,23 @@
     window.addEventListener('beforeunload', warnBeforeUnload);
     document.querySelectorAll('[data-view]').forEach((button) => button.addEventListener('click', () => view(button.dataset.view)));
     $('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);
+    $('history-search').addEventListener('input', () => refreshHistory(150));
+    $('history-status-filter').addEventListener('change', () => refreshHistory());
+    $('history-refresh').addEventListener('click', () => refreshHistory());
+    $('history-load-more').addEventListener('click', loadMoreHistory);
+    for (const [id, role] of [['compare-baseline', 'baseline'], ['compare-current', 'current']]) $(id).addEventListener('change', () => {
+      const run = comparisonRun($(id).value);
+      selectComparisonRun(role, run || null);
+    });
     $('compare-btn').addEventListener('click', compareRuns);
-    $('compare-swap').addEventListener('click', () => { const pair = comparisonPair(); $('compare-baseline').value = pair.current; $('compare-current').value = pair.baseline; clearComparison(); });
+    $('compare-swap').addEventListener('click', () => {
+      const pair = comparisonPair();
+      app.comparisonPins = { baseline: comparisonRun(pair.current), current: comparisonRun(pair.baseline) };
+      app.comparisonSelectionGeneration += 1;
+      renderComparisonOptions();
+      $('compare-baseline').value = pair.current; $('compare-current').value = pair.baseline;
+      clearComparison(); renderHistory();
+    });
     $('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'); } });

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

@@ -84,18 +84,30 @@
     'history.eyebrow': ['03 / RUNS', '03 / 실행'],
     'history.intro': ['Only runs that actually started appear here. Once results are saved, you can view the detailed report.', '실제로 시작된 실행만 표시합니다. 결과가 저장되면 상세 보고서를 볼 수 있습니다.'],
     'history.title': ['Runs', '실행 목록'],
-    'history.help': ['Check the completed report for the final status.', '상태는 완료된 보고서 기준으로 확인하세요.'],
+    'history.help': ['View a completed report or select a run as the comparison baseline or current run.', '완료된 보고서를 보거나 실행을 비교 기준 또는 현재 실행으로 선택하세요.'],
     'history.searchLabel': ['Search runs', '실행 기록 검색'],
     'history.searchPlaceholder': ['Suite ID, run ID, or target name', '스위트 ID, 실행 ID 또는 대상 이름'],
     'history.statusFilter': ['Run status', '실행 상태'],
     'history.statusAll': ['All statuses', '전체 상태'],
+    'history.loadMore': ['Load more', '더 불러오기'],
+    'history.retryMore': ['Retry loading more', '더 불러오기 재시도'],
+    'history.refresh': ['Refresh history', '실행 기록 새로고침'],
+    'history.pageCount': ['Showing {count} runs', '{count}건 표시 중'],
+    'history.end': ['End of results', '모든 결과를 표시했습니다'],
+    'history.loading': ['Loading run history…', '실행 기록을 불러오는 중…'],
+    'history.loadingMore': ['Loading more runs…', '실행 기록을 더 불러오는 중…'],
+    'history.loadError': ['Could not load run history. Try Refresh history.', '실행 기록을 불러오지 못했습니다. 실행 기록 새로고침을 눌러 다시 시도하세요.'],
+    'history.loadMoreError': ['Could not load more runs. Retry loading more.', '실행 기록을 더 불러오지 못했습니다. 다시 시도하세요.'],
+    'history.updatesAvailable': ['Recent runs changed. Refresh history to update this list.', '최근 실행 기록이 변경됐습니다. 실행 기록을 새로고침해 목록을 갱신하세요.'],
     'comparison.title': ['Compare two runs', '실행 2건 비교'],
-    'comparison.help': ['Choose a baseline and current run to compare case outcomes. Inspect detailed reports for evidence.', '기준 실행과 현재 실행을 선택해 케이스 결과를 비교하세요. 증거는 상세 보고서에서 확인하세요.'],
+    'comparison.help': ['Select a baseline and current run from history or the lists below. 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.useBaseline': ['Use as baseline', '기준으로 선택'],
+    'comparison.useCurrent': ['Use as current', '현재로 선택'],
     'comparison.filter': ['Show cases', '케이스 표시'],
     'comparison.all': ['All categories', '전체 분류'],
     'comparison.newlyFailed': ['Newly failed', '새로 실패'],
@@ -109,9 +121,9 @@
     '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.noRuns': ['No 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.limit': ['Search or load more in Run history to select from all saved runs. The lists include the 50 most recent runs, loaded history, and your selections. 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.', '스위트 내용이 바뀌었습니다. 단계나 기대 결과가 다를 수 있으므로 이 수치만으로 같은 조건의 회귀나 수정이라고 판단할 수 없습니다.'],

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

@@ -93,11 +93,11 @@
         </section>
         <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 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">View a completed report or select a run as the comparison baseline or current run.</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" maxlength="200" 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" aria-busy="false"></div><p id="history-page-status" class="hint" role="status" aria-live="polite"></p><div class="actions"><button type="button" id="history-load-more" class="button" data-i18n="history.loadMore" hidden>Load more</button><button type="button" id="history-refresh" class="button quiet" data-i18n="history.refresh">Refresh history</button></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-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">Select a baseline and current run from history or the lists below. Inspect detailed reports for evidence.</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>
+              <p class="hint" data-i18n="comparison.limit">Search or load more in Run history to select from all saved runs. The lists include the 50 most recent runs, loaded history, and your selections. 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>

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

@@ -147,6 +147,11 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
 .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; }
+.history-run-row { flex-wrap: wrap; }
+.history-run-row > div:first-child { flex: 1 1 260px; }
+.run-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+.run-row-actions .button[aria-pressed='true'] { border-color: var(--accent-solid); background: var(--accent-solid); color: var(--on-accent); opacity: 1; }
+.run-row-actions .button[aria-pressed='true']:hover:enabled { color: var(--on-accent); filter: brightness(.91); }
 .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; }
@@ -218,6 +223,8 @@ 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; }
+  .history-run-row > div:first-child { flex: 0 1 auto; width: 100%; }
+  .run-row-actions { justify-content: flex-start; }
   .comparison-selects { grid-template-columns: 1fr; }
   .comparison-count { padding: 9px 5px; }
   .comparison-count strong { font-size: 19px; }

package/dist/src/ui/server.js

@@ -28,6 +28,13 @@ const PLAN_TIMEOUT_MS = 65_000;
 const CLOSE_WAIT_MS = 10_000;
 const BROWSER_INSTALL_COMMAND = 'flow-qa browser install';
 const RUN_ID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const RUN_STATUSES = new Set(['passed', 'failed', 'blocked', 'error', 'interrupted']);
+const RUN_HISTORY_LIMIT = 50;
+const RUN_CURSOR_MAX_LENGTH = 512;
+const runCursorSchema = z.object({
+    version: z.literal(1), mtime: z.number().finite().nonnegative(), id: z.string().regex(RUN_ID),
+    filterHash: z.string().regex(/^[0-9a-f]{64}$/),
+}).strict();
 const FILE_NAME = /^[A-Za-z0-9][A-Za-z0-9._-]{0,159}$/;
 const reportEnvelope = z.object({
     schemaVersion: z.literal('flow-qa/report-1'), runId: z.string().regex(RUN_ID), suiteId: idSchema,
@@ -69,6 +76,29 @@ class HTTPError extends Error {
 }
 function invalid(message = 'Invalid input.') { throw new HTTPError(400, message); }
 function notFound() { throw new HTTPError(404, 'The requested item was not found.'); }
+function runFilterHash(query, status) {
+    return sha256(JSON.stringify([query, status]));
+}
+// The cursor is independent of page size, so clients may change limit between pages.
+function encodeRunCursor(candidate, filterHash) {
+    return Buffer.from(JSON.stringify({ version: 1, mtime: candidate.mtime, id: candidate.id, filterHash })).toString('base64url');
+}
+function decodeRunCursor(value, filterHash) {
+    if (value.length === 0 || value.length > RUN_CURSOR_MAX_LENGTH || !/^[A-Za-z0-9_-]+$/.test(value))
+        invalid('Invalid run cursor.');
+    try {
+        const bytes = Buffer.from(value, 'base64url');
+        if (bytes.toString('base64url') !== value)
+            invalid('Invalid run cursor.');
+        const parsed = runCursorSchema.safeParse(JSON.parse(bytes.toString('utf8')));
+        if (!parsed.success || parsed.data.filterHash !== filterHash)
+            invalid('Invalid run cursor.');
+        return { id: parsed.data.id, mtime: parsed.data.mtime };
+    }
+    catch {
+        return invalid('Invalid run cursor.');
+    }
+}
 const SCHEMA_FIELDS = new Set([
     'suite', 'schemaVersion', 'id', 'title', 'source', 'file', 'sha256', 'requirements', 'cases',
     'requirementIds', 'preconditions', 'questions', 'steps', 'type', 'path', 'instruction',
@@ -379,7 +409,7 @@ export async function startUIServer(options) {
         }
         return { report: raw, ...(markdown === undefined ? {} : { markdown }) };
     }
-    async function runs() {
+    async function runCandidates() {
         const root = await directory(['.flowqa', 'runs']);
         if (!root)
             return [];
@@ -394,17 +424,28 @@ export async function startUIServer(options) {
             }
             catch { /* incomplete run */ }
         }
-        candidates.sort((a, b) => b.mtime - a.mtime);
+        return candidates.sort((a, b) => b.mtime - a.mtime || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+    }
+    function runSummary(item) {
+        return { 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, ...(item.selection ? { selection: item.selection } : {}) };
+    }
+    async function runSummaries(limit, query = '', status = '', after) {
         const history = [];
-        for (const candidate of candidates) {
-            if (history.length === 50)
-                break;
+        for (const candidate of await runCandidates()) {
+            if (after && (candidate.mtime > after.mtime || (candidate.mtime === after.mtime && candidate.id <= after.id)))
+                continue;
             try {
                 const { report: item } = await report(candidate.id, false);
-                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, ...(item.selection ? { selection: item.selection } : {}) });
+                if (status && item.status !== status)
+                    continue;
+                if (query && ![item.suiteId, item.runId, item.target.name].some((field) => field.toLowerCase().includes(query)))
+                    continue;
+                history.push({ candidate, summary: runSummary(item) });
+                if (history.length === limit)
+                    break;
             }
             catch { /* incomplete or unsafe run */ }
         }
@@ -446,7 +487,7 @@ export async function startUIServer(options) {
         if (request.method === 'GET') {
             if (url.pathname === '/api/state') {
                 const settings = await config();
-                const history = await runs();
+                const history = (await runSummaries(RUN_HISTORY_LIMIT)).map(({ summary }) => summary);
                 sendJSON(response, 200, { csrfToken: token,
                     targets: Object.entries(settings.targets).map(([name, target]) => ({ name, ...target, targetFingerprint: targetFingerprint(target) })),
                     models: { planner: modelState(settings.planner), agent: modelState(settings.agent) },
@@ -457,6 +498,49 @@ export async function startUIServer(options) {
                     ...(lastError ? { lastError: localizeProductMessage(lastError, locale) } : {}) });
                 return;
             }
+            if (url.pathname === '/api/runs') {
+                for (const key of ['query', 'status', 'limit', 'cursor']) {
+                    if (url.searchParams.getAll(key).length > 1)
+                        invalid();
+                }
+                const query = (url.searchParams.get('query') ?? '').trim();
+                if (query.length > 200)
+                    invalid('Run query is too long.');
+                const normalizedQuery = query.toLowerCase();
+                const status = url.searchParams.get('status') ?? '';
+                if (status && !RUN_STATUSES.has(status))
+                    invalid('Invalid run status.');
+                const rawLimit = url.searchParams.get('limit');
+                if (rawLimit !== null && !/^(?:[1-9]|[1-4][0-9]|50)$/.test(rawLimit))
+                    invalid('Invalid run limit.');
+                const limit = rawLimit === null ? RUN_HISTORY_LIMIT : Number(rawLimit);
+                const filterHash = runFilterHash(normalizedQuery, status);
+                const rawCursor = url.searchParams.get('cursor');
+                const after = rawCursor === null ? undefined : decodeRunCursor(rawCursor, filterHash);
+                const rows = await runSummaries(limit + 1, normalizedQuery, status, after);
+                const runs = rows.slice(0, limit);
+                sendJSON(response, 200, { runs: runs.map(({ summary }) => summary),
+                    nextCursor: rows.length > limit ? encodeRunCursor(runs.at(-1).candidate, filterHash) : null });
+                return;
+            }
+            if (url.pathname === '/api/run-summary') {
+                if (url.searchParams.getAll('runId').length !== 1)
+                    invalid('A run ID is required.');
+                const runId = url.searchParams.get('runId');
+                if (!RUN_ID.test(runId))
+                    invalid('Invalid run ID.');
+                let item;
+                try {
+                    ({ report: item } = await report(runId, false));
+                }
+                catch (error) {
+                    if (error instanceof HTTPError && error.status === 400)
+                        notFound();
+                    throw error;
+                }
+                sendJSON(response, 200, { run: runSummary(item) });
+                return;
+            }
             if (url.pathname === '/api/suite') {
                 const file = url.searchParams.get('file');
                 if (!file)

package/docs/releases.md

@@ -2,6 +2,30 @@
 
 The alpha entries below are historical release records. They document earlier package versions and checks.
 
+## 0.7.0: compare archived runs directly from history
+
+History rows now offer **Use as baseline** and **Use as current**, so older runs found by search or paging can be compared. The chosen pair stays available through query/status changes, history refresh, polling, navigation, and language changes. Selected row actions expose their pressed state, and changing a selection or swapping roles clears the old comparison and exports until compared again.
+
+A read-only summary lookup validates selected runs outside the recent 50 using the existing safe JSON report loader; comparison does not require a saved Markdown file. A confirmed deleted, invalid, or unsafe report clears its selection and comparison. Temporary request failures preserve the pair, and stale validation responses cannot change a newer selection. Choosing reports preserves the scenario draft, review state, and open detailed report, and never starts QA execution.
+
+Locally verified on macOS with Node.js 24.22.1 on 2026-11-06: 118 tests, type checking, UI syntax/design-system audit, all existing UI checks, and the real Chromium demo passed. A dedicated browser smoke used 61 synthetic records to verify comparison beyond the latest 50, JSON-only reports, row selection, filtering/paging, polling, navigation/language preservation, swaps, temporary failures, stale missing-file responses after changing away and back to the same selection, deleted archived files, and a 390px layout. A fresh tarball installation ran seven passing browser cases and verified archived summary lookup and comparison. No model calls, external logins, or native-device runs were used.
+
+- Package: [`@ihyeon/flow-qa@0.7.0`](https://www.npmjs.com/package/@ihyeon/flow-qa/v/0.7.0)
+- Release: [GitHub 0.7.0](https://github.com/hyeonse-swing/flow-qa/releases/tag/v0.7.0)
+
+## 0.6.0: search and page through the full run history
+
+Run-history search and status filters now cover every valid saved report instead of only the latest 50. **Load more** appends up to 50 older matches, and **Refresh history** restarts the list with the same filters. Loaded counts, end-of-results, loading, and retry messages make the current scope explicit. Opening an older report supports the existing downloads and failed/error-case preparation.
+
+The read-only `/api/runs` endpoint applies search and status before pagination, reuses the safe report loader, and uses a bounded cursor tied to the normalized filters. Ordering is by run-directory modification time with a UUID tie-breaker; new records ahead of the cursor do not duplicate earlier pages. External changes to an existing directory's modification time can reorder it, so this remains a live view rather than a snapshot. `/api/state` and comparison selectors retain their most recent 50-report contract.
+
+The UI retains loaded pages through navigation and language changes, ignores late responses for previous queries, and preserves rows/cursors on a failed append. A first page updates when recent records change; multiple loaded pages stay visible with refresh guidance. Updates arriving during a pending first-page request trigger a follow-up refresh. Search and paging preserve the open report and scenario draft.
+
+Locally verified on macOS with Node.js 24.22.1 on 2026-11-06: 118 tests, type checking, UI syntax/design-system audit, existing demo and UI checks passed. A dedicated Chromium smoke created 72 synthetic reports to check older-record search, combined filters, page boundaries, retry, duplicate prevention, polling/query races, old-report download/preparation, English/Korean, and 390px layout. A fresh tarball installation verified full-history search and paging beyond 50 alongside the existing seven passing browser cases. No model calls, external logins, or native-device runs were used.
+
+- Package: [`@ihyeon/flow-qa@0.6.0`](https://www.npmjs.com/package/@ihyeon/flow-qa/v/0.6.0)
+- Release: [GitHub 0.6.0](https://github.com/hyeonse-swing/flow-qa/releases/tag/v0.6.0)
+
 ## 0.5.0: prepare failed cases from a report
 
 Adds **Prepare failed/error cases** to detailed reports. It loads the unchanged saved suite, selects only recorded `failed` and `error` cases in suite order, and opens Scenario with a fresh review requirement. Passed, flaky, blocked, and skipped cases are excluded. Preparation is read-only and never starts a run or calls a model. Unsaved drafts require confirmation; failed preparation and late responses after navigation preserve the draft.

package/docs/ui.md

@@ -66,11 +66,17 @@ From version `0.2.6`, **Case library** filters saved suites as you type in **Sea
 
 ### Filter run history
 
-From version `0.2.7`, **Run history → Run status** filters the loaded reports by passed, failed, blocked, error, or interrupted. Choose **All statuses** to restore the list. The selection stays while navigating, changing language, or receiving updated reports, and resets on page reload. The filter applies to the most recent 50 reports loaded by the UI; it does not search older history or individual case results. Filtering keeps the report already open and its downloads available.
+**Run history → Run status** filters reports by passed, failed, blocked, error, or interrupted. Choose **All statuses** to remove the status condition. From `0.6.0`, filtering searches all valid saved reports before pagination, including older records beyond the most recent 50. The selection stays while navigating, changing language, or receiving updated reports, and resets on page reload. Filtering keeps the report already open and its downloads available.
 
 ### Search run history
 
-From version `0.2.9`, **Run history → Search runs** matches part of a suite ID, run ID, or target name. Matching ignores letter case and surrounding whitespace, and supports Korean target names. Search combines with **Run status**; clear the search to return to the selected status. The query stays through navigation, language changes, and automatic report updates, and resets on page reload. Search covers the most recent 50 reports loaded by the UI, not older records, target URLs, or individual case content. Changing the query keeps the open report and its downloads available.
+**Run history → Search runs** matches part of a suite ID, run ID, or target name. Matching ignores letter case and surrounding whitespace, and supports Korean target names. Search combines with **Run status**; clear the search to return to the selected status. From `0.6.0`, search covers all valid saved reports, including older records. Target URLs and individual case content are not searched. Queries are limited to 200 characters.
+
+Results load 50 at a time, newest first by run-directory modification time, with run ID as a stable tie-breaker. **Load more** appends older matches. The displayed count describes loaded matches, not a global total. End-of-results, loading, and retry guidance distinguish an empty result from an unavailable request. A failed page request preserves loaded rows so you can retry.
+
+Changing search or status restarts at the first page. The query, status, and loaded pages stay through navigation and language changes, and reset on page reload. The open report, its downloads, and scenario draft stay intact. A delayed response from an older query cannot replace newer results. Older reports support the same report downloads and failed/error-case preparation.
+
+When recent run records change, a single loaded page refreshes automatically. If several pages are loaded, the UI keeps them and shows an update hint. **Refresh history** restarts at the first page with the current filters and also picks up external edits or deletions of older records. Pagination is a live view, not a frozen snapshot: newly added records appear when refreshed, and reports changed externally while paging may move. Invalid, incomplete, or unsafe report files are excluded. Use the row actions to select any listed report for comparison, including older results.
 
 ### Prepare failed cases
 
@@ -84,13 +90,13 @@ The preparation notice identifies the original run. The next execution creates a
 
 ### Compare two runs
 
-From version `0.3.0`, open **Run history → Compare two runs**, choose a **Baseline run** and **Current run**, then compare. Both selectors use the most recent 50 loaded reports, independently of the history search and status filter. The reports must belong to the same suite ID and recorded target settings: a matching web URL, or mobile platform, app ID, and device. Target display names may differ. Mobile reports record the configured device selector, which can be a name; all mobile comparisons warn that matching selectors do not establish that the same physical device was used. Comparing does not run tests, call a model, or change case review.
+From version `0.3.0`, open **Run history → Compare two runs**, choose a **Baseline run** and **Current run**, then compare. From `0.7.0`, each history row offers **Use as baseline** and **Use as current**. Search or load older pages to choose any saved run, then press **Compare**. The selectors include the most recent 50 reports, currently loaded history rows, and the two selected runs. Selected runs stay available when searches or filters hide their rows. The reports must belong to the same suite ID and recorded target settings: a matching web URL, or mobile platform, app ID, and device. Target display names may differ. Mobile reports record the configured device selector, which can be a name; all mobile comparisons warn that matching selectors do not establish that the same physical device was used. Comparing does not run tests, call a model, or change case review.
 
 Cases are matched by ID. **Newly failed** means only `passed → failed`; **Now passed** means only `failed → passed`. Other status transitions, including flaky, blocked, skipped, and execution errors, appear under **Changed status**. Equal statuses are **Same status**. **Added to current** and **Missing from current** mean present in only one selected report; missing does not mean passed or deleted from the suite. Filter the visible rows by category, open either detailed report for its evidence, or download the complete comparison as Markdown or JSON. Downloads include every category, regardless of the display filter, and do not include evidence files. Markdown follows the existing report URL/link hiding policy; JSON retains the recorded target settings and case text.
 
 When suite hashes differ, the UI and exports warn that steps or expectations may have changed. These are recorded outcomes, not proof of equivalent tests, a product regression, or a fixed defect. Additional warnings identify reversed chronological order and interrupted/error runs. The comparison never treats a flaky pass as a clean pass. The existing report format remains unchanged; comparison JSON uses `flow-qa/comparison-1`.
 
-Swap reverses the baseline and current selections. Changing either selection clears the old result and downloads until a new comparison succeeds. Navigation, language changes, and history updates preserve valid selections and results; a selected run disappearing from the loaded list invalidates the comparison. Choices reset on page reload. Markdown product labels follow the selected language, while user-written case content and status codes are preserved.
+Swap reverses the baseline and current selections. Changing either selection clears the old result and downloads until a new comparison succeeds. Navigation, language changes, and history updates preserve valid selections and results; leaving the latest 50 or the visible history page does not clear a selected run. Background checks validate selected older records directly; a confirmed missing, invalid, or unsafe report clears that selection and invalidates the comparison. Temporary request failures preserve the pair for the next check. Choices reset on page reload. Markdown product labels follow the selected language, while user-written case content and status codes are preserved.
 
 ### Import existing case files
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihyeon/flow-qa",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "license": "MIT",
   "author": "Hyeonse Im",
   "repository": {
@@ -57,7 +57,7 @@
     "check:ui": "node --check src/ui/public/app.js && node --check src/ui/public/display.js && node --check src/ui/public/i18n.js && hds-audit .",
     "demo:serve": "node examples/demo/server.ts",
     "demo:smoke": "node scripts/demo-smoke.ts",
-    "smoke:ui": "node scripts/ui-i18n-smoke.mjs && node scripts/ui-comparison-smoke.mjs && node scripts/ui-selection-smoke.mjs && node scripts/ui-rerun-smoke.mjs"
+    "smoke:ui": "node scripts/ui-i18n-smoke.mjs && node scripts/ui-comparison-smoke.mjs && node scripts/ui-selection-smoke.mjs && node scripts/ui-rerun-smoke.mjs && node scripts/ui-history-smoke.mjs && node scripts/ui-archive-comparison-smoke.mjs"
   },
   "dependencies": {
     "@ai-sdk/openai-compatible": "3.0.53",