From de77e6c7867beb20e3a5193e98b12490db332893 Mon Sep 17 00:00:00 2001
From: lpf <lipengfei886@qq.com>
Date: Mon, 9 Mar 2026 16:50:19 +0800
Subject: [PATCH] feat(webui): add github and version check actions

---
 webui/src/components/Header.tsx | 66 +++++++++++++++++++++++++++++++--
 webui/src/i18n/index.ts         | 16 ++++++++
 2 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/webui/src/components/Header.tsx b/webui/src/components/Header.tsx
index 1c1d8fc..782af27 100644
--- a/webui/src/components/Header.tsx
+++ b/webui/src/components/Header.tsx
@@ -1,19 +1,60 @@
 import React from 'react';
-import { Terminal, Globe, Menu, Moon, SunMedium } from 'lucide-react';
+import { Terminal, Globe, Github, Menu, Moon, RefreshCw, SunMedium } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import { useUI } from '../context/UIContext';
 
+const REPO_URL = 'https://github.com/YspCoder/clawgo';
+
+function normalizeVersion(value: string) {
+  return String(value || '').trim().replace(/^v/i, '');
+}
+
 const Header: React.FC = () => {
   const { t, i18n } = useTranslation();
-  const { isGatewayOnline, setSidebarOpen, sidebarCollapsed } = useAppContext();
-  const { theme, toggleTheme } = useUI();
+  const { isGatewayOnline, setSidebarOpen, sidebarCollapsed, gatewayVersion, webuiVersion } = useAppContext();
+  const { theme, toggleTheme, notify } = useUI();
+  const [checkingVersion, setCheckingVersion] = React.useState(false);
 
   const toggleLang = () => {
     const nextLang = i18n.language === 'en' ? 'zh' : 'en';
     i18n.changeLanguage(nextLang);
   };
 
+  const checkVersion = async () => {
+    setCheckingVersion(true);
+    try {
+      const response = await fetch('https://api.github.com/repos/YspCoder/clawgo/releases/latest', {
+        headers: { Accept: 'application/vnd.github+json' },
+      });
+      if (!response.ok) {
+        throw new Error(`GitHub API ${response.status}`);
+      }
+      const data = await response.json();
+      const latest = normalizeVersion(data?.tag_name || '');
+      const currentGateway = normalizeVersion(gatewayVersion);
+      const currentWebUI = normalizeVersion(webuiVersion);
+      const isCurrent = latest && latest === currentGateway && latest === currentWebUI;
+      await notify({
+        title: isCurrent ? t('versionCheckUpToDateTitle') : t('versionCheckUpdateTitle'),
+        message: isCurrent
+          ? t('versionCheckUpToDateMessage', { version: latest || '-' })
+          : t('versionCheckUpdateMessage', {
+              latest: latest || '-',
+              gateway: currentGateway || '-',
+              webui: currentWebUI || '-',
+            }),
+      });
+    } catch (error) {
+      await notify({
+        title: t('versionCheckFailedTitle'),
+        message: t('versionCheckFailedMessage', { error: error instanceof Error ? error.message : String(error) }),
+      });
+    } finally {
+      setCheckingVersion(false);
+    }
+  };
+
   return (
     <header className="app-header h-14 md:h-16 border-b border-zinc-800 flex items-center justify-between px-3 md:px-6 shrink-0 z-10">
       <div className="flex items-center gap-2 md:gap-3 min-w-0">
@@ -52,6 +93,25 @@ const Header: React.FC = () => {
         
         <div className="hidden md:block h-5 w-px bg-zinc-800" />
 
+        <a
+          href={REPO_URL}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg"
+          title={t('githubRepo')}
+        >
+          <Github className="w-4 h-4" />
+        </a>
+
+        <button
+          onClick={checkVersion}
+          disabled={checkingVersion}
+          className="inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg disabled:opacity-60"
+          title={t('checkVersion')}
+        >
+          <RefreshCw className={`w-4 h-4 ${checkingVersion ? 'animate-spin' : ''}`} />
+        </button>
+
         <button
           onClick={toggleTheme}
           className="inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg"
diff --git a/webui/src/i18n/index.ts b/webui/src/i18n/index.ts
index 4a6fe85..a70ac4c 100644
--- a/webui/src/i18n/index.ts
+++ b/webui/src/i18n/index.ts
@@ -139,6 +139,14 @@ const resources = {
       selectTask: 'Select a task from the left list',
       loading: 'Loading...',
       gatewayStatus: 'Gateway Status',
+      githubRepo: 'GitHub Repository',
+      checkVersion: 'Check Latest Version',
+      versionCheckUpToDateTitle: 'Already Up To Date',
+      versionCheckUpToDateMessage: 'Current gateway and WebUI already match {{version}}.',
+      versionCheckUpdateTitle: 'Update Available',
+      versionCheckUpdateMessage: 'Latest: {{latest}}\nGateway: {{gateway}}\nWebUI: {{webui}}',
+      versionCheckFailedTitle: 'Version Check Failed',
+      versionCheckFailedMessage: 'Unable to check latest release: {{error}}',
       online: 'Online',
       offline: 'Offline',
       activeSessions: 'Active Sessions',
@@ -758,6 +766,14 @@ const resources = {
       selectTask: '请从左侧选择任务',
       loading: '加载中...',
       gatewayStatus: '网关状态',
+      githubRepo: 'GitHub 仓库',
+      checkVersion: '检查最新版本',
+      versionCheckUpToDateTitle: '已经是最新版本',
+      versionCheckUpToDateMessage: '当前 gateway 和 WebUI 已经是 {{version}}。',
+      versionCheckUpdateTitle: '发现新版本',
+      versionCheckUpdateMessage: '最新版本：{{latest}}\nGateway：{{gateway}}\nWebUI：{{webui}}',
+      versionCheckFailedTitle: '版本检查失败',
+      versionCheckFailedMessage: '无法检查最新版本：{{error}}',
       online: '在线',
       offline: '离线',
       activeSessions: '活跃会话',