A guest login: temporary, look-only, revocable

Users -> Guest logins makes a throwaway user name and password, good for half
an hour by default, to hand to somebody who wants to see the console. It is a
normal account with `guest: true` and an expiry, so login, sessions and the
saved look need no special case, and it is left out of the account list, out of
"the last account can't be removed", and out of the one account an empty user
name means.

What a guest may do is one allow-list, checked in the auth middleware, rather
than a flag ~190 handlers have to remember. The list is matched by asking the
router which handler a request would reach, so it cannot drift from the routes
it names, and it is checked against the scoped path — /api/nodes/grid/procs is
/api/procs on grid — because the hub proxies to a node with a token that is
full control of that node. The node cannot tell a guest from its owner, so the
only place it can be stopped is here, before the request leaves.

A guest gets the dashboard, containers, stacks, disks, hardware, ZFS and usage,
on this machine and on any managed one, and nothing else: no terminal (attaching
is a GET, and it is a root shell), no files, no container logs or environments,
no stack files, no alert channels, no cron, no tokens, no settings, no power.

Expiry is enforced on every request and swept once a minute, so a console left
open on a visitor's phone stops within the minute rather than at their next
click; revoking signs them out at once. The console hides what a guest cannot
use and says how long is left where the power button would be.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/Shell.tsx

@@ -26,6 +26,7 @@ import { LIST_FLOOR, useRefreshMs } from './prefs'
 import Power from './Power'
 import { applyAccent } from './accents'
 import { Btn, Toasts, askText, askYes, hasUnsaved, okToLeave, toast } from './ui'
+import { fmtLeft, useCountdown } from './guest'
 
 // Inline outline icon so it matches the monochrome glyphs in the rail (emoji would be full colour).
 const FolderIcon = (
@@ -75,6 +76,10 @@ const GROUPS: Group[] = [
 type View = 'terminal' | 'widgets' | 'docker' | 'alerts' | 'services' | 'jobs' | 'updates' | 'disks' | 'hardware' | 'zfs' | 'usage' | 'files' | 'procs' | 'machines' | 'kvm' | 'users' | 'settings'
 const VIEWS: View[] = ['terminal', 'widgets', 'docker', 'alerts', 'services', 'jobs', 'updates', 'disks', 'hardware', 'zfs', 'usage', 'files', 'procs', 'machines', 'kvm', 'users', 'settings']
 const HUB_ONLY: View[] = ['machines', 'users', 'settings', 'alerts']
+// What a guest login is shown: the pages whose reads the server allows it (guestRoutes in
+// internal/api/guests.go). Every other page would be a wall of 403s, and the two that are
+// missing on purpose — Terminal and Files — are the ones a look-around login must not have.
+const GUEST_VIEWS: View[] = ['procs', 'docker', 'disks', 'usage', 'zfs', 'hardware', 'widgets']
 
 // URL hash is the source of truth for where you are: #/<machine|hub>/<view>. Back and
 // forward work, reload restores the tab, and links can point at a page on a machine.
@@ -106,6 +111,8 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
   const [remoteErr, setRemoteErr] = useState('')
   // A machine is titled by its own hostname; the name it was added under stays its identity
   // (the URL, its accent, what the hub's API calls it). See titleOf.
+  const guest = !!hubMe.guest
+  const leftMs = useCountdown(guest)
   const title = titleOf(machine, machines, hubMe.host)
   const me: Me = machine ? (remoteMe ?? { ...hubMe, host: title, load: '', version: '…', uptime: 0, reboot_needed: false }) : hubMe
   const listRate = useRefreshMs(LIST_FLOOR)
@@ -118,12 +125,13 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
   const handles = useRef<Record<string, TermHandle>>({})
 
   const reload = useCallback(async () => {
+    if (guest) { setTerms([]); return } // a guest has no shell, here or anywhere
     try {
       const list = await api.terminals()
       setTerms(list)
       setActive((a) => (a && list.some((t) => t.id === a) ? a : list[0]?.id ?? null))
     } catch (e) { setTerms([]); if (machine) setRemoteErr(e instanceof Error ? e.message : 'unreachable') }
-  }, [machine])
+  }, [machine, guest])
 
   useEffect(() => { reload() }, [reload])
 
@@ -156,16 +164,18 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
   // keep the hash in step, and follow it when the browser navigates
   const [firing, setFiring] = useState(0)
   useEffect(() => {
+    if (guest) return
     const tick = () => { if (document.visibilityState === 'visible') api.alerts().then((a) => setFiring(a.firing.length)).catch(() => {}) }
     tick(); const t = setInterval(tick, 15000); window.addEventListener('hamlab:alerts', tick)
     return () => { clearInterval(t); window.removeEventListener('hamlab:alerts', tick) }
-  }, [])
+  }, [guest])
   // The machine's colour: set on <html>, so the header stripe and the switcher pick it up.
   // Hub-only pages make no sense on a remote machine. Judged once both have settled, not while
   // the machine is changing: the URL sets the machine and the page in one go, and deciding from
   // inside the machine change read the page we were leaving — so a link from Settings to a
   // machine's Disks arrived at its Dashboard.
   useEffect(() => { if (machine && HUB_ONLY.includes(view)) setView('procs') }, [machine, view])
+  useEffect(() => { if (guest && !GUEST_VIEWS.includes(view)) setView('procs') }, [guest, view])
 
   useEffect(() => { const paint = () => applyAccent(machine ?? hubMe.host); paint(); window.addEventListener('hamlab:accents', paint); return () => window.removeEventListener('hamlab:accents', paint) }, [machine, hubMe.host])
   // The tab's title says where you are, so history entries and open tabs can be told apart.
@@ -273,13 +283,14 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
         <span className="spacer" />
         <span className="stat" title="load average, 1 · 5 · 15 min">load {me.load}</span>
         <span className={'dot ' + (online && !remoteErr ? 'ok' : 'bad')} title={remoteErr ? `${title} unreachable` : online ? 'connected' : 'disconnected'} />
-        <Power host={me.host} label={title} rebootNeeded={me.reboot_needed} />
+        {!guest && <Power host={me.host} label={title} rebootNeeded={me.reboot_needed} />}
+        {guest && <span className="badge guest" title={`this login expires ${new Date(hubMe.guest_until ?? '').toLocaleTimeString()}`}>guest · {fmtLeft(leftMs)}</span>}
         {hubMe.account && <span className="host account" title="signed in as">{hubMe.account}</span>}
         <Btn className="link" onClick={logout}>logout</Btn>
       </header>
 
       <div className="body">
-        <Rail groups={machine ? GROUPS.filter((g) => !HUB_ONLY.includes(g.id as View)) : GROUPS} view={view} badges={{ alerts: firing, settings: hubMe.update_available ? 1 : 0 }}
+        <Rail groups={GROUPS.filter((g) => (guest ? GUEST_VIEWS.includes(g.id as View) : !machine || !HUB_ONLY.includes(g.id as View)))} view={view} badges={{ alerts: firing, settings: hubMe.update_available ? 1 : 0 }}
           header={<MachineSwitcher hub={hubMe.host} hubAddr={hubMe.addr} current={machine} machines={machines} onChange={switchMachine} onManage={() => { setView('machines'); setDrawer(false) }} />}
           onView={async (id) => { if (id !== view && !(await okToLeave())) return; setView(id as View); setDrawer(false) }} />
         <div className="backdrop" onClick={() => setDrawer(false)} />