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

Same fix as kitchen: AuthGate unconditionally hard-navigated
window.top to the central /login on session expiry, even when not
embedded in the portal iframe — dropping an installed/directly-opened
kds session into the portal's framed browser view instead of staying
in its own window.

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 inactivity auto-logout timer. The legacy token/restrictedPages/
login/logout compat shim is unchanged.

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

frontend/src/components/AuthGate.tsx

@@ -1,7 +1,36 @@
-import { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
 import type { ReactNode } 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
+}
+
+function verify(): Promise<User> {
+  return fetch('/kds/api/auth/verify?app=kds', { credentials: 'include' })
+    .then(r => {
+      if (!r.ok) throw new Error('unauth')
+      return r.json()
+    })
+    .then((data): User => ({
+      email: data.email || data.sub || '',
+      name: data.name || data.display_name || '',
+      is_admin: data.is_admin ?? false,
+      caps: data.caps ?? [],
+    }))
+}
+
 interface AuthCtx {
   user: User
   token: string
@@ -18,30 +47,72 @@ export function useAuth() {
 }
 
 export default function AuthGate({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<'checking' | 'authed' | 'login'>('checking')
   const [user, setUser] = useState<User | null>(null)
-  const [checking, setChecking] = useState(true)
+  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('/kds/api/auth/verify?app=kds', { credentials: 'include' })
+    verify()
-      .then((r) => {
+      .then(data => { setUser(data); setState('authed') })
-        if (!r.ok) throw new Error('unauth')
-        return r.json()
-      })
-      .then((data) =>
-        setUser({
-          email: data.email || data.sub || '',
-          name: data.name || data.display_name || '',
-          is_admin: data.is_admin ?? false,
-          caps: data.caps ?? [],
-        })
-      )
       .catch(() => {
-        ;(window.top ?? window).location.href = '/login'
+        if (isEmbedded()) window.top!.location.href = `/login?from=${encodeURIComponent('/app/kds')}`
+        else setState('login')
       })
-      .finally(() => setChecking(false))
   }, [])
 
-  if (checking) {
+  // 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('/kds/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('/kds/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 }
+      setUser(await verify())
+      setState('authed')
+    } catch {
+      setError('Connection error — please try again')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (state === 'checking') {
     return (
       <div style={{
         position: 'fixed', inset: 0,
@@ -53,15 +124,59 @@ export default function AuthGate({ children }: { children: ReactNode }) {
     )
   }
 
-  if (!user) return null
+  if (state === 'login') {
+    return (
+      <div style={{
+        position: 'fixed', inset: 0,
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        justifyContent: 'center', padding: '1.5rem',
+        background: 'var(--kds-bg)',
+      }}>
+        <div style={{
+          background: 'var(--kds-card)', borderRadius: '10px',
+          padding: '2rem', width: '100%', maxWidth: '360px',
+          border: '1px solid var(--kds-border)',
+        }}>
+          <h1 style={{ fontSize: '1.4rem', marginBottom: '1.5rem', color: 'var(--gold)' }}>
+            Kitchen Display
+          </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: 'var(--kds-red)', fontSize: '0.875rem' }}>{error}</p>}
+            <button type="submit" disabled={loading} style={{
+              background: loading ? 'var(--kds-border)' : 'var(--gold)',
+              color: loading ? 'var(--text-muted)' : 'var(--kds-bg)',
+              border: 'none', borderRadius: '6px', padding: '0.625rem',
+              fontSize: '1rem', fontWeight: 600, marginTop: '0.25rem',
+            }}>
+              {loading ? 'Signing in…' : 'Sign in'}
+            </button>
+          </form>
+        </div>
+      </div>
+    )
+  }
 
   const ctx: AuthCtx = {
-    user,
+    user: user!,
     token: '__session__',
     restrictedPages: [],
     login: () => {},
-    logout: () => { (window.top ?? window).location.href = '/login' },
+    logout: () => {
+      fetch('/kds/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
+      if (isEmbedded()) window.top!.location.href = '/login'
+      else { setUser(null); setState('login') }
+    },
   }
 
   return <Ctx.Provider value={ctx}>{children}</Ctx.Provider>
 }
+
+const inputStyle: React.CSSProperties = {
+  background: 'var(--kds-bg)', border: '1px solid var(--kds-border)',
+  borderRadius: '6px', color: 'var(--text-primary)', padding: '0.625rem 0.75rem',
+  fontSize: '1rem', width: '100%', outline: 'none',
+}