Allow the UI to show version number and give the option of updating.

Author: TKassis

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "kady"
-version = "0.2.4"
+version = "0.2.5"
 description = "Kady — K-Dense BYOK Agent"
 readme = "README.md"
 requires-python = ">=3.13"

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.0",
+  "version": "0.2.4",
   "private": true,
   "scripts": {
     "dev": "next dev",

web/src/app/page.tsx

@@ -31,6 +31,7 @@ import { ModelSelector, DEFAULT_MODEL, type Model } from "@/components/model-sel
 import { SkillsSelector, buildSkillsContext, type Skill } from "@/components/skills-selector";
 import { ProvenancePanel } from "@/components/provenance-panel";
 import { WorkflowsPanel } from "@/components/workflows-panel";
+import { APP_VERSION, useUpdateCheck } from "@/lib/version";
 import { useAgent, type ActivityItem } from "@/lib/use-agent";
 import { useConfig } from "@/lib/use-config";
 import { useSkills } from "@/lib/use-skills";
@@ -559,6 +560,7 @@ export default function ChatPage() {
   const isStreaming = status === "streaming" || status === "submitted";
   const sandbox = useSandbox(isStreaming);
   const config = useConfig();
+  const { updateAvailable } = useUpdateCheck();
   const { skills: allSkills } = useSkills();
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [panelOpen, setPanelOpen] = useState(true);
@@ -711,17 +713,30 @@ export default function ChatPage() {
     <div className="flex h-dvh flex-col">
       {/* Header */}
       <header className="relative flex items-center justify-between border-b px-6 py-3">
-        <a href="https://www.k-dense.ai" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
-          <Image
-            src="/brand/kdense-logo.png"
-            alt="K-Dense BYOK"
-            width={120}
-            height={28}
-            className="h-7 w-auto object-contain"
-            priority
-          />
-          <span className="text-sm font-semibold tracking-tight text-foreground/80">BYOK</span>
-        </a>
+        <div className="flex items-center gap-2">
+          <a href="https://www.k-dense.ai" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+            <Image
+              src="/brand/kdense-logo.png"
+              alt="K-Dense BYOK"
+              width={120}
+              height={28}
+              className="h-7 w-auto object-contain"
+              priority
+            />
+            <span className="text-sm font-semibold tracking-tight text-foreground/80">BYOK</span>
+          </a>
+          <span className="text-[11px] text-muted-foreground/60">v{APP_VERSION}</span>
+          {updateAvailable && (
+            <a
+              href="https://github.com/K-Dense-AI/k-dense-byok"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[11px] font-medium text-blue-500 hover:text-blue-400 transition-colors"
+            >
+              Update available
+            </a>
+          )}
+        </div>
         <p className="absolute left-1/2 -translate-x-1/2 text-[11px] text-muted-foreground/60 tracking-wide select-none">
           Brought to you by K-Dense, Inc.
         </p>

web/src/lib/version.ts

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export const APP_VERSION = "0.2.4";
+
+const GITHUB_REPO = "K-Dense-AI/k-dense-byok";
+const CACHE_KEY = "kdense-update-check";
+
+interface UpdateCheckResult {
+  updateAvailable: boolean;
+  latestVersion: string | null;
+}
+
+function compareSemver(current: string, latest: string): boolean {
+  const parse = (v: string) => v.split(".").map(Number);
+  const [cMajor, cMinor, cPatch] = parse(current);
+  const [lMajor, lMinor, lPatch] = parse(latest);
+  if (lMajor !== cMajor) return lMajor > cMajor;
+  if (lMinor !== cMinor) return lMinor > cMinor;
+  return lPatch > cPatch;
+}
+
+export function useUpdateCheck(): UpdateCheckResult {
+  const [result, setResult] = useState<UpdateCheckResult>({
+    updateAvailable: false,
+    latestVersion: null,
+  });
+
+  useEffect(() => {
+    const cached = sessionStorage.getItem(CACHE_KEY);
+    if (cached) {
+      try {
+        setResult(JSON.parse(cached));
+        return;
+      } catch {
+        sessionStorage.removeItem(CACHE_KEY);
+      }
+    }
+
+    fetch(`https://api.github.com/repos/${GITHUB_REPO}/releases/latest`)
+      .then((res) => {
+        if (!res.ok) throw new Error(`GitHub API ${res.status}`);
+        return res.json();
+      })
+      .then((data) => {
+        const tag: string = data.tag_name ?? "";
+        const latestVersion = tag.replace(/^v/, "");
+        const updateAvailable =
+          latestVersion.length > 0 && compareSemver(APP_VERSION, latestVersion);
+        const value = { updateAvailable, latestVersion };
+        sessionStorage.setItem(CACHE_KEY, JSON.stringify(value));
+        setResult(value);
+      })
+      .catch(() => {
+        // Network error or rate limit — silently ignore
+      });
+  }, []);
+
+  return result;
+}