@let n = node();
<!--
  Header, flat identity strip with a left kind-accent rail: a small kind
  eyebrow on top, then the icon-box (kind tint) beside the name (with the
  version chip and stability tag), the path + meta strip below, and the
  actions cluster (favorite, view-contribution badges) on the right. The
  stale signal is no longer hardcoded: it now arrives as a contribution
  on the unified `inspector.header.badge` slot (emitted by
  `core/annotation-stale`). The action toolbar (bump / refresh) lives in
  the parent so the header stays a pure read-only identity block.
  `--accent` is inherited from the `.inspector` root, the single
  kind->colour source for the panel.
-->
<header
  class="inspector__header"
  data-testid="inspector-title"
>
  <span class="inspector__kind-eyebrow" data-testid="inspector-kind-chip">{{ n.kind }}</span>

  <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">{{ headerName() }}</h2>
      @if (frontmatterInvalid()) {
        <span
          class="inspector__fm-invalid"
          [pTooltip]="texts.header.invalidFrontmatterTooltip"
          data-testid="inspector-fm-invalid"
        >
          <i class="pi pi-exclamation-triangle" aria-hidden="true"></i>
          {{ texts.header.invalidFrontmatter }}
        </span>
      }
      <!-- The version chip IS the Bump affordance (user call 2026-07-21):
           renders ONLY while the `core/node-bump` contribution is present
           (plugin enabled), showing the effective version or the short
           `bump` placeholder for a versionless file; clicking dispatches
           the bump (direct, honoring the payload's enabled gate). Plugin
           off -> no version surface, mirror of the stability chip. -->
      @if (bumpPayload() !== null) {
        <button
          type="button"
          class="inspector__name-version inspector__version-btn"
          [disabled]="!bumpPayload()!.enabled || bumpBusy()"
          [pTooltip]="bumpTooltip()"
          tooltipPosition="left"
          (click)="onBumpClick()"
          smDebugSurface="inspector.surface.version"
          [smDebugSurfaceClaim]="versionClaimId()"
          data-testid="inspector-version"
        >{{ headerVersion() ?? texts.header.bump.placeholder }}</button>
      }
      <!-- The stability chip IS the Set stability affordance (user call
           2026-07-21): it renders ONLY while the `core/node-set-stability`
           contribution is present (plugin enabled), always then (default
           `stable` when unset), opening the same enum-pick dialog its
           button used. Plugin off -> no stability in the header at all,
           even when the annotation is set (second user call same day:
           the surface follows the plugin, the data stays in the .sm). -->
      @if (stabilityPayload() !== null) {
      <button
        type="button"
        class="inspector__stability"
        [class.inspector__stability--actionable]="stabilityPayload() !== null"
        [attr.data-stability]="stabilityDisplay()"
        [disabled]="stabilityPayload() === null || stabilityBusy()"
        [pTooltip]="stabilityPayload() !== null ? texts.header.stabilityTooltip : ''"
        tooltipPosition="left"
        (click)="onStabilityChipClick()"
        smDebugSurface="inspector.surface.stability"
        [smDebugSurfaceClaim]="stabilityClaimId()"
        data-testid="inspector-stability-tag"
      >
        {{ stabilityDisplay() }}
      </button>
      }
    </div>
    <!-- Path + physical stats strip. The path chip is click-to-copy
         (mirror of the debug panel's hash cells): the button is a
         transparent shell so the `<code>` keeps its chip styling, and
         the trailing icon swaps to a check for ~2s after a successful
         clipboard write. The T / B pills (user request 2026-08-08) are
         the node card's physical-stat chips beside it, full values in
         their tooltips. -->
    <div class="inspector__path-strip">
      <button
        type="button"
        class="inspector__path-btn"
        [class.inspector__path-btn--copied]="pathCopied()"
        [pTooltip]="pathCopied() ? texts.header.path.copiedTooltip : texts.header.path.copyTooltip"
        tooltipPosition="bottom"
        [attr.aria-label]="texts.header.path.a11yLabel"
        (click)="copyPath()"
        data-testid="inspector-path-copy"
      >
        <code class="inspector__path-code" data-testid="inspector-path">{{ n.path }}</code>
        <i
          class="pi inspector__path-icon"
          [class.pi-copy]="!pathCopied()"
          [class.pi-check]="pathCopied()"
          aria-hidden="true"
        ></i>
      </button>
      @if (tokensShort() !== null) {
        <span
          class="inspector__stat inspector__stat--tokens"
          [pTooltip]="texts.header.stats.tokens(n.tokensTotal!)"
          tooltipPosition="bottom"
          data-testid="inspector-header-tokens"
        ><span class="inspector__stat-key">T</span>{{ tokensShort() }}</span>
      }
      @if (bytesShort() !== null) {
        <span
          class="inspector__stat inspector__stat--bytes"
          [pTooltip]="texts.header.stats.bytes(n.bytesTotal!)"
          tooltipPosition="bottom"
          data-testid="inspector-header-bytes"
        ><span class="inspector__stat-key">B</span>{{ bytesShort() }}</span>
      }
    </div>
  </div>

  <div class="inspector__actions-cluster">
    <!-- Semantic-analysis affordance (user shape 2026-07-21): the
         magic launcher (sparkles). Idle queues the summarizer
         through the job queue; queued/running shows the usual loading;
         ready (a summary exists) toggles the analysis block below. -->
    @if (summaryState() !== 'hidden') {
      <button
        type="button"
        class="inspector__summary-btn"
        [class.inspector__summary-btn--ready]="summaryState() === 'ready'"
        [class.inspector__summary-btn--open]="summaryExpanded()"
        [disabled]="summaryDisabled()"
        [pTooltip]="summaryTooltip()"
        tooltipPosition="left"
        [attr.aria-label]="summaryTooltip()"
        (click)="summarizeClick.emit()"
        smDebugSurface="inspector.surface.summary"
        [smDebugSurfaceClaim]="summaryClaimId()"
        data-testid="inspector-summarize"
        [attr.data-state]="summaryState()"
      >
        @switch (summaryState()) {
          @case ('queued') {
            <i class="pi pi-clock" aria-hidden="true"></i>
          }
          @case ('running') {
            <i class="pi pi-spin pi-spinner" aria-hidden="true"></i>
          }
          @case ('ready') {
            <i class="pi pi-sparkles" aria-hidden="true"></i>
          }
          @default {
            <i class="pi pi-sparkles" aria-hidden="true"></i>
          }
        }
      </button>
    }
    <!-- Ignore BEFORE the star: the favorite star keeps the rightmost
         spot of the action pair (user call 2026-08-09). -->
    @if (ignoreVisible()) {
      <button
        type="button"
        class="inspector__ignore"
        [attr.aria-label]="texts.header.ignoreAriaLabel(n.path)"
        [pTooltip]="texts.header.ignoreTooltip"
        tooltipPosition="left"
        (click)="onIgnoreClick($event)"
        data-testid="inspector-ignore"
      >
        <i class="pi pi-ban" aria-hidden="true"></i>
      </button>
    }
    <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>
    <!--
      View contribution system, unified header badge slot. Renders every
      badge contribution for the active node (icon and/or label and/or
      count, optional severity), including the stale badge emitted by
      `core/annotation-stale`. Caps at
      SLOT_REGISTRY['inspector.header.badge'].maxItems = 4, priority order.
    -->
    <sm-view-contributions-host slot="inspector.header.badge" [node]="n" />
  </div>

  <!--
    Tags row, sidecar-curated `annotations.tags`, delegated to
    `<sm-node-tags>`: it renders the clickable filter chips (each click
    forwarded up via `tagClick` -> host -> graph `onTagSelect`, with the
    active one highlighted) plus the inline editor (pencil -> add / remove,
    dispatching `core/node-set-tags`). The header stays read-only and only
    re-emits `tagClick`. The row follows the contribution claiming the
    TAGS surface (spec/view-slots.md par. Re-homed surfaces, mirror of the
    stability / version chips), which also supplies the action id the
    editor dispatches: while claimed the row always mounts, so a tagless
    node can still gain its first tag; claiming extension off -> no row.
  -->
  @if (tagsSurface(); as tagsAction) {
    <sm-node-tags
      [tags]="headerTags()"
      [activeTag]="activeTag()"
      [nodePath]="n.path"
      [setTagsActionId]="tagsAction.actionId"
      [autoTagState]="autoTagState()"
      [autoTagProposedTags]="autoTagProposedTags()"
      smDebugSurface="inspector.surface.tags"
      [smDebugSurfaceClaim]="tagsClaimId()"
      (tagClick)="tagClick.emit($event)"
      (autoTagClick)="autoTagClick.emit()"
      (tagsSaved)="tagsSaved.emit()"
    />
  }

  <!-- The semantic analysis, expanded under the identity strip: one
       magic-iconed block per stored summary (one summarizer today). -->
  @if (summaryExpanded() && summaryRows().length > 0) {
    <div class="inspector__summary" data-testid="inspector-summary">
      @for (row of summaryRows(); track row.summarizerActionId) {
        <div class="inspector__summary-block">
          <!-- Only the TITLE row is split (user call 2026-07-21): subject
               on the left, the stacked controls column on the right; the
               lists below span the full width. -->
          <div class="inspector__summary-head">
            <i class="pi pi-sparkles inspector__summary-icon" aria-hidden="true"></i>
            <span class="inspector__summary-subject" data-testid="inspector-summary-subject">{{
              reportSubject(row)
            }}</span>
            <aside class="inspector__summary-side">
              <button
                type="button"
                class="inspector__summary-refresh inspector__summary-delete"
                [pTooltip]="texts.header.summary.deleteTooltip"
                tooltipPosition="left"
                [attr.aria-label]="texts.header.summary.deleteTooltip"
                (click)="summaryDelete.emit(row.summarizerActionId)"
                data-testid="inspector-summary-delete"
              >
                <i class="pi pi-times" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="inspector__summary-refresh"
                [disabled]="summaryRefreshDisabled()"
                [pTooltip]="summaryRefreshTooltip()"
                tooltipPosition="left"
                [attr.aria-label]="summaryRefreshTooltip()"
                (click)="summaryRefresh.emit()"
                data-testid="inspector-summary-refresh"
              >
                @switch (summaryState()) {
                  @case ('queued') {
                    <i class="pi pi-clock" aria-hidden="true"></i>
                  }
                  @case ('running') {
                    <i class="pi pi-spin pi-spinner" aria-hidden="true"></i>
                  }
                  @default {
                    <i class="pi pi-refresh" aria-hidden="true"></i>
                  }
                }
              </button>
              @if (reportConfidence(row); as pct) {
                <span
                  class="inspector__summary-confidence"
                  [pTooltip]="texts.header.summary.confidenceTooltip"
                  tooltipPosition="left"
                  >{{ pct }}%</span
                >
              }
              @if (row.stale) {
                <span
                  class="inspector__summary-stale"
                  [pTooltip]="texts.header.summary.staleTooltip"
                  data-testid="inspector-summary-stale"
                  >{{ texts.header.summary.staleTag }}</span
                >
              }
            </aside>
          </div>
          @if (reportList(row, 'keyFacts').length > 0) {
            <ul class="inspector__summary-list">
              @for (fact of reportList(row, 'keyFacts'); track fact) {
                <li>{{ fact }}</li>
              }
            </ul>
          }
          @if (reportList(row, 'qualityNotes').length > 0) {
            <div class="inspector__summary-quality-label">{{ texts.header.summary.qualityLabel }}</div>
            <ul class="inspector__summary-list inspector__summary-list--quality">
              @for (note of reportList(row, 'qualityNotes'); track note) {
                <li>{{ note }}</li>
              }
            </ul>
          }
        </div>
      }
    </div>
  }

  @defer (when stabilityPromptOpened(); prefetch on idle) {
    @if (stabilityPayload(); as payload) {
      <sm-action-prompt-dialog
        [open]="stabilityPromptOpen()"
        [descriptor]="stabilityDescriptor()"
        [headerText]="payload.prompt.label"
        [busy]="stabilityBusy()"
        (confirmed)="onStabilityConfirmed($event)"
        (closed)="cancelStabilityPrompt()"
      />
    }
  }
</header>