CUB-122: Scaffold Control Center React frontend

frontend-legacy/src/app/layout/header-bar/header-bar.component.html

@@ -0,0 +1,55 @@
+<header class="header-bar" role="banner">
+  <h1 class="header-bar__title">Command Hub</h1>
+
+  <div class="header-bar__actions">
+    <!-- Quick-Jump trigger -->
+    <button
+      class="header-bar__action-btn"
+      mat-icon-button
+      aria-label="Jump to agent"
+      (click)="openQuickJump.emit()"
+    >
+      <mat-icon>keyboard_command_key</mat-icon>
+    </button>
+
+    <!-- Live indicator -->
+    <button
+      class="header-bar__action-btn header-bar__live-btn"
+      mat-icon-button
+      [attr.aria-label]="isConnected() ? 'Connected — live' : 'Disconnected'"
+    >
+      <span
+        class="header-bar__live-dot"
+        [class.header-bar__live-dot--connected]="isConnected()"
+      ></span>
+      <span class="header-bar__live-label">
+        {{ isConnected() ? 'Live' : 'Offline' }}
+      </span>
+    </button>
+
+    <!-- Notification bell -->
+    <button
+      class="header-bar__action-btn"
+      mat-icon-button
+      aria-label="Notifications"
+    >
+      <mat-icon
+        [matBadge]="notificationCount()"
+        [matBadgeHidden]="notificationCount() === 0"
+        matBadgePosition="above after"
+        matBadgeSize="small"
+      >
+        notifications
+      </mat-icon>
+    </button>
+
+    <!-- Settings -->
+    <button
+      class="header-bar__action-btn"
+      mat-icon-button
+      aria-label="Settings"
+    >
+      <mat-icon>settings</mat-icon>
+    </button>
+  </div>
+</header>