@takagaki/cortex-decisions-viewer 0.12.34 → 0.12.35

package/dist/render.js

@@ -11,6 +11,7 @@ exports.claudeCodeRepositories = claudeCodeRepositories;
 exports.claudeCodeUrl = claudeCodeUrl;
 exports.toolStateLabel = toolStateLabel;
 exports.toolStateWithLive = toolStateWithLive;
+exports.toolsFoldSummary = toolsFoldSummary;
 exports.isAlreadyRegistered = isAlreadyRegistered;
 exports.sanitizeRegisteredNow = sanitizeRegisteredNow;
 exports.sanitizeStateNow = sanitizeStateNow;
@@ -554,6 +555,41 @@ function toolStateWithLive(item, rows) {
     // failed / skipped / not_in_channel / missing_scope / no_token … は全部「人の操作待ち」
     return "waiting";
 }
+/**
+ * 畳んだ種別の 1 行に出す、状態の要約（#424）。
+ *
+ * **全部同じなら、その 1 語だけ**（「GitHub 7 件 ● 読み取り中」）。畳んだ 1 行に
+ * 「読み取り中 7」と件数を書いても、左に出ている 7 件と同じ数を 2 回言うだけになる。
+ *
+ * **混ざっていれば件数で**（「読み取り中 5・承認待ち 2」）。ここで「一部が承認待ち」の
+ * ような曖昧な言い方にすると、開くまで何件手を入れるのか分からない。
+ *
+ * 色は `toolStateLabel` の `ds-gate-*` をそのまま使う。混ざっているときは
+ * **承認待ちが 1 件でもあれば橙**——畳んだ 1 行が「人の操作待ちを含む」ことを、
+ * 開かずに見つけられる必要がある（畳んだせいで気づかれなくなる、が一番痛い）。
+ *
+ * **クロージャを持たない純関数に保つこと**（`.toString()` でクライアントへ渡す）。
+ */
+function toolsFoldSummary(states) {
+    // 表示の順は状態の 4 語と同じ（読み取り中→承認待ち→停止中→未確認）
+    var order = ["reading", "waiting", "stopped", "unknown"];
+    var count = { reading: 0, waiting: 0, stopped: 0, unknown: 0 };
+    (states || []).forEach(function (s) {
+        // ⚠ 4 語のどれかに当たるかは **order で見る**（素のオブジェクトの添字だと
+        // "constructor" のような語が継承プロパティに当たって、知らない語が素通りする）
+        var k = String(s == null ? "" : s);
+        count[order.indexOf(k) < 0 ? "unknown" : k] += 1;
+    });
+    var used = order.filter(function (k) { return count[k] > 0; });
+    if (used.length <= 1) {
+        var lab = toolStateLabel(used[0] || "unknown");
+        return { text: lab.text, cls: lab.cls, state: used[0] || "unknown" };
+    }
+    var text = used
+        .map(function (k) { return toolStateLabel(k).text + " " + count[k]; })
+        .join("・");
+    return { text: text, cls: count.waiting > 0 ? "ds-gate-warn" : "ds-gate-muted", state: "mixed" };
+}
 /**
  * 外部ソースの行が「この能力・このアダプタのタイル」に属するか。
  *
@@ -2812,6 +2848,34 @@ button.site-icon[aria-busy="true"] .site-icon-plus { opacity: 0; }
 .home-tools-name { flex: 1 1 220px; min-width: 0; word-break: break-all; }
 .home-tools-state { flex: 0 0 auto; }
 .home-tools-empty, .home-tools-note { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 8px 0 0; }
+/* 種別ごとの折りたたみ（3件以上・#424）。**畳んだ1行は、行と同じ高さ・同じ字の大きさ**
+   ——一覧の途中に「見出し」が生えたように見せない。既定は畳む（open を付けない） */
+.home-tools-fold { margin: 8px 0 0; }
+.home-tools-fold > summary {
+  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
+  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
+  cursor: pointer; list-style: none;
+}
+.home-tools-fold > summary::-webkit-details-marker { display: none; }
+/* アイコンは別の span（読み上げから外すため）。畳まない行の種別と同じ字面にそろえる */
+.home-tools-fold-icon { flex: 0 0 auto; }
+.home-tools-fold-label { flex: 0 0 auto; font-weight: 600; color: var(--muted); }
+/* 状態は行と同じく右端へ寄せる。**縦にそろっていないと一覧に見えない**
+   （畳んだ1行だけ状態が真ん中にあると、同じ列の情報だと分からない） */
+.home-tools-fold-state { flex: 0 0 auto; margin-left: auto; }
+/* 開閉の印は CSS の content で出す（.ds-group と同じ形）。**要素にしない**——
+   読み上げ名を「GitHub 7 件」だけにしたいので、文字として DOM に置かない */
+.home-tools-fold > summary::after { content: "▸"; margin-left: 8px; color: var(--muted); font-size: 12px; }
+.home-tools-fold[open] > summary::after { content: "▾"; }
+/* 開いた中身は少し寄せて、畳んだ1行との親子が見えるようにする */
+.home-tools-fold > .home-tools-list { margin: 0 0 0 12px; padding-left: 10px; border-left: 2px solid var(--border); }
+/* 畳んだ1行が後ろに続くとき・開いた中身の後ろに行が続くときは、その手前の行にも
+   区切り線を引く。.home-tools-item:last-child で線を落としたままだと、**境目だけ
+   線が抜けて** 2行が1行に見える（畳みが無い案件の見た目は変えない）。
+   :has が効かない環境では、その境目の線が1本消えるだけ（並びも文言も無事） */
+.home-tools-list:has(+ .home-tools-fold) > .home-tools-item:last-child,
+.home-tools-fold:has(+ .home-tools-list) > .home-tools-list > .home-tools-item:last-child,
+.home-tools-fold:has(+ .home-tools-fold) > .home-tools-list > .home-tools-item:last-child { border-bottom: 1px solid var(--border); }
 /* ---- レコード詳細の「AIによる最近の変更」（リポジトリの git 履歴 由来）----
    カードは詳細ページの提案（.proposals）と同系色にする——どちらも
    「AIがやったこと・言っていることを読む」もので種類が同じ。
@@ -3805,6 +3869,12 @@ ${overlayStateOnFleet.toString()}
 var TOOL_KIND_ICONS = ${JSON.stringify(TOOL_KIND_ICONS)};
 ${toolStateLabel.toString()}
 ${toolStateWithLive.toString()}
+  // 畳んだ種別の 1 行に出す状態の要約（#424）。**同じ 4 語を使う**——ここで別の言い方を
+  // 作ると、畳んだ 1 行と開いた行が違う語で同じ状態を指す
+${toolsFoldSummary.toString()}
+  // 🔴 **同じ種別が何件あったら畳むか。** 1 にすると 1 件の種別まで畳まれて、
+  // Backlog・Drive・Meet が「1 件 ▸」の行に化ける（#424 で明示的に避けた形）
+var TOOLS_FOLD_MIN = 3;
 ${nextStateDelay.toString()}
   // 工程1.5: 正本を直接読む（secretsNow / capabilitiesNow / githubOwners）。
   // **判定の実体はビルド時の定義**——画面側に書き写すと許可リストが2枚になる
@@ -5256,30 +5326,34 @@ ${deriveCapTile.toString()}
       box.appendChild(el("p", { class: "home-tools-empty", text: "まだツールを接続していません。操作タブから接続できます。" }));
       return box;
     }
-    var ul = el("ul", { class: "home-tools-list" });
+    // **種別ごとにまとめる（#424）。**
+    //
+    // 🔴 **隣り合う同じ種別だけをまとめる**（前から順に見て、種別が変わったら切る）。
+    // 種別ごとに拾い集める形にすると、engine が種別を飛び飛びに出した日に
+    // **並び順が変わる**——「並び順は変えない」は仕様なので、engine の出力の性質
+    // （いまは種別ごとに連続している）に寄りかからず、構造として変わらない形にする
+    var groups = [];
     items.forEach(function (it) {
-      var li = el("li", { class: "home-tools-item" });
-      // 種別は**ツール名**（能力名でも単位語でもない）。DS_TYPE の行の約束と同じ
-      li.appendChild(el("span", {
-        class: "home-tools-kind",
-        text: (TOOL_KIND_ICONS[it.kind] || "🔗") + " " + (it.label || it.kind),
-      }));
-      var name = it.name || it.ref || "";
-      // **開ける先が無い行（Google Meet）はリンクにしない。** 押せないリンクを出すより
-      // 素のテキストのほうが正直（url は engine が null で「無い」と言い切っている）
-      // href に載せる前に isHttp を通す（build 側の許可リストと二重の守り。el() の注意書きのとおり）
-      if (it.url && isHttp(it.url)) li.appendChild(el("a", { class: "home-tools-name", href: it.url, target: "_blank", rel: "noopener", text: name }));
-      else li.appendChild(el("span", { class: "home-tools-name", text: name }));
-      // ライブの実測が届いていれば重ねる（stopped は上書きしない・toolStateWithLive）
-      var st = toolStateWithLive(it, LIVE_STATE);
-      var lab = toolStateLabel(st);
-      var chip = el("span", { class: "home-tools-state ds-gate " + lab.cls, text: lab.text });
-      // 状態そのものを属性に残す（表示語を読み替えずに検査・スタイルできるように）
-      chip.setAttribute("data-state", st);
-      li.appendChild(chip);
-      ul.appendChild(li);
+      var k = String(it && it.kind != null ? it.kind : "");
+      var last = groups[groups.length - 1];
+      if (last && last.kind === k) last.items.push(it);
+      else groups.push({ kind: k, items: [it] });
+    });
+    // 畳まない種別は 1 つの <ul> に続けて入れる（1〜2 件の種別のあいだに区切り線が
+    // 入らない、いまの見た目のまま）。畳みを挟んだら次の種別から新しい <ul> にする
+    var ul = null;
+    var foldSeq = 0;
+    groups.forEach(function (g) {
+      if (g.items.length >= TOOLS_FOLD_MIN) {
+        ul = null;
+        // 連番を渡す。**同じ種別が離れて 2 度出ると、種別だけでは名前がぶつかる**
+        // （id が重複し、開閉の復元も両方に効く）
+        box.appendChild(homeToolsFold(g.items, foldSeq++));
+        return;
+      }
+      if (!ul) { ul = el("ul", { class: "home-tools-list" }); box.appendChild(ul); }
+      g.items.forEach(function (it) { ul.appendChild(homeToolRow(it)); });
     });
-    box.appendChild(ul);
     // **どこで直せるか・いつの情報かを 1 行で言う。** 操作タブで繋いだ直後は
     // この一覧に出ない（engine が毎朝作り直すまで）ので、黙っていると「効いていない」と読まれる
     box.appendChild(el("p", {
@@ -5289,6 +5363,83 @@ ${deriveCapTile.toString()}
     return box;
   }
 
+  /**
+   * 使用ツールの 1 行。**畳んだ種別の中でも同じ形**（開いたときに見えるのは今までの行）。
+   */
+  function homeToolRow(it) {
+    var li = el("li", { class: "home-tools-item" });
+    // 種別は**ツール名**（能力名でも単位語でもない）。DS_TYPE の行の約束と同じ
+    li.appendChild(el("span", {
+      class: "home-tools-kind",
+      text: (TOOL_KIND_ICONS[it.kind] || "🔗") + " " + (it.label || it.kind),
+    }));
+    var name = it.name || it.ref || "";
+    // **開ける先が無い行（Google Meet）はリンクにしない。** 押せないリンクを出すより
+    // 素のテキストのほうが正直（url は engine が null で「無い」と言い切っている）
+    // href に載せる前に isHttp を通す（build 側の許可リストと二重の守り。el() の注意書きのとおり）
+    if (it.url && isHttp(it.url)) li.appendChild(el("a", { class: "home-tools-name", href: it.url, target: "_blank", rel: "noopener", text: name }));
+    else li.appendChild(el("span", { class: "home-tools-name", text: name }));
+    // ライブの実測が届いていれば重ねる（stopped は上書きしない・toolStateWithLive）
+    var st = toolStateWithLive(it, LIVE_STATE);
+    var lab = toolStateLabel(st);
+    var chip = el("span", { class: "home-tools-state ds-gate " + lab.cls, text: lab.text });
+    // 状態そのものを属性に残す（表示語を読み替えずに検査・スタイルできるように）
+    chip.setAttribute("data-state", st);
+    li.appendChild(chip);
+    return li;
+  }
+
+  /**
+   * 同じ種別が 3 件以上あるときの、畳んだ 1 行（#424）。
+   *
+   * 🔴 **既定は畳む（open 属性を付けない）。** GitHub 7 件・Slack 11 件が縦に並ぶと、
+   * その下の本文が画面の外へ押し出される。件数と状態の要約は畳んだまま読めるので、
+   * 「何件つながっていて、手を入れる先があるか」は開かなくても分かる。
+   * 開閉は**保存しない**（開き直すと畳んだ状態に戻る・portal #77 と同じ）
+   *
+   * 🔴 **行は畳んでも DOM に残す**（details の中に置くだけ）。描き直し（syncHomeTools）で
+   * 開閉を戻せるのも、検査が行数を数えられるのも、行がそこにあるからで、
+   * **作り直す形にすると開いている最中に中身が消える**
+   */
+  function homeToolsFold(group, seq) {
+    var first = group[0] || {};
+    var kind = String(first.kind == null ? "" : first.kind);
+    // 畳み 1 つを指す鍵。**種別だけにしない**——同じ種別が離れて 2 度出たときに
+    // id が重複し、開閉の復元も両方に効いてしまう
+    var key = (kind || "other") + "-" + seq;
+    // 状態は 1 行ずつ求めてから畳む（行と要約が別の判定を持たない）
+    var sum = toolsFoldSummary(group.map(function (it) { return toolStateWithLive(it, LIVE_STATE); }));
+    var chip = el("span", { class: "home-tools-fold-state ds-gate " + sum.cls, text: sum.text });
+    chip.setAttribute("data-state", sum.state);
+    // 説明として読ませるので id が要る
+    var chipId = "home-tools-fold-state-" + key;
+    chip.setAttribute("id", chipId);
+    // 件数まで含めて 1 つのテキストノードにする（分けると読み上げが途切れ、
+    // 文言の完全一致で拾えなくなる。portal #77 と同じ約束）。
+    // ⚠ **ツール名はまとまりの中から拾う**（先頭だけ見ると、engine が先頭の 1 件の
+    // label を落とした日に「github 3 件」と内部名が出る）
+    var named = null;
+    group.forEach(function (it) { if (!named && it && it.label) named = it; });
+    var label = ((named || first).label || first.kind || "その他") + " " + group.length + " 件";
+    var sums = el("summary", { class: "home-tools-fold-summary" }, [
+      // アイコンは読み上げから外す（「たこ」と読まれても種別は分からない）
+      el("span", { class: "home-tools-fold-icon", "aria-hidden": "true", text: TOOL_KIND_ICONS[first.kind] || "🔗" }),
+      el("span", { class: "home-tools-fold-label", text: label }),
+      chip,
+    ]);
+    // ⚠ **読み上げ名は「GitHub 7 件」**（aria-label で言い切る）。状態の要約は
+    // aria-describedby で**説明として**読ませる——チップを aria-hidden にすると、
+    // 畳んでいるあいだ（中身は支援技術からも見えない）「承認待ちが 2 件ある」ことが
+    // 目で見える人にしか伝わらない。それは畳みを橙にした理由と正面から矛盾する
+    sums.setAttribute("aria-label", label);
+    sums.setAttribute("aria-describedby", chipId);
+    var ul = el("ul", { class: "home-tools-list" });
+    group.forEach(function (it) { ul.appendChild(homeToolRow(it)); });
+    // data-fold-key は「描き直しても開いたままにする」ための目印（syncHomeTools が見る）。
+    // data-kind は種別そのもの（畳んだ 1 行がどのツールのものか、を素直に読めるように）
+    return el("details", { class: "home-tools-fold", "data-kind": kind, "data-fold-key": key }, [sums, ul]);
+  }
+
   /**
    * 接続状況（op=state）が届いたときに「使用ツール」を描き直す（#275）。
    *
@@ -5300,7 +5451,21 @@ ${deriveCapTile.toString()}
     var old = app.ownerDocument.querySelector(".home-tools");
     if (!old || !old.parentNode) return;
     var next = homeToolsSection();
-    if (next) old.parentNode.replaceChild(next, old);
+    if (!next) return;
+    // 🔴 **人が開いた折りたたみは、描き直しても開いたままにする（#424）。**
+    // 実測は開いた直後に届くことがあり、そこで畳み直すと「押したのに閉じた」になる
+    // （portal #77 で踏んだのと同じ罠）。**保存はしない**——開き直せば畳んだ状態に戻る
+    var opened = {};
+    var before = old.querySelectorAll(".home-tools-fold");
+    for (var i = 0; i < before.length; i++) {
+      // 素のオブジェクトの添字にしない（"constructor" のような鍵が継承側に当たる）
+      if (before[i].open) opened["k:" + (before[i].getAttribute("data-fold-key") || "")] = true;
+    }
+    var after = next.querySelectorAll(".home-tools-fold");
+    for (var j = 0; j < after.length; j++) {
+      if (opened["k:" + (after[j].getAttribute("data-fold-key") || "")]) after[j].open = true;
+    }
+    old.parentNode.replaceChild(next, old);
   }
 
   /**

package/package.json

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