=== JS markers ===
8:    heroTitle: document.getElementById("hero-title"),
9:    heroSubtitle: document.getElementById("hero-subtitle"),
10:    stageOrderBadge: document.getElementById("stage-order-badge"),
11:    selectedStageName: document.getElementById("selected-stage-name"),
12:    selectedStageDesc: document.getElementById("selected-stage-desc"),
13:    selectedStageTotal: document.getElementById("selected-stage-total"),
14:    selectedStageDonut: document.getElementById("selected-stage-donut"),
15:    selectedRuntimeBadge: document.getElementById("selected-runtime-badge"),
16:    selectedPipelineSteps: document.getElementById("selected-pipeline-steps"),
144:          '<button type="button" class="tree-phase-row ' + (state.selectedStage === phaseId ? 'active' : '') + '" data-phase-id="' + phaseId + '">',
167:                    '<button type="button" class="tree-cat-row ' + (state.selectedCategory === catId ? 'active' : '') + '" data-phase-id="' + phaseId + '" data-cat-id="' + catId + '">',
186:    document.querySelectorAll(".tree-phase-row").forEach(function (btn) {
209:        selectStage(phaseId);
213:    document.querySelectorAll(".tree-cat-row").forEach(function (btn) {
227:        selectStage(phaseId);
245:        selectStage(phaseId);
539:    function renderCenterPhase(ph) {
596:    function renderCanonicalSelection() {
612:      renderCenterPhase(ph);
616:    function selectStage(stageKey) {
627:          if (els.heroTitle) els.heroTitle.textContent = ph ? (ph.name || titleize(state.selectedStage)) : titleize(state.selectedStage);
628:          if (els.heroSubtitle) {
629:            els.heroSubtitle.textContent = "Canonical phase view from hub_index. Runtime bridge is not applied at phase namespace.";
631:          if (els.stageOrderBadge) {
632:            els.stageOrderBadge.textContent = ph && ph.order ? ("PHASE " + ph.order) : "PHASE";
634:          if (els.selectedRuntimeBadge) {
635:            setBadge(els.selectedRuntimeBadge, "N/A", "CANON");
638:          renderCanonicalSelection();
652:        if (els.heroTitle) els.heroTitle.textContent = navItem ? navItem.label : titleize(state.selectedStage);
653:        if (els.heroSubtitle) {
654:          els.heroSubtitle.textContent = "Runtime-backed stage view. Contract and runtime data are rendered from panel exports only.";
656:        if (els.stageOrderBadge) {
657:          els.stageOrderBadge.textContent = navItem ? ("ORDER " + navItem.deployment_order) : "—";
677:        if (els.selectedRuntimeBadge) {
679:            setBadge(els.selectedRuntimeBadge, runtimeStatusOf(rollup), runtimeStatusOf(rollup));
681:            setBadge(els.selectedRuntimeBadge, "MISSING", "N/A");
696:      if (els.stageOrderBadge) {
697:        els.stageOrderBadge.textContent = navItem ? ("ORDER " + navItem.deployment_order) : "—";
717:      if (els.selectedRuntimeBadge) {
719:          setBadge(els.selectedRuntimeBadge, runtimeStatusOf(rollup), runtimeStatusOf(rollup));
721:          setBadge(els.selectedRuntimeBadge, "MISSING", "N/A");
731:      renderCanonicalSelection();

=== PHP markers ===
39:          <h1 id="hero-title">Devon runtime panel</h1>
40:          <p id="hero-subtitle">Canonical layer defines structure. Operational layer exposes observable runtime.</p>
76:            <span id="stage-order-badge" class="badge">—</span>
78:          <h2 id="selected-stage-name">—</h2>
79:          <p id="selected-stage-desc" class="muted">—</p>
85:            <span id="selected-stage-total" class="badge badge-violet">—</span>
87:          <div id="selected-stage-donut" class="donut-wrap"></div>
93:            <span id="selected-runtime-badge" class="badge">—</span>
95:          <ul id="selected-pipeline-steps" class="step-list"></ul>

=== JS asset references in panel/index.php ===
242:  <script src="assets/js/panel.runtime.fix.20260408_1.js?v=20260409_ui4"></script>