Fix session-expiry redirect breaking standalone PWA out of its shell

Same fix as maintenance/reports/room-planner: manifest scope was the
app's own base path instead of "/", and AuthGate unconditionally
hard-navigated window.top to the central /login on session expiry
even when not embedded in the portal iframe — together these dropped
an installed/standalone wages PWA into the portal's framed browser
view instead of staying in its own window.

AuthGate now only bounces to central login when actually embedded
(passing ?from= so it returns here afterwards); standalone or
directly-opened tabs get an in-app login form and never navigate
away. Also wired up the previously-dead inactivity auto-logout timer.

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

frontend/src/components/AuthGate.tsx

@@ -1,6 +1,21 @@
-import { useEffect, useState, createContext, useContext } from 'react'
+import { useEffect, useRef, useState, createContext, useContext } from 'react'
 import type { User } from '../types'
 
+function getInactivityMs(): number | null {
+  if (window.matchMedia('(display-mode: standalone)').matches) return null
+  const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('hnf_inactivity_mins='))
+  if (!c) return null
+  const mins = parseInt(c.split('=')[1])
+  return isNaN(mins) || mins <= 0 ? null : mins * 60 * 1000
+}
+
+// Only bounce to the central login when actually embedded in the portal shell.
+// A standalone PWA or a directly-opened browser tab must never navigate away
+// from its own start_url/scope — otherwise it loses its installed-app context.
+function isEmbedded() {
+  return window.top !== window
+}
+
 interface AuthCtx { user: User }
 const Ctx = createContext<AuthCtx | null>(null)
 
@@ -11,22 +26,83 @@ export function useAuth() {
 }
 
 export default function AuthGate({ children }: { children: React.ReactNode }) {
+  const [state, setState] = useState<'checking' | 'authed' | 'login'>('checking')
   const [user, setUser] = useState<User | null>(null)
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     fetch('/wages/api/auth/verify?app=wages', { credentials: 'include' })
-      .then(r => {
-        if (!r.ok) {
-          ;(window.top ?? window).location.href = '/login'
-          return null
+      .then(async r => {
+        if (r.ok) {
+          setUser(await r.json())
+          setState('authed')
+        } else if (isEmbedded()) {
+          window.top!.location.href = `/login?from=${encodeURIComponent('/app/wages')}`
+        } else {
+          setState('login')
         }
-        return r.json()
       })
-      .then(data => { if (data) setUser(data) })
-      .catch(() => { ;(window.top ?? window).location.href = '/login' })
+      .catch(() => { if (!isEmbedded()) setState('login') })
   }, [])
 
-  if (!user) {
+  // Inactivity auto-logout — disabled for installed PWAs; configurable per
+  // device (Admin Settings → Device) for shared/front-desk browser sessions.
+  useEffect(() => {
+    const ms = getInactivityMs()
+    if (state !== 'authed' || !ms) return
+    const timeoutMs: number = ms
+
+    async function forceLogout() {
+      await fetch('/wages/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
+      setUser(null)
+      setState('login')
+    }
+
+    function reset() {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(forceLogout, timeoutMs)
+    }
+
+    const events = ['mousemove', 'keydown', 'click', 'touchstart'] as const
+    events.forEach(e => window.addEventListener(e, reset, { passive: true }))
+    reset()
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      events.forEach(e => window.removeEventListener(e, reset))
+    }
+  }, [state])
+
+  async function login(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    try {
+      const res = await fetch('/wages/api/auth/login', {
+        method: 'POST', credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      })
+      if (!res.ok) { setError('Invalid email or password'); return }
+      const verify = await fetch('/wages/api/auth/verify?app=wages', { credentials: 'include' })
+      if (verify.ok) {
+        setUser(await verify.json())
+        setState('authed')
+      } else {
+        setError("You don't have access to this app.")
+      }
+    } catch {
+      setError('Connection error — please try again')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (state === 'checking') {
     return (
       <div style={{
         display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -37,5 +113,46 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
     )
   }
 
-  return <Ctx.Provider value={{ user }}>{children}</Ctx.Provider>
+  if (state === 'login') {
+    return (
+      <div style={{
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        justifyContent: 'center', height: '100dvh', padding: '1.5rem',
+        background: '#0f0f20',
+      }}>
+        <div style={{
+          background: 'var(--navy)', borderRadius: 'var(--radius)',
+          padding: '2rem', width: '100%', maxWidth: '360px',
+          border: '1px solid rgba(255,255,255,0.08)',
+        }}>
+          <h1 style={{ fontSize: '1.4rem', marginBottom: '1.5rem', color: 'var(--gold)' }}>
+            Wage Costs
+          </h1>
+          <form onSubmit={login} style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+            <input type="email" value={email} onChange={e => setEmail(e.target.value)}
+              placeholder="Email" required autoComplete="email" style={inputStyle} />
+            <input type="password" value={password} onChange={e => setPassword(e.target.value)}
+              placeholder="Password" required autoComplete="current-password" style={inputStyle} />
+            {error && <p style={{ color: '#f87171', fontSize: '0.875rem' }}>{error}</p>}
+            <button type="submit" disabled={loading} style={{
+              background: loading ? 'rgba(255,255,255,0.08)' : 'var(--gold)',
+              color: loading ? 'rgba(255,255,255,0.48)' : '#0f0f20',
+              border: 'none', borderRadius: '6px', padding: '0.625rem',
+              fontSize: '1rem', fontWeight: 600, marginTop: '0.25rem',
+            }}>
+              {loading ? 'Signing in…' : 'Sign in'}
+            </button>
+          </form>
+        </div>
+      </div>
+    )
+  }
+
+  return <Ctx.Provider value={{ user: user! }}>{children}</Ctx.Provider>
+}
+
+const inputStyle: React.CSSProperties = {
+  background: '#0f0f20', border: '1px solid rgba(255,255,255,0.08)',
+  borderRadius: '6px', color: 'rgba(255,255,255,0.88)', padding: '0.625rem 0.75rem',
+  fontSize: '1rem', width: '100%', outline: 'none',
 }

frontend/vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
         name: 'Wage Costs',
         short_name: 'Wages',
         start_url: '/wages/',
-        scope: '/wages/',
+        scope: '/',
         display: 'standalone',
         theme_color: '#065f46',
         background_color: '#065f46',