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

Same fix as kitchen/kds: 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
forecasting 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.

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

frontend/src/components/AuthGate.tsx

@@ -1,4 +1,4 @@
-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'
 
@@ -10,6 +10,26 @@ function getInactivityMs(): number | null {
   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('/forecasting/api/auth/verify?app=forecasting', { credentials: 'include' })
+    .then(r => {
+      if (!r.ok) throw new Error('unauth')
+      return r.json()
+    })
+    .then(data => ({
+      email: data.email || data.sub || '',
+      name: data.name || data.display_name || '',
+      is_admin: data.is_admin ?? false,
+      caps: data.caps ?? [],
+    }))
+}
 
 interface AuthCtx { user: User }
 const Ctx = createContext<AuthCtx | null>(null)
@@ -21,30 +41,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('/forecasting/api/auth/verify?app=forecasting', { 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(() => {
-        // Redirect the top-level window, not the iframe, so the portal
+        if (isEmbedded()) window.top!.location.href = `/login?from=${encodeURIComponent('/app/forecasting')}`
-        // navigates to login rather than loading inside itself (EmbeddedFallback).
+        else setState('login')
-        ;(window.top ?? window).location.href = '/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('/forecasting/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('/forecasting/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={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--navy-dark)' }}>
         <div className="spinner" style={{ width: 32, height: 32 }} />
@@ -52,7 +114,46 @@ export default function AuthGate({ children }: { children: ReactNode }) {
     )
   }
 
-  if (!user) return null
+  if (state === 'login') {
-
+    return (
-  return <Ctx.Provider value={{ user }}>{children}</Ctx.Provider>
+      <div style={{
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        justifyContent: 'center', minHeight: '100vh', padding: '1.5rem',
+        background: 'var(--navy-dark)',
+      }}>
+        <div style={{
+          background: 'var(--navy)', borderRadius: 'var(--radius)',
+          padding: '2rem', width: '100%', maxWidth: '360px',
+          border: '1px solid var(--surface-2)',
+        }}>
+          <h1 style={{ fontSize: '1.4rem', marginBottom: '1.5rem', color: 'var(--gold)' }}>
+            Forecasting
+          </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(--danger)', fontSize: '0.875rem' }}>{error}</p>}
+            <button type="submit" disabled={loading} style={{
+              background: loading ? 'var(--surface-2)' : 'var(--gold)',
+              color: loading ? 'var(--text-muted)' : 'var(--navy-dark)',
+              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: 'var(--navy-dark)', border: '1px solid var(--surface-2)',
+  borderRadius: '6px', color: 'var(--text)', padding: '0.625rem 0.75rem',
+  fontSize: '1rem', width: '100%', outline: 'none',
 }