@takagaki/cortex-decisions-viewer 0.4.67 → 0.4.68

package/dist/build.js

@@ -1130,6 +1130,11 @@ async function build(opts) {
                 projectKey: opts.projectKey,
             }
             : undefined,
+        // **URLとトークンが両方そろったときだけ出す。** 片方だけでは貼れるURLを作れないので、
+        // 手順だけが出て「専用URLが空」という一番混乱する形になる（intake と同じ扱い）
+        backlogWebhook: opts.webhookUrl && opts.webhookToken
+            ? { url: opts.webhookUrl, token: opts.webhookToken }
+            : undefined,
         secretKinds: (opts.secretKinds ?? "")
             .split(",")
             .map((s) => s.trim())

package/dist/cli.js

@@ -20,6 +20,8 @@ program
     .option("--intake-token <token>", "投入フォームの共有秘密トークン（環境変数 INTAKE_TOKEN でも可）")
     .option("--project-key <key>", "案件キー（投入フォームのルーティングキー）")
     .option("--secret-kinds <kinds>", "鍵の入力欄を出す連携（カンマ区切り。例: figma,external-sources,backlog）")
+    .option("--webhook-url <url>", "Backlog Webhook 受信のLambda URL（環境変数 WEBHOOK_URL でも可）")
+    .option("--webhook-token <token>", "リアルタイム同期の**案件別**トークン（環境変数 WEBHOOK_TOKEN でも可。艦隊共通トークンを渡さないこと）")
     .action(async (dir, opts) => {
     try {
         const result = await (0, build_1.build)({
@@ -34,6 +36,8 @@ program
             intakeToken: opts.intakeToken ?? process.env.INTAKE_TOKEN,
             projectKey: opts.projectKey,
             secretKinds: opts.secretKinds,
+            webhookUrl: opts.webhookUrl ?? process.env.WEBHOOK_URL,
+            webhookToken: opts.webhookToken ?? process.env.WEBHOOK_TOKEN,
         });
         console.log(`✓ ${result.count} 件のレコードを ${result.outDir} にビルドしました`);
     }

package/dist/render.js

@@ -891,7 +891,28 @@ a.ds-name:hover { text-decoration: underline; }
 .ds-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
 .ds-sync { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
 .ds-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
-.ds-keys { font-size: 12px; color: var(--muted); line-height: 1.6; }
+/* 会議名に入れる目印。**この行が会議カードで一番強い。** 取り込まれるかどうかは
+   会議名にこれが入っているかで決まるので、補足文の一つに埋もれさせない（#117） */
+.ds-keys {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
+  margin: 4px 0 2px; padding: 8px 10px;
+  background: var(--accent-weak); border: 1px solid #c7d7fe; border-radius: 8px;
+  font-size: 13px; color: var(--text); line-height: 1.5;
+}
+.ds-keys-label { font-weight: 700; }
+.ds-keys-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 14px; font-weight: 700; color: var(--accent);
+  background: #fff; border: 1px solid #c7d7fe; border-radius: 6px; padding: 1px 8px;
+}
+.ds-keys-or { font-size: 12px; color: var(--muted); }
+/* 経過措置で登録された会議名。読み取り専用の記録なので、目印より弱く出す（#117） */
+.ds-legacy { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.6; }
+.ds-legacy-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 3px; }
+.ds-legacy-chip {
+  font-size: 11.5px; color: var(--muted);
+  background: #f4f5f7; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
+}
 .ds-drive-note { font-size: 12px; color: #6b7280; line-height: 1.6; }
 .ds-group { border: none; margin: 0; }
 .ds-group > summary {
@@ -1015,6 +1036,11 @@ a.ds-name:hover { text-decoration: underline; }
 .ds-toggle-msg.is-ok { color: #1a7f37; }
 .ds-toggle-msg.is-error { color: #b42318; }
 .badge.ds-notify { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
+/* 登録の由来（#118）。**薄く出す**——読み取りの可否や Gold 対象かより弱い情報で、
+   ここが目立つと「除外」「未宣言」の判断のバッジと同じ強さに見えてしまう */
+.badge.ds-origin { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
+/* 全組織が接続済みのときに、トークン入力欄の代わりに出す1行（#118） */
+.ds-all-connected { color: var(--muted); }
 .ds-gate { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; flex: 0 0 auto; }
 .ds-gate::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
 .ds-gate-ok { color: #1f7a45; }
@@ -1063,6 +1089,12 @@ a.ds-name:hover { text-decoration: underline; }
   background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
   padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
 }
+/* リアルタイム同期の設定手順（#113）。番号付きなのは「上から順に1回やる」作業だから */
+.rt-steps { margin: 0; padding-left: 1.4em; color: var(--text); font-size: 13px; line-height: 1.9; }
+.rt-steps li { margin: 2px 0; }
+/* URLは長いので、入力欄を伸ばしてボタンを右に置く（折り返しても崩れないように wrap） */
+.rt-url-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.rt-url { flex: 1 1 260px; margin-bottom: 0; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; }
 .ops-card-head { display: flex; align-items: center; gap: 10px; }
 .ops-card-icon { font-size: 22px; line-height: 1; }
 .ops-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
@@ -1731,6 +1763,14 @@ ${capabilityState.toString()}
    */
   var LIVE_FLEET = null;
   var LIVE_FLEET_FAILED = false;
+  /**
+   * リアルタイム同期の可否（op=state の realtime。#113）。取得前・取得失敗時は null。
+   *
+   * **fleet とは別に持つ。** fleet は fleet-status.json（夜間バッチの成果物）の射影で、
+   * こちらはルーティング索引（DynamoDB）を引いた結果。同じ入れ物に混ぜると、
+   * 「いつ時点の情報か」の注記がどちらを指すのか説明できなくなる。
+   */
+  var LIVE_REALTIME = null;
   /**
    * 接続状況の値を引く。ライブがあればライブ、無ければ静的ビルドの値。
    * SITE 側はキー名が fleetGeneratedAt だけ異なる（他は fleet-status.json と同名）。
@@ -1881,43 +1921,46 @@ ${capabilityState.toString()}
         }
         var aliases = (s.kind === "会議" && s.ingestState === "on" && s.meetingAliases) || [];
         if (signal) {
-          col.appendChild(el("span", {
+          // **カードで一番強い要素にする（#117）。** 実機で見たとき、目印の案内が
+          // 別名の一覧や注記と同じ細字で並んでいて、「まず会議名にこれを入れる」が
+          // 伝わらなかった。最初に決めた合図が唯一の真実なので、そこだけを太く出す。
+          //
+          // **括弧を付けた形でそのまま出す。** 語だけ見せると 【KC定例】 のように
+          // 混ぜて書かれ、どこも一致せず未仕分けへ落ちる（実際に起きた）。
+          col.appendChild(el("div", {
             class: "ds-keys",
-            text: "会議名に入れる目印: 【" + signal + "】 または [" + signal + "]",
             title: "会議名のどこかにこの括弧付きの目印が入っていると、この案件に振り分けられます（大小文字は問いません）。括弧の中に他の文字を混ぜると一致しません。",
-          }));
+          }, [
+            el("span", { class: "ds-keys-label", text: "会議名にこれを入れてください" }),
+            el("code", { class: "ds-keys-code", text: "【" + signal + "】" }),
+            el("span", { class: "ds-keys-or", text: "または" }),
+            el("code", { class: "ds-keys-code", text: "[" + signal + "]" }),
+          ]));
         }
         if (aliases.length) {
-          // **目印が無くても入る会議。** 既に走っていて改名を頼みにくい定例を、
-          // いまの名前のまま登録したもの。出さないと「なぜこれだけ入るのか」
-          // 「新しい定例をどこに足すのか」が画面から分からない。
+          // **読み取り専用の記録として出す（#117）。** 目印が無くても入る会議＝括弧運用へ
+          // 移る前から走っていて、改名を頼めなかった定例。出さないと「なぜこれだけ入るのか」が
+          // 画面から分からないので残すが、**操作は一切出さない**。
           //
-          // **1件ずつ外せるようにする。** 追加はできて削除はできない、だと
-          // 間違えて登録した名前（日付つきのファイル名など）を消す手段が無い
-          col.appendChild(el("span", {
-            class: "ds-keys",
-            text: "目印なしで取り込む会議:",
-            title: "この名前の会議は、目印が無くてもこの案件に振り分けられます（大小文字・前後の空白は問いません。ファイル名に使えない記号（コロン・スラッシュ等）は同じものとして扱います）。既に走っている定例を改名せずに取り込むための登録です。",
-          }));
-          var alist = el("div", { class: "ds-subitems" });
+          // 以前は1件ずつ外せるようにしていた。実機確認でユーザーが「最初に決めたキー（合図）が
+          // 唯一真実」と確定させたので、画面から触れる余地を無くす——別名を足したり外したり
+          // できる限り、合図と別名のどちらが正なのかが人によって揺れ続ける。
+          // 変更が要るときはリポジトリの ingest-config.json を直接編集する（Lambda も断る）。
+          var legacy = el("div", { class: "ds-legacy" }, [
+            el("span", {
+              text: "経過措置で登録された会議名（目印が無くても取り込まれます。変更はリポジトリの ingest-config.json で行います）",
+            }),
+          ]);
+          var chips = el("div", { class: "ds-legacy-chips" });
           aliases.forEach(function (a) {
-            var row = el("div", { class: "ds-subitem" }, [el("span", { class: "ds-name", text: a })]);
-            row.appendChild(removeButton({
-              label: "この会議を外す",
-              confirmLines: function () {
-                return [
-                  "「" + a + "」を取り込み対象から外します。",
-                  "",
-                  "以後この名前の会議は、会議名に目印を入れない限り取り込まれません。",
-                  "",
-                  "外しますか？",
-                ];
-              },
-              build: function () { return { op: "remove-meeting-alias", alias: a }; },
+            chips.appendChild(el("span", {
+              class: "ds-legacy-chip",
+              text: a,
+              title: "この名前の会議は、目印が無くてもこの案件に振り分けられます（大小文字・前後の空白は問いません。ファイル名に使えない記号（コロン・スラッシュ等）は同じものとして扱います）。",
             }));
-            alist.appendChild(row);
           });
-          col.appendChild(alist);
+          legacy.appendChild(chips);
+          col.appendChild(legacy);
         }
         if (s.driveSync === false) {
           col.appendChild(el("span", { class: "ds-drive-note", text: "Drive自動同期は未設定（手動で置いたファイルの変換のみ）" }));
@@ -2062,10 +2105,40 @@ ${capabilityState.toString()}
 
     pushCap("開発", adders.querySelector('[data-adder="github"]'));
 
+    /**
+     * GitHub の読み取りトークンを入れる欄が要るか（#118）。
+     *
+     * トークンは **GitHub App が入っていない組織のフォールバック**でしかない。全組織が
+     * App（か登録済みトークン）で読めている案件に入力欄を出すと、実機で言われたとおり
+     * 「App に移行したのに、なぜトークンを求められるのか」になる。押す必要が無いものを
+     * 押させるのは、未設定の警告を出し続けるのと同じ種類の誤りなので畳む。
+     *
+     * **判断材料が無いときは出す。** githubOwners は fleet-status.json 由来で、
+     * 夜間バッチがまだ走っていない案件には無い。「情報が無い」を「接続済み」に寄せると、
+     * **一番繋ぎたい立ち上げ直後の案件**から唯一の入口が消える。
+     *
+     * **unknown（確かめられなかった組織）も「要る」側に倒す。** 実態は none かもしれず、
+     * 隠す方に倒すと直せなくなる（画面には組織ごとに「確認できませんでした」と出ている）。
+     */
+    function githubTokenNeeded() {
+      var list = fleetVal("githubOwners") || [];
+      if (!list.length) return true;
+      return list.some(function (o) { return !o || (o.source !== "app" && o.source !== "token"); });
+    }
+
     // 連携の鍵は、その能力のところへ置く（画面下まで往復させない）
     var SECRET_CAP = { figma: "デザイン", backlog: "課題管理", "external-sources": "開発" };
     (SITE.secretKinds || []).forEach(function (k) {
       if (!SECRET_FORMS[k]) return;
+      // 全組織が繋がっているなら、入力欄ではなく**そう言う1行**に畳む（#118）。
+      // 何も出さないと「トークンはどこで入れるのか」が分からなくなる
+      if (k === "external-sources" && !githubTokenNeeded()) {
+        pushCap(SECRET_CAP[k], el("p", {
+          class: "sec-how ds-all-connected",
+          text: "すべての組織に接続済みです（GitHub App / 登録済みトークン）。読み取りトークンの登録は要りません。",
+        }));
+        return;
+      }
       pushCap(SECRET_CAP[k], secretCard(k, SECRET_FORMS[k]));
     });
 
@@ -2242,7 +2315,11 @@ ${capabilityState.toString()}
       // 新規案件——**まさに何を入れれば繋がるのかを知りたい場面**——から、
       // 鍵が未設定であることの手がかりまで消える
       var sk = SECRET_OF_CAP[cap];
-      if (tools[cap] !== "none" && sk && (SITE.secretKinds || []).indexOf(sk) >= 0 && !((fleetVal("secretSources") || {})[sk])) {
+      // **GitHub は「トークンが無い」＝「読めていない」ではない（#118）。** App で読めている
+      // 案件に未設定の警告を出すと、直す必要が無いものを直させることになる。
+      // 読めていない組織があるときは、この下の checks とタイルの状態（warn）が拾う
+      var tokenIsFallback = sk === "external-sources" && !githubTokenNeeded();
+      if (!tokenIsFallback && tools[cap] !== "none" && sk && (SITE.secretKinds || []).indexOf(sk) >= 0 && !((fleetVal("secretSources") || {})[sk])) {
         body.appendChild(el("div", { class: "ds-tile-note", text: "⚠ トークンが未設定です" }));
       }
       // セットアップの残りのうち、この能力のもの。**鍵の注記と同じ位置**に出して
@@ -2458,24 +2535,13 @@ ${capabilityState.toString()}
     // 宣言で隠すと、動いているのに説明が出ない状態になる。
     if (s.kind === "会議" && s.ingestState === "on") {
       box.appendChild(meetingHowTo());
-      // **別名の追加は、既に別名がある案件にだけ出す（#117）。**
+      // **会議名の登録を画面から変える口は置かない（#117 第2弾）。**
       // 別名は括弧付きの合図運用へ移った際の経過措置で、既存案件のメンバーに定例の
-      // 改名を強いないために置いたもの。新規案件は合図1つだけで運用する。
-      // ここでフォームを出し続けると「新しい定例は名前を登録して足す」と読まれ、
-      // 畳むはずの仕組みが案件をまたいで増えていく（Lambda 側でも同じ条件で断る）。
-      if ((s.meetingAliases || []).length) {
-        box.appendChild(addForm({
-          title: "＋ 会議名をそのまま取り込み対象にする",
-          placeholder: "例: GDO様 定例",
-          requiredNote: "会議名を入力してください。",
-          // 先頭の1文が「これは増やすものではない」を伝える。使い方の説明はその後
-          hint: "既存の定例を改名せずに拾うための経過措置の設定です。新しい会議は会議名に合図（【…】）を入れてください。ここに入れた名前と**完全に一致する**会議だけが取り込まれます（部分一致はしません）。カレンダーに出ている会議名だけを入れてください——日付や「- Gemini によるメモ」のような後ろに付く文字列を含めると、どの会議とも一致しません。Bot の招待は別途必要です。",
-          confirmLines: function (v) {
-            return ["この名前の会議を取り込み対象にします。", "", v, "", "追加しますか？"];
-          },
-          build: function (alias) { return { op: "add-meeting-alias", alias: alias }; },
-        }));
-      }
+      // 改名を強いないために置いたもの。第1弾では「既に別名がある案件にだけ追加口を出す」
+      // としたが、実機確認でユーザーが**「最初に決めたキー（合図）が唯一真実」**と確定させた。
+      // 経過措置の案件にフォームを残すと、その案件の中では別名が現役の登録手段に見え続け、
+      // 合図と別名のどちらが正なのかが人によって揺れる。画面は合図1つだけを案内し、
+      // 別名は上のチップ（読み取り専用の記録）で見せるに留める。Lambda 側も add/remove とも断る。
       used = true;
     } else if (s.kind === "会議" && usable("会議", "google-meet")) {
       if (s.ingestState === "unset") {
@@ -2534,6 +2600,11 @@ ${capabilityState.toString()}
         },
         build: function (url) { return { op: "set-backlog-target", url: url }; },
       }));
+      // **接続先の下に置く。** リアルタイム同期は「どのプロジェクトを見るか」が
+      // 決まった後の話で、順序が逆だと、接続先を設定していない案件が先に
+      // Webhook を貼りに行く（貼っても届かない）
+      var rt = realtimeSyncCard();
+      if (rt) box.appendChild(rt);
       used = true;
     }
 
@@ -2698,7 +2769,7 @@ ${capabilityState.toString()}
     wrap.appendChild(el("p", { text: "次の2つが揃った会議だけが取り込まれます。" }));
     var ul = el("ul", { class: "sec-how-list" });
     ul.appendChild(el("li", { text: "cortex-notetaker Bot が招待されている（定例はシリーズに1回でOK）" }));
-    ul.appendChild(el("li", { text: "会議名に上の語のどれかが含まれている" }));
+    ul.appendChild(el("li", { text: "会議名に上の目印が入っている" }));
     wrap.appendChild(ul);
     wrap.appendChild(el("p", { text: "どちらか一方だけでは取り込まれません。" }));
     return wrap;
@@ -3087,6 +3158,18 @@ ${capabilityState.toString()}
     return e;
   }
 
+  /**
+   * 登録の由来の表示（#118）。値は fleet-status.json の origin
+   * （explicit … 登録ファイルに手で書いた / derived … .gitmodules 等からの自動導出 / both）。
+   * **知らない値には何も出さない**（生の内部値を顧客の画面に出さないため）。
+   */
+  var ORIGIN_LABEL = { explicit: "明示登録", derived: "自動検出", both: "明示登録＋自動検出" };
+  var ORIGIN_HELP = {
+    explicit: "開発の登録ファイル（dev-sources.json）に登録されているリポジトリです。ここから登録を削除できます。",
+    derived: ".gitmodules から自動で見つかったリポジトリです。登録ファイルに無いので削除はできません（読み取りを止めることはできます）。",
+    both: "登録ファイルにも書かれていて、.gitmodules からも見つかっているリポジトリです。",
+  };
+
   function extSourceCard(s, meta) {
     var badges = el("div", { class: "ds-badges" });
     var pending = pendingGoldFor(s);
@@ -3100,6 +3183,17 @@ ${capabilityState.toString()}
     else if (s.goldState === "undeclared") badges.appendChild(el("span", { class: "badge ds-undeclared", text: "未宣言（対象外）" }));
     else if (s.gold === false) badges.appendChild(el("span", { class: "badge ds-excluded", text: "除外" }));
     if (s.notify === true) badges.appendChild(el("span", { class: "badge ds-notify", text: "通知先" }));
+    // 登録の由来（#118）。**「登録から削除」が出る/出ないの理由がこれ。** 導出されたリポは
+    // 登録ファイルから消しても翌日また現れるので削除を出していないが、画面には
+    // 「同じ見た目の行なのに、片方にだけ削除がある」としか映らず、毎回考え直すことになる。
+    // GitHub の行だけに出す（削除の出し分けがあるのはここだけで、他は全部 explicit）
+    if (String(s.type).indexOf("github") === 0 && ORIGIN_LABEL[s.origin]) {
+      badges.appendChild(el("span", {
+        class: "badge ds-origin",
+        text: ORIGIN_LABEL[s.origin],
+        title: ORIGIN_HELP[s.origin],
+      }));
+    }
     var gate = DS_GATE[s.gate] || DS_GATE["unknown"];
     var card = el("div", { class: "ds-card" }, [
       el("div", { class: "ds-card-main" }, [
@@ -3285,6 +3379,9 @@ ${capabilityState.toString()}
       // op=state 未対応のLambdaは 400 を返す。通信エラーだけを見ていると空表示になる。
       .then(function (res) { if (!res.ok) throw new Error("http " + res.status); return res.json(); })
       .then(function (j) {
+        // **fleet より先に読む。** fleet-status.json をまだ持たない案件（立ち上げ直後）は
+        // 下で throw するが、リアルタイム同期の可否は索引由来なので独立に決まる
+        LIVE_REALTIME = (j && j.realtime) || null;
         if (!j || !j.fleet) throw new Error("no fleet");
         LIVE_FLEET = normalizeFleet(j.fleet);
         LIVE_FLEET_FAILED = false;
@@ -3325,6 +3422,75 @@ ${capabilityState.toString()}
     return null;
   }
 
+  /**
+   * リアルタイム同期（Backlog Webhook）の設定手順（#113）。
+   *
+   * **出すのは「手順どおり設定すれば実際に効く案件」だけ。** 判断は Lambda（op=state）が返す
+   * realtime に委ねる——画面が持っている静的データからは「ルーティング索引に自分の行が
+   * あるか」が分からないし、2箇所で判定すると片方だけがずれる。
+   *   - supported: false … 固定IP経由で同期している案件。**黙って欠けさせず**理由を1行出す
+   *   - ready: false     … 索引にまだ行が無い。設定しても届かないので手順を出さない
+   *
+   * **URLに載せるトークンは案件別**（SITE.backlogWebhook）。艦隊共通トークンを載せると、
+   * この画面を見られる人が全案件ぶんの偽イベントを投げられる（types.ts の backlogWebhook 参照）。
+   */
+  function realtimeSyncCard() {
+    var rt = LIVE_REALTIME;
+    if (!rt) return null; // 取得前・取得失敗・Backlogを使わない案件
+    if (rt.supported === false) {
+      return el("p", {
+        class: "sec-how",
+        text: "この案件は固定IP経由でBacklogを同期しているため、リアルタイム同期（Webhook）には未対応です。反映は毎晩の同期のタイミングになります。",
+      });
+    }
+    var wh = SITE.backlogWebhook;
+    if (!rt.ready || !wh || !wh.url || !wh.token) return null;
+    var url = wh.url + (wh.url.indexOf("?") === -1 ? "?" : "&") + "t=" + encodeURIComponent(wh.token);
+
+    // URLは**選択できる形**で出す（コピーボタンが使えない環境でも手で取れるように）
+    var field = el("input", { class: "sec-input rt-url", type: "text", readonly: "readonly", spellcheck: "false" });
+    field.value = url;
+    var copyBtn = el("button", { class: "ds-toggle-btn", type: "button", text: "コピー" });
+    var msg = el("div", { class: "ds-toggle-msg" });
+    copyBtn.addEventListener("click", function () {
+      var done = function () { msg.className = "ds-toggle-msg is-ok"; msg.textContent = "✓ コピーしました。"; };
+      var fallback = function () {
+        // clipboard API が無い/拒否された環境（http・古いブラウザ・権限拒否）。
+        // **黙って何も起きないにしない**——選択まではしてやって、次の一手を伝える
+        try {
+          field.focus();
+          field.select();
+          if (document.execCommand && document.execCommand("copy")) return done();
+        } catch (e) { /* 下の案内へ */ }
+        msg.className = "ds-toggle-msg is-error";
+        msg.textContent = "⚠ 自動コピーできませんでした。選択された文字列を手でコピーしてください。";
+      };
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(url).then(done, fallback);
+        } else fallback();
+      } catch (e) { fallback(); }
+    });
+
+    return el("div", { class: "ops-card rt-card" }, [
+      el("div", { class: "ops-card-head" }, [
+        el("span", { class: "ops-card-icon", text: "⚡" }),
+        el("h3", { class: "ops-card-title", text: "リアルタイム同期" }),
+      ]),
+      el("p", { class: "ops-card-desc", text: "Backlog で課題やコメントが変わったときに、その内容をすぐ取り込みます（毎晩の同期を待たずに反映されます）。Backlog 側で一度だけ設定してください。" }),
+      el("ol", { class: "rt-steps" }, [
+        el("li", { text: "Backlog のプロジェクト設定 → インテグレーション → Webhook を開く" }),
+        el("li", { text: "「WebHook URL」に下の案件専用URLを貼り付ける" }),
+        el("li", { text: "通知イベントで「課題の追加」「課題の更新」「課題にコメント」等にチェックを入れて保存する" }),
+      ]),
+      el("div", { class: "rt-url-row" }, [field, copyBtn]),
+      msg,
+      // **この画面は顧客も見る。** URLに秘密が入っていることと、その扱いを書いておく
+      el("p", { class: "sec-note", text: "このURLはこの案件専用です（他の案件には届きません）。秘密のトークンを含むので、貼り付け先は Backlog のこのプロジェクトの設定欄だけにしてください。" }),
+      el("p", { class: "sec-how", text: "反映は受信から約1分後です（1分ごとのミニバッチでまとめて取り込みます）。初回は上の接続先の設定と、夜間同期が一度済んでいることが前提になります。" }),
+    ]);
+  }
+
   /** 鍵の入力欄に出す説明。kind は Lambda 側（resolveSecretTarget）と綴りを合わせること */
   var SECRET_FORMS = {
     "figma": {

package/package.json

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