@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">{{ texts.emptyNoSelection.desc }}</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>
      </p>
    </div>
  </section>
} @else {
  @let n = node()!;
  @let fm = n.frontmatter;

  <!--
    The node's kind colour is bound onto `--accent` here so the hero and
    every `.sm-block` section rail inherit one hue per node. Falls back to
    the markdown kind var for kinds without a dedicated colour.
  -->
  <section
    class="inspector inspector--node"
    [style.--accent]="accentVar()"
    data-testid="inspector-view"
  >
    <sm-inspector-header
      [node]="n"
      [frontmatterInvalid]="frontmatterInvalid()"
      [activeTag]="activeTag()"
      [summaryState]="summaryHeaderState()"
      [summaryRows]="nodeSummaries() ?? []"
      [summaryExpanded]="summaryExpanded()"
      [summaryStale]="summaryStale()"
      [autoTagState]="autoTagState()"
      [autoTagProposedTags]="autoTagProposedTags()"
      [ignoreVisible]="projectIgnore.available()"
      (favoriteToggle)="onHeaderFavoriteToggle($event)"
      (ignoreClick)="onHeaderIgnore($event)"
      (tagClick)="tagSelect.emit($event)"
      (summarizeClick)="onSummarizeClick()"
      (summaryRefresh)="onSummaryRefresh()"
      (summaryDelete)="onSummaryDelete($event)"
      (autoTagClick)="onAutoTagClick()"
      (tagsSaved)="onTagsSaved()"
    />

    <!-- Scroll area: the fixed header above stays put while everything from
         the description down scrolls here. -->
    <div class="inspector__scroll" data-testid="inspector-scroll">
    @if (fm.description) {
      <p class="inspector__desc" data-testid="inspector-description" [innerHTML]="descriptionHtml()"></p>
    }

    <!--
      Action-dispatch errors are surfaced inline by each dispatcher
      (the `<sm-node-tags>` editor in the header, `<sm-node-action-button>`
      next to its button), so there is no separate banner here, it would
      double-render the same shared `ActionDispatchService.error()`.
    -->

    <!--
      Actions section. The action buttons (Set stability, Bump, and any
      plugin-contributed verb) arrive as contributions on
      `inspector.action.button`, dispatched through `ActionDispatchService`.
      Replaces the former always-visible toolbar: the section hides for a
      node with no action contributions (`hasActions`) and defaults
      expanded so the buttons stay reachable without a click.
    -->
    @if (hasActions()) {
      <sm-collapsible-section
        [title]="texts.sections.actions"
        [expanded]="expanded('actions')"
        toggleTestid="inspector-actions-toggle"
        (toggle)="toggleSection('actions')"
        data-testid="inspector-card-actions"
      >
        @if (expanded('actions')) {
          <div class="inspector__actions">
            <!-- Re-homed contributions (payloads declaring a `surface`)
                 are skipped by the host itself per the slot contract:
                 those affordances live on the header chips / tag row. -->
            <sm-view-contributions-host
              slot="inspector.action.button"
              [node]="n"
            />
          </div>
        }
      </sm-collapsible-section>
    }

    <!--
      Findings section (self-gating child): the deterministic issues,
      the probabilistic (AI) finding rows mixed below them, and the
      hidden-buckets honesty line. The shared AI actions handle is
      threaded in so the rows stay coherent with the launcher card.
    -->
    <sm-inspector-findings-section
      [node]="n"
      [aiActions]="aiActions"
      [expanded]="expanded('findings')"
      (toggle)="toggleSection('findings')"
    />

    <!--
      AI actions section (self-gating child): the launcher groups, the
      Automatic toggle, the agent-check chip, and the submit error
      strip. Shares the same controller handle as the findings rows.
    -->
    <sm-inspector-ai-actions-section
      [node]="n"
      [aiActions]="aiActions"
      [expanded]="expanded('aiActions')"
      (toggle)="toggleSection('aiActions')"
    />

    <!--
      Activity section (self-gating child): per-node execution stats,
      the merged timeline, the spawn threads, and the conversation
      dialog they open. Node-link clicks route back through the shared
      node-open intent here.
    -->
    <sm-inspector-activity-section
      [node]="n"
      [expanded]="expanded('activity')"
      (toggle)="toggleSection('activity')"
      (openPath)="openPath($event)"
    />

    @if (hasConnections()) {
      <sm-collapsible-section
        [title]="texts.sections.connections"
        [expanded]="expanded('connections')"
        toggleTestid="inspector-connections-toggle"
        (toggle)="toggleSection('connections')"
        data-testid="inspector-card-linked-nodes"
      >
        @if (expanded('connections')) {
          <sm-linked-nodes-panel [path]="n.path" (openPath)="openPath($event)" />
        }
      </sm-collapsible-section>
    }

    @if (hasVendorFrontmatter()) {
      <div class="inspector__vendor" data-testid="inspector-card-vendor-frontmatter">
        <sm-vendor-frontmatter
          [frontmatter]="fm"
          [kind]="n.kind"
          [provider]="n.provider"
          [bodyField]="bodyFieldForNode()"
          [skillPathByName]="skillPathByName()"
          [onSkillClick]="onSkillChip"
          [expanded]="expanded('definition')"
          (toggle)="toggleSection('definition')"
        />
      </div>
    }

    @if (hasAnnotations()) {
      <sm-collapsible-section
        [title]="texts.sections.annotations"
        [expanded]="expanded('annotations')"
        toggleTestid="inspector-annotations-toggle"
        (toggle)="toggleSection('annotations')"
        data-testid="inspector-card-annotations"
      >
        @if (sidecarFileName(); as sf) {
          <code class="inspector__sidecar-file" smSectionTitleExtra data-testid="inspector-sidecar-file">({{ sf }})</code>
        }
        @if (expanded('annotations')) {
          <sm-annotations-panel [overlay]="n.sidecar" />
        }
      </sm-collapsible-section>
    }

    @if (showBody()) {
      <sm-collapsible-section
        class="inspector__body-section"
        [title]="texts.sections.body"
        [expanded]="expanded('body')"
        toggleTestid="inspector-body-toggle"
        (toggle)="toggleSection('body')"
        data-testid="inspector-card-body"
      >
        @if (expanded('body')) {
          @switch (bodyState()) {
            @case ('loading') {
              <p class="inspector__body-status" data-testid="inspector-body-loading">{{ texts.body.loading }}</p>
            }
            @case ('ready') {
              @let raw = bodyView() === 'raw';
              <!--
                Raw / Rendered toggle + Expand. Live inside the body content
                (not the section header, which is itself a button) so they
                only paint when the section is expanded. The toggle's label
                names the view it switches TO; Expand opens the same body in
                a large dialog (see the p-dialog at the end of the template).
              -->
              <div class="inspector__body-view">
                <button
                  type="button"
                  class="inspector__body-view-toggle"
                  data-testid="inspector-body-view-toggle"
                  (click)="toggleBodyView()"
                  [pTooltip]="raw ? texts.body.view.showRenderedTooltip : texts.body.view.showRawTooltip"
                  [attr.aria-label]="raw ? texts.body.view.showRenderedTooltip : texts.body.view.showRawTooltip"
                >
                  <i
                    class="pi"
                    [class.pi-code]="!raw"
                    [class.pi-eye]="raw"
                    aria-hidden="true"
                  ></i>
                  <span>{{ raw ? texts.body.view.showRendered : texts.body.view.showRaw }}</span>
                </button>
                <button
                  type="button"
                  class="inspector__body-view-toggle"
                  data-testid="inspector-body-expand"
                  (click)="openBodyDialog()"
                  [pTooltip]="texts.body.expand.tooltip"
                  [attr.aria-label]="texts.body.expand.tooltip"
                >
                  <i class="pi pi-expand" aria-hidden="true"></i>
                  <span>{{ texts.body.expand.label }}</span>
                </button>
              </div>
              @if (raw) {
                <!--
                  Read-only Markdown "editor" view: a line-number gutter plus
                  the source highlighted by highlight.js (`[innerHTML]` is the
                  SafeHtml from `MarkdownRenderer.highlightSource`, sanitized
                  by DOMPurify). Kept on single lines so the `<pre>` carries no
                  stray leading whitespace.
                -->
                <div class="inspector__body-raw" data-testid="inspector-body-raw">
                  <pre class="inspector__body-raw-gutter" aria-hidden="true">{{ rawLineNumbers() }}</pre>
                  <pre class="inspector__body-raw-code"><code class="hljs language-markdown" data-testid="inspector-body-raw-code" [innerHTML]="rawHighlightedHtml()"></code></pre>
                </div>
              } @else {
                <!--
                  `[innerHTML]` is intentional: `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.
                  `smMarkdownImages` activates the click-to-load image
                  placeholders inside that inert HTML (no request fires
                  until the operator clicks one).
                -->
                <div smMarkdownImages class="sm-md-prose inspector__body-rendered" data-testid="inspector-body-rendered" [innerHTML]="bodyHtml()"></div>
              }
            }
          }
        }
      </sm-collapsible-section>
    }

    @if (hasPluginContributions()) {
      <sm-collapsible-section
        [title]="texts.sections.plugins"
        [expanded]="expanded('plugins')"
        toggleTestid="inspector-plugins-toggle"
        (toggle)="toggleSection('plugins')"
        data-testid="inspector-card-plugins"
      >
        @if (expanded('plugins')) {
          <sm-plugin-contributions [sidecarRoot]="sidecarRoot()" />
        }
      </sm-collapsible-section>
    }

    <!--
      Plugin view contributions, grouped ONE collapsible section per
      plugin (titled by the trusted pluginId, collapsed by default). The
      component groups the node's `inspector.body.panel.*` contributions
      by plugin, sorts sections by the plugin `order` and bricks by the
      extension `order`, and self-hides when no plugin contributed a body
      panel, so no wrapper / gate is needed.
    -->
    <sm-inspector-plugin-sections [node]="node()" />

    @if (hasMetadata()) {
      <sm-collapsible-section
        [title]="texts.sections.metadata"
        [expanded]="expanded('metadata')"
        toggleTestid="inspector-metadata-toggle"
        (toggle)="toggleSection('metadata')"
        data-testid="inspector-card-metadata"
      >
        @if (expanded('metadata')) {
          <div class="inspector__metadata" data-testid="inspector-metadata-section">
            <sm-inspector-audit-panel [sidecarRoot]="sidecarRoot()" />
            <sm-inspector-debug-panel
              [node]="n"
              [sidecarRoot]="sidecarRoot()"
              [overlay]="n.sidecar"
            />
          </div>
        }
      </sm-collapsible-section>
    }
    </div>

    <!--
      `.sm` write consent gate. Opened by `ActionDispatchService` when a
      dispatch hits a 412 `confirm-required` with
      `details.key === "allowEditSmFiles"`. The dialog reports the user's
      choice (accept / decline + "always allow") back to the service,
      which retries the parked dispatch with the right consent flags.
    -->
    <sm-sidecar-consent-dialog
      [open]="consentOpen()"
      [context]="consentContext()"
      (decision)="onConsentDecision($event)"
    />

    <!--
      Large-dialog reading mode for the Body section. Opened by the Expand
      button next to the Raw / Rendered toggle; shows the SAME content
      (bodyHtml / raw highlighted source) with the same toggle in the
      header, both flipping the shared `bodyView` signal. `appendTo="body"`
      is load-bearing: PrimeNG re-parents the mask + dialog root to <body>
      on show, so the dialog escapes the inspector rail and overlays the
      whole viewport. That re-parenting is also why the dialog chrome
      (styleClass / contentStyleClass) and the rendered-markdown prose live
      as GLOBAL rules in `styles.css`: outside this host's subtree, no
      `:host ::ng-deep` rule reaches them. Elements authored right here
      keep working with ordinary scoped CSS (their `_ngcontent` attribute
      travels with them). The `ariaLabelledBy` header context closes the
      dialog's `aria-labelledby` reference onto our own title span (same
      WCAG 4.1.2 contract documented in the Quick Start modal's header
      template).
    -->
    <p-dialog
      [(visible)]="bodyDialogOpen"
      [modal]="true"
      [draggable]="false"
      [resizable]="false"
      [closable]="true"
      [closeOnEscape]="true"
      [dismissableMask]="true"
      appendTo="body"
      styleClass="inspector__body-dialog"
      contentStyleClass="inspector__body-dialog-content"
      data-testid="inspector-body-dialog"
    >
      <ng-template #header let-ariaLabelledBy="ariaLabelledBy">
        <div class="inspector__body-dialog-header">
          <span
            class="inspector__body-dialog-title"
            [id]="ariaLabelledBy"
            data-testid="inspector-body-dialog-title"
          >{{ bodyDialogTitle() }}</span>
          @let dialogRaw = bodyView() === 'raw';
          <button
            type="button"
            class="inspector__body-view-toggle"
            data-testid="inspector-body-dialog-view-toggle"
            (click)="toggleBodyView()"
            [pTooltip]="dialogRaw ? texts.body.view.showRenderedTooltip : texts.body.view.showRawTooltip"
            [attr.aria-label]="dialogRaw ? texts.body.view.showRenderedTooltip : texts.body.view.showRawTooltip"
          >
            <i
              class="pi"
              [class.pi-code]="!dialogRaw"
              [class.pi-eye]="dialogRaw"
              aria-hidden="true"
            ></i>
            <span>{{ dialogRaw ? texts.body.view.showRendered : texts.body.view.showRaw }}</span>
          </button>
        </div>
      </ng-template>
      @if (bodyView() === 'raw') {
        <div class="inspector__body-raw inspector__body-raw--dialog" data-testid="inspector-body-dialog-raw">
          <pre class="inspector__body-raw-gutter" aria-hidden="true">{{ rawLineNumbers() }}</pre>
          <pre class="inspector__body-raw-code"><code class="hljs language-markdown" data-testid="inspector-body-dialog-raw-code" [innerHTML]="rawHighlightedHtml()"></code></pre>
        </div>
      } @else {
        <!-- Same sanitized SafeHtml + click-to-load images contract as the card's rendered view. -->
        <div
          smMarkdownImages
          class="sm-md-prose inspector__body-rendered inspector__body-rendered--dialog"
          data-testid="inspector-body-dialog-rendered"
          [innerHTML]="bodyHtml()"
        ></div>
      }
    </p-dialog>
  </section>
}