@if (hasAnyContent()) {
  <div class="vfm" data-testid="vendor-frontmatter">

    <!--
      Single `Definition` section. Runtime + capability fields share one
      definition list so every `dt` aligns on the same `max-content`
      column; the initial prompt closes the section as a quote block.
      The Behavior / Capabilities / Initial-prompt split is a skill-map
      presentation choice, not vendor JSON structure (the frontmatter is
      flat), so it collapses cleanly into one rail.

      Rendered through `<sm-collapsible-section>` rather than a hand-rolled
      copy of the `.sm-block__row--toggle` markup (WCAG 1.3.1). The
      duplicate emitted a toggle with NO `role="heading"` wrapper, so
      Definition, usually the densest section on an agent node, was
      invisible to heading navigation while every sibling section was
      listed. Re-implementing the shared chrome was the actual defect;
      adopting the component fixes the heading, the `aria-controls` link
      and the body region in one move, and the `.sm-block` vocabulary is
      global so the visual result is unchanged.
    -->
    <sm-collapsible-section
      [title]="texts.sections.definition"
      [expanded]="expanded()"
      toggleTestid="vendor-frontmatter-toggle"
      (toggle)="toggle.emit()"
      data-testid="vendor-frontmatter-definition"
    >
      @if (expanded()) {
      @if (isAgent()) {
        @if (hasBehavior() || hasCapabilities() || extraFields().length) {
          <dl class="sm-block__kv">
            @if (model(); as m) {
              <dt>{{ texts.fields.model }}</dt>
              <dd><code>{{ m }}</code></dd>
            }
            @if (effort(); as ef) {
              <dt>{{ texts.fields.effort }}</dt>
              <dd><code>{{ ef }}</code></dd>
            }
            @if (tools().length) {
              <dt>{{ texts.fields.tools }}</dt>
              <dd class="vfm__inline">
                @for (t of tools(); track t; let last = $last) {
                  <code>{{ t }}</code>@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @if (disallowedTools().length) {
              <dt>{{ texts.fields.disallowedTools }}</dt>
              <dd class="vfm__inline">
                @for (d of disallowedTools(); track d; let last = $last) {
                  <span class="vfm__danger"><i class="pi pi-ban" aria-hidden="true"></i> <code>{{ d }}</code></span>@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @if (permissionMode(); as pm) {
              <dt>{{ texts.fields.permissionMode }}</dt>
              <dd><code>{{ pm }}</code></dd>
            }
            @if (color(); as c) {
              <dt>{{ texts.fields.color }}</dt>
              <dd class="vfm__color">
                <span class="vfm__swatch" [style.background]="c" aria-hidden="true"></span>
                <code>{{ c }}</code>
              </dd>
            }
            @if (skills().length) {
              <dt>{{ texts.fields.skills }}</dt>
              <dd class="vfm__inline">
                @for (s of skills(); track s; let last = $last) {
                  @if (skillPath(s); as sp) {
                    <a
                      class="sm-node-link sm-node-link--known"
                      (click)="openSkill(sp)"
                      role="button"
                      tabindex="0"
                      (keydown.enter)="openSkill(sp)"
                      (keydown.space)="openSkill(sp); $event.preventDefault()"
                    >
                      <i class="pi pi-arrow-up-right" aria-hidden="true"></i> {{ s }}
                    </a>
                  } @else {
                    <span class="sm-node-link" [pTooltip]="texts.skillUnresolvedTooltip">{{ s }}</span>
                  }@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @if (maxTurns() !== null) {
              <dt>{{ texts.fields.maxTurns }}</dt>
              <dd><code>{{ maxTurns() }}</code></dd>
            }
            @if (memory(); as me) {
              <dt>{{ texts.fields.memory }}</dt>
              <dd><code>{{ me }}</code></dd>
            }
            @if (background() !== null) {
              <dt>{{ texts.fields.background }}</dt>
              <dd><code>{{ background() }}</code></dd>
            }
            @if (isolation(); as iso) {
              <dt>{{ texts.fields.isolation }}</dt>
              <dd><code>{{ iso }}</code></dd>
            }
            @if (mcpServers().length) {
              <dt>{{ texts.fields.mcpServers }}</dt>
              <dd class="vfm__inline">
                @for (s of mcpServers(); track s.name; let last = $last) {
                  <code [pTooltip]="s.command ?? ''">{{ s.name }}</code>@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @if (hooks().length) {
              <dt>{{ texts.fields.hooks }}</dt>
              <dd class="vfm__inline">
                @for (h of hooks(); track h.event; let last = $last) {
                  <span class="vfm__hook">
                    <code>{{ h.event }}</code>@if (h.keys.length) { <span class="vfm__sep-arrow" aria-hidden="true">→</span> <code>{{ h.keys[0] }}</code> }
                  </span>@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @for (f of extraFields(); track f.key) {
              <dt>{{ f.key }}</dt>
              <dd class="vfm__unknown-dd">
                <i
                  class="pi pi-exclamation-circle vfm__unknown"
                  [pTooltip]="texts.unknownFieldTooltip"
                  [attr.aria-label]="texts.unknownFieldTooltip"
                  role="img"
                ></i>
                <code>{{ f.value }}</code>
              </dd>
            }
          </dl>
        }
      } @else if (isSkillOrCommand()) {
        @if (hasCapabilities() || extraFields().length) {
          @let sb = skillBase();
          <dl class="sm-block__kv" data-testid="vendor-frontmatter-skill-base">
            @if (sb.model !== null) {
              <dt>{{ texts.skillBaseFields.model }}</dt>
              <dd><code>{{ sb.model }}</code></dd>
            }
            @if (sb.effort !== null) {
              <dt>{{ texts.skillBaseFields.effort }}</dt>
              <dd><code>{{ sb.effort }}</code></dd>
            }
            @if (sb.when_to_use !== null) {
              <dt>{{ texts.skillBaseFields.whenToUse }}</dt>
              <dd>{{ sb.when_to_use }}</dd>
            }
            @if (sb.argumentHint !== null) {
              <dt>{{ texts.skillBaseFields.argumentHint }}</dt>
              <dd><code>{{ sb.argumentHint }}</code></dd>
            }
            @if (sb.arguments.length) {
              <dt>{{ texts.skillBaseFields.arguments }}</dt>
              <dd class="vfm__inline">
                @for (a of sb.arguments; track a; let last = $last) {
                  <code>{{ a }}</code>@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @if (sb.allowedTools.length) {
              <dt>{{ texts.skillBaseFields.allowedTools }}</dt>
              <dd class="vfm__inline">
                @for (t of sb.allowedTools; track t; let last = $last) {
                  <code>{{ t }}</code>@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @if (sb.disallowedTools.length) {
              <dt>{{ texts.skillBaseFields.disallowedTools }}</dt>
              <dd class="vfm__inline">
                @for (d of sb.disallowedTools; track d; let last = $last) {
                  <span class="vfm__danger"><i class="pi pi-ban" aria-hidden="true"></i> <code>{{ d }}</code></span>@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @if (sb.context !== null) {
              <dt>{{ texts.skillBaseFields.context }}</dt>
              <dd><code>{{ sb.context }}</code></dd>
            }
            @if (sb.agent !== null) {
              <dt>{{ texts.skillBaseFields.agent }}</dt>
              <dd><code>{{ sb.agent }}</code></dd>
            }
            @if (sb.shell !== null) {
              <dt>{{ texts.skillBaseFields.shell }}</dt>
              <dd><code>{{ sb.shell }}</code></dd>
            }
            @if (sb.paths.length) {
              <dt>{{ texts.skillBaseFields.paths }}</dt>
              <dd class="vfm__inline">
                @for (p of sb.paths; track p; let last = $last) {
                  <code>{{ p }}</code>@if (!last) { <span class="vfm__sep" aria-hidden="true">·</span> }
                }
              </dd>
            }
            @if (sb.disableModelInvocation) {
              <dt>{{ texts.skillBaseFields.disableModelInvocation }}</dt>
              <dd><code>{{ texts.skillBaseFields.disabledValue }}</code></dd>
            }
            @if (sb.userInvocable !== null) {
              <dt>{{ texts.skillBaseFields.userInvocable }}</dt>
              <dd><code>{{ sb.userInvocable }}</code></dd>
            }
            @for (f of extraFields(); track f.key) {
              <dt>{{ f.key }}</dt>
              <dd class="vfm__unknown-dd">
                <i
                  class="pi pi-exclamation-circle vfm__unknown"
                  [pTooltip]="texts.unknownFieldTooltip"
                  [attr.aria-label]="texts.unknownFieldTooltip"
                  role="img"
                ></i>
                <code>{{ f.value }}</code>
              </dd>
            }
          </dl>
        }
      }

      @if (hasInitialPrompt()) {
        <p class="sm-block__sub">{{ texts.sections.initialPrompt }}</p>
        <!--
          `[innerHTML]` is the SafeHtml output of MarkdownRenderer.render()
          (markdown-it html:false + DOMPurify) over project-controlled
          frontmatter, same trust + sanitisation path as the body card.
          `smMarkdownImages` activates the click-to-load image placeholders
          inside that inert HTML (no request fires until a click).
        -->
        <blockquote
          smMarkdownImages
          class="vfm__quote"
          data-testid="vendor-frontmatter-initial-prompt-quote"
          [innerHTML]="initialPromptHtml()"
        ></blockquote>
      }
      }
    </sm-collapsible-section>

  </div>
}