@takagaki/cortex-decisions-viewer 0.4.28 → 0.4.30

package/dist/render.js

@@ -19,7 +19,7 @@ function renderSite(site) {
     const safeTitle = escapeHtml(site.title);
     // 接続マップ（操作タブ最上部のSVG図）。ビルド時に生成し<template>で埋め込む。fleet情報が無ければ出さない
     const connMap = renderConnectionMap(site);
-    // チュートリアル（「はじめに」タブ）。ボタンURLは既存の codeUrl を流用し、案件データ由来の値だけビルド時に埋める
+    // チュートリアル（Homeタブ下部の「はじめに」セクション）。ボタン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>`
@@ -164,7 +164,7 @@ function renderConnectionMap(site) {
         `</svg>`);
 }
 /**
- * 「はじめに」タブのチュートリアルデータをビルド時に生成する。
+ * 「はじめに」セクション（Homeタブ下部）のチュートリアルデータをビルド時に生成する。
  * 各チャレンジのプロンプトは固定文（ビューアコードに実案件名は残さない）。
  * チャレンジ4だけは site.decisions から根拠付きの最新決定を選び、そのtitle/idを埋め込む。
  */
@@ -184,7 +184,7 @@ function buildTutorialData(site, codeUrl, repoSlug) {
         {
             title: "ドメインを可視化する",
             desc: "案件の概念と関係を図にする",
-            prompt: "このプロジェクトの主要なドメイン概念（用語集）と、それらの関係性を mermaid 図で可視化してください。",
+            prompt: "このプロジェクトの主要なドメイン概念（用語集）と、それらの関係性を、ノードと矢印で表した図として可視化してください。mermaid のコードではなく、ブラウザでそのまま絵として見られる単一の HTML ファイル（インライン SVG と CSS）で出力し、パスを教えてください。",
         },
         {
             title: "決定の経緯を辿る",
@@ -492,7 +492,9 @@ 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; }
-/* ---- はじめに（チュートリアル） ---- */
+/* ---- はじめに（チュートリアル・Homeタブ下部） ---- */
+.tut-section { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); }
+.tut-section-head { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
 .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); }
@@ -705,7 +707,7 @@ button.ops-card-btn:disabled { opacity: .6; cursor: default; }
 const CLIENT_JS = `
 (function () {
   var SITE = JSON.parse(document.getElementById("site-data").textContent);
-  // 「はじめに」タブのチュートリアルデータ（ビルド時に埋め込み。ボタンURL・チャレンジ4の決定は解決済み）
+  // 「はじめに」セクションのチュートリアルデータ（ビルド時に埋め込み。ボタンURL・チャレンジ4の決定は解決済み）
   var TUTORIAL = (function () {
     var elx = document.getElementById("tutorial-data");
     try { return elx ? JSON.parse(elx.textContent) : null; } catch (e) { return null; }
@@ -735,10 +737,9 @@ const CLIENT_JS = `
   // 本文は bodies/<i>.html に外出しされ詳細表示時に fetch されるため、linkify は loadBody 側で適用する
   // （ここで inline bodyHtml に適用すると検索テキストにHTMLが混ざるため適用しない）。
 
-  // タブ: はじめに → ホーム → Decisions → records/ を持つ各ディレクトリ（自動発見）
+  // タブ: ホーム → Decisions → records/ を持つ各ディレクトリ（自動発見）
+  // オンボーディングのチュートリアル（5チャレンジ）は独立タブを廃止し、Homeタブ下部に統合した
   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) {
@@ -755,8 +756,7 @@ const CLIENT_JS = `
     TABS.push({ key: "ops", label: "操作" });
   }
 
-  // 既定の着地タブ: 「はじめに」はタブ列の先頭に置くが、初回着地は Home にする
-  // （毎回開く顧客・リピーターに自然。新規は先頭タブで気づける）。home が無い案件は先頭タブに着地。
+  // 既定の着地タブ: home がある案件は Home、無ければ先頭タブ。
   // URLに ?tab= があれば route() がそれを優先するので直リンクは不変。
   var DEFAULT_TAB = SITE.home ? "home" : TABS[0].key;
 
@@ -902,7 +902,6 @@ 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; }
@@ -924,19 +923,23 @@ const CLIENT_JS = `
     return SITE.home && SITE.home.fm ? adoptionInfo(SITE.home.fm.adoption) : null;
   }
 
-  // ---------- はじめに（チュートリアル） ----------
+  // ---------- はじめに（チュートリアル・Homeタブ下部に統合） ----------
   // localStorageキーは案件別（repoSlug）。同一ブラウザで複数案件のビューアを見ても混ざらない
-  function tutStoreKey(n) { return "cortex-tutorial-done:" + (TUTORIAL.slug || "") + ":" + n; }
+  function tutStoreKey(n) { return "cortex-tutorial-done:" + ((TUTORIAL && 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 が開きます（このリポジトリへのアクセス権が必要です）。" }));
+  // Homeの本文の下に差し込むチュートリアルセクション（見出し＋進捗＋5チャレンジカード）
+  function renderTutorialSection() {
+    var challenges = (TUTORIAL && TUTORIAL.challenges) || [];
+    if (!challenges.length) return; // 最小データ（チュートリアル無し）では出さない
+
+    var sec = el("section", { class: "tut-section" });
+    sec.appendChild(el("h2", { class: "tut-section-head", text: "はじめに — このプロジェクトを掴む5ステップ" }));
+    sec.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;
@@ -946,8 +949,7 @@ const CLIENT_JS = `
     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);
+    sec.appendChild(el("div", { class: "tut-head" }, [progText, bar, celebrate]));
 
     var list = el("div", { class: "tut-list" });
     challenges.forEach(function (c) {
@@ -959,7 +961,7 @@ const CLIENT_JS = `
       var check = el("label", { class: "tut-check" }, [cb, el("span", { text: "完了" })]);
       cb.addEventListener("change", function () {
         tutSetDone(c.n, cb.checked);
-        // 進捗・祝福・カードの見た目を即時更新（再描画で状態を反映）
+        // 進捗・祝福・カードの見た目を即時更新（Homeを再描画して反映）
         renderList();
       });
       card.appendChild(el("div", { class: "tut-num", text: String(c.n) }));
@@ -970,7 +972,8 @@ const CLIENT_JS = `
       ]));
       list.appendChild(card);
     });
-    app.appendChild(list);
+    sec.appendChild(list);
+    app.appendChild(sec);
   }
 
   // ---------- ホーム（着地画面: Markdownをそのまま表示） ----------
@@ -989,6 +992,8 @@ const CLIENT_JS = `
     var homeBody = el("div", { class: "body" });
     app.appendChild(homeBody);
     loadBody(h, homeBody);
+    // Markdown本文の下にオンボーディングのチュートリアルを差し込む
+    renderTutorialSection();
   }
 
   // ---------- データソースと自動化（fleet-status.json 由来。無ければ非表示） ----------

package/package.json

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