feat(m2): auth, JWT, invitations, bootstrap, RTOps SPA pages

Crypto + tokens
- app/core/security.py: Argon2id PasswordHasher (time_cost=2, memory_cost=
  64 MiB, parallelism=2) + opaque-token SHA-256 helpers (raw token shown
  once, only the hash lives in the DB).
- app/core/jwt_tokens.py: HS256, claims iss/sub/type/jti/iat/exp. Access
  1h, refresh 30d.

Services
- services/auth.py: login, refresh with token rotation + reuse-detection
  chain revoke, logout (idempotent), change_password (forces logout-all).
- services/invitations.py: create, preview, accept, revoke. Default 7d TTL.
- services/bootstrap.py: seeds the 3 system groups (admin/redteam/blueteam),
  consumes the install token, attaches the first user to admin.
- core/install_token.py: mints, persists in settings, marks consumed,
  regenerate hook for /diag/reset.

API
- POST /setup (consume install token, create 1st admin) + GET /setup
  (status).
- POST /auth/{login,refresh,logout,change-password} + GET /auth/me.
- POST /invitations + GET /invitations + GET /invitations/preview/<token> +
  POST /invitations/accept/<token> + POST /invitations/<id>/revoke.
- POST /diag/reset: test-only kill switch (truncate auth tables + mint
  fresh install token). Allowed in dev too (with WARNING log) so the e2e
  suite can run against a make-up stack; production locked out.

Middleware
- @require_auth populates g.current_user (snapshot dataclass, session
  closed before request handler runs).
- @require_perm(*codes): atomic perm union check; admin group bypasses.
  Perm catalogue lands in M3, scaffolding here.
- flask-limiter: 10/min/IP on /auth/login & /auth/refresh, 5/min on
  /auth/change-password & /setup, 10–20/min on invitation endpoints.
  Disabled in APP_ENV=test.

CLI
- flask --app app.cli metamorph print-install-token [--force]
- flask --app app.cli metamorph seed-mitre (M4 placeholder)

Refresh cookie metamorph_refresh: HttpOnly + Secure (localhost is a secure
context for modern browsers) + SameSite=Strict + Path=/api/v1/auth/.

Email validation: app.api._validation.Email permissive RFC-shape regex so
internal TLDs (.local/.corp/.test) are accepted — pydantic.EmailStr's
deliverability check is too strict for red-team labs.

Frontend
- lib/{api,auth}.ts: access token in module memory, refresh cookie,
  automatic 401-retry via /auth/refresh, useAuth() hook.
- components/{Layout,RequireAuth}.tsx + ui/{TextField,Alert}.tsx.
- pages/{Login,Setup,Register,Profile}.

Testing
- tests/test_auth_flow.py: 15 integration tests (24 backend total).
- e2e/tests/m2-auth.spec.ts: 8 Playwright tests (20 e2e total).
- tasks/testing-m2.md.

DoD: make test-api → 24 passed, make e2e → 20 passed; spec-reviewer pass
applied (Secure unconditional, refresh limit 10/min/IP).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/Layout.tsx

@@ -0,0 +1,76 @@
+import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom';
+
+import { Button } from '@/components/ui/Button';
+import { useAuth } from '@/lib/auth';
+import { cn } from '@/lib/cn';
+
+export function Layout() {
+  const { state, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const navItem = (to: string, label: string) => (
+    <NavLink
+      to={to}
+      end
+      className={({ isActive }) =>
+        cn(
+          'font-mono text-xs uppercase tracking-wider2 px-3 py-1 rounded',
+          isActive ? 'text-cyan accent-fill-cyan' : 'text-text-dim hover:text-text-bright',
+        )
+      }
+    >
+      {label}
+    </NavLink>
+  );
+
+  return (
+    <div className="px-[60px] py-10">
+      <div className="mx-auto max-w-page">
+        <header className="flex items-baseline justify-between mb-12">
+          <Link to="/" className="font-mono text-[24px] font-bold tracking-tight text-text-bright">
+            <span className="text-red">Meta</span>
+            <span>morph</span>
+          </Link>
+          <nav className="flex items-center gap-2" aria-label="Primary">
+            {state.user ? (
+              <>
+                {navItem('/', 'Home')}
+                {navItem('/profile', 'Profile')}
+                {state.user.is_admin && (
+                  <>
+                    {navItem('/admin/users', 'Users')}
+                    {navItem('/admin/groups', 'Groups')}
+                    {navItem('/admin/invitations', 'Invitations')}
+                  </>
+                )}
+                <span className="font-mono text-2xs text-text-dim ml-2" data-testid="me-email">
+                  {state.user.email}
+                </span>
+                <Button
+                  accent="rose"
+                  onClick={async () => {
+                    await logout();
+                    navigate('/login', { replace: true });
+                  }}
+                >
+                  Logout
+                </Button>
+              </>
+            ) : (
+              <>
+                {navItem('/login', 'Login')}
+                {navItem('/setup', 'Setup')}
+              </>
+            )}
+          </nav>
+        </header>
+
+        <Outlet />
+
+        <footer className="mt-[60px] py-8 border-t border-border text-center font-mono text-xs text-text-dim">
+          metamorph · M0 bootstrap · M1 db schema · M2 auth · M3 rbac · design system from tasks/design.md
+        </footer>
+      </div>
+    </div>
+  );
+}

frontend/src/components/RequireAuth.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+
+import { useAuth } from '@/lib/auth';
+
+export function RequireAuth({ children }: { children: ReactNode }) {
+  const { state } = useAuth();
+  const loc = useLocation();
+  if (state.loading) {
+    return <p className="font-mono text-xs text-text-dim p-8">Loading session…</p>;
+  }
+  if (!state.user) {
+    return <Navigate to="/login" state={{ from: loc.pathname }} replace />;
+  }
+  return <>{children}</>;
+}

frontend/src/components/ui/Alert.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+import { cn, type Accent } from '@/lib/cn';
+
+interface AlertProps {
+  accent: Accent;
+  children: ReactNode;
+  className?: string;
+  /** Optional ARIA role override; defaults to "alert" for errors. */
+  role?: string;
+}
+
+const ACCENT_FILL: Record<Accent, string> = {
+  red: 'accent-fill-red',
+  orange: 'accent-fill-orange',
+  yellow: 'accent-fill-yellow',
+  green: 'accent-fill-green',
+  cyan: 'accent-fill-cyan',
+  blue: 'accent-fill-blue',
+  purple: 'accent-fill-purple',
+  pink: 'accent-fill-pink',
+  rose: 'accent-fill-rose',
+  teal: 'accent-fill-teal',
+};
+
+export function Alert({ accent, children, className, role }: AlertProps) {
+  return (
+    <div
+      role={role ?? (accent === 'red' || accent === 'rose' ? 'alert' : 'status')}
+      className={cn(
+        'rounded-md border border-current/30 px-3 py-2 font-mono text-xs',
+        ACCENT_FILL[accent],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

frontend/src/components/ui/TextField.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, useId, type InputHTMLAttributes } from 'react';
+
+import { cn } from '@/lib/cn';
+
+interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  hint?: string;
+  errorText?: string;
+}
+
+/**
+ * Form field with explicit label/input association via `htmlFor` / `id`.
+ * The hint and error text are rendered as siblings, NOT inside the `<label>`,
+ * so the accessible name of the input remains exactly the `label` prop —
+ * crucial for `getByLabel(...)` selectors in Playwright.
+ */
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
+  { label, hint, errorText, className, id, ...rest },
+  ref,
+) {
+  const fallbackId = useId();
+  const inputId = id ?? fallbackId;
+  return (
+    <div className="block">
+      <label
+        htmlFor={inputId}
+        className="block font-mono text-3xs font-semibold uppercase tracking-wider2 text-text-dim"
+      >
+        {label}
+      </label>
+      <input
+        ref={ref}
+        id={inputId}
+        className={cn(
+          'mt-1 w-full rounded-md border bg-bg-card px-3 py-2 font-mono text-xs text-text-bright placeholder:text-text-dim',
+          errorText ? 'border-red' : 'border-border focus:border-cyan',
+          'focus:outline-none',
+          className,
+        )}
+        {...rest}
+      />
+      {hint && !errorText && (
+        <p className="mt-1 font-mono text-2xs text-text-dim">{hint}</p>
+      )}
+      {errorText && <p className="mt-1 font-mono text-2xs text-red">{errorText}</p>}
+    </div>
+  );
+});