@takagaki/cortex-decisions-viewer 0.4.26 → 0.4.28

package/dist/render.js

@@ -19,6 +19,8 @@ function renderSite(site) {
     const safeTitle = escapeHtml(site.title);
     // 接続マップ（操作タブ最上部のSVG図）。ビルド時に生成し<template>で埋め込む。fleet情報が無ければ出さない
     const connMap = renderConnectionMap(site);
+    // チュートリアル（「はじめに」タブ）。ボタンURLは既存の codeUrl を流用し、案件データ由来の値だけビルド時に埋める
+    const tutorialJson = JSON.stringify(buildTutorialData(site, codeUrl, repoSlug)).replace(/</g, "\\u003c");
     const githubBtn = site.repoBaseUrl
         ? `<a class="gh-btn" href="${escapeHtml(site.repoBaseUrl)}" target="_blank" rel="noopener" title="コンテキストリポジトリをGitHubで開く">${GITHUB_ICON}</a>`
         : "";
@@ -47,7 +49,8 @@ function renderSite(site) {
 <footer class="site-footer">
   <span id="footer-meta"></span>
 </footer>
-${connMap ? `<template id="conn-map">${connMap}</template>\n` : ""}<script type="application/json" id="site-data">${dataJson}</script>
+${connMap ? `<template id="conn-map">${connMap}</template>\n` : ""}<script type="application/json" id="tutorial-data">${tutorialJson}</script>
+<script type="application/json" id="site-data">${dataJson}</script>
 <script>${CLIENT_JS}</script>
 </body>
 </html>`;
@@ -160,6 +163,69 @@ function renderConnectionMap(site) {
         repo +
         `</svg>`);
 }
+/**
+ * 「はじめに」タブのチュートリアルデータをビルド時に生成する。
+ * 各チャレンジのプロンプトは固定文（ビューアコードに実案件名は残さない）。
+ * チャレンジ4だけは site.decisions から根拠付きの最新決定を選び、そのtitle/idを埋め込む。
+ */
+function buildTutorialData(site, codeUrl, repoSlug) {
+    const c4 = tutorialChallenge4Prompt(site.decisions);
+    const specs = [
+        {
+            title: "全体像を知る",
+            desc: "プロジェクトの目的と現在地を掴む",
+            prompt: "このプロジェクトの全体像——目的・現状・主要な論点——を、蓄積されたコンテキストをもとに教えてください。",
+        },
+        {
+            title: "関係者を知る",
+            desc: "誰が何を担っているか",
+            prompt: "このプロジェクトの関係者（社内・顧客・関係会社）と、それぞれの役割を教えてください。",
+        },
+        {
+            title: "ドメインを可視化する",
+            desc: "案件の概念と関係を図にする",
+            prompt: "このプロジェクトの主要なドメイン概念（用語集）と、それらの関係性を mermaid 図で可視化してください。",
+        },
+        {
+            title: "決定の経緯を辿る",
+            desc: "なぜそう決まったかを根拠まで遡る",
+            prompt: c4,
+        },
+        {
+            title: "最近の動きを掴む",
+            desc: "直近のキャッチアップ",
+            prompt: "直近2週間の主要な動き・論点・未解決事項を、議事録や決定記録を横断してまとめてください。",
+        },
+    ];
+    return {
+        slug: repoSlug,
+        challenges: specs.map((s, i) => ({
+            n: i + 1,
+            title: s.title,
+            desc: s.desc,
+            url: codeUrl(s.prompt),
+        })),
+    };
+}
+/**
+ * チャレンジ4のプロンプトを決める。
+ * based_on を1件以上持つ決定のうちID最新 → 無ければ最新決定 → 決定ゼロなら汎用文。
+ * IDは YYYYMMDD-NNN 形式で文字列降順が新しい順。
+ */
+function tutorialChallenge4Prompt(decisions) {
+    const generic = "このプロジェクトの重要な決定を1つ選び、なぜそう決まったのか、根拠になった会議や課題まで遡って経緯を説明してください。";
+    if (!decisions || !decisions.length)
+        return generic;
+    const byIdDesc = (a, b) => (a.id < b.id ? 1 : a.id > b.id ? -1 : 0);
+    const withBasedOn = decisions
+        .filter((d) => (d.relations ?? []).some((r) => r.rel === "based_on"))
+        .sort(byIdDesc);
+    const picked = withBasedOn[0] ?? [...decisions].sort(byIdDesc)[0];
+    if (!picked)
+        return generic;
+    return (`このプロジェクトの決定「${picked.title}」（${picked.id}）について、なぜこの結論に至ったのか、` +
+        "根拠になった会議や課題まで遡って経緯を説明してください。関連する未解決の論点があれば併せて教えてください。");
+}
 const CSS = `
 :root {
   --bg: #f6f7f9;
@@ -426,6 +492,38 @@ 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; }
+/* ---- はじめに（チュートリアル） ---- */
+.tut-intro { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 2px 0 6px; }
+.tut-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 8px 0 16px; }
+.tut-progress { font-size: 13px; font-weight: 700; color: var(--text); }
+.tut-progress-bar { flex: 1 1 180px; height: 8px; border-radius: 999px; background: #e6eaf0; overflow: hidden; min-width: 120px; }
+.tut-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s ease; }
+.tut-celebrate { font-size: 13.5px; font-weight: 700; color: #1f7a45; }
+.tut-list { display: flex; flex-direction: column; gap: 12px; }
+.tut-card {
+  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
+  padding: 16px 18px; box-shadow: var(--shadow); display: flex; align-items: flex-start; gap: 14px;
+}
+.tut-card.tut-done { border-color: #a7f3d0; background: #f4fdf8; }
+.tut-num {
+  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-weak);
+  color: var(--accent); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
+}
+.tut-card.tut-done .tut-num { background: #d1fae5; color: #047857; }
+.tut-body { flex: 1 1 auto; min-width: 0; }
+.tut-title { font-size: 15.5px; font-weight: 700; color: var(--text); margin: 0 0 3px; }
+.tut-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 0 12px; }
+.tut-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
+.tut-btn {
+  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
+  border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
+}
+.tut-btn:hover { background: #1d4ed8; text-decoration: none; }
+.tut-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
+.tut-check input { width: 15px; height: 15px; cursor: pointer; }
+@media (max-width: 600px) {
+  .tut-actions { flex-direction: column; align-items: flex-start; }
+}
 /* ---- データソースと自動化 ---- */
 .datasources { margin-top: 34px; }
 .datasources-head { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
@@ -607,6 +705,11 @@ button.ops-card-btn:disabled { opacity: .6; cursor: default; }
 const CLIENT_JS = `
 (function () {
   var SITE = JSON.parse(document.getElementById("site-data").textContent);
+  // 「はじめに」タブのチュートリアルデータ（ビルド時に埋め込み。ボタンURL・チャレンジ4の決定は解決済み）
+  var TUTORIAL = (function () {
+    var elx = document.getElementById("tutorial-data");
+    try { return elx ? JSON.parse(elx.textContent) : null; } catch (e) { return null; }
+  })();
 
   // ---------- インデックス構築 ----------
   var byId = {};
@@ -632,8 +735,10 @@ const CLIENT_JS = `
   // 本文は bodies/<i>.html に外出しされ詳細表示時に fetch されるため、linkify は loadBody 側で適用する
   // （ここで inline bodyHtml に適用すると検索テキストにHTMLが混ざるため適用しない）。
 
-  // タブ: ホーム → Decisions → records/ を持つ各ディレクトリ（自動発見）
+  // タブ: はじめに → ホーム → Decisions → records/ を持つ各ディレクトリ（自動発見）
   var TABS = [];
+  // 新メンバー向けオンボーディング。最初に目に入るようタブ列の先頭に置く
+  if (TUTORIAL && TUTORIAL.challenges && TUTORIAL.challenges.length) TABS.push({ key: "tutorial", label: "はじめに" });
   if (SITE.home) TABS.push({ key: "home", label: "Home" });
   TABS.push({ key: "decisions", label: "Decisions", items: SITE.decisions });
   (SITE.sections || []).forEach(function (sec) {
@@ -650,6 +755,11 @@ const CLIENT_JS = `
     TABS.push({ key: "ops", label: "操作" });
   }
 
+  // 既定の着地タブ: 「はじめに」はタブ列の先頭に置くが、初回着地は Home にする
+  // （毎回開く顧客・リピーターに自然。新規は先頭タブで気づける）。home が無い案件は先頭タブに着地。
+  // URLに ?tab= があれば route() がそれを優先するので直リンクは不変。
+  var DEFAULT_TAB = SITE.home ? "home" : TABS[0].key;
+
   var app = document.getElementById("app");
   // ウィキリンク（本文中の [[用語]]）クリックでSPA内遷移する
   app.addEventListener("click", function (ev) {
@@ -693,7 +803,7 @@ const CLIENT_JS = `
     return new URLSearchParams(location.search).get(name);
   }
   function tabUrl(tabKey) {
-    return tabKey === TABS[0].key ? "?" : "?tab=" + encodeURIComponent(tabKey);
+    return tabKey === DEFAULT_TAB ? "?" : "?tab=" + encodeURIComponent(tabKey);
   }
   function go(id) {
     var url = id ? "?id=" + encodeURIComponent(id) : tabUrl(listState.tab);
@@ -702,7 +812,7 @@ const CLIENT_JS = `
     window.scrollTo(0, 0);
   }
 
-  var listState = { tab: TABS[0].key, q: "", category: "", month: "", page: 1 };
+  var listState = { tab: DEFAULT_TAB, q: "", category: "", month: "", page: 1 };
 
   // 一覧のページネーション（描画コスト対策。1ページあたりの件数）
   var PAGE_SIZE = 30;
@@ -792,6 +902,7 @@ const CLIENT_JS = `
     renderTabs();
     renderInfoBar();
 
+    if (listState.tab === "tutorial") { renderTutorial(); return; }
     if (listState.tab === "home") { renderHome(); return; }
     if (listState.tab === "decisions") { renderDecisionList(); return; }
     if (listState.tab === "graph") { renderKnowledge(); return; }
@@ -813,6 +924,55 @@ const CLIENT_JS = `
     return SITE.home && SITE.home.fm ? adoptionInfo(SITE.home.fm.adoption) : null;
   }
 
+  // ---------- はじめに（チュートリアル） ----------
+  // localStorageキーは案件別（repoSlug）。同一ブラウザで複数案件のビューアを見ても混ざらない
+  function tutStoreKey(n) { return "cortex-tutorial-done:" + (TUTORIAL.slug || "") + ":" + n; }
+  function tutIsDone(n) {
+    try { return localStorage.getItem(tutStoreKey(n)) === "1"; } catch (e) { return false; }
+  }
+  function tutSetDone(n, done) {
+    try { if (done) localStorage.setItem(tutStoreKey(n), "1"); else localStorage.removeItem(tutStoreKey(n)); } catch (e) {}
+  }
+  function renderTutorial() {
+    countEl.textContent = "";
+    var challenges = TUTORIAL.challenges || [];
+    app.appendChild(el("p", { class: "tut-intro", text: "AIS Viewer と Claude Code を使ってこのプロジェクトを掴むための5ステップです。各ボタンを押すと、質問が入力済みの状態で Claude Code Web が開きます（このリポジトリへのアクセス権が必要です）。" }));
+
+    // 進捗ヘッダ（{完了数}/5・バー・全完了で祝福）
+    var doneCount = challenges.filter(function (c) { return tutIsDone(c.n); }).length;
+    var progText = el("span", { class: "tut-progress", text: doneCount + "/" + challenges.length + " 完了" });
+    var fill = el("div", { class: "tut-progress-fill" });
+    fill.style.width = (challenges.length ? Math.round((doneCount / challenges.length) * 100) : 0) + "%";
+    var bar = el("div", { class: "tut-progress-bar" }, [fill]);
+    var celebrate = el("span", { class: "tut-celebrate" });
+    if (doneCount === challenges.length && challenges.length) celebrate.textContent = "🎉 全ステップ達成！オンボーディング完了です。";
+    var head = el("div", { class: "tut-head" }, [progText, bar, celebrate]);
+    app.appendChild(head);
+
+    var list = el("div", { class: "tut-list" });
+    challenges.forEach(function (c) {
+      var done = tutIsDone(c.n);
+      var card = el("div", { class: "tut-card" + (done ? " tut-done" : "") });
+      var btn = el("a", { class: "tut-btn", href: c.url, target: "_blank", rel: "noopener", text: "🚀 挑戦する" });
+      var cb = el("input", { type: "checkbox" });
+      cb.checked = done;
+      var check = el("label", { class: "tut-check" }, [cb, el("span", { text: "完了" })]);
+      cb.addEventListener("change", function () {
+        tutSetDone(c.n, cb.checked);
+        // 進捗・祝福・カードの見た目を即時更新（再描画で状態を反映）
+        renderList();
+      });
+      card.appendChild(el("div", { class: "tut-num", text: String(c.n) }));
+      card.appendChild(el("div", { class: "tut-body" }, [
+        el("h3", { class: "tut-title", text: c.title }),
+        el("p", { class: "tut-desc", text: c.desc }),
+        el("div", { class: "tut-actions" }, [btn, check]),
+      ]));
+      list.appendChild(card);
+    });
+    app.appendChild(list);
+  }
+
   // ---------- ホーム（着地画面: Markdownをそのまま表示） ----------
   function renderHome() {
     var h = SITE.home;

package/package.json

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