===== /home/yeff/public_html/devon/panel/index.php =====
<?php require_once __DIR__ . "/../auth_guard.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Devon Operator Panel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="../assets/img/favicon-devon.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
  <link rel="stylesheet" href="assets/css/panel.css?v=20260409">
</head>
<body>
<div id="dp-shell">

  <aside id="dp-left">
    <div id="dp-brand">
      <img src="../assets/img/logodevon-white.png" alt="Devon" id="dp-logo">
      <div>
        <div id="dp-brand-name">Devon</div>
        <div id="dp-brand-sub">Operator Panel</div>
      </div>
    </div>
    <div class="tree-label">Phase Registry</div>
    <nav id="dp-tree"></nav>
    <div id="dp-footer"></div>
  </aside>

  <main id="dp-main">
    <div id="dp-detail"></div>
  </main>

  <aside id="dp-right">
    <button class="ib" data-view="data/panel_manifest.json" title="Manifest">
      <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/></svg>
      <span>Manifest</span>
    </button>
    <button class="ib" data-view="data/panel_data_contract.json" title="Data Contract">
      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
      <span>Contract</span>
    </button>
    <button class="ib" data-view="data/host_runtime.json" title="Host Runtime">
      <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
      <span>Host</span>
    </button>
    <button class="ib" data-view="data/docker_runtime.json" title="Docker Runtime">
      <svg viewBox="0 0 24 24"><rect x="4" y="8" width="4" height="3" rx="0.5"/><rect x="9" y="8" width="4" height="3" rx="0.5"/><rect x="14" y="8" width="4" height="3" rx="0.5"/><rect x="4" y="5" width="4" height="3" rx="0.5"/><rect x="9" y="5" width="4" height="3" rx="0.5"/><path d="M2 13h20"/></svg>
      <span>Docker</span>
    </button>
    <button class="ib" data-view="data/runtime_status.json" title="Pipeline Runtime">
      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v4M8.5 17.5L12 11M15.5 17.5L12 11"/></svg>
      <span>Pipeline</span>
    </button>
    <div class="ib-sep"></div>
    <button class="ib" id="btn-docs" title="Documentation Hub">
      <svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
      <span>Docs Hub</span>
    </button>
    <button class="ib" id="btn-monitor" title="Monitoring — Phase 10">
      <svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      <span>Monitor</span>
    </button>
  </aside>

  <div id="dp-drawer">
    <div id="dp-drawer-header">
      <span id="dp-drawer-title">Data Viewer</span>
      <button id="dp-drawer-close">✕</button>
    </div>
    <pre id="dp-drawer-pre">Select a data source.</pre>
  </div>

</div>
<script src="assets/js/panel.js?v=20260409"></script>
</body>
</html>

===== /home/yeff/public_html/devon/panel/index.html =====
<?php require_once __DIR__ . "/../auth_guard.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Devon Operator Panel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" href="../assets/img/favicon-devon.png" />
  <link rel="stylesheet" href="assets/css/panel.runtime.fix.20260408_1.css?v=1" />
</head>
<body>
  <div class="op-shell">
    <aside class="op-sidebar">
      <div class="brand">
        <img class="brand-logo" src="../assets/img/logodevon-white.png" alt="Devon" />
        <span class="brand-subtitle">Operator Panel</span>
      </div>

      <section class="side-block">
        <div class="side-label">Project Progress</div>
        <div id="project-donut" class="sidebar-donut-wrap"></div>
      </section>

      <section class="side-block">
        <div class="side-label">Global Status</div>
        <div id="global-pills" class="pill-row pill-row-compact"></div>
      </section>

      <section class="side-block">
        <div class="side-label">Deployment Stages</div>
        <nav id="stage-nav" class="stage-nav"></nav>
      </section>
    </aside>

    <main class="op-main">
      <header class="hero">
        <div>
          <div class="eyebrow">DEPLOYMENT MONITORING</div>
          <h1 id="hero-title">Devon runtime panel</h1>
          <p id="hero-subtitle">Canonical layer defines structure. Operational layer exposes observable runtime.</p>
        </div>

        <div class="hero-actions">
          <button id="btn-open-manifest" class="btn btn-primary" type="button">Manifest</button>
          <button id="btn-open-contract" class="btn btn-secondary" type="button">Data Contract</button>
          <button id="btn-open-host" class="btn btn-secondary" type="button">Host Runtime</button>
          <button id="btn-open-docker" class="btn btn-secondary" type="button">Docker Runtime</button>
          <button id="btn-open-runtime" class="btn btn-secondary" type="button">Pipeline Runtime</button>
        </div>
      </header>

      <section class="layer-grid">
        <article class="card layer-card">
          <div class="card-top">
            <span class="card-title">Canonical Layer</span>
            <span class="badge badge-violet">structure</span>
          </div>
          <ul class="layer-list">
            <li>Deployment order</li>
            <li>Architecture and cards</li>
            <li>Contracts and evidence schema</li>
            <li>Canonical matrix rows</li>
          </ul>
        </article>

        <article class="card layer-card">
          <div class="card-top">
            <span class="card-title">Operational Layer</span>
            <span class="badge badge-blue">runtime</span>
          </div>
          <ul class="layer-list">
            <li>Host telemetry</li>
            <li>Docker and containers</li>
            <li>Pipeline execution status</li>
            <li>Observable evidence only</li>
          </ul>
        </article>
      </section>

      <section class="top-grid">
        <article class="card stat-card">
          <div class="card-top">
            <span class="card-title">Selected Stage</span>
            <span id="stage-order-badge" class="badge">—</span>
          </div>
          <h2 id="selected-stage-name">—</h2>
          <p id="selected-stage-desc" class="muted">—</p>
        </article>

        <article class="card stat-card">
          <div class="card-top">
            <span class="card-title">Operational Stage Completion</span>
            <span id="selected-stage-total" class="badge badge-violet">—</span>
          </div>
          <div id="selected-stage-donut" class="donut-wrap"></div>
        </article>

        <article class="card stat-card">
          <div class="card-top">
            <span class="card-title">Operational Pipeline</span>
            <span id="selected-runtime-badge" class="badge">—</span>
          </div>
          <ul id="selected-pipeline-steps" class="step-list"></ul>
        </article>

        <article class="card stat-card">
          <div class="card-top">
            <span class="card-title">Canonical Coverage</span>
            <span id="canon-coverage-badge" class="badge badge-violet">—</span>
          </div>
          <div id="canon-coverage-donut" class="donut-wrap"></div>
          <div id="canon-unmapped-list" class="canon-unmapped-list"></div>
        </article>

        <article id="authority-sources-card" class="card stat-card">
          <div class="card-top">
            <span class="card-title">Authority Sources</span>
            <span id="authority-doc-count" class="badge badge-blue">—</span>
          </div>
          <div id="authority-doc-list" class="doc-link-list"></div>
        </article>

      </section>

      <section class="runtime-grid">
        <article class="card runtime-card">
          <div class="card-top">
            <span class="card-title">Host Runtime Overview</span>
            <span id="host-status-badge" class="badge">—</span>
          </div>
          <div id="host-runtime-grid" class="mini-metric-grid"></div>
        </article>

        <article class="card runtime-card">
          <div class="card-top">
            <span class="card-title">Docker Runtime Overview</span>
            <span id="docker-status-badge" class="badge">—</span>
          </div>
          <div id="docker-runtime-grid" class="mini-metric-grid"></div>
        </article>

        <article class="card runtime-card">
          <div class="card-top">
            <span class="card-title">Pipeline Runtime Board</span>
            <span id="pipeline-runtime-count" class="badge badge-blue">—</span>
          </div>
          <div id="pipeline-runtime-board" class="pipeline-board"></div>
        </article>
      </section>

      <section class="workspace-grid">
        <article class="card workspace-card">
          <div class="card-top">
            <span class="card-title">Observed Technologies</span>
            <span id="subcat-count" class="badge">—</span>
          </div>
          <div id="subcategory-grid" class="subcategory-grid"></div>
        </article>

        <article class="card workspace-card">
          <div class="card-top">
            <span class="card-title">Canonical Evidence Rows</span>
            <span id="row-count" class="badge badge-blue">—</span>
          </div>
          <div id="row-table" class="row-table"></div>
        </article>


      </section>
    </main>

    <aside id="data-viewer-modal" class="op-drawer">
      <section class="drawer-card">
        <div class="card-top">
          <span class="card-title">Canon / Data Viewer</span>
          <span id="drawer-label" class="badge badge-violet">secondary</span>
        </div>
        <pre id="json-viewer" class="json-viewer">Select a JSON source.</pre>
      </section>
    </aside>
  </div>

  <script src="assets/js/panel.runtime.fix.20260408_1.js?v=1"></script>


</body>
</html>

===== /home/yeff/public_html/devon/docs/index.php =====
<?php require_once __DIR__ . "/../auth_guard.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Devon Documentation Hub</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" href="../assets/img/favicon-devon.png" />
  <style>
    :root{
      --bg:#07101f;
      --bg-2:#0b1730;
      --panel:#0f1d3d;
      --panel-2:#13264f;
      --line:rgba(138,167,255,.18);
      --line-2:rgba(138,167,255,.28);
      --text:#eef3ff;
      --muted:#9fb0dc;
      --soft:#c8d3f4;
      --blue:#6ea8ff;
      --cyan:#6be7da;
      --violet:#9a8cff;
      --amber:#ffcf70;
      --green:#6fe3a3;
      --danger:#ff8d8d;
      --shadow:0 18px 50px rgba(0,0,0,.28);
      --radius:20px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:
      radial-gradient(circle at 20% 0%, rgba(60,112,255,.14), transparent 30%),
      radial-gradient(circle at 100% 0%, rgba(107,231,218,.10), transparent 28%),
      linear-gradient(180deg,#06101f 0%, #071223 25%, #07101f 100%);
      color:var(--text);
      font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      min-height:100%;
    }
    a{color:inherit;text-decoration:none}
    button{font:inherit}

    .shell{
      display:grid;
      grid-template-columns:290px minmax(0,1fr) 360px;
      min-height:100vh;
      gap:0;
    }

    .sidebar{
      border-right:1px solid var(--line);
      background:rgba(4,10,22,.72);
      backdrop-filter:blur(14px);
      padding:22px 16px 24px;
      position:sticky;
      top:0;
      height:100vh;
      overflow-y:auto;
        overflow-x:hidden;
        min-width:0;
    }

    .main{
      min-width:0;
      padding:24px;
    }

    .rail{
      border-left:1px solid var(--line);
      background:rgba(5,11,24,.48);
      padding:24px 18px;
      position:sticky;
      top:0;
      height:100vh;
      overflow-y:auto;
        overflow-x:hidden;
        min-width:0;
    }

    .sidebar,
    .rail{
      scrollbar-width:thin;
      scrollbar-color:rgba(138,167,255,.22) transparent;
    }
    .sidebar::-webkit-scrollbar,
    .rail::-webkit-scrollbar{
      width:10px;
    }
    .sidebar::-webkit-scrollbar-track,
    .rail::-webkit-scrollbar-track{
      background:transparent;
    }
    .sidebar::-webkit-scrollbar-thumb,
    .rail::-webkit-scrollbar-thumb{
      background:rgba(138,167,255,.22);
      border-radius:999px;
    }

    .brand{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:flex-start;
      margin-bottom:20px;
    }
    .brand-logo{
      display:block;
      width:190px;
      max-width:100%;
      height:auto;
    }
    .brand-copy h1{
      font-size:17px;
      margin:0 0 2px;
      letter-spacing:.01em;
    }
    .brand-copy p{
      margin:0;
      color:var(--muted);
      font-size:12px;
    }

    .block{
      margin:0 0 18px;
    }
    .block-title{
      color:var(--muted);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.16em;
      margin:0 0 10px;
    }

    .tree{
      display:grid;
      gap:12px;
        min-width:0;
    }
    .tree-node{
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(16,31,64,.92),rgba(11,24,49,.92));
      border-radius:18px;
      padding:14px;
        min-width:0;
        overflow:hidden;
      box-shadow:var(--shadow);
    }
    .tree-head{
      display:flex;
      align-items:flex-start;
        min-width:0;
      justify-content:space-between;
      gap:10px;
      cursor:pointer;
    }
    .tree-head-left{
        min-width:0;
        flex:1 1 auto;
      }
    .tree-title{
      font-size:15px;
      font-weight:700;
      margin:0 0 4px;
        line-height:1.25;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
    .tree-sub{
      color:var(--muted);
      font-size:12px;
        line-height:1.45;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
    .tree-badge{
      border:1px solid var(--line-2);
      color:var(--soft);
      padding:4px 9px;
      border-radius:999px;
      font-size:11px;
      white-space:nowrap;
      background:rgba(15,29,61,.8);
        flex:none;
    }
    .tree-children{
      display:none;
      padding-top:10px;
      margin-top:10px;
      border-top:1px solid rgba(138,167,255,.10);
      gap:8px;
      grid-template-columns:1fr;
        min-width:0;
    }
    .tree-node.open .tree-children{display:grid}
    .tree-doc{
      width:100%;
      text-align:left;
      border:1px solid var(--line);
      background:#0b1730;
      color:var(--text);
      border-radius:14px;
      padding:12px;
        min-width:0;
        overflow:hidden;
      cursor:pointer;
    }
    .tree-doc small{
      display:block;
      color:var(--muted);
      margin-top:4px;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
    .tree-doc.active{
      border-color:rgba(142,162,255,.6);
      box-shadow:0 0 0 1px rgba(142,162,255,.18) inset;
      background:#11214a;
    }

    .hero{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
    }
    .eyebrow{
      color:var(--blue);
      text-transform:uppercase;
      letter-spacing:.18em;
      font-size:11px;
      margin:0 0 10px;
    }
    .hero h2{
      margin:0 0 8px;
      font-size:42px;
      line-height:1.02;
      letter-spacing:-.03em;
    }
    .hero p{
      margin:0;
      color:var(--muted);
      max-width:880px;
      font-size:17px;
    }

    .hero-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .btn{
      border:1px solid var(--line);
      background:rgba(12,22,48,.86);
      color:var(--text);
      padding:11px 14px;
      border-radius:14px;
      font-weight:600;
      box-shadow:var(--shadow);
    }

===== /home/yeff/public_html/devon/docs/index.html =====
<?php require_once __DIR__ . "/../auth_guard.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Devon Documentation Hub</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" href="../assets/img/favicon-devon.png" />
  <style>
    :root{
      --bg:#07101f;
      --bg-2:#0b1730;
      --panel:#0f1d3d;
      --panel-2:#13264f;
      --line:rgba(138,167,255,.18);
      --line-2:rgba(138,167,255,.28);
      --text:#eef3ff;
      --muted:#9fb0dc;
      --soft:#c8d3f4;
      --blue:#6ea8ff;
      --cyan:#6be7da;
      --violet:#9a8cff;
      --amber:#ffcf70;
      --green:#6fe3a3;
      --danger:#ff8d8d;
      --shadow:0 18px 50px rgba(0,0,0,.28);
      --radius:20px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:
      radial-gradient(circle at 20% 0%, rgba(60,112,255,.14), transparent 30%),
      radial-gradient(circle at 100% 0%, rgba(107,231,218,.10), transparent 28%),
      linear-gradient(180deg,#06101f 0%, #071223 25%, #07101f 100%);
      color:var(--text);
      font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      min-height:100%;
    }
    a{color:inherit;text-decoration:none}
    button{font:inherit}

    .shell{
      display:grid;
      grid-template-columns:290px minmax(0,1fr) 360px;
      min-height:100vh;
      gap:0;
    }

    .sidebar{
      border-right:1px solid var(--line);
      background:rgba(4,10,22,.72);
      backdrop-filter:blur(14px);
      padding:22px 16px 24px;
      position:sticky;
      top:0;
      height:100vh;
      overflow-y:auto;
        overflow-x:hidden;
        min-width:0;
    }

    .main{
      min-width:0;
      padding:24px;
    }

    .rail{
      border-left:1px solid var(--line);
      background:rgba(5,11,24,.48);
      padding:24px 18px;
      position:sticky;
      top:0;
      height:100vh;
      overflow-y:auto;
        overflow-x:hidden;
        min-width:0;
    }

    .sidebar,
    .rail{
      scrollbar-width:thin;
      scrollbar-color:rgba(138,167,255,.22) transparent;
    }
    .sidebar::-webkit-scrollbar,
    .rail::-webkit-scrollbar{
      width:10px;
    }
    .sidebar::-webkit-scrollbar-track,
    .rail::-webkit-scrollbar-track{
      background:transparent;
    }
    .sidebar::-webkit-scrollbar-thumb,
    .rail::-webkit-scrollbar-thumb{
      background:rgba(138,167,255,.22);
      border-radius:999px;
    }

    .brand{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:flex-start;
      margin-bottom:20px;
    }
    .brand-logo{
      display:block;
      width:190px;
      max-width:100%;
      height:auto;
    }
    .brand-copy h1{
      font-size:17px;
      margin:0 0 2px;
      letter-spacing:.01em;
    }
    .brand-copy p{
      margin:0;
      color:var(--muted);
      font-size:12px;
    }

    .block{
      margin:0 0 18px;
    }
    .block-title{
      color:var(--muted);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.16em;
      margin:0 0 10px;
    }

    .tree{
      display:grid;
      gap:12px;
        min-width:0;
    }
    .tree-node{
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(16,31,64,.92),rgba(11,24,49,.92));
      border-radius:18px;
      padding:14px;
        min-width:0;
        overflow:hidden;
      box-shadow:var(--shadow);
    }
    .tree-head{
      display:flex;
      align-items:flex-start;
        min-width:0;
      justify-content:space-between;
      gap:10px;
      cursor:pointer;
    }
    .tree-head-left{
        min-width:0;
        flex:1 1 auto;
      }
    .tree-title{
      font-size:15px;
      font-weight:700;
      margin:0 0 4px;
        line-height:1.25;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
    .tree-sub{
      color:var(--muted);
      font-size:12px;
        line-height:1.45;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
    .tree-badge{
      border:1px solid var(--line-2);
      color:var(--soft);
      padding:4px 9px;
      border-radius:999px;
      font-size:11px;
      white-space:nowrap;
      background:rgba(15,29,61,.8);
        flex:none;
    }
    .tree-children{
      display:none;
      padding-top:10px;
      margin-top:10px;
      border-top:1px solid rgba(138,167,255,.10);
      gap:8px;
      grid-template-columns:1fr;
        min-width:0;
    }
    .tree-node.open .tree-children{display:grid}
    .tree-doc{
      width:100%;
      text-align:left;
      border:1px solid var(--line);
      background:#0b1730;
      color:var(--text);
      border-radius:14px;
      padding:12px;
        min-width:0;
        overflow:hidden;
      cursor:pointer;
    }
    .tree-doc small{
      display:block;
      color:var(--muted);
      margin-top:4px;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
    .tree-doc.active{
      border-color:rgba(142,162,255,.6);
      box-shadow:0 0 0 1px rgba(142,162,255,.18) inset;
      background:#11214a;
    }

    .hero{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
    }
    .eyebrow{
      color:var(--blue);
      text-transform:uppercase;
      letter-spacing:.18em;
      font-size:11px;
      margin:0 0 10px;
    }
    .hero h2{
      margin:0 0 8px;
      font-size:42px;
      line-height:1.02;
      letter-spacing:-.03em;
    }
    .hero p{
      margin:0;
      color:var(--muted);
      max-width:880px;
      font-size:17px;
    }

    .hero-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .btn{
      border:1px solid var(--line);
      background:rgba(12,22,48,.86);
      color:var(--text);
      padding:11px 14px;
      border-radius:14px;
      font-weight:600;
      box-shadow:var(--shadow);
    }

