Initial KDS scaffold — Phase 2 kitchen port

FastAPI backend (Python 3.11, httpx for SignalR/GraphQL — no MSSQL ODBC),
shares kitchen_db directly. React/TS/Vite fullscreen board frontend.

Backend: auth.py (APP_SLUG=kds, SimpleNamespace), main.py (4 KDS migrations,
SignalR start/stop), kds.py router, models (kds/settings/resos — read from
kitchen_db), signalr_listener.py (backoff pre-existing), kds_graphql.py,
database.py. Requirements stripped to ~9 packages; image ~400 MB lighter
than kitchen (no MSSQL ODBC layer).

Frontend: AuthGate (app=kds), single fullscreen route, dark board theme.
KDS.tsx URL prefix patched (/api/kds/ → /kds/api/kds/),
recipe images cross-app (/kitchen/api/recipes/).
nginx: 5 blocks with SSE proxy headers on /kds/api/ block.

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

frontend/src/App.tsx

@@ -0,0 +1,18 @@
+import { Routes, Route, Navigate } from 'react-router-dom'
+import AuthGate from './components/AuthGate'
+
+// Re-export for any archive imports that use `import { useAuth } from '../App'`
+export { useAuth } from './components/AuthGate'
+
+import KDSApp from './pages/KDSApp'
+
+export default function App() {
+  return (
+    <AuthGate>
+      <Routes>
+        <Route path="/" element={<KDSApp />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </AuthGate>
+  )
+}

frontend/src/components/AuthGate.tsx

@@ -0,0 +1,67 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+import type { User } from '../types'
+
+interface AuthCtx {
+  user: User
+  token: string
+  restrictedPages: string[]
+  login: (t: string) => void
+  logout: () => void
+}
+const Ctx = createContext<AuthCtx | null>(null)
+
+export function useAuth() {
+  const ctx = useContext(Ctx)
+  if (!ctx) throw new Error('useAuth outside AuthGate')
+  return ctx
+}
+
+export default function AuthGate({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [checking, setChecking] = useState(true)
+
+  useEffect(() => {
+    fetch('/kds/api/auth/verify?app=kds', { credentials: 'include' })
+      .then((r) => {
+        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'
+      })
+      .finally(() => setChecking(false))
+  }, [])
+
+  if (checking) {
+    return (
+      <div style={{
+        position: 'fixed', inset: 0,
+        background: 'var(--kds-bg)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+      }}>
+        <div className="spinner" style={{ width: 32, height: 32 }} />
+      </div>
+    )
+  }
+
+  if (!user) return null
+
+  const ctx: AuthCtx = {
+    user,
+    token: '__session__',
+    restrictedPages: [],
+    login: () => {},
+    logout: () => { (window.top ?? window).location.href = '/login' },
+  }
+
+  return <Ctx.Provider value={ctx}>{children}</Ctx.Provider>
+}

frontend/src/index.css

@@ -0,0 +1,89 @@
+:root {
+  /* Stack palette */
+  --navy-dark:    #1a1a2e;
+  --navy-mid:     #16213e;
+  --navy-light:   #0f3460;
+  --gold:         #c9a84c;
+  --text-primary: #e8e8e8;
+  --text-muted:   #9ca3af;
+  --bg-content:   #f4f5f7;
+  --border:       rgba(255, 255, 255, 0.1);
+
+  /* KDS-specific — dark board theme */
+  --kds-bg:       #0d0d1a;
+  --kds-card:     #1a1a2e;
+  --kds-border:   rgba(255, 255, 255, 0.08);
+  --kds-green:    #22c55e;
+  --kds-amber:    #f59e0b;
+  --kds-red:      #ef4444;
+  --kds-blue:     #3b82f6;
+  --kds-sent:     #6b7280;
+
+  /* App primary — teal (shared with kitchen for recipe images etc.) */
+  --app-primary:  #0d9488;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: var(--kds-bg);
+  color: var(--text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* KDS is fullscreen — no sidebar layout needed */
+
+/* Spinner */
+.spinner {
+  border: 3px solid rgba(255,255,255,0.15);
+  border-top-color: var(--gold);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Shared badge style used by KDS status indicators */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.badge-green  { background: rgba(34,197,94,0.15);  color: var(--kds-green); }
+.badge-amber  { background: rgba(245,158,11,0.15); color: var(--kds-amber); }
+.badge-red    { background: rgba(239,68,68,0.15);  color: var(--kds-red); }
+.badge-blue   { background: rgba(59,130,246,0.15); color: var(--kds-blue); }
+.badge-grey   { background: rgba(107,114,128,0.15);color: var(--kds-sent); }
+
+/* Button */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn:hover { opacity: 0.85; }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-primary { background: var(--gold); color: #000; }
+.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }

frontend/src/main.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import App from './App'
+import './index.css'
+
+const qc = new QueryClient({
+  defaultOptions: { queries: { staleTime: 10 * 1000, retry: 1 } },
+})
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter basename="/kds">
+      <QueryClientProvider client={qc}>
+        <App />
+      </QueryClientProvider>
+    </BrowserRouter>
+  </React.StrictMode>,
+)

frontend/src/pages/KDSApp.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+import KDS from './KDS'
+
+export default function KDSApp() {
+  // Lock viewport for touch-screen wall display
+  useEffect(() => {
+    const prev = document.title
+    document.title = 'Kitchen Display'
+    return () => { document.title = prev }
+  }, [])
+
+  return <KDS />
+}

frontend/src/types.ts

@@ -0,0 +1,11 @@
+export interface User {
+  email: string
+  name: string
+  is_admin: boolean
+  caps: string[]
+}
+
+export function can(user: User | null, cap: string): boolean {
+  if (!user) return false
+  return user.is_admin || user.caps.includes(cap)
+}