@takagaki/cortex-decisions-viewer 0.4.68 → 0.4.69

package/dist/render.js

@@ -1095,6 +1095,20 @@ a.ds-name:hover { text-decoration: underline; }
 /* URLは長いので、入力欄を伸ばしてボタンを右に置く（折り返しても崩れないように wrap） */
 .rt-url-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .rt-url { flex: 1 1 260px; margin-bottom: 0; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; }
+/* 稼働中の表示（#123）。緑は「動いている」の合図で、見出しの右に置いて先に目に入れる */
+.rt-live-badge {
+  margin-left: auto; flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
+  background: #e8f6ed; border: 1px solid #b7e0c6; color: #1c7a43;
+  font-size: 12px; font-weight: 700; white-space: nowrap;
+}
+.rt-live-lines { display: flex; flex-direction: column; gap: 4px; }
+.rt-live-line { margin: 0; color: var(--text); font-size: 13px; font-weight: 600; }
+/* まだ受信していない接続先（複数接続のとき混在する）。稼働中の行と見分けが付く濃さに落とす */
+.rt-live-line.is-waiting { color: var(--muted); font-weight: 500; }
+/* 手順は畳んで残す（張り替え・再確認用）。開いたときだけ間隔を空ける */
+.rt-steps-fold > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
+.rt-steps-fold[open] > summary { margin-bottom: 10px; }
+.rt-steps-fold[open] > *:not(summary) { margin-top: 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; }
@@ -1704,6 +1718,22 @@ ${capabilityState.toString()}
     var mm = ("0" + d.getMinutes()).slice(-2);
     return (d.getMonth() + 1) + "/" + d.getDate() + " " + hh + ":" + mm;
   }
+  /**
+   * 「いつだったか」を相対で言う（#123）。読めない値は空文字（呼び側が出し分けを切る）。
+   *
+   * **1日以上前は絶対時刻に切り替える。** 「32日前」は数えないと日付にならないし、
+   * そこまで空いていれば知りたいのは「いつ止まったか」のほう。
+   * 未来の時刻（端末とサーバの時計ずれ）は「たった今」に丸める——「-3分前」を出さない。
+   */
+  function rtAgo(iso) {
+    var d = new Date(iso);
+    if (isNaN(d.getTime())) return "";
+    var min = Math.floor((Date.now() - d.getTime()) / 60000);
+    if (min < 1) return "たった今";
+    if (min < 60) return min + "分前";
+    if (min < 60 * 24) return Math.floor(min / 60) + "時間前";
+    return dsFmtTime(iso);
+  }
   // 名前表示: url があれば新しいタブで正本を開くリンクにする
   function dsNameEl(text, url) {
     if (url) return el("a", { class: "ds-name", href: url, target: "_blank", rel: "noopener", text: text });
@@ -3433,6 +3463,10 @@ ${capabilityState.toString()}
    *
    * **URLに載せるトークンは案件別**（SITE.backlogWebhook）。艦隊共通トークンを載せると、
    * この画面を見られる人が全案件ぶんの偽イベントを投げられる（types.ts の backlogWebhook 参照）。
+   *
+   * **既に回っている案件には、手順より先に「動いている」ことを出す（#123）。** 設定手順は
+   * まだ繋いでいない人のためのもので、繋ぎ終わった案件の担当者が知りたいのは
+   * 「ちゃんと届いているか」。手順は畳んで残す（URLの再確認・張り替えに要る）。
    */
   function realtimeSyncCard() {
     var rt = LIVE_REALTIME;
@@ -3446,6 +3480,13 @@ ${capabilityState.toString()}
     var wh = SITE.backlogWebhook;
     if (!rt.ready || !wh || !wh.url || !wh.token) return null;
     var url = wh.url + (wh.url.indexOf("?") === -1 ? "?" : "&") + "t=" + encodeURIComponent(wh.token);
+    // 接続先ごとの受信実績（#123）。**配列で受ける**——1案件＝複数 Backlog プロジェクトは
+    // 確定した将来要件（#107）で、今日は必ず1件。**時刻が読めない値は稼働中に数えない**
+    // ——「最終受信: NaN分前」を出すくらいなら、未設定と同じ手順の画面のほうがまだ読める
+    var targets = (rt.targets || []).map(function (t) {
+      return { projectKey: t && t.projectKey ? String(t.projectKey) : "", ago: t && t.lastEventAt ? rtAgo(t.lastEventAt) : "" };
+    });
+    var live = targets.some(function (t) { return t.ago; });
 
     // URLは**選択できる形**で出す（コピーボタンが使えない環境でも手で取れるように）
     var field = el("input", { class: "sec-input rt-url", type: "text", readonly: "readonly", spellcheck: "false" });
@@ -3472,12 +3513,8 @@ ${capabilityState.toString()}
       } catch (e) { fallback(); }
     });
 
-    return el("div", { class: "ops-card rt-card" }, [
-      el("div", { class: "ops-card-head" }, [
-        el("span", { class: "ops-card-icon", text: "⚡" }),
-        el("h3", { class: "ops-card-title", text: "リアルタイム同期" }),
-      ]),
-      el("p", { class: "ops-card-desc", text: "Backlog で課題やコメントが変わったときに、その内容をすぐ取り込みます（毎晩の同期を待たずに反映されます）。Backlog 側で一度だけ設定してください。" }),
+    // 手順ひとそろい（貼り付け先・URL・注意書き）。稼働中の案件ではこれを畳む
+    var steps = [
       el("ol", { class: "rt-steps" }, [
         el("li", { text: "Backlog のプロジェクト設定 → インテグレーション → Webhook を開く" }),
         el("li", { text: "「WebHook URL」に下の案件専用URLを貼り付ける" }),
@@ -3488,7 +3525,46 @@ ${capabilityState.toString()}
       // **この画面は顧客も見る。** URLに秘密が入っていることと、その扱いを書いておく
       el("p", { class: "sec-note", text: "このURLはこの案件専用です（他の案件には届きません）。秘密のトークンを含むので、貼り付け先は Backlog のこのプロジェクトの設定欄だけにしてください。" }),
       el("p", { class: "sec-how", text: "反映は受信から約1分後です（1分ごとのミニバッチでまとめて取り込みます）。初回は上の接続先の設定と、夜間同期が一度済んでいることが前提になります。" }),
-    ]);
+    ];
+
+    if (live) {
+      // 稼働中。**先頭は状態、手順は畳む。**「畳んである中に何があるか」を summary に書く
+      // ——ただの「詳細」だと、URLを張り替えたい人がここを開く手掛かりを持てない
+      var det = el("details", { class: "rt-steps-fold" }, [
+        el("summary", { text: "設定手順と案件専用URLを表示（URLの再確認・張り替え用）" }),
+      ]);
+      for (var i = 0; i < steps.length; i++) det.appendChild(steps[i]);
+      // 接続先ごとに1行。**1件のときはプロジェクトキーを出さない**——どれのことかは
+      // 自明なので、キーを添えると「他にもあるのか」と読ませる余計な情報になる。
+      // 複数のときは、どの接続先の話かが分からないと行が読めないので必ず添える
+      var lines = el("div", { class: "rt-live-lines" }, targets.map(function (t) {
+        var label = targets.length > 1 && t.projectKey ? t.projectKey + ": " : "";
+        // 受信実績がまだ無い接続先も**黙って落とさない**。1つでも動いていれば
+        // カードは稼働中の形になるので、落とすと「増やした接続先が来ていない」に気づけない
+        return el("p", {
+          class: t.ago ? "rt-live-line" : "rt-live-line is-waiting",
+          text: t.ago ? label + "最終受信: " + t.ago : label + "まだ受信していません",
+        });
+      }));
+      return el("div", { class: "ops-card rt-card is-live" }, [
+        el("div", { class: "ops-card-head" }, [
+          el("span", { class: "ops-card-icon", text: "⚡" }),
+          el("h3", { class: "ops-card-title", text: "リアルタイム同期" }),
+          el("span", { class: "rt-live-badge", text: "✓ 稼働中" }),
+        ]),
+        lines,
+        el("p", { class: "ops-card-desc", text: "Backlog の変更をすぐ取り込んでいます（毎晩の同期を待ちません）。設定は済んでいるので、このままお使いください。" }),
+        det,
+      ]);
+    }
+
+    return el("div", { class: "ops-card rt-card" }, [
+      el("div", { class: "ops-card-head" }, [
+        el("span", { class: "ops-card-icon", text: "⚡" }),
+        el("h3", { class: "ops-card-title", text: "リアルタイム同期" }),
+      ]),
+      el("p", { class: "ops-card-desc", text: "Backlog で課題やコメントが変わったときに、その内容をすぐ取り込みます（毎晩の同期を待たずに反映されます）。Backlog 側で一度だけ設定してください。" }),
+    ].concat(steps));
   }
 
   /** 鍵の入力欄に出す説明。kind は Lambda 側（resolveSecretTarget）と綴りを合わせること */

package/package.json

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