petari 0.3.0 → 0.4.0

package/README.md

@@ -54,7 +54,7 @@ petari の更新で規約文が変わった場合は、`petari init` を再実
 |---|---|
 | `petari [path]` | changes.md を適用。省略時は Downloads とプロジェクト直下から自動検出 (直近 30 分)。`--clip` でクリップボードから |
 | `petari undo [ID]` | 履歴を巻き戻す (手修正がある場合は警告) |
-| `petari show <ID>` | VS Code の差分ビューで履歴を表示。`--mine` で適用後の手修正分、`--changes` で変更概要 |
+| `petari show [ID]` | 履歴の差分を表示 (VS Code、なければブラウザにフォールバック)。`--edit` で現在のファイルを差分を見ながら手修正、`--mine` で適用後の手修正分、`--changes` で変更概要、`--browser` でブラウザ強制 |
 | `petari list` | 履歴の一覧と合計サイズ |
 | `petari protocol` | AI への規約文を標準出力に出す (slnmix / repomix 連携用) |
 | `petari init` | プロジェクト初回セットアップ (`--yes` で全提案に同意) |
@@ -72,8 +72,10 @@ petari の更新で規約文が変わった場合は、`petari init` を再実
 - **エンコーディング保全**: Shift_JIS / UTF-8 (BOM 有無)・CRLF / LF・末尾改行を完全維持。
   変更していない行は元のバイト列をそのまま書き戻す (レガシー VB.NET 資産でも安全)
 - **失敗レポート**: そのまま AI チャットに貼り返せる形式で出力。再依頼が 1 コピペで済む
-- **実行時依存ゼロ**: サプライチェーン対策として外部パッケージに依存しない
-  (Shift_JIS 変換テーブルも Node 組み込み ICU から自動生成して同梱)
+- **実行時依存ゼロ**: サプライチェーン対策として npm の実行時依存パッケージを持たない
+  (Shift_JIS 変換テーブルも Node 組み込み ICU から自動生成して同梱)。
+  唯一の同梱サードパーティはブラウザ編集 UI の Monaco Editor (Microsoft 製・MIT) で、
+  固定バージョンをビルド時にパッケージへ同梱し、実行時のダウンロードは行わない
 
 ## セキュリティ設計
 
@@ -81,14 +83,25 @@ petari の更新で規約文が変わった場合は、`petari init` を再実
 
 ### 通信・依存関係
 
-- **実行時のネットワーク通信は一切行いません**。AI との通信機能はなく、入力はローカルファイル
-  またはクリップボードのみ。テレメトリ・自動更新もありません
+- **外部へのネットワーク通信は一切行いません**。AI との通信機能はなく、入力はローカルファイル
+  またはクリップボードのみ。テレメトリ・自動更新もありません。
+  例外は `show --edit` のブラウザ編集時のみで、**127.0.0.1 (ループバック) の一時ポート**で
+  待ち受けます — 128bit 乱数トークン付き URL・Host/Origin 検証・無操作 30 分で自動終了。
+  実行できるスクリプトは CSP で「**同梱した Monaco Editor** (script-src 'self') と
+  **自前ブートストラップ** (応答ごとの nonce)」に限定し、閲覧レポート等は JS 実行不可。
+  Monaco 資産の配信は起動時に列挙した同梱ファイルの許可リストへの完全一致のみです。
+  外部への送信・CDN・外部リソースの読み込みは一切発生しません
 - **実行時依存パッケージはゼロ**です。npm のインストールスクリプト (postinstall 等) も
   使用しません。Shift_JIS 変換テーブルは Node.js 組み込みの ICU から生成しリポジトリに
   同梱しています (外部データの取り込みなし)
+- 同梱サードパーティは **monaco-editor (Microsoft, MIT) の 1 件のみ**。開発時に固定
+  バージョンを取得し (7 日未満の新規公開バージョンは取得しないポリシー)、ビルド時に
+  パッケージへ同梱します。ライセンス・ThirdPartyNotices も同梱し、実行時に外部から
+  コードを取得することはありません
 - 子プロセスの起動はすべて `execFile`/`spawn` の配列引数で行い、シェルを経由しません
   (コマンドインジェクション不成立)。起動するのは `git` / `reg` / `powershell` /
-  `pbcopy`・`pbpaste` / VS Code (`code`) のみです
+  `pbcopy`・`pbpaste` / VS Code (`code`) / 既定ブラウザ起動 (`open` / `xdg-open` /
+  PowerShell `Start-Process`) のみです
 
 ### 入力の取り扱い (信頼境界)
 
@@ -105,6 +118,10 @@ changes.md (AI 出力)・クリップボード・リポジトリに同梱され
   表示します (表示偽装対策)
 - 差分ビューアのコマンド (`vscodeCommand` 設定) は PATH 上のコマンド名か絶対パスのみ許可し、
   リポジトリ内スクリプトを指せる相対パスと UNC パスを拒否します
+- ブラウザ編集 (`show --edit`) の保存は、トークン検証に加えて**保存先パスの再検証・
+  シンボリックリンク拒否・SHA-256 楽観ロック** (ページを開いた後の外部変更を検出し 409) を
+  通します。編集対象はサーバー起動時に確定し、ブラウザ側からパスは指定できません。
+  保存も §8 のエンコーディング保全 (無変更行は元バイト維持) を通ります
 
 ### 適用の安全弁と監査性
 

package/dist/cli.js

@@ -13,7 +13,7 @@ const HELP = `petari — paste AI chat patches onto your codebase
 Usage:
   petari [path]         changes.md を適用 (省略時: Downloads から自動検出)
   petari undo [ID]      履歴を巻き戻す (ID 省略時: 直近)
-  petari show <ID>      履歴の差分を VS Code で表示
+  petari show [ID]      履歴の差分を表示 (VS Code / ブラウザ)。--edit で手修正
   petari list           履歴の一覧を表示
   petari protocol       AI への規約文を標準出力に出す
   petari init           プロジェクト初回セットアップ
@@ -23,6 +23,9 @@ Options:
   -v, --version         バージョンを表示
 `;
 export async function main(argv) {
+    // pnpm run は "--" をそのまま渡してくる (npm と異なり消費しない) ため先頭の区切りを除く
+    if (argv[0] === "--")
+        argv = argv.slice(1);
     if (argv.includes("-h") || argv.includes("--help")) {
         process.stdout.write(HELP);
         return 0;

package/dist/commands/show.js

@@ -1,9 +1,15 @@
 /**
- * petari show <ID> — VS Code のネイティブ差分ビューで履歴を表示 (§4.3)。
- * - 既定: before vs after (AI の変更そのもの)
+ * petari show [ID] — 履歴の差分表示 (§4.3)。
+ * - 既定: before vs after。VS Code の差分ビューで開き、VS Code が見つからない
+ *   場合 (ENOENT/EINVAL) は自己完結 HTML レポートを生成してブラウザで開く
  * - --mine: after vs 現在のファイル = 適用後の手修正分だけを可視化
- * - --changes: 保存済み changes.md の CHANGES セクション (概要・Mermaid) を表示
- * 複数ファイルの履歴はファイル一覧を提示して選択させる (--file で直接指定も可)。
+ * - --edit: スナップショット vs 現在の実ファイル。VS Code では右ペインが実ファイル
+ *   (そのまま編集可)。VS Code がなければ 127.0.0.1 限定の一時サーバーでブラウザ編集
+ * - --browser: VS Code を試さずブラウザ表示を強制
+ * - --no-open: ブラウザを開かずパス/URL の表示のみ (SSH・テスト用)
+ * - --changes: 保存済み changes.md の CHANGES セクションを表示
+ * 複数ファイルの履歴は VS Code 経路では一覧から選択させ (--file で直接指定も可)、
+ * ブラウザ経路では全ファイルをまとめて表示する。
  */
 import { execFile } from "node:child_process";
 import { existsSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
@@ -12,8 +18,14 @@ import { isAbsolute, join } from "node:path";
 import { parseArgs } from "node:util";
 import { promisify } from "node:util";
 import { invalidPathReason } from "../core/applier.js";
+import { diffLines, toSideBySideRows } from "../core/diff.js";
+import { buildReportPage } from "../core/diff-html.js";
+import { EncodingError, decodeFile } from "../core/encoding.js";
 import { parseChanges } from "../core/parser.js";
+import { openInBrowser } from "../infra/browser.js";
 import { loadConfig } from "../infra/config.js";
+import { monacoVendorDir, startDiffServer } from "../infra/diff-server.js";
+import { isInsideRoot } from "../infra/files.js";
 import { historyRoot, listHistoryIds, readManifest } from "../infra/history.js";
 import { createInterface } from "node:readline/promises";
 import { findProjectRoot } from "../infra/root.js";
@@ -35,6 +47,14 @@ export function invalidVscodeCommandReason(cmd) {
     }
     return null;
 }
+/**
+ * コマンド不在の判定。ENOENT に加え、Windows では .cmd/.bat をシェル非経由で
+ * spawn できず EINVAL になる (CVE-2024-27980 対応後の Node) ため両方を対象にする。
+ */
+function isCommandMissing(e) {
+    const code = e?.code;
+    return code === "ENOENT" || code === "EINVAL";
+}
 let emptyFileCache = null;
 function emptyFile() {
     if (emptyFileCache === null) {
@@ -61,6 +81,20 @@ export function resolveDiffPair(root, historyDir, entry, mine) {
         title: `${entry.path} (before → after)`,
     };
 }
+/** --edit 用: スナップショット (before / --mine は after) vs 現在の実ファイル (編集対象) */
+export function resolveEditPair(root, historyDir, entry, mine) {
+    if (entry.op === "delete")
+        return { error: `${entry.path} は delete のため編集対象がありません` };
+    const current = join(root, entry.path);
+    if (!existsSync(current))
+        return { error: `${entry.path} は現在存在しません (undo 済み?)` };
+    const snap = join(historyDir, mine ? "after" : "before", entry.path);
+    return {
+        left: existsSync(snap) ? snap : emptyFile(),
+        right: current,
+        title: `${entry.path} (${mine ? "適用直後" : "適用前"} → 現在 / 右側が編集対象)`,
+    };
+}
 async function pickEntry(entries) {
     out("対象ファイルを選択してください:");
     entries.forEach((e, i) => out(`  ${i + 1}. ${e.op.padEnd(7)} ${e.path}`));
@@ -76,6 +110,104 @@ async function pickEntry(entries) {
         rl.close();
     }
 }
+/** 履歴スナップショット/実ファイルを行テキストに読む (欠損側は空 = create/delete の片側) */
+function readLines(path) {
+    if (!existsSync(path))
+        return [];
+    return decodeFile(new Uint8Array(readFileSync(path))).lines.map((l) => l.text);
+}
+/** 静的差分レポートの HTML を生成する (テストから直接検証できるよう export) */
+export function generateReportHtml(root, hdir, id, entries, mine) {
+    const leftLabel = mine ? "適用直後 (after)" : "適用前 (before)";
+    const rightLabel = mine ? "現在のファイル" : "適用後 (after)";
+    const sections = entries.map((e) => {
+        if (mine && e.op === "delete") {
+            return {
+                path: e.path,
+                op: e.op,
+                body: { kind: "note", note: "delete のため --mine の比較対象がありません" },
+            };
+        }
+        const leftPath = join(hdir, mine ? "after" : "before", e.path);
+        const rightPath = mine ? join(root, e.path) : join(hdir, "after", e.path);
+        if (mine && !existsSync(rightPath)) {
+            return {
+                path: e.path,
+                op: e.op,
+                body: { kind: "note", note: "現在存在しません (undo 済み?)" },
+            };
+        }
+        try {
+            const a = readLines(leftPath);
+            const b = readLines(rightPath);
+            return {
+                path: e.path,
+                op: e.op,
+                body: { kind: "rows", rows: toSideBySideRows(a, b, diffLines(a, b)), leftLabel, rightLabel },
+            };
+        }
+        catch (cause) {
+            const msg = cause instanceof EncodingError ? cause.message : "テキストとして表示できません";
+            return { path: e.path, op: e.op, body: { kind: "note", note: `差分を表示できません: ${msg}` } };
+        }
+    });
+    const title = `petari 履歴 ${id}${mine ? " (手修正分)" : ""}`;
+    return buildReportPage(title, new Date().toLocaleString("ja-JP"), sections);
+}
+/** 静的レポートを一時ファイルへ書き出してブラウザで開く */
+async function runBrowserReport(root, hdir, id, entries, mine, noOpen) {
+    const html = generateReportHtml(root, hdir, id, entries, mine);
+    const reportPath = join(mkdtempSync(join(tmpdir(), "petari-show-")), "report.html");
+    writeFileSync(reportPath, html);
+    out(`差分レポートを書き出しました: ${reportPath}`);
+    if (!noOpen) {
+        try {
+            await openInBrowser(reportPath);
+        }
+        catch {
+            out("ブラウザを開けませんでした。上記のファイルを直接開いてください");
+        }
+    }
+    return 0;
+}
+/** ブラウザ編集サーバーを起動し、終了 (quit ボタン / 無操作 / Ctrl+C) まで待つ */
+async function runEditServer(root, hdir, id, entries, mine, config, noOpen) {
+    if (!existsSync(join(monacoVendorDir(), "vs", "loader.js"))) {
+        err("petari: ブラウザ編集用の同梱エディタ (Monaco) が見つかりません");
+        err("  開発環境では pnpm gen:monaco を実行してください");
+        return 1;
+    }
+    const sub = mine ? "after" : "before";
+    const editEntries = entries.map((e) => {
+        const snap = join(hdir, sub, e.path);
+        return {
+            path: e.path,
+            absPath: join(root, e.path),
+            snapshotPath: existsSync(snap) ? snap : null,
+            op: e.op,
+        };
+    });
+    const handle = await startDiffServer({
+        title: `petari 履歴 ${id} の編集`,
+        entries: editEntries,
+        root,
+        leftLabel: mine ? "適用直後 (after)" : "適用前 (before)",
+        fallbackEol: config.newFile.eol,
+    });
+    out(`ブラウザ編集サーバーを起動しました: ${handle.url}`);
+    out("  終了はページ内の「サーバーを終了」ボタンか Ctrl+C (無操作 30 分で自動終了)");
+    if (!noOpen) {
+        try {
+            await openInBrowser(handle.url);
+        }
+        catch {
+            out("ブラウザを開けませんでした。上記の URL を直接開いてください");
+        }
+    }
+    const reason = await handle.closed;
+    out(reason === "quit" ? "petari: 編集サーバーを終了しました" : "petari: 無操作のため編集サーバーを自動終了しました");
+    return 0;
+}
 export async function showCommand(argv) {
     const { values, positionals } = parseArgs({
         args: argv,
@@ -84,11 +216,15 @@ export async function showCommand(argv) {
             mine: { type: "boolean", default: false },
             changes: { type: "boolean", default: false },
             file: { type: "string" },
+            edit: { type: "boolean", default: false },
+            browser: { type: "boolean", default: false },
+            "no-open": { type: "boolean", default: false },
         },
         allowPositionals: true,
     });
     const root = findProjectRoot(process.cwd(), values.root);
     const config = loadConfig(root);
+    const noOpen = values["no-open"];
     const ids = listHistoryIds(root);
     if (ids.length === 0) {
         err("petari: 履歴がありません");
@@ -113,50 +249,80 @@ export async function showCommand(argv) {
         err(`petari: 履歴 ${id} に適用済みファイルがありません`);
         return 1;
     }
-    let entry;
+    // manifest は改ざんされ得るため、対象パスを全件検証する (§9。読み取り側にも適用)
+    for (const e of applied) {
+        const pathReason = invalidPathReason(e.path);
+        if (pathReason !== null) {
+            err(`petari: manifest のパスが不正です: ${e.path} (${pathReason})`);
+            return 1;
+        }
+    }
+    // --edit は実ファイルへ書き込むため、undo と同じく symlink 経由のルート外も拒否する
+    if (values.edit) {
+        for (const e of applied) {
+            if (!isInsideRoot(root, join(root, e.path))) {
+                err(`petari: manifest のパスがプロジェクト外を指しています: ${e.path}`);
+                return 1;
+            }
+        }
+    }
+    let fileEntry = null;
     if (values.file !== undefined) {
         const found = applied.find((e) => e.path === values.file);
         if (found === undefined) {
             err(`petari: ${values.file} は履歴 ${id} にありません`);
             return 1;
         }
-        entry = found;
+        fileEntry = found;
     }
-    else if (applied.length === 1) {
-        entry = applied[0];
-    }
-    else {
-        const picked = await pickEntry(applied);
-        if (picked === null) {
-            err("petari: 中止しました");
+    const browserEntries = fileEntry !== null ? [fileEntry] : applied;
+    if (!values.browser) {
+        // VS Code 経路。壊れた vscodeCommand 設定はここで止める (--browser には影響させない)
+        const cmdReason = invalidVscodeCommandReason(config.vscodeCommand);
+        if (cmdReason !== null) {
+            err(`petari: ${cmdReason}: ${config.vscodeCommand}`);
             return 1;
         }
-        entry = picked;
-    }
-    // manifest は改ざんされ得るため、パスと起動コマンドをここでも検証する (§9)
-    const pathReason = invalidPathReason(entry.path);
-    if (pathReason !== null) {
-        err(`petari: manifest のパスが不正です: ${entry.path} (${pathReason})`);
-        return 1;
-    }
-    const cmdReason = invalidVscodeCommandReason(config.vscodeCommand);
-    if (cmdReason !== null) {
-        err(`petari: ${cmdReason}: ${config.vscodeCommand}`);
-        return 1;
-    }
-    const pair = resolveDiffPair(root, hdir, entry, values.mine);
-    if ("error" in pair) {
-        err(`petari: ${pair.error}`);
-        return 1;
-    }
-    out(`${config.vscodeCommand} --diff で開きます: ${pair.title}`);
-    try {
-        await execFileP(config.vscodeCommand, ["--diff", pair.left, pair.right]);
+        let entry;
+        if (fileEntry !== null) {
+            entry = fileEntry;
+        }
+        else if (applied.length === 1) {
+            entry = applied[0];
+        }
+        else {
+            const picked = await pickEntry(applied);
+            if (picked === null) {
+                err("petari: 中止しました");
+                return 1;
+            }
+            entry = picked;
+        }
+        const pair = values.edit
+            ? resolveEditPair(root, hdir, entry, values.mine)
+            : resolveDiffPair(root, hdir, entry, values.mine);
+        if ("error" in pair) {
+            err(`petari: ${pair.error}`);
+            return 1;
+        }
+        out(`${config.vscodeCommand} --diff で開きます: ${pair.title}`);
+        try {
+            await execFileP(config.vscodeCommand, ["--diff", pair.left, pair.right]);
+            return 0;
+        }
+        catch (e) {
+            if (!isCommandMissing(e)) {
+                err(`petari: ${config.vscodeCommand} の起動に失敗しました: ${e instanceof Error ? e.message : String(e)}`);
+                err("  .petari/config.json の vscodeCommand を確認してください");
+                return 1;
+            }
+            out(`${config.vscodeCommand} が見つからないためブラウザで表示します`);
+            // フォールバック: 選択済みの 1 件ではなく全ファイルをまとめて表示する
+            // (レポート/編集サーバーはページ内ナビで全件を扱えるため)
+        }
     }
-    catch (e) {
-        err(`petari: ${config.vscodeCommand} の起動に失敗しました: ${e instanceof Error ? e.message : String(e)}`);
-        err("  .petari/config.json の vscodeCommand を確認してください");
-        return 1;
+    if (values.edit) {
+        return runEditServer(root, hdir, id, browserEntries, values.mine, config, noOpen);
     }
-    return 0;
+    return runBrowserReport(root, hdir, id, browserEntries, values.mine, noOpen);
 }

package/dist/core/diff-html.js

@@ -0,0 +1,272 @@
+/**
+ * ブラウザ差分ビューの HTML 生成 (§4.3)。純粋な文字列生成のみ (I/O なし)。
+ *
+ * セキュリティ方針:
+ * - 補間箇所は全て escapeHtml を通す。ファイル内容は非信頼入力 (AI 出力) として扱い、
+ *   </textarea> や <script> の注入を無効化する
+ * - JS は一切使わない (フォーム POST のみ)。外部リソース参照ゼロ・インライン CSS のみ。
+ *   未変更範囲の折りたたみも <details> (JS 不要) で行う
+ * - textarea の値はエスケープ以外の加工禁止。制御文字を除去すると無編集行が
+ *   「変更」扱いになり、保存時にユーザーが触っていない行の文字が消えるため。
+ *   読み取り専用の diff ペインのみ表示用に双方向制御文字等を除去する
+ * - フォームの action とリンクは相対パスのみ (URL のトークンを HTML 本文に埋めない)
+ */
+import { intralineRanges } from "./diff.js";
+/** 1 ファイルの diff 表示上限行数 (巨大ファイルでのメモリ・描画保護) */
+export const MAX_SECTION_ROWS = 20_000;
+/** 変更行の前後に見せる未変更行数と、折りたたみを発動する最小行数 */
+const FOLD_CONTEXT = 3;
+const FOLD_MIN = 10;
+export function escapeHtml(s) {
+    return s
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+}
+// 表示専用の無害化 (term.ts と同じ集合: C0/C1 制御と Trojan Source 双方向制御)。
+// textarea には適用しないこと (上記セキュリティ方針)
+const DISPLAY_CONTROL_CHARS = new RegExp("[\\u0000-\\u0008\\u000B-\\u001F\\u007F-\\u009F\\u061C\\u200E\\u200F\\u202A-\\u202E\\u2066-\\u2069]", "g");
+function displayText(s) {
+    return escapeHtml(s.replace(DISPLAY_CONTROL_CHARS, ""));
+}
+/** 全ページ共通の CSP。サーバー応答ヘッダにも同じ値を使う (meta の form-action 等は
+ *  無視されるブラウザがあるため、サーバー配信時はヘッダ側が正) */
+export const CSP = "default-src 'none'; style-src 'unsafe-inline'; form-action 'self'; frame-ancestors 'none'; base-uri 'none'";
+const STYLE = `
+:root{
+  --bg:#ffffff;--fg:#1f2328;--muted:#59636e;--border:#d1d9e0;--surface:#f6f8fa;
+  --accent:#0969da;--ok:#1a7f37;--err:#d1242f;--rewrite:#8250df;
+  --del-bg:#ffebe9;--del-hl:#ffb3ad;--ins-bg:#dafbe1;--ins-hl:#a5e8b7;
+  --radius:8px;
+}
+@media (prefers-color-scheme: dark){:root{
+  --bg:#0d1117;--fg:#e6edf3;--muted:#8d96a0;--border:#30363d;--surface:#161b22;
+  --accent:#4493f8;--ok:#3fb950;--err:#f85149;--rewrite:#ab7df8;
+  --del-bg:#3b1a1d;--del-hl:#792e34;--ins-bg:#122b1d;--ins-hl:#1c5b34;
+}}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--fg);line-height:1.5;
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif}
+code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.wrap{max-width:1180px;margin:0 auto;padding:1.2rem 1.4rem 4rem}
+header.page h1{font-size:1.25rem;margin:.2rem 0}
+header.page .meta{color:var(--muted);font-size:.82rem;margin:.1rem 0 0}
+nav.files{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:.4rem;
+  padding:.6rem 0;margin:.4rem 0 .2rem;background:var(--bg);border-bottom:1px solid var(--border)}
+nav.files a{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;text-decoration:none;
+  color:var(--accent);background:var(--surface);border:1px solid var(--border);
+  border-radius:2em;padding:.18em .7em}
+nav.files a:hover{border-color:var(--accent)}
+section.file{border:1px solid var(--border);border-radius:var(--radius);margin:1rem 0;
+  overflow:hidden;background:var(--bg)}
+.fhead{display:flex;align-items:center;gap:.6em;padding:.55rem .8rem;
+  background:var(--surface);border-bottom:1px solid var(--border)}
+.fhead code{font-size:.88rem;font-weight:600;word-break:break-all}
+.op{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
+  padding:.12em .6em;border-radius:2em;flex-shrink:0}
+.op-replace{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
+.op-create{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
+.op-delete{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
+.op-rewrite{color:var(--rewrite);background:color-mix(in srgb,var(--rewrite) 14%,transparent)}
+.dlabels{display:grid;grid-template-columns:1fr 1fr;font-size:.74rem;color:var(--muted);
+  background:var(--surface);border-bottom:1px solid var(--border)}
+.dlabels div{padding:.28rem .7rem}
+.dlabels div+div{border-left:1px solid var(--border)}
+table.diff{border-collapse:collapse;width:100%;table-layout:fixed;
+  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5}
+col.cno{width:3.4em}
+.diff td{vertical-align:top;padding:0 .55em}
+.diff td.no{text-align:right;color:var(--muted);user-select:none;background:var(--surface);
+  border-right:1px solid var(--border);padding:0 .5em}
+.diff td.no.split{border-left:1px solid var(--border)}
+.diff td.code{white-space:pre-wrap;word-break:break-all}
+.diff td.code.del{background:var(--del-bg)}
+.diff td.code.ins{background:var(--ins-bg)}
+.code.del .hl{background:var(--del-hl);border-radius:2px}
+.code.ins .hl{background:var(--ins-hl);border-radius:2px}
+.diff td.code.empty{background:repeating-linear-gradient(45deg,var(--surface),
+  var(--surface) 4px,var(--bg) 4px,var(--bg) 9px)}
+details.fold summary{cursor:pointer;list-style:none;text-align:center;font-size:.76rem;
+  color:var(--accent);background:var(--surface);padding:.28rem .6rem;
+  border-top:1px solid var(--border);border-bottom:1px solid var(--border);user-select:none}
+details.fold summary::-webkit-details-marker{display:none}
+details.fold summary:hover{text-decoration:underline}
+details.fold[open] summary{border-bottom-style:dashed}
+p.note{color:var(--muted);font-size:.84rem;margin:.6rem .8rem}
+.banner{border-radius:6px;padding:.55rem .9rem;margin:.7rem 0;font-size:.88rem;border:1px solid}
+.banner.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
+  background:color-mix(in srgb,var(--ok) 10%,transparent)}
+.banner.err{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,transparent);
+  background:color-mix(in srgb,var(--err) 10%,transparent)}
+section.editor{margin:1rem 0}
+textarea{width:100%;min-height:24rem;padding:.8rem;resize:vertical;
+  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;
+  color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}
+textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
+button{font-size:.88rem;font-weight:600;padding:.45em 1.4em;border-radius:6px;cursor:pointer;
+  border:1px solid transparent;background:var(--accent);color:#fff}
+button:hover{filter:brightness(1.1)}
+button.secondary{background:var(--surface);color:var(--muted);border-color:var(--border)}
+.actions{display:flex;align-items:center;gap:.8rem;margin:.7rem 0}
+.footer-actions{display:flex;align-items:center;gap:1rem;margin:1.6rem 0 0;
+  padding-top:.9rem;border-top:1px solid var(--border)}
+.footer-actions form{margin:0}
+a.back{color:var(--accent);text-decoration:none;font-size:.88rem}
+a.back:hover{text-decoration:underline}
+ul.list{list-style:none;margin:.8rem 0;padding:0;border:1px solid var(--border);
+  border-radius:var(--radius);overflow:hidden}
+ul.list li{display:flex;align-items:center;gap:.7em;padding:.6rem .9rem;background:var(--bg)}
+ul.list li+li{border-top:1px solid var(--border)}
+ul.list a{color:var(--accent);text-decoration:none;font-family:ui-monospace,Menlo,monospace;
+  font-size:.9rem;word-break:break-all}
+ul.list a:hover{text-decoration:underline}
+ul.list .note{color:var(--muted);font-size:.78rem;margin-left:auto;flex-shrink:0}
+`.trim();
+function page(title, bodyHtml) {
+    return `<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="${CSP}">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+<style>${STYLE}</style>
+</head>
+<body>
+<div class="wrap">
+${bodyHtml}
+</div>
+</body>
+</html>
+`;
+}
+function opBadge(op) {
+    return `<span class="op op-${op}">${op}</span>`;
+}
+/** 文字単位ハイライト付きでコードを描画する (範囲は元テキストのコードポイント index) */
+function renderCode(text, ranges) {
+    if (ranges.length === 0)
+        return displayText(text);
+    const chars = Array.from(text);
+    const parts = [];
+    let pos = 0;
+    for (const r of ranges) {
+        if (r.start > pos)
+            parts.push(displayText(chars.slice(pos, r.start).join("")));
+        parts.push(`<span class="hl">${displayText(chars.slice(r.start, r.end).join(""))}</span>`);
+        pos = r.end;
+    }
+    if (pos < chars.length)
+        parts.push(displayText(chars.slice(pos).join("")));
+    return parts.join("");
+}
+const COLGROUP = `<colgroup><col class="cno"><col><col class="cno"><col></colgroup>`;
+function renderRow(row) {
+    const intra = row.kind === "change" && row.left !== null && row.right !== null
+        ? intralineRanges(row.left.text, row.right.text)
+        : null;
+    const cell = (side, cls, ranges, split) => {
+        const noCls = split ? "no split" : "no";
+        return side === null
+            ? `<td class="${noCls}"></td><td class="code empty"></td>`
+            : `<td class="${noCls}">${side.no}</td><td class="code${cls}">${renderCode(side.text, ranges)}</td>`;
+    };
+    const delCls = row.kind === "del" || row.kind === "change" ? " del" : "";
+    const insCls = row.kind === "ins" || row.kind === "change" ? " ins" : "";
+    return `<tr>${cell(row.left, delCls, intra?.left ?? [], false)}${cell(row.right, insCls, intra?.right ?? [], true)}</tr>`;
+}
+/** 変更行の前後 FOLD_CONTEXT 行だけを見せ、長い未変更ランは折りたたみ対象にする */
+function segmentRows(rows) {
+    const keep = new Array(rows.length).fill(false);
+    rows.forEach((r, i) => {
+        if (r.kind !== "same") {
+            const from = Math.max(0, i - FOLD_CONTEXT);
+            const to = Math.min(rows.length - 1, i + FOLD_CONTEXT);
+            for (let j = from; j <= to; j++)
+                keep[j] = true;
+        }
+    });
+    const segs = [];
+    let i = 0;
+    while (i < rows.length) {
+        const k = keep[i];
+        let j = i;
+        while (j < rows.length && keep[j] === k)
+            j++;
+        const chunk = rows.slice(i, j);
+        segs.push({ fold: !k && chunk.length >= FOLD_MIN, rows: chunk });
+        i = j;
+    }
+    return segs;
+}
+function renderDiffBlocks(rows, leftLabel, rightLabel) {
+    const shown = rows.slice(0, MAX_SECTION_ROWS);
+    const omitted = rows.length - shown.length;
+    const parts = [
+        `<div class="dlabels"><div>${escapeHtml(leftLabel)}</div><div>${escapeHtml(rightLabel)}</div></div>`,
+    ];
+    if (shown.every((r) => r.kind === "same") && shown.length > 0) {
+        parts.push(`<p class="note">変更はありません (全 ${shown.length} 行一致)</p>`);
+    }
+    for (const seg of segmentRows(shown)) {
+        const table = `<table class="diff">${COLGROUP}${seg.rows.map(renderRow).join("\n")}</table>`;
+        if (seg.fold) {
+            const from = seg.rows[0]?.left?.no ?? seg.rows[0]?.right?.no ?? 0;
+            parts.push(`<details class="fold"><summary>未変更の ${seg.rows.length} 行を表示 (${from} 行目〜)</summary>${table}</details>`);
+        }
+        else {
+            parts.push(table);
+        }
+    }
+    if (omitted > 0)
+        parts.push(`<p class="note">以降 ${omitted} 行を省略しました</p>`);
+    return parts.join("\n");
+}
+function renderFileSection(s, id) {
+    const inner = s.body.kind === "note"
+        ? `<p class="note">${escapeHtml(s.body.note)}</p>`
+        : renderDiffBlocks(s.body.rows, s.body.leftLabel, s.body.rightLabel);
+    const anchor = id === null ? "" : ` id="${id}"`;
+    return `<section class="file"${anchor}>
+<div class="fhead">${opBadge(s.op)}<code>${escapeHtml(s.path)}</code></div>
+${inner}
+</section>`;
+}
+/** 静的差分レポート (全ファイルを 1 ページに)。閲覧専用・自己完結 */
+export function buildReportPage(title, generatedAt, sections) {
+    const nav = sections.length > 1
+        ? `<nav class="files">${sections
+            .map((s, i) => `<a href="#f${i}">${escapeHtml(s.path)}</a>`)
+            .join("")}</nav>`
+        : "";
+    const body = sections.map((s, i) => renderFileSection(s, `f${i}`)).join("\n");
+    return page(title, `<header class="page"><h1>${escapeHtml(title)}</h1>
+<p class="meta">${escapeHtml(generatedAt)} ・ ${sections.length} ファイル</p></header>
+${nav}
+${body}`);
+}
+/** 編集サーバーのファイル一覧ページ */
+export function buildIndexPage(title, items, idleMinutes) {
+    const list = items
+        .map((item, i) => {
+        const note = item.note === null ? "" : `<span class="note">${escapeHtml(item.note)}</span>`;
+        return `<li>${opBadge(item.op)}<a href="f/${i}">${escapeHtml(item.path)}</a>${note}</li>`;
+    })
+        .join("\n");
+    const body = `<header class="page"><h1>${escapeHtml(title)}</h1>
+<p class="meta">無操作 ${idleMinutes} 分でサーバーは自動終了します。編集途中の内容は保存されません。</p></header>
+<ul class="list">
+${list}
+</ul>
+<div class="footer-actions"><form method="post" action="quit"><button class="secondary">サーバーを終了</button></form></div>`;
+    return page(title, body);
+}
+/** エラー・終了などの単文ページ (409 / 404 / 終了しました 等) */
+export function buildMessagePage(title, message, backHref) {
+    const back = backHref === null
+        ? ""
+        : `\n<div class="footer-actions"><a class="back" href="${escapeHtml(backHref)}">← 戻る</a></div>`;
+    return page(title, `<header class="page"><h1>${escapeHtml(title)}</h1></header>\n<p>${escapeHtml(message)}</p>${back}`);
+}