Release 1.10.4

Add automatic update functionality to allow users to update the
application directly from the UI without manual git commands.

Changes:
- Add POST /api/system/update endpoint that runs git pull and npm
  install
- Enhance useVersionCheck hook to fetch release information including
  changelog
- Update VersionUpgradeModal to display changelog and handle one-click
  updates
- Add update progress tracking with output display and error handling
- Bump version to 1.10.4

The update endpoint executes git checkout main, git pull, and npm
install, providing real-time output to the user. After successful
update, users are prompted to restart the server.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@siteboon/claude-code-ui",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@siteboon/claude-code-ui",
-      "version": "1.10.2",
+      "version": "1.10.4",
       "license": "MIT",
       "dependencies": {
         "@anthropic-ai/claude-agent-sdk": "^0.1.29",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siteboon/claude-code-ui",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "description": "A web-based UI for Claude Code CLI",
   "type": "module",
   "main": "server/index.js",

server/index.js

@@ -237,6 +237,71 @@ app.get('/api/config', authenticateToken, (req, res) => {
     });
 });
 
+// System update endpoint
+app.post('/api/system/update', authenticateToken, async (req, res) => {
+    try {
+        // Get the project root directory (parent of server directory)
+        const projectRoot = path.join(__dirname, '..');
+
+        console.log('Starting system update from directory:', projectRoot);
+
+        // Run the update command
+        const updateCommand = 'git checkout main && git pull && npm install';
+
+        const child = spawn('sh', ['-c', updateCommand], {
+            cwd: projectRoot,
+            env: process.env
+        });
+
+        let output = '';
+        let errorOutput = '';
+
+        child.stdout.on('data', (data) => {
+            const text = data.toString();
+            output += text;
+            console.log('Update output:', text);
+        });
+
+        child.stderr.on('data', (data) => {
+            const text = data.toString();
+            errorOutput += text;
+            console.error('Update error:', text);
+        });
+
+        child.on('close', (code) => {
+            if (code === 0) {
+                res.json({
+                    success: true,
+                    output: output || 'Update completed successfully',
+                    message: 'Update completed. Please restart the server to apply changes.'
+                });
+            } else {
+                res.status(500).json({
+                    success: false,
+                    error: 'Update command failed',
+                    output: output,
+                    errorOutput: errorOutput
+                });
+            }
+        });
+
+        child.on('error', (error) => {
+            console.error('Update process error:', error);
+            res.status(500).json({
+                success: false,
+                error: error.message
+            });
+        });
+
+    } catch (error) {
+        console.error('System update error:', error);
+        res.status(500).json({
+            success: false,
+            error: error.message
+        });
+    }
+});
+
 app.get('/api/projects', authenticateToken, async (req, res) => {
     try {
         const projects = await getProjects();

server/routes/agent.js

@@ -90,13 +90,13 @@ function normalizeGitHubUrl(url) {
 function parseGitHubUrl(url) {
   // Handle HTTPS URLs: https://github.com/owner/repo or https://github.com/owner/repo.git
   // Handle SSH URLs: git@github.com:owner/repo or git@github.com:owner/repo.git
-  const match = url.match(/github\.com[:/]([^/]+)\/([^/.]+)/);
+  const match = url.match(/github\.com[:/]([^/]+)\/([^/]+?)(?:\.git)?$/);
   if (!match) {
     throw new Error('Invalid GitHub URL format');
   }
   return {
     owner: match[1],
-    repo: match[2].replace('.git', '')
+    repo: match[2].replace(/\.git$/, '')
   };
 }
 
@@ -114,14 +114,37 @@ function autogenerateBranchName(message) {
     .replace(/-+/g, '-') // Replace multiple hyphens with single
     .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
 
-  // Limit length to 50 characters
+  // Ensure non-empty fallback
-  if (branchName.length > 50) {
+  if (!branchName) {
-    branchName = branchName.substring(0, 50).replace(/-$/, '');
+    branchName = 'task';
   }
 
-  // Add timestamp suffix to ensure uniqueness
+  // Generate timestamp suffix (last 6 chars of base36 timestamp)
-  const timestamp = Date.now().toString(36).substring(-6);
+  const timestamp = Date.now().toString(36).slice(-6);
-  branchName = `${branchName}-${timestamp}`;
+  const suffix = `-${timestamp}`;
+
+  // Limit length to ensure total length including suffix fits within 50 characters
+  const maxBaseLength = 50 - suffix.length;
+  if (branchName.length > maxBaseLength) {
+    branchName = branchName.substring(0, maxBaseLength);
+  }
+
+  // Remove any trailing hyphen after truncation and ensure no leading hyphen
+  branchName = branchName.replace(/-$/, '').replace(/^-+/, '');
+
+  // If still empty or starts with hyphen after cleanup, use fallback
+  if (!branchName || branchName.startsWith('-')) {
+    branchName = 'task';
+  }
+
+  // Combine base name with timestamp suffix
+  branchName = `${branchName}${suffix}`;
+
+  // Final validation: ensure it matches safe pattern
+  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(branchName)) {
+    // Fallback to deterministic safe name
+    return `branch-${timestamp}`;
+  }
 
   return branchName;
 }

src/App.jsx

@@ -42,7 +42,7 @@ function AppContent() {
   const navigate = useNavigate();
   const { sessionId } = useParams();
   
-  const { updateAvailable, latestVersion, currentVersion } = useVersionCheck('siteboon', 'claudecodeui');
+  const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
   const [showVersionModal, setShowVersionModal] = useState(false);
   
   const [projects, setProjects] = useState([]);
@@ -536,8 +536,60 @@ function AppContent() {
 
   // Version Upgrade Modal Component
   const VersionUpgradeModal = () => {
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [updateOutput, setUpdateOutput] = useState('');
+    const [updateError, setUpdateError] = useState('');
+
     if (!showVersionModal) return null;
 
+    // Clean up changelog by removing GitHub-specific metadata
+    const cleanChangelog = (body) => {
+      if (!body) return '';
+
+      return body
+        // Remove full commit hashes (40 character hex strings)
+        .replace(/\b[0-9a-f]{40}\b/gi, '')
+        // Remove short commit hashes (7-10 character hex strings at start of line or after dash/space)
+        .replace(/(?:^|\s|-)([0-9a-f]{7,10})\b/gi, '')
+        // Remove "Full Changelog" links
+        .replace(/\*\*Full Changelog\*\*:.*$/gim, '')
+        // Remove compare links (e.g., https://github.com/.../compare/v1.0.0...v1.0.1)
+        .replace(/https?:\/\/github\.com\/[^\/]+\/[^\/]+\/compare\/[^\s)]+/gi, '')
+        // Clean up multiple consecutive empty lines
+        .replace(/\n\s*\n\s*\n/g, '\n\n')
+        // Trim whitespace
+        .trim();
+    };
+
+    const handleUpdateNow = async () => {
+      setIsUpdating(true);
+      setUpdateOutput('Starting update...\n');
+      setUpdateError('');
+
+      try {
+        // Call the backend API to run the update command
+        const response = await authenticatedFetch('/api/system/update', {
+          method: 'POST',
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+          setUpdateOutput(prev => prev + data.output + '\n');
+          setUpdateOutput(prev => prev + '\n✅ Update completed successfully!\n');
+          setUpdateOutput(prev => prev + 'Please restart the server to apply changes.\n');
+        } else {
+          setUpdateError(data.error || 'Update failed');
+          setUpdateOutput(prev => prev + '\n❌ Update failed: ' + (data.error || 'Unknown error') + '\n');
+        }
+      } catch (error) {
+        setUpdateError(error.message);
+        setUpdateOutput(prev => prev + '\n❌ Update failed: ' + error.message + '\n');
+      } finally {
+        setIsUpdating(false);
+      }
+    };
+
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center">
         {/* Backdrop */}
@@ -546,9 +598,9 @@ function AppContent() {
           onClick={() => setShowVersionModal(false)}
           aria-label="Close version upgrade modal"
         />
-        
+
         {/* Modal */}
-        <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-md mx-4 p-6 space-y-4">
+        <div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-2xl mx-4 p-6 space-y-4 max-h-[90vh] overflow-y-auto">
           {/* Header */}
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
@@ -559,7 +611,9 @@ function AppContent() {
               </div>
               <div>
                 <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Update Available</h2>
-                <p className="text-sm text-gray-500 dark:text-gray-400">A new version is ready</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {releaseInfo?.title || 'A new version is ready'}
+                </p>
               </div>
             </div>
             <button
@@ -584,18 +638,57 @@ function AppContent() {
             </div>
           </div>
 
-          {/* Upgrade Instructions */}
+          {/* Changelog */}
-          <div className="space-y-3">
+          {releaseInfo?.body && (
-            <h3 className="text-sm font-medium text-gray-900 dark:text-white">How to upgrade:</h3>
+            <div className="space-y-3">
-            <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 border">
+              <div className="flex items-center justify-between">
-              <code className="text-sm text-gray-800 dark:text-gray-200 font-mono">
+                <h3 className="text-sm font-medium text-gray-900 dark:text-white">What's New:</h3>
-                git checkout main && git pull && npm install
+                {releaseInfo?.htmlUrl && (
-              </code>
+                  <a
+                    href={releaseInfo.htmlUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline flex items-center gap-1"
+                  >
+                    View full release
+                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                  </a>
+                )}
+              </div>
+              <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600 max-h-64 overflow-y-auto">
+                <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap prose prose-sm dark:prose-invert max-w-none">
+                  {cleanChangelog(releaseInfo.body)}
+                </div>
+              </div>
             </div>
-            <p className="text-xs text-gray-600 dark:text-gray-400">
+          )}
-              Run this command in your Claude Code UI directory to update to the latest version.
+
-            </p>
+          {/* Update Output */}
-          </div>
+          {updateOutput && (
+            <div className="space-y-2">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">Update Progress:</h3>
+              <div className="bg-gray-900 dark:bg-gray-950 rounded-lg p-4 border border-gray-700 max-h-48 overflow-y-auto">
+                <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap">{updateOutput}</pre>
+              </div>
+            </div>
+          )}
+
+          {/* Upgrade Instructions */}
+          {!isUpdating && !updateOutput && (
+            <div className="space-y-3">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">Manual upgrade:</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
+                </code>
+              </div>
+              <p className="text-xs text-gray-600 dark:text-gray-400">
+                Or click "Update Now" to run the update automatically.
+              </p>
+            </div>
+          )}
 
           {/* Actions */}
           <div className="flex gap-2 pt-2">
@@ -603,18 +696,34 @@ function AppContent() {
               onClick={() => setShowVersionModal(false)}
               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"
             >
-              Later
+              {updateOutput ? 'Close' : 'Later'}
-            </button>
-            <button
-              onClick={() => {
-                // Copy command to clipboard
-                navigator.clipboard.writeText('git checkout main && git pull && npm install');
-                setShowVersionModal(false);
-              }}
-              className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
-            >
-              Copy Command
             </button>
+            {!updateOutput && (
+              <>
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText('git checkout main && git pull && npm install');
+                  }}
+                  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"
+                >
+                  Copy Command
+                </button>
+                <button
+                  onClick={handleUpdateNow}
+                  disabled={isUpdating}
+                  className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed rounded-md transition-colors flex items-center justify-center gap-2"
+                >
+                  {isUpdating ? (
+                    <>
+                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                      Updating...
+                    </>
+                  ) : (
+                    'Update Now'
+                  )}
+                </button>
+              </>
+            )}
           </div>
         </div>
       </div>
@@ -642,6 +751,7 @@ function AppContent() {
               updateAvailable={updateAvailable}
               latestVersion={latestVersion}
               currentVersion={currentVersion}
+              releaseInfo={releaseInfo}
               onShowVersionModal={() => setShowVersionModal(true)}
               isPWA={isPWA}
               isMobile={isMobile}
@@ -691,6 +801,7 @@ function AppContent() {
               updateAvailable={updateAvailable}
               latestVersion={latestVersion}
               currentVersion={currentVersion}
+              releaseInfo={releaseInfo}
               onShowVersionModal={() => setShowVersionModal(true)}
               isPWA={isPWA}
               isMobile={isMobile}

src/components/Sidebar.jsx

@@ -39,12 +39,12 @@ const formatTimeAgo = (dateString, currentTime) => {
   return date.toLocaleDateString();
 };
 
-function Sidebar({ 
+function Sidebar({
-  projects, 
+  projects,
-  selectedProject, 
+  selectedProject,
-  selectedSession, 
+  selectedSession,
-  onProjectSelect, 
+  onProjectSelect,
-  onSessionSelect, 
+  onSessionSelect,
   onNewSession,
   onSessionDelete,
   onProjectDelete,
@@ -54,6 +54,7 @@ function Sidebar({
   updateAvailable,
   latestVersion,
   currentVersion,
+  releaseInfo,
   onShowVersionModal,
   isPWA,
   isMobile
@@ -1611,8 +1612,10 @@ function Sidebar({
                 <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
               </div>
               <div className="min-w-0 flex-1">
-                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">Update Available</div>
+                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                <div className="text-xs text-blue-600 dark:text-blue-400">Version {latestVersion} is ready</div>
+                  {releaseInfo?.title || `Version ${latestVersion}`}
+                </div>
+                <div className="text-xs text-blue-600 dark:text-blue-400">Update available</div>
               </div>
             </Button>
           </div>
@@ -1630,8 +1633,10 @@ function Sidebar({
                 <div className="absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
               </div>
               <div className="min-w-0 flex-1 text-left">
-                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">Update Available</div>
+                <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
-                <div className="text-xs text-blue-600 dark:text-blue-400">Version {latestVersion} is ready</div>
+                  {releaseInfo?.title || `Version ${latestVersion}`}
+                </div>
+                <div className="text-xs text-blue-600 dark:text-blue-400">Update available</div>
               </div>
             </button>
           </div>

src/hooks/useVersionCheck.js

@@ -5,28 +5,39 @@ import { version } from '../../package.json';
 export const useVersionCheck = (owner, repo) => {
   const [updateAvailable, setUpdateAvailable] = useState(false);
   const [latestVersion, setLatestVersion] = useState(null);
+  const [releaseInfo, setReleaseInfo] = useState(null);
 
   useEffect(() => {
     const checkVersion = async () => {
       try {
         const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/releases/latest`);
         const data = await response.json();
-        
+
         // Handle the case where there might not be any releases
         if (data.tag_name) {
           const latest = data.tag_name.replace(/^v/, '');
           setLatestVersion(latest);
           setUpdateAvailable(version !== latest);
+
+          // Store release information
+          setReleaseInfo({
+            title: data.name || data.tag_name,
+            body: data.body || '',
+            htmlUrl: data.html_url || `https://github.com/${owner}/${repo}/releases/latest`,
+            publishedAt: data.published_at
+          });
         } else {
           // No releases found, don't show update notification
           setUpdateAvailable(false);
           setLatestVersion(null);
+          setReleaseInfo(null);
         }
       } catch (error) {
         console.error('Version check failed:', error);
         // On error, don't show update notification
         setUpdateAvailable(false);
         setLatestVersion(null);
+        setReleaseInfo(null);
       }
     };
 
@@ -35,5 +46,5 @@ export const useVersionCheck = (owner, repo) => {
     return () => clearInterval(interval);
   }, [owner, repo]);
 
-  return { updateAvailable, latestVersion, currentVersion: version };
+  return { updateAvailable, latestVersion, currentVersion: version, releaseInfo };
 };