UI/UX品質の欠陥13件を直す（G-P2 全葉）

.github/workflows/ci.yml

@@ -71,6 +71,11 @@ jobs:
           echo "installing: $spec"
           python -m pip install "$spec"
 
+      # P2-5/7/8（webapp-mockup の実ブラウザ検証）が playwright を使う。devDependencies を
+      # `pnpm install` が既に入れているので、ここでは実行に要る Chromium バイナリだけを取得する。
+      - name: Install Playwright Chromium
+        run: pnpm --filter video-shorts exec playwright install --with-deps chromium
+
       - name: Test
         run: pnpm -r test
 

.gitignore

@@ -37,3 +37,6 @@ _m5c_work/
 # Python のキャッシュ（リポジトリ直下の scripts/ でも生成される）
 __pycache__/
 *.pyc
+
+# Agent tool worktree scratch dirs (isolation:"worktree")
+.claude/worktrees/

video-shorts/AGENTS.md

@@ -15,7 +15,11 @@
 - クラウド / ホスティング: 不要（客の PC 上でローカル動作。kosespark のサーバ・アカウントを介さない）
 - 言語 / ランタイム: Node.js 22（標準モジュールのみ・npm 依存ゼロ） + Python 3（文字起こし: Groq Whisper API）
 - フレームワーク: 無し（`server/index.mjs` は `node:http` のみで実装した素の HTTP サーバ）
-- パッケージ / 依存管理: pnpm workspace（本パッケージ自体は npm 依存ゼロ）。外部バイナリとして ffmpeg/ffprobe が必須（別途導入）
+- パッケージ / 依存管理: pnpm workspace（配布物は npm 依存ゼロ）。外部バイナリとして ffmpeg/ffprobe が必須（別途導入）。
+  2026-08-09 マスター承認により `playwright` を devDependencies へ追加した（P2-5/7/8 の実ブラウザ検証用）。
+  `server/`・`webapp-mockup/` は `build-dist.mjs` が配布物へ含めない保留経路のため、devDependencies が
+  増えても配布物（客のPCへ届くもの）には一切影響しない。CI（`.github/workflows/ci.yml`）で Chromium を
+  インストールしてから `pnpm test` を実行する。
 - DB / データアクセス: 不要（ジョブ状態はファイルシステム上の JSON、`work/`/`output/` はコミット対象外）
 - 認証: **未導入**（`server/index.mjs` の localhost API は現状無認証。2026-07-27 監査 P1-2 で指摘済み、roadmap 参照）
 - IaC / デプロイ: 客の Claude Code へ `start-here.md` 経由でパッケージ＋設定を配置（`build-dist.mjs` が配布物を生成）
@@ -31,7 +35,10 @@
   - ローカル Web UI: `node video-shorts/server/index.mjs`（`http://127.0.0.1:5178`）
   - CLI パイプライン: `node video-shorts/pipeline.mjs init "<動画パス>" --mode <mode> --sub <on/off> --orient <向き>`
 - ビルド: 無し（配布物生成は `node video-shorts/build-dist.mjs`）
-- テスト: `pnpm --filter video-shorts test`（= `node tests/smoke.mjs && python3 tests/transcribe-corrections-check.py`）
+- テスト: `pnpm --filter video-shorts test`（`package.json` の `test` スクリプトに列挙した Node/Python の
+  検査群が直列に走る。2026-08-10 時点で30本、うち3本（`webapp-mobile-layout-check.mjs` /
+  `webapp-aria-pressed-check.mjs` / `webapp-modal-focus-check.mjs`）は Playwright(Chromium) による
+  実ブラウザ検証。中身の正は `package.json` の `test` スクリプト自体を見る（ここで本数を管理しない））
 - Lint: 未導入
 - 型チェック: 対象外（プレーン JS）
 - デプロイ: 対象外（客 PC 上でのローカル動作）

video-shorts/package.json

@@ -2,6 +2,9 @@
   "name": "video-shorts",
   "private": true,
   "scripts": {
-    "test": "node tests/smoke.mjs && python3 tests/transcribe-corrections-check.py && python3 tests/face-mosaic-check.py && python3 tests/mosaic-ui-check.py && node tests/restart-reconnect-check.mjs && node tests/cli-job-isolation-check.mjs && node tests/dist-slim-check.mjs && node tests/render-escape-check.mjs && node tests/term-dictionary-check.mjs && node tests/caption-store-check.mjs && node tests/caption-api-check.mjs && python3 tests/term-apply-check.py && node tests/trim-plan-check.mjs && node tests/trim-duration-check.mjs && python3 tests/trim-sync-check.py && python3 tests/trim-vfr-sync-check.py && node tests/ai-caption-fix-check.mjs"
+    "test": "node tests/smoke.mjs && python3 tests/transcribe-corrections-check.py && python3 tests/face-mosaic-check.py && python3 tests/mosaic-ui-check.py && node tests/restart-reconnect-check.mjs && node tests/cli-job-isolation-check.mjs && node tests/dist-slim-check.mjs && node tests/render-escape-check.mjs && node tests/term-dictionary-check.mjs && node tests/caption-store-check.mjs && node tests/caption-api-check.mjs && python3 tests/term-apply-check.py && node tests/trim-plan-check.mjs && node tests/trim-duration-check.mjs && python3 tests/trim-sync-check.py && python3 tests/trim-vfr-sync-check.py && node tests/ai-caption-fix-check.mjs && node tests/state-atomic-write-check.mjs && node tests/atomic-json-robustness-check.mjs && node tests/av-verify-stream-check.mjs && node tests/srt-builder-timestamp-check.mjs && node tests/job-ttl-check.mjs && node tests/job-quota-check.mjs && node tests/job-quota-race-check.mjs && node tests/job-concurrency-check.mjs && node tests/webapp-font-size-static-check.mjs && node tests/webapp-mobile-layout-static-check.mjs && node tests/webapp-mobile-layout-check.mjs && node tests/webapp-aria-pressed-check.mjs && node tests/webapp-modal-focus-check.mjs"
+  },
+  "devDependencies": {
+    "playwright": "^1.48.0"
   }
 }

video-shorts/pipeline.mjs

@@ -30,6 +30,7 @@ import { runDigestEditor } from "./src/digest-editor.mjs";
 import { stageStart, stageEnd, stageSetSec, readTiming, summaryLine } from "./src/timing.mjs";
 import { makeUniqueJobId } from "./src/job-id.mjs";
 import { aiCaptionFixStage, createDefaultRunModel } from "./src/ai-caption-fix.mjs";
+import { writeJsonAtomically } from "./src/atomic-json.mjs";
 
 const ROOT = path.dirname(fileURLToPath(import.meta.url));
 const WORK_ROOT = path.join(ROOT, "work");
@@ -45,9 +46,11 @@ function log(msg) {
 function readJson(p) {
   return JSON.parse(fs.readFileSync(p, "utf-8"));
 }
+// P2-1: state.json 等の書込みは直接 truncate すると、書いている途中で落ちたときに
+// 壊れて読めなくなる（src/atomic-json.mjs 参照）。writeJson はここ経由で state.json /
+// llm-response.json / candidates.json など全て書くので、ここを atomic にすれば一括で直る。
 function writeJson(p, obj) {
-  fs.mkdirSync(path.dirname(p), { recursive: true });
-  fs.writeFileSync(p, JSON.stringify(obj, null, 2), "utf-8");
+  writeJsonAtomically(p, obj);
 }
 function loadState(workDir) {
   const sp = path.join(workDir, "state.json");