Merge branch 'main' into johnhenry/env-claude-path

package.json

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

server/projects.js

@@ -572,48 +572,61 @@ async function getSessions(projectName, limit = 5, offset = 0) {
       }
     });
     
-    // Detect session continuations using leafUuid
+    // Group sessions by first user message ID
-    const sessionContinuations = new Map();
+    const sessionGroups = new Map(); // firstUserMsgId -> { latestSession, allSessions[] }
-    let pendingContinuationInfo = null;
+    const sessionToFirstUserMsgId = new Map(); // sessionId -> firstUserMsgId
-    
+
+    // Find the first user message for each session
     allEntries.forEach(entry => {
-      // Summary entries without sessionId indicate a session continuation
+      if (entry.sessionId && entry.type === 'user' && entry.parentUuid === null && entry.uuid) {
-      if (entry.type === 'summary' && !entry.sessionId && (entry.leafUuid || entry.leafUUID)) {
+        // This is a first user message in a session (parentUuid is null)
-        pendingContinuationInfo = {
+        const firstUserMsgId = entry.uuid;
-          leafUuid: entry.leafUuid || entry.leafUUID,
+
-          summary: entry.summary || 'Continued Session'
+        if (!sessionToFirstUserMsgId.has(entry.sessionId)) {
-        };
+          sessionToFirstUserMsgId.set(entry.sessionId, firstUserMsgId);
-        return;
+
-      }
+          const session = allSessions.get(entry.sessionId);
-      
+          if (session) {
-      if (entry.sessionId) {
+            if (!sessionGroups.has(firstUserMsgId)) {
-        const session = allSessions.get(entry.sessionId);
+              sessionGroups.set(firstUserMsgId, {
-        
+                latestSession: session,
-        // Apply pending continuation info
+                allSessions: [session]
-        if (session && pendingContinuationInfo) {
+              });
-          const previousSession = uuidToSessionMap.get(pendingContinuationInfo.leafUuid);
+            } else {
-          if (previousSession) {
+              const group = sessionGroups.get(firstUserMsgId);
-            session.summary = pendingContinuationInfo.summary;
+              group.allSessions.push(session);
-            sessionContinuations.set(entry.sessionId, previousSession);
+
-          }
+              // Update latest session if this one is more recent
-          pendingContinuationInfo = null;
+              if (new Date(session.lastActivity) > new Date(group.latestSession.lastActivity)) {
-        }
+                group.latestSession = session;
-        
+              }
-        // Handle summary entries with sessionId that have leafUuid
+            }
-        if (entry.type === 'summary' && (entry.leafUuid || entry.leafUUID)) {
-          const leafUuid = entry.leafUuid || entry.leafUUID;
-          const previousSession = uuidToSessionMap.get(leafUuid);
-          if (previousSession && session) {
-            sessionContinuations.set(entry.sessionId, previousSession);
           }
         }
       }
     });
-    
+
-    // Filter out continued sessions - only show the latest in each timeline
+    // Collect all sessions that don't belong to any group (standalone sessions)
-    const continuedSessions = new Set(sessionContinuations.values());
+    const groupedSessionIds = new Set();
-    const visibleSessions = Array.from(allSessions.values())
+    sessionGroups.forEach(group => {
-      .filter(session => !continuedSessions.has(session.id))
+      group.allSessions.forEach(session => groupedSessionIds.add(session.id));
+    });
+
+    const standaloneSessionsArray = Array.from(allSessions.values())
+      .filter(session => !groupedSessionIds.has(session.id));
+
+    // Combine grouped sessions (only show latest from each group) + standalone sessions
+    const latestFromGroups = Array.from(sessionGroups.values()).map(group => {
+      const session = { ...group.latestSession };
+      // Add metadata about grouping
+      if (group.allSessions.length > 1) {
+        session.isGrouped = true;
+        session.groupSize = group.allSessions.length;
+        session.groupSessions = group.allSessions.map(s => s.id);
+      }
+      return session;
+    });
+    const visibleSessions = [...latestFromGroups, ...standaloneSessionsArray]
       .sort((a, b) => new Date(b.lastActivity) - new Date(a.lastActivity));
     
     const total = visibleSessions.length;

src/App.jsx

@@ -23,7 +23,7 @@ import { BrowserRouter as Router, Routes, Route, useNavigate, useParams } from '
 import Sidebar from './components/Sidebar';
 import MainContent from './components/MainContent';
 import MobileNav from './components/MobileNav';
-import ToolsSettings from './components/ToolsSettings';
+import Settings from './components/Settings';
 import QuickSettingsPanel from './components/QuickSettingsPanel';
 
 import { ThemeProvider } from './contexts/ThemeContext';
@@ -52,7 +52,7 @@ function AppContent() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [isLoadingProjects, setIsLoadingProjects] = useState(true);
   const [isInputFocused, setIsInputFocused] = useState(false);
-  const [showToolsSettings, setShowToolsSettings] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const [showQuickSettings, setShowQuickSettings] = useState(false);
   const [autoExpandTools, setAutoExpandTools] = useState(() => {
     const saved = localStorage.getItem('autoExpandTools');
@@ -556,7 +556,7 @@ function AppContent() {
               onProjectDelete={handleProjectDelete}
               isLoading={isLoadingProjects}
               onRefresh={handleSidebarRefresh}
-              onShowSettings={() => setShowToolsSettings(true)}
+              onShowSettings={() => setShowSettings(true)}
               updateAvailable={updateAvailable}
               latestVersion={latestVersion}
               currentVersion={currentVersion}
@@ -584,9 +584,10 @@ function AppContent() {
             }}
           />
           <div 
-            className={`relative w-[85vw] max-w-sm sm:w-80 bg-card border-r border-border h-full transform transition-transform duration-150 ease-out ${
+            className={`relative w-[85vw] max-w-sm sm:w-80 bg-card border-r border-border transform transition-transform duration-150 ease-out ${
               sidebarOpen ? 'translate-x-0' : '-translate-x-full'
             }`}
+            style={{ height: 'calc(100vh - 80px)' }}
             onClick={(e) => e.stopPropagation()}
             onTouchStart={(e) => e.stopPropagation()}
           >
@@ -601,7 +602,7 @@ function AppContent() {
               onProjectDelete={handleProjectDelete}
               isLoading={isLoadingProjects}
               onRefresh={handleSidebarRefresh}
-              onShowSettings={() => setShowToolsSettings(true)}
+              onShowSettings={() => setShowSettings(true)}
               updateAvailable={updateAvailable}
               latestVersion={latestVersion}
               currentVersion={currentVersion}
@@ -629,7 +630,7 @@ function AppContent() {
           onSessionInactive={markSessionAsInactive}
           onReplaceTemporarySession={replaceTemporarySession}
           onNavigateToSession={(sessionId) => navigate(`/session/${sessionId}`)}
-          onShowSettings={() => setShowToolsSettings(true)}
+          onShowSettings={() => setShowSettings(true)}
           autoExpandTools={autoExpandTools}
           showRawParameters={showRawParameters}
           autoScrollToBottom={autoScrollToBottom}
@@ -674,10 +675,10 @@ function AppContent() {
         />
       )}
 
-      {/* Tools Settings Modal */}
+      {/* Settings Modal */}
-      <ToolsSettings
+      <Settings
-        isOpen={showToolsSettings}
+        isOpen={showSettings}
-        onClose={() => setShowToolsSettings(false)}
+        onClose={() => setShowSettings(false)}
         projects={projects}
       />
 

src/components/ChatInterface.jsx

@@ -2017,6 +2017,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           // When resuming a session, Claude CLI creates a new session instead of resuming.
           // We detect this by checking for system/init messages with session_id that differs
           // from our current session. When found, we need to switch the user to the new session.
+          // This works exactly like new session detection - preserve messages during navigation.
           if (latestMessage.data.type === 'system' && 
               latestMessage.data.subtype === 'init' && 
               latestMessage.data.session_id && 
@@ -2029,6 +2030,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
             });
             
             // Mark this as a system-initiated session change to preserve messages
+            // This works exactly like new session init - messages stay visible during navigation
             setIsSystemSessionChange(true);
             
             // Switch to the new session using React Router navigation
@@ -2743,7 +2745,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     // Get tools settings from localStorage based on provider
     const getToolsSettings = () => {
       try {
-        const settingsKey = provider === 'cursor' ? 'cursor-tools-settings' : 'claude-tools-settings';
+        const settingsKey = provider === 'cursor' ? 'cursor-tools-settings' : 'claude-settings';
         const savedSettings = safeLocalStorage.getItem(settingsKey);
         if (savedSettings) {
           return JSON.parse(savedSettings);

src/components/MainContent.jsx

@@ -15,7 +15,7 @@ import React, { useState, useEffect } from 'react';
 import ChatInterface from './ChatInterface';
 import FileTree from './FileTree';
 import CodeEditor from './CodeEditor';
-import Shell from './Shell';
+import StandaloneShell from './StandaloneShell';
 import GitPanel from './GitPanel';
 import ErrorBoundary from './ErrorBoundary';
 import ClaudeLogo from './ClaudeLogo';
@@ -426,10 +426,11 @@ function MainContent({
           <FileTree selectedProject={selectedProject} />
         </div>
         <div className={`h-full overflow-hidden ${activeTab === 'shell' ? 'block' : 'hidden'}`}>
-          <Shell 
+          <StandaloneShell
-            selectedProject={selectedProject} 
+            project={selectedProject}
-            selectedSession={selectedSession}
+            session={selectedSession}
             isActive={activeTab === 'shell'}
+            showHeader={false}
           />
         </div>
         <div className={`h-full overflow-hidden ${activeTab === 'git' ? 'block' : 'hidden'}`}>

src/components/Settings.jsx

@@ -2,11 +2,14 @@ import { useState, useEffect } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Badge } from './ui/badge';
-import { X, Plus, Settings, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Globe, Terminal, Zap, FolderOpen } from 'lucide-react';
+import { X, Plus, Settings as SettingsIcon, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Globe, Terminal, Zap, FolderOpen, LogIn } from 'lucide-react';
 import { useTheme } from '../contexts/ThemeContext';
 import { useTasksSettings } from '../contexts/TasksSettingsContext';
+import StandaloneShell from './StandaloneShell';
+import ClaudeLogo from './ClaudeLogo';
+import CursorLogo from './CursorLogo';
 
-function ToolsSettings({ isOpen, onClose, projects = [] }) {
+function Settings({ isOpen, onClose, projects = [] }) {
   const { isDarkMode, toggleDarkMode } = useTheme();
   const { 
     tasksEnabled, 
@@ -59,6 +62,11 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
   const [newCursorCommand, setNewCursorCommand] = useState('');
   const [newCursorDisallowedCommand, setNewCursorDisallowedCommand] = useState('');
   const [cursorMcpServers, setCursorMcpServers] = useState([]);
+
+  // Login modal states
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [loginProvider, setLoginProvider] = useState(''); // 'claude' or 'cursor'
+  const [selectedProject, setSelectedProject] = useState(null);
   // Common tool patterns for Claude
   const commonTools = [
     'Bash(git log:*)',
@@ -325,7 +333,7 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
     try {
       
       // Load Claude settings from localStorage
-      const savedSettings = localStorage.getItem('claude-tools-settings');
+      const savedSettings = localStorage.getItem('claude-settings');
       
       if (savedSettings) {
         const settings = JSON.parse(savedSettings);
@@ -371,6 +379,26 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
     }
   };
 
+  // Login handlers
+  const handleClaudeLogin = () => {
+    setLoginProvider('claude');
+    setSelectedProject(projects?.[0] || { name: 'default', fullPath: process.cwd() });
+    setShowLoginModal(true);
+  };
+
+  const handleCursorLogin = () => {
+    setLoginProvider('cursor');
+    setSelectedProject(projects?.[0] || { name: 'default', fullPath: process.cwd() });
+    setShowLoginModal(true);
+  };
+
+  const handleLoginComplete = (exitCode) => {
+    if (exitCode === 0) {
+      // Login successful - could show a success message here
+    }
+    setShowLoginModal(false);
+  };
+
   const saveSettings = () => {
     setIsSaving(true);
     setSaveStatus(null);
@@ -394,7 +422,7 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
       };
       
       // Save to localStorage
-      localStorage.setItem('claude-tools-settings', JSON.stringify(claudeSettings));
+      localStorage.setItem('claude-settings', JSON.stringify(claudeSettings));
       localStorage.setItem('cursor-tools-settings', JSON.stringify(cursorSettings));
       
       setSaveStatus('success');
@@ -600,7 +628,7 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
       <div className="bg-background border border-border md:rounded-lg shadow-xl w-full md:max-w-4xl h-full md:h-[90vh] flex flex-col">
         <div className="flex items-center justify-between p-4 md:p-6 border-b border-border flex-shrink-0">
           <div className="flex items-center gap-3">
-            <Settings className="w-5 h-5 md:w-6 md:h-6 text-blue-600" />
+            <SettingsIcon className="w-5 h-5 md:w-6 md:h-6 text-blue-600" />
             <h2 className="text-lg md:text-xl font-semibold text-foreground">
               Settings
             </h2>
@@ -739,7 +767,10 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
                       : 'border-transparent text-muted-foreground hover:text-foreground'
                   }`}
                 >
-                  Claude Tools
+                  <div className="flex items-center gap-2">
+                    <ClaudeLogo className="w-4 h-4" />
+                    <span>Claude</span>
+                  </div>
                 </button>
                 <button
                   onClick={() => setToolsProvider('cursor')}
@@ -749,12 +780,15 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
                       : 'border-transparent text-muted-foreground hover:text-foreground'
                   }`}
                 >
-                  Cursor Tools
+                  <div className="flex items-center gap-2">
+                    <CursorLogo className="w-4 h-4" />
+                    <span>Cursor</span>
+                  </div>
                 </button>
               </div>
             </div>
             
-            {/* Claude Tools Content */}
+            {/* Claude Content */}
             {toolsProvider === 'claude' && (
               <div className="space-y-6 md:space-y-8">
             
@@ -786,6 +820,36 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
               </div>
             </div>
 
+            {/* Claude Login */}
+            <div className="space-y-4">
+              <div className="flex items-center gap-3">
+                <LogIn className="w-5 h-5 text-blue-500" />
+                <h3 className="text-lg font-medium text-foreground">
+                  Authentication
+                </h3>
+              </div>
+              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="font-medium text-blue-900 dark:text-blue-100">
+                      Claude CLI Login
+                    </div>
+                    <div className="text-sm text-blue-700 dark:text-blue-300">
+                      Sign in to your Claude account to enable AI features
+                    </div>
+                  </div>
+                  <Button
+                    onClick={handleClaudeLogin}
+                    className="bg-blue-600 hover:bg-blue-700 text-white"
+                    size="sm"
+                  >
+                    <LogIn className="w-4 h-4 mr-2" />
+                    Login
+                  </Button>
+                </div>
+              </div>
+            </div>
+
             {/* Allowed Tools */}
             <div className="space-y-4">
               <div className="flex items-center gap-3">
@@ -1484,7 +1548,7 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
               </div>
             )}
             
-            {/* Cursor Tools Content */}
+            {/* Cursor Content */}
             {toolsProvider === 'cursor' && (
               <div className="space-y-6 md:space-y-8">
                 
@@ -1516,6 +1580,36 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
                   </div>
                 </div>
 
+                {/* Cursor Login */}
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3">
+                    <LogIn className="w-5 h-5 text-purple-500" />
+                    <h3 className="text-lg font-medium text-foreground">
+                      Authentication
+                    </h3>
+                  </div>
+                  <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="font-medium text-purple-900 dark:text-purple-100">
+                          Cursor CLI Login
+                        </div>
+                        <div className="text-sm text-purple-700 dark:text-purple-300">
+                          Sign in to your Cursor account to enable AI features
+                        </div>
+                      </div>
+                      <Button
+                        onClick={handleCursorLogin}
+                        className="bg-purple-600 hover:bg-purple-700 text-white"
+                        size="sm"
+                      >
+                        <LogIn className="w-4 h-4 mr-2" />
+                        Login
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+
                 {/* Allowed Shell Commands */}
                 <div className="space-y-4">
                   <div className="flex items-center gap-3">
@@ -1895,8 +1989,35 @@ function ToolsSettings({ isOpen, onClose, projects = [] }) {
           </div>
         </div>
       </div>
+
+      {/* Login Modal */}
+      {showLoginModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl h-3/4 flex flex-col">
+            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {loginProvider === 'claude' ? 'Claude CLI Login' : 'Cursor CLI Login'}
+              </h3>
+              <button
+                onClick={() => setShowLoginModal(false)}
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <StandaloneShell
+                project={selectedProject}
+                command={loginProvider === 'claude' ? 'claude /login' : 'cursor-agent login'}
+                onComplete={handleLoginComplete}
+                showHeader={false}
+              />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
 
-export default ToolsSettings;
+export default Settings;

src/components/Sidebar.jsx

@@ -145,7 +145,7 @@ function Sidebar({
   useEffect(() => {
     const loadSortOrder = () => {
       try {
-        const savedSettings = localStorage.getItem('claude-tools-settings');
+        const savedSettings = localStorage.getItem('claude-settings');
         if (savedSettings) {
           const settings = JSON.parse(savedSettings);
           setProjectSortOrder(settings.projectSortOrder || 'name');
@@ -160,7 +160,7 @@ function Sidebar({
 
     // Listen for storage changes
     const handleStorageChange = (e) => {
-      if (e.key === 'claude-tools-settings') {
+      if (e.key === 'claude-settings') {
         loadSortOrder();
       }
     };
@@ -766,8 +766,8 @@ function Sidebar({
           </div>
           
           {/* Mobile Form - Simple Overlay */}
-          <div className="md:hidden fixed inset-0 z-50 bg-black/50 backdrop-blur-sm">
+          <div className="md:hidden fixed inset-0 z-[70] bg-black/50 backdrop-blur-sm flex items-end justify-center px-4 pb-24">
-            <div className="absolute bottom-0 left-0 right-0 bg-card rounded-t-lg border-t border-border p-4 space-y-4 animate-in slide-in-from-bottom duration-300">
+            <div className="w-full max-w-sm bg-card rounded-t-lg border-t border-border p-4 space-y-4 animate-in slide-in-from-bottom duration-300">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   <div className="w-6 h-6 bg-primary/10 rounded-md flex items-center justify-center">
@@ -1647,7 +1647,7 @@ function Sidebar({
           onClick={onShowSettings}
         >
           <Settings className="w-3 h-3" />
-          <span className="text-xs">Tools Settings</span>
+          <span className="text-xs">Settings</span>
         </Button>
       </div>
     </div>

src/components/StandaloneShell.jsx

@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react';
+import Shell from './Shell.jsx';
+
+/**
+ * Generic Shell wrapper that can be used in tabs, modals, and other contexts.
+ * Provides a flexible API for both standalone and session-based usage.
+ * 
+ * @param {Object} project - Project object with name, fullPath/path, displayName
+ * @param {Object} session - Session object (optional, for tab usage)
+ * @param {string} command - Initial command to run (optional)
+ * @param {boolean} isActive - Whether the shell is active (for tab usage, default: true)
+ * @param {boolean} isPlainShell - Use plain shell mode vs Claude CLI (default: auto-detect)
+ * @param {boolean} autoConnect - Whether to auto-connect when mounted (default: true)
+ * @param {function} onComplete - Callback when process completes (receives exitCode)
+ * @param {function} onClose - Callback for close button (optional)
+ * @param {string} title - Custom header title (optional)
+ * @param {string} className - Additional CSS classes
+ * @param {boolean} showHeader - Whether to show custom header (default: true)
+ * @param {boolean} compact - Use compact layout (default: false)
+ */
+function StandaloneShell({
+  project,
+  session = null,
+  command = null,
+  isActive = true,
+  isPlainShell = null, // Auto-detect: true if command provided, false if session provided
+  autoConnect = true,
+  onComplete = null,
+  onClose = null,
+  title = null,
+  className = "",
+  showHeader = true,
+  compact = false
+}) {
+  const [isCompleted, setIsCompleted] = useState(false);
+
+  // Auto-detect isPlainShell based on props
+  const shouldUsePlainShell = isPlainShell !== null ? isPlainShell : (command !== null);
+
+  // Handle process completion
+  const handleProcessComplete = (exitCode) => {
+    setIsCompleted(true);
+    if (onComplete) {
+      onComplete(exitCode);
+    }
+  };
+
+  if (!project) {
+    return (
+      <div className={`h-full flex items-center justify-center ${className}`}>
+        <div className="text-center text-gray-500 dark:text-gray-400">
+          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
+            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <h3 className="text-lg font-semibold mb-2">No Project Selected</h3>
+          <p>A project is required to open a shell</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`h-full flex flex-col ${className}`}>
+      {/* Optional custom header */}
+      {showHeader && title && (
+        <div className="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <h3 className="text-sm font-medium text-gray-200">{title}</h3>
+              {isCompleted && (
+                <span className="text-xs text-green-400">(Completed)</span>
+              )}
+            </div>
+            {onClose && (
+              <button
+                onClick={onClose}
+                className="text-gray-400 hover:text-white"
+                title="Close"
+              >
+                <svg className="w-4 h-4" 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>
+        </div>
+      )}
+
+      {/* Shell component wrapper */}
+      <div className="flex-1">
+        <Shell
+          selectedProject={project}
+          selectedSession={session}
+          isActive={isActive}
+          initialCommand={command}
+          isPlainShell={shouldUsePlainShell}
+          onProcessComplete={handleProcessComplete}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default StandaloneShell;