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>

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

@@ -0,0 +1,126 @@
+// ============================================================================
+// Header Bar — Top App Bar
+// Per CUB-27 spec breakpoints:
+//   Compact  (0–599px):  SmallTopAppBar — 56px height, compact title, hidden labels
+//   Medium   (600–1023px): Medium top bar — 64px height
+//   Expanded (≥1024px):  MediumTopAppBar — 64px height, full actions
+// ============================================================================
+
+.header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--cc-header-height-compact); // Compact by default (mobile-first)
+  padding: 0 var(--cc-section-padding-compact);
+  background-color: var(--cc-surface-container-high);
+  border-bottom: 1px solid var(--cc-outline);
+  z-index: 20;
+}
+
+.header-bar__title {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--cc-on-surface);
+  margin: 0;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-bar__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.header-bar__action-btn {
+  color: var(--cc-on-surface-variant) !important;
+  min-width: 48px;
+  min-height: 48px;
+
+  &:hover {
+    color: var(--cc-on-surface) !important;
+  }
+}
+
+.header-bar__live-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 6px;
+  background-color: var(--status-error);
+  vertical-align: middle;
+
+  &--connected {
+    background-color: var(--status-active);
+    animation: pulse-active 2s ease-in-out infinite;
+  }
+}
+
+.header-bar__live-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--cc-on-surface-variant);
+  vertical-align: middle;
+}
+
+// ---------------------------------------------------------------------------
+// Compact (0–599px): SmallTopAppBar — hide live label, tighter spacing
+// ---------------------------------------------------------------------------
+@media (max-width: 599px) {
+  .header-bar__live-label {
+    display: none; // Space saving on compact — dot alone is enough
+  }
+
+  .header-bar__actions {
+    gap: 0;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Medium (600–1023px): Medium top bar
+// ---------------------------------------------------------------------------
+@media (min-width: 600px) and (max-width: 1023px) {
+  .header-bar {
+    height: var(--cc-header-height);
+    padding: 0 var(--cc-section-padding);
+  }
+
+  .header-bar__title {
+    font-size: 24px;
+  }
+
+  .header-bar__actions {
+    gap: 4px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Expanded (≥1024px): Full top bar
+// ---------------------------------------------------------------------------
+@media (min-width: 1024px) {
+  .header-bar {
+    height: var(--cc-header-height);
+    padding: 0 var(--cc-section-padding);
+  }
+
+  .header-bar__title {
+    font-size: 28px;
+    font-weight: 400;
+  }
+
+  .header-bar__actions {
+    gap: 8px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Accessibility: Reduced Motion
+// ---------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .header-bar__live-dot--connected {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, signal } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatBadgeModule } from '@angular/material/badge';
+
+/**
+ * Header Bar component for the Command Hub.
+ * Per spec Section 3.1: 64px tall, app title + live indicator + notification bell + settings.
+ * Uses M3 top app bar pattern.
+ */
+@Component({
+  selector: 'app-header-bar',
+  standalone: true,
+  imports: [MatIconModule, MatButtonModule, MatBadgeModule],
+  templateUrl: './header-bar.component.html',
+  styleUrl: './header-bar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderBarComponent {
+  /** Emits when the user requests the Quick-Jump drawer. */
+  @Output() readonly openQuickJump = new EventEmitter<void>();
+
+  protected readonly notificationCount = signal(3);
+  protected readonly isConnected = signal(true);
+
+  // TODO: Wire up notification panel (spec Section 2: Notifications Panel)
+  // TODO: Wire up settings navigation
+}