feat(frontend): request logs; refactor frontend components

frontend/src/App.tsx

@@ -3,10 +3,11 @@ import RulesList from './components/RulesList';
 import CommandQueue from './components/CommandQueue';
 import Login from './components/Login';
 import ChangePassword from './components/ChangePassword';
+import RequestLog from './components/RequestLog';
 import { authStore } from './api/auth';
 
 const App: Component = () => {
-  const [activeTab, setActiveTab] = createSignal<'rules' | 'commands'>('rules');
+  const [activeTab, setActiveTab] = createSignal<'rules' | 'commands' | 'logs'>('rules');
   const [isAuthenticated, setIsAuthenticated] = createSignal(false);
   const [showChangePassword, setShowChangePassword] = createSignal(false);
 
@@ -73,6 +74,16 @@ const App: Component = () => {
               >
                 Command Queue
               </button>
+              <button
+                onClick={() => setActiveTab('logs')}
+                class={`py-4 px-1 border-b-2 font-medium text-sm ${
+                  activeTab() === 'logs'
+                    ? 'border-indigo-500 text-indigo-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                Request Log
+              </button>
             </div>
           </div>
         </nav>
@@ -80,6 +91,7 @@ const App: Component = () => {
         <main class="max-w-7xl mx-auto px-4 py-6">
           {activeTab() === 'rules' && <RulesList />}
           {activeTab() === 'commands' && <CommandQueue />}
+          {activeTab() === 'logs' && <RequestLog />}
         </main>
 
         <Show when={showChangePassword()}>