@takagaki/cortex-decisions-viewer 0.4.55 → 0.4.57

package/dist/render.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderSite = renderSite;
+exports.renderConnectionMap = renderConnectionMap;
 /** SiteDataを単一の自己完結HTML（埋め込みデータ+CSS+JS）にレンダリングする */
 function renderSite(site) {
     // </script> によるブレイクアウトを防ぐため < をエスケープして埋め込む
@@ -140,36 +141,99 @@ function renderConnectionMap(site) {
                 // マップが⚠️なのに直下のグループが「接続OK」という矛盾が同じ画面に出る。
                 ? liveExts.some((s) => sourceNeedsAttention(s))
                 : pipes.some((p) => c.pipe != null && c.pipe.test(p.id) && p.applicable !== false && p.lastConclusion === "failure"));
-        const state = off ? "cm-off" : warn ? "cm-warn" : "cm-ok";
-        const toolName = toolVal && toolVal !== "none"
-            ? CM_TOOL_LABEL[toolVal] ?? toolVal
-            : internal
-                ? CM_TOOL_LABEL[internal.tool] ?? internal.tool
+        // **宣言されているだけで、実際には何も繋がっていない**状態を分けて表す。
+        //
+        // 会議に 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";
+        // **ラベルは能力名（会議・課題管理…）。ツール名は下に小さく置く。**
+        // ツールは「その能力をいま何で実現しているか」という差し替え可能なアダプタで、
+        // 主語ではない。ツール名を主にすると、Teams のように複数の能力に使われるものが
+        // 同じ名前で並び（会議とチャットに Teams が2つ）、何が繋がっているのか読めなくなる。
+        // "none"（未使用の宣言）はツール名ではないので出さない。そのまま表示すると
+        // 「ツール: none」という読めない行になる（実際にそう出ていた）
+        const rawTool = toolVal && toolVal !== "none"
+            ? toolVal
+            : internal && internal.tool && internal.tool !== "none"
+                ? internal.tool
                 : isLive && liveExts.length
-                    ? CM_TOOL_LABEL[c.cap === "チャット" ? "slack" : "github"]
-                    : c.cap;
-        const label = `${c.icon} ${off && (toolVal === "none" || !toolName) ? c.cap : toolName}`;
-        // ノード下の補足: 未使用 / ライブ参照 / 最終同期（時刻はクライアントでローカルタイム整形するため data-ts で渡す）
-        let sub = "";
+                    ? c.cap === "チャット"
+                        ? "slack"
+                        : "github"
+                    : "";
+        const toolName = rawTool ? CM_TOOL_LABEL[rawTool] ?? rawTool : "";
+        const label = `${c.icon} ${c.cap}`;
+        // 2行目=ツール名（小さく）／3行目=状態（未使用・自動連携なし・ライブ参照・最終同期）
+        const toolLine = toolName
+            ? `<text class="cm-tool" x="${cx}" y="53" text-anchor="middle">${escapeHtml(toolName)}</text>`
+            : "";
+        let statusText = "";
+        let statusTs = "";
         if (off) {
-            sub = `<text class="cm-sync" x="${cx}" y="60" text-anchor="middle">未使用</text>`;
+            statusText = "未使用";
+        }
+        else if (idle) {
+            // **「未接続」と言い切る。** 「自動連携なし」だと運用でそう決めたようにも読めるが、
+            // 実際は「宣言はあるが、まだ一度も繋がっていない」——やることが残っている状態
+            statusText = "未接続";
         }
         else if (isLive) {
-            sub = `<text class="cm-sync" x="${cx}" y="60" text-anchor="middle">ライブ参照</text>`;
+            statusText = "ライブ参照";
         }
         else if (internal?.lastSync) {
-            sub = `<text class="cm-sync" x="${cx}" y="60" text-anchor="middle" data-ts="${escapeHtml(internal.lastSync)}"></text>`;
+            statusTs = internal.lastSync;
         }
-        const badge = warn ? `<text class="cm-badge" x="${cx + 62}" y="26" text-anchor="middle">⚠️</text>` : "";
+        // 時刻はクライアントでローカルタイム整形するため data-ts で渡す
+        const sub = statusText || statusTs
+            ? `<text class="cm-sync" x="${cx}" y="67" text-anchor="middle"` +
+                (statusTs ? ` data-ts="${escapeHtml(statusTs)}"` : "") +
+                `>${escapeHtml(statusText)}</text>`
+            : "";
+        const badge = warn ? `<text class="cm-badge" x="${cx + 62}" y="24" text-anchor="middle">⚠️</text>` : "";
         // クリックでページ内の該当詳細カード（アンカー）へスクロールする
         const anchor = `ds-${c.cap}`;
         nodes.push(`<g class="cm-node ${state}" data-target="${anchor}" tabindex="0" role="link" aria-label="${escapeHtml(c.cap)}の詳細へ">` +
-            `<rect x="${cx - 74}" y="16" width="148" height="54" rx="10"></rect>` +
-            `<text class="cm-label" x="${cx}" y="40" text-anchor="middle">${escapeHtml(label)}</text>` +
+            `<rect x="${cx - 74}" y="12" width="148" height="64" rx="10"></rect>` +
+            `<text class="cm-label" x="${cx}" y="35" text-anchor="middle">${escapeHtml(label)}</text>` +
+            toolLine +
             sub +
             badge +
             `</g>`);
-        links.push(`<path class="cm-link ${state}" d="M ${cx} 72 C ${cx} 150, ${REPO_X} 160, ${REPO_X} 238"></path>`);
+        // **線は「実際に繋がっていることが証明できたもの」だけに引く。**
+        // 未使用（cm-off）・宣言だけで実体が無いもの（cm-idle）からは線を出さない。
+        // 薄い線でも引いてしまうと、データが流れていない経路が流れているように読める——
+        // 実際、同期が一度も走っていない課題管理が、リポジトリと線で結ばれて見えていた。
+        //
+        // cm-warn は引く。**壊れているのは「繋がったうえで失敗している」状態**で、
+        // 経路自体は存在する（線を消すと、設定が無いのと区別が付かなくなる）。
+        if (state === "cm-ok" || state === "cm-warn") {
+            links.push(`<path class="cm-link ${state}" d="M ${cx} 78 C ${cx} 152, ${REPO_X} 162, ${REPO_X} 238"></path>`);
+        }
     });
     const repoTitle = site.title.length > 24 ? site.title.slice(0, 23) + "…" : site.title;
     const repo = `<g class="cm-repo">` +
@@ -719,17 +783,30 @@ a.ds-name:hover { text-decoration: underline; }
 .cm-node.cm-ok rect { stroke: var(--accent); }
 .cm-node.cm-warn rect { fill: #fffbeb; stroke: #fcd34d; }
 .cm-node.cm-off rect { fill: #f8f9fa; stroke: #d1d5db; stroke-dasharray: 4 3; }
+/* 宣言はあるが実体が繋がっていない。未使用（グレー）とも接続済み（青）とも違うことを見せる */
+.cm-node.cm-idle rect { fill: var(--surface); stroke: #cbd5e1; stroke-dasharray: 4 3; }
+.cm-node.cm-idle .cm-sync { fill: #b45309; }
 .cm-label { font-size: 13.5px; font-weight: 600; fill: var(--text); }
 .cm-node.cm-warn .cm-label { fill: #92400e; }
 .cm-node.cm-off .cm-label { fill: #9ca3af; }
 .cm-node.cm-off text { filter: grayscale(1); opacity: .8; }
+.cm-tool { font-size: 11px; fill: var(--muted); }
+.cm-node.cm-off .cm-tool { fill: #9ca3af; }
 .cm-sync { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
 .cm-node.cm-off .cm-sync { fill: #9ca3af; }
 .cm-badge { font-size: 13px; }
+/* 追加した直後にその場で見せる行。正式な一覧（スナップショット由来）に載るまでの繋ぎ */
+.ds-pending { margin-top: .5rem; display: flex; flex-direction: column; gap: .25rem; }
+.ds-pending-item { display: flex; align-items: center; gap: .5rem; font-size: .85rem;
+  padding: .35rem .6rem; border: 1px dashed var(--accent); border-radius: 6px; background: var(--accent-weak); }
+.ds-pending-mark { color: var(--accent); font-weight: 700; }
+.ds-pending-name { font-weight: 600; word-break: break-all; }
+.ds-pending-note { color: var(--muted); font-size: .78rem; margin-left: auto; white-space: nowrap; }
 .cm-link { fill: none; stroke-width: 1.6; stroke-dasharray: 6 6; stroke: #94a3b8; }
 .cm-link.cm-ok { stroke: var(--accent); animation: cm-flow 1.1s linear infinite; }
 .cm-link.cm-warn { stroke: #d97706; }
 .cm-link.cm-off { stroke: #d1d5db; opacity: .6; }
+.cm-link.cm-idle { stroke: #cbd5e1; opacity: .7; }
 @keyframes cm-flow { to { stroke-dashoffset: -24; } }
 @media (prefers-reduced-motion: reduce) { .cm-link.cm-ok { animation: none; } }
 .cm-repo rect { fill: var(--accent-weak); stroke: var(--accent); stroke-width: 1.5; }
@@ -1846,32 +1923,41 @@ const CLIENT_JS = `
     var tools = SITE.tools || {};
     var usable = function (cap, tool) { var v = tools[cap]; return !v || v === "none" || v === tool; };
 
-    if (usable("チャット", "slack")) {
-      box.appendChild(addForm({
-        title: "＋ Slackチャンネルを追加",
-        placeholder: "https://…slack.com/archives/C0XXXXXXX",
-        // **名前は任意。** URLにはIDしか入っていないので、サーバがSlackから引く。
-        // 人に入力させると打ち間違いがそのまま登録されるうえ、手間も増える。
-        // 別名を付けたいときだけ入れてもらう。
-        namePlaceholder: "表示名（省略するとSlackから取得します）",
-        requiredNote: "チャンネルのURLを入力してください。",
-        hint: "チャンネル名を右クリック →「リンクをコピー」で出るURLを貼ってください。追加しただけでは Gold 昇格には載りません（載せるには各チャンネルの「Gold昇格を始める」を押します）。cortex の Bot が入っていないチャンネルは名前を取得できません（「名前未取得」で登録され、Bot招待後にGold昇格をONにすると実名に変わります）。",
-        // **「Goldに載る」と書かない。** 追加だけでは載らないので嘘になる。
-        // 確認する理由は「中央Botで読みに行く」「他案件の取り違え」。
-        confirmLines: function (v) {
-          return [
-            "このチャンネルを、Cortex が読みに行く対象に追加します。",
-            "",
-            "貼ったURLがこの案件のものか、もう一度確認してください。",
-            "",
-            v,
-            "",
-            "追加しますか？",
-          ];
-        },
-        build: function (url, name) { return { op: "add-channel", url: url, name: name }; },
-      }));
-    }
+    // **Slack は tools 宣言で隠さない。** tools.チャット は能力ごとに1値しか持てないので、
+    // 「会議はTeams・連絡はSlack」という普通の構成を表せない。teams を宣言した案件では
+    // フォームごと消え、**Slackを渡されているのに追加できない**状態になっていた。
+    //
+    // 読む側（resolve-external-sources.mjs）も Slack の tools ゲートを外してある。
+    // Gold昇格の本来のゲートは**チャンネル単位の gold: true**（追加直後は未宣言＝読まれない。
+    // 上げたければ追加後にトグルを押す）。そこは変えていないので、宣言なしで顧客可視のGoldへ
+    // 流れることはない。
+    //
+    // 注: ここは埋め込みJSのテンプレートリテラル内。**コメントでもバッククォートを使わない**
+    //（リテラルが閉じて構文エラーになる。実際にそれで壊した）。
+    box.appendChild(addForm({
+      title: "＋ Slackチャンネルを追加",
+      placeholder: "https://…slack.com/archives/C0XXXXXXX",
+      // **名前は任意。** URLにはIDしか入っていないので、サーバがSlackから引く。
+      // 人に入力させると打ち間違いがそのまま登録されるうえ、手間も増える。
+      // 別名を付けたいときだけ入れてもらう。
+      namePlaceholder: "表示名（省略するとSlackから取得します）",
+      requiredNote: "チャンネルのURLを入力してください。",
+      hint: "チャンネル名を右クリック →「リンクをコピー」で出るURLを貼ってください。追加しただけでは Gold 昇格には載りません（載せるには各チャンネルの「Gold昇格を始める」を押します）。cortex の Bot が入っていないチャンネルは名前を取得できません（「名前未取得」で登録され、Bot招待後にGold昇格をONにすると実名に変わります）。",
+      // **「Goldに載る」と書かない。** 追加だけでは載らないので嘘になる。
+      // 確認する理由は「中央Botで読みに行く」「他案件の取り違え」。
+      confirmLines: function (v) {
+        return [
+          "このチャンネルを、Cortex が読みに行く対象に追加します。",
+          "",
+          "貼ったURLがこの案件のものか、もう一度確認してください。",
+          "",
+          v,
+          "",
+          "追加しますか？",
+        ];
+      },
+      build: function (url, name) { return { op: "add-channel", url: url, name: name }; },
+    }));
 
     if (usable("開発", "github")) {
       box.appendChild(addForm({
@@ -1938,8 +2024,20 @@ const CLIENT_JS = `
         msg.appendChild(document.createTextNode(" "));
         msg.appendChild(el("a", { href: j.runsUrl, target: "_blank", rel: "noopener", text: "実行状況を見る →" }));
       }
+      // **画面への反映も起きていることを伝える。** 一覧はスナップショットから描かれるので、
+      // 「保存した」だけでは「一覧が変わらない＝失敗した」と読まれる。
+      // 数分かかること・再読み込みで正式な一覧に載ることまで書く（黙っていると待てない）
+      // 反映にかかる時間はサーバの文言（reflectionNote）が言うので、ここでは繰り返さない。
+      // 二重に書くと同じ一文に同じ話が並ぶ
+      if (j.refreshUrl) {
+        msg.appendChild(document.createTextNode(" "));
+        msg.appendChild(el("a", { href: j.refreshUrl, target: "_blank", rel: "noopener", text: "反映の状況 →" }));
+      }
       btn.disabled = false;
-      if (onDone) onDone();
+      // **何も変わっていないなら「追加した」と見せない。** 既に同じものが入っていた場合
+      // サーバは 200 + changed:false を返す。ここを res.ok だけで判定すると
+      // 「変更はありません」と言いながら追加した行が出る
+      if (onDone && j.changed !== false) onDone();
     } catch (e) {
       msg.className = "ds-toggle-msg is-error";
       msg.textContent = "✗ 通信に失敗しました。";
@@ -2040,20 +2138,37 @@ const CLIENT_JS = `
         return;
       }
       if (opts.confirmLines && !confirmDanger(opts.confirmLines(main.value.trim()))) { msg.textContent = ""; return; }
-      var payload = opts.build(main.value.trim(), name ? name.value.trim() : "");
+      var added = main.value.trim();
+      var addedName = name ? name.value.trim() : "";
+      var payload = opts.build(added, addedName);
       sendConfig(payload, msg, btn, function () {
         // 追加できたら入力欄を空にする（同じものを二度押ししないように）
         main.value = "";
         if (name) name.value = "";
+        // **追加したものをその場に出す。** 上の一覧は fleet-status.json（夜間スナップショット）
+        // から描かれているので、追加してもその場では変わらない。何も変わらないと
+        // 「追加できていない」と読まれ、もう一度押して「既に登録されています」になる
+        // （実際にそうなった）。だから押した結果をここで見せる。
+        pending.appendChild(
+          el("div", { class: "ds-pending-item" }, [
+            el("span", { class: "ds-pending-mark", text: "＋" }),
+            el("span", { class: "ds-pending-name", text: addedName || added }),
+            el("span", { class: "ds-pending-note", text: "追加済み・反映中" }),
+          ]),
+        );
       });
     });
 
+    // このセッションで追加したものを並べる場所（リロードすると消える＝正式な一覧は上に出る）
+    var pending = el("div", { class: "ds-pending" });
+
     var box = el("div", { class: "ds-addform" }, [
       el("div", { class: "ds-addform-title", text: opts.title }),
       opts.hint ? el("p", { class: "sec-how", text: opts.hint }) : null,
       main,
       name,
       el("div", { class: "ds-toggle" }, [btn, msg]),
+      pending,
     ]);
     return box;
   }

package/package.json

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