`public/index.html`

146 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>agentabrams.com — Domain Viewer</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%2328412f'/%3E%3Ctext x='8' y='12' text-anchor='middle' font-family='Georgia,serif' font-size='11' fill='%23f7f1e6'%3Ea%3C/text%3E%3C/svg%3E">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  :root { --rail: 300px; --bg:#0e1116; --panel:#161b22; --line:#2b313b; --txt:#dfe6ee; --dim:#8b95a3; --accent:#3fb6a8; }
  * { box-sizing: border-box; }
  body { margin:0; height:100vh; display:flex; font:14px/1.45 -apple-system, "SF Pro Text", Helvetica, sans-serif; background:var(--bg); color:var(--txt); }

  #rail { width:var(--rail); min-width:230px; max-width:480px; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--panel); }
  #rail header { padding:14px 14px 10px; border-bottom:1px solid var(--line); }
  #rail h1 { margin:0 0 8px; font-size:15px; font-weight:700; letter-spacing:.02em; }
  #rail h1 small { color:var(--dim); font-weight:400; }
  #q { width:100%; padding:7px 10px; border-radius:7px; border:1px solid var(--line); background:var(--bg); color:var(--txt); outline:none; }
  #q:focus { border-color:var(--accent); }
  #list { flex:1; overflow-y:auto; padding:6px; }
  .item { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:7px; cursor:pointer; color:var(--txt); user-select:none; }
  .item:hover { background:#1e2530; }
  .item.active { background:#213132; outline:1px solid var(--accent); }
  .dot { width:8px; height:8px; border-radius:50%; flex:none; background:#555; }
  .dot.up { background:#3fbf6f; }
  .dot.auth { background:#d9a53a; }
  .dot.login { background:#4a90e2; }
  .dot.down { background:#d95555; }
  .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .name b { color:var(--accent); font-weight:600; }
  .ms { color:var(--dim); font-size:11px; flex:none; }
  #foot { padding:8px 14px; border-top:1px solid var(--line); color:var(--dim); font-size:11.5px; }

  #main { flex:1; display:flex; flex-direction:column; min-width:0; }
  #bar { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--panel); }
  #cur { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #cur a { color:var(--accent); text-decoration:none; }
  #bar .sp { flex:1; }
  button { padding:6px 12px; border-radius:7px; border:1px solid var(--line); background:var(--bg); color:var(--txt); cursor:pointer; font-size:13px; }
  button:hover { border-color:var(--accent); color:var(--accent); }
  #frame { flex:1; border:0; width:100%; background:#fff; }
  #empty { flex:1; display:flex; align-items:center; justify-content:center; color:var(--dim); flex-direction:column; gap:8px; }
  #empty .big { font-size:40px; }
</style>
</head>
<body>
  <div id="rail">
    <header>
      <h1>agentabrams.com <small id="count"></small></h1>
      <input id="q" type="search" placeholder="Filter domains…" autocomplete="off">
    </header>
    <div id="list"></div>
    <div id="foot">click a domain → loads in the right panel (unified admin pw auto-applied) · dot: <span style="color:#d9a53a">Basic un/pw</span> / <span style="color:#4a90e2">login·SSO</span> / <span style="color:#3fbf6f">open (no auth)</span> / <span style="color:#d95555">down or pw rejected</span></div>
  </div>
  <div id="main">
    <div id="bar">
      <span id="cur">— pick a domain</span>
      <span class="sp"></span>
      <button id="reload" title="Reload iframe">⟳ Reload</button>
      <button id="newtab" title="Open in a new browser tab">↗ New Tab</button>
    </div>
    <div id="empty"><div class="big">🌐</div><div>Select a domain on the left to view the live site here.</div></div>
    <iframe id="frame" style="display:none"></iframe>
  </div>

<script>
let domains = [], status = {}, current = localStorage.getItem('aav-current') || '';
const list = document.getElementById('list'), q = document.getElementById('q');
const frame = document.getElementById('frame'), empty = document.getElementById('empty');
const cur = document.getElementById('cur'), count = document.getElementById('count');

// Escape untrusted text before it touches innerHTML (search filter + domain labels).
const esc = s => String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));

function render() {
  const f = q.value.trim().toLowerCase();
  const shown = domains.filter(d => d.includes(f));
  count.textContent = `(${shown.length}/${domains.length})`;
  list.innerHTML = '';
  for (const d of shown) {
    const s = status[d];
    const row = document.createElement('div');
    row.className = 'item' + (d === current ? ' active' : '');
    // authType: basic (amber) | login (blue) | open (green) | down/authFail (red).
    // Falls back to the old gated/up logic if authType is absent.
    const dotCls = !s ? '' : s.authFail ? 'down'
      : s.authType === 'basic' ? 'auth'
      : s.authType === 'login' ? 'login'
      : s.authType === 'down'  ? 'down'
      : s.authType === 'open'  ? 'up'
      : s.gated ? 'auth' : s.up ? 'up' : 'down';
    const tip = !s ? '' : s.authFail ? 'auth wall — unified pw REJECTED'
      : s.authType === 'basic' ? 'HTTP Basic un/pw wall'
      : s.authType === 'login' ? 'app login / SSO (redirect or password form)'
      : s.authType === 'open'  ? 'OPEN — no auth'
      : s.authType === 'down'  ? 'unreachable' : '';
    const ed = esc(d);
    const label = f ? ed.replace(esc(f), m => `<b>${m}</b>`) : ed;
    row.innerHTML = `<span class="dot ${dotCls}" title="${tip}"></span><span class="name">${label}</span>` +
      (s && s.up ? `<span class="ms">${s.ms}ms</span>` : s ? `<span class="ms">—</span>` : '');
    row.onclick = () => select(d);
    list.appendChild(row);
  }
}

function select(d) {
  current = d;
  localStorage.setItem('aav-current', d);
  cur.innerHTML = `<a href="https://${esc(d)}" target="_blank" rel="noopener noreferrer">${esc(d)}</a>`;
  // Load through the server-side proxy — it injects the unified admin credential
  // and strips X-Frame-Options, so every site renders in-panel without prompting.
  empty.style.display = 'none';
  frame.style.display = 'block';
  frame.src = '/site/' + d + '/';
  render();
}

document.getElementById('reload').onclick = () => { if (current) frame.src = '/site/' + current + '/'; };
document.getElementById('newtab').onclick = () => { if (current) window.open('https://' + current, '_blank', 'noopener'); };
q.oninput = render;

(async () => {
  try {
    const dres = await fetch('/api/domains');
    if (!dres.ok) throw new Error('domains HTTP ' + dres.status);
    domains = await dres.json();
    render();
    if (current && domains.includes(current)) select(current);
  } catch (e) {
    count.textContent = '(load failed — reload)';
    return;
  }
  // Health dots load after the list — probes take ~30s for 47 domains. A fetch
  // aborted mid-flight (tab closed, server restarted) must not surface as an
  // unhandled rejection; the list already rendered, dots are best-effort.
  try {
    const sres = await fetch('/api/status');
    if (!sres.ok) throw new Error('status HTTP ' + sres.status);
    const st = await sres.json();
    for (const s of st) status[s.domain] = s;
    render();
  } catch (e) { /* dots stay grey; next reload retries */ }
})();
</script>
</body>
</html>