@takagaki/cortex-decisions-viewer 0.4.85 → 0.6.0

package/dist/render.js

@@ -1107,6 +1107,18 @@ a:hover { text-decoration: underline; }
   display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
 }
 .ds-card-main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
+/* 能力モーダルの中の「内部ソースのカード」だけ縦組みにする（2026-08-21）。
+   横並びのままだと、名前ブロックが左の細い列になり、その右に設定一式が積まれる
+   （オーナー指摘「なんで左側に共有資料、資料というふうに出てるんだ？」）。
+   **flex-wrap: nowrap を必ず含める。** .ds-card は flex-wrap: wrap で、
+   direction を column にしても wrap は残る。このカードは max-height: 90vh の
+   column flex（.modal）の縮みうる子なので、wrap したままだと自動最小サイズが
+   「最も高い子1つ分」まで落ち、縦に潰れて中身が複数列に折り返す＝指摘された
+   「左に列がある」状態を、もっと壊れた形で作り直すことになる。
+   **子結合子（>）で書く。** 子孫セレクタだと、中に入れ子にしたレコードの行の
+   .ds-card-main にも当たり（特異度で勝つ）、行の名前ブロックが伸びなくなる。 */
+.ds-card.ds-capbody { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
+.ds-card.ds-capbody > .ds-card-main { flex: 0 0 auto; }
 .ds-icon { font-size: 18px; line-height: 1; flex: 0 0 auto; }
 .ds-type { font-size: 12px; font-weight: 600; color: var(--muted); flex: 0 0 auto; }
 .ds-name { font-size: 14.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -1151,6 +1163,26 @@ a.ds-name:hover { text-decoration: underline; }
 .ds-group[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .ds-group > .ds-list { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--border); }
 .badge.ds-sum-ok { background: #e9f7ef; color: #1f7a45; }
+/* 「断定しない」——古い fleet-status では接続状態が分からない。OKとも警告とも言わない */
+.ds-sum-unknown { background: var(--bg); color: var(--muted); }
+/* 組織が分かっていない行のラベル。**警告色にする**（並びの中で見つかる必要がある） */
+.badge.ds-workspace-unknown { border-color: #f0b429; color: #8a5a00; background: #fff8e6; }
+/* 組織についての案内。行ではないので、行と見分けが付く形にする */
+.ds-orgnote {
+  border: 1px solid #f0b429; background: #fffdf5; border-radius: 12px;
+  padding: 12px 16px; display: flex; flex-direction: column; gap: 8px;
+}
+.ds-orgnote-title { font-weight: 700; font-size: 13.5px; color: #8a5a00; }
+/* 案内が指す行。**囲うことで「どのチャンネルの話か」を示す**（開閉はしない） */
+.ds-orgnote-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
+/* 手順のリスト。番号を出し、1手ずつ離す（一続きの文章にしない） */
+.sec-steps { margin: 0; padding-left: 1.35em; display: flex; flex-direction: column; gap: 8px; }
+.sec-steps li { line-height: 1.75; }
+.sec-steps li > span { display: block; }
+.ds-group-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
+/* 組のまとまりを、行より弱い線で示す */
+.ds-group-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
+.ds-group-note strong { color: var(--text); }
 .badge.ds-sum-warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
 /* ---- 接続マップ（操作タブ最上部のSVG図） ---- */
 .conn-map { overflow-x: auto; margin: 4px 0 20px; }
@@ -1251,7 +1283,7 @@ a.ds-name:hover { text-decoration: underline; }
      min-width: 0         … flex の子が min-content より縮めるようにする（無いと折り返しても溢れる） */
 .ds-tile-name, .ds-tile-desc, .ds-tile-sub, .ds-tile-note,
 .ds-check-label, .ds-check-action, .ds-check-detail,
-.ds-pipe-label, .ds-pipe-todo, .ds-owner-state,
+.ds-pipe-label, .ds-pipe-todo,
 .ds-empty, .sec-how, .modal-desc, .ds-toggle-msg,
 .ds-drive-note, .ds-inactive-note, .ds-legacy-chip, .ds-keys-code, .ds-gate-help {
   min-width: 0; white-space: normal; overflow-wrap: anywhere;
@@ -1262,8 +1294,10 @@ a.ds-name:hover { text-decoration: underline; }
 .ds-toggle-btn:disabled { opacity: .6; cursor: default; }
 .ds-toggle-btn.ds-danger { color: #b42318; border-color: #f3c6c1; }
 .ds-toggle-btn.ds-danger:hover:not(:disabled) { border-color: #b42318; color: #b42318; background: #fff5f4; }
-.ds-subitems { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
-.ds-subitem { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: #fff; }
+/* .ds-subitems / .ds-subitem は撤去した（2026-08-21）。共有資料のフォルダと Figma の
+   ファイルの行は、Slack / GitHub と同じ .ds-list > .ds-card になったので、
+   行間（gap）も .ds-list に揃う。**.ds-removed の規則は .ds-subitem に依存していない**
+   ので、そのまま両方の行に効く。 */
 /* 削除できたことを行に残す。一覧そのものは翌朝まで更新されないので、消えたように見せない */
 .ds-removed .ds-name { text-decoration: line-through; color: var(--muted); }
 .ds-toggle-msg { font-size: 12px; color: var(--muted); }
@@ -1298,7 +1332,13 @@ a.ds-name:hover { text-decoration: underline; }
    夜間のスナップショットの状態バッジと**同時に2つの判定を並べない**ため、押したあとは
    状態バッジをこの中の判定へ置き換える（同じ画面で「⚠️」と「接続OK」が並ぶのが、
    この節で3回直してきた壊れ方そのもの） */
-.ds-probe { flex: 1 1 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
+/* 押した結果の詳細。**押されるまでは何も出さない。**
+   以前は中身が空でも点線だけが全行に出ており、何も意味していなかった（2026-08-20） */
+.ds-probe { display: none; }
+.ds-probe.is-shown {
+  display: block; flex: 1 1 100%;
+  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
+}
 .ds-probe-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 /* いつ測った結果かを必ず添える。夜間のスナップショットと混ざると、どちらの話か読めない */
 .ds-probe-at { font-size: 11.5px; color: var(--muted); }
@@ -1311,13 +1351,10 @@ a.ds-name:hover { text-decoration: underline; }
    とは別物で、同じ色にすると「押して繋ぎましょう」と読まれる */
 .ds-gate-off { color: #9ca3af; }
 .ds-pipes { display: flex; flex-direction: column; gap: 8px; }
-/* 組織ごとの接続状況。トークンは組織ごとにしか効かないので、ここが判断の単位になる */
-.ds-owners { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
-.ds-owner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px;
-  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
-.ds-owner-name { font-weight: 700; font-size: 13px; }
-.ds-owner-state { font-size: 12.5px; }
-.ds-owner-install { font-size: 12.5px; margin-left: auto; white-space: nowrap; }
+/* GitHub App のインストールへのリンク。**独立した「組織ごとの接続状況」の節は
+   2026-08-20 に廃止した**（行のラベル＋必要な行だけ囲う形へ）が、
+   このクラスだけは案内と手順の両方で使い続けている */
+.ds-owner-install { font-size: 12.5px; white-space: nowrap; }
 /* 実行状況の行に直し方を添える。同じ run の未達を別の節にも出すと画面に2回並ぶ */
 .ds-pipe-wrap { display: flex; flex-direction: column; gap: 3px; }
 .ds-pipe-todo { font-size: 12.5px; color: var(--muted); line-height: 1.7; padding-left: 4px; }
@@ -1342,17 +1379,10 @@ a.ds-name:hover { text-decoration: underline; }
 /* 「この接続は何のためのものでないか」（2026-08-18）。**説明文より強く出す**——
    ここを読み飛ばした人が、社内チャンネルのためにボタンを押し、必ず失敗する */
 .ds-scope-note { color: var(--text); }
-/* いまの接続先（設定を変える口の直前に置く。値は本文色で、ラベルだけ弱める） */
-.ds-current { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 12.5px; }
-.ds-current-label { color: var(--muted); flex: 0 0 auto; }
-.ds-current-value { color: var(--text); font-weight: 600; word-break: break-all; }
-.ds-current-value.is-unset { color: var(--muted); font-weight: 400; }
-/* 接続先の一覧（#127）。**1件のときは従来どおりラベルの右に1行**——単数の案件で
-   見た目が変わると、複数対応と関係のない全案件に「何か変わった」と読ませる */
-.ds-target-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
-.ds-target-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
-/* 行の中のボタンは行に揃える（.ds-toggle の縦マージンは節と節の間隔なので効かせない） */
-.ds-target-row .ds-toggle-btn { flex: 0 0 auto; }
+/* .ds-current / .ds-current-label / .ds-current-value / .ds-target-list /
+   .ds-target-row は撤去した（2026-08-21）。Backlog の接続先の行は、Slack / GitHub /
+   Figma / Drive と同じ .ds-list > .ds-card になったので、行間も見た目も .ds-list と
+   .ds-card に揃う（それまでは同じモーダルの中でここだけ独自レイアウトだった）。 */
 /* 入力欄のすぐ下。貼る直前に読める位置に置く */
 .sec-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
 .sec-how p { margin: 0; }
@@ -1386,6 +1416,17 @@ a.ds-name:hover { text-decoration: underline; }
 /* まだ受信していない接続先（複数接続のとき混在する）。稼働中の行と見分けが付く濃さに落とす */
 .rt-live-line.is-waiting { color: var(--muted); font-weight: 500; }
 /* 手順は畳んで残す（張り替え・再確認用）。開いたときだけ間隔を空ける */
+/* 鍵カードの発行手順。**畳んであるだけで、中身は消していない**（2026-08-21）。
+   **マージンは持たせない**——.ops-card は column flex の gap: 10px なので、
+   自前のマージンを足すとここだけ間隔が広くなる（短く見せたいカードで逆効果）。
+   閉じているときに最後の段落の下マージンが残らないよう、中の余白も畳む */
+.sec-fold { border: none; margin: 0; }
+.sec-fold > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
+.sec-fold[open] > summary { margin-bottom: 8px; }
+.sec-fold > .sec-how:last-child { margin-bottom: 0; }
+/* 鍵の入力欄も同じ理由でマージンを持たせない（.ds-addform の中は従来どおり6px）。
+   子結合子で書くのは、リアルタイム同期カードの .rt-url（.rt-url-row の中）に当てないため */
+.ops-card > .sec-input { margin-bottom: 0; }
 .rt-steps-fold > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
 .rt-steps-fold[open] > summary { margin-bottom: 10px; }
 .rt-steps-fold[open] > *:not(summary) { margin-top: 10px; }
@@ -1591,8 +1632,12 @@ ${capabilityState.toString()}
   var countEl = { textContent: "" }; // 件数表示は廃止（ヘッダーから削除済み）
   var footerEl = document.getElementById("footer-meta");
 
+  // **画面の版も出す（2026-08-20）。** 新しい画面は案件ごとに順次切り替わるので、
+  // **案件によって版が違う**。出していないと「直したはずなのに直っていない」の正体が
+  // 「その案件だけ古い版」であることを切り分けられない
   footerEl.textContent = "生成: " + SITE.generatedAt +
-    (SITE.repoBaseUrl ? "  /  " + SITE.repoBaseUrl.split("://").pop() + " (" + SITE.branch + ")" : "");
+    (SITE.repoBaseUrl ? "  /  " + SITE.repoBaseUrl.split("://").pop() + " (" + SITE.branch + ")" : "") +
+    (SITE.viewerVersion ? "  /  画面 v" + SITE.viewerVersion : "");
 
   /**
    * 「貼り付けて使う文字列」を、選べる形＋コピーボタンで出す。
@@ -1602,6 +1647,19 @@ ${capabilityState.toString()}
    * clipboard API が使えない環境（http・古いブラウザ・権限拒否）では、**選択までしてやって**
    * 次の一手を伝える（何も起きないのが一番悪い）。
    */
+  /**
+   * 共有資料の取り込みに使う Google アカウント（2026-08-20）。
+   *
+   * **画面に出す。** それまでは「取り込み用アカウント」としか書いておらず、
+   * **誰を招待すればいいのかが画面から分からなかった**——担当者に聞かないと
+   * 手順が完了できなかった。
+   *
+   * **艦隊で1つ。** 案件ごとに違うものではないので定数で足りる
+   * （案件ごとになったら fleet-status から運ぶ器に変える）。
+   * 議事録の取り込みでも同じアカウントを使っている。
+   */
+  var DRIVE_INGEST_ACCOUNT = "cortex-notetaker@classmethod.jp";
+
   function copyRow(text) {
     // **input と button を使わない。** 追加フォームの中に置くので、input を足すと
     // 「先頭がURL欄・末尾が名前欄」、button を足すと「最初のボタンが送信」という
@@ -2047,6 +2105,10 @@ ${capabilityState.toString()}
     // **状態の語で「招待」と言わない**——言うと、何度招待しても直らないものを繰り返させる
     "missing_scope": { text: "権限が足りません", cls: "ds-gate-warn" },
     "unreachable": { text: "アクセス不可", cls: "ds-gate-warn" },
+    // **この素の語が出るのは、まだ対応していない種別のときだけ。**
+    // slack / github は下の DS_GATE_NO_TOKEN で経路ごとに言い換える（dsGateOf を通す）。
+    // 残してあるのは「知らない種別のソースを黙って消さない」ため——新しいアダプタが
+    // 増えた日に、行が状態を持たずに並ぶより、素の語でも出ているほうがよい
     "no_token": { text: "トークン未設定", cls: "ds-gate-muted" },
     "unknown": { text: "不明", cls: "ds-gate-muted" },
   };
@@ -2056,7 +2118,7 @@ ${capabilityState.toString()}
    * Slack のチャンネルは、どのワークスペースにあるかで読み取りの鍵が別物になる:
    *   - workspace 省略 … クラスメソッドの社内ワークスペース。中央 Bot の鍵（案件リポジトリの
    *     設定）で読む。**画面から設定できるものが1つも無い。**
-   *   - workspace: "T…" … お客様のワークスペース。下の「お客様の Slack ワークスペースを接続」で
+   *   - workspace: "T…" … お客様のワークスペース。「Slack ワークスペースに接続する」で
    *     承認を貰って読む。**画面から自己解決できる。**
    *
    * どちらも no_token に潰して「トークン未設定」と出していたため、社内チャンネルを
@@ -2073,13 +2135,38 @@ ${capabilityState.toString()}
     internal: {
       text: "管理者の設定が必要です",
       cls: "ds-gate-muted",
-      help: "このチャンネルはクラスメソッドの社内ワークスペースにあります。読み取りを始めるには cortex 側（管理者）の設定が必要で、下の「お客様の Slack ワークスペースを接続」では設定できません。cortex の担当者にご連絡ください。",
+      // **「この画面では設定できません」を必ず言う（2026-08-18 の不具合）。**
+      // 状態だけを出していたので、設定する場所を探した人が
+      // 顧客ワークスペースの接続へ吸い込まれ、押しても必ず失敗する画面を
+      // 何度も試した。**次に誰が何をするか**まで書く
+      help: "このチャンネルはクラスメソッドの社内ワークスペースにあります。読み取りを始めるには cortex 側（管理者）の設定が必要で、この画面では設定できません。cortex の担当者にご連絡ください。",
     },
     // お客様のワークスペース。従来どおり接続へ誘導する（自己解決できる唯一の経路）
     customer: {
       text: "トークン未設定",
       cls: "ds-gate-muted",
-      help: "このチャンネルがあるお客様の Slack ワークスペースが、まだ接続されていない（または接続が切れている）状態です。下の「お客様の Slack ワークスペースを接続」から接続してください。",
+      help: "このチャンネルがあるお客様の Slack ワークスペースが、まだ接続されていない（または接続が切れている）状態です。「Slack ワークスペースに接続する」から接続してください。",
+    },
+    /* -------------------------------------------------------------------------
+     * GitHub。**「トークン未設定」と言ってはいけない**（2026-08-21）
+     * -------------------------------------------------------------------------
+     * 読み取り用の個人アクセストークンは廃止し、GitHub App のインストールトークンに
+     * 一本化した。**画面のどこにも、そのトークンを入れる欄はもう無い。**
+     * それでも「トークン未設定」と出すと、上の DS_GATE_NO_TOKEN の項が書いている
+     * 2026-08-18 の不具合と同じ形になる——しかも**探した先が存在しない**ぶん悪い。
+     *
+     * engine 側は、画面がこう言う前提で値を返している（scripts/fleet-status.mjs の
+     * probeGithubGate）: App のトークンを持たずに読もうとして 404/403 で落ちたなら、
+     * 原因はスコープではなく**この組織に App が入っていない**。
+     * **同じモーダルの中で、組織の案内が「App を入れてください」と言っているのに
+     * 行と能力タイルが「トークン未設定」と言う**状態を作らないこと。
+     *
+     * **help は付けない。** 次の一手（インストール導線）は組織ごとの案内
+     * （githubNotConnectedNodes）が1つだけ持つ。行ごとに繰り返すと一覧が案内で埋まる。
+     * ----------------------------------------------------------------------- */
+    github: {
+      text: "App が未インストール",
+      cls: "ds-gate-muted",
     },
   };
   /**
@@ -2108,10 +2195,26 @@ ${capabilityState.toString()}
     if (!s || s.indexOf("（名前未取得") === 0) return s;
     return "#" + s.replace(/^#+/, "");
   }
-  /** 行に出す接続状態。no_token だけは経路（社内/顧客）で文面が分かれる */
+  /**
+   * 行に出す接続状態。**no_token だけは経路で文面が分かれる。**
+   *
+   * | 種別 | no_token の意味 | 語 |
+   * |---|---|---|
+   * | slack（社内） | 中央 Bot の鍵が無い。**画面から設定できない** | 管理者の設定が必要です |
+   * | slack（顧客） | お客様のワークスペースが未接続。接続で直せる | トークン未設定 |
+   * | github | 読む鍵が1本も無かった＝**この組織に App が入っていない** | App が未インストール |
+   *
+   * **ここを通さずに語を書き写さないこと。** 行バッジ・能力タイルの要約・
+   * 「接続を確認」の結果が同じ関数を通るので、片方だけ古くなることが構造的に起きない
+   * （attentionSummary / probeVerdict の項に、実際に割れた経緯がある）。
+   */
   function dsGateOf(s) {
-    if (s.gate === "no_token" && s.type === "slack") {
-      return isInternalSlack(s) ? DS_GATE_NO_TOKEN.internal : DS_GATE_NO_TOKEN.customer;
+    if (s.gate === "no_token") {
+      if (s.type === "slack") {
+        return isInternalSlack(s) ? DS_GATE_NO_TOKEN.internal : DS_GATE_NO_TOKEN.customer;
+      }
+      // github-issues / github-discussions のどちらも同じ原因（組織単位の App）
+      if (String(s.type || "").indexOf("github") === 0) return DS_GATE_NO_TOKEN.github;
     }
     return DS_GATE[s.gate] || DS_GATE["unknown"];
   }
@@ -2123,6 +2226,14 @@ ${capabilityState.toString()}
    * 場所が画面に無いので、探した人が顧客ワークスペースの接続へ吸い込まれる（DS_GATE_NO_TOKEN
    * の項の事故がここから始まっている）。1件でも顧客側が混ざるときは従来の文面のまま——
    * そちらは接続で直せるので、経路を名指しできない要約に倒す方が正しい。
+   *
+   * **GitHub も同じ理由で「トークン」と言わない（2026-08-21）。** 読み取り用の個人
+   * アクセストークンは廃止済みで、**入力欄が画面のどこにも無い**。ここが古い語のまま
+   * 残っていたので、同じモーダルの中で組織の案内は「App を入れてください」・
+   * その直下の行と能力タイルは「トークン未設定」という食い違いが出ていた。
+   *
+   * **語は dsGateOf から引く（写経しない）。** 行バッジと同じ関数を通すので、
+   * 片方だけ古くなることが構造的に起きない。
    */
   function attentionSummary(items) {
     var bad = items.filter(function (s) { return sourceNeedsAttention(s); });
@@ -2130,9 +2241,532 @@ ${capabilityState.toString()}
     var head = "⚠️ " + bad.length + "件";
     var noToken = bad.filter(function (s) { return s.gate === "no_token"; });
     if (noToken.length !== bad.length) return head + "に問題";
-    var allInternal = noToken.every(function (s) { return isInternalSlack(s); });
-    return head + "が読めていません（" + (allInternal ? "管理者の設定が必要です" : "トークン未設定") + "）";
+    // 原因を名指しできるのは、行バッジの語が**1つに揃っている**ときだけ
+    var texts = {};
+    noToken.forEach(function (s) { texts[dsGateOf(s).text] = true; });
+    var names = [];
+    for (var t in texts) if (Object.prototype.hasOwnProperty.call(texts, t)) names.push(t);
+    if (names.length === 1) return head + "が読めていません（" + names[0] + "）";
+    // 語が割れた。**Slack の中だけで割れているなら従来どおり顧客側の語に倒す**——
+    // そちらは接続で直せるので、「管理者の設定が必要です」と言い切ると直せる人を止める。
+    // 種別をまたいで割れているとき（Slack と GitHub が同時に読めていない等）は、
+    // 次にする人も操作も違うので1つの原因として書けない。件数だけにする
+    var allSlack = noToken.every(function (s) { return s.type === "slack"; });
+    if (allSlack) return head + "が読めていません（" + DS_GATE_NO_TOKEN.customer.text + "）";
+    return head + "に問題";
+  }
+  /**
+   * Slack のチャンネルを、所属する組織ごとに分ける（2026-08-20）。
+   *
+   * ## なぜ純関数にするか
+   *
+   * ここが**判断の全部**。描画に混ぜると「どう分けたか」を実測できなくなる。
+   * 並べる側は受け取ったものを出すだけで、意味を持たない
+   * （GitHub は組織・Backlog はスペースで同じ形が要るため）。
+   *
+   * ## 分け方
+   *
+   * 1. workspace（team_id）があれば、その組織。表示名は台帳から引く
+   * 2. orgUnknown の印が付いていれば「組織が分かりません」
+   * 3. どちらも無ければ社内（クラスメソッド）
+   *
+   * **印を先に見ない。** 判定が済んで workspace が入った行にも、
+   * 古いデータでは印が残っているかもしれない——**決まっている方を信じる**。
+   *
+   * ## 「分かりません」に入れる条件（ここが誤りやすい）
+   *
+   * **印が唯一の目印。** 夜間の実測（gate: "unreachable"）で判断してはいけない——
+   * unreachable はアーカイブ・削除・URLの打ち間違いでも起きるので、
+   * それを「組織が分かりません」と出すと**誤った案内**になる。
+   * 印はサーバが「全部の鍵で届かなかった」と実測した記録なので、意味が違う。
+   *
+   * @param items チャンネルの行（fleet-status の externalSources のうち type === "slack"）
+   * @param workspaces 台帳（slackWorkspaces() の返り値。null なら「知らない」）
+   * @returns [{ key, title, items, unknown }]  key は並びの安定のためだけに使う
+   */
+  function groupSlackByOrg(items, workspaces) {
+    var known = {};
+    (workspaces || []).forEach(function (w) { if (w && w.teamId) known[w.teamId] = w.name || w.teamId; });
+    var order = [];
+    var byKey = {};
+    (items || []).forEach(function (s) {
+      var key, title, unknown = false;
+      if (s.workspace) {
+        key = s.workspace;
+        // **台帳に無ければ team_id を出す。** 空欄より、少なくとも突き合わせられる
+        title = known[s.workspace] || s.workspace;
+      } else if (s.orgUnknown === true) {
+        key = "__unknown__";
+        title = "組織不明";
+        unknown = true;
+      } else {
+        key = "__internal__";
+        title = "クラスメソッド";
+      }
+      var g = byKey[key];
+      if (!g) { g = { key: key, title: title, items: [], unknown: unknown }; byKey[key] = g; order.push(g); }
+      g.items.push(s);
+    });
+    // **社内を先、「分かりません」を最後にする。** 分かりませんが先頭に来ると、
+    // 直すものが無い人にも毎回それが最初に見える
+    order.sort(function (a, b) {
+      var rank = function (g) { return g.key === "__internal__" ? 0 : g.unknown ? 2 : 1; };
+      return rank(a) - rank(b);
+    });
+    return order;
+  }
+
+  /**
+   * 会議の取り込みの案内。**操作ではなく条件を示す。**
+   *
+   * 取り込まれるには2つとも要る:
+   *   ① cortex-notetaker Bot が会議に招待されている（＝取り込む意思。これが同意のゲート）
+   *   ② 会議名が照合キーのどれかを含む（含まなければ、録れても案件に振り分けられない）
+   *
+   * ②の材料を画面が出さないと、招待したのに届かない理由が分からない。
+   */
+  function meetingHowTo() {
+    // **2つの条件がANDであることを、読み飛ばせない形で出す。** 散文で並べていたときに
+    // 「会議名は合っているのにBotを招待しておらず取り込まれなかった」事故が実際に起きた。
+    // 会議名の条件は上の行（ds-keys）が出すので、ここでは「上の語」と参照するに留める。
+    var wrap = el("div", { class: "sec-how" });
+    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: "会議名に上の目印が入っている" }));
+    wrap.appendChild(ul);
+    wrap.appendChild(el("p", { text: "どちらか一方だけでは取り込まれません。" }));
+    return wrap;
+  }
+
+  /**
+   * Slack の承認画面へ進むボタン（2026-08-20 に接続カードから切り出した）。
+   *
+   * ## 押す人についての注意を必ず添える
+   *
+   * **承認画面はワークスペースを指定できない**（開始の口に team を渡す口が無い）。
+   * **承認する人がログインしているワークスペース**にボットが入る。だから
+   * 「〈お客様の名前〉と接続する」とは書けない——保証できないことを書かない。
+   *
+   * お客様の Slack なら、クラスメソッドの人間は押せないことが多い
+   * （その Slack の管理者にお願いすることになる）。それを書かないと、
+   * 押しても進まない人が「壊れている」と読む。
+   */
+  function slackConnectButton() {
+    var wrap = el("div", { class: "ds-toggle" });
+    // **「この」を付けない（2026-08-20・オーナー指摘）。**
+    // どのワークスペースを指すのか読み取れない——そもそも**指定できない**
+    // （承認する人がログインしているワークスペースに入る）ので、
+    // 特定のものを指すような書き方は嘘にもなる
+    var btn = el("button", { class: "ds-toggle-btn", type: "button", text: "Slack ワークスペースに接続する" });
+    var msg = el("div", { class: "ds-toggle-msg" });
+    btn.addEventListener("click", async function () {
+      var intake = SITE.intake;
+      if (!intake) return;
+      btn.disabled = true;
+      msg.className = "ds-toggle-msg";
+      msg.textContent = "承認画面を準備しています…";
+      try {
+        var pfx = intake.url + (intake.url.indexOf("?") === -1 ? "?" : "&");
+        var res = await fetch(pfx + "op=slack-oauth-start&t=" + encodeURIComponent(intake.token), {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: "{}",
+        });
+        var j = await res.json().catch(function () { return {}; });
+        if (!res.ok || !j.url) {
+          // サーバの文言をそのまま出す（未設定のときは「準備中です」が返る）
+          msg.className = "ds-toggle-msg is-error";
+          msg.textContent = "✗ " + (j.message || "接続を開始できませんでした。");
+          btn.disabled = false;
+          return;
+        }
+        // **同じタブで遷移する。** 別タブだと、承認後の「接続しました」を見た人が
+        // 元のタブに戻る動線を自分で見つけることになる
+        location.href = j.url;
+      } catch (e) {
+        msg.className = "ds-toggle-msg is-error";
+        msg.textContent = "✗ 接続を開始できませんでした。時間をおいて試してください。";
+        btn.disabled = false;
+      }
+    });
+    wrap.appendChild(el("p", {
+      class: "ds-group-note",
+      text: "ボタンを押すと Slack の承認画面が開きます。承認できるのは、その Slack の管理者だけです"
+        + "（お客様の Slack なら、お客様の管理者にお願いしてください）。"
+        + "お願いする権限は読み取りだけで、Cortex から投稿することはありません。",
+    }));
+    wrap.appendChild(btn);
+    wrap.appendChild(msg);
+    return wrap;
+  }
+
+  /** 台帳から、そのワークスペースの接続状態を引く（無ければ null＝断定しない） */
+  function tokenStateOf(workspaces, teamId) {
+    var list = workspaces || [];
+    for (var i = 0; i < list.length; i++) {
+      if (list[i] && list[i].teamId === teamId) return list[i].tokenState || null;
+    }
+    return null;
+  }
+
+  /**
+   * 「組織が分かりません」の行を、サーバに判定し直してもらう（2026-08-20）。
+   *
+   * **1回の表示につき1度だけ。** 組が複数あっても、呼ぶのは1回。
+   *
+   * ## 結果をその場で反映しない理由
+   *
+   * この画面が読んでいるのは**夜間に作られた実測ファイル**で、
+   * 設定ファイルを直しても表示はすぐ変わらない。**嘘をつくよりは待たせる**——
+   * 「反映しました」とだけ言い、表示が変わる時期を書く。
+   * （設定を変える他の操作も同じ約束で「次回の Gold 昇格から反映されます」と言っている）
+   */
+  var orgResolveDone = false;
+  function requestOrgResolve() {
+    if (orgResolveDone) return;
+    orgResolveDone = true;
+    var intake = SITE.intake;
+    if (!intake) return;
+    var pfx = intake.url + (intake.url.indexOf("?") === -1 ? "?" : "&");
+    // **描画の途中で投げない。** ここは行を組み立てている最中に呼ばれるので、
+    // 例外が出ると**画面そのものが描かれない**（fetch が無い環境で実際にそうなった）。
+    // 判定し直しは「できたら直る」性質のもので、失敗しても行は
+    // 「組織が分かりません」のまま残る——画面を落としてまでやることではない。
+    //
+    // **守りは二重（この行と下の try/catch）。** 片方だけ消しても
+    // もう片方が受けるので変異検証では赤にならないが、**両方消すと6件赤**になる
+    // （実際に当てて確かめた）。二重なのは、投げ方が2通りあるため——
+    // fetch が存在しない（ReferenceError）と、呼び出しが投げる
+    if (typeof fetch !== "function") return;
+    try {
+    fetch(pfx + "op=slack-resolve&t=" + encodeURIComponent(intake.token), {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: "{}",
+    })
+      .then(function (res) { return res.ok ? res.json() : null; })
+      .then(function (j) {
+        if (!j || !j.resolved) return;
+        // **表示は次の更新まで変わらない。** それを書かないと、
+        // 「反映したのに何も変わらない」と読まれてもう一度押すことになる
+        var note = document.querySelector(".ds-org-resolved");
+        if (!note) return;
+        note.textContent = "✓ " + j.resolved + "件の所属を反映しました（この一覧の表示は次回の更新・毎晩22時ごろから正しくなります）。";
+      })
+      .catch(function () {
+        // **黙って諦める。** 直せなかっただけで、行は「組織が分かりません」のまま残る。
+        // 利用者にできることは変わらないので、失敗を出しても迷わせるだけ
+      });
+    } catch (e) {
+      // 同上。呼び出しそのものが投げても画面は描く
+    }
+  }
+
+  /**
+   * GitHub のリポジトリを、組織ごとに分ける（2026-08-20・Slack からの横展開）。
+   *
+   * ## Slack との違い
+   *
+   * **帰属を API に聞く必要が無い。** 組織は ref（owner/repo）に入っている。
+   * だから判定は文字列を切るだけで、実測も印も要らない。
+   *
+   * ## 接続状態は台帳（githubOwners）から引く
+   *
+   * トークンは**組織ごとにしか効かない**（Fine-grained PAT も App の
+   * インストールトークンも1組織分）ので、状態の単位も組織。
+   *
+   * @returns [{ key, title, items, state }] state は "ok" | "warn" | "unsure" | null
+   */
+  /** 台帳から、その組織の情報を引く（無ければ null＝断定しない） */
+  function githubOwnerMeta(owner) {
+    var list = fleetVal("githubOwners") || [];
+    for (var i = 0; i < list.length; i++) {
+      if (list[i] && list[i].owner === owner) return list[i];
+    }
+    return null;
+  }
+
+  function groupGithubByOwner(items, owners) {
+    var known = {};
+    (owners || []).forEach(function (o) { if (o && o.owner) known[o.owner] = o; });
+    var order = [];
+    var byKey = {};
+    (items || []).forEach(function (s) {
+      var owner = String(s.ref || "").split("/")[0] || "";
+      var g = byKey[owner];
+      if (!g) {
+        var o = known[owner];
+        // **台帳に無ければ断定しない。** 夜間バッチの成果物なので、
+        // 立ち上げ直後の案件には無い（「0件」と「知らない」を同じ扱いにすると嘘になる）
+        var state = null;
+        // **「warn」 は else 側の総取り。** ここに載っていない値は全部「未接続」に落ちるので、
+        // engine が 「source」 に新しい値を足したら**必ずここも足す**——載せ忘れると、
+        // 読めている組織が顧客の画面で一斉に「まだ接続されていません」になる。
+        //
+        // 「workflow」 は「App は無いが、ワークフロー自身のトークンで全部読めた」＝**接続OK**。
+        // 「token」（廃止した個人アクセストークンで読めていた）も**当面 OK のまま受ける**——
+        // 画面（Amplify で即配布）と engine（案件スタブが 「@v1」 を指しており、タグを
+        // 進めるまで古い 「fleet-status.json」 のまま）は**別々に配られる**ので、
+        // どちらを先に出しても片側だけ新しい期間ができる。その間に 「token」 を落とすと、
+        // コミット済みの値を読んだ画面が偽の警告を出す。**外すのはフェーズ2**（engine の
+        // v1 が全案件へ行き渡ったことを確かめてから）。
+        if (o) {
+          state = (o.source === "app" || o.source === "workflow" || o.source === "token") ? "ok"
+            : o.source === "unknown" ? "unsure"
+              : "warn";
+        }
+        g = { key: owner, title: owner || "（組織不明）", items: [], state: state, meta: o || null };
+        byKey[owner] = g;
+        order.push(g);
+      }
+      g.items.push(s);
+    });
+    // **繋がっている組織を先に、繋がっていない組織を後に。**
+    // 直すものが無い人にも「未接続」が最初に見えるのは、優先順位が逆
+    order.sort(function (a, b) {
+      var rank = function (g) { return g.state === "warn" ? 2 : g.state === "unsure" ? 1 : 0; };
+      return rank(a) - rank(b);
+    });
+    return order;
+  }
+
+  /**
+   * GitHub のリポジトリを**平らに**並べる（2026-08-20）。
+   *
+   * Slack と同じ形。並び順は組織ごとだが**箱で囲まない**。
+   * どの組織かは**行のラベル**が示し、**接続が要る組だけ**案内が行を抱える。
+   */
+  function githubRows(items) {
+    var owners = fleetVal("githubOwners");
+    var out = [];
+    groupGithubByOwner(items, owners).forEach(function (g) {
+      // **行ごとに meta を引く。** issues と discussions でアイコンとラベルが違う
+      var cards = g.items.map(function (x) {
+        return extSourceCard(x, DS_TYPE[x.type] || { icon: "🔗", label: x.type || "その他" });
+      });
+      if (g.state === "warn") {
+        out.push(orgNoteBox(githubNotConnectedNodes(g), cards));
+        return;
+      }
+      if (g.state === "unsure") {
+        // **確かめられなかった夜は、そう言う。** gh の不在・タイムアウト・
+        // ネットワーク断で起きる。「接続OK」と出すと同じ画面の集計と食い違い、
+        // 「未接続」と出すと繋がっている組織に偽の警告を出す——どちらも嘘。
+        // **導線は出さない**（すでに入っているかもしれないので、押させる理由が無い）
+        out.push(orgNoteBox(githubUnsureNodes(g), cards));
+        return;
+      }
+      cards.forEach(function (n) { out.push(n); });
+    });
+    return out;
+  }
+
+  /** 確かめられなかった組織の案内。**導線は出さない** */
+  function githubUnsureNodes(g) {
+    var o = g.meta || {};
+    return [
+      el("div", { class: "ds-orgnote-title", text: "⚠️ " + g.title + " の接続を確認できませんでした" }),
+      el("p", {
+        class: "ds-group-note",
+        // **件数を出す。** 4リポのうち3つは確かめられている夜に
+        // 「4リポジトリを確かめられていません」と読めるのは実態と違う
+        text: (o.repos || g.items.length) + "リポジトリ中 "
+          + (o.unchecked != null ? o.unchecked : (o.repos || g.items.length))
+          + "件の接続を確かめられていません。翌朝の表示をご確認ください。",
+      }),
+    ];
+  }
+
+  /**
+   * 繋がっていない組織の案内。
+   *
+   * **「読めない」の原因は1つではない。** 以前はどの組織にも
+   * 「この組織に Cortex の GitHub App を入れると読めるようになります」と出していたが、
+   * **App は入っているのにそのリポジトリが選ばれていない**組織にはこれが効かない。
+   * インストールは済んでいるので、押しても画面は変わらず、何度押しても直らない。
+   *
+   * 「appInstalled」 が原因を分ける（engine がインストールトークンを取れたかどうか）:
+   *
+   * | 値 | 意味 | 案内 |
+   * |---|---|---|
+   * | 「false」 | App のトークンが取れなかった＝未インストール | インストールへ |
+   * | 「true」  | 取れたのに読めない＝そのリポジトリが未選択 | **インストール設定**へ |
+   * | 「null」  | その夜は確かめられなかった | **どちらも出さない**（押しても直るとは限らない） |
+   *
+   * **自社か顧客かで文言を分けない。** 組織名（「classmethod-*」）で分岐すると、
+   * 新しい自社組織が増えたときに黙って間違った案内を出す。どちらにも通じる文にする。
+   */
+  function githubNotConnectedNodes(g) {
+    var out = [];
+    var o = g.meta || {};
+    var repos = o.repos || g.items.length;
+    var unread = o.unreadable != null ? o.unreadable : g.items.length;
+    var installed = o.appInstalled;
+    out.push(el("div", { class: "ds-orgnote-title", text: "⚠️ " + g.title + " はまだ接続されていません" }));
+    // **読める件数を出す。** 総数だけ出すと、同じ画面の集計と食い違う（#101 で3度直した形）
+    var head = repos + "リポジトリ中 " + unread + "件が読めていません。";
+    if (installed === true) {
+      // App は入っている。**インストールをもう一度促さないこと**——済んでいる操作を促すのは
+      // 「設定する必要が無いものに設定を促す」偽の警告と同じで、しかも直らない
+      //
+      // **原因を1つに断定しない（2026-08-21）。** 「appInstalled」 が分けられるのは
+      // 「①未インストール」と「②未選択／③消えた・改名」までで、**②と③は分かれない**。
+      // 「対象に選ばれていません」と言い切ると、③の人は一覧に無いリポジトリを
+      // 探し続けることになる（押しても直らない導線と同じ形）。逃げ道を1文で示す。
+      //
+      // **設定画面の宛先も断定しない。** リンク先は 「/settings/installations」＝
+      // **押した本人の**インストール一覧で（appSettingsLink の項に、組織の設定ページが
+      // 管理者以外で 404 になる理由がある）、App を入れたのが別のメンバーや
+      // 顧客側のオーナーなら**着いた先は空**。そこで詰まる人に次の宛先を渡す。
+      out.push(el("p", {
+        class: "ds-group-note",
+        text: head + "GitHub App はこの組織に入っていますが、これらのリポジトリが読み取りの対象に選ばれていません。"
+          + "インストール設定を開いて、対象のリポジトリを追加してください。"
+          + "設定は App を入れた方の画面に出ます。見当たらない場合は、この組織で App を入れた方にご依頼ください。"
+          + "リポジトリ自体が一覧に見当たらない場合は、移動・改名・削除されている可能性があるので、登録から外してください。"
+          + "お客様の組織では、組織のオーナーに承認を依頼してください。",
+      }));
+      out.push(appSettingsLink("インストール設定を開く →"));
+      return out;
+    }
+    if (installed === false) {
+      out.push(el("p", {
+        class: "ds-group-note",
+        text: head + "この組織に Cortex の GitHub App を入れると読めるようになります（Issues の読み取りだけ）。"
+          + "お客様の組織では、組織のオーナーに承認を依頼してください。",
+      }));
+      out.push(appInstallLink("この組織にインストール →"));
+      return out;
+    }
+    // 「null」（確かめられなかった）と、この値を知らない古い fleet-status.json。
+    // **導線を出さない。** どちらが原因か分からないので、押させると外れたほうを
+    // 押させることになる（済んでいるインストールをもう一度、あるいは効かない設定画面へ）
+    out.push(el("p", {
+      class: "ds-group-note",
+      text: head + "原因（GitHub App が入っていない／入っているがこれらのリポジトリが選ばれていない）は、"
+        + "今回の実行では確かめられませんでした。翌朝の表示をご確認ください。",
+    }));
+    return out;
+  }
+
+  /**
+   * Slack のチャンネルを**平らに**並べる（2026-08-20）。
+   *
+   * ## なぜ折りたたみをやめたか
+   *
+   * オーナー指摘:
+   * > それぞれのワークスペースごとにセクション分けしてるけど、普通に並べて、
+   * > 他の接続OKとかの横にどのワークスペースを出すだけでいい。
+   * > 開いて閉じてみたいな感じで並ぶ必要があんまりわかんない。なんか複雑になっちゃってる。
+   *
+   * **並び順は組織ごと**（社内 → 顧客 → 分かりません）にするが、**箱で囲まない**。
+   * どの組織かは**行のラベル**が示す（同じチャンネル名が2つの組織に並びうるので、
+   * ラベル自体は必要）。
+   *
+   * ## 「組織が分かりません」の案内だけは別
+   *
+   * 3つの原因と、招待コマンド・接続ボタン・登録の解除が要る。**行ごとに繰り返すと
+   * 一覧が案内で埋まる**ので、その並びの手前に1つだけ置く。
+   */
+  function slackRows(items, meta) {
+    var ws = slackWorkspaces();
+    var out = [];
+    groupSlackByOrg(items, ws).forEach(function (g) {
+      var cards = g.items.map(function (x) { return extSourceCard(x, meta); });
+      if (g.unknown) {
+        // **開いたときに1度だけ、判定し直しをサーバへ頼む。**
+        // 承認が通っても、誰かが判定し直さなければ設定ファイルは古いまま。
+        // OAuth の戻り先は固定ページ（この画面には戻らない）ので、
+        // **利用者が操作タブを開き直したこの瞬間**が唯一の合図になる
+        requestOrgResolve();
+        // **案内が行を抱える（2026-08-20・オーナー指摘）。**
+        // 「次のチャンネル」と書いても、囲われていないと**どれを指すのか分からない**。
+        // 折りたたみは付けない——開閉させたいのではなく、**範囲を示したい**
+        out.push(orgNoteBox(unknownOrgNodes(), cards));
+        return;
+      }
+      if (g.key !== "__internal__") {
+        var st = tokenStateOf(ws, g.key);
+        // **接続が切れたときの導線を必ず残す。** それまでは接続カードの中の一覧に
+        // 出していた。カードごと消したので、ここへ移す——移さないと
+        // **接続が切れたことに気づけず、直す手段も画面から消える**
+        if (st === "revoked" || st === "missing") {
+          out.push(orgNoteBox(brokenOrgNodes(g.title, st), cards));
+          return;
+        }
+      }
+      cards.forEach(function (n) { out.push(n); });
+    });
+    return out;
+  }
+
+  /**
+   * 案内と、その案内が指す行を1つの箱にまとめる（2026-08-20）。
+   *
+   * **囲わないと「次のチャンネル」がどれを指すのか分からない**（オーナー指摘）。
+   * **折りたたみは付けない**——開閉させたいのではなく、範囲を示したいだけ。
+   */
+  function orgNoteBox(noteNodes, cards) {
+    var box = el("div", { class: "ds-orgnote" });
+    noteNodes.forEach(function (n) { if (n) box.appendChild(n); });
+    var list = el("div", { class: "ds-orgnote-rows" });
+    cards.forEach(function (c) { list.appendChild(c); });
+    box.appendChild(list);
+    return box;
+  }
+
+  /** 「組織不明」の案内。**原因を1つに絞らない** */
+  function unknownOrgNodes() {
+    // **接続だけを勧めると、招待すれば済む人に「直らない処方」を出す。**
+    // 非公開チャンネルは、同じ Slack でも招待前は「存在しない」と返る
+    var out = [];
+    // **「読めませんでした」では、行の「Slackで招待してください」と区別が付かない**
+    //（オーナー指摘・2026-08-20）。どちらも読めていないが、**分かっていることが違う**:
+    //   行に「招待してください」… クラスメソッドのチャンネルだと**分かっている**。招待だけが足りない
+    //   この案内             … **どのSlackのものかすら分からない**（どの鍵でも届かなかった）
+    // 状態の名前を「分かりません」に揃える
+    out.push(el("div", { class: "ds-orgnote-title", text: "⚠️ 組織不明のチャンネル" }));
+    out.push(el("p", {
+      class: "ds-group-note",
+      text: "Cortex が持っているどの鍵でも、このチャンネルに届きませんでした。次のどれかです。",
+    }));
+    var ul = el("ul", { class: "ds-group-note" });
+    // **公開との違いをここで言い切る。** 「同じ未招待なのに、なぜ上の行は
+    // 組織が分かっていて、こちらは分からないのか」が読み取れないと、
+    // 利用者は同じ状態が2通りに見えることに戸惑う
+    ul.appendChild(el("li", { text: "非公開チャンネルで、まだ Cortex を招待していない → 下のコマンドを Slack のそのチャンネルに貼ってください" }));
+    ul.appendChild(el("li", { text: "お客様の Slack にあり、まだつながっていない → 下のボタンから接続します" }));
+    ul.appendChild(el("li", { text: "チャンネルがアーカイブ／削除された、URLが違う → 「登録を解除」を押してください" }));
+    out.push(ul);
+    out.push(copyRow("/invite @Cortex"));
+    out.push(slackConnectButton());
+    // 判定し直しの結果を出す場所（何も起きなければ空のまま）
+    out.push(el("p", { class: "ds-group-note ds-org-resolved" }));
+    return out;
+  }
+
+  /** 接続が切れた／未接続のワークスペースの案内 */
+  function brokenOrgNodes(title, state) {
+    var out = [];
+    out.push(el("div", {
+      class: "ds-orgnote-title",
+      text: state === "revoked" ? "⚠️ " + title + " との接続が切れています" : "⚠️ " + title + " はまだ接続されていません",
+    }));
+    out.push(el("p", {
+      class: "ds-group-note",
+      // **revoked と missing を分ける。** 前者は「接続し直して」、後者は「まだ完了していない」で
+      // 次の一手が違う。unknown には何も出さない——繋がっているのに
+      // 「接続し直して」と言う方が、黙っているより悪い
+      text: state === "revoked"
+        ? "Slack 側で Cortex のアプリが削除されたか、接続が無効になっています。もう一度接続してください。"
+        : "このワークスペースのチャンネルが登録されていますが、接続が見つかりません。もう一度接続してください。",
+    }));
+    out.push(slackConnectButton());
+    return out;
   }
+
+
   var DS_KIND_ICON = {
     "課題管理": "📋",
     "会議": "🗒️",
@@ -2226,6 +2860,63 @@ ${capabilityState.toString()}
    */
   var GITHUB_APP_INSTALL_URL = "https://github.com/apps/classmethod-cortex-app/installations/new";
 
+  /**
+   * GitHub App のインストールへ行くリンク（2026-08-20 に部品化）。
+   *
+   * **同じものを2箇所に書かない。** 組織ごとの案内と、追加フォームの手順が
+   * 同じ導線を持つ（#138 で「1箇所にしか無い」ことが事故になったので、
+   * **むしろ複数あるのが正しい**）。写経すると、URLの張り替えで片方だけ古くなる。
+   *
+   * **正本は手順の側。** 組織ごとの案内は行が無いと出ないので、
+   * 行0件の案件では手順側しか残らない。
+   *
+   * **⚠️ ただし手順は追加フォームの中にあり、追加フォームは
+   * SITE.intake が無いと丸ごと消える**（renderExternalAdders の冒頭）。
+   * つまり **intake 無し＋行0件** の案件では App の導線が1本も無くなる。
+   * いまは config.ts の intakeUrl が艦隊で1つ・全案件に渡っているので
+   * その組み合わせは起きない（2026-08-20 に確認）。
+   * **案件ごとに intake を出し分けるようになったら、ここを見直すこと。**
+   */
+  function appInstallLink(label) {
+    return el("a", {
+      class: "ds-owner-install",
+      href: GITHUB_APP_INSTALL_URL,
+      target: "_blank", rel: "noopener",
+      text: label || "GitHub App を入れる →",
+    });
+  }
+
+  /**
+   * すでに入っている App の**インストール設定**（対象リポジトリの追加）へ行くリンク。
+   *
+   * **インストールとは別の宛先。** 「installations/new」 は「入れる」ための画面で、
+   * すでに入っている組織の人が押しても対象リポジトリは増えない。
+   * リポジトリの追加は、その人が入れた先（個人 or 組織）の設定画面で行う。
+   *
+   * **組織名を URL に埋め込まない。** 組織ごとの設定ページは
+   * 「github.com/organizations/<組織>/settings/installations」 だが、**その組織の
+   * 管理者でないと 404 になる**。読み取り対象の組織のオーナーが Cortex の利用者とは
+   * 限らない（お客様の組織がまさにそれ）ので、404 に飛ばすより、
+   * 本人のインストール一覧から辿らせるほうが確実に着く。
+   * ——「GITHUB_APP_INSTALL_URL」 の「確かめられないものを顧客に押させない」と同じ判断。
+   *
+   * ⚠ **ただし「押した本人が入れた App」しか出ない。** App を入れたのが別のメンバーや
+   * 顧客側のオーナーなら、着いた先は空になる。だから**案内の本文の側が**
+   * 「App を入れた方の画面に出ます／見当たらない場合はその方にご依頼ください」と断っている
+   * （githubNotConnectedNodes）。**リンクだけ残して本文の断りを消さないこと**——
+   * 消すと「開けば必ずそこにある」前提の案内に戻り、着いた先が空の人が詰む。
+   */
+  var GITHUB_APP_SETTINGS_URL = "https://github.com/settings/installations";
+
+  function appSettingsLink(label) {
+    return el("a", {
+      class: "ds-owner-install",
+      href: GITHUB_APP_SETTINGS_URL,
+      target: "_blank", rel: "noopener",
+      text: label || "インストール設定を開く →",
+    });
+  }
+
   /**
    * 接続状況のライブ値（op=state の応答）。取得前・取得失敗時は null。
    *
@@ -2471,7 +3162,14 @@ ${capabilityState.toString()}
         // いまはタイルが飛び先。両方に付けると同じ id が2つある不正なHTMLになり、
         // モーダルの中身がタイルより前に来る変更が入った瞬間、getElementById が
         // 「開いていないモーダルの中」を指して黙って無反応になる
-        var card = el("div", { class: "ds-card" + (inactive ? " ds-inactive" : "") }, [
+        //
+        // **ds-capbody を付けて縦組みにする（2026-08-21・オーナー指摘）。**
+        // .ds-card は横並びの flex なので、名前ブロック（col）と設定一式（ctl）が
+        // 左右に並び、「共有資料 資料」だけが左の細い列に見えていた。
+        // Slack / GitHub の行と同じ「上にレコード・下にフォーム」に見せるため、
+        // **このカードのときだけ** 縦に積む（.ds-card そのものの CSS は変えない
+        // ——extSourceCard が使っており、変えると Slack と GitHub の行が壊れる）。
+        var card = el("div", { class: "ds-card ds-capbody" + (inactive ? " ds-inactive" : "") }, [
           el("div", { class: "ds-card-main" }, [
             el("span", { class: "ds-icon", text: DS_KIND_ICON[s.kind] || "📁" }),
             el("span", { class: "ds-type", text: s.kind || "" }),
@@ -2516,13 +3214,35 @@ ${capabilityState.toString()}
       var groups = [];
       var byType = {};
       sources.forEach(function (s) {
-        var g = byType[s.type];
-        if (!g) { g = { type: s.type, items: [] }; byType[s.type] = g; groups.push(g); }
+        // **GitHub は種別をまたいで1つにまとめる（2026-08-20）。**
+        // issues と discussions を別グループにすると、**同じ組織の案内が2箱出る**
+        // （組織ごとの畳み直しが箱をまたげない。実測で再現した）。
+        // 組織は type ではなく ref に入っているので、まとめて渡すのが正しい
+        var key = String(s.type).indexOf("github") === 0 ? "__github__" : s.type;
+        var g = byType[key];
+        if (!g) { g = { type: key, items: [] }; byType[key] = g; groups.push(g); }
         g.items.push(s);
       });
       var UNIT = { "slack": "チャンネル", "github-issues": "リポジトリ", "github-discussions": "リポジトリ" };
       groups.forEach(function (g) {
         var meta = DS_TYPE[g.type] || { icon: "🔗", label: g.type || "その他" };
+        // **Slack は所属する組織ごとに分ける（2026-08-20）。**
+        // 追加のときにワークスペースを選ばせるのをやめたので、
+        // 「どの組織のものか」「その組織とつながっているか」を画面が言う。
+        // 分け方は groupSlackByOrg（純関数）が全部持っている
+        if (g.type === "slack") {
+          slackRows(g.items, meta).forEach(function (n) { pushCap("チャット", n); });
+          return;
+        }
+        // **GitHub も組織ごとに分ける（2026-08-20・Slack からの横展開）。**
+        // それまでは「リポジトリの一覧」と「組織ごとの接続状況」が**別々に並んで**おり、
+        // どの行がどの組織のものか、行を見ても分からなかった。
+        if (g.type === "__github__") {
+          // **meta は行ごとに引く。** issues と discussions が混ざるので、
+          // グループの type から1つに決められない
+          githubRows(g.items).forEach(function (n) { pushCap("開発", n); });
+          return;
+        }
         var cards = el("div", { class: "ds-list" });
         g.items.forEach(function (s) { cards.appendChild(extSourceCard(s, meta)); });
         if (g.items.length >= 4) {
@@ -2553,129 +3273,62 @@ ${capabilityState.toString()}
     // **追加フォームはグループの外に置く。** グループは0件だと描かれず、4件以上だと
     // 畳まれる（既定は閉）。中に入れると**新規案件（0件）＝一番追加したい場面**で消える。
     var adders = renderExternalAdders();
-    // **接続の入口はチャンネル追加より前に置く。** 顧客ワークスペースを繋いでいない状態で
-    // 先に追加フォームを見せると、貼れるのに読まれないチャンネルを登録することになる
-    pushCap("チャット", slackConnectBox());
+    // **接続の入口は「読み取れていない」組にだけ出す（2026-08-20）。**
+    //
+    // それまでは「お客様の Slack ワークスペースを接続」という独立した節を
+    // チャンネル追加より前に置いていた。オーナーの受け入れテストで
+    // 「モーダルを開いても何から始めればいいか分からない」と指摘された——
+    // 接続が先なのか追加が先なのか、そもそも自分に関係あるのかが読み取れない。
+    //
+    // **接続は「準備」ではなく、必要になった行から始まる。**
+    // 当時の警告コメント（「箱そのものは消さない。0件の案件で入口が消える」）は
+    // **新しい形が別の解き方をしている**——チャンネルを追加すれば
+    // 読み取れていない組として現れ、そこに接続ボタンが出る。
+    // 0件なら繋ぐ相手もまだ無いので、入口が要る場面にならない。
     pushCap("チャット", adders.querySelector('[data-adder="slack"]'));
-    // **組織ごとの接続状況を、開発の一番上に置く。** トークンは組織ごとにしか
-    // 効かない（Fine-grained PAT も GitHub App のインストールトークンも1組織分）ので、
-    // 「N件が読めていません」だけでは何をすればよいか決まらない。
-    // どの組織が繋がっていないかと、そこへの導線を出す
-    var owners = fleetVal("githubOwners") || [];
-    if (owners.length) {
-      var obox = el("div", { class: "ds-owners" });
-      obox.appendChild(el("div", { class: "ds-sub", text: "組織ごとの接続状況" }));
-      owners.forEach(function (o) {
-        var ok = o.source === "app" || o.source === "token";
-        // **確かめられなかった夜は、そう言う。** gh の不在・タイムアウト・ネットワーク断で
-        // 起きる。「接続OK」と出すと、同じ画面の集計行が「⚠️ 2件に問題」と言っている
-        // 横で食い違う。「未接続」と出すと、繋がっている組織に設定を促す偽の警告になる。
-        // どちらも嘘なので、確かめていないことをそのまま出す
-        var unsure = o.source === "unknown";
-        var row = el("div", { class: "ds-owner" }, [
-          el("span", { class: "ds-owner-name", text: o.owner }),
-          el("span", { class: "ds-owner-state ds-gate-" + (ok ? "ok" : "warn"),
-            // **読める件数を出す。** 総数だけ出すと、同じ画面の
-            // 「⚠️ 15件が読めていません」と食い違う（#101 で3度直した形）
-            // **確かめられなかった件数を出す。** 未接続側は「18リポジトリ中 15件が
-            // 読めていません」と出しているのに、こちらだけ総数だと同じ節の中で
-            // 表現が揃わない。4リポ中1つだけ揺れた夜に「4リポジトリを確かめられて
-            // いません」と読めるのも実態と違う
-            text: unsure
-              ? "⚠️ 確認できませんでした　" + o.repos + "リポジトリ中 " +
-                (o.unchecked || o.repos) + "件の接続を確かめられていません"
-              : ok
-                ? "● 接続OK　" + o.repos + "リポジトリ" + (o.source === "app" ? "（GitHub App）" : "")
-                : "⚠️ 未接続　" + o.repos + "リポジトリ中 " + o.unreadable + "件が読めていません" }),
-        ]);
-        // **未接続のときだけ導線を出す。** 繋がっている組織に「インストール」を
-        // 出すと、押す必要が無いものを押させることになる。
-        // 確かめられなかっただけの組織にも出さない——すでに入っているかもしれないので
-        if (!ok && !unsure) {
-          row.appendChild(el("a", {
-            class: "ds-owner-install",
-            // どの組織かはこの行に出ているので、選ばせる形で足りる（URLの形は
-            // GITHUB_APP_INSTALL_URL のコメントを参照）
-            href: GITHUB_APP_INSTALL_URL,
-            target: "_blank", rel: "noopener",
-            text: "この組織にインストール →",
-          }));
-        }
-        obox.appendChild(row);
-      });
-      pushCap("開発", obox);
-    } else {
-      // **組織が1件も無い案件にも、App の入口を置く（#138）。**
-      // githubOwners は夜間バッチの成果物なので、立ち上げ直後の案件には無い。
-      // インストールの導線を「未接続の組織の行」の中にしか置いていなかったため、
-      // **まだ何も繋いでいない案件＝一番 App を入れてほしい案件**の画面に、
-      // App へ行く道が1本も無かった（実機で踏んだ）。
-      var obox0 = el("div", { class: "ds-owners" });
-      obox0.appendChild(el("div", { class: "ds-sub", text: "組織ごとの接続状況" }));
-      obox0.appendChild(el("div", { class: "ds-owner" }, [
-        el("span", { class: "ds-owner-state ds-gate-idle", text: "⦿ 未接続　読み取っている組織はまだありません" }),
-        el("a", {
-          class: "ds-owner-install",
-          href: GITHUB_APP_INSTALL_URL,
-          target: "_blank", rel: "noopener",
-          text: "組織に GitHub App をインストール →",
-        }),
-      ]));
-      pushCap("開発", obox0);
-    }
+    // **組織ごとの接続状況は、行と一体にした（2026-08-20・Slack からの横展開）。**
+    //
+    // それまでは「リポジトリの一覧」と「組織ごとの接続状況」が**別々に並んで**おり、
+    // 行を見てもどの組織のものか分からず、状況を見てもどの行の話か分からなかった。
+    // いまは:
+    //   - どの組織かは**行のラベル**（extSourceCard）
+    //   - 繋がっていない組織は**案内が行を抱える**（githubRows）
+    //
+    // **⚠️ App の導線は、追加フォームの手順に常設してある（#138）。**
+    // 組織ごとの案内は**行が無いと出ない**ので、
+    // **行0件の案件＝一番 App を入れてほしい案件**にはそちらしか無い。
+    // 「案内側に導線があるから手順側は省く」とやると #138 が再発する。
+    //
+    // 立ち上げ直後（githubOwners が空）でも、追加フォームは必ず出る
+    // （adders はグループの外に置いてある）。
 
     pushCap("開発", adders.querySelector('[data-adder="github"]'));
 
-    /**
-     * GitHub の読み取りトークンを入れる欄が要るか（#118）。
-     *
-     * トークンは **GitHub App が入っていない組織のフォールバック**でしかない。全組織が
-     * App（か登録済みトークン）で読めている案件に入力欄を出すと、実機で言われたとおり
-     * 「App に移行したのに、なぜトークンを求められるのか」になる。押す必要が無いものを
-     * 押させるのは、未設定の警告を出し続けるのと同じ種類の誤りなので畳む。
-     *
-     * **判断材料が無いときは出す。** githubOwners は fleet-status.json 由来で、
-     * 夜間バッチがまだ走っていない案件には無い。「情報が無い」を「接続済み」に寄せると、
-     * **一番繋ぎたい立ち上げ直後の案件**から唯一の入口が消える。
-     *
-     * **unknown（確かめられなかった組織）も「要る」側に倒す。** 実態は none かもしれず、
-     * 隠す方に倒すと直せなくなる（画面には組織ごとに「確認できませんでした」と出ている）。
-     *
-     * **「無い」と「空」は別物（#138・オーナー判断 2026-08-18）。**
-     *   - 値そのものが来ていない（undefined）… fleet-status.json をまだ持っていない、または
-     *     取得に失敗した。**情報が無いので出す**（上の #118 の意図はここが担う）。
-     *   - 空の配列（[]）… 夜間バッチは走ったが、読み取り対象の開発リポジトリが0件。
-     *     読むものが無いのだから鍵も要らない。**出さない**。
-     * 以前はどちらも空配列に丸めていたので、0件の案件にも欄が出続けていた。
-     * **この2つを混ぜると #118 を壊す**（立ち上げ直後の案件から唯一の入口が消える）。
-     */
-    function githubTokenNeeded() {
-      var list = fleetVal("githubOwners");
-      if (!Array.isArray(list)) return true;
-      if (!list.length) return false;
-      return list.some(function (o) { return !o || (o.source !== "app" && o.source !== "token"); });
+    // **0件の案件にも1行だけ残す（#138 のオーナー判断・置き場所だけ移した）。**
+    // 元は GitHub の読み取りトークンの鍵カードを畳んだ跡地に出していたが、
+    // その鍵ごと廃止したので、GitHub の節の側で持つ。
+    //
+    // **消さないこと。** 立ち上げ直後の案件は、この節に行が1本も無い
+    //（＝組織ごとの案内も出ない）。何も言わないと、上のフォームが何のためにあるのか、
+    // 登録したあと何が起きるのかが画面から読み取れない。
+    //
+    // **「[]」（夜間バッチは走ったが対象0件）と 「undefined」（まだ走っていない）は別物。**
+    // 後者に「まだありません」と書くと、実際には登録済みかもしれない案件に嘘を言う
+    var ownersNow = fleetVal("githubOwners");
+    if (Array.isArray(ownersNow) && ownersNow.length === 0) {
+      pushCap("開発", el("p", {
+        class: "sec-how ds-all-connected",
+        text: "読み取り対象の開発リポジトリがまだありません。上のフォームで登録すると、"
+          + "読めているかどうかを翌朝からここに出します。",
+      }));
     }
 
     // 連携の鍵は、その能力のところへ置く（画面下まで往復させない）
-    var SECRET_CAP = { figma: "デザイン", backlog: "課題管理", "external-sources": "開発" };
+    // **GitHub（「external-sources」）はここに無い。** 読み取りトークンは廃止し、
+    // 読み取りは GitHub App に一本化した。**この表に戻すと入力欄が復活する**
+    var SECRET_CAP = { figma: "デザイン", backlog: "課題管理" };
     (SITE.secretKinds || []).forEach(function (k) {
       if (!SECRET_FORMS[k]) return;
-      // 全組織が繋がっているなら、入力欄ではなく**そう言う1行**に畳む（#118）。
-      // 何も出さないと「トークンはどこで入れるのか」が分からなくなる
-      if (k === "external-sources" && !githubTokenNeeded()) {
-        // **0件の案件に「すべての組織に接続済み」と言わない（#138）。** 組織が1つも無いのに
-        // 接続済みと書けば嘘になる。畳む理由が違うので、文も分ける——次の一歩
-        //（リポジトリを登録する）が同じモーダルの上にあることまで書く
-        var ownersNow = fleetVal("githubOwners");
-        var noRepos = Array.isArray(ownersNow) && ownersNow.length === 0;
-        pushCap(SECRET_CAP[k], el("p", {
-          class: "sec-how ds-all-connected",
-          text: noRepos
-            ? "読み取り対象の開発リポジトリがまだありません。このモーダルの上にあるリポジトリの追加フォームで登録すると、トークンが要るかどうかをここに出します。"
-            : "すべての組織に接続済みです（GitHub App / 登録済みトークン）。読み取りトークンの登録は要りません。",
-        }));
-        return;
-      }
       // **意図的にOFFにした能力にだけ、入力欄を出さない（0.4.71）。** 使わないと決めたものに
       // 鍵を求めるのは、設定する必要が無いものに設定を促す偽の警告と同じ。
       // 何も出さないと「トークンはどこで入れるのか」が分からなくなるので、理由を1行だけ残す
@@ -2693,6 +3346,13 @@ ${capabilityState.toString()}
         }));
         return;
       }
+      // **Backlog は接続先のスペースごとにカードを出す（2026-08-20・#127）。**
+      // キーはスペースごとに別なので、欄が1つだと**どちらの鍵を入れたのか
+      // 誰にも分からない**まま片方の棚に入る（入れたのに動かない、が起きる）。
+      if (k === "backlog") {
+        backlogSecretCards().forEach(function (n) { pushCap(SECRET_CAP[k], n); });
+        return;
+      }
       pushCap(SECRET_CAP[k], secretCard(k, SECRET_FORMS[k]));
     });
 
@@ -2717,7 +3377,9 @@ ${capabilityState.toString()}
       "開発": { icon: "🐙", desc: "IssuesをGoldの材料に" },
     };
     var STATE_LABEL = { ok: "● 接続OK", idle: "⦿ 未接続", off: "未使用", warn: "⚠️" };
-    var SECRET_OF_CAP = { "デザイン": "figma", "課題管理": "backlog", "開発": "external-sources" };
+    // **「開発」はここに無い。** GitHub の読み取りトークンは廃止したので、
+    // 鍵の未設定を語る相手がいない（読めていないときは組織ごとの案内が拾う）
+    var SECRET_OF_CAP = { "デザイン": "figma", "課題管理": "backlog" };
 
     // ---- セットアップの残り（checks）----
     //
@@ -2920,10 +3582,6 @@ ${capabilityState.toString()}
       // 新規案件——**まさに何を入れれば繋がるのかを知りたい場面**——から、
       // 鍵が未設定であることの手がかりまで消える
       var sk = SECRET_OF_CAP[cap];
-      // **GitHub は「トークンが無い」＝「読めていない」ではない（#118）。** App で読めている
-      // 案件に未設定の警告を出すと、直す必要が無いものを直させることになる。
-      // 読めていない組織があるときは、この下の checks とタイルの状態（warn）が拾う
-      var tokenIsFallback = sk === "external-sources" && !githubTokenNeeded();
       // **#125②: 導出があるときは導出で判断する。** OFF（意図的に止めた）にだけ出さない
       // ——入れる必要が無いものについて設定を促す偽の警告になる。
       //
@@ -2932,7 +3590,7 @@ ${capabilityState.toString()}
       // 0.4.70 は unset で入力欄を畳んでいたので注記も抑えていたが、案A で欄を出すようにしたため揃えた
       // 導出が無いデータでは判断材料が無いので、注記を出す側（＝入力欄と揃う側）に倒す
       var tokenRelevant = derived != null ? derived !== "off" : true;
-      if (!tokenIsFallback && tokenRelevant && sk && (SITE.secretKinds || []).indexOf(sk) >= 0 && !((fleetVal("secretSources") || {})[sk])) {
+      if (tokenRelevant && sk && (SITE.secretKinds || []).indexOf(sk) >= 0 && !((fleetVal("secretSources") || {})[sk])) {
         body.appendChild(el("div", { class: "ds-tile-note", text: "⚠ トークンが未設定です" }));
       }
       // セットアップの残りのうち、この能力のもの。**鍵の注記と同じ位置**に出して
@@ -3147,7 +3805,7 @@ ${capabilityState.toString()}
       // 長い説明は落とし、次の行動の1行だけ残す
       return [p(isInternalSlack(s)
         ? "cortex の担当者にご連絡ください。"
-        : "下の「お客様の Slack ワークスペースを接続」から接続してください。")];
+        : "「Slack ワークスペースに接続する」から接続してください。")];
     }
     if (r.gate === "unreachable") {
       return [p("チャンネルが見つからないか、アーカイブされています。不要なら「登録を解除」してください。")];
@@ -3216,14 +3874,24 @@ ${capabilityState.toString()}
    * （押すたびにコミットが増えるのを避ける）。表示名だけが例外で、そちらは
    * Slack の実名が正なので自動で揃える（autoAlignName）。
    */
+  /**
+   * 接続の確認。
+   *
+   * **ボタンは行の中（「登録を解除」の隣）に置く（2026-08-20）。**
+   * それまでは行の下に独立した段を作っており、**1行が2段になって一覧が長かった**
+   * （オーナー指摘「レコードをそれぞれもうちょっと短くできるよね」）。
+   * 押した結果の詳細（測った時刻・次の一手）は下に出す——**押すまでは空**なので、
+   * 一覧を眺めているだけの人には行が伸びない。
+   *
+   * @returns { btn, detail } btn は行に、detail は行の下に置く
+   */
   function probeSection(s, card, gateEl) {
+    var btn = el("button", { class: "ds-toggle-btn", type: "button", text: "接続を確認" });
     var wrap = el("div", { class: "ds-probe" });
     var head = el("div", { class: "ds-probe-head" });
-    var btn = el("button", { class: "ds-toggle-btn", type: "button", text: "接続を確認" });
     var msg = el("span", { class: "ds-toggle-msg" });
     var at = el("span", { class: "ds-probe-at" });
     var body = el("div");
-    head.appendChild(btn);
     head.appendChild(msg);
     head.appendChild(at);
     wrap.appendChild(head);
@@ -3233,6 +3901,10 @@ ${capabilityState.toString()}
       var intake = SITE.intake;
       if (!intake) return;
       btn.disabled = true;
+      // **押されて初めて枠を出す（2026-08-20・オーナー指摘）。**
+      // それまでは中身が空でも点線だけが全行に出ており、**何も意味していなかった**。
+      // 押した結果があるときだけ、行と結果を分ける線になる
+      wrap.className = "ds-probe is-shown";
       msg.className = "ds-toggle-msg";
       msg.textContent = "確認中…";
       at.textContent = "";
@@ -3278,7 +3950,7 @@ ${capabilityState.toString()}
       }
       btn.disabled = false;
     });
-    return wrap;
+    return { btn: btn, detail: wrap };
   }
 
   function removeChannelButton(s, card) {
@@ -3394,6 +4066,42 @@ ${capabilityState.toString()}
    * **読み手が見に行くのと別の棚へ黙って入る**（入れたのに動かない、が一番起きてほしくない形）。
    * 名乗らなければサーバが従来どおり名簿の値を使う。
    */
+  /**
+   * Backlog のAPIキーの欄を、接続先のスペースごとに出す（2026-08-20・#127）。
+   *
+   * **キーはスペースごとに別。** 欄が1つだと、複数スペースの案件で
+   * 「どちらの鍵を入れたのか」が誰にも分からないまま片方の棚に入る。
+   *
+   * ## 「現在:」は複数スペースのとき出さない
+   *
+   * 夜間の実測（secretSources.backlog）は**種別ごと**の1つの値で、
+   * スペース別の充足を表せない。1枚目に帰属させると
+   * **片方だけ入れた状態で両方に「登録済み」と出る**——画面が嘘をつく。
+   * 器がスペース別になるまでは、複数のときは全カードで出さない。
+   *
+   * ## 接続先がまだ無いとき
+   *
+   * カードは1枚だけ出す（スペースは名乗らない）。サーバは名簿の値に倒す。
+   */
+  function backlogSecretCards() {
+    var spaces = backlogSpacesNow();
+    if (spaces.length <= 1) return [secretCard("backlog", SECRET_FORMS["backlog"])];
+    return spaces.map(function (space) {
+      return secretCard("backlog", SECRET_FORMS["backlog"], { space: space, hideCurrent: true });
+    });
+  }
+
+  /** 画面が見ている接続先のスペース一覧（重複なし） */
+  function backlogSpacesNow() {
+    var list = backlogTargetsNow(null);
+    var domains = [];
+    for (var i = 0; i < list.length; i++) {
+      var d = String(list[i].domain || "").toLowerCase();
+      if (d && domains.indexOf(d) === -1) domains.push(d);
+    }
+    return domains;
+  }
+
   function backlogSecretSpace() {
     var list = backlogTargetsNow(null);
     var domains = [];
@@ -3419,17 +4127,25 @@ ${capabilityState.toString()}
     var targets = backlogTargetsNow(s);
     var editable = backlogTargetsEditable();
 
-    var listEl = el("div", { class: "ds-target-list" });
-    var current = el("div", { class: "ds-current" }, [
-      el("span", { class: "ds-current-label", text: "現在の接続先" }),
-      listEl,
-    ]);
+    // **Slack / GitHub / Figma / Drive と同じレコードの行にする（2026-08-21・オーナー指摘）。**
+    // それまでは「現在の接続先」というラベル付きの独自レイアウト（.ds-current /
+    // .ds-target-row）で、同じモーダルの中でもここだけ行間と見た目が違っていた。
+    var listEl = el("div", { class: "ds-list" });
+    // **0件の1行は一覧の外に置く**（Figma / Drive と同じ形）。中に .ds-card として
+    // 置くと「行が1件ある」と読まれ、一覧を数えるテストにも行として数えられる
+    var emptyEl = el("p", { class: "ds-empty", text: "同期する接続先はまだ登録されていません（未設定）。" });
     // 追加・削除の結果はここに1つだけ出す（行を描き直しても消えない位置）
     var msg = el("div", { class: "ds-toggle-msg" });
 
     function removeRow(t) {
-      var row = el("div", { class: "ds-target-row" }, [
-        el("span", { class: "ds-current-value", text: t.domain + " / " + t.projectKey }),
+      // **ds-type はツール名**（能力名を入れると上の見出しと重複する）。
+      // **名前はリンクにする**——Drive / Figma の行と同じく、正本を新しいタブで開ける
+      var row = el("div", { class: "ds-card" }, [
+        el("div", { class: "ds-card-main" }, [
+          el("span", { class: "ds-icon", text: "📋" }),
+          el("span", { class: "ds-type", text: "Backlog" }),
+          dsNameEl(t.domain + " / " + t.projectKey, "https://" + t.domain + "/projects/" + t.projectKey),
+        ]),
       ]);
       if (!editable) return row;
       var btn = el("button", { class: "ds-toggle-btn ds-danger", type: "button", text: "この接続先を外す" });
@@ -3456,12 +4172,13 @@ ${capabilityState.toString()}
 
     function paint() {
       while (listEl.firstChild) listEl.removeChild(listEl.firstChild);
-      if (!targets.length) {
-        // **行ごと消さない。** 表示が無いと「まだ何も無い」のか「出し忘れ」なのか区別できない
-        listEl.appendChild(el("span", { class: "ds-current-value is-unset", text: "未設定" }));
-        return;
-      }
       for (var i = 0; i < targets.length; i++) listEl.appendChild(removeRow(targets[i]));
+      // **0件を黙って見せない。** 表示が無いと「まだ何も無い」のか「出し忘れ」なのか
+      // 区別できない。**一覧の外**（Figma / Drive と同じ）に、件数に応じて出し入れする
+      // ——出しっぱなしにすると、設定済みの案件にも「未設定」と書いた行が残る
+      var here = emptyEl.parentNode === box;
+      if (!targets.length && !here) box.insertBefore(emptyEl, listEl.nextSibling);
+      else if (targets.length && here) box.removeChild(emptyEl);
     }
 
     /**
@@ -3484,8 +4201,10 @@ ${capabilityState.toString()}
       return { onTargets: adoptTargets, staleNote: TARGETS_RACE_NOTE };
     }
 
+    // **box を先に作る。** paint() は 0件の1行を box へ出し入れするので、
+    // 箱が無いと最初の描画で「未設定」の行が出ない
+    var box = el("div", {}, [listEl]);
     paint();
-    var box = el("div", {}, [current]);
     if (editable) {
       box.appendChild(addForm({
         // **「追加」に戻す（#127）。** 1件しか持てなかった頃は「保存」（置き換え）だったが、
@@ -3493,7 +4212,27 @@ ${capabilityState.toString()}
         title: "＋ 接続先を追加",
         placeholder: "https://<スペース>.backlog.jp/projects/<プロジェクトキー>",
         requiredNote: "BacklogのURLを入力してください（プロジェクトキーが入った形。数字だけのURLは受け付けません）。",
-        hint: "Backlog でこの案件のプロジェクトを開き、ブラウザのURLをそのまま貼ってください（課題の画面のURLでも構いません）。APIキーは下の「Backlog のAPIキー」から別に登録します。増えるのは同期先だけで、ビューアからの起票先は変わりません。リアルタイム同期を使う場合は、追加したプロジェクトの Backlog 側にも案件専用URLの登録が要ります。",
+        // **手順のリストにする（2026-08-20・Slack からの横展開）。**
+        // **リスト（ol.sec-steps）そのものは維持する**——他の能力の手順と形を揃える。
+        //
+        // **鍵の発行手順は二重に持たない。** 正本は下の鍵カード
+        //（SECRET_FORMS.backlog の how）で、ここからは参照するだけ。
+        //
+        // ## 4行 → 2行に圧縮した（2026-08-21・オーナー指摘「何も変わってない気がする」）
+        //
+        // **この欄は URL を貼るだけ**なので、4行の説明が読む負担に見合わない。
+        // ただし**落としてよいのは1行目だけ**だった（欄を見れば分かる内容）。残り3つは
+        // ここ以外に置き場が無いので、**消さずに2行へ畳んでいる**:
+        //   - 「起票先は変わりません」… 追加の確認をやめたとき（2026-08-20）に
+        //     ここへ移してきたもの。落とすと知る手段が無くなる
+        //   - 「スペースごとに別のキー」… 鍵カードからは読めない。1スペースの案件は
+        //     カードのタイトルにスペース名が出ないので、これから2つ目を足す人に届かない
+        //   - 「案件専用URLの登録」… 救出先の realtimeSyncCard() は稼働中の案件では
+        //     手順一式を <details> に畳むので、**いちばん要る人に対して閉じている**
+        hint: [
+          "URL を貼ると同期先が増えます。ビューアからの起票先は変わりません（スペースごとに別のAPIキーが要ります）。",
+          "リアルタイム同期を使うなら、追加したプロジェクトにも案件専用URLの登録が要ります。",
+        ],
         build: function (url) {
           return { op: "backlog-target-add", url: url, baseGeneration: targetsGenerationOf(targets) };
         },
@@ -3627,15 +4366,11 @@ ${capabilityState.toString()}
         box.appendChild(el("p", { class: "sec-how", text: "共有資料の取り込み設定を読み取れないため、この画面からは変更できません。cortex の担当者にご連絡ください。" }));
         used = true;
       } else if (s.driveState) {
-        // フォルダが1件も無いのに ON/OFF だけ出しても意味が無いので、追加フォームを先に出す
-        box.appendChild(addForm({
-          title: "＋ Google Drive のフォルダを追加",
-          placeholder: "https://drive.google.com/drive/folders/…",
-          namePlaceholder: "メモ（任意）",
-          requiredNote: "フォルダのURLを入力してください。",
-          hint: "このフォルダの中身が 共有資料 にコピーされ、Markdown 化されます。取り込み用アカウントをそのフォルダの閲覧者に招待しておいてください（招待が無いと読めません）。",
-          build: function (url, name) { return { op: "add-drive-folder", url: url, name: name }; },
-        }));
+        // **レコードが先・追加フォームが後（2026-08-21）。** Slack / GitHub と同じ並びに揃える。
+        // それまではフォームが先だった。理由は「フォルダが1件も無いのに ON/OFF だけ出しても
+        // 意味が無いから」だったが、**その ON/OFF トグルは既に廃止されている**（下の注記）。
+        // 理由が消えたのに順序だけ残っていた。デザインと課題管理は元から「レコード → フォーム」。
+        //
         // **ON/OFFのトグルは出さない。** フォルダを追加した時点で取り込みは始まる
         // （applyAddDriveFolder が enabled を立てる）ので「始める」を押す機会が無い。
         // 止めたいならフォルダを外す——登録そのものが意思表示、という会議と同じ考え方。
@@ -3643,11 +4378,19 @@ ${capabilityState.toString()}
         // 名前は任意。**無ければIDを出す**（既存の案件は名前を持っていない）
         var fnames = s.driveFolderNames || {};
         if (folders.length) {
-          var dlist = el("div", { class: "ds-subitems" });
+          var dlist = el("div", { class: "ds-list" });
           folders.forEach(function (id) {
             var fname = fnames[id];
-            var row = el("div", { class: "ds-subitem" }, [
-              dsNameEl(fname || id, "https://drive.google.com/drive/folders/" + id),
+            // **Slack / GitHub の行と同じ構造にする（ds-card > ds-card-main >
+            // ds-icon + ds-type + ds-name）。** extSourceCard は呼ばない——
+            // あちらは type / gate / origin など外部ソース固有の判断を抱えている。
+            // ds-type に入れるのは**ツール名**（能力名を入れると上の見出しと重複する）。
+            var row = el("div", { class: "ds-card" }, [
+              el("div", { class: "ds-card-main" }, [
+                el("span", { class: "ds-icon", text: "📁" }),
+                el("span", { class: "ds-type", text: "Google Drive" }),
+                dsNameEl(fname || id, "https://drive.google.com/drive/folders/" + id),
+              ]),
             ]);
             // **名前を出したときはIDも併記する。** 同名のフォルダを見分けられなくなるのと、
             // 「このIDを外す」という確認文と画面の表示が食い違うのを防ぐ
@@ -3668,12 +4411,41 @@ ${capabilityState.toString()}
                 return lines;
               },
               build: function () { return { op: "remove-drive-folder", id: id }; },
-              onDone: function () { row.className = "ds-subitem ds-removed"; },
+              // **クラスのハード代入をやめる**（片方だけ直し忘れる形を構造的に消す）
+              onDone: function () { row.classList.add("ds-removed"); },
             }));
             dlist.appendChild(row);
           });
           box.appendChild(dlist);
+        } else if (s.driveState === "empty") {
+          // **0件を黙って見せない。** 追加フォームだけだと「まだ登録していない」のか
+          // 「読めていない」のか区別できない。
+          //
+          // **判定は driveState === "empty" にする。** engine（fleet-status.mjs）は
+          // driveFolderIds を「1件以上あるときだけ」出すので、キーの有無では
+          // 未取得（unset / broken）と0件を見分けられない。unset / broken は
+          // 上の分岐で先に返しているので、ここへ来る empty は「読めていて0件」だけ。
+          box.appendChild(el("p", { class: "ds-empty", text: "取り込み対象のフォルダはまだ登録されていません。" }));
         }
+        box.appendChild(addForm({
+          title: "＋ Google Drive のフォルダを追加",
+          placeholder: "https://drive.google.com/drive/folders/…",
+          namePlaceholder: "メモ（任意）",
+          requiredNote: "フォルダのURLを入力してください。",
+          // **手順のリストにする（2026-08-20・Slack からの横展開）。**
+          //
+          // **取り込み用アカウントのアドレスを出す（オーナー判断・分類A）。**
+          // それまでは「取り込み用アカウントを招待してください」としか書いておらず、
+          // **誰を招待すればいいのかが画面から分からなかった**——担当者に聞かないと
+          // 完了できない手順になっていた。
+          // 招待されない限り何も読めないアカウントなので、出す判断をした。
+          hint: [
+            { text: "読み取りたい Google Drive のフォルダを開き、下のアカウントを閲覧者として招待します（招待が無いと読めません）。", node: copyRow(DRIVE_INGEST_ACCOUNT) },
+            "そのフォルダのURLを下の欄に貼って「追加」を押します。",
+            "追加したフォルダの中身が 共有資料 にコピーされ、Markdown 化されます。止めるときは、その行の「このフォルダを外す」を押します。",
+          ],
+          build: function (url, name) { return { op: "add-drive-folder", url: url, name: name }; },
+        }));
         used = true;
       }
     }
@@ -3687,10 +4459,18 @@ ${capabilityState.toString()}
       // 描画時点の件数で判定すると、3件を1件ずつ外していったとき最後の1件でも警告が出ない。
       var figsLeft = figs.length;
       if (figs.length) {
-        var flist = el("div", { class: "ds-subitems" });
+        var flist = el("div", { class: "ds-list" });
         figs.forEach(function (f) {
-          var row = el("div", { class: "ds-subitem" }, [
-            dsNameEl(f.name || f.key, "https://www.figma.com/design/" + f.key),
+          // **Slack / GitHub の行と同じ構造にする（ds-card > ds-card-main >
+          // ds-icon + ds-type + ds-name）。** extSourceCard は呼ばない——
+          // あちらは type / gate / origin など外部ソース固有の判断を抱えている。
+          // ds-type に入れるのは**ツール名**（能力名を入れると上の見出しと重複する）。
+          var row = el("div", { class: "ds-card" }, [
+            el("div", { class: "ds-card-main" }, [
+              el("span", { class: "ds-icon", text: "🎨" }),
+              el("span", { class: "ds-type", text: "Figma" }),
+              dsNameEl(f.name || f.key, "https://www.figma.com/design/" + f.key),
+            ]),
           ]);
           row.appendChild(removeButton({
             label: "このファイルを外す",
@@ -3714,7 +4494,8 @@ ${capabilityState.toString()}
             },
             build: function () { return { op: "remove-figma-file", key: f.key }; },
             onDone: function () {
-              row.className = "ds-subitem ds-removed";
+              // **クラスのハード代入をやめる**（片方だけ直し忘れる形を構造的に消す）
+              row.classList.add("ds-removed");
               figsLeft -= 1;
             },
           }));
@@ -3731,7 +4512,18 @@ ${capabilityState.toString()}
         placeholder: "https://www.figma.com/design/…",
         namePlaceholder: "メモ（任意）",
         requiredNote: "FigmaのURLを入力してください。",
-        hint: "このファイルの画面インベントリ（画面名・Figmaへのリンク）が毎晩同期されます。画像は取り込まれません。",
+        // **手順のリストにする（2026-08-20・Slack からの横展開）。**
+        // 一続きの文章だと、読む人が「自分がいま何をすべきか」を自分で切り出すことになる。
+        //
+        // **手順1・2は要約にとどめ、正本は下の鍵カードに置く**（SECRET_FORMS.figma の
+        // how / note）。全文をここに移すと二重になり、片方だけ直る形になる
+        // ——カードは接続マップとタイルの注記と条件を揃えているので、動かすと壊れやすい。
+        hint: [
+          "Figma でトークンを発行します（読み取りだけ。スコープ2つ）。手順は下の「Figma のトークン」の欄にあります。",
+          "発行したアカウントを、読み取りたい Figma ファイルに閲覧者として招待します（招待が無いと、トークンが正しくても読めません）。",
+          "そのファイルのURLを下の欄に貼って「追加」を押します。",
+          "追加したファイルは、画面名と Figma へのリンクが毎晩同期されます（画像は取り込まれません）。",
+        ],
         build: function (url, name) { return { op: "add-figma-file", url: url, name: name }; },
       }));
       used = true;
@@ -3740,156 +4532,6 @@ ${capabilityState.toString()}
     return used ? box : null;
   }
 
-  /**
-   * 会議の取り込みの案内。**操作ではなく条件を示す。**
-   *
-   * 取り込まれるには2つとも要る:
-   *   ① cortex-notetaker Bot が会議に招待されている（＝取り込む意思。これが同意のゲート）
-   *   ② 会議名が照合キーのどれかを含む（含まなければ、録れても案件に振り分けられない）
-   *
-   * ②の材料を画面が出さないと、招待したのに届かない理由が分からない。
-   */
-  function meetingHowTo() {
-    // **2つの条件がANDであることを、読み飛ばせない形で出す。** 散文で並べていたときに
-    // 「会議名は合っているのにBotを招待しておらず取り込まれなかった」事故が実際に起きた。
-    // 会議名の条件は上の行（ds-keys）が出すので、ここでは「上の語」と参照するに留める。
-    var wrap = el("div", { class: "sec-how" });
-    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: "会議名に上の目印が入っている" }));
-    wrap.appendChild(ul);
-    wrap.appendChild(el("p", { text: "どちらか一方だけでは取り込まれません。" }));
-    return wrap;
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Slack ワークスペースの接続（#104）
-   *
-   * 顧客のワークスペースを読み始める日の入口。押す → サーバが署名つきの承認リンクを
-   * 作って返す → そこへ遷移 → 顧客が Slack で承認 → 別の Lambda が受け取って棚に鍵を入れる。
-   *
-   * **リンクを静的に焼き込まない。** 承認リンクには「この案件へ書き込んでよい」という
-   * 10分間有効な署名（state）が載っている。HTML に埋めると、配信物を読める人（＝その案件の
-   * Basic 認証を通れる人）が期限のないリンクを手に入れることになるし、
-   * ビルド時点の state はどのみち期限切れで使えない。押した瞬間にサーバから貰う。
-   *
-   * **「トークン」という語を出さない。** 顧客に見せる画面なので、内部語ではなく
-   * 「接続する／読み取りたいチャンネルに招待する」で通す（内部語排除の原則の資格情報版）。
-   * ------------------------------------------------------------------------- */
-  function slackConnectBox() {
-    if (!SITE.intake) return null;
-    // **この項目を知らない古い fleet-status では何も出さない。** 「0件」と「知らない」を
-    // 同じ扱いにすると、engine が @v1 で止まっている案件に「まだ接続されていません」と
-    // 嘘を出すことになる（実際には社内ワークスペースで動いている）
-    var list = slackWorkspaces();
-    if (!list) return null;
-
-    var box = el("div", { class: "ds-addform", "data-adder": "slack-workspace" }, [
-      el("div", { class: "ds-addform-title", text: "お客様の Slack ワークスペースを接続" }),
-      el("p", {
-        class: "sec-how",
-        text:
-          "お客様の Slack ワークスペースのチャンネルを読み取り対象にするための接続です。" +
-          "ボタンを押すと Slack の承認画面が開きます（承認するのはワークスペースの管理者です）。" +
-          "お願いする権限は読み取りだけで、Cortex から投稿することはありません。" +
-          "接続したあと、読み取りたいチャンネルにボットを招待し、この画面から追加してください。",
-      }),
-      // **「これは何のためのものでないか」を書く（2026-08-18 の不具合報告）。**
-      // 社内ワークスペースのチャンネルが読めていない人が、設定する場所を探して
-      // ここへ来る。押すと社内ワークスペースの承認画面が出て必ず失敗し、
-      // 「もう一度お試しください」に従ってまた押す——何度試しても直らない。
-      //
-      // **箱そのものは消さない。** 直上の renderExternalAdders のコメントが警告している
-      // のと同じ失敗で、「顧客チャンネルがある案件だけ出す」にすると
-      // **新規案件（0件）＝一番繋ぎたい場面**でこの入口が消える。出したまま、
-      // 使う場面と使わない場面をここで言い切る
-      el("p", {
-        class: "sec-how ds-scope-note",
-        text:
-          "クラスメソッドの社内ワークスペース（Classmethod Group）のチャンネルには、この接続は使いません。" +
-          "社内のチャンネルは Cortex の中央ボットで読んでいるので、ここで接続しても読めるようにはなりません。" +
-          "社内のチャンネルが読めていない場合は、cortex の担当者にご連絡ください。",
-      }),
-    ]);
-
-    // 接続済みの一覧。**0件でも「まだありません」と書く**——空白だと、
-    // 一覧が出ていないのか繋がっていないのかが読めない
-    var listBox = el("div", { class: "ds-ws-list" });
-    if (!list.length) {
-      listBox.appendChild(el("div", { class: "ds-ws-empty", text: "接続済みのワークスペースはまだありません。" }));
-    } else {
-      list.forEach(function (w) {
-        var row = el("div", { class: "ds-ws" }, [
-          el("span", { class: "ds-ws-name", text: w.name || w.teamId }),
-          el("span", {
-            class: "ds-ws-count",
-            text: (w.channels || 0) + "チャンネル",
-          }),
-        ]);
-        // **revoked と missing を分けて出す。** 前者は「接続し直してください」、
-        // 後者は「まだ接続が完了していない」で、次の一手が違う。
-        // unknown（確かめられなかった回）には何も出さない——繋がっているのに
-        // 「接続し直して」と言う方が、黙っているより悪い。
-        // 注: ここは埋め込みJSのテンプレートリテラル内。**コメントでもバッククォートを使わない**
-        if (w.tokenState === "revoked") {
-          row.appendChild(el("span", {
-            class: "ds-gate ds-gate-warn",
-            text: "⚠️ 接続が切れています",
-            title: "Slack 側で Cortex のアプリが削除されたか、接続が無効になっています。もう一度接続してください。",
-          }));
-        } else if (w.tokenState === "missing") {
-          row.appendChild(el("span", {
-            class: "ds-gate ds-gate-warn",
-            text: "⚠️ 未接続",
-            title: "このワークスペースのチャンネルが登録されていますが、接続が見つかりません。もう一度接続してください。",
-          }));
-        } else if (w.tokenState === "ok") {
-          row.appendChild(el("span", { class: "ds-gate ds-gate-ok", text: "● 接続OK" }));
-        }
-        listBox.appendChild(row);
-      });
-    }
-    box.appendChild(listBox);
-
-    // **ボタン自身に「お客様の」と書く（2026-08-18 の不具合報告）。** 社内チャンネルが
-    // 読めていない人が押したのはこのボタンで、当時の文言は「Slack ワークスペースを接続」
-    // ——誰のワークスペースの話かが書かれておらず、唯一それらしいボタンに見えた
-    var btn = el("button", { class: "ds-toggle-btn", type: "button", text: "お客様の Slack ワークスペースを接続" });
-    var msg = el("div", { class: "ds-toggle-msg" });
-    btn.addEventListener("click", async function () {
-      var intake = SITE.intake;
-      if (!intake) return;
-      btn.disabled = true;
-      msg.className = "ds-toggle-msg";
-      msg.textContent = "承認画面を準備しています…";
-      try {
-        var pfx = intake.url + (intake.url.indexOf("?") === -1 ? "?" : "&");
-        var res = await fetch(pfx + "op=slack-oauth-start&t=" + encodeURIComponent(intake.token), {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: "{}",
-        });
-        var j = await res.json().catch(function () { return {}; });
-        if (!res.ok || !j.url) {
-          // サーバの文言をそのまま出す（未設定のときは「準備中です」が返る）
-          msg.className = "ds-toggle-msg is-error";
-          msg.textContent = "✗ " + (j.message || "接続を開始できませんでした。");
-          btn.disabled = false;
-          return;
-        }
-        // **同じタブで遷移する。** 別タブだと、承認後の「接続しました」を見た人が
-        // 元のタブに戻る動線を自分で見つけることになる
-        location.href = j.url;
-      } catch (e) {
-        msg.className = "ds-toggle-msg is-error";
-        msg.textContent = "✗ 接続を開始できませんでした。時間をおいて試してください。";
-        btn.disabled = false;
-      }
-    });
-    box.appendChild(el("div", { class: "ds-toggle" }, [btn, msg]));
-    return box;
-  }
 
   /**
    * 外部ソースの追加フォーム（Slack・GitHub）。
@@ -3925,8 +4567,21 @@ ${capabilityState.toString()}
       // **招待の話を先頭に置く。** Slack の仕様で、ボットは**公開チャンネルでも**招待されるまで
       // 中身を1件も読めない（conversations.history が not_in_channel を返す・2026-08-16 実測+公式ドキュメント）。
       // そのあとに「追加＝Gold 昇格の対象」を置く（手順と、その手順の重さ）。
-      hint: "先に Slack でそのチャンネルを開き、下のコマンドを貼って Cortex を招待してください。公開チャンネルでも招待が必要で、招待していないと中身を読めません。そのあと、チャンネル名を右クリック →「リンクをコピー」で出るURLを下に貼ります。追加したチャンネルは毎晩の Gold 昇格の対象になり、Decision・用語集の材料になります（読み取りを止めるには、追加した行の「登録を解除」を押します）。招待前に登録すると名前は「名前未取得」になるので、招待してから追加するのがおすすめです。",
-      copyText: "/invite @Cortex",
+      // **手順のリストにする（2026-08-20・オーナー指摘）。**
+      // 一続きの文章だと、読む人が「自分がいま何をすべきか」を自分で切り出すことになる。
+      //
+      // **接続（お客様の Slack への導入）の説明もここに置く。** 独立した節を
+      // 廃止したので、**繋ぎ方を知る場所はここしか無い**——
+      // 「0件の案件で入口が消える」という過去の事故（renderExternalAdders の
+      // 直上コメント）を、この手順が受け止めている。
+      hint: [
+        // **コマンドは手順1の中に置く。** フォームの下に離すと、どの手順のものか
+        // 対応が読めない（手で打たせない理由は copyRow のコメント）
+        { text: "読み取りたいチャンネルで、下のコマンドを貼って Cortex を招待します。公開チャンネルでも招待が必要です。", node: copyRow("/invite @Cortex") },
+        "下の欄に、そのチャンネルのリンクを貼って「追加」を押します（チャンネル名を右クリック →「リンクをコピー」）。",
+        "「組織不明」と出たら、そこにある「Slack ワークスペースに接続する」から承認をもらいます。お客様の Slack のチャンネルは、この承認が済むまで読めません（承認できるのはその Slack の管理者です）。",
+        "追加したチャンネルは毎晩の Gold 昇格の対象になり、Decision・用語集の材料になります。止めるときは、その行の「登録を解除」を押します。",
+      ],
       // **選んだワークスペースを送る（#104）。** 空文字＝社内ワークスペースなのでキーごと落とす
       // （サーバ側は「未宣言・null・空」を区別しない約束で、無いことで既定を表す）
       build: function (url, name, workspace) {
@@ -3934,7 +4589,6 @@ ${capabilityState.toString()}
         if (workspace) payload.workspace = workspace;
         return payload;
       },
-      workspacePicker: true,
       // **別案件でも使われていたときに出す確認（2026-08-20）。**
       //
       // **追加のときに出る唯一のモーダル。** 同日に「追加のたびの確認」を廃止した
@@ -3967,7 +4621,21 @@ ${capabilityState.toString()}
         placeholder: "owner/repo または https://github.com/owner/repo",
         namePlaceholder: "メモ（任意）",
         requiredNote: "リポジトリを入力してください。",
-        hint: "このリポジトリの Issues が、毎晩の Gold 昇格の材料になります。",
+        // **手順のリストにする（2026-08-20・Slack からの横展開）。**
+        //
+        // **App の導線をここに常設する（#138 の再発防止・唯一の防波堤）。**
+        // それまでは「組織ごとの接続状況」という独立した一覧の中にしか
+        // 導線が無く、**まだ何も繋いでいない案件＝一番 App を入れてほしい案件**の
+        // 画面に App へ行く道が1本も無かった（実機で踏んだ）。
+        //
+        // **行が0件でも、この手順は必ず出る**（追加フォームはグループの外にある）。
+        // 組織ごとの案内は行が無いと出ないので、**常設の正本はこちら**。
+        // 「案内側に導線があるから手順側は省く」とやると即再発する。
+        hint: [
+          { text: "読み取りたいリポジトリがある組織に、Cortex の GitHub App を入れます（Issues の読み取りだけ）。", node: appInstallLink() },
+          "そのリポジトリを下の欄に入れて「追加」を押します（owner/repo でも、GitHub のURLでも構いません）。",
+          "追加したリポジトリの Issues が、毎晩の Gold 昇格の材料になります。止めるときは、その行の「読み取りを止める」を押します。",
+        ],
         build: function (repo, name) { return { op: "add-github-source", repo: repo, name: name }; },
         adder: "github",
       }));
@@ -4279,6 +4947,31 @@ ${capabilityState.toString()}
    *     **これがある口では、その場の控え（「追加済み・反映中」）を出さない**——
    *     応答で本物の一覧が増えるので、控えを併記すると同じものが2回出る
    */
+  /**
+   * フォームの説明。**配列なら手順のリストにする（2026-08-20）。**
+   *
+   * オーナー指摘: 「もっと手続き的に、結局ユーザー自身が何をすればいいのかを
+   * わかるようにした方がいい。リスト形式でちゃんと並べてあげるとわかりやすい」。
+   * 一続きの文章は、読む人が「自分がいま何をすべきか」を自分で切り出すことになる。
+   *
+   * **文字列の口は今までどおり。** 他の4フォーム（共有資料・Figma・Backlog・GitHub）は
+   * まだ文章なので、そちらを壊さない。横展開でそれぞれ配列に変えていく。
+   *
+   * 各要素は文字列か、{ text, node } （手順の中に部品を挟むとき。招待コマンドなど）。
+   */
+  function hintNode(hint) {
+    if (!hint) return null;
+    if (!Array.isArray(hint)) return el("p", { class: "sec-how", text: hint });
+    var ol = el("ol", { class: "sec-how sec-steps" });
+    hint.forEach(function (step) {
+      var text = typeof step === "string" ? step : (step && step.text) || "";
+      var li = el("li", {}, [el("span", { text: text })]);
+      if (step && step.node) li.appendChild(step.node);
+      ol.appendChild(li);
+    });
+    return ol;
+  }
+
   function addForm(opts) {
     var main = el("input", { class: "sec-input", type: "text", placeholder: opts.placeholder, autocomplete: "off" });
     var name = opts.needsName
@@ -4293,15 +4986,13 @@ ${capabilityState.toString()}
     // ワークスペースの改名で変わるし、共有チャンネルでは貼った人のホストになる。
     // 推測して間違えると「追加できたのに読まれない」チャンネルができ、
     // 翌朝の接続状況で初めて分かる。人に選ばせる。
-    var wsList = opts.workspacePicker ? slackWorkspaces() || [] : [];
+    // **ワークスペースの選択は廃止した（2026-08-20）。**
+    // オーナーの受け入れテストで「意味が分からない」。実際、チャンネルIDを見ても
+    // どのワークスペースのものかは分からないし、**間違えると追加はできるのに
+    // 永久に読まれない**（気づくのは翌朝の接続状況）。
+    // いまはサーバが、持っている鍵を順に Slack へ投げて決める。
+    // **URLのホスト名から推測しない**という下の判断は今も正しい——推測ではなく実測にした。
     var wsSelect = null;
-    if (wsList.length) {
-      wsSelect = el("select", { class: "sec-input" });
-      wsSelect.appendChild(el("option", { value: "", text: "社内ワークスペース（クラスメソッド）" }));
-      wsList.forEach(function (w) {
-        wsSelect.appendChild(el("option", { value: w.teamId, text: w.name || w.teamId }));
-      });
-    }
     var submitLabel = opts.submitLabel || "追加";
     var btn = el("button", { class: "ds-toggle-btn", type: "button", text: submitLabel });
     var msg = el("div", { class: "ds-toggle-msg" });
@@ -4366,7 +5057,7 @@ ${capabilityState.toString()}
 
     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,
+      hintNode(opts.hint),
       // 手順の中に「どこかへ貼る文字列」があるときは、**手で打たせない**。
       // 「/invite @Cortex」のような短い文字列でも、打ち間違えると黙って失敗する
       opts.copyText ? copyRow(opts.copyText) : null,
@@ -4438,15 +5129,35 @@ ${capabilityState.toString()}
     // 行ごとに「対象です」と書いても情報が増えない。github の除外は行のトグル
     // （「読み取りを始める／止める」）が向きで示す。
     if (s.notify === true) badges.appendChild(el("span", { class: "badge ds-notify", text: "通知先" }));
-    // **どのワークスペースのチャンネルかを出す（#104）。** 同じチャンネル名が
-    // 2つのワークスペースに並びうるので、これが無いと「どっちの #general か」が読めない。
-    // 宣言なし（社内ワークスペース）には何も出さない——これまでどおりの見た目を保つ
-    if (s.type === "slack" && s.workspace) {
-      badges.appendChild(el("span", {
-        class: "badge ds-workspace",
-        text: workspaceLabel(s.workspace),
-        title: "接続した Slack ワークスペースのチャンネルです（読み取り専用の接続なので、通知は届きません）。",
-      }));
+    // **どのワークスペースのチャンネルかを、必ず行に出す（#104・2026-08-20 に社内も）。**
+    //
+    // 折りたたみの見出しでまとめるのをやめた（オーナー指摘「複雑になっちゃってる」）ので、
+    // **どの組織かを言うのは行のラベルだけ**になった。社内に何も出さないと、
+    // ラベルの無い行が「社内」なのか「まだ分かっていない」のかを読み分けられない。
+    if (s.type === "slack") {
+      // **順序は groupSlackByOrg と揃える（workspace が先）。**
+      // 逆にすると、判定が済んで workspace が入った行に古い印が残っているとき、
+      // **並びは「Hapio AI」なのにラベルだけ「組織が分かりません」**になる
+      // ——同じ画面で2つの判定が食い違う、このプロダクトが何度も直した形
+      if (s.workspace) {
+        badges.appendChild(el("span", {
+          class: "badge ds-workspace",
+          text: workspaceLabel(s.workspace),
+          title: "接続した Slack ワークスペースのチャンネルです（読み取り専用の接続なので、通知は届きません）。",
+        }));
+      } else if (s.orgUnknown === true) {
+        badges.appendChild(el("span", {
+          class: "badge ds-workspace ds-workspace-unknown",
+          text: "組織不明",
+          title: "どの Slack のチャンネルか、まだ分かっていません。上の案内をご覧ください。",
+        }));
+      } else {
+        badges.appendChild(el("span", {
+          class: "badge ds-workspace",
+          text: "クラスメソッド",
+          title: "クラスメソッドの社内 Slack のチャンネルです。",
+        }));
+      }
     }
     // 登録の由来（#118）。**「登録から削除」が出る/出ないの理由がこれ。** 導出されたリポは
     // 登録ファイルから消しても翌日また現れるので削除を出していないが、画面には
@@ -4456,6 +5167,30 @@ ${capabilityState.toString()}
     // ようになった（explicit には出さない）が、Slack で explicit なのは登録ファイルに
     // 直接書いた例外的な行だけで、バッジのために文面をもう一組増やすには釣り合わない。
     // #119 以降、新しいデータの github は必ず explicit（詳細は ORIGIN_LABEL）
+    // **どの組織のリポジトリかを行に出す（2026-08-20）。**
+    // 組織ごとの独立した一覧をやめたので、**組織を言うのは行のラベルだけ**になった。
+    // トークンは組織ごとにしか効かないので、これが判断の単位になる
+    if (String(s.type).indexOf("github") === 0 && s.ref) {
+      var ghOwner = String(s.ref).split("/")[0];
+      if (ghOwner) {
+        // **何で読んでいるかを添える。** 台帳に無ければ何も言わない。
+        //
+        // **添えるのは App のときだけ（2026-08-21・読み取りトークンの廃止で判断し直した）。**
+        // かつては「App／個人トークン」で直し方が違ったが、個人トークンは廃止した。
+        // いま App が付かない行は 「workflow」（ワークフロー自身のトークンで読めた＝
+        // だいたい公開リポジトリ）で、**読めている以上その人に直す作業は無い**。
+        // ここに「（ワークフローのトークン）」のような札を足すと、直しようのない
+        // 内部事情を全行に並べることになる——押す必要が無いものを説明する側の混雑。
+        // 一方 App の札は「この組織はもう繋いである」という**運用上の意味**を持つので残す。
+        var ghMeta = githubOwnerMeta(ghOwner);
+        var via = ghMeta && ghMeta.source === "app" ? "（GitHub App）" : "";
+        badges.appendChild(el("span", {
+          class: "badge ds-workspace" + (ghMeta && ghMeta.source === "unknown" ? " ds-workspace-unknown" : ""),
+          text: ghOwner + via,
+          title: "トークンは組織ごとにしか効きません（Fine-grained PAT も GitHub App のインストールトークンも1組織分）。",
+        }));
+      }
+    }
     if (String(s.type).indexOf("github") === 0 && ORIGIN_LABEL[s.origin]) {
       badges.appendChild(el("span", {
         class: "badge ds-origin",
@@ -4552,7 +5287,11 @@ ${capabilityState.toString()}
     // **origin === "explicit" でも出す。** 確認は読むだけで、どの登録ファイル由来かに
     // 関係なく効く（書き込みになる「表示名を更新する」だけが由来で出し分かれる）
     if (SITE.intake && s.type === "slack" && s.ref) {
-      card.appendChild(probeSection(s, card, gateEl));
+      var probe = probeSection(s, card, gateEl);
+      // **ボタンは行の中（「登録を解除」の隣）。** 独立した段を作ると1行が2段になる
+      card.appendChild(probe.btn);
+      // 押した結果の詳細だけを下に。**押すまでは空**なので行は伸びない
+      card.appendChild(probe.detail);
     }
     return card;
   }
@@ -4841,12 +5580,25 @@ ${capabilityState.toString()}
     ].concat(steps));
   }
 
-  /** 鍵の入力欄に出す説明。kind は Lambda 側（resolveSecretTarget）と綴りを合わせること */
+  /**
+   * 鍵の入力欄に出す説明。kind は Lambda 側（resolveSecretTarget）と綴りを合わせること。
+   *
+   * **発行の手順（how / note / selfServe.note）は <details> に畳む**
+   *（2026-08-21・オーナー指摘「カードが長すぎる」）。**文言は消していない**——
+   * 畳んだ中に全部残っており、summary を開けば読める。
+   * 畳まないのは .sec-state / .sec-preferred / .sec-input（secretCard 側の 🔴 コメント参照）。
+   *
+   * **「畳まない種別」の枝は置いていない。** 当初は fold: true の opt-in にしていたが、
+   * 2026-08-21 に external-sources（GitHub の読み取りトークン）が廃止され、
+   * **残る2種別が両方とも畳む=その枝が到達不能になった**。
+   * 到達不能な枝は**壊しても何も起きない**ので、変異検証の網から静かに漏れる
+   * ——このリポジトリが繰り返し踏んでいる形なので、枝ごと落とした。
+   * **畳んではいけない種別を足すときに、テストと一緒に枝を戻すこと。**
+   */
   var SECRET_FORMS = {
     "figma": {
       icon: "🎨",
       title: "Figma のトークン",
-      desc: "デザインの画面インベントリと、Figma に付いたコメント（指摘）を毎晩同期するために使います。",
       // **必要なスコープは実装が叩くAPIから決まる。** sync-designs は
       //   GET /v1/files/{key}          → file_content:read（画面インベントリ）
       //   GET /v1/files/{key}/comments → file_comments:read（指摘の同期）
@@ -4863,7 +5615,6 @@ ${capabilityState.toString()}
     "backlog": {
       icon: "📋",
       title: "Backlog のAPIキー",
-      desc: "課題・Wiki・ドキュメントを毎晩同期するために使います。",
       how: "Backlog → 個人設定 → API で発行（この案件のプロジェクトが見えるアカウントで）",
       // **案件の担当者が自分で繋ぐ。** 以前は艦隊共通の読み取りアカウントを1つ運用していたが、
       // 案件が増えるたびに「その1人がプロジェクトへ参加追加してキーを配る」ことになり、
@@ -4880,21 +5631,6 @@ ${capabilityState.toString()}
           "（前の担当者のアカウントが無効になると同期が止まります）。",
       },
     },
-    "external-sources": {
-      icon: "🐙",
-      title: "GitHub の読み取りトークン",
-      desc: "開発リポジトリの Issues / Discussions を読み、Gold の原料にするために使います。",
-      // **第一の案内は GitHub App（#138）。** 実装の本線は App のインストールトークンで、
-      // 個人トークンは App を入れられない組織のフォールバックでしかない（既存案件は
-      // すでに App で読めている）。画面が個人トークンを勧め続けると、発行と入れ直しが
-      // 要る側に人が流れ続け、**入れ直しの要らない仕組みへ移れない**。
-      // 順序を入れ替えるだけで、どちらも残す——App を入れられない組織は実在する。
-      appFirst: {
-        text: "まず、読み取りたいリポジトリのある組織に Cortex の GitHub App を入れてください。トークンの発行も、期限が来たときの入れ直しも要りません。",
-        linkText: "組織に GitHub App をインストール →",
-      },
-      how: "App を入れられない組織では、代わりにトークンを使います。GitHub → Settings → Developer settings → Personal access tokens で、対象リポジトリに Contents / Issues の Read-only を付けて発行",
-    },
   };
 
   /**
@@ -4907,27 +5643,53 @@ ${capabilityState.toString()}
    * カードは #101 で能力モーダルの中へ移した（buildDataSources の pushCap 経由）。
    * まとめて並べる renderSecrets() は呼び出し元が無くなったので消してある。
    */
-  function secretPayload(intake, kind, value) {
+  function secretPayload(intake, kind, value, cardSpace) {
     var body = { projectKey: intake.projectKey, kind: kind, value: value };
     if (kind === "backlog") {
-      var space = backlogSecretSpace();
+      // **カードが担当するスペースを最優先する（2026-08-20）。**
+      // 複数スペースのときは欄がスペースごとに分かれているので、
+      // どの棚へ入れるかは**そのカードが知っている**。
+      // 1枚だけのときは従来どおり（1つに定まるなら名乗る・定まらなければ名簿に倒す）
+      var space = cardSpace || backlogSecretSpace();
       if (space) body.space = space;
     }
     return body;
   }
 
-  function secretCard(kind, meta) {
+  /**
+   * @param opts { space, hideCurrent }
+   *   space … このカードが担当する Backlog スペース（複数スペースのときだけ）
+   *   hideCurrent … 「現在:」を出さない（スペース別の充足を表せないため）
+   */
+  function secretCard(kind, meta, opts) {
+    var cardSpace = (opts && opts.space) || "";
+    var hideCurrent = !!(opts && opts.hideCurrent);
     // **いま何で動いているか**を先に出す。入れ直したのに反映されていない状態が
     // 画面で分かるようにする（接続状況は夜間バッチのスナップショットなので、
     // 保存の直後は前日の値のまま。時刻は上の節に出している）。
+    // **複数スペースのときは出さない。** この値は種別ごとの1つで、
+    // スペース別の充足を表せない——1枚目に帰属させると嘘になる
     var src = (fleetVal("secretSources") || {})[kind] || "";
+    // **どのスペースの鍵かを見出しに出す。** 欄が2つ並ぶので、
+    // 見分けが付かないと「どちらに入れたか」が分からなくなる
+    var cardTitle = cardSpace ? meta.title + "（" + cardSpace + "）" : meta.title;
     // **前方一致で見る。** #105 の移行期は「Secrets Manager（旧名）」も来る。
     // 完全一致にすると、旧名で動いている案件だけが repo secret と同じ見た目になり、
     // 「管理下にあるのに未移行」という一番知りたい状態が画面から消える
-    var state = src
-      ? el("p", { class: "sec-state" + (src.indexOf("Secrets Manager") === 0 ? " is-managed" : ""),
-                  text: "現在: " + src + " から取得中" })
-      : el("p", { class: "sec-state is-none", text: "現在: 未設定" });
+    // **複数スペースのときは、何も出さない（2026-08-20）。**
+    // この値は種別ごとの1つで、スペース別の充足を表せない。
+    // 「未設定」に倒すのも嘘——**片方は入っているかもしれない**。
+    // 出さない代わりに、どちらの鍵かは見出し（スペース名）で示す
+    var state = hideCurrent
+      // **消えた理由を書く（レビュー指摘）。** 1スペースの案件では出ていた行が
+      // 黙って消えると、利用者は「入っているのか未設定なのか」も
+      // 「なぜ表示が無いのか」も知る手段が無い
+      ? el("p", { class: "sec-state is-none",
+                  text: "スペースごとの登録状況は、まだ表示できません（貼り直すと、このスペースの鍵として上書きされます）" })
+      : src
+        ? el("p", { class: "sec-state" + (src.indexOf("Secrets Manager") === 0 ? " is-managed" : ""),
+                    text: "現在: " + src + " から取得中" })
+        : el("p", { class: "sec-state is-none", text: "現在: 未設定" });
 
     var input = el("input", { class: "sec-input", type: "password", placeholder: "トークンを貼り付け", autocomplete: "off" });
     var btn = el("button", { class: "ds-toggle-btn", type: "button", text: "保存" });
@@ -4951,7 +5713,7 @@ ${capabilityState.toString()}
           // こちらが渡すのは「どのスペースの鍵か」という材料だけ。
           // **押した時点で読む。** 組み立て時に固めると、接続先を登録した直後に
           // 貼った鍵が「スペースを特定できません」で断られる
-          body: JSON.stringify(secretPayload(intake, kind, value)),
+          body: JSON.stringify(secretPayload(intake, kind, value, cardSpace)),
         });
         var j = await res.json().catch(function () { return {}; });
         if (!res.ok) {
@@ -4977,38 +5739,50 @@ ${capabilityState.toString()}
       }
     });
 
+    // 発行の手順ひとそろい。**<details> に畳む**（文言は消さない。畳んだ中に全部残る）
+    var guidance = [
+      el("p", { class: "sec-how", text: meta.how }),
+      // **鍵の作り方に付随する注意（招待漏れ等）。** 発行手順（how）とは別に出す——
+      // 「トークンは正しいのに読めない」は権限の問題に見えないので、切り分けに時間がかかる。
+      meta.note ? el("p", { class: "sec-how", text: meta.note }) : null,
+      meta.selfServe ? el("p", { class: "sec-how", text: meta.selfServe.note }) : null,
+    ].filter(Boolean);
+    // **「畳んである中に何があるか」を summary に書く。** ただの「詳細」だと、
+    // 発行のしかたを探している人がここを開く手掛かりを持てない（rt カードと同じ流儀）
+    var guidanceBox = el("details", { class: "sec-fold" }, [el("summary", { text: "発行のしかた" })]);
+    for (var gi = 0; gi < guidance.length; gi++) guidanceBox.appendChild(guidance[gi]);
+
     // ライブ取得後に「現在: …」だけを差し替えるための目印（カードごと作り直すと入力が消える）
+    //
+    // **並びは「状態 → 貼る → 畳んだ手順」。** カードを短く見せるために、
+    // いちばんよく使う操作（貼って保存）を上へ出し、長い説明を下へ送っている。
+    //
+    // 🔴 **.sec-state / .sec-preferred / .sec-input は <details> の外に置くこと。**
+    //   - .sec-state … 保存したのに反映されていない状態が分かる唯一の手段。
+    //     押すまで見えないと成立しない
+    //   - .sec-preferred … 「誰のアカウントで発行するのか」を**手順より先に**伝える行。
+    //     未設定のときだけ出る＝これから貼る人にだけ出るので、畳むと存在理由が消える
+    //   - .sec-input … 貼る欄そのもの。ライブ差し替えもこのノードを直接触る
     return el("div", { class: "ops-card", "data-secret-kind": kind }, [
       el("div", { class: "ops-card-head" }, [
         el("span", { class: "ops-card-icon", text: meta.icon }),
-        el("h3", { class: "ops-card-title", text: meta.title }),
+        el("h3", { class: "ops-card-title", text: cardTitle }),
       ]),
-      el("p", { class: "ops-card-desc", text: meta.desc }),
+      // **desc は無い種別がある（2026-08-21）。** el() は text をそのまま textContent へ
+      // 代入するので、無条件に出すと画面に文字列 undefined が出る
+      meta.desc ? el("p", { class: "ops-card-desc", text: meta.desc }) : null,
       state,
       // **未設定のときだけ、先に試すべき手を出す。** 既に動いているカードに
       // 「まずこれをやれ」と出すと、直す必要が無いものを触らせることになる
       !src && meta.selfServe ? el("p", { class: "sec-preferred", text: meta.selfServe.text }) : null,
-      // **本線（App）はトークンの手順より先に、いつでも出す（#138）。**
-      // トークンで動いている案件こそ App へ移してほしいので、selfServe と違って
-      // 「未設定のときだけ」にはしない
-      meta.appFirst
-        ? el("p", { class: "sec-preferred" }, [
-            document.createTextNode(meta.appFirst.text + " "),
-            el("a", { href: GITHUB_APP_INSTALL_URL, target: "_blank", rel: "noopener", text: meta.appFirst.linkText }),
-          ])
-        : null,
-      el("p", { class: "sec-how", text: meta.how }),
-      // **鍵の作り方に付随する注意（招待漏れ等）。** 発行手順（how）とは別に出す——
-      // 「トークンは正しいのに読めない」は権限の問題に見えないので、切り分けに時間がかかる。
-      meta.note ? el("p", { class: "sec-how", text: meta.note }) : null,
-      meta.selfServe ? el("p", { class: "sec-how", text: meta.selfServe.note }) : null,
       input,
+      el("div", { class: "ds-toggle" }, [btn, msg]),
+      guidanceBox,
       // **扱いの説明はカードに持たせる。** 節の見出しの下に置いていたときは、
       // #101 でカードだけがモーダルへ移り、説明だけが画面から消えた。
       // 顧客にトークンの貼り付けを求める画面で、貼った値がどう扱われるかの
       // 説明が落ちるのは、いちばん落としてはいけない種類の欠落
       el("p", { class: "sec-note", text: "入れた値はここには表示されません（保存だけできます）。保存先は案件ごとに分かれているので、他の案件には影響しません。" }),
-      el("div", { class: "ds-toggle" }, [btn, msg]),
     ]);
   }