Show style and PBF versions on compare page

STEP_RECORD.md

@@ -1100,6 +1100,32 @@ Style 语义专项里仍最重要的是：
   - 唐津 20 海里
   - 九州
 
+### Compare Page Version Visibility
+
+本轮继续增强了同一张 compare 页的版本可见性。
+
+当前页面除了 compare 版本号外，还会直接显示：
+
+- 当前 delivery style 版本
+- 当前 delivery pbf 版本
+
+也就是页面顶部现在可见：
+
+- `版本: 20nm-r9-20260331-2210`
+- `Style: ...`
+- `PBF: ...`
+
+当前规则：
+
+- 唐津模式显示：
+  - `Style: style.navsea-delivery-karatsu-10nm.json`
+  - `PBF: pbf-delivery-karatsu-20nm`
+- 九州模式显示：
+  - `Style: style.navsea-delivery-kyushu.json`
+  - `PBF: pbf-delivery-kyushu-reencoded`
+
+这样后续视觉确认时，不需要再猜“页面到底连的是哪套 style / pbf”。
+
 ## Quick Resume Prompt
 
 下次开机如果要快速接上，可以先看这份文件，再按下面这句继续：

src/pbf/navsea-compare-karatsu-20nm.html

@@ -264,6 +264,8 @@
         </select>
       </div>
       <div id="version-chip" class="version-chip">版本: 加载中</div>
+      <div id="style-chip" class="version-chip">Style: 加载中</div>
+      <div id="pbf-chip" class="version-chip">PBF: 加载中</div>
       <button id="reload-btn" type="button">重新加载</button>
       <button id="home-btn" type="button">回到唐津</button>
     </div>
@@ -312,7 +314,7 @@
 
   <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
   <script>
-    const COMPARE_VERSION = "20nm-r8-20260331-2208";
+    const COMPARE_VERSION = "20nm-r9-20260331-2210";
     const ORIGINAL_STYLE_URL = "./style.json";
     const ORIGINAL_TILE_URL = "http://192.168.200.184/newpec/exported_auto/tile.mapple-on.jp__newpec-mvt-20260106__z___x___y_.pbf/tiles/{z}/{x}/{y}.pbf";
     const PROFILES = {
@@ -323,6 +325,8 @@
         deliveryPaneLabel: "正式 delivery style + 唐津 20 海里 PBF",
         deliveryStyleUrl: "./domain/style.navsea-delivery-karatsu-10nm.json",
         deliveryTileUrl: "http://192.168.200.184/pbf-delivery-karatsu-20nm/{z}/{x}/{y}.pbf",
+        deliveryStyleVersion: "style.navsea-delivery-karatsu-10nm.json",
+        deliveryPbfVersion: "pbf-delivery-karatsu-20nm",
         initialView: {
           center: [129.9697, 33.4425],
           zoom: 11,
@@ -338,6 +342,8 @@
         deliveryPaneLabel: "正式 delivery style + 九州 PBF",
         deliveryStyleUrl: "./domain/style.navsea-delivery-kyushu.json",
         deliveryTileUrl: "http://192.168.200.184/pbf-delivery-kyushu-reencoded/{z}/{x}/{y}.pbf",
+        deliveryStyleVersion: "style.navsea-delivery-kyushu.json",
+        deliveryPbfVersion: "pbf-delivery-kyushu-reencoded",
         initialView: {
           center: [130.7, 32.2],
           zoom: 8,
@@ -357,6 +363,8 @@
     const pageSubtitleEl = document.getElementById("page-subtitle");
     const deliveryPaneLabelEl = document.getElementById("delivery-pane-label");
     const versionChip = document.getElementById("version-chip");
+    const styleChip = document.getElementById("style-chip");
+    const pbfChip = document.getElementById("pbf-chip");
     const statusEl = document.getElementById("status");
     const inspectHintEl = document.getElementById("inspect-hint");
     const inspectSideEl = document.getElementById("inspect-side");
@@ -386,6 +394,8 @@
       pageSubtitleEl.innerHTML = profile.subtitle;
       deliveryPaneLabelEl.textContent = profile.deliveryPaneLabel;
       homeBtn.textContent = profile.homeLabel;
+      styleChip.textContent = `Style: ${profile.deliveryStyleVersion}`;
+      pbfChip.textContent = `PBF: ${profile.deliveryPbfVersion}`;
       document.title = `NavSea Compare · ${profile.label}`;
     }