feat(editor): add sidebar mode to CodeEditor component

Add an optional  prop to the CodeEditor component to support
rendering in both modal and sidebar layouts. When enabled, the editor
adapts its container styling and removes the fixed overlay positioning,
allowing it to be embedded inline. This includes conditional rendering
of the loading state and main container to properly display within a
sidebar context while maintaining the existing modal behavior as the
default.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@siteboon/claude-code-ui",
-  "version": "1.10.0",
+  "version": "1.10.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@siteboon/claude-code-ui",
-      "version": "1.10.0",
+      "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.0",
+  "version": "1.10.4",
   "description": "A web-based UI for Claude Code CLI",
   "type": "module",
   "main": "server/index.js",
@@ -27,7 +27,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "start": "npm run build && npm run server",
-    "release": "release-it"
+    "release": "./release.sh"
   },
   "keywords": [
     "claude coode",

release.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+# Load environment variables from .env
+export $(grep -v '^#' .env | grep '^GITHUB_TOKEN=' | xargs)
+exec npx release-it "$@"

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

@@ -20,6 +20,7 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { BrowserRouter as Router, Routes, Route, useNavigate, useParams } from 'react-router-dom';
+import { Settings as SettingsIcon, Sparkles } from 'lucide-react';
 import Sidebar from './components/Sidebar';
 import MainContent from './components/MainContent';
 import MobileNav from './components/MobileNav';
@@ -42,7 +43,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([]);
@@ -60,6 +61,7 @@ function AppContent() {
   const [showThinking, setShowThinking] = useLocalStorage('showThinking', true);
   const [autoScrollToBottom, setAutoScrollToBottom] = useLocalStorage('autoScrollToBottom', true);
   const [sendByCtrlEnter, setSendByCtrlEnter] = useLocalStorage('sendByCtrlEnter', false);
+  const [sidebarVisible, setSidebarVisible] = useLocalStorage('sidebarVisible', true);
   // Session Protection System: Track sessions with active conversations to prevent
   // automatic project updates from interrupting ongoing chats. When a user sends
   // a message, the session is marked as "active" and project updates are paused
@@ -536,8 +538,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 +600,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 +613,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 +640,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 +698,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>
@@ -625,27 +736,78 @@ function AppContent() {
     <div className="fixed inset-0 flex bg-background">
       {/* Fixed Desktop Sidebar */}
       {!isMobile && (
-        <div className="w-80 flex-shrink-0 border-r border-border bg-card">
+        <div
+          className={`flex-shrink-0 border-r border-border bg-card transition-all duration-300 ${
+            sidebarVisible ? 'w-80' : 'w-14'
+          }`}
+        >
           <div className="h-full overflow-hidden">
-            <Sidebar
+            {sidebarVisible ? (
-              projects={projects}
+              <Sidebar
-              selectedProject={selectedProject}
+                projects={projects}
-              selectedSession={selectedSession}
+                selectedProject={selectedProject}
-              onProjectSelect={handleProjectSelect}
+                selectedSession={selectedSession}
-              onSessionSelect={handleSessionSelect}
+                onProjectSelect={handleProjectSelect}
-              onNewSession={handleNewSession}
+                onSessionSelect={handleSessionSelect}
-              onSessionDelete={handleSessionDelete}
+                onNewSession={handleNewSession}
-              onProjectDelete={handleProjectDelete}
+                onSessionDelete={handleSessionDelete}
-              isLoading={isLoadingProjects}
+                onProjectDelete={handleProjectDelete}
-              onRefresh={handleSidebarRefresh}
+                isLoading={isLoadingProjects}
-              onShowSettings={() => setShowSettings(true)}
+                onRefresh={handleSidebarRefresh}
-              updateAvailable={updateAvailable}
+                onShowSettings={() => setShowSettings(true)}
-              latestVersion={latestVersion}
+                updateAvailable={updateAvailable}
-              currentVersion={currentVersion}
+                latestVersion={latestVersion}
-              onShowVersionModal={() => setShowVersionModal(true)}
+                currentVersion={currentVersion}
-              isPWA={isPWA}
+                releaseInfo={releaseInfo}
-              isMobile={isMobile}
+                onShowVersionModal={() => setShowVersionModal(true)}
-            />
+                isPWA={isPWA}
+                isMobile={isMobile}
+                onToggleSidebar={() => setSidebarVisible(false)}
+              />
+            ) : (
+              /* Collapsed Sidebar */
+              <div className="h-full flex flex-col items-center py-4 gap-4">
+                {/* Expand Button */}
+                <button
+                  onClick={() => setSidebarVisible(true)}
+                  className="p-2 hover:bg-accent rounded-md transition-colors duration-200 group"
+                  aria-label="Show sidebar"
+                  title="Show sidebar"
+                >
+                  <svg
+                    className="w-5 h-5 text-foreground group-hover:scale-110 transition-transform"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                  </svg>
+                </button>
+
+                {/* Settings Icon */}
+                <button
+                  onClick={() => setShowSettings(true)}
+                  className="p-2 hover:bg-accent rounded-md transition-colors duration-200"
+                  aria-label="Settings"
+                  title="Settings"
+                >
+                  <SettingsIcon className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors" />
+                </button>
+
+                {/* Update Indicator */}
+                {updateAvailable && (
+                  <button
+                    onClick={() => setShowVersionModal(true)}
+                    className="relative p-2 hover:bg-accent rounded-md transition-colors duration-200"
+                    aria-label="Update available"
+                    title="Update available"
+                  >
+                    <Sparkles className="w-5 h-5 text-blue-500" />
+                    <span className="absolute top-1 right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+                  </button>
+                )}
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -691,9 +853,11 @@ function AppContent() {
               updateAvailable={updateAvailable}
               latestVersion={latestVersion}
               currentVersion={currentVersion}
+              releaseInfo={releaseInfo}
               onShowVersionModal={() => setShowVersionModal(true)}
               isPWA={isPWA}
               isMobile={isMobile}
+              onToggleSidebar={() => setSidebarVisible(false)}
             />
           </div>
         </div>

src/components/ChatInterface.jsx

@@ -514,7 +514,6 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                             </svg>
                             <span className="flex items-center gap-2">
-                              <span className="text-lg leading-none">📝</span>
                               <span>View edit diff for</span>
                             </span> 
                             <button

src/components/CodeEditor.jsx

@@ -13,7 +13,7 @@ import { showMinimap } from '@replit/codemirror-minimap';
 import { X, Save, Download, Maximize2, Minimize2, Eye, EyeOff } from 'lucide-react';
 import { api } from '../utils/api';
 
-function CodeEditor({ file, onClose, projectPath }) {
+function CodeEditor({ file, onClose, projectPath, isSidebar = false }) {
   const [content, setContent] = useState('');
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -321,14 +321,23 @@ function CodeEditor({ file, onClose, projectPath }) {
             }
           `}
         </style>
-        <div className="fixed inset-0 z-50 md:bg-black/50 md:flex md:items-center md:justify-center">
+        {isSidebar ? (
-          <div className="code-editor-loading w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center">
+          <div className="w-full h-full flex items-center justify-center bg-white dark:bg-gray-900">
             <div className="flex items-center gap-3">
               <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
               <span className="text-gray-900 dark:text-white">Loading {file.name}...</span>
             </div>
           </div>
-        </div>
+        ) : (
+          <div className="fixed inset-0 z-50 md:bg-black/50 md:flex md:items-center md:justify-center">
+            <div className="code-editor-loading w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center">
+              <div className="flex items-center gap-3">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
+                <span className="text-gray-900 dark:text-white">Loading {file.name}...</span>
+              </div>
+            </div>
+          </div>
+        )}
       </>
     );
   }
@@ -403,33 +412,32 @@ function CodeEditor({ file, onClose, projectPath }) {
           }
         `}
       </style>
-      <div className={`fixed inset-0 z-50 ${
+      <div className={isSidebar ?
+        'w-full h-full flex flex-col' :
+        `fixed inset-0 z-50 ${
           // Mobile: native fullscreen, Desktop: modal with backdrop
           'md:bg-black/50 md:flex md:items-center md:justify-center md:p-4'
         } ${isFullscreen ? 'md:p-0' : ''}`}>
-        <div className={`bg-white shadow-2xl flex flex-col ${
+        <div className={isSidebar ?
-        // Mobile: always fullscreen, Desktop: modal sizing
+          'bg-white dark:bg-gray-900 flex flex-col w-full h-full' :
-        'w-full h-full md:rounded-lg md:shadow-2xl' +
+          `bg-white shadow-2xl flex flex-col ${
-        (isFullscreen ? ' md:w-full md:h-full md:rounded-none' : ' md:w-full md:max-w-6xl md:h-[80vh] md:max-h-[80vh]')
+          // Mobile: always fullscreen, Desktop: modal sizing
-      }`}>
+          'w-full h-full md:rounded-lg md:shadow-2xl' +
+          (isFullscreen ? ' md:w-full md:h-full md:rounded-none' : ' md:w-full md:max-w-6xl md:h-[80vh] md:max-h-[80vh]')
+        }`}>
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0 min-w-0">
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 min-w-0">
           <div className="flex items-center gap-3 min-w-0 flex-1">
-            <div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center flex-shrink-0">
-              <span className="text-white text-sm font-mono">
-                {file.name.split('.').pop()?.toUpperCase() || 'FILE'}
-              </span>
-            </div>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2 min-w-0">
-                <h3 className="font-medium text-gray-900 truncate">{file.name}</h3>
+                <h3 className="font-medium text-gray-900 dark:text-white truncate">{file.name}</h3>
                 {file.diffInfo && (
-                  <span className="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded whitespace-nowrap">
+                  <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 px-2 py-1 rounded whitespace-nowrap">
                     📝 Has changes
                   </span>
                 )}
               </div>
-              <p className="text-sm text-gray-500 truncate">{file.path}</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400 truncate">{file.path}</p>
             </div>
           </div>
 
@@ -496,13 +504,15 @@ function CodeEditor({ file, onClose, projectPath }) {
               )}
             </button>
 
-            <button
+            {!isSidebar && (
-              onClick={toggleFullscreen}
+              <button
-              className="hidden md:flex p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 items-center justify-center"
+                onClick={toggleFullscreen}
-              title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+                className="hidden md:flex p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 items-center justify-center"
-            >
+                title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-              {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
+              >
-            </button>
+                {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
+              </button>
+            )}
 
             <button
               onClick={onClose}
@@ -565,7 +575,6 @@ function CodeEditor({ file, onClose, projectPath }) {
           <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
             <span>Lines: {content.split('\n').length}</span>
             <span>Characters: {content.length}</span>
-            <span>Language: {file.name.split('.').pop()?.toUpperCase() || 'Text'}</span>
           </div>
 
           <div className="text-sm text-gray-500 dark:text-gray-400">

src/components/MainContent.jsx

@@ -11,7 +11,7 @@
  * No session protection logic is implemented here - it's purely a props bridge.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import ChatInterface from './ChatInterface';
 import FileTree from './FileTree';
 import CodeEditor from './CodeEditor';
@@ -28,13 +28,13 @@ import { useTaskMaster } from '../contexts/TaskMasterContext';
 import { useTasksSettings } from '../contexts/TasksSettingsContext';
 import { api } from '../utils/api';
 
-function MainContent({ 
+function MainContent({
-  selectedProject, 
+  selectedProject,
-  selectedSession, 
+  selectedSession,
-  activeTab, 
+  activeTab,
-  setActiveTab, 
+  setActiveTab,
-  ws, 
+  ws,
-  sendMessage, 
+  sendMessage,
   messages,
   isMobile,
   isPWA,
@@ -61,6 +61,9 @@ function MainContent({
   const [editingFile, setEditingFile] = useState(null);
   const [selectedTask, setSelectedTask] = useState(null);
   const [showTaskDetail, setShowTaskDetail] = useState(false);
+  const [editorWidth, setEditorWidth] = useState(600);
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeRef = useRef(null);
   
   // PRD Editor state
   const [showPRDEditor, setShowPRDEditor] = useState(false);
@@ -153,6 +156,52 @@ function MainContent({
     console.log('Update task status:', taskId, newStatus);
     refreshTasks?.();
   };
+
+  // Handle resize functionality
+  const handleMouseDown = (e) => {
+    if (isMobile) return; // Disable resize on mobile
+    setIsResizing(true);
+    e.preventDefault();
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isResizing) return;
+
+      const container = resizeRef.current?.parentElement;
+      if (!container) return;
+
+      const containerRect = container.getBoundingClientRect();
+      const newWidth = containerRect.right - e.clientX;
+
+      // Min width: 300px, Max width: 80% of container
+      const minWidth = 300;
+      const maxWidth = containerRect.width * 0.8;
+
+      if (newWidth >= minWidth && newWidth <= maxWidth) {
+        setEditorWidth(newWidth);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    if (isResizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isResizing]);
+
   if (isLoading) {
     return (
       <div className="h-full flex flex-col">
@@ -234,10 +283,10 @@ function MainContent({
   return (
     <div className="h-full flex flex-col">
       {/* Header with tabs */}
-      <div 
+      <div
         className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-3 sm:p-4 pwa-header-safe flex-shrink-0"
       >
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between relative">
           <div className="flex items-center space-x-2 sm:space-x-3">
             {isMobile && (
               <button
@@ -409,11 +458,13 @@ function MainContent({
         </div>
       </div>
 
-      {/* Content Area */}
+      {/* Content Area with Right Sidebar */}
-      <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+      <div className="flex-1 flex min-h-0 overflow-hidden">
-        <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
+        {/* Main Content */}
-          <ErrorBoundary showDetails={true}>
+        <div className={`flex-1 flex flex-col min-h-0 overflow-hidden ${editingFile ? 'mr-0' : ''}`}>
-            <ChatInterface
+          <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
+            <ErrorBoundary showDetails={true}>
+              <ChatInterface
               selectedProject={selectedProject}
               selectedSession={selectedSession}
               ws={ws}
@@ -513,14 +564,45 @@ function MainContent({
             onClearLogs={() => setServerLogs([])}
           /> */}
         </div>
+        </div>
+
+        {/* Code Editor Right Sidebar - Desktop only, Mobile uses modal */}
+        {editingFile && !isMobile && (
+          <>
+            {/* Resize Handle */}
+            <div
+              ref={resizeRef}
+              onMouseDown={handleMouseDown}
+              className="flex-shrink-0 w-1 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 cursor-col-resize transition-colors relative group"
+              title="Drag to resize"
+            >
+              {/* Visual indicator on hover */}
+              <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-blue-500 dark:bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity" />
+            </div>
+
+            {/* Editor Sidebar */}
+            <div
+              className="flex-shrink-0 border-l border-gray-200 dark:border-gray-700 h-full overflow-hidden"
+              style={{ width: `${editorWidth}px` }}
+            >
+              <CodeEditor
+                file={editingFile}
+                onClose={handleCloseEditor}
+                projectPath={selectedProject?.path}
+                isSidebar={true}
+              />
+            </div>
+          </>
+        )}
       </div>
 
-      {/* Code Editor Modal */}
+      {/* Code Editor Modal for Mobile */}
-      {editingFile && (
+      {editingFile && isMobile && (
         <CodeEditor
           file={editingFile}
           onClose={handleCloseEditor}
           projectPath={selectedProject?.path}
+          isSidebar={false}
         />
       )}
 

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,9 +54,11 @@ function Sidebar({
   updateAvailable,
   latestVersion,
   currentVersion,
+  releaseInfo,
   onShowVersionModal,
   isPWA,
-  isMobile
+  isMobile,
+  onToggleSidebar
 }) {
   const [expandedProjects, setExpandedProjects] = useState(new Set());
   const [editingProject, setEditingProject] = useState(null);
@@ -586,34 +588,24 @@ function Sidebar({
               <p className="text-sm text-muted-foreground">AI coding assistant interface</p>
             </div>
           </div>
-          <div className="flex gap-2">
+          {onToggleSidebar && (
             <Button
               variant="ghost"
               size="sm"
-              className="h-9 w-9 px-0 hover:bg-accent transition-colors duration-200 group"
+              className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200"
-              onClick={async () => {
+              onClick={onToggleSidebar}
-                setIsRefreshing(true);
+              title="Hide sidebar"
-                try {
-                  await onRefresh();
-                } finally {
-                  setIsRefreshing(false);
-                }
-              }}
-              disabled={isRefreshing}
-              title="Refresh projects and sessions (Ctrl+R)"
             >
-              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''} group-hover:rotate-180 transition-transform duration-300`} />
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
             </Button>
-            <Button
+          )}
-              variant="default"
-              size="sm"
-              className="h-9 w-9 px-0 bg-primary hover:bg-primary/90 transition-all duration-200 shadow-sm hover:shadow-md"
-              onClick={() => setShowNewProject(true)}
-              title="Create new project (Ctrl+N)"
-            >
-              <FolderPlus className="w-4 h-4" />
-            </Button>
-          </div>
         </div>
         
         {/* Mobile Header */}
@@ -913,9 +905,9 @@ function Sidebar({
         </div>
       )}
       
-      {/* Search Filter */}
+      {/* Search Filter and Actions */}
       {projects.length > 0 && !isLoading && (
-        <div className="px-3 md:px-4 py-2 border-b border-border">
+        <div className="px-3 md:px-4 py-2 border-b border-border space-y-2">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
             <Input
@@ -934,6 +926,39 @@ function Sidebar({
               </button>
             )}
           </div>
+
+          {/* Action Buttons - Desktop only */}
+          {!isMobile && (
+            <div className="flex gap-2">
+              <Button
+                variant="default"
+                size="sm"
+                className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90 transition-all duration-200"
+                onClick={() => setShowNewProject(true)}
+                title="Create new project (Ctrl+N)"
+              >
+                <FolderPlus className="w-3.5 h-3.5 mr-1.5" />
+                New Project
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200 group"
+                onClick={async () => {
+                  setIsRefreshing(true);
+                  try {
+                    await onRefresh();
+                  } finally {
+                    setIsRefreshing(false);
+                  }
+                }}
+                disabled={isRefreshing}
+                title="Refresh projects and sessions (Ctrl+R)"
+              >
+                <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''} group-hover:rotate-180 transition-transform duration-300`} />
+              </Button>
+            </div>
+          )}
         </div>
       )}
       
@@ -1611,8 +1636,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 +1657,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 };
 };