=== ACTIVE INDEX ASSET REFERENCES ===
9:  <link rel="stylesheet" href="assets/css/panel.runtime.fix.20260408_1.css?v=20260409_ui4" />
242:  <script src="assets/js/panel.runtime.fix.20260408_1.js?v=20260409_ui4"></script>

=== ACTIVE panel.js TREE LOGIC ===
24:  phases: [],
30:  openPhases: new Set(),
33:    phaseId: null,
35:    bucket: null,
39:    subcategory: null
48:      fetch('data/panel_canonical_tree.json').then(r => r.json()),
55:    G.phases = hub.phases || [];
65:    document.getElementById('dp-tree').innerHTML =
66:      '<div class="tree-err">Load error: ' + e.message + '</div>';
70:function phaseOfCat(cat) {
72:  if (!m) return 'phase-01';
73:  return 'phase-' + String(parseInt(m[0])).padStart(2, '0');
76:function catsForPhase(phaseId) {
77:  return G.cats.filter(c => phaseOfCat(c) === phaseId);
97:    String(r.component || r.subcategory || r.label || '').toLowerCase().includes(String(cardId || '').toLowerCase())
104:function countsForStage(phaseId) {
105:  const rows = (G.data.runtime?.runtime_snapshot || []).filter(r => String(r.deployment_stage || '').toLowerCase() === String(phaseId || '').toLowerCase());
120:  html += '<div class="tree-block"><div class="tree-block-title">Deployment Stages</div>';
121:  for (const ph of G.phases) {
122:    const isOpen = G.openPhases.has(ph.id);
123:    const phActive = G.sel.phaseId === ph.id ? ' ph-active' : '';
143:            const bkActive = G.sel.catId === cat.id && G.sel.bucket === bk ? ' bk-active' : '';
154:  html += '<div class="tree-block"><div class="tree-block-title">Content Index</div>';
164:  document.getElementById('dp-tree').innerHTML = html;
172:      const wasOpen = G.openPhases.has(id);
173:      G.openPhases = wasOpen ? new Set() : new Set([id]);
177:        G.sel.bucket = null;
179:      G.sel.phaseId = id;
188:      G.sel.phaseId = el.dataset.ph;
190:      G.sel.bucket = null;
191:      G.openPhases = new Set([el.dataset.ph]);
200:      G.sel.phaseId = el.dataset.ph;
202:      G.sel.bucket = el.dataset.bk;
203:      G.openPhases = new Set([el.dataset.ph]);
215:      G.sel.subcategory = null;
230:      el.innerHTML = renderSectionWorkspace(nav, sec);
235:  if (!G.sel.phaseId) { el.innerHTML = renderSummary(); return; }
236:  const ph = G.phases.find(p => p.id === G.sel.phaseId);
239:  if (!G.sel.bucket) { el.innerHTML = renderCatOverview(ph, cat); return; }
240:  el.innerHTML = renderBucketDetail(ph, cat, G.sel.bucket);
252:    <div class="sum-sub">Select a phase in the tree to navigate. Canon leads. Runtime validates. UI renders.</div>
298:function renderSectionWorkspace(nav, sec) {
305:        <span class="item-badge st-${String(st).toLowerCase()}">${st}</span>
318:      <div class="ph-ov-sub">Workspace section driven by panel_content_index + panel_canonical_tree.</div>
330:    <div class="ws-grid">${cards || '<div class="tree-err">No cards registered for this section.</div>'}</div>
334:function renderBucketDetail(ph, cat, bucket) {
335:  const phIdx = G.phases.findIndex(p => p.id === ph.id);
336:  const bkIdx = BUCKETS.indexOf(bucket);
338:  const items = docs.map(doc => {
340:    const cls = st === 'PASS' ? 'item-ok' : st === 'FAIL' ? 'item-fail' : '';
342:    return `<div class="item-card ${cls}">
343:      <span class="item-ico">${ico}</span>
344:      <div class="item-body">
345:        <div class="item-title">${doc.title}</div>
346:        <div class="item-role">${doc.role || ''}</div>
347:        <div class="item-ev">${doc.path || ''}</div>
349:      <span class="item-badge st-${st.toLowerCase()}">${st}</span>
353:  const phPct = Math.round((phIdx / G.phases.length) * 100);
357:    <span class="det-bc">${ph.step} / ${cat.title} / <b>${bucket}</b></span>
358:    <div class="det-pills"><span class="pl pl-v">${ph.step}</span><span class="pl pl-bk">${bucket}</span></div>
361:    <div class="det-hd-top"><span class="det-phase">${ph.step}</span><span class="det-sep">/</span><span class="det-cat">${cat.title}</span></div>
363:    <div class="det-sub">${BUCKET_DESC[bucket]}</div>
367:      <div class="prog-lbl">Phase ${phIdx + 1} of ${G.phases.length}</div>
374:      <div class="prog-nums">${bucket}</div>
377:  <div class="det-items">
378:    <div class="items-label">Authority Documents — ${cat.title}</div>
379:    ${items || '<div class="tree-err">No documents registered for this category.</div>'}
388:    (r.label || r.subcategory || r.component || '').toLowerCase().includes(name)
415:    const ph10 = G.phases.find(p => p.id === 'phase-10');
417:    G.openPhases.add('phase-10');
418:    G.sel.phaseId = 'phase-10';
419:    G.sel.catId = null; G.sel.bucket = null;
442:/* ── CAT CARD CLICK (phase overview) ─────────────── */
447:    G.sel.phaseId = cc.dataset.ph;
449:    G.sel.bucket = null;
450:    G.openPhases.add(cc.dataset.ph);
456:    G.sel.phaseId = bc.dataset.ph;
458:    G.sel.bucket = bc.dataset.bk;
459:    G.openPhases.add(bc.dataset.ph);

=== ACTIVE panel.runtime.fix TREE LOGIC ===
67:  state.openPhases = new Set();
72:  function phaseOfCategory(cat) {
75:    if (!m) return normStageKey("phase-01");
76:    return normStageKey("phase-" + String(parseInt(m[0], 10)).padStart(2, "0"));
79:  function categoriesForPhase(phaseId) {
81:    const key = normStageKey(phaseId);
87:        return normStageKey(doc && doc.phase) === key;
90:      const badgeHit = phaseOfCategory(cat) === key;
102:  function phaseStatusClass(phaseId) {
103:    const roll = stageRollup(phaseId);
110:    const phases = (state.hubIndex && Array.isArray(state.hubIndex.phases)) ? state.hubIndex.phases : [];
111:    if (!phases.length) {
112:      els.stageNav.innerHTML = '<div class="tree-empty">MISSING hub phases / hubIndex binding</div>';
120:    function renderBuckets(phaseId, catId) {
122:        '<div class="tree-buckets">',
123:          BUCKETS.map(function (bucket) {
125:              '<div class="tree-bucket ' + (state.selectedBucket === bucket && state.selectedCategory === catId ? 'active' : '') + '">',
126:                '<button type="button" class="tree-bucket-row" data-phase-id="' + phaseId + '" data-cat-id="' + catId + '" data-bucket="' + bucket + '">',
127:                  '<span class="tree-bucket-title">' + BUCKET_LABELS[bucket] + '</span>',
136:    const html = phases.map(function (phase) {
137:      const phaseId = normStageKey(phase.id || phase.stage_key || "");
138:      const isOpen = state.openPhases.has(phaseId);
139:      const cats = categoriesForPhase(phaseId);
140:      const phaseBadgeClass = phaseStatusClass(phaseId);
141:      const phaseNum = String(phase.step || "").replace("Phase ", "");
144:        '<div class="tree-phase ' + (isOpen ? 'open' : '') + '">',
145:          '<button type="button" class="tree-phase-row ' + (state.selectedStage === phaseId ? 'active' : '') + '" data-phase-id="' + phaseId + '">',
146:            '<span class="tree-arrow">' + (isOpen ? '▾' : '▸') + '</span>',
147:            '<span class="tree-phase-num">' + phaseNum + '</span>',
148:            '<span class="tree-phase-title">' + (phase.name || phase.label || phaseId) + '</span>',
149:            '<span class="tree-phase-dot ' + phaseBadgeClass + '"></span>',
152:            '<div class="tree-cats">',
156:                const collapseCategory = cats.length === 1 && sameLabel(cat.title, phase.name);
158:                if (collapseCategory) {
160:                    '<div class="tree-cat tree-cat-collapsed open">',
161:                      renderBuckets(phaseId, catId),
167:                  '<div class="tree-cat ' + (catOpen ? 'open' : '') + '">',
168:                    '<button type="button" class="tree-cat-row ' + (state.selectedCategory === catId ? 'active' : '') + '" data-phase-id="' + phaseId + '" data-cat-id="' + catId + '">',
169:                      '<span class="tree-arrow">' + (catOpen ? '▾' : '▸') + '</span>',
170:                      '<span class="tree-cat-title">' + (cat.title || catId) + '</span>',
172:                    (catOpen ? renderBuckets(phaseId, catId) : ''),
187:    document.querySelectorAll(".tree-phase-row").forEach(function (btn) {
189:        const phaseId = normStageKey(btn.dataset.phaseId);
190:        const wasOpen = state.openPhases.has(phaseId);
192:        state.openPhases = wasOpen ? new Set() : new Set([phaseId]);
199:              return cat && phaseOfCategory(cat) === phaseId;
208:        state.selectedStage = phaseId;
210:        selectStage(phaseId);
214:    document.querySelectorAll(".tree-cat-row").forEach(function (btn) {
217:        const phaseId = normStageKey(btn.dataset.phaseId);
220:        state.openPhases = new Set([phaseId]);
223:        state.selectedStage = phaseId;
228:        selectStage(phaseId);
232:    document.querySelectorAll(".tree-bucket-row").forEach(function (btn) {
235:        const phaseId = normStageKey(btn.dataset.phaseId);
238:        state.openPhases = new Set([phaseId]);
241:        state.selectedStage = phaseId;
243:        state.selectedBucket = btn.dataset.bucket || null;
246:        selectStage(phaseId);
449:    const items = ((state.runtimeStatus && state.runtimeStatus.runtime_snapshot) || []);
451:      els.pipelineRuntimeCount.textContent = items.length + " runtime rows";
454:    if (!items.length) {
455:      els.pipelineRuntimeBoard.innerHTML = '<div class="pipeline-item"><h4>No runtime rows</h4><p>Status is MISSING.</p></div>';
458:    els.pipelineRuntimeBoard.innerHTML = items.slice(0, 24).map(function (item) {
459:      const status = runtimeStatusOf(item);
461:        '<div class="pipeline-item">',
462:        '<h4>' + titleize(item.deployment_stage || "runtime") + ' / ' + titleize(item.technology || item.subcategory || "item") + '</h4>',
463:        '<p>Kind: ' + titleize(item.row_kind || "runtime_row") + '</p>',
466:        '<span class="pill">' + valueOrDash(item.progress_pct, "%") + '</span>',
500:  function selectedPhaseObject() {
501:    const phases = (state.hubIndex && Array.isArray(state.hubIndex.phases)) ? state.hubIndex.phases : [];
502:    return phases.find(function (p) {
519:    if (els.selectedStageTotal) els.selectedStageTotal.innerHTML = ((cat.docs || []).length) + ' docs<br>in category';
520:    if (els.selectedStageDonut) els.selectedStageDonut.innerHTML = donutMarkup(0, "category");
524:        return '<li><span>' + (doc.title || doc.label || doc.id || "item") + '</span><span class="pill">' + (doc.type || "doc") + '</span></li>';
529:  function renderCenterBucket(ph, cat, bucket) {
530:    if (els.selectedStageName) els.selectedStageName.textContent = (cat.title || ph.name || "Category") + " / " + titleize(bucket);
531:    if (els.selectedStageDesc) els.selectedStageDesc.textContent = "Bucket detail from canonical category documents.";
533:    if (els.selectedStageTotal) els.selectedStageTotal.innerHTML = docs.length + ' docs<br>in bucket view';
534:    if (els.selectedStageDonut) els.selectedStageDonut.innerHTML = donutMarkup(0, titleize(bucket));
539:          '<span>' + (doc.title || doc.label || doc.id || "item") + '</span>',
548:    const ph = selectedPhaseObject();
567:    const items = ((state.contentIndex && state.contentIndex.content_index) || []);
568:    const navItem = items.find(function (item) {
569:      return normStageKey(item.stage_key) === state.selectedStage;
633:        getJsonOptional("subcategory_pipelines.json"),
656:      const firstPhase = ((state.hubIndex && state.hubIndex.phases) || [])[0] || null;
660:        state.openPhases = new Set([firstPhaseKey]);