Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -1,14 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import ChatPanel from './components/ChatPanel';
 import AgentPanel from './components/AgentPanel';
 import CodeEditor from './components/CodeEditor';
-import Terminal from './components/Terminal';
+import TerminalTabs from './components/TerminalTabs';
 import FileTree from './components/FileTree';
 import ModelSelector from './components/ModelSelector';
-import StatusBar from './components/StatusBar';
 import TopBar from './components/TopBar';
-import { FaComments, FaRobot, FaTerminal, FaCode, FaBars } from 'react-icons/fa';
+import StatusBar from './components/StatusBar';
+import GitPanel from './components/GitPanel';
+import BackgroundTasks from './components/BackgroundTasks';
+import { FaComments, FaRobot, FaTerminal, FaCodeBranch, FaTasks } from 'react-icons/fa';
 
 const App: React.FC = () => {
   const [activeBottom, setActiveBottom] = useState('chat');
@@ -17,40 +19,59 @@ const App: React.FC = () => {
   const [selectedModel, setSelectedModel] = useState('groq-llama-3.3-70b-versatile');
   const [sidebarVisible, setSidebarVisible] = useState(true);
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const mod = e.ctrlKey || e.metaKey;
+      if (mod && e.key === 'b') {
+        e.preventDefault();
+        setSidebarVisible(prev => !prev);
+      } else if (mod && e.key === '1') {
+        e.preventDefault();
+        setActiveBottom('chat');
+      } else if (mod && e.key === '2') {
+        e.preventDefault();
+        setActiveBottom('agent');
+      } else if (mod && e.key === '3') {
+        e.preventDefault();
+        setActiveBottom('terminal');
+      } else if (mod && e.key === '4') {
+        e.preventDefault();
+        setActiveBottom('git');
+      } else if (mod && e.key === '5') {
+        e.preventDefault();
+        setActiveBottom('tasks');
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: 'var(--bg-primary)' }}>
-      {/* Top Bar */}
       <TopBar />
-
       <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
-        {/* Collapsible Sidebar */}
         {sidebarVisible && (
           <div style={{ width: 280, background: 'var(--bg-secondary)', borderRight: '1px solid var(--border)', display: 'flex', flexDirection: 'column' }}>
             <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
               <span style={{ fontWeight: 600, fontSize: 13 }}>EXPLORER</span>
-              <FaBars onClick={() => setSidebarVisible(false)} style={{ cursor: 'pointer', color: 'var(--text-secondary)' }} />
+              <span onClick={() => setSidebarVisible(false)} style={{ cursor: 'pointer', color: 'var(--text-secondary)' }}>×</span>
             </div>
             <ModelSelector selectedModel={selectedModel} onModelChange={setSelectedModel} />
             <FileTree projectPath={projectPath} onFileSelect={setActiveFile} />
           </div>
         )}
-
-        {/* Toggle sidebar button when collapsed */}
         {!sidebarVisible && (
           <div style={{ width: 40, background: 'var(--bg-secondary)', borderRight: '1px solid var(--border)', display: 'flex', alignItems: 'flex-start', paddingTop: 10, justifyContent: 'center' }}>
-            <FaBars onClick={() => setSidebarVisible(true)} style={{ cursor: 'pointer', color: 'var(--text-secondary)' }} />
+            <span onClick={() => setSidebarVisible(true)} style={{ cursor: 'pointer', color: 'var(--text-secondary)' }}>☰</span>
           </div>
         )}
-
-        {/* Main Editor Area */}
         <PanelGroup direction="vertical" style={{ flex: 1 }}>
           <Panel defaultSize={65} minSize={20}>
             <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-              {/* Tab Bar */}
               <div style={{ display: 'flex', background: 'var(--bg-tertiary)', borderBottom: '1px solid var(--border)', padding: '0 8px', overflowX: 'auto' }}>
                 {activeFile ? (
-                  <div style={{ padding: '8px 12px', borderBottom: '2px solid var(--accent)', color: 'var(--accent)', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <FaCode size={12} /> {activeFile}
+                  <div style={{ padding: '8px 12px', borderBottom: '2px solid var(--accent)', color: 'var(--accent)', fontSize: 13 }}>
+                    📄 {activeFile}
                   </div>
                 ) : (
                   <div style={{ padding: '8px 12px', color: 'var(--text-secondary)', fontSize: 13 }}>No file selected</div>
@@ -62,29 +83,24 @@ const App: React.FC = () => {
           <PanelResizeHandle style={{ height: 4, background: 'var(--border)' }} />
           <Panel defaultSize={35} minSize={15}>
             <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)' }}>
-              {/* Bottom Panel Tabs */}
               <div style={{ display: 'flex', background: 'var(--bg-tertiary)', borderBottom: '1px solid var(--border)', padding: '0 8px' }}>
-                <button onClick={() => setActiveBottom('chat')} style={{ padding: '8px 16px', background: activeBottom === 'chat' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'chat' ? '2px solid var(--accent)' : 'none', display: 'flex', alignItems: 'center', gap: 6, color: activeBottom === 'chat' ? 'var(--accent)' : 'var(--text-secondary)' }}>
-                  <FaComments /> Chat
-                </button>
-                <button onClick={() => setActiveBottom('agent')} style={{ padding: '8px 16px', background: activeBottom === 'agent' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'agent' ? '2px solid var(--accent)' : 'none', display: 'flex', alignItems: 'center', gap: 6, color: activeBottom === 'agent' ? 'var(--accent)' : 'var(--text-secondary)' }}>
-                  <FaRobot /> Agent
-                </button>
-                <button onClick={() => setActiveBottom('terminal')} style={{ padding: '8px 16px', background: activeBottom === 'terminal' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'terminal' ? '2px solid var(--accent)' : 'none', display: 'flex', alignItems: 'center', gap: 6, color: activeBottom === 'terminal' ? 'var(--accent)' : 'var(--text-secondary)' }}>
-                  <FaTerminal /> Terminal
-                </button>
+                <button onClick={() => setActiveBottom('chat')} style={{ padding: '8px 16px', background: activeBottom === 'chat' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'chat' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'chat' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaComments /> Chat (Ctrl+1)</button>
+                <button onClick={() => setActiveBottom('agent')} style={{ padding: '8px 16px', background: activeBottom === 'agent' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'agent' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'agent' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaRobot /> Agent (Ctrl+2)</button>
+                <button onClick={() => setActiveBottom('terminal')} style={{ padding: '8px 16px', background: activeBottom === 'terminal' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'terminal' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'terminal' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaTerminal /> Terminal (Ctrl+3)</button>
+                <button onClick={() => setActiveBottom('git')} style={{ padding: '8px 16px', background: activeBottom === 'git' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'git' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'git' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaCodeBranch /> Git (Ctrl+4)</button>
+                <button onClick={() => setActiveBottom('tasks')} style={{ padding: '8px 16px', background: activeBottom === 'tasks' ? 'var(--bg-primary)' : 'transparent', borderBottom: activeBottom === 'tasks' ? '2px solid var(--accent)' : 'none', color: activeBottom === 'tasks' ? 'var(--accent)' : 'var(--text-secondary)' }}><FaTasks /> Tasks (Ctrl+5)</button>
               </div>
               <div style={{ flex: 1, overflow: 'hidden' }}>
                 {activeBottom === 'chat' && <ChatPanel projectPath={projectPath} model={selectedModel} />}
                 {activeBottom === 'agent' && <AgentPanel projectPath={projectPath} />}
-                {activeBottom === 'terminal' && <Terminal />}
+                {activeBottom === 'terminal' && <TerminalTabs />}
+                {activeBottom === 'git' && <GitPanel projectPath={projectPath} />}
+                {activeBottom === 'tasks' && <BackgroundTasks />}
               </div>
             </div>
           </Panel>
         </PanelGroup>
       </div>
-
-      {/* Status Bar */}
       <StatusBar model={selectedModel} />
     </div>
   );