<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>