Update package dependencies, add Git API routes, and implement audio transcription functionality. Introduce new components for Git management, enhance chat interface with microphone support, and improve UI elements for better user experience.

src/components/MainContent.jsx

@@ -11,11 +11,12 @@
  * No session protection logic is implemented here - it's purely a props bridge.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import ChatInterface from './ChatInterface';
 import FileTree from './FileTree';
 import CodeEditor from './CodeEditor';
 import Shell from './Shell';
+import GitPanel from './GitPanel';
 
 function MainContent({ 
   selectedProject, 
@@ -37,7 +38,8 @@ function MainContent({
   onNavigateToSession,    // Navigate to a specific session (for Claude CLI session duplication workaround)
   onShowSettings,         // Show tools settings panel
   autoExpandTools,        // Auto-expand tool accordions
-  showRawParameters       // Show raw parameters in tool accordions
+  showRawParameters,      // Show raw parameters in tool accordions
+  autoScrollToBottom      // Auto-scroll to bottom when new messages arrive
 }) {
   const [editingFile, setEditingFile] = useState(null);
 
@@ -73,8 +75,15 @@ function MainContent({
         )}
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center text-gray-500 dark:text-gray-400">
-            <div className="w-16 h-16 mx-auto mb-4">
-              <div className="w-16 h-16 animate-spin rounded-full border-4 border-gray-300 dark:border-gray-600 border-t-blue-600" />
+            <div className="w-12 h-12 mx-auto mb-4">
+              <div 
+                className="w-full h-full rounded-full border-4 border-gray-200 border-t-blue-500" 
+                style={{ 
+                  animation: 'spin 1s linear infinite',
+                  WebkitAnimation: 'spin 1s linear infinite',
+                  MozAnimation: 'spin 1s linear infinite'
+                }} 
+              />
             </div>
             <h2 className="text-xl font-semibold mb-2">Loading Claude Code UI</h2>
             <p>Setting up your workspace...</p>
@@ -135,7 +144,7 @@ function MainContent({
                   e.preventDefault();
                   onMenuClick();
                 }}
-                className="p-2.5 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-700 touch-manipulation active:scale-95 transition-transform duration-75"
+                className="p-2.5 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-700 touch-manipulation active:scale-95"
               >
                 <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
@@ -164,7 +173,7 @@ function MainContent({
               ) : (
                 <div>
                   <h2 className="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">
-                    Project Files
+                    {activeTab === 'files' ? 'Project Files' : activeTab === 'git' ? 'Source Control' : 'Project'}
                   </h2>
                   <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
                     {selectedProject.displayName}
@@ -179,7 +188,7 @@ function MainContent({
             <div className="relative flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
               <button
                 onClick={() => setActiveTab('chat')}
-                className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
+                className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md ${
                   activeTab === 'chat'
                     ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                     : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
@@ -222,6 +231,36 @@ function MainContent({
                   <span className="hidden sm:inline">Files</span>
                 </span>
               </button>
+              <button
+                onClick={() => setActiveTab('git')}
+                className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
+                  activeTab === 'git'
+                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
+                }`}
+              >
+                <span className="flex items-center gap-1 sm:gap-1.5">
+                  <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                  <span className="hidden sm:inline">Source Control</span>
+                </span>
+              </button>
+               {/* <button
+                onClick={() => setActiveTab('preview')}
+                className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
+                  activeTab === 'preview'
+                    ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-700'
+                }`}
+              > 
+                <span className="flex items-center gap-1 sm:gap-1.5">
+                  <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                  </svg>
+                  <span className="hidden sm:inline">Preview</span>
+                </span>
+              </button> */}
             </div>
           </div>
         </div>
@@ -245,7 +284,7 @@ function MainContent({
             onShowSettings={onShowSettings}
             autoExpandTools={autoExpandTools}
             showRawParameters={showRawParameters}
-
+            autoScrollToBottom={autoScrollToBottom}
           />
         </div>
         <div className={`h-full overflow-hidden ${activeTab === 'files' ? 'block' : 'hidden'}`}>
@@ -258,6 +297,35 @@ function MainContent({
             isActive={activeTab === 'shell'}
           />
         </div>
+        <div className={`h-full overflow-hidden ${activeTab === 'git' ? 'block' : 'hidden'}`}>
+          <GitPanel selectedProject={selectedProject} isMobile={isMobile} />
+        </div>
+        <div className={`h-full overflow-hidden ${activeTab === 'preview' ? 'block' : 'hidden'}`}>
+          {/* <LivePreviewPanel
+            selectedProject={selectedProject}
+            serverStatus={serverStatus}
+            serverUrl={serverUrl}
+            availableScripts={availableScripts}
+            onStartServer={(script) => {
+              sendMessage({
+                type: 'server:start',
+                projectPath: selectedProject?.fullPath,
+                script: script
+              });
+            }}
+            onStopServer={() => {
+              sendMessage({
+                type: 'server:stop',
+                projectPath: selectedProject?.fullPath
+              });
+            }}
+            onScriptSelect={setCurrentScript}
+            currentScript={currentScript}
+            isMobile={isMobile}
+            serverLogs={serverLogs}
+            onClearLogs={() => setServerLogs([])}
+          /> */}
+        </div>
       </div>
 
       {/* Code Editor Modal */}