More webapp changes+fixes

webapp/src/app/layout/main-layout/main-layout.component.html

@@ -56,7 +56,20 @@
         </span>
       </div>
       <div class="header-right">
-        <span class="user-id mono">{{ userId }}</span>
+        <div class="expert-mode-toggle">
+          <nz-switch
+            [ngModel]="expertMode()"
+            (ngModelChange)="settingsService.setExpertMode($event)"
+            nzSize="small"
+          ></nz-switch>
+          <span class="expert-mode-label">Expert</span>
+        </div>
+        <div class="user-info">
+          <span class="user-id mono">{{ userId }}</span>
+          @if (currentKey()) {
+            <span class="key-id mono">{{ currentKey()!.keytoken_id }}</span>
+          }
+        </div>
         <button nz-button nzType="text" nzDanger (click)="logout()">
           <span nz-icon nzType="logout"></span>
           Logout

webapp/src/app/layout/main-layout/main-layout.component.scss

@@ -51,6 +51,17 @@
   align-items: center;
 }
 
+.expert-mode-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .expert-mode-label {
+    font-size: 13px;
+    color: #666;
+  }
+}
+
 .header-trigger {
   font-size: 18px;
   cursor: pointer;
@@ -66,11 +77,23 @@
   display: flex;
   align-items: center;
   gap: 16px;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  line-height: 1.3;
 
   .user-id {
     color: #666;
     font-size: 13px;
   }
+
+  .key-id {
+    color: #999;
+    font-size: 13px;
+  }
 }
 
 .content-area {

webapp/src/app/layout/main-layout/main-layout.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet, RouterLink, Router } from '@angular/router';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
@@ -6,13 +6,19 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { FormsModule } from '@angular/forms';
 import { AuthService } from '../../core/services/auth.service';
+import { SettingsService } from '../../core/services/settings.service';
+import { ApiService } from '../../core/services/api.service';
+import { KeyToken } from '../../core/models';
 
 @Component({
   selector: 'app-main-layout',
   standalone: true,
   imports: [
     CommonModule,
+    FormsModule,
     RouterOutlet,
     RouterLink,
     NzLayoutModule,
@@ -20,16 +26,34 @@ import { AuthService } from '../../core/services/auth.service';
     NzIconModule,
     NzButtonModule,
     NzDropDownModule,
+    NzSwitchModule,
   ],
   templateUrl: './main-layout.component.html',
   styleUrl: './main-layout.component.scss'
 })
-export class MainLayoutComponent {
+export class MainLayoutComponent implements OnInit {
   private authService = inject(AuthService);
+  private apiService = inject(ApiService);
   private router = inject(Router);
+  settingsService = inject(SettingsService);
 
   isCollapsed = signal(false);
   userId = this.authService.getUserId();
+  currentKey = signal<KeyToken | null>(null);
+  expertMode = this.settingsService.expertMode;
+
+  ngOnInit(): void {
+    this.loadCurrentKey();
+  }
+
+  private loadCurrentKey(): void {
+    const userId = this.userId;
+    if (!userId) return;
+
+    this.apiService.getCurrentKey(userId).subscribe({
+      next: (key) => this.currentKey.set(key)
+    });
+  }
 
   toggleCollapsed(): void {
     this.isCollapsed.update(v => !v);