@if (!path()) {
  <section class="inspector" data-testid="inspector-view">
    <div class="empty-state" data-testid="inspector-empty-no-selection">
      <span class="empty-state__icon pi pi-eye"></span>
      <p class="empty-state__title">{{ texts.emptyNoSelection.title }}</p>
      <p class="empty-state__desc">
        <span>{{ texts.emptyNoSelection.descPrefix }}</span>
        <a routerLink="/list" class="inspector__back">{{ texts.emptyNoSelection.listLink }}</a>
        <span>{{ texts.emptyNoSelection.descMiddle }}</span>
        <a routerLink="/graph" class="inspector__back">{{ texts.emptyNoSelection.graphLink }}</a>
        <span>{{ texts.emptyNoSelection.descSuffix }}</span>
      </p>
    </div>
  </section>
} @else if (!node()) {
  <section class="inspector" data-testid="inspector-view">
    <div class="empty-state" data-testid="inspector-empty-not-found">
      <span class="empty-state__icon empty-state__icon--warn pi pi-question-circle"></span>
      <p class="empty-state__title">{{ texts.emptyNotFound.title }}</p>
      <p class="empty-state__desc">
        <code>{{ path() }}</code>
        <span>{{ texts.emptyNotFound.descSuffix }}</span>
        <a routerLink="/list" class="inspector__back">{{ texts.emptyNotFound.backLink }}</a>
        <span>{{ texts.emptyNotFound.descAfterLink }}</span>
      </p>
    </div>
  </section>
} @else {
  @let n = node()!;
  @let fm = n.frontmatter;

  <section class="inspector" data-testid="inspector-view">
    <sm-inspector-header
      [node]="n"
      [mode]="mode()"
      [showActionMocks]="showActionMocks"
      (close)="onHeaderClose()"
      (favoriteToggle)="onHeaderFavoriteToggle($event)"
    />

    <!--
      Action toolbar, bump + debug. Lives outside the header (below)
      so the header itself stays a pure read-only mirror of the card.
    -->
    <div class="inspector__toolbar">
      <button
        type="button"
        class="inspector__debug-toggle"
        [class.inspector__debug-toggle--active]="debugVisible()"
        [attr.aria-label]="texts.debugToggleAriaLabel"
        [attr.aria-pressed]="debugVisible()"
        [pTooltip]="texts.debugToggleTooltip"
        (click)="toggleDebug()"
        data-testid="inspector-debug-toggle"
      >
        <i class="pi pi-info-circle" aria-hidden="true"></i>
      </button>
      <p-button
        [label]="texts.bump.label"
        icon="pi pi-arrow-up-right"
        severity="secondary"
        size="small"
        [disabled]="!canBump() || bumpInFlight()"
        [loading]="bumpInFlight()"
        [pTooltip]="bumpTooltip()"
        (onClick)="onBumpClick()"
        data-testid="inspector-bump"
      />
      @if (mode() === 'standalone') {
        <a routerLink="/list" class="inspector__back" data-testid="inspector-back">{{ texts.backToList }}</a>
      }
    </div>

    @if (headerSupersededBy(); as sup) {
      <div class="inspector__superseded" data-testid="inspector-superseded-banner">
        <i class="pi pi-arrow-up-right" aria-hidden="true"></i>
        <span>{{ texts.supersededByBanner(sup) }}</span>
      </div>
    }

    @if (bumpError(); as err) {
      <div class="inspector__bump-error" data-testid="inspector-bump-error">
        <span>{{ err }}</span>
        <button type="button" class="inspector__bump-error-dismiss" (click)="dismissBumpError()" aria-label="Dismiss">
          <i class="pi pi-times" aria-hidden="true"></i>
        </button>
      </div>
    }

    @if (fm.description) {
      <p class="inspector__desc" data-testid="inspector-description">{{ fm.description }}</p>
    }

    <!-- Debug panel, hidden by default; toggled via the header button. -->
    @if (debugVisible()) {
      <div class="inspector__debug" data-testid="inspector-debug-section">
        <sm-inspector-debug-panel
          [node]="n"
          [sidecarRoot]="sidecarRoot()"
          [overlay]="n.sidecar"
        />
      </div>
    }

    <div class="inspector__grid">
      @if (mode() === 'standalone') {
        <!-- v0.8.0 placeholder cards: enrichment / summary. The
             findings slot below is the only one wired to real data
             today; the other two stay as placeholders until their
             plugin surfaces land. -->
        <sm-empty-state
          [title]="texts.placeholders.enrichmentTitle"
          [body]="texts.placeholders.body"
          icon="pi pi-sparkles"
          testId="inspector-empty-enrichment"
        />
        <sm-empty-state
          [title]="texts.placeholders.summaryTitle"
          [body]="texts.placeholders.body"
          icon="pi pi-file"
          testId="inspector-empty-summary"
        />
      }

      <!-- Findings card, visible in both standalone and embedded modes
           when the node has issues. Empty-state only in standalone (the
           embedded panel keeps the layout tight by hiding zero-state
           cards). -->
      @if (issues().length > 0) {
        <p-card data-testid="inspector-findings">
          <ng-template pTemplate="header">
            <div class="inspector__findings-header">
              <i class="pi pi-search"></i>
              <span>{{ texts.placeholders.findingsTitle }}</span>
              <span class="inspector__findings-count">{{ issues().length }}</span>
            </div>
          </ng-template>
          <ul class="inspector__findings-list">
            @for (issue of issues(); track $index) {
              <li
                class="inspector__finding"
                [attr.data-severity]="issue.severity"
                data-testid="inspector-finding"
              >
                <div class="inspector__finding-head">
                  <span
                    class="inspector__finding-severity"
                    [attr.data-severity]="issue.severity"
                    >{{ issue.severity }}</span
                  >
                  <code class="inspector__finding-analyzer">{{ issue.analyzerId }}</code>
                </div>
                <p class="inspector__finding-message">{{ issue.message }}</p>
                @if (issue.fix?.summary; as fixSummary) {
                  <p class="inspector__finding-hint" data-testid="inspector-finding-hint">
                    <strong>Hint:</strong> {{ fixSummary }}
                  </p>
                }
              </li>
            }
          </ul>
        </p-card>
      } @else if (mode() === 'standalone') {
        <sm-empty-state
          [title]="texts.placeholders.findingsTitle"
          [body]="texts.placeholders.body"
          icon="pi pi-search"
          testId="inspector-empty-findings"
        />
      }

      <!-- Annotations card (Step 9.6.5, catalog curation 2026-05-07).
           Visible when a sidecar overlay is present OR when the
           frontmatter declares author tags, author tags surface in
           the Taxonomy section even without a sidecar so nodes like
           GEMINI.md (frontmatter-only) still expose their tag set. -->
      @if (n.sidecar?.present || authorTags().length > 0) {
        <p-card
          [header]="texts.cardsAnnotations"
          styleClass="inspector__card inspector__card--full"
          data-testid="inspector-card-annotations"
        >
          <sm-annotations-panel
            [overlay]="n.sidecar"
            [authorTags]="authorTags()"
            [knownPaths]="pathSet()"
            [activeTag]="activeTag()"
            (openPath)="openPath($event)"
            (tagClick)="tagSelect.emit($event)"
          />
        </p-card>
      }

      <!-- Vendor frontmatter card. Hidden when the per-kind schema
           declares zero vendor-specific fields (notes today). -->
      @if (hasVendorFrontmatter()) {
        <p-card
          [header]="texts.cards.agent"
          styleClass="inspector__card inspector__card--full"
          data-testid="inspector-card-vendor-frontmatter"
        >
          <sm-vendor-frontmatter
            [frontmatter]="fm"
            [kind]="n.kind"
            [provider]="n.provider"
            [knownPaths]="pathSet()"
            [onSkillClick]="onSkillChip"
          />
        </p-card>
      }

      <!-- Linked-nodes panel, extractor-detected outgoing/incoming. -->
      <div class="inspector__card inspector__card--full" data-testid="inspector-card-linked-nodes">
        <sm-linked-nodes-panel [path]="n.path" (openPath)="openPath($event)" />
      </div>

      <!-- Stats footer, bytes / tokens / links totals. -->
      <p-card
        styleClass="inspector__card inspector__card--full inspector__card--stats"
        data-testid="inspector-card-stats"
      >
        <dl class="kv">
          @if (n.bytesTotal !== undefined) {
            <dt>{{ texts.stats.bytes }}</dt>
            <dd><code>{{ n.bytesTotal }}</code></dd>
          }
          @if (n.tokensTotal !== undefined) {
            <dt>{{ texts.stats.tokens }}</dt>
            <dd><code>{{ n.tokensTotal }}</code></dd>
          }
          <dt>{{ texts.stats.links }}</dt>
          <dd>
            <code>{{ n.linksOutCount ?? 0 }}</code> {{ texts.stats.out }} ·
            <code>{{ n.linksInCount ?? 0 }}</code> {{ texts.stats.in }}
            @if (n.externalRefsCount !== undefined && n.externalRefsCount > 0) {
              · <code>{{ n.externalRefsCount }}</code> {{ texts.stats.ext }}
            }
          </dd>
        </dl>
      </p-card>

      <!-- Audit section, collapsed by default. -->
      <p-card
        styleClass="inspector__card inspector__card--full inspector__card--collapsible"
        data-testid="inspector-card-audit"
      >
        <ng-template pTemplate="header">
          <button
            type="button"
            class="inspector__collapsible-header"
            (click)="toggleAudit()"
            [attr.aria-expanded]="auditExpanded()"
            data-testid="inspector-audit-toggle"
          >
            <i
              class="pi"
              [class.pi-chevron-right]="!auditExpanded()"
              [class.pi-chevron-down]="auditExpanded()"
              aria-hidden="true"
            ></i>
            <span class="inspector__collapsible-title">{{ texts.audit.header }}</span>
            <span class="inspector__collapsible-summary" data-testid="inspector-audit-summary">
              · {{ auditSummary() }}
            </span>
          </button>
        </ng-template>
        @if (auditExpanded()) {
          <sm-inspector-audit-panel [sidecarRoot]="sidecarRoot()" />
        }
      </p-card>

      <!-- Plugin contributions section, collapsed by default. -->
      @if (hasPluginContributions()) {
        <p-card
          styleClass="inspector__card inspector__card--full inspector__card--collapsible"
          data-testid="inspector-card-plugins"
        >
          <ng-template pTemplate="header">
            <button
              type="button"
              class="inspector__collapsible-header"
              (click)="togglePlugins()"
              [attr.aria-expanded]="pluginsExpanded()"
              data-testid="inspector-plugins-toggle"
            >
              <i
                class="pi"
                [class.pi-chevron-right]="!pluginsExpanded()"
                [class.pi-chevron-down]="pluginsExpanded()"
                aria-hidden="true"
              ></i>
              <span class="inspector__collapsible-title">{{ texts.pluginsHeader }}</span>
            </button>
          </ng-template>
          @if (pluginsExpanded()) {
            <sm-plugin-contributions [sidecarRoot]="sidecarRoot()" />
          }
        </p-card>
      }

      <!--
        View contribution system, inspector body panel sub-slots.
        Plugin authors pick a `slot` directly; each sub-slot maps to
        one payload shape + one renderer. The 6 hosts stack in
        narrative order (chart → table → tree → list → markdown).
        Each host renders only when its sub-slot has matching
        contributions. Sibling to the sidecar-rooted
        `<sm-plugin-contributions>` above; the two cover orthogonal
        data sources (sidecar root keys vs per-node typed payloads).
      -->
      @if (hasViewContributions()) {
        <p-card
          styleClass="inspector__card inspector__card--full"
          data-testid="inspector-card-view-contributions"
        >
          <sm-inspector-slots-panel [node]="node()" />
        </p-card>
      }

      <!-- Body, markdown rendered via MarkdownRenderer (lazy-loaded) -->
      <p-card styleClass="inspector__card inspector__card--full inspector__body" data-testid="inspector-card-body">
        <ng-template pTemplate="header">
          <div class="inspector__body-header">
            <h3 class="inspector__body-title">{{ texts.cards.body }}</h3>
            <p-button
              icon="pi pi-refresh"
              [rounded]="true"
              [text]="true"
              severity="secondary"
              [ariaLabel]="texts.body.refreshLabel"
              [pTooltip]="texts.body.refreshLabel"
              (onClick)="refreshBody()"
              [disabled]="bodyState() === 'loading' || !path()"
              [loading]="bodyState() === 'loading'"
              data-testid="inspector-body-refresh"
            />
          </div>
        </ng-template>
        @switch (bodyState()) {
          @case ('loading') {
            <p class="inspector__body-status" data-testid="inspector-body-loading">{{ texts.body.loading }}</p>
          }
          @case ('empty') {
            <p class="inspector__body-status" data-testid="inspector-body-empty">{{ texts.body.empty }}</p>
          }
          @case ('unavailable') {
            <p class="inspector__body-status inspector__body-status--warn" data-testid="inspector-body-unavailable">{{ texts.body.unavailable }}</p>
          }
          @case ('error') {
            <p class="inspector__body-status inspector__body-status--warn" data-testid="inspector-body-error">{{ texts.body.renderError }}</p>
          }
          @case ('ready') {
            <!--
              `[innerHTML]` is intentional here: `bodyHtml()` is the
              `SafeHtml` output of `MarkdownRenderer.render()`, which
              already runs two sanitization layers (`markdown-it` with
              `html: false` + DOMPurify) over project-controlled
              markdown bytes. The renderer-catalog ban on `[innerHTML]`
              applies to plugin-payload data crossing the trust boundary;
              node body bytes are first-party and do not.
            -->
            <div class="inspector__body-rendered" data-testid="inspector-body-rendered" [innerHTML]="bodyHtml()"></div>
          }
        }
      </p-card>
    </div>

    <!--
      Phase 6 consent gate, first-time `.sm` sidecar write confirmation.
      The dialog is opened imperatively from `onBumpClick()` when the
      BFF answers 412 `confirm-required` with `details.key ===
      "allowEditSmFiles"`. Accept retries the bump with `confirm: true`;
      reject silently abandons. The dialog instance lives on the host
      component because `ConfirmationService` is provided locally.
    -->
    <p-confirmdialog
      [ariaLabel]="texts.bump.consentDialogAriaLabel"
      data-testid="inspector-bump-consent"
      styleClass="sm-consent-dialog"
    />
  </section>
}