@takagaki/cortex-decisions-viewer 0.12.64 → 0.12.65

package/README.md

@@ -20,7 +20,7 @@ npx -y @takagaki/cortex-decisions-viewer build --out site --title "Decisions"
 | `index.html` | 画面の骨組みと、埋め込みデータ（`<script type="application/json">`） |
 | `404.html` | `index.html` と同じもの（サブパス直叩きのフォールバック） |
 | `assets/viewer.<内容ハッシュ>.js` / `.css` | 画面のJSとCSS。内容が同じなら名前も同じ（版が同じなら全案件で同じ名前） |
-| `bodies/*.html` | レコードの本文（詳細を開いたときに取りに行く） |
+| `bodies/decisions/<id>.html` ／ `bodies/home.html` ／ `bodies/<区画>/<id>.html` | レコードの本文（詳細を開いたときに取りに行く）。**名前は並び順ではなくレコードから決まる**（cortex-engine #382）。先頭に `<!-- cortex-body id="..." -->` の印が入り、画面は取ってきた本文がそのレコードのものか確かめる |
 | `thumbs/*` | グラフのサムネイル画像 |
 
 **配置は `site/` を丸ごと置く**（`index.html` だけを置いても画面は出ない）。

package/dist/build.js

@@ -44,8 +44,12 @@ exports.readGoldProposals = readGoldProposals;
 exports.buildHomeGrounding = buildHomeGrounding;
 exports.collectMeetings = collectMeetings;
 exports.findBacklogDir = findBacklogDir;
+exports.bodyFileSlug = bodyFileSlug;
+exports.bodyStampId = bodyStampId;
+exports.bodyStampComment = bodyStampComment;
 exports.build = build;
 exports.createRefResolver = createRefResolver;
+const node_crypto_1 = require("node:crypto");
 const node_fs_1 = require("node:fs");
 const path = __importStar(require("node:path"));
 const gray_matter_1 = __importDefault(require("gray-matter"));
@@ -911,6 +915,7 @@ async function parseGeneric(raw, fileName, repoRelDir, repoBaseUrl, branch) {
         summary,
         bodyHtml,
         bodyRef: "",
+        bodyId: "",
         searchText: toSearchText(content),
         fileName,
         editUrl,
@@ -1700,25 +1705,120 @@ function computeLayout(graph) {
     }
 }
 /**
- * 各レコードの bodyHtml を out/bodies/<i>.html に書き出し、bodyRef にパスを設定して
+ * 本文ファイルの名前に使える形へ畳む。
+ *
+ * 🔴 **畳んだときの区別に連番を使わない。** 連番は「並び順で本文を引く」形に戻る——
+ * それが cortex-engine #382 の不具合そのもの（レコードを1件消すと、それより古い全レコードの
+ * 本文が1つずつずれる）。畳んだ跡があるときは**元の値から決まる印**を足して区別する。
+ * 同じ入力なら常に同じ名前になり、他のレコードが増えても消えても変わらない。
+ *
+ * ASCII に倒すのは配布先（S3 + CloudFront）で確かめられていない形を持ち込まないため。
+ * 案件の id と区画名は日本語を含みうる（レコードの id はファイル名から導出されることがある）。
+ */
+function bodyFileSlug(raw) {
+    const s = String(raw ?? "").normalize("NFC");
+    const folded = s
+        .replace(/[^A-Za-z0-9._-]+/g, "-")
+        .replace(/-{2,}/g, "-")
+        // 🔴 `..` を残さない。ポータルの門は URI に `..` を含むと無条件で 403 を返す
+        // （classmethod-cortex-portal の viewer-gate.js）ので、本文が丸ごと読めなくなる
+        .replace(/\.{2,}/g, ".")
+        .replace(/^[-.]+|[-.]+$/g, "");
+    if (s !== "" && folded === s)
+        return s; // 畳んでいない＝そのまま使える
+    const h = shortDigest(s);
+    return folded ? `${folded}-${h}` : h;
+}
+/** 元の値から決まる短い印（並び順に依らない区別に使う。assets のハッシュ名と同じ桁数） */
+function shortDigest(s) {
+    return (0, node_crypto_1.createHash)("sha256").update(s, "utf8").digest("hex").slice(0, 8);
+}
+/**
+ * 本文がどのレコードのものかを表す印。`<kind>:<id>` の形で、
+ * 本文ファイルの先頭コメントと inlineデータの `bodyId` の両方に同じ文字列が入る。
+ *
+ * `<` `>` `&` `"` を逃がすので、id に何が入っていてもコメントを閉じたり属性を割ったりしない。
+ *
+ * `extra`（同じ区画に id が重複したときのファイル名）を渡すと `<kind>:<id>:<extra>` になる。
+ * 🔴 **重複しているときは印にも区別が要る。** 印が `<kind>:<id>` だけだと、重複した2件の
+ * 一方が消えた日に、残った方の本文が**消えた方の印と一致してしまう**——古い画面に
+ * 別レコードの本文が出る（#382 の症状そのもの）。
+ */
+function bodyStampId(kind, id, extra) {
+    const esc = (v) => String(v ?? "")
+        .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    return `${esc(kind)}:${esc(id)}` + (extra ? `:${esc(extra)}` : "");
+}
+/** 本文ファイルの先頭に置く印の行（画面側の BODY_STAMP_RE と対） */
+function bodyStampComment(stampId) {
+    return `<!-- cortex-body id="${stampId}" -->\n`;
+}
+/**
+ * 各レコードの bodyHtml を out/bodies/... へ書き出し、bodyRef にパスを設定して
  * inlineデータ上の bodyHtml を空にする（初期ロードのpayloadから本文を外す）。
+ *
+ * 🔴 **ファイル名は並び順ではなくレコードから決まる**（cortex-engine #382）。
+ * 前は `bodies/<並び順の番号>.html` だった。詳細を開いた画面は埋め込まれた bodyRef を
+ * fetch するので、**削除で番号が詰まると、開きっぱなしの画面が別レコードの本文を出す**。
+ * 見出しはそのレコードのまま本文だけが入れ替わるので、見比べない限り誰も気づけない。
+ *
+ * 置き場:
+ *   決定        bodies/decisions/<id>.html
+ *   Home        bodies/home.html
+ *   区画レコード bodies/<区画のディレクトリ名>/<id>.html
+ *
+ * 併せて各ファイルの先頭に印（bodyStampComment）を埋める。画面はこれを突き合わせて、
+ * 食い違ったら本文を出さない（配布の途中・移行期・id が重複した案件の保険）。
  */
 async function externalizeBodies(site, outAbs) {
     const all = [
-        ...site.decisions,
-        ...(site.home ? [site.home] : []),
-        ...site.sections.flatMap((s) => s.records),
+        ...site.decisions.map((rec) => ({ rec, kind: "decisions", dir: "bodies/decisions" })),
+        ...site.sections.flatMap((s) => s.records.map((rec) => ({ rec, kind: s.name, dir: `bodies/${bodyFileSlug(s.name)}` }))),
     ];
-    if (all.length === 0)
+    const home = site.home;
+    // **先に丸ごと消す。** 出力ディレクトリは作り直されないので、消さないと前のビルドの
+    // 本文（番号の名前を含む）がファイルとして残る。配布先は `aws s3 sync --delete` が
+    // 消すが、手元のプレビューでは古い本文が URL 直打ちで生き続ける（アイコンと同じ手当て）。
+    // 🔴 **0件の回にも消す。** 早期 return より前に置くこと——全部消した案件が
+    // 「前のビルドの本文だけが残る」状態になる（消したはずのものが読める、が一番まずい）
+    await node_fs_1.promises.rm(path.join(outAbs, "bodies"), { recursive: true, force: true });
+    if (all.length === 0 && !home)
         return;
     await node_fs_1.promises.mkdir(path.join(outAbs, "bodies"), { recursive: true });
-    let i = 0;
-    for (const rec of all) {
-        const ref = `bodies/${i}.html`;
-        await node_fs_1.promises.writeFile(path.join(outAbs, ref), rec.bodyHtml ?? "", "utf8");
+    const write = async (rec, ref, stampId) => {
+        await node_fs_1.promises.mkdir(path.dirname(path.join(outAbs, ref)), { recursive: true });
+        await node_fs_1.promises.writeFile(path.join(outAbs, ref), bodyStampComment(stampId) + (rec.bodyHtml ?? ""), "utf8");
         rec.bodyRef = ref;
+        rec.bodyId = stampId;
         rec.bodyHtml = ""; // inlineデータからは本文を除外（payload削減）
-        i++;
+    };
+    // Home は1件だけなので固定名。区画に "home" という名前があってもディレクトリなのでぶつからない
+    if (home)
+        await write(home, "bodies/home.html", bodyStampId("home", home.id));
+    // 同じ区画に同じ id のレコードが2件あるときの避け方。
+    //
+    // 🔴 **`-1` `-2` の連番で避けない（設計レビューの指摘）。** 連番は並び順から決まるので、
+    // 重複した2件の一方が消えた日に、残った方が空いた番号へ繰り上がる。古い画面の bodyRef と
+    // 印がそのまま一致してしまい、**別レコードの本文が出る**——#382 の症状が形を変えて戻る。
+    // だから**重複している側の全員**に、そのレコードの出どころから決まる印を付ける
+    // （誰が消えても残った側の名前は変わらない）。印にも同じ区別を入れる。
+    //
+    // 区別の材料は**リポジトリの中での置き場**（editUrl にパスが入っている）。今は records/ を
+    // 掘らないのでファイル名だけでも一意だが、掘るようになった日に黙って上書きし合う形にしない。
+    //
+    // 大文字小文字だけ違う id も同じ組として数える。macOS のローカルビルドでは
+    // 別名にならず黙って上書きし合うため（S3 は区別するので手元だけ壊れる、が一番気づけない）
+    const originOf = (rec) => `${rec.editUrl ?? ""}|${rec.fileName}`;
+    const dupCount = new Map();
+    for (const { rec, dir } of all) {
+        const key = `${dir}/${bodyFileSlug(rec.id)}`.toLowerCase();
+        dupCount.set(key, (dupCount.get(key) ?? 0) + 1);
+    }
+    for (const { rec, kind, dir } of all) {
+        const base = `${dir}/${bodyFileSlug(rec.id)}`;
+        const dup = (dupCount.get(base.toLowerCase()) ?? 0) > 1;
+        const ref = dup ? `${base}-${shortDigest(originOf(rec))}.html` : `${base}.html`;
+        await write(rec, ref, bodyStampId(kind, rec.id, dup ? originOf(rec) : undefined));
     }
 }
 async function build(opts) {
@@ -1979,6 +2079,7 @@ async function parseDecision(raw, fileName, repoRelDir, repoBaseUrl, branch, ref
         bodyLinks: extractBodyLinks(content),
         bodyHtml,
         bodyRef: "",
+        bodyId: "",
         searchText: toSearchText(content),
         rstatus: data.status != null ? String(data.status) : "",
         isLatest: isLatestPath(filePath),

package/dist/render.js

@@ -4183,6 +4183,21 @@ button.site-icon[aria-busy="true"] .site-icon-plus { opacity: 0; }
   padding: 10px 12px; font-size: 13px; line-height: 1.8; color: var(--muted);
 }
 .draft-note > .deleted-note { flex: 1 0 100%; margin-bottom: 0; }
+/* 「画面が古くなっています」の帯（#382）。本文の代わりに出るので、本文と同じ幅で
+   目に入る濃さにする。帯は症状・行は一手——文は1つ、押すものは1つだけ */
+.stale-note {
+  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 16px;
+  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px;
+  padding: 10px 12px; font-size: 13.5px; line-height: 1.8; color: #92400e;
+}
+.draft-note > .stale-note { flex: 1 0 100%; margin-bottom: 0; }
+.stale-reload-btn {
+  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
+  padding: 6px 14px; border-radius: 999px;
+  border: 1px solid #b45309; background: #fff; color: #92400e;
+  font-size: 13px; font-weight: 600;
+}
+.stale-reload-btn:hover { background: #fef3c7; }
 /* 消したものは、消えたと分かる形で残す（一覧・詳細の両方） */
 .is-deleted { text-decoration: line-through; color: var(--muted); }
 /* 消したレコードでは、直す口（AIで編集・GitHubで編集）を押させない */
@@ -5291,7 +5306,7 @@ ${calendarAddUrl.toString()}
       return '<a class="wikilink" data-go="' + attr + '">' + disp + "</a>";
     });
   }
-  // 本文は bodies/<i>.html に外出しされ詳細表示時に fetch されるため、linkify は loadBody 側で適用する
+  // 本文は bodies/ 以下へ外出しされ詳細表示時に fetch されるため、linkify は loadBody 側で適用する
   // （ここで inline bodyHtml に適用すると検索テキストにHTMLが混ざるため適用しない）。
 
   // Gold層ディレクトリ名（英語）→ タブ・フォルダの表示名（日本語）の辞書。
@@ -5988,16 +6003,88 @@ ${calendarAddUrl.toString()}
     });
     return box;
   }
-  // 本文HTMLは bodies/<i>.html に外出しされている。詳細表示時にfetchして埋める（キャッシュ・失敗時フォールバック付き）
+  /**
+   * この画面が古くなったか（開いたあとに並びが変わったか）。
+   *
+   * 立つのは2つ: 本文の印が食い違った・削除が成功した。立ったあとの詳細表示は
+   * 本文を取りに行かず帯を出す（cortex-engine #382）。
+   */
+  var pageStale = false;
+  /**
+   * 本文の先頭に埋めた印（build.ts の bodyStampComment と対）。
+   * **両側を同じ形にしておくこと**——片方だけ変えると、印が常に食い違って
+   * 全レコードの本文が出なくなる（帯だけの画面になる）。
+   */
+  // ⚠ 埋め込みJSはテンプレート文字列の中なので、正規表現の逆スラッシュは2本で書くこと
+  // （1本だと素の s になり、**印が常に食い違って全レコードの本文が消える**）
+  var BODY_STAMP_RE = /^\\s*<!--\\s*cortex-body id="([^"]*)"\\s*-->/;
+  /**
+   * 「画面が古くなっています」の帯。**帯は症状・行は一手・繰り返さない。**
+   *
+   * 🔴 **自動で読み込み直さない。** 押した人の書きかけ・開いている場所を勝手に捨てない。
+   * 押す口は1つだけ置いて、押すかどうかは読み手が決める。
+   */
+  function staleReloadNote() {
+    var box = el("div", { class: "stale-note" }, [
+      el("span", { text: "画面が古くなっています。再読み込みしてください。" }),
+    ]);
+    var btn = el("button", { class: "stale-reload-btn", type: "button", text: "再読み込み" });
+    btn.addEventListener("click", function () { location.reload(); });
+    box.appendChild(btn);
+    return box;
+  }
+  /**
+   * 本文の代わりに帯を出す（本文は出さない——別レコードの本文を読ませないため）。
+   *
+   * 🔴 **帯を出す経路の after（done）はここ1か所に集める。** Home は本文が決まるまで
+   * 枠を隠している（renderHome）ので、呼び忘れた経路は**帯ごと消えて真っ白になる**。
+   * 3経路（印の食い違い・404/403・削除後）で書き分けると、1つだけ落ちても気づけない。
+   */
+  function showStaleBody(mount, after) {
+    pageStale = true;
+    mount.innerHTML = "";
+    mount.appendChild(staleReloadNote());
+    if (typeof after === "function") after(mount);
+  }
+  // 本文HTMLは bodies/<種別>/<id>.html に外出しされている。詳細表示時にfetchして埋める
+  // （キャッシュ・失敗時フォールバック付き）
   var bodyCache = {};
   function loadBody(rec, mount, after) {
     function done() { if (typeof after === "function") after(mount); }
+    // 並びが変わったと分かっている画面では、本文を取りに行かない（取れても別レコードのもの）
+    if (pageStale && rec && rec.bodyRef) { showStaleBody(mount, after); return; }
     if (!rec || !rec.bodyRef) { mount.innerHTML = linkifyWiki((rec && rec.bodyHtml) || ""); done(); return; }
     if (bodyCache[rec.bodyRef] != null) { mount.innerHTML = bodyCache[rec.bodyRef]; done(); return; }
     mount.innerHTML = '<div class="body-loading">読み込み中…</div>';
-    fetch(rec.bodyRef).then(function (res) { if (!res.ok) throw new Error("http " + res.status); return res.text(); })
-      .then(function (html) { var lk = linkifyWiki(html); bodyCache[rec.bodyRef] = lk; mount.innerHTML = lk; done(); })
-      .catch(function () {
+    fetch(rec.bodyRef).then(function (res) {
+      // 🔴 **本文が無いのは「配信されていない」ではなく「この画面が古い」。** 配布は
+      // aws s3 sync --delete なので、開いたままの画面が指す本文は建て直しで消える。
+      //
+      // 🔴 **403 も同じ扱い（実装レビューの指摘）。** 本番の配信は CloudFront の OAC で、
+      // 一覧の権限を渡していないので**無いオブジェクトは 404 ではなく 403 で返る**
+      // （403 を握りつぶすカスタムエラー応答も置いていない）。404 だけを見ていると、
+      // この帯は**本番でだけ出ない**。403 は通行証が切れたときにも返るが、
+      // そのときも一手は同じ（再読み込みで入り口へ戻って取り直す）
+      if (res.status === 404 || res.status === 403) { var e = new Error("stale"); e.stale = true; throw e; }
+      if (!res.ok) throw new Error("http " + res.status);
+      return res.text();
+    })
+      .then(function (html) {
+        // 🔴 **印が一致しない本文は出さない。** 別のレコードの本文を、見出しはそのままに
+        // 出してしまうのが cortex-engine #382 の症状——読み手は「その決定はそう決まった」と
+        // 受け取るし、画面は正常に見えるので**見比べない限り気づけない**。
+        // 読めないのは気づけるが、違うものが読めるのは気づけない。だから出さない側に倒す。
+        var m = BODY_STAMP_RE.exec(html);
+        if (rec.bodyId && (!m || m[1] !== rec.bodyId)) {
+          // キャッシュにも入れない（正しい本文で開き直せるように）
+          showStaleBody(mount, after);
+          return;
+        }
+        var lk = linkifyWiki(m ? html.slice(m[0].length) : html);
+        bodyCache[rec.bodyRef] = lk; mount.innerHTML = lk; done();
+      })
+      .catch(function (err) {
+        if (err && err.stale) { showStaleBody(mount, after); return; }
         // 🔴 文字列連結でHTMLを組み立てない（editUrl は frontmatter 由来の外部文字列）。
         // el() は class/text/html 以外のキーをそのまま setAttribute に渡すので、
         // href に javascript: を置けてしまう。**isHttp() が唯一の防御**（保険ではない）
@@ -16260,6 +16347,30 @@ ${calendarAddUrl.toString()}
     var meta = app.querySelector(".detail-meta");
     if (meta && meta.parentNode) meta.parentNode.insertBefore(note, meta.nextSibling);
   }
+  /**
+   * **削除を押して成功したときだけ**呼ぶ。この画面の並びが変わったことが確定するので、
+   * 以後の詳細表示で本文を取りに行かせない（cortex-engine #382）。
+   *
+   * 🔴 **markRecordDeleted の中に置いてはいけない（設計レビューの指摘）。** あちらは
+   * トゥームストーンの復元（applyDeleteTombstones → appendRecordFooter）からも呼ばれる。
+   * 前のセッションで消したレコードを**開き直しただけ**の画面まで古い扱いになり、
+   * そのページの本文が軒並み出なくなる。
+   *
+   * 自動で読み込み直さない・モーダルも出さない——押した人の開いている場所を勝手に捨てない。
+   */
+  function markPageStale() {
+    pageStale = true;
+    if (app.querySelector(".stale-note")) return; // 帯は1本だけ（繰り返さない）
+    var stale = staleReloadNote();
+    // ⚠ 未確認の警告帯（.draft-note）の**中**には入れない。同じ黄色の帯が入れ子になって、
+    // どちらが何を言っているのか読めなくなる。すぐ下に、別の帯として並べる
+    var banner = app.querySelector(".draft-note");
+    if (banner && banner.parentNode) { banner.parentNode.insertBefore(stale, banner.nextSibling); return; }
+    var note = app.querySelector(".deleted-note");
+    if (note && note.parentNode) { note.parentNode.insertBefore(stale, note.nextSibling); return; }
+    var meta = app.querySelector(".detail-meta");
+    if (meta && meta.parentNode) meta.parentNode.insertBefore(stale, meta.nextSibling);
+  }
   /**
    * 人の確認印が付いた記録か。**3値の意味は infra の HUMAN_CONFIRMED_STATUSES と同じ**
    * （active = 人が確認済みにした印／superseded = active を経た記録の差し替え後／
@@ -16293,7 +16404,7 @@ ${calendarAddUrl.toString()}
     btn.addEventListener("click", async function () {
       // **確認を await する。** 落とすと Promise が truthy で確認なしに消える
       if (!(await confirmDanger(deleteConfirmLines(rec, path), { okLabel: "削除する", returnTo: btn }))) return;
-      await sendDeleteRecord(rec, path, msg, btn, function () { markRecordDeleted(rec); });
+      await sendDeleteRecord(rec, path, msg, btn, function () { markRecordDeleted(rec); markPageStale(); });
     });
     return { btn: btn, msg: msg };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.64",
+  "version": "0.12.65",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,