feat(frontend): request logs; refactor frontend components

frontend/src/components/CommandQueue.tsx

@@ -1,5 +1,7 @@
 import { Component, createResource, For, Show } from 'solid-js';
 import { commandsApi } from '../api/client';
+import { Button } from './ui/Button';
+import { Card } from './ui/Card';
 
 const CommandQueue: Component = () => {
   const [commands, { refetch }] = createResource(commandsApi.list);
@@ -22,7 +24,7 @@ const CommandQueue: Component = () => {
     <div class="space-y-4">
       <h2 class="text-2xl font-semibold">Command Queue</h2>
 
-      <div class="bg-white shadow rounded-lg overflow-hidden">
+      <Card>
         <Show when={!commands.loading} fallback={<div class="p-4">Loading...</div>}>
           <For each={commands()} fallback={
             <div class="p-8 text-center text-gray-500">
@@ -56,18 +58,20 @@ const CommandQueue: Component = () => {
                   </div>
                   <Show when={cmd.status === 'unverified'}>
                     <div class="ml-4 flex flex-col gap-2">
-                      <button
+                      <Button
+                        size="sm"
+                        variant="success"
                         onClick={() => updateCommandStatus(cmd.id, 'verified')}
-                        class="px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700"
                       >
                         Verify
-                      </button>
-                      <button
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="danger"
                         onClick={() => updateCommandStatus(cmd.id, 'rejected')}
-                        class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
                       >
                         Reject
-                      </button>
+                      </Button>
                     </div>
                   </Show>
                 </div>
@@ -75,7 +79,7 @@ const CommandQueue: Component = () => {
             )}
           </For>
         </Show>
-      </div>
+      </Card>
     </div>
   );
 };