@ihyeon/flow-qa 0.2.1 → 0.2.3

package/README.ko.md

@@ -16,7 +16,7 @@ CLI와 `127.0.0.1` 전용 웹 UI를 제공합니다. UI는 영어로 시작하
 Node.js 24.8 이상이 필요합니다. 브라우저는 첫 웹 실행 전에 설치합니다.
 
 ```sh
-npm install -g @ihyeon/flow-qa@0.2.1
+npm install -g @ihyeon/flow-qa@0.2.3
 flow-qa browser install
 flow-qa ui --demo
 ```

package/README.md

@@ -16,7 +16,7 @@ Flow QA is available as a CLI and a web UI bound to `127.0.0.1`. Provide a targe
 Node.js 24.8 or later is required. Install Chromium before the first web run:
 
 ```sh
-npm install -g @ihyeon/flow-qa@0.2.1
+npm install -g @ihyeon/flow-qa@0.2.3
 flow-qa browser install
 flow-qa ui --demo
 ```

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

@@ -61,11 +61,17 @@
   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 canDownloadSavedCases() {
+    return Boolean(app.draft && app.script && app.savedFile && app.savedHash && !app.dirty && !app.stale && !app.busy && !hasUnsavedScenario());
+  }
+  function canDownloadSourceMarkdown() { return canDownloadSavedCases() && Boolean(app.draft.source); }
   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;
     $('save-btn').disabled = !ready || app.busy;
+    $('suite-download').disabled = !canDownloadSavedCases();
+    $('flow-download').disabled = !canDownloadSourceMarkdown();
     $('script-download').disabled = !ready;
     for (const id of ['stop-btn', 'global-stop-btn']) {
       $(id).hidden = !active;
@@ -253,6 +259,19 @@
   }); }
   async function prompt() { await work(async () => { const flow = $('flow-input').value.trim(); if (!flow) throw localizedError('app.enterFlow'); const result = await api('/api/prompt', { flow, platform: $('scenario-platform').value }); download('flow-qa-prompt.md', result.prompt, 'text/markdown'); noticeKey('app.promptDownloaded'); }); }
   function editableFlow(flow) { return flow.replace(/\r\n?/g, '\n'); }
+  function hasUnsavedScenario() {
+    const flow = $('flow-input').value;
+    const suite = $('suite-editor').value;
+    if (!app.savedFile) return !!(flow.trim() || suite.trim());
+    return flow !== editableFlow(app.sourceFlow)
+      || suite !== JSON.stringify(app.draft, null, 2)
+      || $('scenario-platform').value !== suitePlatform();
+  }
+  function warnBeforeUnload(event) {
+    if (!hasUnsavedScenario()) return;
+    event.preventDefault();
+    event.returnValue = '';
+  }
   async function importFiles() {
     const files = [...$('import-json').files, ...$('import-markdown').files];
     let imported = false;
@@ -368,6 +387,7 @@
     else if (!$('notice').hidden) notice(''); // A server error has no stable code to translate; the next request uses the selected language.
   }
   function wire() {
+    window.addEventListener('beforeunload', warnBeforeUnload);
     document.querySelectorAll('[data-view]').forEach((button) => button.addEventListener('click', () => view(button.dataset.view)));
     $('nav-toggle').addEventListener('click', () => { const open = $('sidebar').classList.toggle('nav-open'); $('nav-toggle').setAttribute('aria-expanded', String(open)); });
     $('library-shortcut').addEventListener('click', () => view('library'));
@@ -380,7 +400,7 @@
       noticeKey('app.newDraftNotice');
       $('suite-editor').focus();
     });
-    $('flow-input').addEventListener('input', () => { if (app.origin === 'imported' ? $('flow-input').value !== editableFlow(app.sourceFlow) : (app.sourceFlow || app.boundSource) && $('flow-input').value.trim() !== editableFlow(app.sourceFlow).trim()) { app.stale = true; app.savedHash = ''; $('review-checkbox').checked = false; readiness(); } });
+    $('flow-input').addEventListener('input', () => { if (app.origin === 'imported' ? $('flow-input').value !== editableFlow(app.sourceFlow) : (app.sourceFlow || app.boundSource) && $('flow-input').value.trim() !== editableFlow(app.sourceFlow).trim()) { app.stale = true; app.savedHash = ''; $('review-checkbox').checked = false; } readiness(); });
     $('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(); });
@@ -388,6 +408,8 @@
     $('import-btn').addEventListener('click', importFiles);
     $('global-stop-btn').addEventListener('click', stop);
     $('reconnect-btn').addEventListener('click', () => refresh(true).catch(showError));
+    $('suite-download').addEventListener('click', () => { if (canDownloadSavedCases()) download(app.savedFile, `${JSON.stringify(app.draft, null, 2)}\n`, 'application/json'); });
+    $('flow-download').addEventListener('click', () => { if (canDownloadSourceMarkdown()) download(app.draft.source.file.split('/').pop(), app.sourceFlow, 'text/markdown'); });
     $('script-download').addEventListener('click', () => { if (app.draft && !app.dirty && !app.stale) download(`${app.draft.id || 'flow-qa'}.test.mjs`, app.script, 'text/javascript'); });
     $('report-md').addEventListener('click', downloadReportMarkdown);
     $('report-json').addEventListener('click', () => { if (app.report) download(`${app.selectedRun}.json`, JSON.stringify(app.report, null, 2), 'application/json'); });

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

@@ -45,7 +45,9 @@
     'scenario.sourceNone': ['Source: none', '원본: 없음'],
     'scenario.fromLibrary': ['Load from library', '보관함에서 불러오기'],
     'scenario.save': ['Save cases separately', '케이스 별도 저장'],
-    'scenario.saveHint': ['Only saved cases can be run.', '저장된 케이스만 실행할 수 있습니다.'],
+    'scenario.downloadSuite': ['Download case JSON', '케이스 JSON 다운로드'],
+    'scenario.downloadFlow': ['Download source Markdown', '원본 Markdown 다운로드'],
+    'scenario.saveHint': ['Saved cases can be run or downloaded.', '저장된 케이스는 실행하거나 다운로드할 수 있습니다.'],
     'scenario.technical': ['Edit JSON · Validate · View script', 'JSON 편집 · 검증 · 스크립트 보기'],
     'scenario.suiteJson': ['Suite JSON', '스위트 JSON'],
     'scenario.suitePlaceholder': ['Load a local demo case from the library or enter suite JSON.', '보관함의 로컬 데모 케이스를 불러오거나 스위트 JSON을 입력하세요.'],

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

@@ -64,7 +64,7 @@
                 <div class="draft-actions import-actions"><label for="import-json"><span data-i18n="scenario.importJson">TC JSON</span><input id="import-json" type="file" accept=".json"></label><label for="import-markdown"><span data-i18n="scenario.importMarkdown">Source Markdown (optional)</span><input id="import-markdown" type="file" accept=".md"></label><button id="import-btn" type="button" class="button quiet" data-i18n="scenario.importFiles">Import case files</button></div>
                 <p class="hint" data-i18n="scenario.importHint">Select one TC JSON and, if needed, its source Markdown separately. Import creates a copy to save and review.</p>
                 <div id="draft-summary" class="summary" aria-live="polite"><p class="summary-empty" data-i18n="scenario.summaryEmpty">No cases to review yet. Load a local example from the library or generate cases from the scenario.</p></div>
-                <div class="draft-actions"><button id="save-btn" type="button" class="button" data-i18n="scenario.save">Save cases separately</button><span data-i18n="scenario.saveHint">Only saved cases can be run.</span></div>
+                <div class="draft-actions"><button id="save-btn" type="button" class="button" data-i18n="scenario.save">Save cases separately</button><button id="suite-download" type="button" class="button quiet" disabled data-i18n="scenario.downloadSuite">Download case JSON</button><button id="flow-download" type="button" class="button quiet" disabled data-i18n="scenario.downloadFlow">Download source Markdown</button><span data-i18n="scenario.saveHint">Saved cases can be run or downloaded.</span></div>
                 <details id="technical-details" class="technical-details">
                   <summary><span data-i18n="scenario.technical">Edit JSON · Validate · View script</span><span aria-hidden="true">＋</span></summary>
                   <div class="technical-body">

package/docs/mobile.md

@@ -9,7 +9,7 @@ Choose **Mobile** on the scenario screen, describe the flow, and generate or dow
 With the installed CLI:
 
 ```sh
-npm install -g @ihyeon/flow-qa@0.2.1
+npm install -g @ihyeon/flow-qa@0.2.3
 flow-qa init ./my-qa
 # Write your mobile flow in my-qa/flows/my-flow.md first.
 flow-qa plan flows/my-flow.md --platform mobile --prompt-only --workspace ./my-qa

package/docs/releases.md

@@ -2,6 +2,24 @@
 
 The alpha entries below are historical release records. They document earlier package versions and checks.
 
+## 0.2.3: download saved case files
+
+Adds separate case JSON and source Markdown download buttons to case review. Saved cases can be reused without finding workspace files manually; source-less cases offer JSON only. Unsaved or outdated drafts are excluded. The source text and hash remain compatible with file import, while existing save, review, and execution gates stay in place.
+
+Locally verified on macOS with Node.js 24.14.1 on 2026-10-20: 92 tests, type checking, UI syntax and design-system audit, real Chromium downloads and re-import with unchanged source hashes, JSON-only downloads for source-less cases, disabled controls for unsaved edits, and a fresh package install with three passing browser cases. Existing demo pass/failure/blocked classifications and English/Korean UI checks passed without model calls.
+
+- Package: [`@ihyeon/flow-qa@0.2.3`](https://www.npmjs.com/package/@ihyeon/flow-qa/v/0.2.3)
+- Release: [GitHub 0.2.3](https://github.com/hyeonse-swing/flow-qa/releases/tag/v0.2.3)
+
+## 0.2.2: warn before leaving an unsaved draft
+
+Requests the browser's confirmation before a refresh or tab close would discard an unsaved scenario or TC draft. Imported and manually edited cases are covered, including scenario edits to a saved case without a linked source. Unchanged saved cases stay quiet, and successful saving clears the warning. The browser controls the prompt; this does not add automatic saving or change review and execution gates.
+
+Locally verified on macOS with Node.js 24.14.1 on 2026-10-20: 92 tests, type checking, UI syntax and design-system audit, a real Chromium reload prompt that preserves input when dismissed, clean/saved/imported/edited draft checks, existing browser and UI smoke tests, and a fresh tarball install with three passing browser cases. No model calls were used.
+
+- Package: [`@ihyeon/flow-qa@0.2.2`](https://www.npmjs.com/package/@ihyeon/flow-qa/v/0.2.2)
+- Release: [GitHub 0.2.2](https://github.com/hyeonse-swing/flow-qa/releases/tag/v0.2.2)
+
 ## 0.2.1: import case files from the UI
 
 Adds a file picker for a TC JSON file and its optional source Markdown. Import checks the suite and source hash before replacing the current draft, preserves unresolved review questions, and creates a separate copy when saved. Source text retains its line endings and trailing whitespace. This does not import error-to-test provenance metadata; original bundles remain separate. See [case file import](ui.md#import-existing-case-files).

package/docs/ui.md

@@ -7,7 +7,7 @@ Describe a user flow, review cases, and configure a target when ready to run. We
 Node.js 24.8 or later is required. Install Flow QA and start the web demo:
 
 ```sh
-npm install -g @ihyeon/flow-qa@0.2.1
+npm install -g @ihyeon/flow-qa@0.2.3
 flow-qa browser install
 flow-qa ui --demo
 ```
@@ -42,6 +42,8 @@ For each attempt, the report can open or download an approved screenshot or text
 
 To enter fresh JSON after changing a scenario, open the JSON editor in case review and choose **New JSON draft**. Existing saved files remain; validate and save the new JSON before reviewing it for a run.
 
+From version `0.2.2`, the UI requests the browser's leave-page confirmation when refreshing or closing a tab with an unsaved scenario or case draft. Unchanged saved cases do not trigger it; saving clears the warning. Choose to stay on the page to keep editing. The browser controls the prompt wording and availability. This is not automatic saving, and it does not guard actions within the UI that replace the draft.
+
 ### Import existing case files
 
 From version `0.2.1`, select a `flow-qa/suite-1` JSON file and, when it declares a source, its Markdown file in case review, then choose **Import case files**. The two file controls let you select files from different folders. For an error-to-test export, select `cases/error-to-test.json` and `flows/error-to-test.md`. A JSON file without a source can be imported alone or with a Markdown file.
@@ -50,6 +52,12 @@ Import validates the suite and checks the selected Markdown against its declared
 
 This creates an unsaved review copy. Choose **Save cases separately**, review the cases, and confirm review before running. Unresolved questions remain blocked. Saving assigns a new workspace source path and hash; it does not overwrite the input files or import `provenance.json`. If you need error-to-test `verify` / `link-run` provenance, keep the original bundle and use its original suite instead of this saved copy.
 
+### Download saved cases
+
+From version `0.2.3`, case review offers **Download case JSON** and **Download source Markdown** for the saved case currently shown. Save or reload the case first; unsaved or outdated drafts cannot be downloaded with these controls. A case without a linked source offers JSON only. Downloading needs no run target or execution review confirmation and does not change either.
+
+The JSON keeps the case content and source reference. The Markdown retains its exact text, line endings, and trailing whitespace so its SHA-256 still matches. Select both downloaded files through **Import case files** to reuse them in another workspace, then save and review the new copy before running. These downloads contain the case and source, not run reports or an error-to-test provenance bundle.
+
 ## Display and language
 
 The UI uses role tokens and preference utilities from `@hyeonse/design-system`, pinned to GitHub commit `38978c6a86f422fc0e63e919f600bc2dd3451e5c`. Flow QA implements its own workflow layout, buttons, and fields with those tokens.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihyeon/flow-qa",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "license": "MIT",
   "author": "Hyeonse Im",
   "repository": {