Add display version #280

public/index.html

@@ -1440,7 +1440,10 @@
                 <div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div>
             </div>
             <div id="user-settings-block" class="drawer-content closedDrawer">
+                <div class="flex-container wide100p alignitemscenter spaceBetween">
                     <h3>User Settings</h3>
+                    <div id="version_display"></div>
+                </div>
                 <div class="flex-container spaceEvenly">
                     <div name="UI Customization" class="flex-container drawer25pWidth">
                         <div class="ui-settings">

public/script.js

@@ -386,7 +386,15 @@ $(document).ajaxError(function myErrorHandler(_, xhr) {
 async function getClientVersion() {
     try {
         const response = await fetch('/version');
-        CLIENT_VERSION = await response.text();
+        const data = await response.json();
+        CLIENT_VERSION = data.agent;
+        let displayVersion = `SillyTavern ${data.pkgVersion}`;
+
+        if (data.gitRevision && data.gitBranch) {
+            displayVersion += ` '${data.gitBranch}' (${data.gitRevision})`;
+        }
+
+        $('#version_display').text(displayVersion);
     } catch (err) {
         console.log("Couldn't get client version", err);
     }

public/style.css

@@ -191,6 +191,11 @@ code {
     transition: background-image 0.5s ease-in-out;
 }
 
+#version_display {
+    padding: 5px;
+    opacity: 0.8;
+}
+
 #bg1 {
     background-image: url('backgrounds/tavern day.jpg');
     z-index: -2;
@@ -3517,6 +3522,10 @@ toolcool-color-picker {
     justify-content: space-evenly;
 }
 
+.spaceBetween {
+    justify-content: space-between;
+}
+
 .widthNatural {
     width: unset !important;
     min-width: unset !important;

server.js

@@ -308,7 +308,7 @@ app.get('/deviceinfo', function (request, response) {
     return response.send(deviceInfo);
 });
 app.get('/version', function (_, response) {
-    let pkgVersion, gitRevision;
+    let pkgVersion, gitRevision, gitBranch;
     try {
         const pkgJson = require('./package.json');
         pkgVersion = pkgJson.version;
@@ -316,13 +316,18 @@ app.get('/version', function (_, response) {
             gitRevision = require('child_process')
                 .execSync('git rev-parse --short HEAD', { cwd: __dirname })
                 .toString().trim();
+
+            gitBranch = require('child_process')
+                .execSync('git rev-parse --abbrev-ref HEAD', { cwd: __dirname })
+                .toString().trim();
         }
     }
     catch {
         // suppress exception
     }
     finally {
-        response.send(`SillyTavern:${gitRevision || pkgVersion}:Cohee#1207`)
+        const agent = `SillyTavern:${gitRevision || pkgVersion}:Cohee#1207`;
+        response.send({ agent, pkgVersion, gitRevision, gitBranch });
     }
 })