From e2e1723b99049f8396f28d0653f6357c33c452ec Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Mon, 2 Mar 2026 12:14:34 +0100
Subject: [PATCH] feat(logs): add expandable request/response details in API
 log

---
 app/Http/Controllers/ApiLogController.php |  2 +
 resources/js/Pages/ApiLogs/Index.vue      | 58 ++++++++++++++++-------
 tests/Feature/ApiLogControllerTest.php    | 52 ++++++++++++++++++++
 3 files changed, 95 insertions(+), 17 deletions(-)

diff --git a/app/Http/Controllers/ApiLogController.php b/app/Http/Controllers/ApiLogController.php
index faf7664..05b140d 100644
--- a/app/Http/Controllers/ApiLogController.php
+++ b/app/Http/Controllers/ApiLogController.php
@@ -27,6 +27,8 @@ public function index(): Response
                 'status' => $log->status,
                 'duration_ms' => $log->duration_ms,
                 'error_message' => $log->error_message,
+                'request_context' => $log->request_context,
+                'response_summary' => $log->response_summary,
             ]);
 
         return Inertia::render('ApiLogs/Index', [
diff --git a/resources/js/Pages/ApiLogs/Index.vue b/resources/js/Pages/ApiLogs/Index.vue
index 9a13d3c..0d1f322 100644
--- a/resources/js/Pages/ApiLogs/Index.vue
+++ b/resources/js/Pages/ApiLogs/Index.vue
@@ -64,6 +64,12 @@ function statusBadgeClass(logStatus) {
 function statusText(logStatus) {
     return logStatus === 'error' ? 'Fehler' : 'Erfolg'
 }
+
+const expandedId = ref(null)
+
+function toggleExpanded(id) {
+    expandedId.value = expandedId.value === id ? null : id
+}
 </script>
 
 <template>
@@ -122,23 +128,41 @@ function statusText(logStatus) {
                             </thead>
 
                             <tbody class="divide-y divide-gray-100 bg-white">
-                                <tr
-                                    v-for="log in logs.data"
-                                    :key="log.id"
-                                    :class="log.status === 'error' ? 'bg-red-50/70' : ''"
-                                    data-testid="api-log-row"
-                                >
-                                    <td class="px-4 py-3 text-sm text-gray-700">{{ formatDateTime(log.created_at) }}</td>
-                                    <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ log.method }}</td>
-                                    <td class="px-4 py-3 text-sm text-gray-700">{{ log.endpoint }}</td>
-                                    <td class="px-4 py-3 text-sm">
-                                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset" :class="statusBadgeClass(log.status)">
-                                            {{ statusText(log.status) }}
-                                        </span>
-                                    </td>
-                                    <td class="px-4 py-3 text-sm text-gray-700">{{ log.duration_ms }}</td>
-                                    <td class="px-4 py-3 text-sm text-red-700">{{ log.error_message || '—' }}</td>
-                                </tr>
+                                <template v-for="log in logs.data" :key="log.id">
+                                    <tr
+                                        :class="[log.status === 'error' ? 'bg-red-50/70' : '', 'cursor-pointer hover:bg-gray-50 transition-colors']"
+                                        data-testid="api-log-row"
+                                        @click="toggleExpanded(log.id)"
+                                    >
+                                        <td class="px-4 py-3 text-sm text-gray-700">{{ formatDateTime(log.created_at) }}</td>
+                                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ log.method }}</td>
+                                        <td class="px-4 py-3 text-sm text-gray-700">{{ log.endpoint }}</td>
+                                        <td class="px-4 py-3 text-sm">
+                                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset" :class="statusBadgeClass(log.status)">
+                                                {{ statusText(log.status) }}
+                                            </span>
+                                        </td>
+                                        <td class="px-4 py-3 text-sm text-gray-700">{{ log.duration_ms }}</td>
+                                        <td class="px-4 py-3 text-sm text-red-700">{{ log.error_message || '—' }}</td>
+                                    </tr>
+
+                                    <tr v-if="expandedId === log.id" class="bg-gray-50/50" data-testid="api-log-detail">
+                                        <td colspan="6" class="px-4 py-4">
+                                            <div class="space-y-3">
+                                                <div>
+                                                    <span class="text-xs font-semibold uppercase tracking-wide text-gray-500">Anfrage-Kontext</span>
+                                                    <pre v-if="log.request_context" class="mt-1 overflow-x-auto rounded-lg bg-gray-100 p-3 text-xs text-gray-800">{{ JSON.stringify(log.request_context, null, 2) }}</pre>
+                                                    <p v-else class="mt-1 text-sm italic text-gray-400">Kein Kontext verfügbar</p>
+                                                </div>
+                                                <div>
+                                                    <span class="text-xs font-semibold uppercase tracking-wide text-gray-500">Antwort-Zusammenfassung</span>
+                                                    <p v-if="log.response_summary" class="mt-1 text-sm text-gray-700">{{ log.response_summary }}</p>
+                                                    <p v-else class="mt-1 text-sm italic text-gray-400">Keine Zusammenfassung verfügbar</p>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </template>
 
                                 <tr v-if="logs.data.length === 0">
                                     <td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">Keine API-Logs für deinen Filter gefunden.</td>
diff --git a/tests/Feature/ApiLogControllerTest.php b/tests/Feature/ApiLogControllerTest.php
index a256955..ac1643c 100644
--- a/tests/Feature/ApiLogControllerTest.php
+++ b/tests/Feature/ApiLogControllerTest.php
@@ -100,6 +100,58 @@ public function test_api_log_index_filtert_nach_status(): void
         );
     }
 
+    public function test_api_log_index_enthaelt_request_context_und_response_summary(): void
+    {
+        $this->withoutVite();
+        $user = User::factory()->create();
+
+        ApiRequestLog::create([
+            'method' => 'fetchEvents',
+            'endpoint' => 'events',
+            'status' => 'success',
+            'request_context' => ['eventId' => 42, 'includeAgenda' => true],
+            'response_summary' => 'Array mit 3 Eintraegen',
+            'duration_ms' => 150,
+        ]);
+
+        $response = $this->actingAs($user)->get(route('api-logs.index'));
+
+        $response->assertOk();
+        $response->assertInertia(
+            fn ($page) => $page
+                ->component('ApiLogs/Index')
+                ->has('logs.data', 1)
+                ->where('logs.data.0.request_context', ['eventId' => 42, 'includeAgenda' => true])
+                ->where('logs.data.0.response_summary', 'Array mit 3 Eintraegen')
+        );
+    }
+
+    public function test_api_log_index_behandelt_null_context_und_summary(): void
+    {
+        $this->withoutVite();
+        $user = User::factory()->create();
+
+        ApiRequestLog::create([
+            'method' => 'fetchSongs',
+            'endpoint' => 'songs',
+            'status' => 'success',
+            'request_context' => null,
+            'response_summary' => null,
+            'duration_ms' => 80,
+        ]);
+
+        $response = $this->actingAs($user)->get(route('api-logs.index'));
+
+        $response->assertOk();
+        $response->assertInertia(
+            fn ($page) => $page
+                ->component('ApiLogs/Index')
+                ->has('logs.data', 1)
+                ->where('logs.data.0.request_context', null)
+                ->where('logs.data.0.response_summary', null)
+        );
+    }
+
     public function test_api_request_log_scopes_funktionieren(): void
     {
         ApiRequestLog::create([