From ad219c87160254deb55f9ca94e65e592357a1e36 Mon Sep 17 00:00:00 2001
From: simos <simosmik@gmail.com>
Date: Fri, 14 Nov 2025 12:25:44 +0100
Subject: [PATCH] feat: Adding version information

---
 src/components/CredentialsSettings.jsx | 33 ++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/components/CredentialsSettings.jsx b/src/components/CredentialsSettings.jsx
index fad1a51..7e33e06 100644
--- a/src/components/CredentialsSettings.jsx
+++ b/src/components/CredentialsSettings.jsx
@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github, ExternalLink } from 'lucide-react';
+import { useVersionCheck } from '../hooks/useVersionCheck';
+import { version } from '../../package.json';
 
 function CredentialsSettings() {
   const [apiKeys, setApiKeys] = useState([]);
@@ -17,6 +19,9 @@ function CredentialsSettings() {
   const [copiedKey, setCopiedKey] = useState(null);
   const [newlyCreatedKey, setNewlyCreatedKey] = useState(null);
 
+  // Version check hook
+  const { updateAvailable, latestVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -410,6 +415,34 @@ function CredentialsSettings() {
           )}
         </div>
       </div>
+
+      {/* Version Information */}
+      <div className="pt-6 border-t border-border/50">
+        <div className="flex items-center justify-between text-xs italic text-muted-foreground/60">
+          <div className="flex items-center gap-2">
+            <span>Claude Code UI</span>
+            <a
+              href={releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases'}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-muted-foreground transition-colors"
+            >
+              v{version}
+            </a>
+          </div>
+          {updateAvailable && latestVersion && (
+            <a
+              href={releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases'}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full hover:bg-green-500/20 transition-colors not-italic font-medium"
+            >
+              <span className="text-[10px]">Update available: v{latestVersion}</span>
+              <ExternalLink className="h-2.5 w-2.5" />
+            </a>
+          )}
+        </div>
+      </div>
     </div>
   );
 }