More webapp changes+fixes

webapp/Makefile

@@ -6,7 +6,7 @@ NAMESPACE=$(shell git rev-parse --abbrev-ref HEAD)
 HASH=$(shell git rev-parse HEAD)
 
 run:
-	. ${HOME}/.nvm/nvm.sh && nvm use && npm i && npm run dev
+	. ${HOME}/.nvm/nvm.sh && nvm use && npm i && npm run start
 
 setup:
 	npm install

webapp/src/app/app.routes.ts

@@ -33,14 +33,26 @@ export const routes: Routes = [
         path: 'subscriptions',
         loadComponent: () => import('./features/subscriptions/subscription-list/subscription-list.component').then(m => m.SubscriptionListComponent)
       },
+      {
+        path: 'subscriptions/:id',
+        loadComponent: () => import('./features/subscriptions/subscription-detail/subscription-detail.component').then(m => m.SubscriptionDetailComponent)
+      },
       {
         path: 'keys',
         loadComponent: () => import('./features/keys/key-list/key-list.component').then(m => m.KeyListComponent)
       },
+      {
+        path: 'keys/:id',
+        loadComponent: () => import('./features/keys/key-detail/key-detail.component').then(m => m.KeyDetailComponent)
+      },
       {
         path: 'clients',
         loadComponent: () => import('./features/clients/client-list/client-list.component').then(m => m.ClientListComponent)
       },
+      {
+        path: 'clients/:id',
+        loadComponent: () => import('./features/clients/client-detail/client-detail.component').then(m => m.ClientDetailComponent)
+      },
       {
         path: 'senders',
         loadComponent: () => import('./features/senders/sender-list/sender-list.component').then(m => m.SenderListComponent)

webapp/src/app/core/models/subscription.model.ts

@@ -6,6 +6,7 @@ export interface Subscription {
   channel_internal_name: string;
   timestamp_created: string;
   confirmed: boolean;
+  active: boolean;
 }
 
 export interface SubscriptionFilter {

webapp/src/app/core/services/key-cache.service.ts

@@ -0,0 +1,58 @@
+import { Injectable, inject } from '@angular/core';
+import { Observable, of, map, shareReplay, catchError } from 'rxjs';
+import { ApiService } from './api.service';
+import { AuthService } from './auth.service';
+import { KeyToken } from '../models';
+
+export interface ResolvedKey {
+  keyId: string;
+  name: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KeyCacheService {
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+
+  private keysCache$: Observable<Map<string, KeyToken>> | null = null;
+
+  resolveKey(keyId: string): Observable<ResolvedKey> {
+    return this.getKeysMap().pipe(
+      map(keysMap => {
+        const key = keysMap.get(keyId);
+        return {
+          keyId,
+          name: key?.name || keyId
+        };
+      })
+    );
+  }
+
+  private getKeysMap(): Observable<Map<string, KeyToken>> {
+    const userId = this.authService.getUserId();
+    if (!userId) {
+      return of(new Map());
+    }
+
+    if (!this.keysCache$) {
+      this.keysCache$ = this.apiService.getKeys(userId).pipe(
+        map(response => {
+          const map = new Map<string, KeyToken>();
+          for (const key of response.keys) {
+            map.set(key.keytoken_id, key);
+          }
+          return map;
+        }),
+        catchError(() => of(new Map())),
+        shareReplay(1)
+      );
+    }
+    return this.keysCache$;
+  }
+
+  clearCache(): void {
+    this.keysCache$ = null;
+  }
+}

webapp/src/app/features/channels/channel-detail/channel-detail.component.html

@@ -20,122 +20,123 @@
     </div>
 
     <nz-card [nzTitle]="channel()!.display_name">
-      <nz-descriptions nzBordered [nzColumn]="2">
-        <nz-descriptions-item nzTitle="Channel ID" [nzSpan]="2">
+      <scn-metadata-grid>
+        <scn-metadata-value label="Channel ID">
           <span class="mono">{{ channel()!.channel_id }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Internal Name">
+        </scn-metadata-value>
+        <scn-metadata-value label="Internal Name">
           <span class="mono">{{ channel()!.internal_name }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Status">
+        </scn-metadata-value>
+        <scn-metadata-value label="Status">
           <nz-tag [nzColor]="getSubscriptionStatus().color">
             {{ getSubscriptionStatus().label }}
           </nz-tag>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Owner" [nzSpan]="2">
+        </scn-metadata-value>
+        <scn-metadata-value label="Owner">
           <span class="mono">{{ channel()!.owner_user_id }}</span>
-        </nz-descriptions-item>
+        </scn-metadata-value>
         @if (channel()!.description_name) {
-          <nz-descriptions-item nzTitle="Description" [nzSpan]="2">
+          <scn-metadata-value label="Description">
             {{ channel()!.description_name }}
-          </nz-descriptions-item>
+          </scn-metadata-value>
         }
-        <nz-descriptions-item nzTitle="Messages Sent">
+        <scn-metadata-value label="Messages Sent">
           {{ channel()!.messages_sent }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Last Sent">
+        </scn-metadata-value>
+        <scn-metadata-value label="Last Sent">
           @if (channel()!.timestamp_lastsent) {
-            {{ channel()!.timestamp_lastsent | relativeTime }}
+            <div class="timestamp-absolute">{{ channel()!.timestamp_lastsent | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+            <div class="timestamp-relative">{{ channel()!.timestamp_lastsent | relativeTime }}</div>
           } @else {
             Never
           }
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Created" [nzSpan]="2">
-          {{ channel()!.timestamp_created }}
-        </nz-descriptions-item>
-      </nz-descriptions>
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
+          <div class="timestamp-absolute">{{ channel()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ channel()!.timestamp_created | relativeTime }}</div>
+        </scn-metadata-value>
+        @if (isOwner() && channel()!.subscribe_key) {
+          <scn-metadata-value label="Subscribe Key">
+            <div class="key-field">
+              <nz-input-group [nzSuffix]="subscribeKeySuffix">
+                <input
+                  type="text"
+                  nz-input
+                  [value]="channel()!.subscribe_key"
+                  readonly
+                  class="mono"
+                />
+              </nz-input-group>
+              <ng-template #subscribeKeySuffix>
+                <span
+                  nz-icon
+                  nzType="copy"
+                  class="action-icon"
+                  nz-tooltip
+                  nzTooltipTitle="Copy"
+                  [appCopyToClipboard]="channel()!.subscribe_key!"
+                ></span>
+              </ng-template>
+              <div class="key-actions">
+                <button
+                  nz-button
+                  nzSize="small"
+                  nz-popconfirm
+                  nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
+                  (nzOnConfirm)="regenerateSubscribeKey()"
+                >
+                  Invalidate & Regenerate
+                </button>
+              </div>
+            </div>
+          </scn-metadata-value>
+          <scn-metadata-value label="Subscribe QR">
+            <div class="qr-container">
+              <app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
+              <p class="qr-hint">Scan with the SimpleCloudNotifier app to subscribe</p>
+            </div>
+          </scn-metadata-value>
+        }
+        @if (isOwner() && channel()!.send_key) {
+          <scn-metadata-value label="Send Key">
+            <div class="key-field">
+              <nz-input-group [nzSuffix]="sendKeySuffix">
+                <input
+                  type="text"
+                  nz-input
+                  [value]="channel()!.send_key"
+                  readonly
+                  class="mono"
+                />
+              </nz-input-group>
+              <ng-template #sendKeySuffix>
+                <span
+                  nz-icon
+                  nzType="copy"
+                  class="action-icon"
+                  nz-tooltip
+                  nzTooltipTitle="Copy"
+                  [appCopyToClipboard]="channel()!.send_key!"
+                ></span>
+              </ng-template>
+              <div class="key-actions">
+                <button
+                  nz-button
+                  nzSize="small"
+                  nz-popconfirm
+                  nzPopconfirmTitle="Regenerate send key?"
+                  (nzOnConfirm)="regenerateSendKey()"
+                >
+                  Regenerate
+                </button>
+              </div>
+            </div>
+          </scn-metadata-value>
+        }
+      </scn-metadata-grid>
     </nz-card>
 
     @if (isOwner()) {
-      <nz-card nzTitle="Keys" class="mt-16">
-        @if (channel()!.subscribe_key) {
-          <div class="key-section">
-            <label>Subscribe Key</label>
-            <nz-input-group [nzSuffix]="subscribeKeySuffix">
-              <input
-                type="text"
-                nz-input
-                [value]="channel()!.subscribe_key"
-                readonly
-                class="mono"
-              />
-            </nz-input-group>
-            <ng-template #subscribeKeySuffix>
-              <span
-                nz-icon
-                nzType="copy"
-                class="action-icon"
-                nz-tooltip
-                nzTooltipTitle="Copy"
-                [appCopyToClipboard]="channel()!.subscribe_key!"
-              ></span>
-            </ng-template>
-            <div class="key-actions">
-              <button
-                nz-button
-                nzSize="small"
-                nz-popconfirm
-                nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
-                (nzOnConfirm)="regenerateSubscribeKey()"
-              >
-                Invalidate & Regenerate
-              </button>
-            </div>
-            <div class="qr-section">
-              <app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
-              <p class="qr-hint">Scan this QR code with the SimpleCloudNotifier app to subscribe to this channel.</p>
-            </div>
-          </div>
-        }
-
-        @if (channel()!.send_key) {
-          <nz-divider></nz-divider>
-          <div class="key-section">
-            <label>Send Key</label>
-            <nz-input-group [nzSuffix]="sendKeySuffix">
-              <input
-                type="text"
-                nz-input
-                [value]="channel()!.send_key"
-                readonly
-                class="mono"
-              />
-            </nz-input-group>
-            <ng-template #sendKeySuffix>
-              <span
-                nz-icon
-                nzType="copy"
-                class="action-icon"
-                nz-tooltip
-                nzTooltipTitle="Copy"
-                [appCopyToClipboard]="channel()!.send_key!"
-              ></span>
-            </ng-template>
-            <div class="key-actions">
-              <button
-                nz-button
-                nzSize="small"
-                nz-popconfirm
-                nzPopconfirmTitle="Regenerate send key?"
-                (nzOnConfirm)="regenerateSendKey()"
-              >
-                Regenerate
-              </button>
-            </div>
-          </div>
-        }
-      </nz-card>
-
       <nz-card nzTitle="Subscriptions" class="mt-16">
         <nz-table
           #subscriptionTable
@@ -149,22 +150,26 @@
           <thead>
             <tr>
               <th>Subscriber</th>
-              <th>Status</th>
-              <th>Created</th>
+              <th nzWidth="0">Status</th>
+              <th nzWidth="0">Created</th>
             </tr>
           </thead>
           <tbody>
             @for (sub of subscriptions(); track sub.subscription_id) {
               <tr>
                 <td>
-                  <span class="mono">{{ sub.subscriber_user_id }}</span>
+                  <div class="cell-name">{{ getUserDisplayName(sub.subscriber_user_id) }}</div>
+                  <div class="cell-id mono">{{ sub.subscriber_user_id }}</div>
                 </td>
                 <td>
                   <nz-tag [nzColor]="sub.confirmed ? 'green' : 'orange'">
                     {{ sub.confirmed ? 'Confirmed' : 'Pending' }}
                   </nz-tag>
                 </td>
-                <td>{{ sub.timestamp_created | relativeTime }}</td>
+                <td>
+                  <div class="timestamp-absolute">{{ sub.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ sub.timestamp_created | relativeTime }}</div>
+                </td>
               </tr>
             } @empty {
               <tr>

webapp/src/app/features/channels/channel-detail/channel-detail.component.scss

@@ -10,17 +10,14 @@
   gap: 8px;
 }
 
-.key-section {
-  label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 8px;
-    color: #333;
-  }
+.key-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .key-actions {
-  margin-top: 8px;
+  display: flex;
 }
 
 .action-icon {
@@ -44,28 +41,36 @@
   }
 }
 
-.qr-section {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
-
-  label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 12px;
-    color: #333;
-  }
-
-  app-qr-code-display {
-    display: flex;
-    justify-content: center;
-  }
+.qr-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .qr-hint {
-  text-align: center;
   color: #666;
   font-size: 13px;
-  margin-top: 12px;
+  margin-top: 8px;
   margin-bottom: 0;
 }
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

webapp/src/app/features/channels/channel-detail/channel-detail.component.ts

@@ -1,11 +1,10 @@
 import { Component, inject, signal, computed, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
@@ -19,21 +18,23 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
 import { ChannelWithSubscription, Subscription } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 import { CopyToClipboardDirective } from '../../../shared/directives/copy-to-clipboard.directive';
 import { QrCodeDisplayComponent } from '../../../shared/components/qr-code-display/qr-code-display.component';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
 @Component({
   selector: 'app-channel-detail',
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     FormsModule,
     NzCardModule,
     NzButtonModule,
     NzIconModule,
-    NzDescriptionsModule,
     NzTagModule,
     NzSpinModule,
     NzPopconfirmModule,
@@ -47,6 +48,8 @@ import { QrCodeDisplayComponent } from '../../../shared/components/qr-code-displ
     RelativeTimePipe,
     CopyToClipboardDirective,
     QrCodeDisplayComponent,
+    MetadataGridComponent,
+    MetadataValueComponent,
   ],
   templateUrl: './channel-detail.component.html',
   styleUrl: './channel-detail.component.scss'
@@ -57,9 +60,11 @@ export class ChannelDetailComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private userCacheService = inject(UserCacheService);
 
   channel = signal<ChannelWithSubscription | null>(null);
   subscriptions = signal<Subscription[]>([]);
+  userNames = signal<Map<string, ResolvedUser>>(new Map());
   loading = signal(true);
   loadingSubscriptions = signal(false);
   // Edit modal
@@ -118,6 +123,7 @@ export class ChannelDetailComponent implements OnInit {
       next: (response) => {
         this.subscriptions.set(response.subscriptions);
         this.loadingSubscriptions.set(false);
+        this.resolveUserNames(response.subscriptions);
       },
       error: () => {
         this.loadingSubscriptions.set(false);
@@ -125,6 +131,23 @@ export class ChannelDetailComponent implements OnInit {
     });
   }
 
+  private resolveUserNames(subscriptions: Subscription[]): void {
+    const userIds = new Set<string>();
+    for (const sub of subscriptions) {
+      userIds.add(sub.subscriber_user_id);
+    }
+    for (const id of userIds) {
+      this.userCacheService.resolveUser(id).subscribe(resolved => {
+        this.userNames.update(map => new Map(map).set(id, resolved));
+      });
+    }
+  }
+
+  getUserDisplayName(userId: string): string {
+    const resolved = this.userNames().get(userId);
+    return resolved?.displayName || userId;
+  }
+
   goBack(): void {
     this.router.navigate(['/channels']);
   }

webapp/src/app/features/channels/channel-list/channel-list.component.html

@@ -21,12 +21,13 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="20%">Name</th>
-          <th nzWidth="15%">Internal Name</th>
-          <th nzWidth="15%">Owner</th>
-          <th nzWidth="15%">Status</th>
-          <th nzWidth="15%">Messages</th>
-          <th nzWidth="20%">Last Sent</th>
+          <th>Name</th>
+          <th nzWidth="0">Internal Name</th>
+          <th nzWidth="0">Owner</th>
+          <th nzWidth="0">Status</th>
+          <th nzWidth="0">Subscribers</th>
+          <th nzWidth="0">Messages</th>
+          <th nzWidth="0">Last Sent</th>
         </tr>
       </thead>
       <tbody>
@@ -34,9 +35,7 @@
           <tr [class.clickable-row]="isOwned(channel)" (click)="isOwned(channel) && viewChannel(channel)">
             <td>
               <div class="channel-name">{{ channel.display_name }}</div>
-              @if (channel.description_name) {
-                <div class="channel-description">{{ channel.description_name }}</div>
-              }
+              <div class="channel-id mono">{{ channel.channel_id }}</div>
             </td>
             <td>
               <span class="mono">{{ channel.internal_name }}</span>
@@ -47,12 +46,18 @@
                 {{ getSubscriptionStatus(channel).label }}
               </nz-tag>
             </td>
+            <td>
+              @if (isOwned(channel)) {
+                <app-channel-subscribers [channelId]="channel.channel_id" />
+              } @else {
+                <span class="text-muted">-</span>
+              }
+            </td>
             <td>{{ channel.messages_sent }}</td>
             <td>
               @if (channel.timestamp_lastsent) {
-                <span nz-tooltip [nzTooltipTitle]="channel.timestamp_lastsent">
-                  {{ channel.timestamp_lastsent | relativeTime }}
-                </span>
+                <div class="timestamp-absolute">{{ channel.timestamp_lastsent | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                <div class="timestamp-relative">{{ channel.timestamp_lastsent | relativeTime }}</div>
               } @else {
                 <span class="text-muted">Never</span>
               }
@@ -60,7 +65,7 @@
           </tr>
         } @empty {
           <tr>
-            <td colspan="6">
+            <td colspan="7">
               <nz-empty nzNotFoundContent="No channels found"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/channels/channel-list/channel-list.component.scss

@@ -23,12 +23,30 @@
   color: #333;
 }
 
-.channel-description {
-  font-size: 12px;
+.channel-id {
+  font-size: 11px;
   color: #999;
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 .text-muted {
   color: #999;
 }
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}
+
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}

webapp/src/app/features/channels/channel-list/channel-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { Router } from '@angular/router';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -14,12 +14,14 @@ import { AuthService } from '../../../core/services/auth.service';
 import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
 import { ChannelWithSubscription } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { ChannelSubscribersComponent } from '../channel-subscribers/channel-subscribers.component';
 
 @Component({
   selector: 'app-channel-list',
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     NzTableModule,
     NzButtonModule,
     NzIconModule,
@@ -29,6 +31,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzCardModule,
     NzToolTipModule,
     RelativeTimePipe,
+    ChannelSubscribersComponent,
   ],
   templateUrl: './channel-list.component.html',
   styleUrl: './channel-list.component.scss'

webapp/src/app/features/channels/channel-subscribers/channel-subscribers.component.ts

@@ -0,0 +1,107 @@
+import { Component, inject, input, signal, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { Subscription } from '../../../core/models';
+
+@Component({
+  selector: 'app-channel-subscribers',
+  standalone: true,
+  imports: [CommonModule, NzSpinModule, NzToolTipModule],
+  template: `
+    @if (loading()) {
+      <nz-spin nzSimple nzSize="small"></nz-spin>
+    } @else if (subscribers().length === 0) {
+      <span class="text-muted">None</span>
+    } @else {
+      <div class="subscribers-list">
+        @for (sub of subscribers(); track sub.subscription_id) {
+          <span
+            class="subscriber"
+            [class.unconfirmed]="!sub.confirmed"
+            nz-tooltip
+            [nzTooltipTitle]="getTooltip(sub)"
+          >
+            {{ getDisplayName(sub.subscriber_user_id) }}
+          </span>
+        }
+      </div>
+    }
+  `,
+  styles: [`
+    .text-muted {
+      color: #999;
+    }
+    .subscribers-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    .subscriber {
+      background: #f0f0f0;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+    .subscriber.unconfirmed {
+      background: #fff7e6;
+      color: #d48806;
+    }
+  `]
+})
+export class ChannelSubscribersComponent implements OnInit {
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private userCacheService = inject(UserCacheService);
+
+  channelId = input.required<string>();
+
+  loading = signal(true);
+  subscribers = signal<Subscription[]>([]);
+  userNames = signal<Map<string, ResolvedUser>>(new Map());
+
+  ngOnInit(): void {
+    this.loadSubscribers();
+  }
+
+  private loadSubscribers(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) {
+      this.loading.set(false);
+      return;
+    }
+
+    this.apiService.getChannelSubscriptions(userId, this.channelId()).subscribe({
+      next: (response) => {
+        this.subscribers.set(response.subscriptions);
+        this.loading.set(false);
+        this.resolveUserNames(response.subscriptions);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private resolveUserNames(subscriptions: Subscription[]): void {
+    const userIds = new Set(subscriptions.map(s => s.subscriber_user_id));
+    for (const userId of userIds) {
+      this.userCacheService.resolveUser(userId).subscribe(resolved => {
+        this.userNames.update(map => new Map(map).set(userId, resolved));
+      });
+    }
+  }
+
+  getDisplayName(userId: string): string {
+    const resolved = this.userNames().get(userId);
+    return resolved?.displayName || userId;
+  }
+
+  getTooltip(sub: Subscription): string {
+    const status = sub.confirmed ? 'Confirmed' : 'Pending';
+    return `${sub.subscriber_user_id} (${status})`;
+  }
+}

webapp/src/app/features/clients/client-detail/client-detail.component.html

@@ -0,0 +1,72 @@
+<div class="page-content">
+  @if (loading()) {
+    <div class="loading-container">
+      <nz-spin nzSimple nzSize="large"></nz-spin>
+    </div>
+  } @else if (client()) {
+    <div class="detail-header">
+      <button nz-button (click)="goBack()">
+        <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
+        Back to Clients
+      </button>
+      <div class="header-actions">
+        <button
+          nz-button
+          nzDanger
+          nz-popconfirm
+          nzPopconfirmTitle="Are you sure you want to delete this client?"
+          (nzOnConfirm)="deleteClient()"
+        >
+          <span nz-icon nzType="delete"></span>
+          Delete
+        </button>
+      </div>
+    </div>
+
+    <nz-card>
+      <div class="client-header">
+        <span
+          nz-icon
+          [nzType]="getClientIcon(client()!.type)"
+          nzTheme="outline"
+          class="client-type-icon"
+        ></span>
+        <h2 class="client-title">{{ client()!.name || 'Unnamed Client' }}</h2>
+        <nz-tag>{{ getClientTypeLabel(client()!.type) }}</nz-tag>
+      </div>
+
+      <scn-metadata-grid>
+        <scn-metadata-value label="Client ID">
+          <span class="mono">{{ client()!.client_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Type">
+          <nz-tag>{{ getClientTypeLabel(client()!.type) }}</nz-tag>
+        </scn-metadata-value>
+        <scn-metadata-value label="Agent">
+          <div class="agent-info">
+            <span>{{ client()!.agent_model }}</span>
+            <span class="agent-version">v{{ client()!.agent_version }}</span>
+          </div>
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
+          <div class="timestamp-absolute">{{ client()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ client()!.timestamp_created | relativeTime }}</div>
+        </scn-metadata-value>
+        <scn-metadata-value label="FCM Token">
+          <span class="mono fcm-token" nz-tooltip [nzTooltipTitle]="client()!.fcm_token">
+            {{ client()!.fcm_token }}
+          </span>
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
+  } @else {
+    <nz-card>
+      <div class="not-found">
+        <p>Client not found</p>
+        <button nz-button nzType="primary" (click)="goBack()">
+          Back to Clients
+        </button>
+      </div>
+    </nz-card>
+  }
+</div>

webapp/src/app/features/clients/client-detail/client-detail.component.scss

@@ -0,0 +1,67 @@
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.client-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.client-type-icon {
+  font-size: 24px;
+  color: #666;
+}
+
+.client-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.agent-info {
+  display: flex;
+  flex-direction: column;
+
+  .agent-version {
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.fcm-token {
+  display: block;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.not-found {
+  text-align: center;
+  padding: 48px;
+
+  p {
+    color: #999;
+    margin-bottom: 16px;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

webapp/src/app/features/clients/client-detail/client-detail.component.ts

@@ -0,0 +1,102 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NzCardModule } from 'ng-zorro-antd/card';
+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 { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { NotificationService } from '../../../core/services/notification.service';
+import { Client, ClientType, getClientTypeIcon } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
+
+@Component({
+  selector: 'app-client-detail',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DatePipe,
+    NzCardModule,
+    NzButtonModule,
+    NzIconModule,
+    NzTagModule,
+    NzSpinModule,
+    NzPopconfirmModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
+  ],
+  templateUrl: './client-detail.component.html',
+  styleUrl: './client-detail.component.scss'
+})
+export class ClientDetailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+
+  client = signal<Client | null>(null);
+  loading = signal(true);
+
+  ngOnInit(): void {
+    const clientId = this.route.snapshot.paramMap.get('id');
+    if (clientId) {
+      this.loadClient(clientId);
+    }
+  }
+
+  loadClient(clientId: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loading.set(true);
+    this.apiService.getClient(userId, clientId).subscribe({
+      next: (client) => {
+        this.client.set(client);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  goBack(): void {
+    this.router.navigate(['/clients']);
+  }
+
+  getClientIcon(type: ClientType): string {
+    return getClientTypeIcon(type);
+  }
+
+  getClientTypeLabel(type: ClientType): string {
+    switch (type) {
+      case 'ANDROID': return 'Android';
+      case 'IOS': return 'iOS';
+      case 'MACOS': return 'macOS';
+      case 'WINDOWS': return 'Windows';
+      case 'LINUX': return 'Linux';
+      default: return type;
+    }
+  }
+
+  deleteClient(): void {
+    const client = this.client();
+    const userId = this.authService.getUserId();
+    if (!client || !userId) return;
+
+    this.apiService.deleteClient(userId, client.client_id).subscribe({
+      next: () => {
+        this.notification.success('Client deleted');
+        this.router.navigate(['/clients']);
+      }
+    });
+  }
+}

webapp/src/app/features/clients/client-list/client-list.component.html

@@ -19,17 +19,16 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="5%"></th>
-          <th nzWidth="20%">Name</th>
-          <th nzWidth="15%">Type</th>
-          <th nzWidth="25%">Agent</th>
-          <th nzWidth="20%">Created</th>
-          <th nzWidth="15%">Client ID</th>
+          <th nzWidth="0"></th>
+          <th>Name</th>
+          <th nzWidth="0">Type</th>
+          <th nzWidth="0">Agent</th>
+          <th nzWidth="0">Created</th>
         </tr>
       </thead>
       <tbody>
         @for (client of clients(); track client.client_id) {
-          <tr>
+          <tr class="clickable-row" (click)="openClient(client.client_id)">
             <td>
               <span
                 nz-icon
@@ -38,7 +37,10 @@
                 class="client-icon"
               ></span>
             </td>
-            <td>{{ client.name || '-' }}</td>
+            <td>
+              <div class="client-name">{{ client.name || '-' }}</div>
+              <div class="client-id mono">{{ client.client_id }}</div>
+            </td>
             <td>
               <nz-tag>{{ getClientTypeLabel(client.type) }}</nz-tag>
             </td>
@@ -49,17 +51,13 @@
               </div>
             </td>
             <td>
-              <span nz-tooltip [nzTooltipTitle]="client.timestamp_created">
-                {{ client.timestamp_created | relativeTime }}
-              </span>
-            </td>
-            <td>
-              <span class="mono client-id">{{ client.client_id }}</span>
+              <div class="timestamp-absolute">{{ client.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+              <div class="timestamp-relative">{{ client.timestamp_created | relativeTime }}</div>
             </td>
           </tr>
         } @empty {
           <tr>
-            <td colspan="6">
+            <td colspan="5">
               <nz-empty nzNotFoundContent="No clients registered"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/clients/client-list/client-list.component.scss

@@ -24,7 +24,31 @@
   }
 }
 
+.client-name {
+  font-weight: 500;
+  color: #333;
+}
+
 .client-id {
   font-size: 11px;
   color: #999;
+  margin-top: 2px;
+}
+
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
 }

webapp/src/app/features/clients/client-list/client-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { Router } from '@angular/router';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -17,6 +18,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     NzTableModule,
     NzButtonModule,
     NzIconModule,
@@ -32,6 +34,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
 export class ClientListComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
+  private router = inject(Router);
 
   clients = signal<Client[]>([]);
   loading = signal(false);
@@ -70,4 +73,8 @@ export class ClientListComponent implements OnInit {
       default: return type;
     }
   }
+
+  openClient(clientId: string): void {
+    this.router.navigate(['/clients', clientId]);
+  }
 }

webapp/src/app/features/keys/key-detail/key-detail.component.html

@@ -0,0 +1,191 @@
+<div class="page-content">
+  @if (loading()) {
+    <div class="loading-container">
+      <nz-spin nzSimple nzSize="large"></nz-spin>
+    </div>
+  } @else if (key()) {
+    <div class="detail-header">
+      <button nz-button (click)="goBack()">
+        <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
+        Back to Keys
+      </button>
+      <div class="header-actions">
+        <button nz-button (click)="openEditModal()">
+          <span nz-icon nzType="edit"></span>
+          Edit
+        </button>
+        @if (!isCurrentKey()) {
+          <button
+            nz-button
+            nzDanger
+            nz-popconfirm
+            nzPopconfirmTitle="Are you sure you want to delete this key?"
+            (nzOnConfirm)="deleteKey()"
+          >
+            <span nz-icon nzType="delete"></span>
+            Delete
+          </button>
+        }
+      </div>
+    </div>
+
+    <nz-card>
+      <div class="key-header">
+        <h2 class="key-title">{{ key()!.name }}</h2>
+        @if (isCurrentKey()) {
+          <nz-tag nzColor="cyan">Current</nz-tag>
+        }
+      </div>
+
+      <scn-metadata-grid>
+        <scn-metadata-value label="Key ID">
+          <span class="mono">{{ key()!.keytoken_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Permissions">
+          <div class="permissions">
+            @for (perm of getPermissions(); track perm) {
+              <nz-tag
+                [nzColor]="getPermissionColor(perm)"
+                nz-tooltip
+                [nzTooltipTitle]="getPermissionLabel(perm)"
+              >
+                {{ perm }}
+              </nz-tag>
+            }
+          </div>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel Access">
+          @if (key()!.all_channels) {
+            <nz-tag nzColor="default">All Channels</nz-tag>
+          } @else if (key()!.channels && key()!.channels.length > 0) {
+            <div class="channel-list">
+              @for (channelId of key()!.channels; track channelId) {
+                <nz-tag nzColor="orange" nz-tooltip [nzTooltipTitle]="channelId">
+                  {{ getChannelDisplayName(channelId) }}
+                </nz-tag>
+              }
+            </div>
+          } @else {
+            <span class="text-muted">No channels</span>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Messages Sent">
+          {{ key()!.messages_sent }}
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
+          <div class="timestamp-absolute">{{ key()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ key()!.timestamp_created | relativeTime }}</div>
+        </scn-metadata-value>
+        <scn-metadata-value label="Last Used">
+          @if (key()!.timestamp_lastused) {
+            <div class="timestamp-absolute">{{ key()!.timestamp_lastused | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+            <div class="timestamp-relative">{{ key()!.timestamp_lastused | relativeTime }}</div>
+          } @else {
+            <span class="text-muted">Never</span>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Owner">
+          @if (resolvedOwner()) {
+            <div class="owner-name">{{ resolvedOwner()!.displayName }}</div>
+            <div class="owner-id mono">{{ key()!.owner_user_id }}</div>
+          } @else {
+            <span class="mono">{{ key()!.owner_user_id }}</span>
+          }
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
+  } @else {
+    <nz-card>
+      <div class="not-found">
+        <p>Key not found</p>
+        <button nz-button nzType="primary" (click)="goBack()">
+          Back to Keys
+        </button>
+      </div>
+    </nz-card>
+  }
+</div>
+
+<!-- Edit Modal -->
+<nz-modal
+  [(nzVisible)]="showEditModal"
+  nzTitle="Edit Key"
+  (nzOnCancel)="closeEditModal()"
+  [nzFooter]="editModalFooter"
+  nzWidth="500px"
+>
+  <ng-container *nzModalContent>
+    <nz-form-item>
+      <nz-form-label>Name</nz-form-label>
+      <nz-form-control>
+        <input
+          type="text"
+          nz-input
+          placeholder="Enter a name for this key"
+          [(ngModel)]="editKeyName"
+        />
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label>Permissions</nz-form-label>
+      <nz-form-control>
+        <div class="permission-checkboxes">
+          @for (opt of permissionOptions; track opt.value) {
+            <label
+              nz-checkbox
+              [nzChecked]="isEditPermissionChecked(opt.value)"
+              [nzDisabled]="opt.value !== 'A' && isEditPermissionChecked('A')"
+              (nzCheckedChange)="onEditPermissionChange(opt.value, $event)"
+            >
+              <nz-tag [nzColor]="getPermissionColor(opt.value)">{{ opt.value }}</nz-tag>
+              <span class="perm-label">{{ opt.label }}</span>
+              <span class="perm-desc">- {{ opt.description }}</span>
+            </label>
+          }
+        </div>
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <label nz-checkbox [(ngModel)]="editKeyAllChannels">
+        Access to all channels
+      </label>
+    </nz-form-item>
+
+    @if (!editKeyAllChannels) {
+      <nz-form-item class="mb-0">
+        <nz-form-label>Channels</nz-form-label>
+        <nz-form-control>
+          <nz-select
+            [(ngModel)]="editKeyChannels"
+            nzMode="multiple"
+            nzPlaceHolder="Select channels"
+            nzShowSearch
+            style="width: 100%"
+          >
+            @for (channel of availableChannels(); track channel.channel_id) {
+              <nz-option
+                [nzValue]="channel.channel_id"
+                [nzLabel]="getChannelLabel(channel)"
+              ></nz-option>
+            }
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+    }
+  </ng-container>
+</nz-modal>
+
+<ng-template #editModalFooter>
+  <button nz-button (click)="closeEditModal()">Cancel</button>
+  <button
+    nz-button
+    nzType="primary"
+    [nzLoading]="updating()"
+    [disabled]="!editKeyName.trim() || editKeyPermissions.length === 0"
+    (click)="updateKey()"
+  >
+    Save
+  </button>
+</ng-template>

webapp/src/app/features/keys/key-detail/key-detail.component.scss

@@ -0,0 +1,98 @@
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.key-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.key-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.permissions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.channel-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.owner-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.owner-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.not-found {
+  text-align: center;
+  padding: 48px;
+
+  p {
+    color: #999;
+    margin-bottom: 16px;
+  }
+}
+
+.permission-checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    display: flex;
+    align-items: center;
+    margin-left: 0;
+  }
+
+  nz-tag {
+    width: 32px;
+    text-align: center;
+    margin-right: 8px;
+  }
+
+  .perm-label {
+    min-width: 100px;
+  }
+
+  .perm-desc {
+    color: #999;
+    font-size: 12px;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

webapp/src/app/features/keys/key-detail/key-detail.component.ts

@@ -0,0 +1,259 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { NzCardModule } from 'ng-zorro-antd/card';
+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 { NzModalModule } from 'ng-zorro-antd/modal';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { NotificationService } from '../../../core/services/notification.service';
+import { ChannelCacheService, ResolvedChannel } from '../../../core/services/channel-cache.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { KeyToken, parsePermissions, TokenPermission, ChannelWithSubscription } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
+
+interface PermissionOption {
+  value: TokenPermission;
+  label: string;
+  description: string;
+}
+
+@Component({
+  selector: 'app-key-detail',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DatePipe,
+    FormsModule,
+    NzCardModule,
+    NzButtonModule,
+    NzIconModule,
+    NzTagModule,
+    NzSpinModule,
+    NzPopconfirmModule,
+    NzModalModule,
+    NzFormModule,
+    NzInputModule,
+    NzCheckboxModule,
+    NzSelectModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
+  ],
+  templateUrl: './key-detail.component.html',
+  styleUrl: './key-detail.component.scss'
+})
+export class KeyDetailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+  private channelCacheService = inject(ChannelCacheService);
+  private userCacheService = inject(UserCacheService);
+
+  key = signal<KeyToken | null>(null);
+  currentKeyId = signal<string | null>(null);
+  loading = signal(true);
+  channelNames = signal<Map<string, ResolvedChannel>>(new Map());
+  availableChannels = signal<ChannelWithSubscription[]>([]);
+  resolvedOwner = signal<ResolvedUser | null>(null);
+
+  // Edit modal
+  showEditModal = signal(false);
+  editKeyName = '';
+  editKeyPermissions: TokenPermission[] = [];
+  editKeyAllChannels = true;
+  editKeyChannels: string[] = [];
+  updating = signal(false);
+
+  permissionOptions: PermissionOption[] = [
+    { value: 'A', label: 'Admin', description: 'Full access to all operations' },
+    { value: 'CR', label: 'Channel Read', description: 'Read messages from channels' },
+    { value: 'CS', label: 'Channel Send', description: 'Send messages to channels' },
+    { value: 'UR', label: 'User Read', description: 'Read user information' },
+  ];
+
+  ngOnInit(): void {
+    const keyId = this.route.snapshot.paramMap.get('id');
+    if (keyId) {
+      this.loadKey(keyId);
+      this.loadCurrentKey();
+      this.loadAvailableChannels();
+    }
+  }
+
+  loadKey(keyId: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loading.set(true);
+    this.apiService.getKey(userId, keyId).subscribe({
+      next: (key) => {
+        this.key.set(key);
+        this.loading.set(false);
+        this.resolveChannelNames(key);
+        this.resolveOwner(key.owner_user_id);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private resolveOwner(ownerId: string): void {
+    this.userCacheService.resolveUser(ownerId).subscribe(resolved => {
+      this.resolvedOwner.set(resolved);
+    });
+  }
+
+  loadCurrentKey(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.apiService.getCurrentKey(userId).subscribe({
+      next: (key) => {
+        this.currentKeyId.set(key.keytoken_id);
+      }
+    });
+  }
+
+  loadAvailableChannels(): void {
+    this.channelCacheService.getAllChannels().subscribe(channels => {
+      this.availableChannels.set(channels);
+    });
+  }
+
+  private resolveChannelNames(key: KeyToken): void {
+    if (!key.all_channels && key.channels && key.channels.length > 0) {
+      this.channelCacheService.resolveChannels(key.channels).subscribe(resolved => {
+        this.channelNames.set(resolved);
+      });
+    }
+  }
+
+  goBack(): void {
+    this.router.navigate(['/keys']);
+  }
+
+  isCurrentKey(): boolean {
+    const key = this.key();
+    return key?.keytoken_id === this.currentKeyId();
+  }
+
+  getPermissions(): TokenPermission[] {
+    const key = this.key();
+    return key ? parsePermissions(key.permissions) : [];
+  }
+
+  getPermissionColor(perm: TokenPermission): string {
+    switch (perm) {
+      case 'A': return 'red';
+      case 'CR': return 'blue';
+      case 'CS': return 'green';
+      case 'UR': return 'purple';
+      default: return 'default';
+    }
+  }
+
+  getPermissionLabel(perm: TokenPermission): string {
+    const option = this.permissionOptions.find(o => o.value === perm);
+    return option?.label || perm;
+  }
+
+  getChannelDisplayName(channelId: string): string {
+    const resolved = this.channelNames().get(channelId);
+    return resolved?.displayName || channelId;
+  }
+
+  getChannelLabel(channel: ChannelWithSubscription): string {
+    return channel.display_name || channel.internal_name;
+  }
+
+  // Edit modal
+  openEditModal(): void {
+    const key = this.key();
+    if (!key) return;
+
+    this.editKeyName = key.name;
+    this.editKeyPermissions = parsePermissions(key.permissions);
+    this.editKeyAllChannels = key.all_channels;
+    this.editKeyChannels = key.channels ? [...key.channels] : [];
+    this.showEditModal.set(true);
+  }
+
+  closeEditModal(): void {
+    this.showEditModal.set(false);
+  }
+
+  updateKey(): void {
+    const userId = this.authService.getUserId();
+    const key = this.key();
+    if (!userId || !key || !this.editKeyName.trim() || this.editKeyPermissions.length === 0) return;
+
+    this.updating.set(true);
+    this.apiService.updateKey(userId, key.keytoken_id, {
+      name: this.editKeyName.trim(),
+      permissions: this.editKeyPermissions.join(';'),
+      all_channels: this.editKeyAllChannels,
+      channels: this.editKeyAllChannels ? undefined : this.editKeyChannels
+    }).subscribe({
+      next: (updated) => {
+        this.key.set(updated);
+        this.notification.success('Key updated');
+        this.updating.set(false);
+        this.closeEditModal();
+        this.resolveChannelNames(updated);
+      },
+      error: () => {
+        this.updating.set(false);
+      }
+    });
+  }
+
+  onEditPermissionChange(perm: TokenPermission, checked: boolean): void {
+    if (checked) {
+      if (perm === 'A') {
+        this.editKeyPermissions = ['A'];
+      } else if (!this.editKeyPermissions.includes(perm)) {
+        this.editKeyPermissions = [...this.editKeyPermissions, perm];
+      }
+    } else {
+      this.editKeyPermissions = this.editKeyPermissions.filter(p => p !== perm);
+    }
+  }
+
+  isEditPermissionChecked(perm: TokenPermission): boolean {
+    return this.editKeyPermissions.includes(perm);
+  }
+
+  deleteKey(): void {
+    const key = this.key();
+    const userId = this.authService.getUserId();
+    if (!key || !userId) return;
+
+    if (this.isCurrentKey()) {
+      this.notification.warning('Cannot delete the key you are currently using');
+      return;
+    }
+
+    this.apiService.deleteKey(userId, key.keytoken_id).subscribe({
+      next: () => {
+        this.notification.success('Key deleted');
+        this.router.navigate(['/keys']);
+      }
+    });
+  }
+}

webapp/src/app/features/keys/key-list/key-list.component.html

@@ -25,16 +25,16 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="25%">Name</th>
-          <th nzWidth="25%">Permissions</th>
-          <th nzWidth="15%">Messages Sent</th>
-          <th nzWidth="20%">Last Used</th>
-          <th nzWidth="15%">Actions</th>
+          <th>Name</th>
+          <th>Permissions</th>
+          <th nzWidth="0">Messages Sent</th>
+          <th nzWidth="0">Last Used</th>
+          <th nzWidth="0">Actions</th>
         </tr>
       </thead>
       <tbody>
         @for (key of keys(); track key.keytoken_id) {
-          <tr>
+          <tr class="clickable-row" (click)="viewKey(key)">
             <td>
               <div class="key-name">
                 {{ key.name }}
@@ -71,14 +71,13 @@
             <td>{{ key.messages_sent }}</td>
             <td>
               @if (key.timestamp_lastused) {
-                <span nz-tooltip [nzTooltipTitle]="key.timestamp_lastused">
-                  {{ key.timestamp_lastused | relativeTime }}
-                </span>
+                <div class="timestamp-absolute">{{ key.timestamp_lastused | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                <div class="timestamp-relative">{{ key.timestamp_lastused | relativeTime }}</div>
               } @else {
                 <span class="text-muted">Never</span>
               }
             </td>
-            <td>
+            <td (click)="$event.stopPropagation()">
               <div class="action-buttons">
                 <button
                   nz-button

webapp/src/app/features/keys/key-list/key-list.component.scss

@@ -83,3 +83,21 @@
     font-size: 12px;
   }
 }
+
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

webapp/src/app/features/keys/key-list/key-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -34,6 +35,7 @@ interface PermissionOption {
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     FormsModule,
     NzTableModule,
     NzButtonModule,
@@ -56,6 +58,7 @@ interface PermissionOption {
   styleUrl: './key-list.component.scss'
 })
 export class KeyListComponent implements OnInit {
+  private router = inject(Router);
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
@@ -162,6 +165,10 @@ export class KeyListComponent implements OnInit {
     return key.keytoken_id === this.currentKeyId();
   }
 
+  viewKey(key: KeyToken): void {
+    this.router.navigate(['/keys', key.keytoken_id]);
+  }
+
   deleteKey(key: KeyToken): void {
     if (this.isCurrentKey(key)) {
       this.notification.warning('Cannot delete the key you are currently using');

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

@@ -9,58 +9,55 @@
         <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
         Back to Messages
       </button>
-      <button
-        nz-button
-        nzType="primary"
-        nzDanger
-        nz-popconfirm
-        nzPopconfirmTitle="Are you sure you want to delete this message?"
-        nzPopconfirmPlacement="bottomRight"
-        (nzOnConfirm)="deleteMessage()"
-        [nzLoading]="deleting()"
-      >
-        <span nz-icon nzType="delete"></span>
-        Delete
-      </button>
     </div>
 
     <nz-card [nzTitle]="message()!.title">
-      <nz-descriptions nzBordered [nzColumn]="2">
-        <nz-descriptions-item nzTitle="Message ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.message_id }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Channel">
-          {{ message()!.channel_internal_name }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Priority">
-          <nz-tag [nzColor]="getPriorityColor(message()!.priority)">
-            {{ getPriorityLabel(message()!.priority) }}
-          </nz-tag>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Sender Name">
-          {{ message()!.sender_name || '-' }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Sender IP">
-          {{ message()!.sender_ip }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Timestamp" [nzSpan]="2">
-          {{ message()!.timestamp }} ({{ message()!.timestamp | relativeTime }})
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="User Message ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.usr_message_id || '-' }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Used Key ID" [nzSpan]="2">
-          <span class="mono">{{ message()!.used_key_id }}</span>
-        </nz-descriptions-item>
-      </nz-descriptions>
-
       @if (message()!.content) {
-        <nz-divider nzText="Content"></nz-divider>
         <div class="message-content">
           <pre>{{ message()!.content }}</pre>
         </div>
+      } @else {
+        <div class="no-content">No content</div>
       }
     </nz-card>
+
+    <nz-card nzTitle="Metadata">
+      <scn-metadata-grid>
+        <scn-metadata-value label="Message ID">
+          <span class="mono">{{ message()!.message_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel">
+          <a [routerLink]="['/channels', message()!.channel_id]" class="metadata-link">
+            <div class="cell-name">{{ message()!.channel_internal_name }}</div>
+            <div class="cell-id mono">{{ message()!.channel_id }}</div>
+          </a>
+        </scn-metadata-value>
+        <scn-metadata-value label="Priority">
+          <nz-tag [nzColor]="getPriorityColor(message()!.priority)">
+            {{ getPriorityLabel(message()!.priority) }}
+          </nz-tag>
+        </scn-metadata-value>
+        <scn-metadata-value label="Sender Name">
+          {{ message()!.sender_name || '-' }}
+        </scn-metadata-value>
+        <scn-metadata-value label="Sender IP">
+          {{ message()!.sender_ip }}
+        </scn-metadata-value>
+        <scn-metadata-value label="Timestamp">
+          <div class="timestamp-absolute">{{ message()!.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ message()!.timestamp | relativeTime }}</div>
+        </scn-metadata-value>
+        <scn-metadata-value label="User Message ID">
+          <span class="mono">{{ message()!.usr_message_id || '-' }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Used Key">
+          <a [routerLink]="['/keys', message()!.used_key_id]" class="metadata-link">
+            <div class="cell-name">{{ resolvedKey()?.name || message()!.used_key_id }}</div>
+            <div class="cell-id mono">{{ message()!.used_key_id }}</div>
+          </a>
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
   } @else {
     <nz-card>
       <div class="not-found">

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

@@ -20,6 +20,11 @@
   }
 }
 
+.no-content {
+  color: rgba(0, 0, 0, 0.45);
+  font-style: italic;
+}
+
 .not-found {
   text-align: center;
   padding: 48px;
@@ -29,3 +34,39 @@
     margin-bottom: 16px;
   }
 }
+
+nz-card + nz-card {
+  margin-top: 16px;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.metadata-link {
+  text-decoration: none;
+  display: block;
+
+  &:hover {
+    .cell-name {
+      color: #1890ff;
+    }
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

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

@@ -1,33 +1,33 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
-import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
-import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { ApiService } from '../../../core/services/api.service';
 import { NotificationService } from '../../../core/services/notification.service';
+import { KeyCacheService, ResolvedKey } from '../../../core/services/key-cache.service';
 import { Message } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
 @Component({
   selector: 'app-message-detail',
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     NzCardModule,
     NzButtonModule,
     NzIconModule,
-    NzDescriptionsModule,
     NzTagModule,
     NzSpinModule,
-    NzPopconfirmModule,
-    NzDividerModule,
+    RouterLink,
     RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
   ],
   templateUrl: './message-detail.component.html',
   styleUrl: './message-detail.component.scss'
@@ -37,8 +37,10 @@ export class MessageDetailComponent implements OnInit {
   private router = inject(Router);
   private apiService = inject(ApiService);
   private notification = inject(NotificationService);
+  private keyCacheService = inject(KeyCacheService);
 
   message = signal<Message | null>(null);
+  resolvedKey = signal<ResolvedKey | null>(null);
   loading = signal(true);
   deleting = signal(false);
 
@@ -55,6 +57,7 @@ export class MessageDetailComponent implements OnInit {
       next: (message) => {
         this.message.set(message);
         this.loading.set(false);
+        this.resolveKey(message.used_key_id);
       },
       error: () => {
         this.loading.set(false);
@@ -62,6 +65,12 @@ export class MessageDetailComponent implements OnInit {
     });
   }
 
+  private resolveKey(keyId: string): void {
+    this.keyCacheService.resolveKey(keyId).subscribe({
+      next: (resolved) => this.resolvedKey.set(resolved)
+    });
+  }
+
   goBack(): void {
     this.router.navigate(['/messages']);
   }

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

@@ -67,26 +67,26 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="40%">Title</th>
+          <th>Title</th>
+          <th>Content</th>
           <th
-            nzWidth="15%"
             [nzFilters]="channelFilters()"
             [nzFilterMultiple]="true"
             (nzFilterChange)="onChannelFilterChange($event)"
           >Channel</th>
           <th
-            nzWidth="15%"
+            nzWidth="0"
             [nzFilters]="senderFilters()"
             [nzFilterMultiple]="true"
             (nzFilterChange)="onSenderFilterChange($event)"
           >Sender</th>
           <th
-            nzWidth="10%"
+            nzWidth="0"
             [nzFilters]="priorityFilters"
             [nzFilterMultiple]="false"
             (nzFilterChange)="onPriorityFilterChange($event)"
           >Priority</th>
-          <th nzWidth="20%" nzCustomFilter>
+          <th nzWidth="0" nzCustomFilter>
             Time
             <nz-filter-trigger [(nzVisible)]="dateFilterVisible" [nzActive]="!!dateRange" [nzDropdownMenu]="dateMenu">
               <span nz-icon nzType="filter" nzTheme="fill"></span>
@@ -110,12 +110,18 @@
           <tr class="clickable-row" (click)="viewMessage(message)">
             <td>
               <div class="message-title">{{ message.title }}</div>
-              @if (message.content && !message.trimmed) {
-                <div class="message-preview">{{ message.content | slice:0:100 }}{{ message.content.length > 100 ? '...' : '' }}</div>
+              <div class="message-id mono">{{ message.message_id }}</div>
+            </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>
               }
             </td>
             <td>
-              <span class="mono">{{ message.channel_internal_name }}</span>
+              <div class="cell-name">{{ message.channel_internal_name }}</div>
+              <div class="cell-id">{{ message.channel_id }}</div>
             </td>
             <td>
               {{ message.sender_name || '-' }}
@@ -126,14 +132,13 @@
               </nz-tag>
             </td>
             <td>
-              <span nz-tooltip [nzTooltipTitle]="message.timestamp">
-                {{ message.timestamp | relativeTime }}
-              </span>
+              <div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+              <div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
             </td>
           </tr>
         } @empty {
           <tr>
-            <td colspan="5">
+            <td colspan="6">
               <nz-empty nzNotFoundContent="No messages found"></nz-empty>
             </td>
           </tr>

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

@@ -41,10 +41,40 @@
   color: #333;
 }
 
-.message-preview {
+.message-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.message-content {
+  font-size: 12px;
+  color: #666;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
   font-size: 12px;
   color: #999;
-  margin-top: 4px;
 }
 
 .pagination-controls {

webapp/src/app/features/senders/sender-list/sender-list.component.html

@@ -21,9 +21,9 @@
           <ng-template #noResultTpl></ng-template>
           <thead>
             <tr>
-              <th nzWidth="40%">Sender Name</th>
-              <th nzWidth="20%">Message Count</th>
-              <th nzWidth="40%">Last Used</th>
+              <th>Sender Name</th>
+              <th nzWidth="0">Message Count</th>
+              <th nzWidth="0">Last Used</th>
             </tr>
           </thead>
           <tbody>
@@ -34,9 +34,8 @@
                 </td>
                 <td>{{ sender.count }}</td>
                 <td>
-                  <span nz-tooltip [nzTooltipTitle]="sender.last_timestamp">
-                    {{ sender.last_timestamp | relativeTime }}
-                  </span>
+                  <div class="timestamp-absolute">{{ sender.last_timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ sender.last_timestamp | relativeTime }}</div>
                 </td>
               </tr>
             } @empty {
@@ -62,9 +61,9 @@
           <ng-template #noResultTpl2></ng-template>
           <thead>
             <tr>
-              <th nzWidth="40%">Sender Name</th>
-              <th nzWidth="20%">Message Count</th>
-              <th nzWidth="40%">Last Used</th>
+              <th>Sender Name</th>
+              <th nzWidth="0">Message Count</th>
+              <th nzWidth="0">Last Used</th>
             </tr>
           </thead>
           <tbody>
@@ -75,9 +74,8 @@
                 </td>
                 <td>{{ sender.count }}</td>
                 <td>
-                  <span nz-tooltip [nzTooltipTitle]="sender.last_timestamp">
-                    {{ sender.last_timestamp | relativeTime }}
-                  </span>
+                  <div class="timestamp-absolute">{{ sender.last_timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <div class="timestamp-relative">{{ sender.last_timestamp | relativeTime }}</div>
                 </td>
               </tr>
             } @empty {

webapp/src/app/features/senders/sender-list/sender-list.component.scss

@@ -12,3 +12,13 @@
 .sender-name {
   font-weight: 500;
 }
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

webapp/src/app/features/senders/sender-list/sender-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -17,6 +17,7 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     NzTableModule,
     NzButtonModule,
     NzIconModule,

webapp/src/app/features/subscriptions/subscription-detail/subscription-detail.component.html

@@ -0,0 +1,111 @@
+<div class="page-content">
+  @if (loading()) {
+    <div class="loading-container">
+      <nz-spin nzSimple nzSize="large"></nz-spin>
+    </div>
+  } @else if (subscription()) {
+    <div class="detail-header">
+      <button nz-button (click)="goBack()">
+        <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
+        Back to Subscriptions
+      </button>
+      <div class="header-actions">
+        @if (!subscription()!.confirmed && isOwner()) {
+          <button nz-button nzType="primary" (click)="acceptSubscription()">
+            <span nz-icon nzType="check"></span>
+            Accept
+          </button>
+        }
+        @if (subscription()!.confirmed && isOwner()) {
+          <button
+            nz-button
+            nz-popconfirm
+            nzPopconfirmTitle="Deactivate this subscription?"
+            (nzOnConfirm)="deactivateSubscription()"
+          >
+            <span nz-icon nzType="stop"></span>
+            Deactivate
+          </button>
+        }
+        <button
+          nz-button
+          nzDanger
+          nz-popconfirm
+          nzPopconfirmTitle="Are you sure you want to delete this subscription?"
+          (nzOnConfirm)="deleteSubscription()"
+        >
+          <span nz-icon nzType="delete"></span>
+          Delete
+        </button>
+      </div>
+    </div>
+
+    <nz-card>
+      <div class="subscription-header">
+        <h2 class="subscription-title">Subscription</h2>
+        <nz-tag [nzColor]="getTypeLabel().color">{{ getTypeLabel().label }}</nz-tag>
+        <nz-tag [nzColor]="getStatusInfo().color">{{ getStatusInfo().label }}</nz-tag>
+      </div>
+
+      <scn-metadata-grid>
+        <scn-metadata-value label="Subscription ID">
+          <span class="mono">{{ subscription()!.subscription_id }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel">
+          <a [routerLink]="['/channels', subscription()!.channel_id]" class="channel-link">
+            @if (resolvedChannel()) {
+              <div class="resolved-name">{{ resolvedChannel()!.displayName }}</div>
+            }
+            <div class="resolved-id mono">{{ subscription()!.channel_id }}</div>
+          </a>
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel Internal Name">
+          <span>{{ subscription()!.channel_internal_name }}</span>
+        </scn-metadata-value>
+        <scn-metadata-value label="Subscriber">
+          @if (resolvedSubscriber()) {
+            <div class="resolved-name">{{ resolvedSubscriber()!.displayName }}</div>
+            <div class="resolved-id mono">{{ subscription()!.subscriber_user_id }}</div>
+          } @else {
+            <span class="mono">{{ subscription()!.subscriber_user_id }}</span>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Channel Owner">
+          @if (resolvedOwner()) {
+            <div class="resolved-name">{{ resolvedOwner()!.displayName }}</div>
+            <div class="resolved-id mono">{{ subscription()!.channel_owner_user_id }}</div>
+          } @else {
+            <span class="mono">{{ subscription()!.channel_owner_user_id }}</span>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Confirmed">
+          @if (subscription()!.confirmed) {
+            <nz-tag nzColor="green">Yes</nz-tag>
+          } @else {
+            <nz-tag nzColor="orange">No</nz-tag>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Active">
+          @if (subscription()!.active) {
+            <nz-tag nzColor="green">Yes</nz-tag>
+          } @else {
+            <nz-tag nzColor="red">No</nz-tag>
+          }
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
+          <div class="timestamp-absolute">{{ subscription()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+          <div class="timestamp-relative">{{ subscription()!.timestamp_created | relativeTime }}</div>
+        </scn-metadata-value>
+      </scn-metadata-grid>
+    </nz-card>
+  } @else {
+    <nz-card>
+      <div class="not-found">
+        <p>Subscription not found</p>
+        <button nz-button nzType="primary" (click)="goBack()">
+          Back to Subscriptions
+        </button>
+      </div>
+    </nz-card>
+  }
+</div>

webapp/src/app/features/subscriptions/subscription-detail/subscription-detail.component.scss

@@ -0,0 +1,66 @@
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.subscription-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.subscription-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.channel-link {
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    .resolved-name {
+      color: #1890ff;
+    }
+  }
+}
+
+.resolved-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.resolved-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.not-found {
+  text-align: center;
+  padding: 48px;
+
+  p {
+    color: #999;
+    margin-bottom: 16px;
+  }
+}
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

webapp/src/app/features/subscriptions/subscription-detail/subscription-detail.component.ts

@@ -0,0 +1,178 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { NzCardModule } from 'ng-zorro-antd/card';
+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 { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { AuthService } from '../../../core/services/auth.service';
+import { NotificationService } from '../../../core/services/notification.service';
+import { ChannelCacheService, ResolvedChannel } from '../../../core/services/channel-cache.service';
+import { UserCacheService, ResolvedUser } from '../../../core/services/user-cache.service';
+import { Subscription } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
+
+@Component({
+  selector: 'app-subscription-detail',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DatePipe,
+    RouterLink,
+    NzCardModule,
+    NzButtonModule,
+    NzIconModule,
+    NzTagModule,
+    NzSpinModule,
+    NzPopconfirmModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
+  ],
+  templateUrl: './subscription-detail.component.html',
+  styleUrl: './subscription-detail.component.scss'
+})
+export class SubscriptionDetailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private apiService = inject(ApiService);
+  private authService = inject(AuthService);
+  private notification = inject(NotificationService);
+  private channelCacheService = inject(ChannelCacheService);
+  private userCacheService = inject(UserCacheService);
+
+  subscription = signal<Subscription | null>(null);
+  loading = signal(true);
+  resolvedChannel = signal<ResolvedChannel | null>(null);
+  resolvedSubscriber = signal<ResolvedUser | null>(null);
+  resolvedOwner = signal<ResolvedUser | null>(null);
+
+  ngOnInit(): void {
+    const subscriptionId = this.route.snapshot.paramMap.get('id');
+    if (subscriptionId) {
+      this.loadSubscription(subscriptionId);
+    }
+  }
+
+  loadSubscription(subscriptionId: string): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.loading.set(true);
+    this.apiService.getSubscription(userId, subscriptionId).subscribe({
+      next: (subscription) => {
+        this.subscription.set(subscription);
+        this.loading.set(false);
+        this.resolveChannel(subscription.channel_id);
+        this.resolveSubscriber(subscription.subscriber_user_id);
+        this.resolveOwner(subscription.channel_owner_user_id);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+
+  private resolveChannel(channelId: string): void {
+    this.channelCacheService.resolveChannel(channelId).subscribe(resolved => {
+      this.resolvedChannel.set(resolved);
+    });
+  }
+
+  private resolveSubscriber(userId: string): void {
+    this.userCacheService.resolveUser(userId).subscribe(resolved => {
+      this.resolvedSubscriber.set(resolved);
+    });
+  }
+
+  private resolveOwner(userId: string): void {
+    this.userCacheService.resolveUser(userId).subscribe(resolved => {
+      this.resolvedOwner.set(resolved);
+    });
+  }
+
+  goBack(): void {
+    this.router.navigate(['/subscriptions']);
+  }
+
+  isOutgoing(): boolean {
+    const sub = this.subscription();
+    if (!sub) return false;
+    const userId = this.authService.getUserId();
+    return sub.subscriber_user_id === userId;
+  }
+
+  isOwner(): boolean {
+    const sub = this.subscription();
+    if (!sub) return false;
+    const userId = this.authService.getUserId();
+    return sub.channel_owner_user_id === userId;
+  }
+
+  getStatusInfo(): { label: string; color: string } {
+    const sub = this.subscription();
+    if (!sub) return { label: 'Unknown', color: 'default' };
+    if (sub.confirmed) {
+      return { label: 'Confirmed', color: 'green' };
+    }
+    return { label: 'Pending', color: 'orange' };
+  }
+
+  getTypeLabel(): { label: string; color: string } {
+    const sub = this.subscription();
+    if (!sub) return { label: 'Unknown', color: 'default' };
+    const userId = this.authService.getUserId();
+    if (sub.subscriber_user_id === sub.channel_owner_user_id) {
+      return { label: 'Own', color: 'green' };
+    }
+    if (sub.subscriber_user_id === userId) {
+      return { label: 'External', color: 'blue' };
+    }
+    return { label: 'Incoming', color: 'purple' };
+  }
+
+  acceptSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: true }).subscribe({
+      next: (updated) => {
+        this.subscription.set(updated);
+        this.notification.success('Subscription accepted');
+      }
+    });
+  }
+
+  deactivateSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.confirmSubscription(userId, sub.subscription_id, { confirmed: false }).subscribe({
+      next: (updated) => {
+        this.subscription.set(updated);
+        this.notification.success('Subscription deactivated');
+      }
+    });
+  }
+
+  deleteSubscription(): void {
+    const sub = this.subscription();
+    const userId = this.authService.getUserId();
+    if (!sub || !userId) return;
+
+    this.apiService.deleteSubscription(userId, sub.subscription_id).subscribe({
+      next: () => {
+        this.notification.success('Subscription deleted');
+        this.router.navigate(['/subscriptions']);
+      }
+    });
+  }
+}

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html

@@ -42,39 +42,49 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="10%">Type</th>
-          <th nzWidth="20%">Channel</th>
-          <th nzWidth="20%">Subscriber</th>
-          <th nzWidth="20%">Owner</th>
-          <th nzWidth="10%">Status</th>
-          <th nzWidth="12%">Created</th>
-          <th nzWidth="8%">Actions</th>
+          <th nzWidth="0">ID</th>
+          <th nzWidth="0">Type</th>
+          <th>Channel</th>
+          <th>Subscriber</th>
+          <th>Owner</th>
+          <th nzWidth="0">Status</th>
+          <th nzWidth="0">Created</th>
+          <th nzWidth="0">Actions</th>
         </tr>
       </thead>
       <tbody>
         @for (sub of subscriptions(); track sub.subscription_id) {
-          <tr>
+          <tr class="clickable-row" (click)="viewSubscription(sub)">
+            <td>
+              <span class="mono subscription-id">{{ sub.subscription_id }}</span>
+            </td>
             <td>
               <nz-tag [nzColor]="getTypeLabel(sub).color">
                 {{ getTypeLabel(sub).label }}
               </nz-tag>
             </td>
             <td>
-              <span class="mono">{{ sub.channel_internal_name }}</span>
+              <div class="cell-name">{{ sub.channel_internal_name }}</div>
+              <div class="cell-id mono">{{ sub.channel_id }}</div>
+            </td>
+            <td>
+              <div class="cell-name">{{ getUserDisplayName(sub.subscriber_user_id) }}</div>
+              <div class="cell-id mono">{{ sub.subscriber_user_id }}</div>
+            </td>
+            <td>
+              <div class="cell-name">{{ getUserDisplayName(sub.channel_owner_user_id) }}</div>
+              <div class="cell-id mono">{{ sub.channel_owner_user_id }}</div>
             </td>
-            <td>{{ getUserDisplayName(sub.subscriber_user_id) }}</td>
-            <td>{{ getUserDisplayName(sub.channel_owner_user_id) }}</td>
             <td>
               <nz-tag [nzColor]="getStatusInfo(sub).color">
                 {{ getStatusInfo(sub).label }}
               </nz-tag>
             </td>
             <td>
-              <span nz-tooltip [nzTooltipTitle]="sub.timestamp_created">
-                {{ sub.timestamp_created | relativeTime }}
-              </span>
+              <div class="timestamp-absolute">{{ sub.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+              <div class="timestamp-relative">{{ sub.timestamp_created | relativeTime }}</div>
             </td>
-            <td>
+            <td (click)="$event.stopPropagation()">
               <div class="action-buttons">
                 @if (!sub.confirmed && isOwner(sub)) {
                   <!-- Incoming unconfirmed: can accept or deny -->
@@ -120,7 +130,7 @@
           </tr>
         } @empty {
           <tr>
-            <td colspan="7">
+            <td colspan="8">
               <nz-empty nzNotFoundContent="No subscriptions found"></nz-empty>
             </td>
           </tr>

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.scss

@@ -25,6 +25,30 @@
   gap: 4px;
 }
 
+.clickable-row {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}
+
+.subscription-id {
+  font-size: 11px;
+  color: #999;
+}
+
+.cell-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.cell-id {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
 .modal-hint {
   color: #666;
   font-size: 13px;
@@ -36,3 +60,13 @@
   justify-content: center;
   padding: 16px 0;
 }
+
+.timestamp-absolute {
+  font-size: 13px;
+  color: #333;
+}
+
+.timestamp-relative {
+  font-size: 12px;
+  color: #999;
+}

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -40,6 +41,7 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
   standalone: true,
   imports: [
     CommonModule,
+    DatePipe,
     FormsModule,
     NzTableModule,
     NzButtonModule,
@@ -60,6 +62,7 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
   styleUrl: './subscription-list.component.scss'
 })
 export class SubscriptionListComponent implements OnInit {
+  private router = inject(Router);
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
@@ -155,6 +158,10 @@ export class SubscriptionListComponent implements OnInit {
     return sub.channel_owner_user_id === userId;
   }
 
+  viewSubscription(sub: Subscription): void {
+    this.router.navigate(['/subscriptions', sub.subscription_id]);
+  }
+
   // Actions
   acceptSubscription(sub: Subscription): void {
     const userId = this.authService.getUserId();

webapp/src/app/shared/components/metadata-grid/index.ts

@@ -0,0 +1,2 @@
+export { MetadataGridComponent } from './metadata-grid.component';
+export { MetadataValueComponent } from './metadata-value.component';

webapp/src/app/shared/components/metadata-grid/metadata-grid.component.ts

@@ -0,0 +1,74 @@
+import { Component, ContentChildren, QueryList, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MetadataValueComponent } from './metadata-value.component';
+
+@Component({
+  selector: 'scn-metadata-grid',
+  standalone: true,
+  imports: [CommonModule],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="scn-metadata-grid">
+      @for (item of items; track item; let first = $first; let last = $last) {
+        <label class="scn-metadata-label" [class.first]="first" [class.last]="last">{{ item.label }}</label>
+        <div class="scn-metadata-value" [class.first]="first" [class.last]="last">
+          <ng-container [ngTemplateOutlet]="item.content"></ng-container>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .scn-metadata-grid {
+      display: grid;
+      grid-template-columns: minmax(120px, auto) 1fr;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .scn-metadata-label {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.45);
+      padding: 12px 16px;
+      background: #fafafa;
+      border: 1px solid #f0f0f0;
+      border-right: none;
+      border-top: none;
+    }
+
+    .scn-metadata-label.first {
+      border-top: 1px solid #f0f0f0;
+      border-top-left-radius: 4px;
+    }
+
+    .scn-metadata-label.last {
+      border-bottom-left-radius: 4px;
+    }
+
+    .scn-metadata-value {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+      padding: 12px 16px;
+      background: #fff;
+      border: 1px solid #f0f0f0;
+      border-top: none;
+      word-break: break-word;
+    }
+
+    .scn-metadata-value.first {
+      border-top: 1px solid #f0f0f0;
+      border-top-right-radius: 4px;
+    }
+
+    .scn-metadata-value.last {
+      border-bottom-right-radius: 4px;
+    }
+  `]
+})
+export class MetadataGridComponent {
+  @ContentChildren(MetadataValueComponent) children!: QueryList<MetadataValueComponent>;
+
+  get items(): MetadataValueComponent[] {
+    return this.children?.toArray() ?? [];
+  }
+}

webapp/src/app/shared/components/metadata-grid/metadata-value.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, ViewChild, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'scn-metadata-value',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-template #contentTemplate><ng-content></ng-content></ng-template>
+  `,
+})
+export class MetadataValueComponent {
+  @Input() label: string = '';
+
+  @ViewChild('contentTemplate', { static: true }) contentTemplate!: TemplateRef<any>;
+
+  get content(): TemplateRef<any> {
+    return this.contentTemplate;
+  }
+}