@takagaki/cortex-decisions-viewer 0.12.19 → 0.12.21

package/README.md

@@ -3,7 +3,7 @@
 Cortexの意思決定記録（`Decisions/*.md`）を**静的サイトにビルドして閲覧する**CLIツール。
 各レコードに「**Edit on GitHub**」リンクを付与し、閲覧画面から直接GitHubのエディタで編集できる。
 
-`md-meta-view` の代替として、Cortex専用に自前実装したもの。出力は単一の自己完結HTML（外部依存・サーバー不要）で、AWS Amplify Hosting 等の静的ホスティングにそのまま載る。
+`md-meta-view` の代替として、Cortex専用に自前実装したもの。出力は外部依存もサーバーも要らない静的ファイル一式で、AWS Amplify Hosting や S3 + CloudFront にそのまま載る。**JS と CSS は HTML に埋め込まず、`assets/` の外部ファイルに出す**——配信側（AIS ポータル）の Content-Security-Policy がインラインの `<script>` / `<style>` を実行しないため（[#301](https://github.com/classmethod-internal/cortex-tools/issues/301)）。
 
 ## 使い方
 
@@ -13,7 +13,22 @@ Cortexの意思決定記録（`Decisions/*.md`）を**静的サイトにビル
 npx -y @takagaki/cortex-decisions-viewer build --out site --title "Decisions"
 ```
 
-ビルド結果は `site/index.html`（と `404.html`）。`?id=<id>` で個別レコードに直リンクできる。
+ビルド結果は `site/` ディレクトリ一式。`?id=<id>` で個別レコードに直リンクできる。
+
+| 出力 | 中身 |
+| --- | --- |
+| `index.html` | 画面の骨組みと、埋め込みデータ（`<script type="application/json">`） |
+| `404.html` | `index.html` と同じもの（サブパス直叩きのフォールバック） |
+| `assets/viewer.<内容ハッシュ>.js` / `.css` | 画面のJSとCSS。内容が同じなら名前も同じ（版が同じなら全案件で同じ名前） |
+| `bodies/*.html` | レコードの本文（詳細を開いたときに取りに行く） |
+| `thumbs/*` | グラフのサムネイル画像 |
+
+**配置は `site/` を丸ごと置く**（`index.html` だけを置いても画面は出ない）。
+ファイル名を内容ハッシュにしているのは、`Cache-Control` を付けずに置かれた
+`index.html` をブラウザが発見的にキャッシュするため——固定名だと
+「利用者の手元に残った古い `index.html` が、消えた JS を指す」形になり、
+強制再読み込みまで画面が真っ白になる。中身が変われば URL も変わるなら起きない。
+配置側では `index.html` / `404.html` を `no-cache`、`assets/` を長期キャッシュにするとよい。
 
 ## CLI
 

package/dist/build.js

@@ -55,6 +55,16 @@ const repo_1 = require("./repo");
 // 直近のGold昇格で追加されたレコードのパス集合。レコード生成の各所から参照するのでモジュールスコープに置く
 // （引数で引き回すと呼び出し側の改修が広範囲になる）。build() の冒頭で1回だけ解決する。
 let LATEST_PATHS = new Set();
+/**
+ * このレコードが「直近のGold昇格で追加されたもの」か。
+ *
+ * **照合の手前で NFC に正規化する。** 集合側（git 由来）は NFC で入っているが、
+ * こちらのパスは readdir 由来なので、ファイルシステムが NFD で返す環境（macOS の
+ * 一部の経路）では**同じ日本語名でも一致しない**。正規化はこの1箇所に集める。
+ */
+function isLatestPath(filePath) {
+    return LATEST_PATHS.has(filePath.normalize("NFC"));
+}
 // AIからの更新提案（`.cortex/gold-proposals.json` 由来）を、レコードのパスで引ける形にしたもの。
 // **LATEST_PATHS と同じ置き方にしている**——どちらも「レコードを組み立てるその場で、
 // リポジトリルート相対のパスを鍵に引く」もので、引き回すと parseDecision / parseGeneric の
@@ -849,7 +859,7 @@ async function parseGeneric(raw, fileName, repoRelDir, repoBaseUrl, branch) {
         editUrl,
         rtype: data.type != null ? String(data.type) : "",
         rstatus: data.status != null ? String(data.status) : "",
-        isLatest: LATEST_PATHS.has(filePath),
+        isLatest: isLatestPath(filePath),
         proposals: takeProposals(filePath),
         relations: toRelations(data.relations),
         source: data.source != null ? String(data.source) : "",
@@ -1878,7 +1888,26 @@ async function build(opts) {
     // 本文HTML（リッチ・かさばる）を bodies/ へ外出しし、inlineデータからは除外する。
     // 一覧・グラフ・検索は inline の searchText（軽量plaintext）で動き、詳細表示時にbodyRefをfetchする。
     await externalizeBodies(site, outAbs);
-    const html = (0, render_1.renderSite)(site);
+    // CSSとJSは外部ファイルへ出す。**インラインのままだと配信先で画面が出ない**——
+    // AISポータルは /p/<案件>/cm/ に厳格な Content-Security-Policy を返しており、
+    // インラインの style / script を実行しない（cortex-tools #301）。
+    //
+    // ファイル名を内容ハッシュにする理由: 配置先の S3 は Cache-Control を付けずに
+    // 置かれ、ブラウザは Last-Modified からの発見的キャッシュをする。固定名だと
+    // 「利用者の手元に残った古い index.html が、消えた JS を指す」形になり、
+    // 強制再読み込みまで真っ白になる。中身が違えば URL も違うなら、それが起きない。
+    //
+    // 配置側（cortex-engine の build-viewer.yml）の責務: aws s3 sync --delete が
+    // 古いハッシュのファイルを消すこと、index.html に Cache-Control: no-cache を
+    // 付けること（assets/ は内容ハッシュ名なので長期キャッシュでよい）。
+    const assetSources = (0, render_1.viewerAssetSources)();
+    const assets = (0, render_1.viewerAssetNames)(assetSources);
+    await node_fs_1.promises.mkdir(path.join(outAbs, "assets"), { recursive: true });
+    await node_fs_1.promises.writeFile(path.join(outAbs, assets.css), assetSources.css, "utf8");
+    await node_fs_1.promises.writeFile(path.join(outAbs, assets.js), assetSources.js, "utf8");
+    // **renderSite ではなく renderSiteWithAssets を呼ぶ。** 引数を1つ落としても
+    // 型が通ってしまう形にすると、本番の出力が黙ってインラインに戻る
+    const html = (0, render_1.renderSiteWithAssets)(site, assets);
     await node_fs_1.promises.writeFile(path.join(outAbs, "index.html"), html, "utf8");
     // SPA的フォールバック（?id= はクエリなので不要だが、サブパス直叩き対策として404も用意）
     await node_fs_1.promises.writeFile(path.join(outAbs, "404.html"), html, "utf8");
@@ -1918,7 +1947,7 @@ async function parseDecision(raw, fileName, repoRelDir, repoBaseUrl, branch, ref
         bodyRef: "",
         searchText: toSearchText(content),
         rstatus: data.status != null ? String(data.status) : "",
-        isLatest: LATEST_PATHS.has(filePath),
+        isLatest: isLatestPath(filePath),
         proposals: takeProposals(filePath),
         fileName,
         editUrl,

package/dist/render.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UNSETTLED_LIMITS = exports.LIVE_CONFIRM_LIMITS = void 0;
 exports.renderSite = renderSite;
+exports.renderSiteWithAssets = renderSiteWithAssets;
+exports.viewerAssetSources = viewerAssetSources;
+exports.viewerAssetNames = viewerAssetNames;
 exports.sanitizeRegisteredNow = sanitizeRegisteredNow;
 exports.sanitizeHarnessSchedules = sanitizeHarnessSchedules;
 exports.sanitizeHarnessShelf = sanitizeHarnessShelf;
@@ -29,9 +32,19 @@ exports.ingestedAtOf = ingestedAtOf;
 exports.keyMissingText = keyMissingText;
 exports.deriveCapTile = deriveCapTile;
 exports.renderConnectionMap = renderConnectionMap;
+const node_crypto_1 = require("node:crypto");
 const meet_guide_images_1 = require("./meet-guide-images");
-/** SiteDataを単一の自己完結HTML（埋め込みデータ+CSS+JS）にレンダリングする */
-function renderSite(site) {
+/**
+ * SiteDataをHTMLにレンダリングする。
+ *
+ * `assets` を渡すと、CSSとJSを**外部ファイルへの参照**（link/script src）で出す。
+ * 配信側（AISポータル）の Content-Security-Policy がインラインの style / script を
+ * 実行しないため（cortex-tools #301）。本番の出力（build()）は必ずこちら。
+ *
+ * `assets` 省略時は従来どおり単一の自己完結HTML（埋め込みデータ+CSS+JS）を返す。
+ * JSDOM で画面を動かす既存テストがこの形に依存している（外部ファイルは読まれない）。
+ */
+function renderSite(site, assets) {
     // </script> によるブレイクアウトを防ぐため < をエスケープして埋め込む
     // Claude Code Web ディープリンク（この案件リポ＋狙ったプロンプトで開く）。repoBaseUrl から slug を導出（追加入力なし）。
     const repoSlug = site.repoBaseUrl
@@ -54,6 +67,13 @@ function renderSite(site) {
         ? `<a class="gh-btn" href="${escapeHtml(site.repoBaseUrl)}" target="_blank" rel="noopener" title="コンテキストリポジトリをGitHubで開く">${GITHUB_ICON}</a>`
         : "";
     const askBtn = `<a class="ask-ai-btn" href="${escapeHtml(askUrl)}" target="_blank" rel="noopener" title="Claude Code Web でこの案件のリポジトリを開き、プロジェクトについて質問・調査できます">💬 プロジェクトについてAIに聞く</a>`;
+    // CSPでインラインが拒否される環境向けの外部参照形。省略時は従来どおり埋め込む
+    const styleTag = assets
+        ? `<link rel="stylesheet" href="${escapeHtml(assets.css)}" />`
+        : `<style>${CSS}</style>`;
+    const scriptTag = assets
+        ? `<script src="${escapeHtml(assets.js)}"></script>`
+        : `<script>${CLIENT_JS}</script>`;
     return `<!DOCTYPE html>
 <html lang="ja">
 <head>
@@ -61,7 +81,7 @@ function renderSite(site) {
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="robots" content="noindex, nofollow" />
 <title>${safeTitle}</title>
-<style>${CSS}</style>
+${styleTag}
 </head>
 <body>
 <header class="site-header">
@@ -77,7 +97,7 @@ function renderSite(site) {
 </footer>
 ${connMap ? `<template id="conn-map">${connMap}</template>\n` : ""}<script type="application/json" id="tutorial-data">${tutorialJson}</script>
 <script type="application/json" id="site-data">${dataJson}</script>
-<script>${CLIENT_JS}</script>
+${scriptTag}
 </body>
 </html>`;
 }
@@ -89,6 +109,31 @@ function escapeHtml(s) {
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;");
 }
+/**
+ * 外部ファイル参照の形でレンダリングする（assets必須）。
+ *
+ * build() はこちらだけを呼ぶ。renderSite は assets を省略できるので、
+ * 本番の出力にインラインが戻る退行を型で止められない。その1点のための薄い関数。
+ */
+function renderSiteWithAssets(site, assets) {
+    return renderSite(site, assets);
+}
+/** 外部ファイルへ書き出す中身。埋め込み形（renderSite の assets 省略時）と同一の文字列 */
+function viewerAssetSources() {
+    return { css: CSS, js: CLIENT_JS };
+}
+/**
+ * 中身から外部ファイル名を決める。
+ *
+ * 内容ハッシュ（sha256の先頭8桁）にするのは、配信先がブラウザのキャッシュを
+ * 持つため。固定名だと「古いHTMLと新しいJS」の組み合わせが起こりうるが、
+ * 中身が変われば名前も変わるなら起こらない。**同じ中身なら同じ名前**なので、
+ * 版が同じかぎり全案件で同じファイル名になる。
+ */
+function viewerAssetNames(sources) {
+    const h = (text) => (0, node_crypto_1.createHash)("sha256").update(text, "utf8").digest("hex").slice(0, 8);
+    return { css: `assets/viewer.${h(sources.css)}.css`, js: `assets/viewer.${h(sources.js)}.js` };
+}
 /** 接続マップの能力定義（表示順・絵文字は詳細カードの流儀を踏襲） */
 /**
  * アダプタのロゴ。**公式配布のSVGをそのまま埋め込む。**

package/dist/repo.js

@@ -33,13 +33,22 @@ function resolveRepo(opts) {
  * 最新コミットと同じ「日」のパイプラインコミットまでをまとめて1回の実行として扱う。
  *
  * clone が浅い（--depth 1 等）・git が無い環境では**空集合を返す**（ラベルが出ないだけで壊れない）。
+ *
+ * 🔴 **パスは `-z`（NUL区切り）で取り、NFC に正規化してから集合に入れる。**
+ *   - `-z` … 既定の git（`core.quotePath=true`）は非ASCIIを含むパスを
+ *     `"Cortex/Rules/records/\345\261\245…md"` と引用符＋8進エスケープで出す。レコードは
+ *     **日本語のファイル名**なので、そのまま入れると照合側（readdir の生 UTF-8）と
+ *     一致せず「最新」ラベルが**1件も出なくなる**（#328 で実際に踏んだ）。
+ *   - NFC … リポジトリのパスは NFC が正（cortex-engine PR #211
+ *     https://github.com/classmethod-internal/cortex-engine/pull/211）。#211 以前に
+ *     NFD で入ったコミットが履歴に残っているので、照合の手前で揃える。
  */
 function latestGeneratedPaths(cwd) {
     const empty = new Set();
     try {
         // 夜間パイプラインのコミットを新しい順に数件。--grep はコミットメッセージの規約に依存するため、
         // 変わっても「ラベルが出ない」だけで済むように例外は握る。
-        const log = (0, node_child_process_1.execSync)('git log -n 20 --grep="自動追記" --pretty=format:"%H %cI" -- Cortex/', { cwd, encoding: "utf8", stdio: ["ignore", "pipe", "ignore"] }).trim();
+        const log = (0, node_child_process_1.execFileSync)("git", ["log", "-n", "20", "--grep=自動追記", "--pretty=format:%H %cI", "--", "Cortex/"], { cwd, encoding: "utf8", stdio: ["ignore", "pipe", "ignore"] }).trim();
         if (!log)
             return empty;
         const rows = log.split("\n").map((l) => {
@@ -53,11 +62,15 @@ function latestGeneratedPaths(cwd) {
         for (const r of rows) {
             if (r.day !== latestDay)
                 break; // 直近の実行日ぶんだけ
-            const files = (0, node_child_process_1.execSync)(`git show --diff-filter=A --name-only --pretty=format: ${r.sha}`, { cwd, encoding: "utf8", stdio: ["ignore", "pipe", "ignore"] }).trim();
-            for (const f of files.split("\n")) {
-                const p = f.trim();
+            const files = (0, node_child_process_1.execFileSync)("git", ["show", "-z", "--no-color", "--diff-filter=A", "--name-only", "--pretty=format:", r.sha], { cwd, encoding: "utf8", stdio: ["ignore", "pipe", "ignore"] });
+            for (const f of files.split("\0")) {
+                // 空の `--pretty=format:` では先頭に改行は出ない（git 2.39 で実測）が、format が
+                // 非空だと `<ヘッダ>\n<最初のパス>` と改行で区切られる。将来ヘッダを足しても
+                // パスが壊れないよう**先頭の改行だけ**落とす（trim だと名前の前後の空白まで削り、
+                // その名前のレコードが照合できなくなる）
+                const p = f.replace(/^\n+/, "");
                 if (p)
-                    out.add(p);
+                    out.add(p.normalize("NFC"));
             }
         }
         return out;

package/package.json

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