@let n = node();
<!--
  Header, replicates `<sm-node-card>`'s `.sm-gnode__main` 1:1 so the
  panel reads as a continuation of the card the user clicked on the
  graph. Grid: icon-box (kind tint) | content (name + path + sub
  stats) | actions cluster (stability icon + version chip). Action
  buttons (bump, debug toggle) live in a separate toolbar below so
  the header stays purely informational, matching the card shape.
-->
<header
  class="inspector__header"
  [class.inspector__header--skill]="n.kind === 'skill'"
  [class.inspector__header--agent]="n.kind === 'agent'"
  [class.inspector__header--command]="n.kind === 'command'"
  [class.inspector__header--markdown]="n.kind === 'markdown'"
  [style.--node-color]="headerTitleColor()"
  data-testid="inspector-title"
>
  <div class="inspector__icon-box" aria-hidden="true">
    <sm-kind-icon [kind]="n.kind" [provider]="n.provider" [size]="18" />
  </div>

  <div class="inspector__content">
    <div class="inspector__name-row">
      <h2 class="inspector__name" data-testid="inspector-title-text">{{ n.frontmatter.name }}</h2>
    </div>
    <code class="inspector__path-code" data-testid="inspector-path">{{ n.path }}</code>
  </div>

  <div class="inspector__actions-cluster">
    <button
      type="button"
      class="inspector__favorite"
      [class.inspector__favorite--on]="n.isFavorite === true"
      [attr.aria-label]="n.isFavorite === true ? cardTexts.ariaFavoriteRemove : cardTexts.ariaFavoriteAdd"
      [pTooltip]="n.isFavorite === true ? cardTexts.favoriteRemoveTooltip : cardTexts.favoriteAddTooltip"
      (click)="onFavoriteClick($event)"
      data-testid="inspector-favorite"
    >
      <i
        class="pi"
        [class.pi-star-fill]="n.isFavorite === true"
        [class.pi-star]="n.isFavorite !== true"
        aria-hidden="true"
      ></i>
    </button>
    @if (headerIsStale()) {
      <span
        class="inspector__stale-icon"
        [pTooltip]="headerStaleTooltip()"
        data-testid="inspector-stale-badge"
      >
        <i class="pi pi-clock" aria-hidden="true"></i>
      </span>
    }
    @if (headerStability() === 'experimental') {
      <span
        class="inspector__stability-icon"
        [pTooltip]="cardTexts.stability.experimental"
        data-testid="inspector-stability-tag"
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2" />
          <path d="M6.453 15h11.094" />
          <path d="M8.5 2h7" />
        </svg>
      </span>
    }
    @if (headerStability() === 'deprecated') {
      <span
        class="inspector__stability-icon"
        [pTooltip]="cardTexts.stability.deprecated"
        data-testid="inspector-stability-tag"
      >
        <i class="pi pi-ban" aria-hidden="true"></i>
      </span>
    }
    @if (headerVersion(); as v) {
      <span class="inspector__name-version" data-testid="inspector-version">{{ v }}</span>
    }
    <!--
      View contribution system, header badge sub-slots. Renders
      counter and tag contributions for the active node. Each
      sub-slot caps independently at
      SLOT_REGISTRY['inspector.header.badge.<shape>'].maxItems = 4,
      alphabetical order.
    -->
    <sm-view-contributions-host slot="inspector.header.badge.counter" [node]="n" />
    <sm-view-contributions-host slot="inspector.header.badge.tag" [node]="n" />
    @if (mode() === 'embedded') {
      <button
        #closeBtn
        type="button"
        class="inspector__close"
        [attr.aria-label]="texts.close.label"
        [pTooltip]="texts.close.tooltip"
        (click)="onCloseClick($event)"
        data-testid="inspector-close"
      >
        <i class="pi pi-times" aria-hidden="true"></i>
      </button>
    }
  </div>

  <!--
    Plugin actions, prominent slot for plugin-contributed verbs.
    TEMPORARY: hardcoded mocks while the BFF surface is being
    designed. Hidden behind the `inspector.actionMocks` setting
    (default OFF) so users don't see non-functional buttons until
    plugins can declare runnable verbs and the row turns into a
    data-driven `@for` over plugin contributions.
  -->
  @if (showActionMocks()) {
    <div class="inspector__plugin-actions" data-testid="inspector-plugin-actions">
      <span class="inspector__plugin-actions-label">Actions</span>
      <button
        type="button"
        class="inspector__plugin-btn"
        data-testid="inspector-plugin-btn-summary"
      >
        <i class="pi pi-sparkles" aria-hidden="true"></i>
        <span>Generate summary</span>
      </button>
      <button
        type="button"
        class="inspector__plugin-btn"
        data-testid="inspector-plugin-btn-audit"
      >
        <i class="pi pi-search" aria-hidden="true"></i>
        <span>Run audit</span>
      </button>
      <button
        type="button"
        class="inspector__plugin-btn"
        data-testid="inspector-plugin-btn-validate"
      >
        <i class="pi pi-check-circle" aria-hidden="true"></i>
        <span>Validate</span>
      </button>
    </div>
  }

  <!--
    Tools row, vendor `tools` (agents) / `allowed-tools` (skills,
    commands) rendered as individual chips so the user sees WHAT the
    node can do at a glance. Replaces the previous footer cluster
    (tools count + links + ext-refs): link counts are already in
    the linked-nodes / stats cards below, so duplicating them here
    was noise. Tools stay because the names carry signal that no
    chip-count can convey.
  -->
  @if (headerTools().length > 0) {
    <div class="inspector__tools" data-testid="inspector-header-tools">
      @for (tool of headerTools(); track tool) {
        <span class="inspector__tool-tag">{{ tool }}</span>
      }
    </div>
  }
</header>