logs

listify-client/src/app/app.html

@@ -11,7 +11,11 @@
     </button>
   }
 
-  <a class="brand" [routerLink]="auth.isAuthenticated() ? '/lists' : '/login'" aria-label="Listify Startseite">
+  <a
+    class="brand"
+    [routerLink]="auth.isAuthenticated() ? '/lists' : '/login'"
+    aria-label="Listify Startseite"
+  >
     <mat-icon aria-hidden="true">checklist</mat-icon>
     <span>Listify</span>
   </a>
@@ -33,12 +37,7 @@
     </span>
     <span class="toolbar-user">{{ auth.user()?.name || auth.user()?.email }}</span>
   } @else {
-    <a
-      mat-button
-      routerLink="/login"
-      routerLinkActive="active-link"
-      ariaCurrentWhenActive="page"
-    >
+    <a mat-button routerLink="/login" routerLinkActive="active-link" ariaCurrentWhenActive="page">
       <mat-icon aria-hidden="true">login</mat-icon>
       Login
     </a>
@@ -95,6 +94,16 @@
             <mat-icon matListItemIcon aria-hidden="true">account_circle</mat-icon>
             <span matListItemTitle>Account</span>
           </a>
+          <a
+            mat-list-item
+            routerLink="/assistant/logs"
+            routerLinkActive="active-nav-link"
+            ariaCurrentWhenActive="page"
+            (click)="closeSidebarOnCompact()"
+          >
+            <mat-icon matListItemIcon aria-hidden="true">manage_search</mat-icon>
+            <span matListItemTitle>Assistant Logs</span>
+          </a>
         </mat-nav-list>
       </nav>
     </mat-sidenav>

listify-client/src/app/app.routes.ts

@@ -34,6 +34,14 @@ export const routes: Routes = [
   { path: 'lists/new', component: ListDetailComponent, canActivate: [authGuard] },
   { path: 'lists/:listId', component: ListDetailComponent, canActivate: [authGuard] },
   { path: 'listen', redirectTo: 'lists' },
+  {
+    path: 'assistant/logs',
+    loadComponent: () =>
+      import('./assistant/assistant-logs.component').then(
+        (module) => module.AssistantLogsComponent,
+      ),
+    canActivate: [authGuard],
+  },
   { path: 'account', component: AccountComponent, canActivate: [authGuard] },
   { path: '**', redirectTo: 'login' },
 ];

listify-client/src/app/assistant/assistant-logs.component.html

@@ -0,0 +1,96 @@
+<section class="assistant-logs-page">
+  <header class="page-header">
+    <div>
+      <h1>Assistant Logs</h1>
+      <p>Neueste Chat-Requests und Provider-Antworten</p>
+    </div>
+    <button mat-stroked-button type="button" [disabled]="loading()" (click)="loadLogs()">
+      @if (loading()) {
+        <mat-progress-spinner mode="indeterminate" diameter="18" />
+      } @else {
+        <mat-icon aria-hidden="true">refresh</mat-icon>
+      }
+      Aktualisieren
+    </button>
+  </header>
+
+  @if (errorMessage()) {
+    <p class="error-message">
+      <mat-icon aria-hidden="true">error</mat-icon>
+      {{ errorMessage() }}
+    </p>
+  }
+
+  @if (loading() && logs().length === 0) {
+    <div class="loading-state">
+      <mat-progress-spinner mode="indeterminate" diameter="28" />
+      <span>Logs werden geladen</span>
+    </div>
+  } @else if (logs().length === 0) {
+    <mat-card class="empty-state" appearance="outlined">
+      <mat-card-content>
+        <mat-icon aria-hidden="true">chat_bubble_outline</mat-icon>
+        <p>Noch keine Chat-Logs vorhanden.</p>
+      </mat-card-content>
+    </mat-card>
+  } @else {
+    <div class="log-list">
+      @for (log of logs(); track log.id) {
+        <mat-card class="log-card" appearance="outlined" [class.failed]="log.errorMessage">
+          <mat-card-header>
+            <mat-card-title>
+              <span class="status-pill">{{ statusLabel(log) }}</span>
+              <span>{{ log.provider }}</span>
+            </mat-card-title>
+            <mat-card-subtitle>
+              {{ formatDate(log.createdAt) }}
+              @if (log.durationMs !== null && log.durationMs !== undefined) {
+                · {{ log.durationMs }} ms
+              }
+            </mat-card-subtitle>
+          </mat-card-header>
+
+          <mat-card-content>
+            <div class="metadata-grid">
+              <span>Endpoint</span>
+              <code>{{ log.endpoint }}</code>
+
+              <span>Agent</span>
+              <code>{{ log.agentId || 'n/a' }}</code>
+            </div>
+
+            @if (log.errorMessage) {
+              <p class="log-error">
+                <mat-icon aria-hidden="true">warning</mat-icon>
+                {{ log.errorMessage }}
+              </p>
+            }
+
+            @if (log.assistantContent) {
+              <div class="assistant-content">
+                <span>Assistant</span>
+                <p>{{ log.assistantContent }}</p>
+              </div>
+            }
+
+            <mat-accordion>
+              <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                  <mat-panel-title>Request</mat-panel-title>
+                </mat-expansion-panel-header>
+                <pre>{{ formatJson(log.requestPayload) }}</pre>
+              </mat-expansion-panel>
+
+              <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                  <mat-panel-title>Response</mat-panel-title>
+                </mat-expansion-panel-header>
+                <pre>{{ formatJson(log.responsePayload) }}</pre>
+              </mat-expansion-panel>
+            </mat-accordion>
+          </mat-card-content>
+        </mat-card>
+      }
+    </div>
+  }
+</section>

listify-client/src/app/assistant/assistant-logs.component.scss

@@ -0,0 +1,181 @@
+.assistant-logs-page {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.page-header h1,
+.page-header p {
+  margin: 0;
+}
+
+.page-header h1 {
+  font-size: 1.35rem;
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.page-header p {
+  margin-top: 0.2rem;
+  color: var(--mat-sys-on-surface-variant);
+  font-size: 0.9rem;
+}
+
+.page-header button,
+.loading-state,
+.error-message,
+.log-error {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.page-header mat-progress-spinner {
+  display: inline-flex;
+  margin-right: 0.5rem;
+}
+
+.error-message,
+.log-error {
+  margin: 0;
+  color: var(--mat-sys-error);
+}
+
+.loading-state {
+  justify-content: center;
+  padding: 2rem;
+  color: var(--mat-sys-on-surface-variant);
+}
+
+.empty-state {
+  border-radius: 8px;
+}
+
+.empty-state mat-card-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--mat-sys-on-surface-variant);
+}
+
+.empty-state p {
+  margin: 0;
+}
+
+.log-list {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.log-card {
+  border-radius: 8px;
+}
+
+.log-card.failed {
+  border-color: color-mix(in srgb, var(--mat-sys-error) 52%, transparent);
+}
+
+mat-card-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  font-size: 1rem;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.35rem;
+  padding: 0 0.45rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--mat-sys-primary) 14%, var(--mat-sys-surface));
+  color: var(--mat-sys-primary);
+  font-size: 0.75rem;
+  font-weight: 650;
+}
+
+.failed .status-pill {
+  background: color-mix(in srgb, var(--mat-sys-error) 14%, var(--mat-sys-surface));
+  color: var(--mat-sys-error);
+}
+
+.metadata-grid {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 0.45rem 0.75rem;
+  margin: 0.75rem 0;
+  color: var(--mat-sys-on-surface-variant);
+  font-size: 0.85rem;
+}
+
+.metadata-grid code {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--mat-sys-on-surface);
+}
+
+.assistant-content {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0.75rem 0;
+}
+
+.assistant-content span {
+  color: var(--mat-sys-on-surface-variant);
+  font-size: 0.8rem;
+  font-weight: 650;
+}
+
+.assistant-content p {
+  margin: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.45;
+}
+
+mat-accordion {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+pre {
+  max-height: 420px;
+  margin: 0;
+  overflow: auto;
+  padding: 0.75rem;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--mat-sys-surface-container-high) 72%, var(--mat-sys-surface));
+  color: var(--mat-sys-on-surface);
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+@media (min-width: 760px) {
+  .assistant-logs-page {
+    padding: 1.5rem;
+  }
+}
+
+@media (max-width: 620px) {
+  .page-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .page-header button {
+    justify-content: center;
+  }
+
+  .metadata-grid {
+    grid-template-columns: 1fr;
+  }
+}

listify-client/src/app/assistant/assistant-logs.component.ts

@@ -0,0 +1,72 @@
+import { Component, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { finalize } from 'rxjs';
+import { getAuthErrorMessage } from '../auth/error-message';
+import { AssistantChatLog } from './assistant.models';
+import { AssistantService } from './assistant.service';
+
+@Component({
+  selector: 'app-assistant-logs',
+  imports: [
+    MatButtonModule,
+    MatCardModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+  ],
+  templateUrl: './assistant-logs.component.html',
+  styleUrl: './assistant-logs.component.scss',
+})
+export class AssistantLogsComponent {
+  private readonly assistantService = inject(AssistantService);
+
+  protected readonly logs = signal<AssistantChatLog[]>([]);
+  protected readonly loading = signal(false);
+  protected readonly errorMessage = signal<string | null>(null);
+
+  constructor() {
+    this.loadLogs();
+  }
+
+  protected loadLogs(): void {
+    this.loading.set(true);
+    this.errorMessage.set(null);
+
+    this.assistantService
+      .listChatLogs()
+      .pipe(finalize(() => this.loading.set(false)))
+      .subscribe({
+        next: (logs) => this.logs.set(logs),
+        error: (error: unknown) => {
+          this.errorMessage.set(getAuthErrorMessage(error));
+        },
+      });
+  }
+
+  protected statusLabel(log: AssistantChatLog): string {
+    if (log.errorMessage) {
+      return 'Fehler';
+    }
+
+    if (typeof log.statusCode === 'number') {
+      return `${log.statusCode}`;
+    }
+
+    return 'Lokal';
+  }
+
+  protected formatDate(value: string): string {
+    return new Date(value).toLocaleString('de-DE', {
+      dateStyle: 'medium',
+      timeStyle: 'medium',
+    });
+  }
+
+  protected formatJson(value: unknown): string {
+    return JSON.stringify(value ?? null, null, 2);
+  }
+}

listify-client/src/app/assistant/assistant.models.ts

@@ -41,3 +41,17 @@ export interface AssistantChatResponse {
 export interface AssistantConversationMessage extends AssistantChatMessage {
   actions?: AssistantAction[];
 }
+
+export interface AssistantChatLog {
+  id: string;
+  provider: string;
+  endpoint: string;
+  agentId?: string | null;
+  statusCode?: number | null;
+  durationMs?: number | null;
+  requestPayload: Record<string, unknown>;
+  responsePayload?: unknown;
+  assistantContent?: string | null;
+  errorMessage?: string | null;
+  createdAt: string;
+}

listify-client/src/app/assistant/assistant.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
-import { AssistantChatRequest, AssistantChatResponse } from './assistant.models';
+import { AssistantChatLog, AssistantChatRequest, AssistantChatResponse } from './assistant.models';
 
 @Injectable({ providedIn: 'root' })
 export class AssistantService {
@@ -11,4 +11,8 @@ export class AssistantService {
   chat(request: AssistantChatRequest): Observable<AssistantChatResponse> {
     return this.http.post<AssistantChatResponse>(`${this.apiUrl}/chat`, request);
   }
+
+  listChatLogs(): Observable<AssistantChatLog[]> {
+    return this.http.get<AssistantChatLog[]>(`${this.apiUrl}/chat/logs`);
+  }
 }