@takagaki/cortex-decisions-viewer 0.4.59 → 0.4.60

package/dist/render.js

@@ -65,6 +65,26 @@ function escapeHtml(s) {
         .replace(/"/g, """);
 }
 /** 接続マップの能力定義（表示順・絵文字は詳細カードの流儀を踏襲） */
+/**
+ * アダプタのロゴ。**公式配布のSVGをそのまま埋め込む。**
+ *
+ * 外部URLを参照しない——この画面は顧客が見るので、参照すると
+ * 顧客のブラウザが Slack・Google・Figma のサーバへ接続しに行く（誰がいつ見たかが
+ * 各社のログに残る）。参照先が変わればアイコンだけ黙って消える。
+ * 既存の GITHUB_ICON と同じ流儀。
+ *
+ * 出典: Slack/Figma/Google Meet/Google Drive は simple-icons（CC0）、
+ *       Backlog は ヌーラボ公式のロゴ配布（nulab.com/logo-guidelines/）。
+ * 改変は「サイズ指定の付与」と「余分な属性の除去」のみ。配色と形は変えていない。
+ */
+const ADAPTER_ICONS = {
+    slack: `<svg width="36" height="36" aria-hidden="true" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><g> <path d="M53.8412698,161.320635 C53.8412698,176.152381 41.8539683,188.139683 27.0222222,188.139683 C12.1904762,188.139683 0.203174603,176.152381 0.203174603,161.320635 C0.203174603,146.488889 12.1904762,134.501587 27.0222222,134.501587 L53.8412698,134.501587 L53.8412698,161.320635 Z M67.2507937,161.320635 C67.2507937,146.488889 79.2380952,134.501587 94.0698413,134.501587 C108.901587,134.501587 120.888889,146.488889 120.888889,161.320635 L120.888889,228.368254 C120.888889,243.2 108.901587,255.187302 94.0698413,255.187302 C79.2380952,255.187302 67.2507937,243.2 67.2507937,228.368254 L67.2507937,161.320635 Z" fill="#E01E5A"></path> <path d="M94.0698413,53.6380952 C79.2380952,53.6380952 67.2507937,41.6507937 67.2507937,26.8190476 C67.2507937,11.9873016 79.2380952,-7.10542736e-15 94.0698413,-7.10542736e-15 C108.901587,-7.10542736e-15 120.888889,11.9873016 120.888889,26.8190476 L120.888889,53.6380952 L94.0698413,53.6380952 Z M94.0698413,67.2507937 C108.901587,67.2507937 120.888889,79.2380952 120.888889,94.0698413 C120.888889,108.901587 108.901587,120.888889 94.0698413,120.888889 L26.8190476,120.888889 C11.9873016,120.888889 0,108.901587 0,94.0698413 C0,79.2380952 11.9873016,67.2507937 26.8190476,67.2507937 L94.0698413,67.2507937 Z" fill="#36C5F0"></path> <path d="M201.549206,94.0698413 C201.549206,79.2380952 213.536508,67.2507937 228.368254,67.2507937 C243.2,67.2507937 255.187302,79.2380952 255.187302,94.0698413 C255.187302,108.901587 243.2,120.888889 228.368254,120.888889 L201.549206,120.888889 L201.549206,94.0698413 Z M188.139683,94.0698413 C188.139683,108.901587 176.152381,120.888889 161.320635,120.888889 C146.488889,120.888889 134.501587,108.901587 134.501587,94.0698413 L134.501587,26.8190476 C134.501587,11.9873016 146.488889,-1.42108547e-14 161.320635,-1.42108547e-14 C176.152381,-1.42108547e-14 188.139683,11.9873016 188.139683,26.8190476 L188.139683,94.0698413 Z" fill="#2EB67D"></path> <path d="M161.320635,201.549206 C176.152381,201.549206 188.139683,213.536508 188.139683,228.368254 C188.139683,243.2 176.152381,255.187302 161.320635,255.187302 C146.488889,255.187302 134.501587,243.2 134.501587,228.368254 L134.501587,201.549206 L161.320635,201.549206 Z M161.320635,188.139683 C146.488889,188.139683 134.501587,176.152381 134.501587,161.320635 C134.501587,146.488889 146.488889,134.501587 161.320635,134.501587 L228.571429,134.501587 C243.403175,134.501587 255.390476,146.488889 255.390476,161.320635 C255.390476,176.152381 243.403175,188.139683 228.571429,188.139683 L161.320635,188.139683 Z" fill="#ECB22E"></path> </g></svg>`,
+    figma: `<svg width="36" height="36" aria-hidden="true" viewBox="0 0 256 384" xmlns="http://www.w3.org/2000/svg"><g> <path d="M64,384 C99.328,384 128,355.328 128,320 L128,256 L64,256 C28.672,256 0,284.672 0,320 C0,355.328 28.672,384 64,384 Z" fill="#0ACF83"></path> <path d="M0,192 C0,156.672 28.672,128 64,128 L128,128 L128,256 L64,256 C28.672,256 0,227.328 0,192 Z" fill="#A259FF"></path> <path d="M0,64 C0,28.672 28.672,0 64,0 L128,0 L128,128 L64,128 C28.672,128 0,99.328 0,64 Z" fill="#F24E1E"></path> <path d="M128,0 L192,0 C227.328,0 256,28.672 256,64 C256,99.328 227.328,128 192,128 L128,128 L128,0 Z" fill="#FF7262"></path> <path d="M256,192 C256,227.328 227.328,256 192,256 C156.672,256 128,227.328 128,192 C128,156.672 156.672,128 192,128 C227.328,128 256,156.672 256,192 Z" fill="#1ABCFE"></path> </g></svg>`,
+    "google-meet": `<svg width="36" height="36" aria-hidden="true" viewBox="0 0 256 211" xmlns="http://www.w3.org/2000/svg"><g> <polygon fill="#00832D" points="144.822496 105.321856 169.778926 133.848796 203.341343 155.294133 209.178931 105.50196 203.341343 56.8331137 169.136495 75.6715889"></polygon> <path d="M0.000557021739,150.659712 L0.000557021739,193.089915 C0.000557021739,202.77838 7.86384724,210.643527 17.5541688,210.643527 L59.9843714,210.643527 L68.7704609,178.585069 L59.9843714,150.659712 L30.8744153,141.873623 L0.000557021739,150.659712 Z" fill="#0066DA"></path> <polygon fill="#E94235" points="59.9838143 9.9475983e-14 0 59.9838143 30.875715 68.7494798 59.9838143 59.9838143 68.6102243 32.4390893"></polygon> <polygon fill="#2684FC" points="0.000557021739 150.679394 59.9843714 150.679394 59.9843714 59.9832573 0.000557021739 59.9832573"></polygon> <path d="M241.658683,25.3977775 L203.341157,56.8342278 L203.341157,155.29339 L241.818362,186.852385 C247.577967,191.364261 256.003849,187.251584 256.003849,179.930462 L256.003849,32.1785888 C256.003849,24.7757699 247.377439,20.6835169 241.658683,25.3977775" fill="#00AC47"></path> <path d="M144.822496,105.321856 L144.822496,150.659712 L59.9843714,150.659712 L59.9843714,210.643527 L185.787731,210.643527 C195.478053,210.643527 203.341343,202.77838 203.341343,193.089915 L203.341343,155.294133 L144.822496,105.321856 Z" fill="#00AC47"></path> <path d="M185.787731,0 L59.9843714,0 L59.9843714,59.9838143 L144.822496,59.9838143 L144.822496,105.32167 L203.341343,56.832928 L203.341343,17.5536117 C203.341343,7.86329022 195.478053,0 185.787731,0" fill="#FFBA00"></path> </g></svg>`,
+    "google-drive": `<svg width="36" height="36" aria-hidden="true" viewBox="0 0 256 229" xmlns="http://www.w3.org/2000/svg"><g> <path d="M19.3542312,196.033928 L30.644172,215.534816 C32.9900287,219.64014 36.3622164,222.86588 40.3210929,225.211737 C51.6602421,210.818376 59.5534225,199.772864 64.000634,192.075201 C68.5137119,184.263529 74.0609657,172.045039 80.6423954,155.41973 C62.9064315,153.085282 49.4659974,151.918058 40.3210929,151.918058 C31.545465,151.918058 18.1051007,153.085282 0,155.41973 C0,159.964996 1.17298825,164.510261 3.51893479,168.615586 L19.3542312,196.033928 Z" fill="#0066DA"></path> <path d="M215.681443,225.211737 C219.64032,222.86588 223.012507,219.64014 225.358364,215.534816 L230.050377,207.470615 L252.483511,168.615586 C254.829368,164.510261 256.002446,159.964996 256.002446,155.41973 C237.79254,153.085282 224.376613,151.918058 215.754667,151.918058 C206.488712,151.918058 193.072785,153.085282 175.506888,155.41973 C182.010479,172.136093 187.484394,184.354584 191.928633,192.075201 C196.412073,199.863919 204.329677,210.909431 215.681443,225.211737 Z" fill="#EA4335"></path> <path d="M128.001268,73.3111515 C141.121182,57.4655263 150.162898,45.2470011 155.126415,36.6555757 C159.123121,29.7376196 163.521739,18.6920726 168.322271,3.51893479 C164.363395,1.1729583 159.818129,0 155.126415,0 L100.876121,0 C96.1841079,0 91.638842,1.31958557 87.6799655,3.51893479 C93.7861943,20.9210065 98.9675428,33.3058067 103.224011,40.6733354 C107.927832,48.8151881 116.186918,59.6944602 128.001268,73.3111515 Z" fill="#00832D"></path> <path d="M175.360141,155.41973 L80.6420959,155.41973 L40.3210929,225.211737 C44.2799694,227.557893 48.8252352,228.730672 53.5172481,228.730672 L202.485288,228.730672 C207.177301,228.730672 211.722567,227.411146 215.681443,225.211737 L175.360141,155.41973 Z" fill="#2684FC"></path> <path d="M128.001268,73.3111515 L87.680265,3.51893479 C83.7213885,5.86488134 80.3489013,9.09044179 78.0030446,13.1960654 L3.51893479,142.223575 C1.17298825,146.329198 0,150.874464 0,155.41973 L80.6423954,155.41973 L128.001268,73.3111515 Z" fill="#00AC47"></path> <path d="M215.241501,77.7099697 L177.999492,13.1960654 C175.653635,9.09044179 172.281148,5.86488134 168.322271,3.51893479 L128.001268,73.3111515 L175.360141,155.41973 L255.855999,155.41973 C255.855999,150.874464 254.682921,146.329198 252.337064,142.223575 L215.241501,77.7099697 Z" fill="#FFBA00"></path> </g></svg>`,
+    backlog: `<svg width="20" height="20" aria-hidden="true" viewBox="0 0 142 142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Nulab-logos-" transform="translate(-1348.000000, -2619.000000)"> <g id="Group-7" transform="translate(1348.000000, 2619.000000)"> <path d="M112.518975,141.27641 L29.5477542,141.27641 C13.8226507,141.27641 0.955380933,128.389559 0.955380933,112.638806 L0.955380933,29.5308457 C0.955380933,13.7800933 13.8226507,0.893241768 29.5477542,0.893241768 L112.518975,0.893241768 C128.244079,0.893241768 141.109945,13.7800933 141.109945,29.5308457 L141.109945,112.638806 C141.109945,128.389559 128.244079,141.27641 112.518975,141.27641" id="Fill-16" fill="#42CE9F"></path> <path d="M60.1988625,61.3236616 C60.1441201,72.9746913 60.1146434,84.3121962 60.1441201,91.0958596 C70.2756738,90.5461368 75.2937266,88.482216 79.2632519,83.7132655 C82.0775724,80.3319784 82.686757,76.4586121 80.9799172,72.8073843 C78.7467083,68.0328101 72.1804284,62.9897012 60.1988625,61.3236616 M53.5357306,104.795345 L53.5357306,104.795345 C51.7348462,104.795345 50.0069517,104.075503 48.7380511,102.796097 L48.7352438,102.793285 C46.7434629,100.784196 46.7153899,98.8622754 46.6648584,95.3741368 C46.6395927,93.6504536 46.6241525,91.2083348 46.6171343,88.2896022 C46.6059051,83.1719784 46.6185379,76.0705725 46.6536292,67.1808101 C46.7153899,51.8855824 46.8262783,36.6381566 46.8262783,36.6381566 L60.3448422,36.7365725 C60.3195765,40.1150477 60.2957144,43.8295428 60.2718523,47.705721 C76.2678604,49.5531269 88.283114,56.4998794 93.2225623,67.065523 C97.1640146,75.4941368 95.8263351,84.9589289 89.6474629,92.3837012 C80.1166718,103.836493 66.5812641,104.795345 53.5357306,104.795345" id="Fill-18" fill="#FFFFFF"></path> </g> </g> </g> </svg>`,
+    github: GITHUB_ICON,
+};
 const CM_CAPS = [
     { cap: "課題管理", icon: "📋", pipe: /sync-backlog/ },
     { cap: "会議", icon: "🎙", pipe: /ingest-minutes/ },
@@ -109,6 +129,110 @@ function sourceNeedsAttention(s) {
         return false;
     return true;
 }
+/**
+ * 能力（課題管理・会議・…）が**いまどういう状態か**を1つに決める。
+ *
+ * **接続マップとクライアント側の両方がこれを呼ぶ。** マップはビルド時にSVGを描き、
+ * 画面はブラウザで一覧を描くが、判定が2箇所にあると「同じ画面でマップが⚠️・直下が
+ * 『接続OK』」になる（`sourceNeedsAttention` の項に、実際にそうなった経緯がある）。
+ * クライアント側へは `.toString()` で埋め込んで共有する（`CLIENT_JS`）ので、
+ * **クロージャを持たない純関数に保つこと**——外の変数を掴むと直列化した先で壊れる。
+ *
+ * 返す値:
+ *   "off"  … 未使用（tools が none / enabled:false / 使っている証拠が無い）
+ *   "idle" … 宣言はあるが一度も繋がっていない（画面表記は「未接続」）
+ *   "warn" … 問題あり
+ *   "ok"   … 健全
+ *
+ * **順序が意味を持つ。** 未接続は警告より優先する——繋がっていない能力のパイプラインが
+ * 失敗するのは「壊れた」のではなく「まだ設定が済んでいない」結果で、逆にすると
+ * ⚠️の箱に「未接続」と書かれ、繋がっていないのに線が引かれる（実際にそうなった:
+ * APIキー未投入で sync-backlog が失敗し、課題管理が警告色で線付きになった）。
+ *
+ * @param cap 能力名
+ * @param ctx 生のフリートデータ { tools, internals, externals, pipes }。
+ *   **解決済みの値を渡させない。** 振り分けや regex を呼び出し側に持たせると、
+ *   呼び出し側ごとに写経が生まれ、片方が書き忘れると判定が静かに変わる。
+ */
+/**
+ * 外部ソースの種別（externalSources[].type）→ どの能力に属するか。
+ *
+ * **対応表はここ1箇所に持つ。** 画面の受け皿（capOf）と状態判定（capabilityState）と
+ * 件数の集計（tileSub）が各自で書き写していたため、未知の種別が
+ * 「受け皿には入るが、状態は未使用」という食い違いを起こした。
+ *
+ * **知らない種別は捨てず「その他」へ。** この画面の主眼は「何を Gold に
+ * 読んでいるか」の開示なので、読んでいるものが無言で消えるのが一番まずい。
+ */
+const CAP_OTHER = "その他";
+function externalCapability(type) {
+    if (type === "slack")
+        return "チャット";
+    if (String(type).indexOf("github") === 0)
+        return "開発";
+    return CAP_OTHER;
+}
+function capabilityState(cap, ctx) {
+    // **能力→パイプラインの対応はここに持つ。** 呼び出し側に渡させると、
+    // クライアント側（この関数を .toString() で受け取る側）が同じ表を書き写すことになり、
+    // 書き忘れると warn 判定が丸ごと死ぬ——実データで、東京ヴェルディの課題管理が
+    // マップは⚠️・タイルは「接続OK」になる。**この関数が読むものは、この関数が持つ。**
+    var PIPE = {
+        "課題管理": /sync-backlog/,
+        "会議": /ingest-minutes/,
+        "共有資料": /sync-materials/,
+        "デザイン": /sync-designs|update-design-notes/,
+    };
+    // **ライブ参照かどうかは、能力名ではなく渡された行から決める。** 名前で決めていたとき、
+    // 未知の種別を寄せた「その他」は行を2件持っているのに「未使用」と言い切っていた
+    // （読み手は未使用を信じて押さないので、行が消えるより悪い）
+    const liveExts = ctx.externals.filter(function (s) { return externalCapability(s.type) === cap; });
+    const isLive = cap === "チャット" || cap === "開発" || cap === CAP_OTHER;
+    const toolVal = ctx.tools[cap];
+    const internal = ctx.internals.filter(function (s) { return s.kind === cap; })[0];
+    const pipeRe = PIPE[cap];
+    // 使用中か: tools宣言がnone以外 / internalSourceが存在(enabled:false除く) / ライブ参照の実体がある
+    const used = (toolVal != null && toolVal !== "none") ||
+        (internal != null && internal.enabled !== false) ||
+        (isLive && liveExts.length > 0);
+    const off = toolVal === "none" || (internal != null && internal.enabled === false) || !used;
+    // 問題あり: ライブ参照はgate≠okが1件以上、同期ソースは対応パイプラインの直近runがfailure
+    const warn = !off &&
+        (isLive
+            ? liveExts.some(function (s) {
+                return sourceNeedsAttention(s);
+            })
+            : ctx.pipes.some(function (p) {
+                return (pipeRe != null && pipeRe.test(p.id) && p.applicable !== false && p.lastConclusion === "failure");
+            }));
+    // 「実際に繋がっている」の証拠は共通で次のどれか:
+    //   - 一度でも同期が走った（lastSync）
+    //   - 正本のURLが導出できる（url。設定ファイルが実在して初めて出る）
+    //   - 会議は取り込みが有効（ingestState === "on"）
+    //   - ライブ参照は読む対象が1件以上ある
+    //
+    // **能力ごとに場当たりで判定しない。** 最初は会議とライブ参照だけを見ていたが、
+    // 課題管理が「宣言があるだけ」で接続済みに見えていた——同期が一度も走っておらず、
+    // APIキーすら入っていない案件で。指摘されるまで気づけなかった。
+    //
+    // **空振りした同期の時刻を「繋がっている証拠」にしない。**
+    // 対象外のパイプライン（applicable: false）も実行はされ、何もせず成功で終わり、
+    // その時刻が lastSync に入る。それを根拠にすると、Figmaのトークンも無く
+    // ファイルも0件の案件が「接続済み」として青い線で繋がる（実際にそうなっていた）。
+    // パイプライン一覧では「applicable:false は最終成功を出さない（スキップ正常終了のrunが
+    // 成功表示に見えるため）」と決めているのに、接続判定だけがその値を信じていた。
+    const pipeSkipped = ctx.pipes.some(function (p) {
+        return pipeRe != null && pipeRe.test(p.id) && p.applicable === false;
+    });
+    const syncedForReal = internal != null && ((internal.lastSync && !pipeSkipped) || internal.url);
+    const idle = !off &&
+        (isLive
+            ? liveExts.length === 0
+            : cap === "会議"
+                ? (internal == null ? undefined : internal.ingestState) !== "on"
+                : !syncedForReal);
+    return off ? "off" : idle ? "idle" : warn ? "warn" : "ok";
+}
 function renderConnectionMap(site) {
     const internals = site.internalSources ?? [];
     const externals = site.externalSources ?? [];
@@ -129,48 +253,13 @@ function renderConnectionMap(site) {
         const internal = internals.find((s) => s.kind === c.cap);
         const isLive = c.cap === "チャット" || c.cap === "開発";
         const liveExts = c.cap === "チャット" ? slackExts : c.cap === "開発" ? ghExts : [];
-        // 使用中か: tools宣言がnone以外 / internalSourceが存在(enabled:false除く) / ライブ参照の実体がある
-        const used = (toolVal != null && toolVal !== "none") ||
-            (internal != null && internal.enabled !== false) ||
-            (isLive && liveExts.length > 0);
-        const off = toolVal === "none" || internal?.enabled === false || !used;
-        // 問題あり: ライブ参照はgate≠okが1件以上、同期ソースは対応パイプラインの直近runがfailure
-        const warn = !off &&
-            (isLive
-                // カード側の集計（sourceNeedsAttention）と同じ判定にする。ここだけ接続状態だけを見ていると、
-                // マップが⚠️なのに直下のグループが「接続OK」という矛盾が同じ画面に出る。
-                ? liveExts.some((s) => sourceNeedsAttention(s))
-                : pipes.some((p) => c.pipe != null && c.pipe.test(p.id) && p.applicable !== false && p.lastConclusion === "failure"));
-        // **宣言されているだけで、実際には何も繋がっていない**状態を分けて表す。
-        //
-        // 会議に Teams、チャットに Teams を宣言した案件で、どちらも「接続済み」の見た目になっていた。
-        // notetaker は Teams の文字起こしを取り込めず（Google Meet 前提）、Teams の MCP も配っていないので、
-        // **実体は何も繋がっていない**。それを繋がって見せると、設定が足りないことに誰も気づけない。
-        //
-        //   - 会議: 取り込みが有効（ingestState === "on"）でなければ「自動連携なし」
-        //   - チャット/開発: ライブ参照の実体（登録されたチャンネル・リポジトリ）が無ければ同じ
-        //
-        // **能力ごとに場当たりで判定しない。** 最初は会議とライブ参照だけを見ていたが、
-        // 課題管理が「宣言があるだけ」で接続済み（青）に見えていた——同期が一度も走っておらず、
-        // APIキーすら入っていない案件で。指摘されるまで気づけなかった。
-        //
-        // 「実際に繋がっている」の証拠は共通で次のどれか:
-        //   - 一度でも同期が走った（lastSync）
-        //   - 正本のURLが導出できる（url。設定ファイルが実在して初めて出る）
-        //   - 会議は取り込みが有効（ingestState === "on"）
-        //   - ライブ参照は読む対象が1件以上ある
-        const idle = !off &&
-            (isLive
-                ? liveExts.length === 0
-                : c.cap === "会議"
-                    ? internal?.ingestState !== "on"
-                    : !(internal?.lastSync || internal?.url));
-        // **未接続は警告より優先する。** 繋がっていない能力のパイプラインが失敗するのは
-        // 「壊れた」のではなく「まだ設定が済んでいない」結果で、順番を逆にすると
-        // **⚠️の箱に「未接続」と書かれ、しかも繋がっていないのに線が引かれる**（実際にそうなった:
-        // APIキー未投入で sync-backlog が失敗し、課題管理が警告色で線付きになった）。
-        // 失敗そのものは下の「自動化パイプライン」の一覧に出るので、情報は失われない。
-        const state = off ? "cm-off" : idle ? "cm-idle" : warn ? "cm-warn" : "cm-ok";
+        // **判定は capabilityState に一本化している。** 画面側（クライアントJS）も同じ関数を
+        // 呼ぶので、ここで写経すると「同じ画面でマップが⚠️・直下が『接続OK』」が復活する。
+        const st = capabilityState(c.cap, { tools, internals, externals, pipes });
+        const off = st === "off";
+        const idle = st === "idle";
+        const warn = st === "warn";
+        const state = "cm-" + st;
         // **ラベルは能力名（会議・課題管理…）。ツール名は下に小さく置く。**
         // ツールは「その能力をいま何で実現しているか」という差し替え可能なアダプタで、
         // 主語ではない。ツール名を主にすると、Teams のように複数の能力に使われるものが
@@ -746,6 +835,8 @@ a:hover { text-decoration: underline; }
 .datasources-asof.is-stale { color: var(--warn, #a15c00); }
 .conn-map-asof { color: var(--muted); font-size: 12px; margin: 6px 0 0; text-align: right; }
 .ds-sub { font-size: 13px; font-weight: 700; color: var(--muted); margin: 20px 0 8px; }
+/* 能力の小見出し。同じ能力の設定（状態・追加・鍵）を1か所に集めるための区切り */
+.ds-cap { font-size: 15px; font-weight: 700; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #e5e7eb); }
 .ds-list { display: flex; flex-direction: column; gap: 10px; }
 .ds-card {
   background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
@@ -833,6 +924,30 @@ a.ds-name:hover { text-decoration: underline; }
    **幅と色まで指定する。** border-style だけだと、border を持たない .ds-excluded 側は
    初期値の medium(≈3px)/currentColor に解決され、押した向きによって太さ3倍・色が別物になる */
 .badge.is-pending { border: 1px dashed currentColor; opacity: 0.85; }
+/* 能力モーダルは一覧（17チャンネル・19リポジトリ）を入れるので広く取る。
+   既定の480pxでは、チャンネル名＋バッジ2つ＋トグルが1行に収まらず折り返す。
+   画面の広さいっぱいまで使う——この画面は一覧を読むためのもので、
+   余白より行の読みやすさを優先する */
+/* **セレクタを .modal.modal-wide にする（詳細度を上げる）。** 素の .modal-wide だと
+   後ろにある .modal の max-width:480px と詳細度が並び、**後勝ちで負ける**。
+   クラスは付いているのに効かず、見た目は「少し窮屈」なだけなので気づきにくい */
+.modal.modal-wide { max-width: min(1040px, 92vw); }
+.modal-overlay:has(.modal-wide) { padding: 16px; }
+.ds-tile { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 14px 16px; }
+.ds-tile:hover { border-color: #c7cdd6; }
+.ds-tile-body { flex: 1; min-width: 0; }
+.ds-tile-name { font-weight: 700; }
+/* ロゴはタイルの左に独立して置き、名前の高さに縛られないようにする。
+   一覧を眺めるとき、先に目に入るのは文字よりロゴなので大きく取る */
+.ds-tile-logo {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; flex: 0 0 40px; font-size: 26px; line-height: 1;
+}
+.ds-tile-logo svg { width: 100%; height: 100%; }
+.ds-tile-desc { font-size: 12.5px; color: var(--muted); }
+.ds-tile-sub { font-size: 12.5px; margin-top: 2px; }
+.ds-tile-chev { color: var(--muted); }
+.ds-tile-note { font-size: 12.5px; color: #a15c00; margin-top: 2px; }
 .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; }
@@ -872,6 +987,8 @@ a.ds-name:hover { text-decoration: underline; }
 .ds-addform .sec-input { margin-bottom: 6px; }
 .sec-input-inline { width: auto; max-width: 220px; margin-bottom: 0; }
 .sec-how { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 10px; }
+/* 入力欄のすぐ下。貼る直前に読める位置に置く */
+.sec-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
 .sec-how p { margin: 0; }
 /* 取り込みの条件は箇条書きで出す（ANDであることを読み飛ばせないように） */
 .sec-how-list { margin: 4px 0; padding-left: 1.3em; }
@@ -907,7 +1024,13 @@ button.ops-card-btn:disabled { opacity: .6; cursor: default; }
   box-shadow: 0 12px 40px rgba(16,24,40,0.25); width: 100%; max-width: 480px;
   max-height: 90vh; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px;
 }
+.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
 .modal-title { font-size: 17px; font-weight: 700; margin: 0; color: var(--text); }
+.modal-x {
+  flex: 0 0 auto; border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1;
+  color: var(--muted); padding: 2px 6px; border-radius: 6px;
+}
+.modal-x:hover { background: var(--bg); color: var(--text); }
 .modal-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
 .modal-field { display: flex; flex-direction: column; gap: 4px; }
 .modal-field-label { font-size: 12px; font-weight: 600; color: var(--muted); }
@@ -976,6 +1099,21 @@ button.ops-card-btn:disabled { opacity: .6; cursor: default; }
 const CLIENT_JS = `
 (function () {
   var SITE = JSON.parse(document.getElementById("site-data").textContent);
+  var ADAPTER_ICONS = ${JSON.stringify(ADAPTER_ICONS)};
+
+  // ---- ビルド時TSと共有する判定（唯一の正本は上の関数定義） ----
+  //
+  // **写経しない。** 接続マップ（ビルド時にSVGを描く）と画面（ブラウザで一覧を描く）が
+  // 別々に同じ判定を持つと、同じ画面でマップが⚠️・直下が「接続OK」になる。
+  // 実際に起きたので sourceNeedsAttention のコメントに経緯が残っている。
+  // ここは関数の実体をそのまま流し込んでいるので、直すのは上の1箇所だけでよい。
+  //
+  // **この2つはクロージャを持たない純関数に保つこと。** 外の変数を掴むと、
+  // 直列化した先（ここ）で undefined を参照して壊れる。
+var CAP_OTHER = ${JSON.stringify(CAP_OTHER)};
+${externalCapability.toString()}
+${sourceNeedsAttention.toString()}
+${capabilityState.toString()}
   // 「はじめに」セクションのチュートリアルデータ（ビルド時に埋め込み。ボタンURL・チャレンジ4の決定は解決済み）
   var TUTORIAL = (function () {
     var elx = document.getElementById("tutorial-data");
@@ -1546,6 +1684,35 @@ const CLIENT_JS = `
   }
 
   /** 組み立てだけを行う（設置は呼び出し側）。ライブ差し替えで同じ節を作り直すため分けている */
+  /** ツールid→表示名（クライアント側。接続マップの CM_TOOL_LABEL と同じ内容） */
+  var CM_TOOL_LABEL_C = {
+    backlog: "Backlog", jira: "Jira", "google-meet": "Google Meet", teams: "Teams",
+    "google-drive": "Google Drive", box: "Box", local: "ローカル", figma: "Figma",
+    slack: "Slack", github: "GitHub", none: "",
+  };
+
+  /**
+   * 能力モーダル。**中身は既存の部品をそのまま入れる。**
+   * 一覧・追加フォーム・鍵・手動投入は作り直さない（先出しバッジやライブ差し替えを壊さないため）。
+   */
+  function openCapabilityModal(cap, items) {
+    var m = makeModal(cap, true);
+    // **凡例を必ず入れる。** goldState の4状態は凡例があって初めて読める
+    if (cap === "チャット" || cap === "開発") {
+      m.modal.appendChild(el("p", { class: "modal-desc", text: "「Gold昇格の読み取り対象」のものだけを毎晩の Gold 昇格が読み取ります。「除外」は意図的に外したもの、「未宣言（対象外）」はまだ判断されていないもので、どちらも読み取りません。" }));
+    }
+    if (!items.length) {
+      m.modal.appendChild(el("p", { class: "ds-empty", text: "この能力にはまだ設定できるものがありません。" }));
+    }
+    items.forEach(function (n) { m.modal.appendChild(n); });
+    m.modal.appendChild(el("div", { class: "modal-actions" }, [
+      el("button", { class: "ds-toggle-btn", type: "button", text: "閉じる" }),
+    ]));
+    m.modal.querySelector(".modal-actions button").addEventListener("click", m.close);
+    m.overlay.appendChild(m.modal);
+    showModal(m.overlay, m.modal);
+  }
+
   function buildDataSources() {
     var internals = fleetVal("internalSources") || [];
     var sources = fleetVal("externalSources") || [];
@@ -1554,11 +1721,30 @@ const CLIENT_JS = `
     var tools = fleetVal("tools") || {};
     var chatOff = tools["チャット"] === "none";
     var devOff = tools["開発"] === "none";
-    if (!internals.length && !sources.length && !pipes.length && !chatOff && !devOff) return null; // すべて無ければセクションごと出さない
+    // **この節に入るものが1つでもあるなら出す。**
+    //
+    // 条件を「データ行があるか」で書いていて、2回続けて漏らした——
+    //   1回目: 鍵カードを移したのに条件へ足さず、新規案件で鍵が丸ごと消えた
+    //   2回目: tools の宣言だけの案件（Teams等）でタイルが出ず、
+    //          「未対応です」と伝える場所も接続マップのアンカーの受け皿も無くなった
+    //
+    // 個別に足し続けると次も漏らすので、**この節に出す候補を列挙して判定する**形にする。
+    var hasSecrets = ((SITE.secretKinds || []).filter(function (k) { return SECRET_FORMS[k]; })).length > 0;
+    var hasTools = Object.keys(tools).length > 0;
+    // **投入の口も候補。** fleet-status.json はGitHub Actionsが夜間に生成するので、
+    // 立ち上げ直後の案件には存在しない。それを理由に節ごと消すと、
+    // 文字起こし・資料を入れる口が**一番必要な瞬間に**画面から無くなる
+    var hasIntake = !!SITE.intake;
+    if (!internals.length && !sources.length && !pipes.length && !hasTools && !hasSecrets && !hasIntake) return null;
 
     var sec = el("section", { class: "datasources" });
     sec.appendChild(el("h2", { class: "datasources-head", text: "データソースと自動化" }));
-    sec.appendChild(el("p", { class: "datasources-intro", text: "このCortexが接続している情報源と、毎晩自動でGoldに昇格する処理の一覧です。" }));
+    // **まだ何も繋がっていない案件では、文言を変える。** 接続がゼロの状態で
+    // 「接続している情報源の一覧です」と書くと、中身（手動投入だけ）と噛み合わない
+    var connected = internals.length > 0 || sources.length > 0 || hasTools;
+    sec.appendChild(el("p", { class: "datasources-intro", text: connected
+      ? "このCortexが接続している情報源と、毎晩自動でGoldに昇格する処理の一覧です。"
+      : "情報源はまだ接続されていません。下から手元のファイルを取り込めます（自動連携の設定はこれから行います）。" }));
     // **いつ時点の情報かを必ず出す。** この節は夜間バッチが作るスナップショットを読んでいるので、
     // 設定を変えても次の生成までは古い値のまま。時刻が無いと「変えたのに反映されない」ではなく
     // 「変えたはずなのに違う値が出ている」と読まれてしまう（実際に設定変更直後にそうなった）。
@@ -1576,8 +1762,26 @@ const CLIENT_JS = `
       }));
     }
 
+    // ---- 能力ごとの受け皿 ----
+    //
+    // **能力の一覧は tools のキーで決める。データ行の有無で決めない。**
+    // internalSources に現れるのは 課題管理/会議/共有資料/デザイン の4つだけで、
+    // チャットと開発は externalSources 側にしかない。さらに tools.チャット = "teams" の
+    // 案件（三菱）は**どちらにも行が無い**——Cortex が Teams に対応していないため。
+    // 行の有無でセクションを作ると、その案件でチャットが丸ごと消える。
+    // 「未対応です」と伝えるべき場面で何も出ないのが一番悪い。
+    var CAP_ORDER = ["課題管理", "会議", "共有資料", "チャット", "デザイン", "開発"];
+    var capBox = {};
+    var manualBox = {};
+    // 対応表は externalCapability が持つ（状態判定・件数の集計と同じものを使う）
+    var capOf = externalCapability;
+    function pushCap(cap, node) {
+      if (!cap || !node) return;
+      if (!capBox[cap]) capBox[cap] = [];
+      capBox[cap].push(node);
+    }
+
     if (internals.length) {
-      sec.appendChild(el("div", { class: "ds-sub", text: "リポジトリ内の情報源（自動同期）" }));
       // **「いま同期する」ボタンは出さない。** 受け口（Apps Script の Webアプリ）を
       // 公開できないため、押しても届かない。
       //
@@ -1589,7 +1793,6 @@ const CLIENT_JS = `
       // 最悪60分→20分）。押す口が要るなら、bot の資格情報で Lambda が認証する経路を
       // 用意してからここを戻す（syncNowRow と Lambda の op=sync は残してある）。
       // sec.appendChild(syncNowRow());
-      var ilist = el("div", { class: "ds-list" });
       internals.forEach(function (s) {
         // ラベルの下に補足行（会議の照合キー・Drive未設定の注記）を重ねられるよう縦組みにする
         var col = el("div", { class: "ds-col" }, [ dsNameEl(s.label || "", s.url) ]);
@@ -1652,13 +1855,14 @@ const CLIENT_JS = `
         // 会議・共有資料・デザインの操作をカード内に置く（その情報源の文脈で押せるように）
         var ctl = internalControls(s, inactive);
         if (ctl) card.appendChild(ctl);
-        ilist.appendChild(card);
+        // 能力ごとの受け皿へ入れる（並べるのは下の CAP_ORDER のループ）
+        pushCap(s.kind, card);
       });
-      sec.appendChild(ilist);
     }
 
     if (sources.length || chatOff || devOff) {
-      sec.appendChild(el("div", { class: "ds-sub", text: "外部ソース（ライブ参照）" }));
+      // **見出しは付けない。** #101 で行は能力ごとのモーダルへ移ったので、
+      // ここに見出しを置くと中身ゼロの見出しが節の先頭に立つ（実際に8案件すべてで出ていた）
       // ツール（type）別にグループ化し、多いグループ（4件以上）は折りたたむ
       var groups = [];
       var byType = {};
@@ -1668,9 +1872,8 @@ const CLIENT_JS = `
         g.items.push(s);
       });
       var UNIT = { "slack": "チャンネル", "github-issues": "リポジトリ", "github-discussions": "リポジトリ" };
-      var wrap = el("div", { class: "ds-list" });
       // チャット未使用: Slackグループの位置（先頭）に「存在するが未設定」のグレー行を出す
-      if (chatOff) wrap.appendChild(inactiveSourceRow("💬", "チャット", "ds-チャット"));
+      if (chatOff) pushCap("チャット", inactiveSourceRow("💬", "チャット", "ds-チャット"));
       var chatAnchored = chatOff;
       var devAnchored = devOff;
       groups.forEach(function (g) {
@@ -1683,14 +1886,12 @@ const CLIENT_JS = `
         g.items.forEach(function (s) { cards.appendChild(extSourceCard(s, meta)); });
         if (g.items.length >= 4) {
           // 折りたたみ（既定は閉）。summaryに件数と状態の要約を出す。
-          // 判定は接続マップ側の sourceNeedsAttention と揃える（片方だけ直すと同じ画面で矛盾する）。
-          // 意図的に外したソースが接続できないのは当たり前なので数えない。ただし通知先に
-          // 使っているなら届いていないこと自体が問題なので拾う。gold 不明は警告する側に倒す。
+          // **判定は共有の sourceNeedsAttention を呼ぶ。** 以前はここに中身を写経していたが、
+          // 片方だけ直すと同じ画面でマップが⚠️・直下が「接続OK」になる（実際に起きた）。
           var bad = 0;
           var noToken = 0;
           g.items.forEach(function (s) {
-            if (s.gate === "ok") return;
-            if (s.gold === false && s.notify !== true) return;
+            if (!sourceNeedsAttention(s)) return;
             bad++;
             if (s.gate === "no_token") noToken++;
           });
@@ -1706,30 +1907,198 @@ const CLIENT_JS = `
           ]);
           var det = el("details", { class: "ds-group" }, [sum, cards]);
           if (anchorId) det.id = anchorId;
-          wrap.appendChild(det);
+          pushCap(capOf(g.type), det);
         } else {
           if (anchorId && cards.firstChild) cards.firstChild.id = anchorId;
-          while (cards.firstChild) wrap.appendChild(cards.firstChild);
+          // **appendChild と違い pushCap はノードを動かさない。** firstChild を条件にすると
+          // 永久に真のままになる（実際に無限ループを作った）。先に配列へ取り出す。
+          var kids = [];
+          for (var ci = 0; ci < cards.childNodes.length; ci++) kids.push(cards.childNodes[ci]);
+          kids.forEach(function (n) { pushCap(capOf(g.type), n); });
         }
       });
-      // 開発未使用: GitHubグループの位置（末尾）にグレー行を出す
-      if (devOff) wrap.appendChild(inactiveSourceRow("🐙", "GitHub", "ds-開発"));
-      sec.appendChild(wrap);
     }
-    // **追加フォームは外部ソースの節の外に置く。** グループは0件だと描かれず、4件以上だと
-    // 畳まれる（既定は閉）。さらに節そのものが「1件以上あるとき」しか描かれないので、
-    // 中に入れると**新規案件（0件）＝一番追加したい場面**で消える。
+    // 開発未使用: グレー行も能力の受け皿へ
+    if (devOff) pushCap("開発", inactiveSourceRow("🐙", "GitHub", "ds-開発"));
+
+    // **追加フォームはグループの外に置く。** グループは0件だと描かれず、4件以上だと
+    // 畳まれる（既定は閉）。中に入れると**新規案件（0件）＝一番追加したい場面**で消える。
     var adders = renderExternalAdders();
-    if (adders.childNodes.length) {
-      if (!sources.length && !chatOff && !devOff) {
-        sec.appendChild(el("div", { class: "ds-sub", text: "外部ソース（ライブ参照）" }));
+    pushCap("チャット", adders.querySelector('[data-adder="slack"]'));
+    pushCap("開発", adders.querySelector('[data-adder="github"]'));
+
+    // 連携の鍵は、その能力のところへ置く（画面下まで往復させない）
+    var SECRET_CAP = { figma: "デザイン", backlog: "課題管理", "external-sources": "開発" };
+    (SITE.secretKinds || []).forEach(function (k) {
+      if (!SECRET_FORMS[k]) return;
+      pushCap(SECRET_CAP[k], secretCard(k, SECRET_FORMS[k]));
+    });
+
+    // **手動投入はアダプタに依存しないので、別タイルにする。**
+    // Google Meet でも Teams でも、文字起こしを手で入れる操作は同じ。
+    // アダプタのタイルに混ぜると、Teams案件（自動取り込みが使えない＝手動投入が
+    // 唯一の口）で「未対応」のタイルの裏に隠れてしまう。
+    manualBox["会議"] = intakeCardFor("会議");
+    manualBox["共有資料"] = intakeCardFor("共有資料");
+
+    // ---- 能力ごとにタイルを並べる ----
+    //
+    // **タイルは「押すかどうか」を判断できるだけの情報を持つ。**
+    // 押さないと分からない設計にすると、問題があること自体に気づけない。
+    // いまの一覧が一番価値を出しているのはそこなので、畳んで失わないようにする。
+    var CAP_META = {
+      "課題管理": { icon: "📋", desc: "課題・ドキュメントの同期" },
+      "会議": { icon: "🎙", desc: "文字起こしから議事録を生成" },
+      "共有資料": { icon: "📁", desc: "資料をMarkdown化して取り込み" },
+      "チャット": { icon: "💬", desc: "チャンネルの会話をGoldの材料に" },
+      "デザイン": { icon: "🎨", desc: "画面インベントリの同期" },
+      "開発": { icon: "🐙", desc: "IssuesをGoldの材料に" },
+    };
+    var STATE_LABEL = { ok: "● 接続OK", idle: "⦿ 未接続", off: "未使用", warn: "⚠️" };
+    var SECRET_OF_CAP = { "デザイン": "figma", "課題管理": "backlog", "開発": "external-sources" };
+
+    /** タイルの2行目（状態と読み取り範囲）。**件数は出せる能力だけ出す** */
+    function tileSub(cap, st) {
+      var internal = internals.filter(function (s) { return s.kind === cap; })[0];
+      var live = sources.filter(function (s) { return externalCapability(s.type) === cap; });
+      var parts = [];
+      if (st === "warn") {
+        if (live.length) {
+          var bad = 0, noToken = 0;
+          live.forEach(function (s) {
+            if (!sourceNeedsAttention(s)) return;
+            bad++;
+            if (s.gate === "no_token") noToken++;
+          });
+          parts.push(noToken === bad && bad > 0
+            ? "⚠️ " + bad + "件が読めていません（トークン未設定）"
+            : "⚠️ " + bad + "件に問題");
+        } else {
+          // 内部能力の warn はパイプラインの失敗由来。数えるものが無いので件数を出さない
+          parts.push("⚠️ 同期が失敗しています");
+        }
+      } else {
+        // **off には2つの意味が同居している。** 「使わないと宣言した」（tools が none）と
+        // 「まだ何も分かっていない」（fleet-status.json を夜間バッチがまだ作っていない）。
+        // 後者を「未使用」と書くと、立ち上げ直後の案件で顧客が
+        // 「Backlog も Slack も使わない案件だ」と読む——繋ぐ前提で契約しているのに
+        var declaredOff = tools[cap] === "none" || (internal != null && internal.enabled === false);
+        parts.push(st === "off" && !declaredOff ? "未設定" : STATE_LABEL[st] || "");
+      }
+      // 読み取り範囲。**この画面は顧客も見る。何をGoldに読んでいるかの開示が主眼**
+      //
+      // **繋がっているときだけ出す。** 「未使用」と「2リポジトリ／2件をGoldに使用」が
+      // 同じ行に並ぶと読めない。tools を none に倒しても externalSources は翌朝の
+      // 再生成まで残るので、使うのをやめた宣言の直後に必ず通る。
+      // 「⦿ 未接続　Driveフォルダ 0件」も同様（最終同期を出さないのと同じ理由）
+      var connected = st === "ok" || st === "warn";
+      if (!connected) {
+        // 状態だけ出す
+      } else if (live.length) {
+        // 単位は分かるものだけ。知らない種別に勝手な単位を付けない
+        var unit = cap === "チャット" ? "チャンネル" : cap === "開発" ? "リポジトリ" : "件";
+        var gold = live.filter(function (s) { return s.gold === true; }).length;
+        parts.push(live.length + unit + "／" + gold + "件をGoldに使用");
+      } else if (cap === "共有資料" && tools[cap] === "google-drive" && internal && internal.driveFolderIds) {
+        // **ツールを見る。** local の案件（gdo・三菱）は Drive を使っていないのに
+        // 「ローカル」と名乗ったタイルが「Driveフォルダ 0件」と語っていた
+        parts.push("Driveフォルダ " + internal.driveFolderIds.length + "件");
+      } else if (cap === "デザイン" && internal && internal.figmaFiles) {
+        // **キーが無ければ何も出さない。** 未取得を「登録ゼロ」と断定して顧客に見せない
+        parts.push("Figmaファイル " + internal.figmaFiles.length + "件");
+      }
+      // **未接続・未使用のときは最終同期を出さない。** 空振りしたrunの時刻なので、
+      // 「未接続」と並べると「一度は繋がった」と読めてしまう
+      if (internal && internal.lastSync && st !== "off" && st !== "idle") {
+        var t = dsFmtTime(internal.lastSync);
+        if (t) parts.push("最終同期 " + t);
+      }
+      return parts.join("　");
+    }
+
+    // **CAP_ORDER に無い能力も並べる。** 既知の順に並べたあと、受け皿に入った
+    // 未知のもの（未対応のツール・新しい種別）を後ろに足す
+    var extraCaps = Object.keys(capBox).filter(function (c) { return CAP_ORDER.indexOf(c) === -1; });
+    var anyCap = false;
+    CAP_ORDER.concat(extraCaps).forEach(function (cap) {
+      var items = capBox[cap] || [];
+      var declared = tools[cap] != null;
+      // **tools に宣言があれば、行が無くてもタイルを出す。** 出さないと
+      // Teams案件でチャットが丸ごと消え、「未対応です」と伝える場所も無くなる。
+      // 接続マップのアンカー（ds-<能力>）の受け皿にもなる（いま2案件で解決できていない）
+      // **手動投入はアダプタに依存しない。** 宣言や行の有無で弾くと、
+      // fleet-status.json がまだ無い新規案件で投入の口ごと消える
+      if (!items.length && !declared && !manualBox[cap]) return;
+      anyCap = true;
+      sec.appendChild(el("div", { class: "ds-cap", text: cap }));
+      // アダプタのタイルは、宣言か行があるときだけ。手動投入だけが理由でここへ来た
+      // 新規案件に、中身の無い「会議」タイルを立てても押す先が無い
+      if (items.length || declared) renderAdapterTile(cap, items);
+      renderManualTile(cap);
+    });
+
+    function renderAdapterTile(cap, items) {
+      var meta = CAP_META[cap] || { icon: "🔗", desc: "" };
+      var st = capabilityState(cap, { tools: tools, internals: internals, externals: sources, pipes: pipes });
+      // **ロゴはタイルの左に独立して置く。** 名前の行に入れると名前の高さに
+      // 縛られて小さくなる。ロゴで能力を見分けられるのが一覧の主な用途
+      var logo = ADAPTER_ICONS[tools[cap]];
+      var ic = el("span", { class: "ds-tile-logo" });
+      if (logo) ic.innerHTML = logo; // 公式ロゴ。ビルド時に埋め込み済みで外部通信は起きない
+      else ic.textContent = meta.icon;
+      // "none"（未使用の宣言）はツール名ではない。素通しすると顧客の画面に
+      // 「none」というタイル名が出る（接続マップ側で一度直したのと同じ穴）
+      var rawTool = tools[cap] && tools[cap] !== "none" ? tools[cap] : "";
+      var body = el("div", { class: "ds-tile-body" }, [
+        el("div", { class: "ds-tile-name", text: (rawTool && (CM_TOOL_LABEL_C[rawTool] || rawTool)) || cap }),
+        el("div", { class: "ds-tile-desc", text: meta.desc }),
+        el("div", { class: "ds-tile-sub ds-gate-" + st, text: tileSub(cap, st) }),
+      ]);
+      // トークン未設定は**状態とは別軸**。状態機械に混ぜると判定が1箇所でなくなる。
+      // ただし「使わない」と**宣言した**能力では出さない——設定する必要が無いものに
+      // ついて設定を促す偽の警告になる（sushiro のデザインで出ていた）。
+      //
+      // **状態（off）ではなく宣言（none）で判断する。** off には「none と書いた」と
+      // 「まだ何も書いていない」の両方が落ちてくる。状態で切ると、tools が空の
+      // 新規案件——**まさに何を入れれば繋がるのかを知りたい場面**——から、
+      // 鍵が未設定であることの手がかりまで消える
+      var sk = SECRET_OF_CAP[cap];
+      if (tools[cap] !== "none" && sk && (SITE.secretKinds || []).indexOf(sk) >= 0 && !((fleetVal("secretSources") || {})[sk])) {
+        body.appendChild(el("div", { class: "ds-tile-note", text: "⚠ トークンが未設定です" }));
+      }
+      var tile = el("button", { class: "ds-tile", type: "button", id: "ds-" + cap }, [
+        ic,
+        body,
+        el("span", { class: "ds-tile-chev", text: "›" }),
+      ]);
+      tile.addEventListener("click", function () { openCapabilityModal(cap, items); });
+      sec.appendChild(tile);
+    }
+
+    // アダプタ非依存の操作（手動投入）は同じ能力の中で別タイルにする
+    function renderManualTile(cap) {
+      var manual = manualBox[cap];
+      if (manual) {
+        var mBody = el("div", { class: "ds-tile-body" }, [
+          el("div", { class: "ds-tile-name", text: cap === "会議" ? "文字起こしを手動で追加" : "資料を手動で追加" }),
+          el("div", { class: "ds-tile-desc", text: cap === "会議"
+            ? "自動取り込みできない会議（顧客主催・別ツール）の文字起こしから議事録を作ります"
+            : "手元のファイルやテキストを Markdown 化して取り込みます" }),
+        ]);
+        var mTile = el("button", { class: "ds-tile", type: "button", id: "ds-manual-" + cap }, [
+          el("span", { class: "ds-tile-logo", text: "📥" }),
+          mBody,
+          el("span", { class: "ds-tile-chev", text: "›" }),
+        ]);
+        mTile.addEventListener("click", function () {
+          openCapabilityModal(cap === "会議" ? "文字起こしを手動で追加" : "資料を手動で追加", [manual]);
+        });
+        sec.appendChild(mTile);
       }
-      sec.appendChild(adders);
     }
 
-    // 注記は内部・外部の両グループの後ろに1つ（内部の直下だけに置くと外部ソースが
-    // Gold昇格の対象外に見えるため）。除外の方法もここで案内する。
-    if (internals.length || sources.length || chatOff || devOff) {
+    // 注記は全能力の後ろに1つ。**Gold の4状態は凡例があって初めて読める。**
+    if (anyCap) {
       sec.appendChild(el("p", { class: "ds-note", text: "「Gold昇格の読み取り対象」のものだけを毎晩の Gold 昇格が読み取ります。「除外」は意図的に外したもの、「未宣言（対象外）」はまだ判断されていないもので、どちらも読み取りません（チャンネル・リポジトリ単位で切り替えられます）。" }));
     }
 
@@ -2093,6 +2462,7 @@ const CLIENT_JS = `
         ];
       },
       build: function (url, name) { return { op: "add-channel", url: url, name: name }; },
+      adder: "slack",
     }));
 
     if (usable("開発", "github")) {
@@ -2115,6 +2485,7 @@ const CLIENT_JS = `
           ];
         },
         build: function (repo, name) { return { op: "add-github-source", repo: repo, name: name }; },
+        adder: "github",
       }));
     }
     return box;
@@ -2308,7 +2679,7 @@ const CLIENT_JS = `
     // このセッションで追加したものを並べる場所（リロードすると消える＝正式な一覧は上に出る）
     var pending = el("div", { class: "ds-pending" });
 
-    var box = el("div", { class: "ds-addform" }, [
+    var box = el("div", opts.adder ? { class: "ds-addform", "data-adder": opts.adder } : { class: "ds-addform" }, [
       el("div", { class: "ds-addform-title", text: opts.title }),
       opts.hint ? el("p", { class: "sec-how", text: opts.hint }) : null,
       main,
@@ -2578,6 +2949,9 @@ const CLIENT_JS = `
    */
   function refreshDataSources() {
     if (listState.tab !== "ops") return;
+    // **モーダルが開いている間は差し替えない。** 下地を入れ替えると、開いているモーダルの
+    // 中身が切り離されたノードになる（閉じるときに refreshDataSources を呼び直す）
+    if (isModalOpen()) return;
     var old = app.querySelector(".datasources");
     // **触っている最中は差し替えない。** この節の中には追加フォームの入力欄があり、
     // 貼りかけのURLや「保存中…」の表示ごと作り直してしまう。保存が成功していても
@@ -2595,27 +2969,8 @@ const CLIENT_JS = `
       else app.insertBefore(next, app.firstChild);
     }
     updateConnMapAsOf();
-    updateSecretStates();
   }
 
-  /**
-   * 鍵カードの「現在: ◯◯ から取得中」だけを更新する。
-   * **カードごと作り直さない**（貼りかけのトークンが消える）。表示は1行なので差し替えで足りる。
-   */
-  function updateSecretStates() {
-    var sources = fleetVal("secretSources") || {};
-    var cards = app.querySelectorAll("[data-secret-kind]");
-    for (var i = 0; i < cards.length; i++) {
-      var kind = cards[i].getAttribute("data-secret-kind");
-      var line = cards[i].querySelector(".sec-state");
-      if (!line) continue;
-      var src = sources[kind] || "";
-      line.className = src
-        ? "sec-state" + (src === "Secrets Manager" ? " is-managed" : "")
-        : "sec-state is-none";
-      line.textContent = src ? "現在: " + src + " から取得中" : "現在: 未設定";
-    }
-  }
 
   /**
    * 取得中フラグ。**完了しても寝かせたままにしない。**
@@ -2661,15 +3016,25 @@ const CLIENT_JS = `
     renderConnMap();
     renderDataSources();
     loadLiveFleet();
-    if (SITE.intake) {
-      app.appendChild(el("p", { class: "ops-intro", text: "Cortex にコンテキストを取り込む操作です。ファイルを選ぶかテキストを貼って送信すると、自動で取り込まれます（数分で反映）。" }));
-      app.appendChild(el("div", { class: "section-label", text: "取り込み" }));
-      var grid = el("div", { class: "ops-grid" });
-      grid.appendChild(opsCard("🗒️", "会議の文字起こしを追加", "顧客主催の会議など、自動取り込みできない会議の文字起こしファイル（.txt / .docx 等）から議事録を生成します。", "transcript", "文字起こしを追加"));
-      grid.appendChild(opsCard("📎", "共有資料を追加", "提案書・仕様書・議事メモなどの資料を Markdown 化して 共有資料 に取り込みます。", "material", "資料を追加"));
-      app.appendChild(grid);
-      renderSecrets();
+    // **取り込みカードと鍵カードは能力セクションへ移した**（#101）。
+    // ここで再度出すと二重になる。手動投入は 会議 / 共有資料 の中にある。
+  }
+
+  /**
+   * 手動投入のカード（文字起こし・資料）。**その能力の中に置く。**
+   * 「顧客主催の会議など、自動取り込みできない会議」に使うものなので、
+   * 会議の設定を見ている文脈で押せるのが自然。以前は画面下部の別セクションにあり、
+   * 会議の設定と往復する必要があった。
+   */
+  function intakeCardFor(cap) {
+    if (!SITE.intake) return null;
+    if (cap === "会議") {
+      return opsCard("🗒️", "会議の文字起こしを追加", "顧客主催の会議など、自動取り込みできない会議の文字起こしファイル（.txt / .docx 等）から議事録を生成します。ファイルを選ぶかテキストを貼って送信すると、数分で反映されます。", "transcript", "文字起こしを追加");
     }
+    if (cap === "共有資料") {
+      return opsCard("📎", "共有資料を追加", "提案書・仕様書・議事メモなどの資料を Markdown 化して 共有資料 に取り込みます。ファイルを選ぶかテキストを貼って送信すると、数分で反映されます。", "material", "資料を追加");
+    }
+    return null;
   }
 
   /** 鍵の入力欄に出す説明。kind は Lambda 側（resolveSecretTarget）と綴りを合わせること */
@@ -2714,18 +3079,10 @@ const CLIENT_JS = `
    * **入れた値は読み出せない。** 表示・確認の経路は作っていないので、間違えたら入れ直す。
    * 保存先は案件ごとに分かれており、他の案件には影響しない。
    * 反映は次回のワークフロー実行から（接続状況の表示が変わるのは翌朝の自己チェック後）。
+   *
+   * カードは #101 で能力モーダルの中へ移した（buildDataSources の pushCap 経由）。
+   * まとめて並べる renderSecrets() は呼び出し元が無くなったので消してある。
    */
-  function renderSecrets() {
-    var kinds = (SITE.secretKinds || []).filter(function (k) { return SECRET_FORMS[k]; });
-    if (!kinds.length) return;
-
-    app.appendChild(el("div", { class: "section-label", text: "連携の鍵" }));
-    app.appendChild(el("p", { class: "ops-intro", text: "各ツールを読むためのトークンです。入れた値はここには表示されません（保存だけできます）。保存先は案件ごとに分かれているので、他の案件には影響しません。" }));
-    var grid = el("div", { class: "ops-grid" });
-    kinds.forEach(function (k) { grid.appendChild(secretCard(k, SECRET_FORMS[k])); });
-    app.appendChild(grid);
-  }
-
   function secretCard(kind, meta) {
     // **いま何で動いているか**を先に出す。入れ直したのに反映されていない状態が
     // 画面で分かるようにする（接続状況は夜間バッチのスナップショットなので、
@@ -2794,6 +3151,11 @@ const CLIENT_JS = `
       el("p", { class: "sec-how", text: meta.how }),
       meta.selfServe ? el("p", { class: "sec-how", text: meta.selfServe.note }) : null,
       input,
+      // **扱いの説明はカードに持たせる。** 節の見出しの下に置いていたときは、
+      // #101 でカードだけがモーダルへ移り、説明だけが画面から消えた。
+      // 顧客にトークンの貼り付けを求める画面で、貼った値がどう扱われるかの
+      // 説明が落ちるのは、いちばん落としてはいけない種類の欠落
+      el("p", { class: "sec-note", text: "入れた値はここには表示されません（保存だけできます）。保存先は案件ごとに分かれているので、他の案件には影響しません。" }),
       el("div", { class: "ds-toggle" }, [btn, msg]),
     ]);
   }
@@ -2858,13 +3220,115 @@ const CLIENT_JS = `
       control,
     ]);
   }
+  /**
+   * モーダルの土台。**能力モーダルと投入モーダルで共有する。**
+   *
+   * **app の中に置く（body 直下にしない）。** isModalOpen() が
+   * app.querySelector(".modal-overlay") で見ているので、外に出すと
+   * 「開いている」と判定されず、ライブ差し替えが .datasources を作り直す。
+   * モーダルの中身は差し替え前の古いノードのまま取り残され、トグルを押しても
+   * 結果は切り離されたノードに書かれる——「押したのに何も起きない」に見える。
+   * position:fixed なので app 内でも前面に出る（#app に transform/filter/contain は無い）。
+   *
+   * @returns { overlay, modal, close }
+   */
+  var modalSeq = 0;
+  function makeModal(titleText, wide) {
+    // **二重オープンを防ぐ。** タイルを続けて押すとオーバーレイが重なり、
+    // 1枚閉じても下の1枚が残って操作を受け付けない状態になる。
+    // **前のものは close() で畳む。** DOM から外すだけだと keydown が
+    // document に残り続け、押すたびに1本ずつ増える
+    // **押し替えのときは差し替えを走らせない。** close() は「見送っていたライブ値を
+    // 取り込む」ために .datasources を作り直すが、いま押されたタイルは**古い節の
+    // ノード**で、掴んでいる一覧も古い。作り直すと、下のタイルは「2リポジトリ」・
+    // 上のモーダルは「1リポジトリ」という食い違いになる。
+    // 取り込みは**最後の1枚を閉じたとき**に行えば足りる
+    var existing = app.querySelector(".modal-overlay");
+    if (existing) {
+      if (existing.__close) existing.__close(true);
+      else if (existing.parentNode) existing.parentNode.removeChild(existing);
+    }
+
+    // 開く前にフォーカスがどこにあったかを覚え、閉じたら戻す。
+    // 戻さないと、キーボードだけで操作している人は一覧の先頭へ飛ばされる
+    var returnTo = document.activeElement;
+    var overlay = el("div", { class: "modal-overlay" });
+    var modal = el("div", { class: wide ? "modal modal-wide" : "modal", role: "dialog", "aria-modal": "true" });
+    // **dialog に名前を付ける。** 無いとスクリーンリーダは「ダイアログ」としか
+    // 読まず、どの能力を開いたのかが分からない。直下に見出しがあるのに
+    // 参照していなかった
+    if (titleText) {
+      modalSeq += 1;
+      var titleId = "modal-title-" + modalSeq;
+      // **見出し行に✕を置く。** 「閉じる」は末尾にしかなく、19リポジトリのモーダルでは
+      // マウスだけの人が全部スクロールしないと届かない（キーボードはフォーカスが
+      // 閉じるに載るので届く）
+      var x = el("button", { class: "modal-x", type: "button", "aria-label": "閉じる", text: "✕" });
+      x.addEventListener("click", function () { close(); });
+      modal.appendChild(el("div", { class: "modal-head" }, [
+        el("h2", { class: "modal-title", id: titleId, text: titleText }),
+        x,
+      ]));
+      modal.setAttribute("aria-labelledby", titleId);
+    } else {
+      modal.setAttribute("aria-label", "設定");
+    }
+    overlay.__close = close;
+
+    function close(skipRefresh) {
+      if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+      var behind = app.querySelector(".datasources");
+      if (behind) { behind.removeAttribute("inert"); behind.removeAttribute("aria-hidden"); }
+      document.removeEventListener("keydown", onKey);
+      if (returnTo && typeof returnTo.focus === "function" && returnTo.isConnected !== false) returnTo.focus();
+      // **閉じたら差し替えを試し直す。** 開いている間はライブ値の反映を見送るが、
+      // 見送ったままだと再取得の口が無く、タブを離れて戻るまで古い値のままになる。
+      if (skipRefresh !== true && typeof refreshDataSources === "function") refreshDataSources();
+    }
+    function onKey(e) { if (e.key === "Escape") close(); }
+    document.addEventListener("keydown", onKey);
+    overlay.addEventListener("click", function (e) { if (e.target === overlay) close(); });
+    return { overlay: overlay, modal: modal, close: close };
+  }
+
+  /**
+   * モーダルを app に載せて、中へフォーカスを移す。
+   *
+   * **「最初の focusable」に載せてはいけない。** 一覧の先頭に来るのは
+   * 「Gold昇格を止める」「読み取りを止める」「このファイルを外す」といった
+   * 設定を書き換えるボタンで、しかも**狭める向きは意図的に確認を出さない**
+   * （stateToggle の confirmOn は広げる向きだけ）。タイルを Enter で開いて
+   * もう一度 Enter を押しただけで、確認なしに設定ファイルが書き換わる。
+   * 移す先は閉じるボタン——押しても何も壊れないものにする。
+   */
+  function showModal(overlay, modal) {
+    // **下地を触れなくする。** 無いと Tab がモーダルの外へ抜け、読み上げも
+    // 背後の一覧を読み続ける（モーダルを開いた意味が無くなる）
+    var behind = app.querySelector(".datasources");
+    if (behind) { behind.setAttribute("inert", ""); behind.setAttribute("aria-hidden", "true"); }
+    app.appendChild(overlay);
+    var safe = modal.querySelector(".modal-actions button, .modal-cancel");
+    if (!safe) {
+      // 閉じるボタンが無い形のモーダル用。見出しに載せて読み上げの起点にする
+      modal.setAttribute("tabindex", "-1");
+      safe = modal;
+    }
+    if (typeof safe.focus === "function") safe.focus();
+  }
+  /** モーダルが開いているか（ライブ差し替えの見送り判定に使う） */
+  function isModalOpen() { return !!app.querySelector(".modal-overlay"); }
+
   function openIntakeModal(kind) {
     var intake = SITE.intake;
     if (!intake) return;
     var isT = kind === "transcript";
-    var overlay = el("div", { class: "modal-overlay" });
-    var modal = el("div", { class: "modal" });
-    modal.appendChild(el("h2", { class: "modal-title", text: isT ? "会議の文字起こしを追加" : "共有資料を追加" }));
+    // **土台は makeModal で作る。** 以前は独自に overlay を組んで body 直下へ
+    // 置いていたため、能力モーダルの上に2枚目が重なり、Escape が下の1枚だけを
+    // 閉じて上が残った。isModalOpen も app しか見ないので、開いている間の
+    // ライブ差し替えの見送りも効いていなかった
+    var mk = makeModal(isT ? "会議の文字起こしを追加" : "共有資料を追加", false);
+    var overlay = mk.overlay;
+    var modal = mk.modal;
     modal.appendChild(el("p", { class: "modal-desc", text: isT
       ? "文字起こしファイル（テキスト・Word・PDF・字幕 等）を選んで送信してください。（送信後、数分で議事録が自動生成されます）"
       : "資料ファイル（PDF・Word・PowerPoint・Excel・テキスト・画像 等）を選んで送信してください。（送信後、数分で内容が Markdown に変換されて取り込まれます）" }));
@@ -2892,7 +3356,7 @@ const CLIENT_JS = `
     modal.appendChild(status);
     modal.appendChild(el("div", { class: "modal-actions" }, [cancelBtn, submitBtn]));
     overlay.appendChild(modal);
-    document.body.appendChild(overlay);
+    showModal(overlay, modal);
 
     function showStatus(msg, isError) { status.className = "modal-status" + (isError ? " modal-status-error" : ""); status.textContent = msg; }
     function update() { submitBtn.disabled = !(nameInput.value.trim() && selectedFiles.length); }
@@ -2928,9 +3392,8 @@ const CLIENT_JS = `
     dropzone.addEventListener("drop", function (e) { e.preventDefault(); dropzone.classList.remove("dragover"); addFiles(e.dataTransfer.files); });
     nameInput.addEventListener("input", update);
 
-    function close() { if (overlay.parentNode) document.body.removeChild(overlay); }
-    cancelBtn.addEventListener("click", close);
-    overlay.addEventListener("click", function (e) { if (e.target === overlay) close(); });
+    // 閉じる経路（Escape・背景クリック）は makeModal 側に用意されている
+    cancelBtn.addEventListener("click", mk.close);
     submitBtn.addEventListener("click", function () { submitIntake(kind, selectedFiles, nameInput.value, status, submitBtn); });
   }
   async function submitIntake(kind, files, submitter, status, submitBtn) {

package/package.json

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