1  import { useEffect } from 'react';
 2  import { AppProvider, useApp } from './contexts/AppContext';
 3  import {
 4    ChatPanel,
 5    Sidebar,
 6    InputField,
 7    CommandPalette,
 8    AgentSelector,
 9    StatusBar,
10    Footer,
11    LoadingAnimation
12  } from './components';
13  import './App.css';
14  
15  const AppContent = () => {
16    const {
17      sidebarVisible,
18      toggleSidebar,
19      showCommandPalette,
20      showAgentSelector,
21      loading
22    } = useApp();
23  
24    useEffect(() => {
25      const handleKeyDown = (e: KeyboardEvent) => {
26        // Ctrl+P - Command Palette
27        if (e.ctrlKey && e.key === 'p') {
28          e.preventDefault();
29          showCommandPalette();
30        }
31        // Ctrl+S - Toggle Sidebar
32        else if (e.ctrlKey && e.key === 's') {
33          e.preventDefault();
34          toggleSidebar();
35        }
36        // Ctrl+A - Agent Selector
37        else if (e.ctrlKey && e.key === 'a') {
38          e.preventDefault();
39          showAgentSelector();
40        }
41        // Ctrl+T - Tools (placeholder)
42        else if (e.ctrlKey && e.key === 't') {
43          e.preventDefault();
44          console.log('Tools menu - not yet implemented');
45        }
46      };
47  
48      window.addEventListener('keydown', handleKeyDown);
49      return () => window.removeEventListener('keydown', handleKeyDown);
50    }, [showCommandPalette, toggleSidebar, showAgentSelector]);
51  
52    return (
53      <div className="app">
54        <StatusBar />
55  
56        <div className="app-main">
57          <div className="app-content">
58            <ChatPanel />
59            {loading && (
60              <div className="loading-overlay">
61                <LoadingAnimation />
62              </div>
63            )}
64          </div>
65  
66          {sidebarVisible && <Sidebar />}
67        </div>
68  
69        <InputField />
70        <Footer />
71  
72        <CommandPalette />
73        <AgentSelector />
74      </div>
75    );
76  };
77  
78  function App() {
79    return (
80      <AppProvider>
81        <AppContent />
82      </AppProvider>
83    );
84  }
85  
86  export default App;