@takagaki/cortex-decisions-viewer 0.4.8 → 0.4.10

package/dist/build.js

@@ -589,6 +589,197 @@ function buildGraph(decisions, home, sections, content, targetUrls, repoBaseUrl,
     });
     return { nodes: [...nodes.values()], edges: deduped };
 }
+/** 反発（O(n²)）。点が少ないうちはこれが最速。 */
+function repulseNaiveLayout(ps) {
+    for (let i = 0; i < ps.length; i++) {
+        for (let j = i + 1; j < ps.length; j++) {
+            const a = ps[i], b = ps[j];
+            const dx = b.x - a.x, dy = b.y - a.y;
+            const d2 = dx * dx + dy * dy + 0.01;
+            const f = 1800 / d2;
+            const d = Math.sqrt(d2);
+            const fx = (dx / d) * f, fy = (dy / d) * f;
+            a.vx -= fx;
+            a.vy -= fy;
+            b.vx += fx;
+            b.vy += fy;
+        }
+    }
+}
+/** 反発（Barnes-Hut・O(n log n)）。四分木で遠いノード群を重心1点に近似する。render.ts と同一アルゴリズム。 */
+function repulseBHLayout(ps) {
+    const nn = ps.length;
+    if (nn < 2)
+        return;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity, i;
+    for (i = 0; i < nn; i++) {
+        const p = ps[i];
+        if (p.x < minX)
+            minX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    const size = Math.max(maxX - minX, maxY - minY, 1) + 1;
+    const QX = [minX], QY = [minY], QS = [size], MASS = [0], CX = [0], CY = [0];
+    const C0 = [-1], C1 = [-1], C2 = [-1], C3 = [-1], BODY = [-1];
+    const nc = (x, y, s) => { QX.push(x); QY.push(y); QS.push(s); MASS.push(0); CX.push(0); CY.push(0); C0.push(-1); C1.push(-1); C2.push(-1); C3.push(-1); BODY.push(-1); return QX.length - 1; };
+    const childOf = (c, q) => q === 0 ? C0[c] : q === 1 ? C1[c] : q === 2 ? C2[c] : C3[c];
+    const setChild = (c, q, v) => { if (q === 0)
+        C0[c] = v;
+    else if (q === 1)
+        C1[c] = v;
+    else if (q === 2)
+        C2[c] = v;
+    else
+        C3[c] = v; };
+    const pushDown = (c, bi, depth) => {
+        const hx = QX[c] + QS[c] / 2, hy = QY[c] + QS[c] / 2;
+        const q = (ps[bi].x >= hx ? 1 : 0) + (ps[bi].y >= hy ? 2 : 0);
+        let ch = childOf(c, q);
+        if (ch === -1) {
+            const s = QS[c] / 2;
+            ch = nc(QX[c] + ((q & 1) ? s : 0), QY[c] + ((q & 2) ? s : 0), s);
+            setChild(c, q, ch);
+        }
+        insert(ch, bi, depth + 1);
+    };
+    const insert = (c, bi, depth) => {
+        const x = ps[bi].x, y = ps[bi].y;
+        if (MASS[c] === 0) {
+            CX[c] = x;
+            CY[c] = y;
+        }
+        else {
+            CX[c] = (CX[c] * MASS[c] + x) / (MASS[c] + 1);
+            CY[c] = (CY[c] * MASS[c] + y) / (MASS[c] + 1);
+        }
+        if (MASS[c] === 0 && BODY[c] === -1) {
+            BODY[c] = bi;
+            MASS[c] = 1;
+            return;
+        }
+        MASS[c]++;
+        if (depth >= 24)
+            return;
+        if (BODY[c] !== -2) {
+            const old = BODY[c];
+            BODY[c] = -2;
+            pushDown(c, old, depth);
+        }
+        pushDown(c, bi, depth);
+    };
+    for (i = 0; i < nn; i++)
+        insert(0, i, 0);
+    const theta2 = 1.0;
+    for (i = 0; i < nn; i++) {
+        const p = ps[i];
+        const stack = [0];
+        while (stack.length) {
+            const c = stack.pop();
+            if (MASS[c] === 0)
+                continue;
+            if (BODY[c] === i && MASS[c] === 1)
+                continue;
+            const dx = CX[c] - p.x, dy = CY[c] - p.y;
+            const d2 = dx * dx + dy * dy + 0.01;
+            if (BODY[c] !== -2 || QS[c] * QS[c] < theta2 * d2) {
+                const f = 1800 * MASS[c] / d2;
+                const d = Math.sqrt(d2);
+                p.vx -= dx / d * f;
+                p.vy -= dy / d * f;
+            }
+            else {
+                if (C0[c] !== -1)
+                    stack.push(C0[c]);
+                if (C1[c] !== -1)
+                    stack.push(C1[c]);
+                if (C2[c] !== -1)
+                    stack.push(C2[c]);
+                if (C3[c] !== -1)
+                    stack.push(C3[c]);
+            }
+        }
+    }
+}
+/**
+ * グラフのレイアウト座標をビルド時に1回だけ計算し、各ノードに x/y を書き込む。
+ * クライアント（render.ts startGraph）と同一の力学を回すので、ブラウザはこれを初期位置に使い
+ * ウォームアップを省略できる＝開いた瞬間ゼロ待ち。描画対象（recordId or 辺に接続）のみ計算する。
+ */
+function computeLayout(graph) {
+    const used = new Set();
+    for (const e of graph.edges) {
+        used.add(e.from);
+        used.add(e.to);
+    }
+    const ns = graph.nodes.filter((n) => n.recordId || used.has(n.id));
+    const N = ns.length;
+    if (N === 0)
+        return;
+    const ps = ns.map(() => ({ x: 0, y: 0, vx: 0, vy: 0 }));
+    const isRec = ns.map((n) => !!n.recordId);
+    const byId = new Map();
+    ns.forEach((n, i) => byId.set(n.id, i));
+    const RING = Math.max(200, 26 * Math.sqrt(N));
+    for (let i = 0; i < N; i++) {
+        const a = (i / N) * Math.PI * 2;
+        const r = isRec[i] ? 60 : RING;
+        ps[i].x = Math.cos(a) * r + (i % 7) * 3;
+        ps[i].y = Math.sin(a) * r + (i % 5) * 3;
+    }
+    const es = [];
+    for (const e of graph.edges) {
+        const a = byId.get(e.from), b = byId.get(e.to);
+        if (a !== undefined && b !== undefined && a !== b)
+            es.push([a, b]);
+    }
+    const big = N >= 900;
+    let alpha = 1;
+    for (let t = 0; t < 450; t++) {
+        if (big)
+            repulseBHLayout(ps);
+        else
+            repulseNaiveLayout(ps);
+        for (const [ai, bi] of es) {
+            const a = ps[ai], b = ps[bi];
+            const dx = b.x - a.x, dy = b.y - a.y;
+            const d = Math.sqrt(dx * dx + dy * dy) + 0.01;
+            const f = (d - 90) * 0.02;
+            const fx = (dx / d) * f, fy = (dy / d) * f;
+            a.vx += fx;
+            a.vy += fy;
+            b.vx -= fx;
+            b.vy -= fy;
+        }
+        for (let i = 0; i < N; i++) {
+            const p = ps[i];
+            if (isRec[i]) {
+                p.vx -= p.x * 0.012;
+                p.vy -= p.y * 0.012;
+            }
+            else {
+                const r = Math.sqrt(p.x * p.x + p.y * p.y) + 0.01;
+                const rf = (r - RING) * 0.012;
+                p.vx -= (p.x / r) * rf;
+                p.vy -= (p.y / r) * rf;
+            }
+            p.vx *= 0.85;
+            p.vy *= 0.85;
+            p.x += p.vx * alpha;
+            p.y += p.vy * alpha;
+        }
+        if (alpha > 0.003)
+            alpha *= 0.995;
+    }
+    for (let i = 0; i < N; i++) {
+        ns[i].x = Math.round(ps[i].x);
+        ns[i].y = Math.round(ps[i].y);
+    }
+}
 /**
  * 各レコードの bodyHtml を out/bodies/<i>.html に書き出し、bodyRef にパスを設定して
  * inlineデータ上の bodyHtml を空にする（初期ロードのpayloadから本文を外す）。
@@ -672,6 +863,7 @@ async function build(opts) {
         : new Map();
     const contentEntries = await scanContent(repoRoot, knowledgeRoot ? path.basename(knowledgeRoot) : null, repo.baseUrl, repo.branch);
     const graph = buildGraph(decisions, home, sections, contentEntries, targetUrls, repo.baseUrl, repo.branch);
+    computeLayout(graph); // 各ノードに x/y を書き込む（クライアントはこれを初期位置に使いウォームアップ省略）
     const site = {
         title: opts.title,
         generatedAt: opts.generatedAt,

package/dist/render.js

@@ -4,11 +4,29 @@ exports.renderSite = renderSite;
 /** SiteDataを単一の自己完結HTML（埋め込みデータ+CSS+JS）にレンダリングする */
 function renderSite(site) {
     // </script> によるブレイクアウトを防ぐため < をエスケープして埋め込む
+    // Claude Code Web ディープリンク（この案件リポ＋狙ったプロンプトで開く）。repoBaseUrl から slug を導出（追加入力なし）。
+    const repoSlug = site.repoBaseUrl
+        ? site.repoBaseUrl
+            .replace(/^https?:\/\/github\.com\//, "")
+            .replace(/\.git$/, "")
+        : "";
+    const codeUrl = (prompt) => repoSlug
+        ? `https://claude.ai/code?repo=${repoSlug}&prompt=${encodeURIComponent(prompt)}`
+        : "https://claude.ai/code/";
+    const askUrl = codeUrl("このプロジェクトについて、Cortex/Home.md と最近の Decision を読んだうえで、直近の状況・主要な決定・進行中の論点を教えてください。");
+    // 「操作」タブの取り込みアクション。repo が解決できた案件だけ出す（リポ書き込み権を持つ人＝CM社員や招待済み顧客が使える）。
+    if (repoSlug) {
+        site.intake = {
+            transcript: codeUrl("会議の文字起こしを取り込みます。まず 会議/README.md（無ければ MTG/README.md 等の会議ディレクトリのREADME）と 会議/templates/minute-template.md を読んでください。次のメッセージで、ダウンロードした文字起こしファイル（.txt / .docx 等）を添付するので、その内容を読み、テンプレートの様式に従って議事録を生成し、文字起こし原本と議事録を会議ディレクトリの規約どおりの場所にコミットしてください。/post-meeting や /create-minute スラッシュコマンドが使えるならそれを使ってよいですが、使えなくても手動で作成して構いません。議事録に frontmatter は付けないでください。"),
+            material: codeUrl("共有資料を取り込みます。まず 共有資料/README.md を読んでください。次のメッセージで資料（テキストまたはファイル）を渡すので、それを Markdown 化して 共有資料/{資料名}/{資料名}.md に配置し、元ファイルも同じディレクトリに残してコミットしてください（PDF・PPT は中身を読み、図表も文章で説明して Markdown 化する）。/sync-materials スラッシュコマンドが使えるならそれを使ってよいですが、使えなくても手動で構いません。frontmatter は付けないでください。"),
+        };
+    }
     const dataJson = JSON.stringify(site).replace(/</g, "\\u003c");
     const safeTitle = escapeHtml(site.title);
     const githubBtn = site.repoBaseUrl
         ? `<a class="gh-btn" href="${escapeHtml(site.repoBaseUrl)}" target="_blank" rel="noopener" title="コンテキストリポジトリをGitHubで開く">${GITHUB_ICON}</a>`
         : "";
+    const askBtn = `<a class="ask-ai-btn" href="${escapeHtml(askUrl)}" target="_blank" rel="noopener" title="Claude Code Web でこの案件のリポジトリを開き、プロジェクトについて質問・調査できます">💬 プロジェクトについてAIに聞く</a>`;
     return `<!DOCTYPE html>
 <html lang="ja">
 <head>
@@ -25,8 +43,7 @@ function renderSite(site) {
 <header class="site-header">
   <div class="header-inner">
     <a class="site-title" href="?" id="home-link">${safeTitle}</a>
-    <a class="ask-ai-btn" href="https://claude.ai/code/" target="_blank" rel="noopener"
-       title="Claude Codeでこのプロジェクトのリポジトリを選択すると、全コンテキストに対してAIに質問・調査ができます">💬 プロジェクトについてAIに聞く</a>
+    ${askBtn}
     ${githubBtn}
   </div>
 </header>
@@ -313,6 +330,23 @@ a:hover { text-decoration: underline; }
 }
 .edit-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
 .section-label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin: 24px 0 8px; }
+/* ---- 操作タブ ---- */
+.ops-intro { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 4px 0 8px; }
+.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
+.ops-card {
+  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
+  padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
+}
+.ops-card-head { display: flex; align-items: center; gap: 10px; }
+.ops-card-icon { font-size: 22px; line-height: 1; }
+.ops-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
+.ops-card-desc { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; flex: 1 1 auto; }
+.ops-card-btn {
+  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
+  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--accent);
+  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
+}
+.ops-card-btn:hover { background: #1d4ed8; text-decoration: none; }
 .summary-box { background: var(--accent-weak); border: 1px solid #dce6fb; border-radius: var(--radius); padding: 12px 16px; color: #1e3a8a; }
 .deciders { display: flex; flex-wrap: wrap; gap: 8px; }
 .refs { margin: 0; padding-left: 18px; }
@@ -380,6 +414,10 @@ const CLIENT_JS = `
   if (SITE.graph && SITE.graph.nodes.length > 0) {
     TABS.push({ key: "graph", label: "ナレッジグラフ" });
   }
+  // Cortex自体を操作するアクションの受け皿（取り込み等）。今後この種の機能が増えたらここに集約する。
+  if (SITE.intake) {
+    TABS.push({ key: "ops", label: "操作" });
+  }
 
   var app = document.getElementById("app");
   // ウィキリンク（本文中の [[用語]]）クリックでSPA内遷移する
@@ -526,6 +564,7 @@ const CLIENT_JS = `
     if (listState.tab === "home") { renderHome(); return; }
     if (listState.tab === "decisions") { renderDecisionList(); return; }
     if (listState.tab === "graph") { renderKnowledge(); return; }
+    if (listState.tab === "ops") { renderOps(); return; }
     renderGenericList();
   }
 
@@ -561,6 +600,29 @@ const CLIENT_JS = `
     loadBody(h, homeBody);
   }
 
+  // ---------- 操作タブ（Cortex自体への操作。まずは取り込み。今後この受け皿に機能を足す） ----------
+  function renderOps() {
+    var intake = SITE.intake;
+    app.appendChild(el("p", { class: "ops-intro", text: "Cortex にコンテキストを取り込む操作です。ボタンを押すと Claude Code Web がこの案件のリポジトリで開くので、内容を貼る／渡すと議事録化・Markdown化してコミットまで行います。" }));
+    app.appendChild(el("div", { class: "section-label", text: "取り込み" }));
+    var grid = el("div", { class: "ops-grid" });
+    if (intake) {
+      grid.appendChild(opsCard("🗒️", "会議の文字起こしを追加", "顧客主催の会議など、自動取り込みできない会議の文字起こしファイル（.txt / .docx 等）を添付して議事録を生成します。", intake.transcript, "文字起こしを追加"));
+      grid.appendChild(opsCard("📎", "共有資料を追加", "提案書・仕様書・議事メモなどの資料を渡して Markdown 化し、共有資料に取り込みます。", intake.material, "資料を追加"));
+    }
+    app.appendChild(grid);
+  }
+  function opsCard(icon, title, desc, url, btnLabel) {
+    return el("div", { class: "ops-card" }, [
+      el("div", { class: "ops-card-head" }, [
+        el("span", { class: "ops-card-icon", text: icon }),
+        el("h3", { class: "ops-card-title", text: title }),
+      ]),
+      el("p", { class: "ops-card-desc", text: desc }),
+      el("a", { class: "ops-card-btn", href: url, target: "_blank", rel: "noopener", text: "＋ " + btnLabel }),
+    ]);
+  }
+
   // ---------- Decisions一覧（フィルタ付き） ----------
   function renderDecisionList() {
     // 既存案件・移行案件は導入前/移行前の意思決定が揃わないため、その旨を最初に注記する
@@ -828,21 +890,27 @@ const CLIENT_JS = `
     // 弱い辺を消したとき、レコード以外の孤立ノードは隠す
     var used = {};
     allEdges.forEach(function (e) { used[e.from] = true; used[e.to] = true; });
+    // ビルド時に算出済みの座標（n.x/n.y）があればそれを使う＝ウォームアップ不要で開いた瞬間に整列済み。
+    var preLaidOut = SITE.graph.nodes.some(function (n) { return typeof n.x === "number"; });
     var nodes = SITE.graph.nodes
       .filter(function (n) { return n.recordId || used[n.id]; })
       .map(function (n, i) {
         return { id: n.id, label: n.label, group: n.group, recordId: n.recordId, url: n.url,
-                 x: 0, y: 0, vx: 0, vy: 0, phase: i * 2.399 };
+                 x: typeof n.x === "number" ? n.x : 0, y: typeof n.y === "number" ? n.y : 0,
+                 vx: 0, vy: 0, phase: i * 2.399 };
       });
     // Gold層を中心に据え、グレーのコンテキストはその外周に配置する（ハブ&スポーク）
     var RING = Math.max(200, 26 * Math.sqrt(nodes.length));
     var byNode = {};
     nodes.forEach(function (n, i) {
       byNode[n.id] = n;
-      var angle = (i / nodes.length) * Math.PI * 2;
-      var r = n.recordId ? 60 : RING;
-      n.x = Math.cos(angle) * r + (i % 7) * 3;
-      n.y = Math.sin(angle) * r + (i % 5) * 3;
+      // 計算済み座標が無い場合のみ、円状の初期配置を与える（フォールバック）
+      if (!preLaidOut) {
+        var angle = (i / nodes.length) * Math.PI * 2;
+        var r = n.recordId ? 60 : RING;
+        n.x = Math.cos(angle) * r + (i % 7) * 3;
+        n.y = Math.sin(angle) * r + (i % 5) * 3;
+      }
     });
     var edges = allEdges
       .filter(function (e) { return byNode[e.from] && byNode[e.to]; })
@@ -1332,11 +1400,15 @@ const CLIENT_JS = `
       view.scale *= factor;
     }, { passive: false });
 
-    // 初回表示前にシミュレーションを裏で十分回し、整列済みの静かな状態で開く
-    // （ロード時のガタガタ揺れを無くす）。光のイントロは下で introStart を打ち直してから始める。
-    for (var warm = 0; warm < 320 && alpha > 0.06; warm++) tick();
-    alpha = Math.min(alpha, 0.05); // 残りの揺れも最小化（落ち着いた状態で開始）
-    applyFit(true); // 整定後の全ノードが収まるよう、開いた瞬間からフレーミングしておく
+    // ビルド時に座標計算済みなら、ウォームアップ（重い同期計算）を完全に省略する＝開いた瞬間ゼロ待ち。
+    // 計算済みが無い場合のみ、従来どおり裏で320回回して整列済みの静かな状態で開く。
+    if (preLaidOut) {
+      alpha = 0.002; // 既に整定済み。ループ側の物理計算(tick)を即停止させる（ドラッグ時のみ再開）
+    } else {
+      for (var warm = 0; warm < 320 && alpha > 0.06; warm++) tick();
+      alpha = Math.min(alpha, 0.05); // 残りの揺れも最小化（落ち着いた状態で開始）
+    }
+    applyFit(true); // 全ノードが収まるよう、開いた瞬間からフレーミングしておく
     if (!reduceMotion) introStart = performance.now(); // プリウォーム後を起点にして光の波を出す
 
     var running = true;

package/package.json

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