More webapp changes+fixes

webapp/src/app/features/messages/message-detail/message-detail.component.html

@@ -9,6 +9,21 @@
         <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
         Back to Messages
       </button>
+      @if (expertMode()) {
+        <div class="header-actions">
+          <button
+            nz-button
+            nzDanger
+            nz-popconfirm
+            nzPopconfirmTitle="Are you sure you want to delete this message?"
+            (nzOnConfirm)="deleteMessage()"
+            [nzLoading]="deleting()"
+          >
+            <span nz-icon nzType="delete"></span>
+            Delete
+          </button>
+        </div>
+      }
     </div>
 
     <nz-card [nzTitle]="message()!.title">
@@ -32,6 +47,10 @@
             <div class="cell-id mono">{{ message()!.channel_id }}</div>
           </a>
         </scn-metadata-value>
+        <scn-metadata-value label="Channel Owner">
+          <div class="cell-name">{{ resolvedChannelOwner()?.displayName || message()!.channel_owner_user_id }}</div>
+          <div class="cell-id mono">{{ message()!.channel_owner_user_id }}</div>
+        </scn-metadata-value>
         <scn-metadata-value label="Priority">
           <nz-tag [nzColor]="getPriorityColor(message()!.priority)">
             {{ getPriorityLabel(message()!.priority) }}
@@ -58,6 +77,48 @@
         </scn-metadata-value>
       </scn-metadata-grid>
     </nz-card>
+
+    @if (showDeliveries()) {
+      <nz-card nzTitle="Deliveries">
+        <nz-table
+          #deliveriesTable
+          [nzData]="deliveries()"
+          [nzLoading]="loadingDeliveries()"
+          [nzShowPagination]="deliveries().length > 10"
+          [nzPageSize]="10"
+          nzSize="small"
+        >
+          <thead>
+            <tr>
+              <th>Client ID</th>
+              <th>Status</th>
+              <th>Retries</th>
+              <th>Created</th>
+              <th>Finalized</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (delivery of deliveriesTable.data; track delivery.delivery_id) {
+              <tr>
+                <td>
+                  <a [routerLink]="['/clients', delivery.receiver_client_id]" class="mono">
+                    {{ delivery.receiver_client_id }}
+                  </a>
+                </td>
+                <td>
+                  <nz-tag [nzColor]="getStatusColor(delivery.status)">
+                    {{ delivery.status }}
+                  </nz-tag>
+                </td>
+                <td>{{ delivery.retry_count }}</td>
+                <td>{{ delivery.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</td>
+                <td>{{ delivery.timestamp_finalized ? (delivery.timestamp_finalized | date:'yyyy-MM-dd HH:mm:ss') : '-' }}</td>
+              </tr>
+            }
+          </tbody>
+        </nz-table>
+      </nz-card>
+    }
   } @else {
     <nz-card>
       <div class="not-found">

webapp/src/app/features/messages/message-detail/message-detail.component.scss

@@ -64,9 +64,11 @@ nz-card + nz-card {
 .timestamp-absolute {
   font-size: 13px;
   color: #333;
+  white-space: pre;
 }
 
 .timestamp-relative {
   font-size: 12px;
   color: #999;
-}
+  white-space: pre;
+}

webapp/src/app/features/messages/message-detail/message-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal, OnInit } from '@angular/core';
+import { Component, inject, signal, OnInit, computed } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { NzCardModule } from 'ng-zorro-antd/card';
@@ -6,10 +6,15 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzTableModule } from 'ng-zorro-antd/table';
 import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
+import { SettingsService } from '../../../core/services/settings.service';
 import { KeyCacheService, ResolvedKey } from '../../../core/services/key-cache.service';
-import { Message } from '../../../core/models';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { Message, Delivery } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
@@ -24,6 +29,8 @@ import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/c
     NzIconModule,
     NzTagModule,
     NzSpinModule,
+    NzPopconfirmModule,
+    NzTableModule,
     RouterLink,
     RelativeTimePipe,
     MetadataGridComponent,
@@ -36,13 +43,28 @@ export class MessageDetailComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private apiService = inject(ApiService);
+  private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
   private keyCacheService = inject(KeyCacheService);
+  private userCacheService = inject(UserCacheService);
 
   message = signal<Message | null>(null);
   resolvedKey = signal<ResolvedKey | null>(null);
+  resolvedChannelOwner = signal<ResolvedUser | null>(null);
+  deliveries = signal<Delivery[]>([]);
   loading = signal(true);
   deleting = signal(false);
+  loadingDeliveries = signal(false);
+  expertMode = this.settingsService.expertMode;
+
+  isChannelOwner = computed(() => {
+    const msg = this.message();
+    const userId = this.authService.getUserId();
+    return msg !== null && userId !== null && msg.channel_owner_user_id === userId;
+  });
+
+  showDeliveries = computed(() => this.expertMode() && this.isChannelOwner());
 
   ngOnInit(): void {
     const messageId = this.route.snapshot.paramMap.get('id');
@@ -58,6 +80,8 @@ export class MessageDetailComponent implements OnInit {
         this.message.set(message);
         this.loading.set(false);
         this.resolveKey(message.used_key_id);
+        this.resolveChannelOwner(message.channel_owner_user_id);
+        this.loadDeliveries(messageId);
       },
       error: () => {
         this.loading.set(false);
@@ -65,12 +89,34 @@ export class MessageDetailComponent implements OnInit {
     });
   }
 
+  private loadDeliveries(messageId: string): void {
+    if (!this.showDeliveries()) {
+      return;
+    }
+    this.loadingDeliveries.set(true);
+    this.apiService.getDeliveries(messageId).subscribe({
+      next: (response) => {
+        this.deliveries.set(response.deliveries);
+        this.loadingDeliveries.set(false);
+      },
+      error: () => {
+        this.loadingDeliveries.set(false);
+      }
+    });
+  }
+
   private resolveKey(keyId: string): void {
     this.keyCacheService.resolveKey(keyId).subscribe({
       next: (resolved) => this.resolvedKey.set(resolved)
     });
   }
 
+  private resolveChannelOwner(userId: string): void {
+    this.userCacheService.resolveUser(userId).subscribe({
+      next: (resolved) => this.resolvedChannelOwner.set(resolved)
+    });
+  }
+
   goBack(): void {
     this.router.navigate(['/messages']);
   }
@@ -108,4 +154,13 @@ export class MessageDetailComponent implements OnInit {
       default: return 'default';
     }
   }
+
+  getStatusColor(status: string): string {
+    switch (status) {
+      case 'SUCCESS': return 'green';
+      case 'FAILED': return 'red';
+      case 'RETRY': return 'orange';
+      default: return 'default';
+    }
+  }
 }

webapp/src/app/features/messages/message-list/message-list.component.html

@@ -107,33 +107,45 @@
       </thead>
       <tbody>
         @for (message of messages(); track message.message_id) {
-          <tr class="clickable-row" (click)="viewMessage(message)">
+          <tr class="clickable-row">
             <td>
-              <div class="message-title">{{ message.title }}</div>
-              <div class="message-id mono">{{ message.message_id }}</div>
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <div class="message-title">{{ message.title }}</div>
+                <div class="message-id mono">{{ message.message_id }}</div>
+              </a>
             </td>
             <td>
-              @if (message.content) {
-                <div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
-              } @else {
-                <span class="text-muted"></span>
-              }
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                @if (message.content) {
+                  <div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
+                } @else {
+                  <span class="text-muted"></span>
+                }
+              </a>
             </td>
             <td>
-              <div class="cell-name">{{ message.channel_internal_name }}</div>
-              <div class="cell-id">{{ message.channel_id }}</div>
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <div class="cell-name">{{ message.channel_internal_name }}</div>
+                <div class="cell-id">{{ message.channel_id }}</div>
+              </a>
             </td>
             <td>
-              {{ message.sender_name || '-' }}
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <span style="white-space: pre">{{ message.sender_name || '-' }}</span>
+              </a>
             </td>
             <td>
-              <nz-tag [nzColor]="getPriorityColor(message.priority)">
-                {{ getPriorityLabel(message.priority) }}
-              </nz-tag>
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <nz-tag [nzColor]="getPriorityColor(message.priority)">
+                  {{ getPriorityLabel(message.priority) }}
+                </nz-tag>
+              </a>
             </td>
             <td>
-              <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
-              <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
+              <a class="cell-link" [routerLink]="['/messages', message.message_id]">
+                <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
+              </a>
             </td>
           </tr>
         } @empty {

webapp/src/app/features/messages/message-list/message-list.component.scss

@@ -70,11 +70,13 @@
 .timestamp-absolute {
   font-size: 13px;
   color: #333;
+  white-space: pre;
 }
 
 .timestamp-relative {
   font-size: 12px;
   color: #999;
+  white-space: pre;
 }
 
 .pagination-controls {

webapp/src/app/features/messages/message-list/message-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzTableModule, NzTableFilterList } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -24,6 +24,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
   imports: [
     CommonModule,
     FormsModule,
+    RouterLink,
     NzTableModule,
     NzButtonModule,
     NzInputModule,