@takagaki/cortex-decisions-viewer 0.12.27 → 0.12.29

package/dist/render.js

@@ -2167,6 +2167,10 @@ a:hover { text-decoration: underline; }
 }
 .site-title { font-size: 18px; font-weight: 700; color: var(--text); }
 .site-title:hover { text-decoration: none; color: var(--accent); }
+/* ポータル配下で開いているとき（#379）、案件名はポータルの案件一覧（同一オリジンの /）へ
+   戻るリンクになる。**文言は増やさない**（案件名そのものがリンク）ので、押せることは
+   ホバーの下線で示す。丸（アイコン操作）とは別の口 */
+.site-title.site-title-portal:hover { text-decoration: underline; text-underline-offset: 3px; }
 /* ---- 案件アイコン（#348）----
    **ヘッダーの案件名の左に丸を置く。** ヘッダーは全タブ共通なので、
    どのタブを開いていても同じ場所に居る。0.12.24 で Home 本文に置いた
@@ -2219,6 +2223,12 @@ button.site-icon[aria-expanded="true"] .site-icon-hover { opacity: 1; }
    ——押せない丸に指差しカーソルやリングを出すのが、画面の嘘のうちで一番たちが悪い */
 button.site-icon { cursor: pointer; }
 button.site-icon:hover, button.site-icon[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
+/* **保存中（#378）は丸の上に .busy-overlay（共通部品）が載る。** その間はホバーの「変更」「＋」
+   もリングも出さない（スピナーと重なって読めない・押せるように見せない）。
+   ホバー規則と同じ強さなので、**この行はホバー規則より後に置く** */
+button.site-icon[aria-busy="true"] { cursor: wait; box-shadow: none; }
+button.site-icon[aria-busy="true"] .site-icon-hover,
+button.site-icon[aria-busy="true"] .site-icon-plus { opacity: 0; }
 .site-icon-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
 /* 丸を押したときだけ出るメニュー。スロットを基準に浮かせる（ヘッダーは sticky なので
    ページを送っても位置がずれない） */
@@ -3267,6 +3277,28 @@ button.ops-card-btn:disabled { opacity: .6; cursor: default; }
 .toast-show { opacity: 1; }
 .toast-error { background: #b91c1c; }
 
+/* 反映待ちのオーバーレイ＋スピナー（#378・共通部品。JS の beginOverlaySpinner が載せる）。
+   押した瞬間から結果が返るまで、**押した場所そのものの上に**半透明の白（60%）と
+   ぐるぐるを重ねる——押した反応が無いように見えて押し直す（二重送信）のを止める。
+   載せ先の大きさは変えない（absolute で内側に重ね、角丸は載せ先から継ぐ）。
+   いまは案件アイコンの丸にだけ使う。操作タブの保存にも同じ部品を使える */
+.busy-overlay {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(255, 255, 255, .6); cursor: wait; z-index: 2;
+}
+.busy-spinner {
+  width: 18px; height: 18px; border-radius: 50%;
+  border: 2px solid var(--accent-weak); border-top-color: var(--accent);
+  animation: busy-spin .8s linear infinite;
+}
+@keyframes busy-spin { to { transform: rotate(360deg); } }
+/* 読み上げ用の語（「保存中…」）。目には見せない（文言を増やさない） */
+.busy-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* 動きを減らす設定でも止めはしない——止めると「保存中」と「固まった」の区別が付かない。
+   回転を半分の速さに落とすだけ */
+@media (prefers-reduced-motion: reduce) { .busy-spinner { animation-duration: 1.6s; } }
+
 .site-footer { max-width: 960px; margin: 0 auto; padding: 0 20px 40px; color: var(--muted); font-size: 12px; }
 
 @media (max-width: 600px) {
@@ -4404,6 +4436,27 @@ ${deriveCapTile.toString()}
   // document に付ける開閉のリスナーは1組だけ。描き直しのたびに足すと Escape 1回で
   // 同じ処理が何度も走る（見た目は同じなので気づけない）
   var siteIconGlobalBound = false;
+  // 保存中か（画像を選ぶ／変える／外す の3段が走っている間）。**DOM ではなくこの変数が正本**
+  // （#378）。描き直しで丸が作り直されても、renderSiteIcon がこれを見てオーバーレイを付け直す。
+  // setProjectIcon / removeProjectIcon の入口で見て、走っている間の2回目を捨てる（二重送信防止）
+  var siteIconSaving = false;
+  // いま丸に載っているオーバーレイの外し方（無ければ null）
+  var siteIconBusyEnd = null;
+
+  /**
+   * 丸の保存中の見た目を付ける／外す。丸は disabled にして押せなくする
+   * （メニューの開閉もここで止まる。丸のクリックは siteIconSaving でも見る）
+   */
+  function setSiteIconBusy(circle, on) {
+    if (siteIconBusyEnd) { siteIconBusyEnd(); siteIconBusyEnd = null; }
+    if (!circle) return;
+    if (on) {
+      siteIconBusyEnd = beginOverlaySpinner(circle, "保存中…");
+      circle.disabled = true;
+    } else {
+      circle.disabled = false;
+    }
+  }
 
   /**
    * 案件名の頭文字1字。**ポータルの ProjectIcon.tsx（initialOf）と同じ取り方**にする
@@ -4486,8 +4539,16 @@ ${deriveCapTile.toString()}
     }
     slot.appendChild(circle);
     if (!intake) return;
-
-    circle.addEventListener("click", function () { setSiteIconMenu(!siteIconMenuOpen); });
+    // 保存中に描き直されても、オーバーレイと押せない状態を引き継ぐ（正本は siteIconSaving）。
+    // いまの呼び出し経路（起動時1回・ui.busy(false) の後の redraw）では保存中に来ないので
+    // 防御。将来タブ切り替え等でヘッダーを描き直すようになっても、ぐるぐるが消えない
+    if (siteIconSaving) setSiteIconBusy(circle, true);
+
+    circle.addEventListener("click", function () {
+      // 保存中は丸が disabled なので click 自体が飛ばない（ブラウザの既定）。これは防御
+      if (siteIconSaving) return;
+      setSiteIconMenu(!siteIconMenuOpen);
+    });
 
     var menu = el("div", { class: "site-icon-menu", role: "menu" });
     if (!siteIconMenuOpen) menu.setAttribute("hidden", "");
@@ -4497,6 +4558,11 @@ ${deriveCapTile.toString()}
       // 丸へ戻す（キーボードの人が位置を失わない。Escape は document 側なので効く）
       redraw: function () {
         renderSiteIcon();
+        ui.refocus();
+      },
+      // 丸へフォーカスを戻す。失敗のあとも呼ぶ——押していた項目は disabled にした瞬間に
+      // フォーカスを失って body に落ちるので、戻さないとキーボードの人がやり直す位置を失う
+      refocus: function () {
         var s = document.getElementById("site-icon-slot");
         var c = s && s.querySelector("button.site-icon");
         if (c && typeof c.focus === "function") c.focus();
@@ -4504,10 +4570,14 @@ ${deriveCapTile.toString()}
       input: null,
       buttons: [],
     };
-    // 送信中は全部を止める。**元から押せない項目は押せないまま戻す**——
+    // 送信中は全部を止める（#378: 丸にオーバーレイ＋スピナー・丸とメニューを押せなくする）。
+    // **元から押せない項目は押せないまま戻す**——
     // 未設定の「画像を外す」が、失敗して戻ったときだけ押せるようになるのを防ぐ
-    ui.disable = function (flag) {
+    ui.busy = function (flag) {
+      siteIconSaving = !!flag;
       ui.buttons.forEach(function (b) { b.disabled = flag ? true : !!b.lockedOff; });
+      var s = document.getElementById("site-icon-slot");
+      setSiteIconBusy(s && s.querySelector("button.site-icon"), siteIconSaving);
     };
 
     var input = el("input", { type: "file", accept: "image/png,image/jpeg,image/webp", hidden: "" });
@@ -4559,7 +4629,9 @@ ${deriveCapTile.toString()}
    * ものを送ると、1MB を上げきってから「大きすぎます」と言うことになる
    */
   async function setProjectIcon(file, ui) {
-    function fail(msg) { showToast("✗ " + msg, true); ui.disable(false); }
+    // 走っている間の2回目は捨てる（丸もメニューも止めてあるが、正本はこの変数）
+    if (siteIconSaving) return;
+    function fail(msg) { showToast("✗ " + msg, true); ui.busy(false); ui.refocus(); }
     // 画面側の門。**サーバ側と同じ文言**で、送る前に断る（fail で「✗ 」を揃える）
     if (!projectIconExtOfName(file.name)) return fail("PNG・JPEG・WebP の画像を選んでください");
     if (file.size > PROJECT_ICON_MAX_BYTES) return fail("1MB までの画像を選んでください");
@@ -4567,7 +4639,8 @@ ${deriveCapTile.toString()}
 
     var intake = SITE.intake;
     var ctype = file.type || "application/octet-stream";
-    ui.disable(true);
+    // 押した瞬間からぐるぐる（#378）。成功なら redraw で新しい丸に、失敗なら fail で元の丸に戻る
+    ui.busy(true);
 
     var pres;
     try {
@@ -4602,6 +4675,7 @@ ${deriveCapTile.toString()}
     // **同じファイルをもう一度選べるようにする。** value を戻さないと、選び直しても
     // change が飛ばない（形式で断られた直後に選び直す経路がここで死ぬ）
     if (ui.input) ui.input.value = "";
+    ui.busy(false);
     // 丸がその場で変わるので、メニューは畳んでよい（結果はトーストが伝える）
     setSiteIconMenu(false);
     ui.redraw();
@@ -4610,14 +4684,17 @@ ${deriveCapTile.toString()}
 
   /** 画像を外す。**確認は出さない**——押し間違えても、もう一度選び直せば戻る操作 */
   async function removeProjectIcon(ui) {
-    function fail(msg) { showToast("✗ " + msg, true); ui.disable(false); }
-    ui.disable(true);
+    // 保存中はメニューの項目が disabled なので普通は来ない（setProjectIcon と同じ防御）
+    if (siteIconSaving) return;
+    function fail(msg) { showToast("✗ " + msg, true); ui.busy(false); ui.refocus(); }
+    ui.busy(true);
     var res;
     try {
       res = await intakeJson(callIntake("project-icon-remove", { projectKey: SITE.intake.projectKey }));
     } catch (net) { return fail("サーバーに接続できませんでした。通信環境を確認して、もう一度お試しください。"); }
     if (!res.ok) return fail((res.j && res.j.message) || "外せませんでした");
     rememberIconPending("remove", "");
+    ui.busy(false);
     setSiteIconMenu(false);
     ui.redraw();
     showToast("外しました", false);
@@ -4950,8 +5027,8 @@ ${deriveCapTile.toString()}
   };
   /**
    * 表を引くときのアダプタ種別。**probeTypeOf を使わない**——あちらは「op=probe の受け口」の
-   * 語彙で、Google Chat に空文字を返す（実測の口が無いため）。ここで使うと Google Chat の
-   * エントリを永久に置けない
+   * 語彙で、「github-issues」 / 「github-discussions」 を 「github」 に畳むところまでは同じだが、
+   * **実測の口が無い種別に空文字を返す**（この表は実測の有無と無関係にエントリを置く）
    */
   function helpTypeOf(type) {
     var t = String(type || "");
@@ -5318,6 +5395,18 @@ ${deriveCapTile.toString()}
    * 読み取れない——下の説明文は「誰が承認できるか」の話しかしていない。
    * 1行だけ添える口を開けておく。**見出しは付けない**（節を増やすと一覧が遠くなる）。
    *
+   * ## 承認画面から戻ってきたとき（#343）
+   *
+   * 成功経路は同じタブで遷移するので、**このハンドラには戻す機会が無い**——
+   * 「準備しています…」と disabled を立てたまま画面を離れる。ブラウザバックで
+   * 戻ると bfcache が**離脱直前の DOM とスクリプトの状態をそのまま復元する**ので、
+   * その固まった見た目が再現し、もう一度押せなくなる。だから復帰は
+   * bfcache 復元でだけ発火する pageshow（persisted）で受ける。
+   * 戻す口は**起動時に1本だけ張った listener が data-leaving を DOM から探す**形にした
+   * ——モーダルを開くたびにこのボタンは作り直されるので、登録簿に貯めると
+   * 閉じたモーダルの DOM を掴み続ける。印を付けるのは遷移が確定した瞬間だけで、
+   * 失敗経路（その場でボタンを戻す）には付けない。
+   *
    * @param lead 省略可。押す理由の1行（案内の中から呼ぶときは渡さない）
    */
   function slackConnectButton(lead) {
@@ -5346,6 +5435,11 @@ ${deriveCapTile.toString()}
         }
         // **同じタブで遷移する。** 別タブだと、承認後の「接続しました」を見た人が
         // 元のタブに戻る動線を自分で見つけることになる
+        //
+        // **遷移が確定したこの瞬間にだけ印を付ける（#343）。** ブラウザバックで
+        // bfcache から復元されたとき、起動時の pageshow の listener がこの印を頼りに
+        // ボタンと「準備しています…」を素の状態へ戻す（restoreLeavingButtons）
+        btn.setAttribute("data-leaving", "1");
         location.href = j.url;
       } catch (e) {
         msg.className = "ds-toggle-msg is-error";
@@ -7784,6 +7878,10 @@ ${deriveCapTile.toString()}
    * **開発（GitHub）は #234 で足した。** 判定は shared/github-gate.mjs、次の一手は
    * サーバの needed（理由と設定ページのURLを1文で持つ）をそのまま出している
    * ——画面に分岐が生まれないよう、言い分けを全部あちらに置いた
+   *
+   * **Google Chat は #347 で足した。** 判定は shared/google-chat-gate.mjs で、夜間の実測と
+   * 同じ叩き先・同じスコープで測る。次の一手（googleChatProbeHelpNodes）は行の常時表示と
+   * 同じ表（DS_GATE の help）から引くだけで、画面に判定の分岐は無い
    * ------------------------------------------------------------------------- */
 
   /**
@@ -7802,9 +7900,13 @@ ${deriveCapTile.toString()}
    * 確認したいアダプタの種別（「op=probe」 の 「type」）。**画面の種別をそのまま送らない**
    * ——「github-issues」 / 「github-discussions」 は同じ1つのリポジトリの読み取りで、
    * サーバの受け口は 「github」 の1種別しか知らない（「PROBE_REF_RULES」）。
+   *
+   * **空文字を返した種別にはボタンが出ない**（下の 「extSourceCard」 の条件）。
+   * Google Chat は #347 で足した——サーバの受け口の綴りがそのまま種別になる。
    */
   function probeTypeOf(type) {
     if (String(type || "").indexOf("github") === 0) return "github";
+    if (type === "google-chat") return "google-chat";
     return type === "slack" ? "slack" : "";
   }
 
@@ -7859,6 +7961,36 @@ ${deriveCapTile.toString()}
     return [el("p", { class: "ds-probe-help", text: "GitHub の応答：" + (r.error || "不明") + "。時間をおいて再度お試しください。" })];
   }
 
+  /**
+   * Google Chat の確認結果の本文（#347）。
+   *
+   * **判定は infra/lambda/shared/google-chat-gate.mjs にしか無い。** ここが返すのは
+   * 「次の一手」だけで、状態の語（バッジ）は probeVerdict が dsGateOf から取る。
+   *
+   * **文を書き写さない。** 「アプリと統合から追加してください」「管理者の設定が済むと…」は
+   * 行の常時表示（DS_GATE の 「help」）が既に持っている——写経すると、同じ行の常時表示と
+   * 押した結果で語が割れる（この節が何度も直してきた形）。DS_GATE から引いて1文だけ出す。
+   *
+   * ⚠ **403（Workspace 管理者の承認待ち）は Phase 0 の採取まで 「unknown」。** その回は
+   * サーバの機械語（「permission_denied」）をそのまま出す。**「時間をおいて」と言わない**
+   * ——待っても直らない（管理者が承認するまで同じ応答が返る）。
+   */
+  function googleChatProbeHelpNodes(s, r) {
+    var p = function (t) { return el("p", { class: "ds-probe-help", text: t }); };
+    // 成功。**1行で終わり**（状態の語が既に「接続OK」と出ている）
+    if (r.gate === "ok") return [];
+    // not_in_space / no_credentials は行の常時表示と同じ1文（DS_GATE から引く）。
+    // 押した瞬間に行側の 「.ds-gate-help」 は隠れるので、二重には出ない
+    var help = dsGateOf({ type: s.type, gate: r.gate }).help;
+    if (help) return [p(help)];
+    if (r.gate === "unreachable") {
+      // 帯（「アクセス不可」）が症状を言っている。**ここは一手だけ**
+      return [p("時間をおいて、もう一度「接続を確認」を押してください。")];
+    }
+    // unknown。**生の機械語を隠さない**——「不明」だけだと切り分けが始められない
+    return [p("Google Chat の応答：" + (r.error || "不明") + "。cortex の担当者にこの語をお伝えください。")];
+  }
+
   /**
    * 「アクセス不可」の次の一手（0.12.2・実オンボーディングで踏んだ）。
    *
@@ -7935,6 +8067,7 @@ ${deriveCapTile.toString()}
   function probeHelpNodes(s, r) {
     var p = function (t) { return el("p", { class: "ds-probe-help", text: t }); };
     if (probeTypeOf(s.type) === "github") return githubProbeHelpNodes(r);
+    if (probeTypeOf(s.type) === "google-chat") return googleChatProbeHelpNodes(s, r);
     // 成功。**1行で終わり。** 状態の語（「接続OK」）が既に出ているので本文は空
     if (r.gate === "ok") return [];
     if (r.gate === "not_in_channel") {
@@ -9380,6 +9513,48 @@ ${deriveCapTile.toString()}
     };
   }
 
+  /**
+   * 反映待ちのオーバーレイ＋スピナー（#378・共通部品）。
+   *
+   * host の**上に**半透明の白（60%）とぐるぐるを重ねる。host の大きさは変えない。
+   * 角丸は host から継ぐので、丸（案件アイコン）でも四角（操作タブのカード・ボタン）でも
+   * 使える。beginBusy が「語を差し替える」形なのに対し、こちらは**語を置けない場所
+   * （画像だけの丸など）**向け。
+   *
+   * **載せ先が static でも壊れない。** オーバーレイは absolute なので、載せ先に
+   * position が無いと**別の祖先いっぱいに広がる**（黙って壊れる）。その場合だけ
+   * relative を入れ、外すときに戻す（案件アイコンの丸は元から relative なので触らない）。
+   *
+   * 支援技術には host の aria-busy で「処理中」を伝える。label は目に見えない語として
+   * 置くだけ（挿入と同時に中身を入れたライブリージョンは読まれないことが多い）。
+   *
+   * @returns 外す関数。beginBusy と同じく**何度呼んでも1回しか効かない**
+   */
+  function beginOverlaySpinner(host, label) {
+    if (!host) return function () {};
+    var madeRelative = false;
+    try {
+      if (window.getComputedStyle(host).position === "static") {
+        host.style.position = "relative";
+        madeRelative = true;
+      }
+    } catch (e) {}
+    var ov = el("span", { class: "busy-overlay" }, [
+      el("span", { class: "busy-spinner", "aria-hidden": "true" }),
+      el("span", { class: "busy-label", text: label || "処理中…" }),
+    ]);
+    host.appendChild(ov);
+    host.setAttribute("aria-busy", "true");
+    var used = false;
+    return function endOverlaySpinner() {
+      if (used) return;
+      used = true;
+      if (ov.parentNode) ov.parentNode.removeChild(ov);
+      host.removeAttribute("aria-busy");
+      if (madeRelative) host.style.position = "";
+    };
+  }
+
   /**
    * サーバへ設定変更を送る。**一覧は書き換えない**
    * （接続状況は夜間バッチのスナップショットなので、「もう効いている」と誤解させないため）。
@@ -10085,10 +10260,12 @@ ${deriveCapTile.toString()}
     // 気づいた人がその場で確かめられるほうがよい（オーナー判断）。書き込みになる
     // 「表示名を更新する」は、押した結果の中から別のボタンとして出る（probeSection）。
     //
-    // **いまは Slack と 開発（GitHub）。** GitHub は #234 で足した——「アクセス不可 →
+    // **いまは Slack・開発（GitHub）・Google Chat。** GitHub は #234 で足した——「アクセス不可 →
     // App の Configure でリポジトリを追加 → 直ったか確かめる」が、それまで**翌朝まで
     // 待つしかなかった**（受け入れテストでは fleet-status.yml を手で起動して確かめた）。
     // 判定と文面は infra/lambda/shared/github-gate.mjs 側（画面に分岐を持たせない）。
+    // **Google Chat は #347（同じ理由）。** スペースにアプリを追加した人が、その場で
+    // 直ったことを確かめられる。判定は infra/lambda/shared/google-chat-gate.mjs 側。
     // Backlog / Figma / Drive は実測そのものが新規なので、まだ出さない。
     //
     // **origin === "explicit" でも出す。** 確認は読むだけで、どの登録ファイル由来かに
@@ -13485,6 +13662,50 @@ ${deriveCapTile.toString()}
   }
 
   window.addEventListener("popstate", route);
+  /**
+   * ヘッダーの案件名（#379）。**ポータル配下（/p/<key>/ の下）で開いているときだけ**、
+   * ポータルの案件一覧（同一オリジンの /）へ戻るリンクにする。
+   * Basic 認証の Amplify で開いているときは戻る先が無いので、これまでどおり（href="?"）。
+   * 文言は増やさない——案件名そのものがリンクで、説明は title 属性だけ。
+   * 丸（アイコン操作）とは別の口なので、renderSiteIcon には触らない
+   */
+  (function linkTitleToPortal() {
+    var a = document.getElementById("home-link");
+    if (!a || !/^\\/p\\/[^/]+\\//.test(location.pathname)) return;
+    a.setAttribute("href", "/");
+    a.setAttribute("title", "案件一覧へ");
+    a.classList.add("site-title-portal");
+  })();
+  /**
+   * 外部の承認画面へ送り出したボタンを、戻ってきたときに押せる状態へ戻す（#343）。
+   *
+   * **live DOM を走査する。** 押した時点で登録簿に貯める形にすると、モーダルの
+   * 開閉ごとに作り直されるボタンの、閉じた側の DOM を掴み続ける。
+   * 戻す先は**素の初期状態**——「中断しました」のような文言は足さない
+   *（戻ってきた人が知りたいのは「もう一度押せる」ことで、それは見た目で分かる）。
+   */
+  function restoreLeavingButtons() {
+    var marked = document.querySelectorAll("[data-leaving]");
+    for (var i = 0; i < marked.length; i++) {
+      var btn = marked[i];
+      btn.disabled = false;
+      btn.removeAttribute("data-leaving");
+      // 「準備しています…」を消すのは**同じ箱の中の**行だけ（他のボタンの結果を消さない）。
+      // 箱が見つからなければボタンだけ戻す
+      var wrap = btn.closest ? btn.closest(".ds-toggle") : null;
+      var msg = wrap ? wrap.querySelector(".ds-toggle-msg") : null;
+      if (msg) {
+        msg.className = "ds-toggle-msg";
+        msg.textContent = "";
+      }
+    }
+  }
+  // **bfcache から復元されたときだけ走る。** 通常のロード（persisted が false）では
+  // DOM ごと作り直されるので、戻すものは無い
+  window.addEventListener("pageshow", function (e) {
+    if (!e.persisted) return;
+    restoreLeavingButtons();
+  });
   // ヘッダーの案件アイコン（#348）は #app の外なので、**起動時に1回だけ描く**。
   // route() はタブを替えるたびに走るが、ヘッダーは描き替えない——描き直すと
   // 保存直後の mirror とメニューの開閉が、タブを移るたびに畳まれる

package/package.json

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