feat(ui): show NetCopy version in topbar (local + peer)

src/main/resources/web/app.js

@@ -31,6 +31,11 @@ document.addEventListener('alpine:init', () => {
         localTcpPort: 0,
         peerTcpPort: 0,
         peerHostname: null,
+        // NetCopy version reported by each side's /api/peer/info. Populated
+        // on successful Connect; null until then. Helpful for "is the peer
+        // running the same build as me" sanity checks during a release.
+        localVersion: null,
+        peerVersion: null,
 
         // ---- transfers + ws ---------------------------------------------
         transfers: [],          // [{ id, host, state, protocol, bytesDone, totalBytes, ... }]
@@ -96,6 +101,7 @@ document.addEventListener('alpine:init', () => {
                     const info = await r.json();
                     this.localTcpPort = info.tcpPort || 0;
                     this.hostname = info.hostname || this.hostname;
+                    this.localVersion = info.version || null;
                     this.localOk = true;
                     this.localStatus = 'ok';
                     this.openWs();
@@ -142,6 +148,7 @@ document.addEventListener('alpine:init', () => {
                     const info = await r.json();
                     this.peerTcpPort = info.tcpPort || 0;
                     this.peerHostname = info.hostname || null;
+                    this.peerVersion = info.version || null;
                     this.peerOk = true;
                     this.peerStatus = 'ok';
                     this.openPeerWs();

src/main/resources/web/index.html

@@ -26,6 +26,13 @@
 <header class="topbar">
     <div class="brand">
         <span class="brand-mark">NetCopy</span>
+        <!-- Version chip: populated from /api/peer/info on a successful local
+             Connect. Hidden until then so first-load doesn't show a misleading
+             "v?". Hover-title carries the same value for narrow viewports. -->
+        <span class="version-pill"
+              x-show="$store.app.localVersion"
+              x-text="'v' + ($store.app.localVersion || '')"
+              :title="'NetCopy v' + ($store.app.localVersion || '?') + ' (local)'"></span>
         <span class="hostname" x-text="$store.app.hostname || 'localhost'"></span>
     </div>
 
@@ -82,7 +89,18 @@
               x-text="$store.app.peerStatus === 'connecting' ? 'connecting…'
                    : $store.app.peerStatus === 'ok' ? 'peer ok'
                    : $store.app.peerStatus === 'error' ? 'error'
-                   : 'no peer'"></span>
+                   : 'no peer'"
+              :title="$store.app.peerStatus === 'ok'
+                  ? ('NetCopy v' + ($store.app.peerVersion || '?')
+                     + ' on ' + ($store.app.peerHostname || '?'))
+                  : ''"></span>
+        <!-- Peer version pill mirrors the local one in the brand area, but
+             only shows once Connect peer succeeds. Mismatch (peer running an
+             older / newer build) is the most useful thing this surfaces. -->
+        <span class="version-pill"
+              x-show="$store.app.peerVersion"
+              x-text="'v' + ($store.app.peerVersion || '')"
+              :title="'NetCopy v' + ($store.app.peerVersion || '?') + ' (peer)'"></span>
         <span class="conn-error"
               x-show="$store.app.peerError"
               x-text="$store.app.peerError"

src/main/resources/web/style.css

@@ -67,6 +67,20 @@ body {
     font-family: var(--font-mono);
     font-size: 12px;
 }
+
+/* Compact version chip next to the brand mark and the peer status pill.
+   Reads at a glance ("am I running the same build the peer is?") without
+   demanding visual weight. */
+.version-pill {
+    color: var(--fg-dim);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    padding: 1px 6px;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--bg-3);
+    letter-spacing: 0.02em;
+}
 .topbar-section {
     display: flex;
     align-items: center;