modified: package-lock.json

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "claude-code-ui",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "claude-code-ui",
-      "version": "1.0.0",
+      "version": "1.1.1",
       "license": "MIT",
       "dependencies": {
         "@anthropic-ai/claude-code": "^1.0.24",
@@ -28,7 +28,7 @@
         "express": "^4.18.2",
         "lucide-react": "^0.515.0",
         "mime-types": "^3.0.1",
-        "node-fetch": "^3.3.2",
+        "node-fetch": "^2.7.0",
         "node-pty": "^1.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2618,15 +2618,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "node_modules/data-uri-to-buffer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -2962,29 +2953,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3041,18 +3009,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "license": "MIT",
-      "dependencies": {
-        "fetch-blob": "^3.1.2"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -4286,42 +4242,23 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
     "node_modules/node-fetch": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
-      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
-      "license": "MIT",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
       "dependencies": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
+        "whatwg-url": "^5.0.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": "4.x || >=6.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
       }
     },
     "node_modules/node-pty": {
@@ -5795,6 +5732,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -6094,13 +6036,18 @@
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
     },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
-      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
       }
     },
     "node_modules/which": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-ui",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A web-based UI for Claude Code CLI",
   "main": "server/index.js",
   "scripts": {
@@ -40,7 +40,7 @@
     "express": "^4.18.2",
     "lucide-react": "^0.515.0",
     "mime-types": "^3.0.1",
-    "node-fetch": "^3.3.2",
+    "node-fetch": "^2.7.0",
     "node-pty": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

server/index.js

@@ -691,7 +691,6 @@ app.post('/api/transcribe', async (req, res) => {
         formData.append('language', 'en');
         
         // Make request to OpenAI
-        const fetch = require('node-fetch');
         const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
           method: 'POST',
           headers: {

src/App.jsx

@@ -28,6 +28,7 @@ import QuickSettingsPanel from './components/QuickSettingsPanel';
 
 import { useWebSocket } from './utils/websocket';
 import { ThemeProvider } from './contexts/ThemeContext';
+import { useVersionCheck } from './hooks/useVersionCheck';
 
 
 // Main App component with routing
@@ -35,6 +36,9 @@ function AppContent() {
   const navigate = useNavigate();
   const { sessionId } = useParams();
   
+  const { updateAvailable, latestVersion, currentVersion } = useVersionCheck('siteboon', 'claudecodeui');
+  const [showVersionModal, setShowVersionModal] = useState(false);
+  
   const [projects, setProjects] = useState([]);
   const [selectedProject, setSelectedProject] = useState(null);
   const [selectedSession, setSelectedSession] = useState(null);
@@ -399,6 +403,92 @@ function AppContent() {
     }
   };
 
+  // Version Upgrade Modal Component
+  const VersionUpgradeModal = () => {
+    if (!showVersionModal) return null;
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        {/* Backdrop */}
+        <div 
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={() => setShowVersionModal(false)}
+        />
+        
+        {/* 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">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
+                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+                </svg>
+              </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>
+              </div>
+            </div>
+            <button
+              onClick={() => setShowVersionModal(false)}
+              className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Version Info */}
+          <div className="space-y-3">
+            <div className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Current Version</span>
+              <span className="text-sm text-gray-900 dark:text-white font-mono">{currentVersion}</span>
+            </div>
+            <div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
+              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">Latest Version</span>
+              <span className="text-sm text-blue-900 dark:text-blue-100 font-mono">{latestVersion}</span>
+            </div>
+          </div>
+
+          {/* Upgrade Instructions */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-medium text-gray-900 dark:text-white">How to 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">
+              Run this command in your Claude Code UI directory to update to the latest version.
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-2 pt-2">
+            <button
+              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
+            </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>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="fixed inset-0 flex bg-background">
       {/* Fixed Desktop Sidebar */}
@@ -417,6 +507,10 @@ function AppContent() {
               isLoading={isLoadingProjects}
               onRefresh={handleSidebarRefresh}
               onShowSettings={() => setShowToolsSettings(true)}
+              updateAvailable={updateAvailable}
+              latestVersion={latestVersion}
+              currentVersion={currentVersion}
+              onShowVersionModal={() => setShowVersionModal(true)}
             />
           </div>
         </div>
@@ -458,6 +552,10 @@ function AppContent() {
               isLoading={isLoadingProjects}
               onRefresh={handleSidebarRefresh}
               onShowSettings={() => setShowToolsSettings(true)}
+              updateAvailable={updateAvailable}
+              latestVersion={latestVersion}
+              currentVersion={currentVersion}
+              onShowVersionModal={() => setShowVersionModal(true)}
             />
           </div>
         </div>
@@ -524,6 +622,9 @@ function AppContent() {
         isOpen={showToolsSettings}
         onClose={() => setShowToolsSettings(false)}
       />
+
+      {/* Version Upgrade Modal */}
+      <VersionUpgradeModal />
     </div>
   );
 }

src/components/Sidebar.jsx

@@ -44,7 +44,11 @@ function Sidebar({
   onProjectDelete,
   isLoading,
   onRefresh,
-  onShowSettings
+  onShowSettings,
+  updateAvailable,
+  latestVersion,
+  currentVersion,
+  onShowVersionModal
 }) {
   const [expandedProjects, setExpandedProjects] = useState(new Set());
   const [editingProject, setEditingProject] = useState(null);
@@ -1036,6 +1040,50 @@ function Sidebar({
         </div>
       </ScrollArea>
       
+      {/* Version Update Notification */}
+      {updateAvailable && (
+        <div className="md:p-2 border-t border-border/50 flex-shrink-0">
+          {/* Desktop Version Notification */}
+          <div className="hidden md:block">
+            <Button
+              variant="ghost"
+              className="w-full justify-start gap-3 p-3 h-auto font-normal text-left hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors duration-200 border border-blue-200 dark:border-blue-700 rounded-lg mb-2"
+              onClick={onShowVersionModal}
+            >
+              <div className="relative">
+                <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+                </svg>
+                <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-xs text-blue-600 dark:text-blue-400">Version {latestVersion} is ready</div>
+              </div>
+            </Button>
+          </div>
+          
+          {/* Mobile Version Notification */}
+          <div className="md:hidden p-3 pb-2">
+            <button
+              className="w-full h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-xl flex items-center justify-start gap-3 px-4 active:scale-[0.98] transition-all duration-150"
+              onClick={onShowVersionModal}
+            >
+              <div className="relative">
+                <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
+                </svg>
+                <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-xs text-blue-600 dark:text-blue-400">Version {latestVersion} is ready</div>
+              </div>
+            </button>
+          </div>
+        </div>
+      )}
+      
       {/* Settings Section */}
       <div className="md:p-2 md:border-t md:border-border flex-shrink-0">
         {/* Mobile Settings */}

src/hooks/useVersionCheck.js

@@ -0,0 +1,39 @@
+// hooks/useVersionCheck.js
+import { useState, useEffect } from 'react';
+import { version } from '../../package.json';
+
+export const useVersionCheck = (owner, repo) => {
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [latestVersion, setLatestVersion] = 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);
+        } else {
+          // No releases found, don't show update notification
+          setUpdateAvailable(false);
+          setLatestVersion(null);
+        }
+      } catch (error) {
+        console.error('Version check failed:', error);
+        // On error, don't show update notification
+        setUpdateAvailable(false);
+        setLatestVersion(null);
+      }
+    };
+
+    checkVersion();
+    const interval = setInterval(checkVersion, 5 * 60 * 1000); // Check every 5 minutes
+    return () => clearInterval(interval);
+  }, [owner, repo]);
+
+  return { updateAvailable, latestVersion, currentVersion: version };
+};