initial commit

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

@@ -0,0 +1,45 @@
+<header class="header-bar" role="banner">
+  <h1 class="header-bar__title">Command Hub</h1>
+
+  <div class="header-bar__actions">
+    <!-- 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/src/app/layout/header-bar/header-bar.component.scss

@@ -0,0 +1,76 @@
+// ============================================================================
+// Header Bar — Top App Bar
+// Per spec Section 3.1: 64px tall, M3 MediumTopAppBar on expanded
+// Section 3.2: SmallTopAppBar on mobile
+// ============================================================================
+
+.header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--cc-header-height);
+  padding: 0 var(--cc-section-padding);
+  background-color: var(--cc-surface-container-high);
+  border-bottom: 1px solid var(--cc-outline);
+  z-index: 20;
+}
+
+.header-bar__title {
+  font-size: 28px;
+  font-weight: 400;
+  color: var(--cc-on-surface);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.header-bar__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-bar__action-btn {
+  color: var(--cc-on-surface-variant) !important;
+
+  &: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;
+}
+
+// Mobile: smaller title
+@media (max-width: 599px) {
+  .header-bar {
+    padding: 0 16px;
+  }
+
+  .header-bar__title {
+    font-size: 22px;
+    font-weight: 500;
+  }
+
+  .header-bar__live-label {
+    display: none; // Space saving on mobile — dot alone is enough
+  }
+}

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

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, 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 {
+  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
+}