src/App.css

@@ -73,6 +73,29 @@ body {
   font-size: 1.125rem;
 }
 
+.app-version {
+  display: inline-block;
+  margin-top: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  background-color: var(--witch-plum);
+  color: var(--witch-lavender);
+  border: 1px solid var(--witch-rose);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  box-shadow: 0 2px 4px var(--witch-shadow);
+  transition: all 0.2s;
+  cursor: default;
+}
+
+.app-version:hover {
+  background-color: var(--witch-rose);
+  color: var(--witch-moon);
+  border-color: var(--witch-mauve);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px var(--witch-shadow);
+}
+
 /* Warning Banner */
 .warning-banner {
   background-color: var(--witch-plum);

src/App.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { getVersion } from "@tauri-apps/api/app";
 import "./App.css";
 import { TranscriptDisplay } from "./components/TranscriptDisplay";
 import { SummaryDisplay } from "./components/SummaryDisplay";
@@ -53,6 +54,7 @@ function App() {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [recordingDuration, setRecordingDuration] = useState(0);
   const [transcriptionProgress, setTranscriptionProgress] = useState(0);
+  const [appVersion, setAppVersion] = useState<string>("");
   const initStarted = useRef(false);
   const recordingTimer = useRef<number | null>(null);
   const transcriptionTimer = useRef<number | null>(null);
@@ -65,6 +67,11 @@ function App() {
     if (initStarted.current) return;
     initStarted.current = true;
 
+    // Get app version
+    getVersion().then(version => {
+      setAppVersion(version);
+    });
+
     initializeApp();
   }, []);
 
@@ -644,6 +651,7 @@ function App() {
         <header className="app-header">
           <h1>🎙️ Chronara</h1>
           <p>Local Meeting Transcription & Summarization</p>
+          {appVersion && <span className="app-version">v{appVersion}</span>}
         </header>
         {renderSetupScreen()}
       </main>
@@ -655,6 +663,7 @@ function App() {
       <header className="app-header">
         <h1>🎙️ Chronara</h1>
         <p>Local Meeting Transcription & Summarization</p>
+        {appVersion && <span className="app-version">v{appVersion}</span>}
       </header>
 
       <div className="app-layout">