viewer UI: 3-way status dots (Basic/login/open) + per-dot tooltip

814faa8a083bd90040dfcaa867c7314cc2c21e6e · 2026-07-25 10:18:06 -0700 · Steve Abrams

Front-end now reads authType from /api/status: amber=Basic un/pw, blue=login/SSO,
green=open(no auth), red=down/pw-rejected. Legend + hover tooltip updated so 'is this
protected, and how' is answerable at a glance.

Files touched

M public/index.html

Diff

commit 814faa8a083bd90040dfcaa867c7314cc2c21e6e
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Jul 25 10:18:06 2026 -0700

    viewer UI: 3-way status dots (Basic/login/open) + per-dot tooltip
    
    Front-end now reads authType from /api/status: amber=Basic un/pw, blue=login/SSO,
    green=open(no auth), red=down/pw-rejected. Legend + hover tooltip updated so 'is this
    protected, and how' is answerable at a glance.
---
 public/index.html | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index aa6dfc4..9ad6f20 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,6 +23,7 @@
   .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; }
@@ -48,7 +49,7 @@
       <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:#3fbf6f">up</span> / <span style="color:#d9a53a">auth-gated</span> / <span style="color:#d95555">down or pw rejected</span></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">
@@ -79,10 +80,22 @@ function render() {
     const s = status[d];
     const row = document.createElement('div');
     row.className = 'item' + (d === current ? ' active' : '');
-    const dotCls = !s ? '' : s.authFail ? 'down' : s.gated ? 'auth' : s.up ? 'up' : 'down';
+    // 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}"></span><span class="name">${label}</span>` +
+    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);

← a983e0c Fix self-XSS in domain search filter: escape filter + labels · back to Agentabrams Viewer · chore: lint (loadDomains try/catch), (session close) ea8bb3a →