@takagaki/cortex-decisions-viewer 0.4.24 → 0.4.25

package/dist/render.js

@@ -17,6 +17,8 @@ function renderSite(site) {
     // ※ 投入フォーム設定 site.intake は build.ts が --intake-url/--intake-token/--project-key から付与する。
     const dataJson = JSON.stringify(site).replace(/</g, "\\u003c");
     const safeTitle = escapeHtml(site.title);
+    // 接続マップ（操作タブ最上部のSVG図）。ビルド時に生成し<template>で埋め込む。fleet情報が無ければ出さない
+    const connMap = renderConnectionMap(site);
     const githubBtn = site.repoBaseUrl
         ? `<a class="gh-btn" href="${escapeHtml(site.repoBaseUrl)}" target="_blank" rel="noopener" title="コンテキストリポジトリをGitHubで開く">${GITHUB_ICON}</a>`
         : "";
@@ -45,7 +47,7 @@ function renderSite(site) {
 <footer class="site-footer">
   <span id="footer-meta"></span>
 </footer>
-<script type="application/json" id="site-data">${dataJson}</script>
+${connMap ? `<template id="conn-map">${connMap}</template>\n` : ""}<script type="application/json" id="site-data">${dataJson}</script>
 <script>${CLIENT_JS}</script>
 </body>
 </html>`;
@@ -58,6 +60,106 @@ function escapeHtml(s) {
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;");
 }
+/** 接続マップの能力定義（表示順・絵文字は詳細カードの流儀を踏襲） */
+const CM_CAPS = [
+    { cap: "課題管理", icon: "📋", pipe: /sync-backlog/ },
+    { cap: "会議", icon: "🎙", pipe: /ingest-minutes/ },
+    { cap: "共有資料", icon: "📁", pipe: /sync-materials/ },
+    { cap: "デザイン", icon: "🎨", pipe: /sync-designs|update-design-notes/ },
+    { cap: "チャット", icon: "💬", pipe: null },
+    { cap: "開発", icon: "🐙", pipe: null },
+];
+/** ツールid→表示名（接続マップのノードラベル用） */
+const CM_TOOL_LABEL = {
+    backlog: "Backlog",
+    jira: "Jira",
+    "google-meet": "Google Meet",
+    teams: "Teams",
+    "google-drive": "Google Drive",
+    box: "Box",
+    local: "ローカル",
+    figma: "Figma",
+    slack: "Slack",
+    github: "GitHub",
+};
+/**
+ * 接続マップ（データソースとの接続を視覚化したSVG）をビルド時に生成する。
+ * 上段に6アダプター（能力）ノード、下中央にリポジトリノード、間をベジェの破線で結ぶ。
+ * 状態: 健全=色付き＋流れるアニメーション / 問題あり=黄＋⚠️ / 未使用=グレー。
+ * fleet-status由来の情報が何も無ければ null（マップを出さない・後方互換）。
+ */
+function renderConnectionMap(site) {
+    const internals = site.internalSources ?? [];
+    const externals = site.externalSources ?? [];
+    const pipes = site.pipelines ?? [];
+    const tools = site.tools ?? {};
+    if (!internals.length && !externals.length && !pipes.length && !Object.keys(tools).length) {
+        return null;
+    }
+    const slackExts = externals.filter((s) => s.type === "slack");
+    const ghExts = externals.filter((s) => s.type.startsWith("github"));
+    const nodes = [];
+    const links = [];
+    const W = 960;
+    const REPO_X = W / 2;
+    CM_CAPS.forEach((c, i) => {
+        const cx = 80 + i * 160;
+        const toolVal = tools[c.cap];
+        const internal = internals.find((s) => s.kind === c.cap);
+        const isLive = c.cap === "チャット" || c.cap === "開発";
+        const liveExts = c.cap === "チャット" ? slackExts : c.cap === "開発" ? ghExts : [];
+        // 使用中か: tools宣言がnone以外 / internalSourceが存在(enabled:false除く) / ライブ参照の実体がある
+        const used = (toolVal != null && toolVal !== "none") ||
+            (internal != null && internal.enabled !== false) ||
+            (isLive && liveExts.length > 0);
+        const off = toolVal === "none" || internal?.enabled === false || !used;
+        // 問題あり: ライブ参照はgate≠okが1件以上、同期ソースは対応パイプラインの直近runがfailure
+        const warn = !off &&
+            (isLive
+                ? liveExts.some((s) => s.gate !== "ok")
+                : 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
+                : 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 = "";
+        if (off) {
+            sub = `<text class="cm-sync" x="${cx}" y="60" text-anchor="middle">未使用</text>`;
+        }
+        else if (isLive) {
+            sub = `<text class="cm-sync" x="${cx}" y="60" text-anchor="middle">ライブ参照</text>`;
+        }
+        else if (internal?.lastSync) {
+            sub = `<text class="cm-sync" x="${cx}" y="60" text-anchor="middle" data-ts="${escapeHtml(internal.lastSync)}"></text>`;
+        }
+        const badge = warn ? `<text class="cm-badge" x="${cx + 62}" y="26" 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>` +
+            sub +
+            badge +
+            `</g>`);
+        links.push(`<path class="cm-link ${state}" d="M ${cx} 72 C ${cx} 150, ${REPO_X} 160, ${REPO_X} 238"></path>`);
+    });
+    const repoTitle = site.title.length > 24 ? site.title.slice(0, 23) + "…" : site.title;
+    const repo = `<g class="cm-repo">` +
+        `<rect x="${REPO_X - 170}" y="240" width="340" height="52" rx="12"></rect>` +
+        `<text class="cm-repo-label" x="${REPO_X}" y="272" text-anchor="middle">📦 コンテキストリポジトリ（${escapeHtml(repoTitle)}）</text>` +
+        `</g>`;
+    return (`<svg class="cm-svg" viewBox="0 0 ${W} 312" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="データソースとの接続マップ">` +
+        links.join("") +
+        nodes.join("") +
+        repo +
+        `</svg>`);
+}
 const CSS = `
 :root {
   --bg: #f6f7f9;
@@ -360,6 +462,30 @@ a.ds-name:hover { text-decoration: underline; }
 .ds-group > .ds-list { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--border); }
 .badge.ds-sum-ok { background: #e9f7ef; color: #1f7a45; }
 .badge.ds-sum-warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
+/* ---- 接続マップ（操作タブ最上部のSVG図） ---- */
+.conn-map { overflow-x: auto; margin: 4px 0 20px; }
+.conn-map .cm-svg { display: block; min-width: 760px; width: 100%; height: auto; font-family: inherit; }
+.cm-node { cursor: pointer; outline: none; }
+.cm-node rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
+.cm-node:hover rect, .cm-node:focus rect { stroke: var(--accent); }
+.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-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-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; }
+.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; }
+@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; }
+.cm-repo-label { font-size: 14px; font-weight: 700; fill: #1e3a8a; }
 /* 未使用（非活性）行: アダプターとして存在するが、この案件では設定されていないもの */
 .ds-card.ds-inactive, .ds-pipe.ds-inactive { background: #f8f9fa; border-style: dashed; box-shadow: none; }
 .ds-inactive .ds-icon { filter: grayscale(1); opacity: .55; }
@@ -516,8 +642,11 @@ const CLIENT_JS = `
   if (SITE.graph && SITE.graph.nodes.length > 0) {
     TABS.push({ key: "graph", label: "ナレッジグラフ" });
   }
-  // Cortex自体を操作するアクションの受け皿（取り込み等）。今後この種の機能が増えたらここに集約する。
-  if (SITE.intake) {
+  // Cortex自体を操作するアクションと、接続・自動化の情報の受け皿（取り込み・接続マップ・データソース）。
+  // 投入フォーム設定 or fleet-status由来の接続情報のどちらかがあれば出す。
+  var HAS_FLEET = !!((SITE.internalSources || []).length || (SITE.externalSources || []).length ||
+    (SITE.pipelines || []).length || SITE.tools);
+  if (SITE.intake || HAS_FLEET) {
     TABS.push({ key: "ops", label: "操作" });
   }
 
@@ -700,7 +829,6 @@ const CLIENT_JS = `
     var homeBody = el("div", { class: "body" });
     app.appendChild(homeBody);
     loadBody(h, homeBody);
-    renderDataSources();
   }
 
   // ---------- データソースと自動化（fleet-status.json 由来。無ければ非表示） ----------
@@ -775,7 +903,8 @@ const CLIENT_JS = `
         if (inactive) {
           col.appendChild(el("span", { class: "ds-inactive-note", text: "未使用（この案件では設定されていません）" }));
         }
-        var card = el("div", { class: "ds-card" + (inactive ? " ds-inactive" : "") }, [
+        // id は接続マップのノードclickの飛び先（アンカー）
+        var card = el("div", { class: "ds-card" + (inactive ? " ds-inactive" : ""), id: "ds-" + (s.kind || "") }, [
           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 || "" }),
@@ -804,9 +933,15 @@ const CLIENT_JS = `
       var UNIT = { "slack": "チャンネル", "github-issues": "リポジトリ", "github-discussions": "リポジトリ" };
       var wrap = el("div", { class: "ds-list" });
       // チャット未使用: Slackグループの位置（先頭）に「存在するが未設定」のグレー行を出す
-      if (chatOff) wrap.appendChild(inactiveSourceRow("💬", "チャット"));
+      if (chatOff) wrap.appendChild(inactiveSourceRow("💬", "チャット", "ds-チャット"));
+      var chatAnchored = chatOff;
+      var devAnchored = devOff;
       groups.forEach(function (g) {
         var meta = DS_TYPE[g.type] || { icon: "🔗", label: g.type || "その他" };
+        // 接続マップのノードclickの飛び先（アンカー）。チャット=Slack群の先頭・開発=GitHub群の先頭
+        var anchorId = null;
+        if (g.type === "slack" && !chatAnchored) { anchorId = "ds-チャット"; chatAnchored = true; }
+        if (g.type.indexOf("github") === 0 && !devAnchored) { anchorId = "ds-開発"; devAnchored = true; }
         var cards = el("div", { class: "ds-list" });
         g.items.forEach(function (s) { cards.appendChild(extSourceCard(s, meta)); });
         if (g.items.length >= 4) {
@@ -819,13 +954,16 @@ const CLIENT_JS = `
               ? el("span", { class: "badge ds-sum-ok", text: "接続OK" })
               : el("span", { class: "badge ds-sum-warn", text: "⚠️ " + bad + "件に問題" }),
           ]);
-          wrap.appendChild(el("details", { class: "ds-group" }, [sum, cards]));
+          var det = el("details", { class: "ds-group" }, [sum, cards]);
+          if (anchorId) det.id = anchorId;
+          wrap.appendChild(det);
         } else {
+          if (anchorId && cards.firstChild) cards.firstChild.id = anchorId;
           while (cards.firstChild) wrap.appendChild(cards.firstChild);
         }
       });
       // 開発未使用: GitHubグループの位置（末尾）にグレー行を出す
-      if (devOff) wrap.appendChild(inactiveSourceRow("🐙", "GitHub"));
+      if (devOff) wrap.appendChild(inactiveSourceRow("🐙", "GitHub", "ds-開発"));
       sec.appendChild(wrap);
     }
 
@@ -859,8 +997,8 @@ const CLIENT_JS = `
     app.appendChild(sec);
   }
   // 未使用能力のプレースホルダ行（アダプターとして存在するが、この案件では設定されていないもの）
-  function inactiveSourceRow(icon, typeLabel) {
-    return el("div", { class: "ds-card ds-inactive" }, [
+  function inactiveSourceRow(icon, typeLabel, anchorId) {
+    return el("div", { class: "ds-card ds-inactive", id: anchorId }, [
       el("div", { class: "ds-card-main" }, [
         el("span", { class: "ds-icon", text: icon }),
         el("span", { class: "ds-type", text: typeLabel }),
@@ -887,14 +1025,39 @@ const CLIENT_JS = `
     ]);
   }
 
-  // ---------- 操作タブ（Cortex自体への操作。まずは取り込み。今後この受け皿に機能を足す） ----------
+  // ---------- 操作タブ（接続マップ・データソースと自動化・取り込み。今後この受け皿に機能を足す） ----------
   function renderOps() {
-    app.appendChild(el("p", { class: "ops-intro", text: "Cortex にコンテキストを取り込む操作です。ファイルを選ぶかテキストを貼って送信すると、自動で取り込まれます（数分で反映）。" }));
-    app.appendChild(el("div", { class: "section-label", text: "取り込み" }));
-    var grid = el("div", { class: "ops-grid" });
-    grid.appendChild(opsCard("🗒️", "会議の文字起こしを追加", "顧客主催の会議など、自動取り込みできない会議の文字起こしファイル（.txt / .docx 等）から議事録を生成します。", "transcript", "文字起こしを追加"));
-    grid.appendChild(opsCard("📎", "共有資料を追加", "提案書・仕様書・議事メモなどの資料を Markdown 化して 共有資料 に取り込みます。", "material", "資料を追加"));
-    app.appendChild(grid);
+    renderConnMap();
+    renderDataSources();
+    if (SITE.intake) {
+      app.appendChild(el("p", { class: "ops-intro", text: "Cortex にコンテキストを取り込む操作です。ファイルを選ぶかテキストを貼って送信すると、自動で取り込まれます（数分で反映）。" }));
+      app.appendChild(el("div", { class: "section-label", text: "取り込み" }));
+      var grid = el("div", { class: "ops-grid" });
+      grid.appendChild(opsCard("🗒️", "会議の文字起こしを追加", "顧客主催の会議など、自動取り込みできない会議の文字起こしファイル（.txt / .docx 等）から議事録を生成します。", "transcript", "文字起こしを追加"));
+      grid.appendChild(opsCard("📎", "共有資料を追加", "提案書・仕様書・議事メモなどの資料を Markdown 化して 共有資料 に取り込みます。", "material", "資料を追加"));
+      app.appendChild(grid);
+    }
+  }
+
+  // ---------- 接続マップ（ビルド時生成のSVGを<template>から取り出して表示） ----------
+  function renderConnMap() {
+    var tpl = document.getElementById("conn-map");
+    if (!tpl) return; // fleet情報が無い（旧fleet-status等）→ マップなし
+    var wrap = el("div", { class: "conn-map" });
+    wrap.appendChild(tpl.content.cloneNode(true));
+    // 最終同期の時刻はブラウザのローカルタイムで整形（詳細カードの表示と揃える）
+    wrap.querySelectorAll("[data-ts]").forEach(function (t) {
+      var s = dsFmtTime(t.getAttribute("data-ts"));
+      if (s) t.textContent = "最終同期 " + s;
+    });
+    // ノードclickで、下の該当詳細カード（アンカー）へスクロール
+    wrap.addEventListener("click", function (ev) {
+      var g = ev.target && ev.target.closest ? ev.target.closest("[data-target]") : null;
+      if (!g) return;
+      var target = document.getElementById(g.getAttribute("data-target"));
+      if (target && target.scrollIntoView) target.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+    app.appendChild(wrap);
   }
   function opsCard(icon, title, desc, kind, btnLabel) {
     var btn = el("button", { class: "ops-card-btn", text: "＋ " + btnLabel });

package/package.json

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