0.9.0-1 Version Check

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ripster-frontend",
-  "version": "1.0.0",
+  "version": "0.9.0-1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ripster-frontend",
-      "version": "1.0.0",
+      "version": "0.9.0-1",
       "dependencies": {
         "primeicons": "^7.0.0",
         "primereact": "^10.9.2",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ripster-frontend",
-  "version": "1.0.0",
+  "version": "0.9.0-1",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import HistoryPage from './pages/HistoryPage';
 import DatabasePage from './pages/DatabasePage';
 
 function App() {
+  const appVersion = __APP_VERSION__;
   const [pipeline, setPipeline] = useState({ state: 'IDLE', progress: 0, context: {} });
   const [hardwareMonitoring, setHardwareMonitoring] = useState(null);
   const [lastDiscEvent, setLastDiscEvent] = useState(null);
@@ -115,7 +116,12 @@ function App() {
           <img src="/logo.png" alt="Ripster Logo" className="brand-logo" />
           <div className="brand-copy">
             <h1>Ripster</h1>
-            <p>Disc Ripping Control Center</p>
+            <div className="brand-meta">
+              <p>Disc Ripping Control Center</p>
+              <span className="app-version" aria-label={`Version ${appVersion}`}>
+                v{appVersion}
+              </span>
+            </div>
           </div>
         </div>
         <div className="nav-buttons">

frontend/src/styles/app.css

@@ -142,6 +142,28 @@ body {
   letter-spacing: 0.02em;
 }
 
+.brand-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.app-version {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.35rem;
+  padding: 0.1rem 0.45rem;
+  border: 1px solid rgba(58, 29, 18, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 250, 240, 0.45);
+  color: rgba(58, 29, 18, 0.72);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+}
+
 .nav-buttons {
   display: flex;
   gap: 0.5rem;
@@ -2530,6 +2552,10 @@ body {
     font-size: 0.82rem;
   }
 
+  .app-version {
+    font-size: 0.68rem;
+  }
+
   .metadata-grid,
   .device-meta,
   .hardware-monitor-grid,

frontend/vite.config.js

@@ -1,6 +1,8 @@
+import { readFileSync } from 'node:fs';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
+const appPackage = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
 const publicOrigin = (process.env.VITE_PUBLIC_ORIGIN || '').trim();
 const parsedAllowedHosts = (process.env.VITE_ALLOWED_HOSTS || '')
   .split(',')
@@ -24,6 +26,9 @@ if (publicOrigin) {
 
 export default defineConfig({
   plugins: [react()],
+  define: {
+    __APP_VERSION__: JSON.stringify(appPackage.version)
+  },
   server: {
     host: '0.0.0.0',
     port: 5173,