From 03b5c0207c596f2be028a6e5a46c879ee87ef137 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 14 May 2026 17:41:29 +0900
Subject: [PATCH] [#187] Display version number in the web app UI

Expose app version via GET /api/health response. Fetch it once on mount
in Layout and display it in the header next to the "writer" label as
small muted text (e.g., "writer v1.0.31").

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/server.ts                 | 9 ++++++++-
 app/web/components/Layout.tsx | 9 ++++++++-
 package.json                  | 2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/server.ts b/app/server.ts
index c8b72f8..e8f2cd7 100644
--- a/app/server.ts
+++ b/app/server.ts
@@ -49,8 +49,15 @@ app.route("/api/stories", storiesRoutes);
 app.use("/api/settings/*", requireAuth);
 app.route("/api/settings", settingsRoutes);
 
+// App version (read once at startup)
+const appVersion = (() => {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(__dirname, "..", "package.json"), "utf-8")).version;
+  } catch { return "unknown"; }
+})();
+
 // Health check
-app.get("/api/health", (c) => c.json({ status: "ok" }));
+app.get("/api/health", (c) => c.json({ status: "ok", version: appVersion }));
 
 // In production, serve the built frontend
 const distPath = path.join(__dirname, "web", "dist");
diff --git a/app/web/components/Layout.tsx b/app/web/components/Layout.tsx
index 91e8244..6de970c 100644
--- a/app/web/components/Layout.tsx
+++ b/app/web/components/Layout.tsx
@@ -69,6 +69,7 @@ function WalletSetupPage({ token, onComplete }: { token: string; onComplete: ()
 export function Layout({ token, onLogout }: { token: string; onLogout: () => void }) {
   const [page, setPage] = useState<Page>("home");
   const [storyCount, setStoryCount] = useState(0);
+  const [appVersion, setAppVersion] = useState<string | null>(null);
 
   const authFetch = useCallback(async (url: string, opts?: RequestInit) => {
     return fetch(url, {
@@ -80,6 +81,12 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
     });
   }, [token]);
 
+  useEffect(() => {
+    fetch("/api/health").then((r) => r.json()).then((d) => {
+      if (d.version) setAppVersion(d.version);
+    }).catch(() => {});
+  }, []);
+
   useEffect(() => {
     async function checkSetup() {
       try {
@@ -111,7 +118,7 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
           <button onClick={() => { if (page !== "wallet-setup") setPage("home"); }} className="flex items-center gap-2 hover:opacity-80">
             <span className="text-accent text-sm font-bold tracking-tight">PlotLink OWS</span>
           </button>
-          <span className="text-muted text-[10px] uppercase tracking-wider">writer</span>
+          <span className="text-muted text-[10px] uppercase tracking-wider">writer{appVersion ? ` v${appVersion}` : ""}</span>
         </div>
         {page !== "wallet-setup" && (
         <nav className="flex items-center gap-4">
diff --git a/package.json b/package.json
index a90fe86..9919356 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink-ows",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "bin": {
     "plotlink-ows": "./bin/plotlink-ows.js"
   },