+cert_dns_names_json() {

+    local cert="$1"

+    local names name first=1

+    names="$("$OPENSSL" x509 -in "$cert" -noout -ext subjectAltName 2>/dev/null \

+        | sed -n '/DNS:/,$p' \

+        | tr ',' '\n' \

+        | sed -n 's/^[[:space:]]*DNS://p')"

+

+    printf '['

+    while IFS= read -r name; do

+        [[ -n "$name" ]] || continue

+        if [[ "$first" -eq 0 ]]; then

+            printf ','

+        fi

+        first=0

+        json_escape "$name"

+    done <<< "$names"

+    printf ']'

+}

+

+        printf ',"dns_names":'; cert_dns_names_json "$cert"

+    if ($method eq 'GET' && app_page_path($path)) {

+    if ($method eq 'GET' && $path =~ m{\A/download/ca/cert/([A-Za-z0-9_.-]+)\.crt\z}) {

+        my $name = $1;

+        return send_file($client, ca_issued_cert_path($name), 'application/x-pem-file; charset=utf-8', "$name.crt");

+    }

+sub app_page_path {

+    my ($path) = @_;

+    return $path =~ m{\A/(?:|overview|hosts|dns|work-orders|ca)\z};

+}

+

+sub ca_issued_cert_path {

+    my ($name) = @_;

+    die "unsafe certificate name\n" unless $name =~ /\A[A-Za-z0-9_.-]+\z/;

+    return ca_dir() . "/issued/$name.cert.pem";

+}

+

+    header { display: grid; grid-template-columns: minmax(180px, auto) 1fr auto; align-items: center; gap: 16px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }

+    nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; }

+    nav a { color: var(--muted); text-decoration: none; padding: 7px 10px; border-radius: 6px; white-space: nowrap; font-weight: 650; }

+    nav a:hover { color: var(--ink); background: var(--soft); }

+    nav a.active { color: var(--accent); background: #e8f0fe; }

+    .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }

+    #message { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

+    .page { display: grid; gap: 16px; }

+    .page[hidden] { display: none; }

+    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; }

+    .ca-detail { display: grid; gap: 6px; min-width: 0; }

+    .ca-fingerprint { overflow-wrap: anywhere; }

+    .ca-empty { padding: 12px 14px; }

+    .host-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }

+    .host-tools input { max-width: 240px; }

+    .modal-backdrop {

+      position: fixed;

+      inset: 0;

+      z-index: 10;

+      display: grid;

+      align-items: start;

+      justify-items: center;

+      padding: 72px 16px 24px;

+      background: rgba(21,32,51,.48);

+      overflow: auto;

+    }

+    .modal-backdrop[hidden] { display: none; }

+    .modal {

+      width: min(840px, 100%);

+      max-height: calc(100dvh - 96px);

+      overflow: auto;

+      background: var(--panel);

+      border: 1px solid var(--line);

+      border-radius: 8px;

+      box-shadow: 0 20px 60px rgba(21,32,51,.26);

+    }

+    .modal-head {

+      position: sticky;

+      top: 0;

+      z-index: 1;

+      display: flex;

+      align-items: center;

+      justify-content: space-between;

+      gap: 12px;

+      padding: 12px 14px;

+      border-bottom: 1px solid var(--line);

+      background: #fafbfc;

+    }

+    .modal-head h2 { margin: 0; font-size: 14px; }

+    .modal-close { min-width: 34px; justify-content: center; padding: 7px; }

+    .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }

+      header { grid-template-columns: 1fr; align-items: stretch; gap: 10px; }

+      .header-right { justify-content: flex-start; flex-wrap: wrap; }

+      #message { max-width: 100%; }

+      .panel-head { align-items: stretch; flex-direction: column; }

+      .host-tools { justify-content: flex-start; flex-wrap: wrap; }

+      .host-tools input { max-width: none; }

+      .modal-backdrop { padding-top: 16px; }

+      .modal { max-height: calc(100dvh - 32px); }

+      <nav aria-label="Sections">

+        <a href="/overview" data-page-link="overview">Overview</a>

+        <a href="/hosts" data-page-link="hosts">Hosts</a>

+        <a href="/dns" data-page-link="dns">DNS</a>

+        <a href="/work-orders" data-page-link="work-orders">Work Orders</a>

+        <a href="/ca" data-page-link="ca">Local CA</a>

+      </nav>

+        <span id="message" class="muted"></span>

+        <button id="refresh">Refresh</button>

+      <section class="page" id="page-overview" data-page="overview">

+        <section class="panel">

+          <div class="panel-head">

+            <h2>Overview</h2>

+            <div class="stats" id="stats"></div>

+          </div>

+          <div class="problems" id="problems"></div>

+        </section>

+      <section class="page" id="page-hosts" data-page="hosts" hidden>

+        <section class="panel">

+          <div class="panel-head">

+            <h2>Hosts</h2>

+            <div class="host-tools">

+              <input id="filter" placeholder="filter">

+              <button type="button" id="new-host">New host</button>

+            </div>

+          </div>

+          <div class="table-wrap">

+            <table>

+              <thead>

+                <tr>

+                  <th style="width: 120px">ID</th>

+                  <th style="width: 130px">hosts_ip</th>

+                  <th style="width: 130px">dns_ip</th>

+                  <th>Names</th>

+                  <th style="width: 150px">Roles</th>

+                  <th style="width: 110px">Monitoring</th>

+                  <th style="width: 90px">Status</th>

+                </tr>

+              </thead>

+              <tbody id="hosts"></tbody>

+            </table>

+          </div>

+        </section>

+      <section class="page" id="page-dns" data-page="dns" hidden>

+        <section class="toolbar">

+          <a class="linkbtn" href="/download/hosts.yaml">hosts.yaml</a>

+          <a class="linkbtn" href="/download/local-hosts.tsv">local-hosts.tsv</a>

+          <a class="linkbtn" href="/download/monitoring.json">monitoring.json</a>

+          <button id="write-tsv">Write local-hosts.tsv</button>

+        </section>

+      <section class="page" id="page-work-orders" data-page="work-orders" hidden>

+        <section class="panel">

+          <div class="panel-head">

+            <h2>Work Orders</h2>

+            <div class="stats" id="wo-stats"></div>

+          </div>

+          <div class="problems" id="work-orders"></div>

+        </section>

+      <section class="page" id="page-ca" data-page="ca" hidden>

+        <section class="panel">

+          <div class="panel-head">

+            <h2>Local Certificate Authority</h2>

+            <a class="linkbtn" href="/download/ca.crt">ca.crt</a>

+          </div>

+          <div class="problems" id="ca-status"></div>

+        </section>

+        <section class="panel">

+          <div class="panel-head">

+            <h2>Issued Certificates</h2>

+            <div class="stats" id="ca-certs-summary"></div>

+          </div>

+          <div class="table-wrap">

+            <table>

+              <thead>

+                <tr>

+                  <th style="width: 150px">Name</th>

+                  <th>DNS names</th>

+                  <th style="width: 210px">Validity</th>

+                  <th style="width: 180px">Serial</th>

+                  <th>Fingerprint</th>

+                  <th style="width: 110px">Download</th>

+                </tr>

+              </thead>

+              <tbody id="ca-certs"></tbody>

+            </table>

+          </div>

+        </section>

+    </main>

+    <div id="host-modal" class="modal-backdrop" hidden>

+      <section class="modal" role="dialog" aria-modal="true" aria-labelledby="host-modal-title">

+        <div class="modal-head">

+          <h2 id="host-modal-title">Edit host</h2>

+          <button type="button" id="close-host-modal" class="modal-close" aria-label="Close host editor">x</button>

+          <div class="span2 form-actions">

+    </div>

+    const PAGE_PATHS = {

+      '/': 'overview',

+      '/overview': 'overview',

+      '/hosts': 'hosts',

+      '/dns': 'dns',

+      '/work-orders': 'work-orders',

+      '/ca': 'ca',

+    };

+    function currentPage() {

+      return PAGE_PATHS[window.location.pathname] || 'overview';

+    }

+

+    function showPage(page, push = false) {

+      const target = page || 'overview';

+      document.querySelectorAll('[data-page]').forEach(section => {

+        section.hidden = section.dataset.page !== target;

+      });

+      document.querySelectorAll('[data-page-link]').forEach(link => {

+        link.classList.toggle('active', link.dataset.pageLink === target);

+        link.setAttribute('aria-current', link.dataset.pageLink === target ? 'page' : 'false');

+      });

+      if (push) {

+        const href = target === 'overview' ? '/overview' : '/' + target;

+        history.pushState({ page: target }, '', href);

+      }

+    }

+

+      showPage(currentPage());

+          $('ca-certs-summary').innerHTML = '';

+          $('ca-certs').innerHTML = '<tr><td colspan="6" class="muted">CA is not initialized.</td></tr>';

+        const caDays = daysUntil(status.not_after);

+          <div class="muted ca-detail">

+            <div>SHA256 <span class="mono ca-fingerprint">${escapeHtml(status.fingerprint_sha256 || '')}</span></div>

+            <div>

+              <span class="pill ${certStatusClass(caDays)}">${escapeHtml(certStatusLabel(caDays))}</span>

+              <span>${certs.length} issued certificate(s)</span>

+            </div>

+        $('ca-certs-summary').innerHTML = [

+          ['issued', certs.length],

+          ['expiring', certs.filter(cert => {

+            const days = daysUntil(cert.not_after);

+            return days !== null && days >= 0 && days <= 30;

+          }).length],

+          ['expired', certs.filter(cert => {

+            const days = daysUntil(cert.not_after);

+            return days !== null && days < 0;

+          }).length],

+        ].map(([k, v]) => `<span class="stat">${k}: ${escapeHtml(String(v))}</span>`).join('');

+        $('ca-certs').innerHTML = certs.length ? certs.map(cert => {

+          const days = daysUntil(cert.not_after);

+          const dnsNames = cert.dns_names || [];

+          const dnsHtml = dnsNames.length

+            ? dnsNames.map(name => `<span class="pill">${escapeHtml(name)}</span>`).join('')

+            : '<span class="muted">No DNS SANs reported.</span>';

+          return `<tr>

+            <td><strong>${escapeHtml(cert.name || '')}</strong></td>

+            <td>${dnsHtml}</td>

+            <td>

+              <div class="ca-detail">

+                <span class="pill ${certStatusClass(days)}">${escapeHtml(certStatusLabel(days))}</span>

+                <span class="muted">until ${escapeHtml(cert.not_after || '')}</span>

+              </div>

+            </td>

+            <td class="mono">${escapeHtml(cert.serial || '')}</td>

+            <td class="mono ca-fingerprint">${escapeHtml(cert.fingerprint_sha256 || '')}</td>

+            <td><a class="linkbtn" href="/download/ca/cert/${encodeURIComponent(cert.name || '')}.crt">crt</a></td>

+          </tr>`;

+        }).join('') : '<tr><td colspan="6" class="muted">No issued certificates.</td></tr>';

+        $('ca-certs-summary').innerHTML = '';

+        $('ca-certs').innerHTML = '<tr><td colspan="6" class="muted">Certificate list unavailable.</td></tr>';

+    function daysUntil(dateText) {

+      const time = Date.parse(dateText || '');

+      if (!Number.isFinite(time)) return null;

+      return Math.ceil((time - Date.now()) / 86400000);

+    }

+

+    function certStatusClass(days) {

+      if (days === null) return '';

+      if (days < 0) return 'bad';

+      if (days <= 30) return 'warn';

+      return 'ok';

+    }

+

+    function certStatusLabel(days) {

+      if (days === null) return 'validity unknown';

+      if (days < 0) return 'expired';

+      if (days === 0) return 'expires today';

+      return `${days}d remaining`;

+    }

+

+      openHostModal('Edit host');

+    }

+

+    function newHost() {

+      const form = $('host-form');

+      form.reset();

+      form.elements.status.value = 'active';

+      form.elements.monitoring.value = 'pending';

+      openHostModal('New host');

+    }

+

+    function openHostModal(title) {

+      $('host-modal-title').textContent = title || 'Edit host';

+      $('host-modal').hidden = false;

+      document.body.style.overflow = 'hidden';

+      $('host-form').elements.id.focus();

+    }

+

+    function closeHostModal() {

+      $('host-modal').hidden = true;

+      document.body.style.overflow = '';

+      value = value == null ? '' : String(value);

+    document.querySelectorAll('[data-page-link]').forEach(link => {

+      link.addEventListener('click', (event) => {

+        event.preventDefault();

+        showPage(link.dataset.pageLink, true);

+      });

+    });

+

+    window.addEventListener('popstate', () => showPage(currentPage()));

+

+      window.location.replace('/?logged_out=' + Date.now());

+    $('new-host').addEventListener('click', newHost);

+    $('close-host-modal').addEventListener('click', closeHostModal);

+    $('host-modal').addEventListener('click', (event) => {

+      if (event.target === $('host-modal')) closeHostModal();

+    });

+    window.addEventListener('keydown', (event) => {

+      if (event.key === 'Escape' && !$('host-modal').hidden) closeHostModal();

+    });

+        closeHostModal();

+        closeHostModal();