Release 1.12.0

- Skip localStorage token check when VITE_IS_PLATFORM=true
- Connect to WebSocket without token parameter in platform mode
- Allows proxy-based authentication through Cloudflare edge

package-lock.json

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

package.json

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

server/index.js

@@ -270,17 +270,8 @@ app.use(express.static(path.join(__dirname, '../dist'), {
 }));
 
 // API Routes (protected)
-app.get('/api/config', authenticateToken, (req, res) => {
+// /api/config endpoint removed - no longer needed
-    const host = req.headers.host || `${req.hostname}:${PORT}`;
+// Frontend now uses window.location for WebSocket URLs
-    const protocol = req.protocol === 'https' || req.get('x-forwarded-proto') === 'https' ? 'wss' : 'ws';
-
-    console.log('Config API called - Returning host:', host, 'Protocol:', protocol);
-
-    res.json({
-        serverPort: PORT,
-        wsUrl: `${protocol}://${host}`
-    });
-});
 
 // System update endpoint
 app.post('/api/system/update', authenticateToken, async (req, res) => {

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,31 @@ 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">
+          <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>
+          {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>
   );
 }

src/components/Shell.jsx

@@ -380,43 +380,29 @@ function Shell({ selectedProject, selectedSession, isActive, initialCommand, isP
   // WebSocket connection function (called manually)
   const connectWebSocket = async () => {
     if (isConnecting || isConnected) return;
-    
+
     try {
-      // Get authentication token
+      const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
-      const token = localStorage.getItem('auth-token');
+
-      if (!token) {
+      // Construct WebSocket URL
-        console.error('No authentication token found for Shell WebSocket connection');
+      let wsUrl;
-        return;
+
-      }
+      if (isPlatform) {
-      
+        // Platform mode: Use same domain as the page (goes through proxy)
-      // Fetch server configuration to get the correct WebSocket URL
-      let wsBaseUrl;
-      try {
-        const configResponse = await fetch('/api/config', {
-          headers: {
-            'Authorization': `Bearer ${token}`
-          }
-        });
-        const config = await configResponse.json();
-        wsBaseUrl = config.wsUrl;
-        
-        // If the config returns localhost but we're not on localhost, use current host but with API server port
-        if (wsBaseUrl.includes('localhost') && !window.location.hostname.includes('localhost')) {
-          const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-          // For development, API server is typically on port 3002 when Vite is on 3001
-          const apiPort = window.location.port === '3001' ? '3002' : window.location.port;
-          wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
-        }
-      } catch (error) {
         const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        // For development, API server is typically on port 3002 when Vite is on 3001
+        wsUrl = `${protocol}//${window.location.host}/shell`;
-        const apiPort = window.location.port === '3001' ? '3002' : window.location.port;
+      } else {
-        wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
+        // OSS mode: Connect to same host:port that served the page
+        const token = localStorage.getItem('auth-token');
+        if (!token) {
+          console.error('No authentication token found for Shell WebSocket connection');
+          return;
+        }
+
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        wsUrl = `${protocol}//${window.location.host}/shell?token=${encodeURIComponent(token)}`;
       }
-      
+
-      // Include token in WebSocket URL as query parameter
-      const wsUrl = `${wsBaseUrl}/shell?token=${encodeURIComponent(token)}`;
-      
       ws.current = new WebSocket(wsUrl);
 
       ws.current.onopen = () => {

src/components/Sidebar.jsx

@@ -467,20 +467,37 @@ function Sidebar({
 
       <div
         className="h-full flex flex-col bg-card md:select-none"
+        style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
       >
       {/* Header */}
       <div className="md:p-4 md:border-b md:border-border">
         {/* Desktop Header */}
         <div className="hidden md:flex items-center justify-between">
-          <div className="flex items-center gap-3">
+          {import.meta.env.VITE_IS_PLATFORM === 'true' ? (
-            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm">
+            <a
-              <MessageSquare className="w-4 h-4 text-primary-foreground" />
+              href="https://cloudcli.ai/dashboard"
+              className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
+              title="View Environments"
+            >
+              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow">
+                <MessageSquare className="w-4 h-4 text-primary-foreground" />
+              </div>
+              <div>
+                <h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
+                <p className="text-sm text-muted-foreground">AI coding assistant interface</p>
+              </div>
+            </a>
+          ) : (
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm">
+                <MessageSquare className="w-4 h-4 text-primary-foreground" />
+              </div>
+              <div>
+                <h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
+                <p className="text-sm text-muted-foreground">AI coding assistant interface</p>
+              </div>
             </div>
-            <div>
+          )}
-              <h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
-              <p className="text-sm text-muted-foreground">AI coding assistant interface</p>
-            </div>
-          </div>
           {onToggleSidebar && (
             <Button
               variant="ghost"
@@ -500,21 +517,38 @@ function Sidebar({
             </Button>
           )}
         </div>
-
+        
         {/* Mobile Header */}
         <div
           className="md:hidden p-3 border-b border-border"
+          style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
         >
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
+            {import.meta.env.VITE_IS_PLATFORM === 'true' ? (
-              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+              <a
-                <MessageSquare className="w-4 h-4 text-primary-foreground" />
+                href="https://cloudcli.ai/dashboard"
+                className="flex items-center gap-3 active:opacity-70 transition-opacity"
+                title="View Environments"
+              >
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <MessageSquare className="w-4 h-4 text-primary-foreground" />
+                </div>
+                <div>
+                  <h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
+                  <p className="text-sm text-muted-foreground">Projects</p>
+                </div>
+              </a>
+            ) : (
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <MessageSquare className="w-4 h-4 text-primary-foreground" />
+                </div>
+                <div>
+                  <h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
+                  <p className="text-sm text-muted-foreground">Projects</p>
+                </div>
               </div>
-              <div>
+            )}
-                <h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
-                <p className="text-sm text-muted-foreground">Projects</p>
-              </div>
-            </div>
             <div className="flex gap-2">
               <button
                 className="w-8 h-8 rounded-md bg-background border border-border flex items-center justify-center active:scale-95 transition-all duration-150"
@@ -1306,7 +1340,7 @@ function Sidebar({
       {/* Settings Section */}
       <div className="md:p-2 md:border-t md:border-border flex-shrink-0">
         {/* Mobile Settings */}
-        <div className="md:hidden p-4 pb-mobile-nav border-t border-border/50">
+        <div className="md:hidden p-4 pb-20 border-t border-border/50">
           <button
             className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
             onClick={onShowSettings}

src/utils/api.js

@@ -37,9 +37,9 @@ export const api = {
     user: () => authenticatedFetch('/api/auth/user'),
     logout: () => authenticatedFetch('/api/auth/logout', { method: 'POST' }),
   },
-  
+
   // Protected endpoints
-  config: () => authenticatedFetch('/api/config'),
+  // config endpoint removed - no longer needed (frontend uses window.location)
   projects: () => authenticatedFetch('/api/projects'),
   sessions: (projectName, limit = 5, offset = 0) => 
     authenticatedFetch(`/api/projects/${projectName}/sessions?limit=${limit}&offset=${offset}`),

src/utils/websocket.js

@@ -21,41 +21,27 @@ export function useWebSocket() {
 
   const connect = async () => {
     try {
-      // Get authentication token
+      const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
-      const token = localStorage.getItem('auth-token');
+
-      if (!token) {
+      // Construct WebSocket URL
-        console.warn('No authentication token found for WebSocket connection');
+      let wsUrl;
-        return;
+
-      }
+      if (isPlatform) {
-      
+        // Platform mode: Use same domain as the page (goes through proxy)
-      // Fetch server configuration to get the correct WebSocket URL
-      let wsBaseUrl;
-      try {
-        const configResponse = await fetch('/api/config', {
-          headers: {
-            'Authorization': `Bearer ${token}`
-          }
-        });
-        const config = await configResponse.json();
-        wsBaseUrl = config.wsUrl;
-        
-        // If the config returns localhost but we're not on localhost, use current host but with API server port
-        if (wsBaseUrl.includes('localhost') && !window.location.hostname.includes('localhost')) {
-          const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-          // For development, API server is typically on port 3002 when Vite is on 3001
-          const apiPort = window.location.port === '3001' ? '3002' : window.location.port;
-          wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
-        }
-      } catch (error) {
-        console.warn('Could not fetch server config, falling back to current host with API server port');
         const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        // For development, API server is typically on port 3002 when Vite is on 3001
+        wsUrl = `${protocol}//${window.location.host}/ws`;
-        const apiPort = window.location.port === '3001' ? '3002' : window.location.port;
+      } else {
-        wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
+        // OSS mode: Connect to same host:port that served the page
+        const token = localStorage.getItem('auth-token');
+        if (!token) {
+          console.warn('No authentication token found for WebSocket connection');
+          return;
+        }
+
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        wsUrl = `${protocol}//${window.location.host}/ws?token=${encodeURIComponent(token)}`;
       }
-      
+
-      // Include token in WebSocket URL as query parameter
-      const wsUrl = `${wsBaseUrl}/ws?token=${encodeURIComponent(token)}`;
       const websocket = new WebSocket(wsUrl);
 
       websocket.onopen = () => {