@takagaki/cortex-decisions-viewer 0.4.58 → 0.4.59

package/dist/render.js

@@ -828,6 +828,11 @@ a.ds-name:hover { text-decoration: underline; }
 .ds-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
 .badge.ds-gold { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
 .badge.ds-excluded { background: #eceef1; color: #6b7280; }
+/* 保存は済んでいるが、接続状況の再計算（1〜2分）がまだのもの。**確定と同じ見た目にしない**
+   ——リロードで消えたときに「戻された」と読まれるため、点線で区別して （反映中） を添える。
+   **幅と色まで指定する。** border-style だけだと、border を持たない .ds-excluded 側は
+   初期値の medium(≈3px)/currentColor に解決され、押した向きによって太さ3倍・色が別物になる */
+.badge.is-pending { border: 1px dashed currentColor; opacity: 0.85; }
 .badge.ds-undeclared { background: #fff4e5; color: #9a6700; }
 .ds-toggle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
 .ds-toggle-btn { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; }
@@ -1787,8 +1792,14 @@ const CLIENT_JS = `
     // **共通部品（stateToggle）に載せる。** 以前はここだけ変更者名をダイアログで聞いており、
     // 同じカードの中で2つの流儀が並んでいた。送信・エラー表示・向きの反転も個別実装で、
     // 片方だけ直したときにずれる状態だった。
+    // **控えはボタンにも効かせる。** バッジだけに効かせると、リロード後に同じカードの中で
+    // バッジが「対象です」・ボタンが「始めますか？」と逆を主張する。しかもその状態で
+    // ボタンの表示どおりに押すと、サーバは既に同じ値なので changed:false を返し、
+    // ボタンが永久に反転しない——**15分（TTL切れ）まで止められなくなる**。
+    // stateToggle の doc が要件として書いている「戻す操作を必ず残す」を破る。
+    var pendingNow = pendingGoldFor(s);
     return stateToggle({
-      on: s.gold === true,
+      on: pendingNow ? pendingNow.value : s.gold === true,
       labelOn: "Gold昇格を止める",
       labelOff: "Gold昇格を始める",
       confirmOn: [
@@ -1804,6 +1815,23 @@ const CLIENT_JS = `
       build: function (next) {
         return { op: "set-channel-gold", ref: s.ref, value: next };
       },
+      // 保存できた直後に、この行のバッジだけを「反映中」に差し替える。
+      // 一覧そのものは触らない（結果メッセージや他行の状態を巻き込まないため）。
+      pending: function (next, toggleEl) {
+        // **表示済みの値に戻したなら「反映中」ではない。** ON→OFF と押し直した場合、
+        // 画面が出している値と一致するので待つものが無い。ここで消さないと、
+        // 何も保留していないのに (反映中) が残り、リロードで消えて不可解に見える。
+        var back = next === (s.gold === true);
+        if (back) clearPendingGold(s.ref);
+        else markPendingGold(s.ref, next);
+        var card = toggleEl && toggleEl.parentNode;
+        var badges = card && card.querySelector(".ds-badges");
+        if (!badges) return;
+        var b = badges.querySelector(".badge.ds-gold, .badge.ds-excluded, .badge.ds-undeclared");
+        var spec = pendingBadgeSpec(next, back);
+        if (b) { b.className = spec.cls; b.textContent = spec.text; }
+        else badges.insertBefore(el("span", { class: spec.cls, text: spec.text }), badges.firstChild);
+      },
     });
   }
 
@@ -2098,9 +2126,14 @@ const CLIENT_JS = `
   // 片方だけ直したときにずれる（既存の goldToggle で使っている作法をそのまま一般化したもの）。
 
   /**
-   * サーバへ設定変更を送る。**成功しても一覧やバッジは書き換えない**
+   * サーバへ設定変更を送る。**一覧は書き換えない**
    * （接続状況は夜間バッチのスナップショットなので、「もう効いている」と誤解させないため）。
-   * 呼び出し側は onDone で自分のボタンの向きだけを反転させる。
+   * 呼び出し側は onDone で自分のボタンの向きを反転させる。
+   *
+   * **例外はバッジの先出し。** opts.pending を持つ操作（いまは Gold の切り替えだけ）は、
+   * 押した内容を「（反映中）」として先に出す。出してよいのは (1) 保存の成否がサーバで
+   * 確定していて推測が入らない (2) **確定した表示と見た目で区別できる**、の両方を満たす
+   * ときだけ。区別しないと、リロードで消えたときに「戻された」と読まれる。
    */
   async function sendConfig(payload, msg, btn, onDone) {
     var intake = SITE.intake;
@@ -2167,7 +2200,9 @@ const CLIENT_JS = `
 
   /**
    * ON/OFF のトグル。**戻す操作を必ず残す**（誤って有効にしたとき翌朝まで止められないのは許容できない）。
-   * @param opts { on, labelOn, labelOff, confirmOn, build(next) }
+   * @param opts { on, labelOn, labelOff, confirmOn, build(next), pending(next, wrapEl) }
+   *   pending … 保存できた直後に、その行のバッジだけを「（反映中）」へ差し替える任意のフック。
+   *   持たない操作は従来どおりボタンの向きだけを反転する（バッジは触らない）。
    */
   function stateToggle(opts) {
     var wrap = el("div", { class: "ds-toggle" });
@@ -2185,9 +2220,12 @@ const CLIENT_JS = `
       // 読み始める方向（危険）だけ確認する。止める方向は素通し
       if (next && opts.confirmOn && !confirmDanger(opts.confirmOn)) { msg.textContent = ""; return; }
       sendConfig(opts.build(next), msg, btn, function () {
-        // **押した内容をボタンに反映し、逆向きの操作を残す。** バッジや一覧は触らない
+        // **押した内容をボタンに反映し、逆向きの操作を残す。**
         on = next;
         paint();
+        // バッジは「反映中」として先出しする（opts.pending がある操作だけ）。
+        // **カードごと作り直さない。** 上の msg に出した結果表示が消えてしまう
+        if (opts.pending) opts.pending(next, wrap);
       });
     });
     wrap.appendChild(btn);
@@ -2281,11 +2319,125 @@ const CLIENT_JS = `
     return box;
   }
 
+  /* ---------------------------------------------------------------------------
+   * Gold切り替えの「反映中」表示。
+   *
+   * 押しても一覧のバッジが変わるのは fleet-status.yml が完走したあと（1〜2分）。
+   * その間バッジが古いままだと「押したのに何も起きない」に見える。
+   *
+   * **推測ではない。** Lambda は書き込む前に Bot の在籍を確認し、ダメなら 400 を返すので、
+   * 200 が返った時点で channels.json は確実に書き換わっている。ここで出すのは
+   * 「確定した事実の先出し」であって楽観的な当て推量ではない。
+   *
+   * **確定したバッジと同じ見た目にはしない。** 30秒後にリロードした人には、付けたはずの
+   * ラベルが消えて見える——「変えたはずなのに違う値が出ている」という、この画面が
+   * 繰り返し警告してきた誤読そのものになる。だから (反映中) を付けて区別し、
+   * さらに sessionStorage に持たせてリロードしても残す。
+   *
+   * 消えるのは「fleet-status が追いついたとき」か「TTL 切れ」。TTL が無いと、
+   * ワークフローが落ちている案件で永久に「反映中」が残り、嘘の表示になる。
+   * ------------------------------------------------------------------------- */
+  // **キーは案件別にする。** Slackの共有チャンネルは複数案件のCortexに同時に載りうるので、
+  // 案件をまたぐキーにすると、案件Aで押した「反映中」が案件Bの同じ行に出る
+  // （チュートリアルの既読キーが同じ理由で案件別になっている）。
+  var PENDING_KEY = "cortex.pendingGold:" + ((SITE.intake && SITE.intake.projectKey) || "");
+  var PENDING_TTL_MS = 15 * 60 * 1000;
+  /**
+   * 保存する形: { "<チャンネルID>": { value: boolean, at: number } }
+   * at が無い/0 のエントリは期限切れとして落とす。
+   * **型では守れない**（このコードは render.ts のテンプレートリテラル内で、tsc が見ない）。
+   * 守るのはテストの仕事。
+   */
+
+  /**
+   * 先出しバッジの見た目。**1箇所に集約する**——文言とクラスを2箇所に書くと片方だけ直る。
+   *
+   * **「反映中」とは書かない。** この画面の既存語彙では「反映」が2つの意味で使われていて、
+   * 短いほう（数分）には必ず「一覧への」が付いている（サーバ文言「次回の Gold 昇格
+   * （毎晩22時ごろ）から反映されます。一覧への反映には数分かかります」）。修飾なしの
+   * 「反映中」だと、22時の蒸留の話と読めてしまう。
+   *
+   * とくに OFF 方向で害が大きい。**止めた時点で蒸留に対しては完全に効いている**
+   * （Slack はミラーせず Gold 昇格が直接読むため）。待っているのは画面だけなので、
+   * 「除外（反映中）」は「まだ除外されていない」と逆に読める。
+   */
+  function pendingBadgeSpec(value, settled) {
+    return {
+      cls: "badge " + (value ? "ds-gold" : "ds-excluded") + (settled ? "" : " is-pending"),
+      text: (value ? "Gold昇格の読み取り対象" : "除外") + (settled ? "" : "（画面反映待ち）"),
+    };
+  }
+
+  function readPending() {
+    try {
+      var raw = sessionStorage.getItem(PENDING_KEY);
+      if (!raw) return {};
+      var obj = JSON.parse(raw);
+      if (!obj || typeof obj !== "object") return {};
+      var now = Date.now();
+      var out = {};
+      for (var k in obj) {
+        if (!Object.prototype.hasOwnProperty.call(obj, k)) continue;
+        var e = obj[k];
+        if (e && typeof e === "object" && now - (e.at || 0) < PENDING_TTL_MS) out[k] = e;
+      }
+      return out;
+    } catch (_) {
+      // sessionStorage が使えない環境（プライベートモード等）でも画面は出す
+      return {};
+    }
+  }
+  function writePending(map) {
+    try { sessionStorage.setItem(PENDING_KEY, JSON.stringify(map)); } catch (_) {}
+  }
+  function clearPendingGold(ref) {
+    if (!ref) return;
+    var map = readPending();
+    if (!(ref in map)) return;
+    delete map[ref];
+    writePending(map);
+  }
+  /** 押した内容を控える。fleet-status が追いつくまでの間だけ効く */
+  function markPendingGold(ref, value) {
+    if (!ref) return;
+    var map = readPending();
+    map[ref] = { value: value === true, at: Date.now() };
+    writePending(map);
+  }
+  /**
+   * その行の「反映中」を引く。**実データが追いついていたら控えを捨てる。**
+   * 捨てないと、正しくなった後も (反映中) が残り続ける。
+   */
+  function pendingGoldFor(s) {
+    if (!s || !s.ref) return null;
+    var map = readPending();
+    var e = map[s.ref];
+    if (!e) return null;
+    // **「値が一致したら捨てる」だけでは足りない。** 別の人が直後に逆を押して、
+    // その結果で追いついた場合、値が一致しないので控えが残り、TTL切れまで
+    // 実際とは違う値を出し続ける。**押した時点より新しいスナップショットが来たら、
+    // 値が何であれ控えは用済み**——サーバの答えのほうが新しいので、そちらを信じる。
+    var snapshot = fleetVal("generatedAt");
+    var snapAt = snapshot ? Date.parse(snapshot) : NaN;
+    var stale = !isNaN(snapAt) && snapAt >= (e.at || 0);
+    if (s.gold === e.value || stale) {
+      delete map[s.ref];
+      writePending(map);
+      return null;
+    }
+    return e;
+  }
+
   function extSourceCard(s, meta) {
     var badges = el("div", { class: "ds-badges" });
+    var pending = pendingGoldFor(s);
     // 「意図的に外した」と「宣言し忘れ」を分けて出す。同じ「除外」と書くと、
     // 判断されていないだけのものが「判断済み」に見えてしまう。
-    if (s.gold === true) badges.appendChild(el("span", { class: "badge ds-gold", text: "Gold昇格の読み取り対象" }));
+    if (pending) {
+      var spec = pendingBadgeSpec(pending.value, false);
+      badges.appendChild(el("span", { class: spec.cls, text: spec.text }));
+    }
+    else if (s.gold === true) badges.appendChild(el("span", { class: "badge ds-gold", text: "Gold昇格の読み取り対象" }));
     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: "通知先" }));

package/package.json

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