@takagaki/cortex-decisions-viewer 0.4.40 → 0.4.42

package/dist/render.js

@@ -572,30 +572,47 @@ a:hover { text-decoration: underline; }
 .detail-back { display: inline-block; margin-bottom: 14px; font-size: 14px; }
 .detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
 .detail-head > div:first-child { flex: 1 1 auto; min-width: 0; }
+/* 右側の操作は2段に分ける。1段目=つながり（読む導線）・2段目=AIで編集/GitHubで編集（書き換える導線）。
+   3つ横並びだとタイトルの幅を食うため */
+.detail-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+.detail-actions-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
 .detail-title { font-size: 24px; font-weight: 700; margin: 0 0 10px; line-height: 1.4; }
 .detail-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; margin-bottom: 16px; }
+/* GitHubへ飛ぶボタンだけ、ヘッダーの .gh-btn と同じダーク（GitHubカラー）＋リキッドグラスで揃える */
 .edit-btn {
+  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
+  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 14px; border-radius: var(--radius);
+  border: 1px solid rgba(255,255,255,0.35); background: rgba(28,32,40,0.82); color: #fff;
+  font-size: 13.5px; font-weight: 600; white-space: nowrap;
+  box-shadow: 0 2px 10px rgba(20,30,60,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
+}
+.edit-btn:hover { background: rgba(0,0,0,0.88); text-decoration: none; }
+/* つながり（グラフ探索）はGitHubでもAIでもないので、既定の淡いボタンのまま残す */
+.trace-btn {
   -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
   flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius);
   background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600;
   box-shadow: var(--shadow); white-space: nowrap;
 }
-.edit-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
+.trace-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
 /* ---- AI導線ボタン（AIで編集・＋AIで登録。claude.ai/code へのディープリンク・AIアクションはオレンジ系で統一） ---- */
+/* AIアクション（AIで編集・＋AIで登録・AIに聞く）はヘッダーの .ask-ai-btn と同じ塗りで統一する */
 .ai-edit-btn {
-  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
+  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
   flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
-  padding: 8px 14px; border: 1px solid rgba(217,119,87,0.55); border-radius: var(--radius);
-  background: rgba(217,119,87,0.1); color: #b45309; font-size: 13.5px; font-weight: 600;
-  box-shadow: var(--shadow); white-space: nowrap;
+  padding: 8px 14px; border-radius: var(--radius);
+  border: 1px solid rgba(255,255,255,0.55); background: rgba(217,119,87,0.82); color: #fff;
+  font-size: 13.5px; font-weight: 600; white-space: nowrap;
+  box-shadow: 0 2px 10px rgba(190,90,60,0.3), inset 0 1px 0 rgba(255,255,255,0.45);
 }
-.ai-edit-btn:hover { background: rgba(217,119,87,0.18); border-color: rgba(217,119,87,0.85); text-decoration: none; }
+.ai-edit-btn:hover { background: rgba(194,94,63,0.92); text-decoration: none; }
 .ai-add-bar { margin-bottom: 16px; }
 .ai-add-btn {
-  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
+  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius);
   border: 1px solid rgba(255,255,255,0.55); background: rgba(217,119,87,0.82); color: #fff;
-  font-size: 13px; font-weight: 600; white-space: nowrap;
+  font-size: 13.5px; font-weight: 600; white-space: nowrap;
   -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
   box-shadow: 0 2px 10px rgba(190,90,60,0.3), inset 0 1px 0 rgba(255,255,255,0.45);
 }
@@ -1255,10 +1272,13 @@ const CLIENT_JS = `
     var ai = h.fm ? adoptionInfo(h.fm.adoption) : null;
     if (ai) titleWrap.appendChild(el("span", { class: "chip adoption-" + String(h.fm.adoption), text: ai.label }));
     head.appendChild(titleWrap);
-    head.appendChild(el("a", { class: "ai-edit-btn", href: codeUrl(HOME_EDIT_PROMPT), target: "_blank", rel: "noopener", text: "AIで編集" }));
+    var homeEditRow = el("div", { class: "detail-actions-row" }, [
+      el("a", { class: "ai-edit-btn", href: codeUrl(HOME_EDIT_PROMPT), target: "_blank", rel: "noopener", text: "AIで編集" }),
+    ]);
     if (h.editUrl) {
-      head.appendChild(el("a", { class: "edit-btn", href: h.editUrl, target: "_blank", rel: "noopener", text: "✏️ GitHubで編集" }));
+      homeEditRow.appendChild(el("a", { class: "edit-btn", href: h.editUrl, target: "_blank", rel: "noopener", text: "GitHubで編集" }));
     }
+    head.appendChild(el("div", { class: "detail-actions" }, [ homeEditRow ]));
     app.appendChild(head);
     var homeBody = el("div", { class: "body" });
     app.appendChild(homeBody);
@@ -1828,14 +1848,18 @@ const CLIENT_JS = `
 
     var head = el("div", { class: "detail-head" });
     head.appendChild(el("div", {}, [ el("h1", { class: "detail-title", text: r.title }) ]));
-    var traceBtn2 = el("a", { class: "edit-btn", href: "?tab=graph", text: "🕸 つながり" });
+    var traceBtn2 = el("a", { class: "trace-btn", href: "?tab=graph", text: "🕸 つながり" });
     traceBtn2.addEventListener("click", function (ev) { ev.preventDefault(); openExplorerFor(r); });
-    head.appendChild(traceBtn2);
+    var editRowR = el("div", { class: "detail-actions-row" });
+    var aiEditR = aiEditBtn(r, r._section, r.title);
+    if (aiEditR) editRowR.appendChild(aiEditR);
     if (r.editUrl) {
-      head.appendChild(el("a", { class: "edit-btn", href: r.editUrl, target: "_blank", rel: "noopener", text: "✏️ GitHubで編集" }));
+      editRowR.appendChild(el("a", { class: "edit-btn", href: r.editUrl, target: "_blank", rel: "noopener", text: "GitHubで編集" }));
     }
-    var aiEditR = aiEditBtn(r, r._section, r.title);
-    if (aiEditR) head.appendChild(aiEditR);
+    head.appendChild(el("div", { class: "detail-actions" }, [
+      el("div", { class: "detail-actions-row" }, [ traceBtn2 ]),
+      editRowR.children.length ? editRowR : null,
+    ]));
     app.appendChild(head);
 
     app.appendChild(el("div", { class: "detail-meta" }, [
@@ -2481,14 +2505,18 @@ const CLIENT_JS = `
     var head = el("div", { class: "detail-head" });
     var headLeft = el("div", {}, [ el("h1", { class: "detail-title", text: d.title }) ]);
     head.appendChild(headLeft);
-    var traceBtn = el("a", { class: "edit-btn", href: "?tab=graph", text: "🕸 つながり" });
+    var traceBtn = el("a", { class: "trace-btn", href: "?tab=graph", text: "🕸 つながり" });
     traceBtn.addEventListener("click", function (ev) { ev.preventDefault(); openExplorerFor(d); });
-    head.appendChild(traceBtn);
+    var editRowD = el("div", { class: "detail-actions-row" });
+    var aiEditD = aiEditBtn(d, "Decisions", d.title);
+    if (aiEditD) editRowD.appendChild(aiEditD);
     if (d.editUrl) {
-      head.appendChild(el("a", { class: "edit-btn", href: d.editUrl, target: "_blank", rel: "noopener", text: "✏️ GitHubで編集" }));
+      editRowD.appendChild(el("a", { class: "edit-btn", href: d.editUrl, target: "_blank", rel: "noopener", text: "GitHubで編集" }));
     }
-    var aiEditD = aiEditBtn(d, "Decisions", d.title);
-    if (aiEditD) head.appendChild(aiEditD);
+    head.appendChild(el("div", { class: "detail-actions" }, [
+      el("div", { class: "detail-actions-row" }, [ traceBtn ]),
+      editRowD.children.length ? editRowD : null,
+    ]));
     app.appendChild(head);
 
     var meta = el("div", { class: "detail-meta" }, [

package/package.json

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