Create frontend/src/App.tsx

frontend/src/App.tsx

@@ -0,0 +1,94 @@
+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 TerminalTabs from './components/TerminalTabs';
+import FileTree from './components/FileTree';
+import ModelSelector from './components/ModelSelector';
+import TopBar from './components/TopBar';
+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');
+  const [projectPath] = useState('/app/sandbox');
+  const [activeFile, setActiveFile] = useState<string | null>(null);
+  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)' }}>
+      <TopBar />
+      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+        {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>
+              <span onClick={() => setSidebarVisible(false)} style={{ cursor: 'pointer', color: 'var(--text-secondary)' }}>×</span>
+            </div>
+            <ModelSelector selectedModel={selectedModel} onModelChange={setSelectedModel} />
+            <FileTree projectPath={projectPath} onFileSelect={setActiveFile} />
+          </div>
+        )}
+        {!sidebarVisible && (
+          <div style={{ width: 40, background: 'var(--bg-secondary)', borderRight: '1px solid var(--border)', display: 'flex', alignItems: 'flex-start', paddingTop: 10, justifyContent: 'center' }}>
+            <span onClick={() => setSidebarVisible(true)} style={{ cursor: 'pointer', color: 'var(--text-secondary)' }}>☰</span>
+          </div>
+        )}
+        <PanelGroup direction="vertical" style={{ flex: 1 }}>
+          <Panel defaultSize={65} minSize={20}>
+            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+              <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 }}>📄 {activeFile}</div>
+                ) : (
+                  <div style={{ padding: '8px 12px', color: 'var(--text-secondary)', fontSize: 13 }}>No file selected</div>
+                )}
+              </div>
+              <CodeEditor filePath={activeFile} projectPath={projectPath} />
+            </div>
+          </Panel>
+          <PanelResizeHandle style={{ height: 4, background: 'var(--border)' }} />
+          <Panel defaultSize={35} minSize={15}>
+            <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-primary)' }}>
+              <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', 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' && <TerminalTabs />}
+                {activeBottom === 'git' && <GitPanel projectPath={projectPath} />}
+                {activeBottom === 'tasks' && <BackgroundTasks />}
+              </div>
+            </div>
+          </Panel>
+        </PanelGroup>
+      </div>
+      <StatusBar model={selectedModel} />
+    </div>
+  );
+};
+
+export default App;