Add auth UI: login/register pages, OIDC button, route guard (#6)

Frontend for pansy auth, rendering whatever /auth/providers reports.

- lib/auth.ts: zod-validated User/Providers, a shared meQueryOptions
  (a 401 resolves to null, not an error) reused by useMe() and the router
  guard, useProviders(), and useLogin/useRegister/useLogout mutations that
  prime/clear the me cache (logout also drops non-auth cached data).
- lib/queryClient.ts: one QueryClient shared by the React tree and the
  router context so guard and components hit the same cache.
- router.tsx: createRootRouteWithContext with the queryClient; requireAuth
  (redirects to /login?redirect=<dest>) on gardens/plants/editor, and
  requireGuest on login/register (bounces authed users away). Login search
  params (redirect, error) validated as optional; redirect targets are
  restricted to same-origin paths.
- pages/LoginPage: OIDC button (label from providers) linking to
  /auth/oidc/login, "or" divider, local email/password form, and friendly
  messages for the OIDC callback ?error= codes. RegisterPage: email +
  display name + password (min 8), registration-closed and SSO-only
  handling; auto-login lands on /gardens.
- AppShell: auth-aware nav — shows the user's display name + Sign out when
  logged in, Sign in otherwise; nav links only when authed.
- ui/: TextField (16px text to avoid iOS zoom, autocomplete + a11y),
  Button (+ shared buttonClasses for the OIDC anchor), Alert; AuthCard.

Verified in a real browser against the embedded binary: register →
auto-login → /gardens; refresh stays in; Sign out → /login; a logged-out
/gardens/1 redirects to /login and returns after login; OIDC button renders
with the Authentik label when configured. tsc --noEmit clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi

web/src/components/layout/AppShell.tsx

@@ -1,4 +1,5 @@
-import { Link, Outlet } from '@tanstack/react-router'
+import { Link, Outlet, useNavigate } from '@tanstack/react-router'
+import { useLogout, useMe } from '@/lib/auth'
 
 const navLinks = [
   { to: '/gardens', label: 'Gardens' },
@@ -14,6 +15,16 @@ const navLinkInactive = 'text-muted hover:bg-border/60 hover:text-fg'
 
 /** Top-level chrome: a sticky nav bar plus the routed page in an <Outlet>. */
 export function AppShell() {
+  const me = useMe()
+  const logout = useLogout()
+  const navigate = useNavigate()
+  const user = me.data
+
+  async function onLogout() {
+    await logout.mutateAsync()
+    await navigate({ to: '/login' })
+  }
+
   return (
     <div className="flex min-h-full flex-col">
       <header className="sticky top-0 z-10 border-b border-border bg-surface/90 backdrop-blur">
@@ -21,25 +32,42 @@ export function AppShell() {
           <Link to="/gardens" className="text-lg font-semibold text-accent-strong">
             🌱 pansy
           </Link>
+
           <div className="flex flex-1 items-center gap-1">
-            {navLinks.map((l) => (
-              <Link
-                key={l.to}
-                to={l.to}
-                className={navLinkBase}
-                activeProps={{ className: navLinkActive }}
-                inactiveProps={{ className: navLinkInactive }}
-              >
-                {l.label}
-              </Link>
-            ))}
+            {user &&
+              navLinks.map((l) => (
+                <Link
+                  key={l.to}
+                  to={l.to}
+                  className={navLinkBase}
+                  activeProps={{ className: navLinkActive }}
+                  inactiveProps={{ className: navLinkInactive }}
+                >
+                  {l.label}
+                </Link>
+              ))}
           </div>
-          <Link
-            to="/login"
-            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-fg"
-          >
-            Sign in
-          </Link>
+
+          {user ? (
+            <div className="flex items-center gap-2">
+              <span className="hidden text-sm text-muted sm:inline">{user.displayName}</span>
+              <button
+                type="button"
+                onClick={onLogout}
+                disabled={logout.isPending}
+                className="rounded-md px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-fg disabled:opacity-60"
+              >
+                {logout.isPending ? 'Signing out…' : 'Sign out'}
+              </button>
+            </div>
+          ) : (
+            <Link
+              to="/login"
+              className="rounded-md px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-fg"
+            >
+              Sign in
+            </Link>
+          )}
         </nav>
       </header>