d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-02-24 01:27:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement install mode detection and update commands in version upgrade process

Browse Source
This commit is contained in:
simosmik
2026-02-23 21:55:53 +00:00
parent f488a346ef
commit f986004319
9 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
server/index.js
View File

@@ -9,6 +9,8 @@ import { dirname } from 'path';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const installMode = fs.existsSync(path.join(__dirname, '..', '.git')) ? 'git' : 'npm';
// ANSI color codes for terminal output
const colors = {
reset: '\x1b[0m',
@@ -333,7 +335,8 @@ app.use(express.urlencoded({ limit: '50mb', extended: true }));
app.get('/health', (req, res) => {
res.json({
status: 'ok',
timestamp: new Date().toISOString()
timestamp: new Date().toISOString(),
installMode
});
});
@@ -410,11 +413,13 @@ app.post('/api/system/update', authenticateToken, async (req, res) => {
console.log('Starting system update from directory:', projectRoot);
// Run the update command
const updateCommand = 'git checkout main && git pull && npm install';
// Run the update command based on install mode
const updateCommand = installMode === 'git'
? 'git checkout main && git pull && npm install'
: 'npm install -g @siteboon/claude-code-ui@latest';
const child = spawn('sh', ['-c', updateCommand], {
cwd: projectRoot,
cwd: installMode === 'git' ? projectRoot : os.homedir(),
env: process.env
});

12
src/components/modals/VersionUpgradeModal.tsx
View File

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { authenticatedFetch } from "../../utils/api";
import { ReleaseInfo } from "../../types/sharedTypes";
import type { InstallMode } from "../../hooks/useVersionCheck";
interface VersionUpgradeModalProps {
isOpen: boolean;
@@ -9,6 +10,7 @@ interface VersionUpgradeModalProps {
releaseInfo: ReleaseInfo | null;
currentVersion: string;
latestVersion: string | null;
installMode: InstallMode;
}
export default function VersionUpgradeModal({
@@ -16,9 +18,13 @@ export default function VersionUpgradeModal({
onClose,
releaseInfo,
currentVersion,
latestVersion
latestVersion,
installMode
}: VersionUpgradeModalProps) {
const { t } = useTranslation('common');
const upgradeCommand = installMode === 'npm'
? t('versionUpdate.npmUpgradeCommand')
: 'git checkout main && git pull && npm install';
const [isUpdating, setIsUpdating] = useState(false);
const [updateOutput, setUpdateOutput] = useState('');
const [updateError, setUpdateError] = useState('');
@@ -150,7 +156,7 @@ export default function VersionUpgradeModal({
<h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.manualUpgrade')}</h3>
<div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 border">
<code className="text-sm text-gray-800 dark:text-gray-200 font-mono">
git checkout main && git pull && npm install
{upgradeCommand}
</code>
</div>
<p className="text-xs text-gray-600 dark:text-gray-400">
@@ -171,7 +177,7 @@ export default function VersionUpgradeModal({
<>
<button
onClick={() => {
navigator.clipboard.writeText('git checkout main && git pull && npm install');
navigator.clipboard.writeText(upgradeCommand);
}}
className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
>

3
src/components/sidebar/view/Sidebar.tsx
View File

@@ -38,7 +38,7 @@ function Sidebar({
}: SidebarProps) {
const { t } = useTranslation(['sidebar', 'common']);
const { isPWA } = useDeviceSettings({ trackMobile: false });
const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck(
const { updateAvailable, latestVersion, currentVersion, releaseInfo, installMode } = useVersionCheck(
'siteboon',
'claudecodeui',
);
@@ -200,6 +200,7 @@ function Sidebar({
releaseInfo={releaseInfo}
currentVersion={currentVersion}
latestVersion={latestVersion}
installMode={installMode}
t={t}
/>

4
src/components/sidebar/view/subcomponents/SidebarModals.tsx
View File

@@ -8,6 +8,7 @@ import Settings from '../../../Settings';
import VersionUpgradeModal from '../../../modals/VersionUpgradeModal';
import type { Project } from '../../../../types/app';
import type { ReleaseInfo } from '../../../../types/sharedTypes';
import type { InstallMode } from '../../../../hooks/useVersionCheck';
import { normalizeProjectForSettings } from '../../utils/utils';
import type { DeleteProjectConfirmation, SessionDeleteConfirmation, SettingsProject } from '../../types/types';
@@ -30,6 +31,7 @@ type SidebarModalsProps = {
releaseInfo: ReleaseInfo | null;
currentVersion: string;
latestVersion: string | null;
installMode: InstallMode;
t: TFunction;
};
@@ -65,6 +67,7 @@ export default function SidebarModals({
releaseInfo,
currentVersion,
latestVersion,
installMode,
t,
}: SidebarModalsProps) {
// Settings expects project identity/path fields to be present for dropdown labels and local-scope MCP config.
@@ -199,6 +202,7 @@ export default function SidebarModals({
releaseInfo={releaseInfo}
currentVersion={currentVersion}
latestVersion={latestVersion}
installMode={installMode}
/>
</>
);

20
src/hooks/useVersionCheck.ts
View File

@@ -21,10 +21,28 @@ const compareVersions = (v1: string, v2: string) => {
return 0;
};
export type InstallMode = 'git' | 'npm';
export const useVersionCheck = (owner: string, repo: string) => {
const [updateAvailable, setUpdateAvailable] = useState(false);
const [latestVersion, setLatestVersion] = useState<string | null>(null);
const [releaseInfo, setReleaseInfo] = useState<ReleaseInfo | null>(null);
const [installMode, setInstallMode] = useState<InstallMode>('git');
useEffect(() => {
const fetchInstallMode = async () => {
try {
const response = await fetch('/health');
const data = await response.json();
if (data.installMode === 'npm' || data.installMode === 'git') {
setInstallMode(data.installMode);
}
} catch {
// Default to git on error
}
};
fetchInstallMode();
}, []);
useEffect(() => {
const checkVersion = async () => {
@@ -66,5 +84,5 @@ export const useVersionCheck = (owner: string, repo: string) => {
return () => clearInterval(interval);
}, [owner, repo]);
return { updateAvailable, latestVersion, currentVersion: version, releaseInfo };
return { updateAvailable, latestVersion, currentVersion: version, releaseInfo, installMode };
};

1
src/i18n/locales/en/common.json
View File

@@ -200,6 +200,7 @@
"viewFullRelease": "View full release",
"updateProgress": "Update Progress:",
"manualUpgrade": "Manual upgrade:",
"npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
"manualUpgradeHint": "Or click \"Update Now\" to run the update automatically.",
"updateCompleted": "Update completed successfully!",
"restartServer": "Please restart the server to apply changes.",

1
src/i18n/locales/ja/common.json
View File

@@ -200,6 +200,7 @@
"viewFullRelease": "リリース全文を見る",
"updateProgress": "アップデートの進捗:",
"manualUpgrade": "手動アップグレード:",
"npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
"manualUpgradeHint": "または「今すぐ更新」をクリックして自動的にアップデートを実行できます。",
"updateCompleted": "アップデートが完了しました！",
"restartServer": "変更を適用するにはサーバーを再起動してください。",

1
src/i18n/locales/ko/common.json
View File

@@ -200,6 +200,7 @@
"viewFullRelease": "전체 릴리스 보기",
"updateProgress": "업데이트 진행 상황:",
"manualUpgrade": "수동 업그레이드:",
"npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
"manualUpgradeHint": "또는 \"지금 업데이트\"를 클릭하여 자동으로 업데이트합니다.",
"updateCompleted": "업데이트가 완료되었습니다!",
"restartServer": "변경사항을 적용하려면 서버를 재시작하세요.",

1
src/i18n/locales/zh-CN/common.json
View File

@@ -200,6 +200,7 @@
"viewFullRelease": "查看完整发布",
"updateProgress": "更新进度：",
"manualUpgrade": "手动升级：",
"npmUpgradeCommand": "npm install -g @siteboon/claude-code-ui@latest",
"manualUpgradeHint": "或点击'立即更新'以自动运行更新。",
"updateCompleted": "更新成功完成！",
"restartServer": "请重启服务器以应用更改。",