@cosmicdrift/kumiko-bundled-features 1.0.0 → 2.0.0

package/src/auth-email-password/web/index.ts

@@ -11,35 +11,47 @@ export type {
   CurrentUserProfile,
   LoginFailure,
   LoginRequest,
+  LoginResponse,
   ResetPasswordFailure,
   SignupConfirmSuccess,
   TenantSummary,
   VerifyEmailFailure,
 } from "./auth-client";
 export {
+  confirmAccountUnlock,
   confirmSignup,
+  requestAccountUnlock,
   requestEmailVerification,
   requestPasswordReset,
   requestSignup,
   resetPassword,
   verifyEmail,
 } from "./auth-client";
-export type { AuthShellRenderer } from "./auth-form-primitives";
-export { AuthShellProvider, useAuthShell } from "./auth-form-primitives";
-export { makeAuthGate, makeSessionAuthGate } from "./auth-gate";
+export type { AuthCardProps, AuthShellRenderer } from "./auth-form-primitives";
+export { AuthCard, AuthShellProvider, useAuthShell } from "./auth-form-primitives";
+export type {
+  LoginRouteOptions,
+  MfaSetupComponentProps,
+  MfaVerifyComponentProps,
+} from "./auth-gate";
+export { createLoginRoute, makeAuthGate, makeSessionAuthGate } from "./auth-gate";
 export type {
   EmailPasswordClientFeature,
   EmailPasswordClientOptions,
 } from "./client-plugin";
 export { emailPasswordClient } from "./client-plugin";
+export type { ConfirmAccountUnlockScreenProps } from "./confirm-account-unlock-screen";
+export { ConfirmAccountUnlockScreen } from "./confirm-account-unlock-screen";
 export type { DefaultTopbarActionsProps } from "./default-topbar-actions";
 export { DefaultTopbarActions } from "./default-topbar-actions";
 export type { ForgotPasswordScreenProps } from "./forgot-password-screen";
 export { ForgotPasswordScreen } from "./forgot-password-screen";
 export type { InviteAcceptScreenProps } from "./invite-accept-screen";
 export { InviteAcceptScreen } from "./invite-accept-screen";
-export type { LoginScreenProps } from "./login-screen";
+export type { AuthLegalLink, LoginScreenProps } from "./login-screen";
 export { LoginScreen } from "./login-screen";
+export type { RequestAccountUnlockScreenProps } from "./request-account-unlock-screen";
+export { RequestAccountUnlockScreen } from "./request-account-unlock-screen";
 export type { ResetPasswordScreenProps } from "./reset-password-screen";
 export { ResetPasswordScreen } from "./reset-password-screen";
 export type { SessionApi, SessionState, SessionStatus } from "./session";

package/src/auth-email-password/web/invite-accept-screen.tsx

@@ -19,7 +19,7 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useContext, useState } from "react";
 import { csrfHeader } from "./auth-client";
-import { AuthCard, authMutedLinkClass, parseUrlToken } from "./auth-form-primitives";
+import { AuthCard, useUrlToken } from "./auth-form-primitives";
 import { SessionContext, UNAUTHENTICATED } from "./session";
 
 export type InviteAcceptScreenProps = {
@@ -41,13 +41,13 @@ export function InviteAcceptScreen({
   loginHref = "/login",
 }: InviteAcceptScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   // NOT useSession(): InviteAcceptScreen is a public route (anon invite-links
   // are the documented use case) — useSession() throws without a
   // <SessionProvider> ancestor. Read the context directly and fall back to
   // the anonymous state when no provider wraps this screen (632/1).
   const session = useContext(SessionContext) ?? UNAUTHENTICATED;
-  const [token] = useState(() => tokenProp ?? parseUrlToken());
+  const token = useUrlToken(tokenProp);
   const [mode, setMode] = useState<Mode>(() =>
     session.status === "authenticated" ? "loggedin" : "anon-existing",
   );
@@ -142,9 +142,9 @@ export function InviteAcceptScreen({
       <AuthCard title={effectiveTitle}>
         <div className="p-6 pt-0 flex flex-col gap-4">
           <p className="text-sm text-muted-foreground">{t("auth.inviteAccept.missingToken")}</p>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.inviteAccept.goToLogin")}
-          </a>
+          </Link>
         </div>
       </AuthCard>
     );

package/src/auth-email-password/web/login-screen.tsx

@@ -11,8 +11,12 @@
 
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
-import { type LoginFailure, requestEmailVerification } from "./auth-client";
-import { AuthCard, authMutedLinkClass } from "./auth-form-primitives";
+import {
+  type KnownLoginFailureReason,
+  type LoginFailure,
+  requestEmailVerification,
+} from "./auth-client";
+import { AuthCard } from "./auth-form-primitives";
 import { useSession } from "./session";
 
 // Resend-Status für den "Bestätigungs-Mail erneut senden"-Flow, der bei
@@ -40,6 +44,13 @@ export type LoginScreenProps = {
    *  Link. Apps die den Reset-Flow NICHT anbieten (z.B. nur Magic-Link),
    *  setzen das einfach nicht — Login bleibt minimalistisch. */
   readonly forgotPasswordHref?: string;
+  /** Optional href to RequestAccountUnlockScreen (#1266). When set, an
+   *  account_locked login error renders an "Unlock account?" link inline —
+   *  the account-lockout escape hatch, since forgotPasswordHref does NOT
+   *  help here: the lockout gate blocks login before password verify even
+   *  runs, so it also blocks the post-reset login. Apps without
+   *  accountUnlock configured just leave this unset. */
+  readonly unlockAccountHref?: string;
   /** Optional href zum SignupScreen. Wenn gesetzt rendert die LoginScreen
    *  einen "Account erstellen"-Link. Apps die kein Self-Signup wollen
    *  (closed-invite-only) setzen das einfach nicht. */
@@ -50,6 +61,20 @@ export type LoginScreenProps = {
    *  Labels kommen vom Caller (typisch schon übersetzt bzw. Eigennamen
    *  wie "Impressum"). */
   readonly legalLinks?: readonly AuthLegalLink[];
+  /** Called when the server responds with an MFA challenge instead of a
+   *  session. Apps typically swap this screen out for auth-mfa's
+   *  MfaVerifyScreen(challengeToken). Without a handler, MFA-enrolled
+   *  users see a generic "not supported" error — better than a silent
+   *  hang, but apps mounting auth-mfa must wire this. */
+  readonly onMfaChallenge?: (challengeToken: string) => void;
+  /** Called when the tenant's enforcement policy requires MFA but this
+   *  user has no factor enrolled yet. Carries the preauthSetupToken the
+   *  login response issued plus the typed email (no session to derive it
+   *  from) — apps typically swap this screen out for auth-mfa's
+   *  MfaSetupPreauthScreen(preauthSetupToken, accountLabel). Without a
+   *  handler, the user sees a "setup required, contact your administrator"
+   *  error. */
+  readonly onMfaSetupRequired?: (preauthSetupToken: string, accountLabel: string) => void;
 };
 
 // Map vom Reason-Code des Login-Handlers auf einen i18n-Key plus
@@ -78,6 +103,10 @@ function reasonToKey(failure: LoginFailure): {
       return { key: "auth.errors.rateLimited" };
     case "invalid_body":
       return { key: "auth.errors.invalidBody" };
+    case "mfa_not_supported":
+      return { key: "auth.errors.mfaNotSupported" };
+    case "mfa_setup_required":
+      return { key: "auth.errors.mfaSetupRequired" };
     default:
       return { key: "auth.errors.loginFailed" };
   }
@@ -88,11 +117,14 @@ export function LoginScreen({
   subtitle,
   submitLabel,
   forgotPasswordHref,
+  unlockAccountHref,
   signupHref,
   legalLinks,
+  onMfaChallenge,
+  onMfaSetupRequired,
 }: LoginScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   const session = useSession();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -110,10 +142,27 @@ export function LoginScreen({
     setResendStatus({ kind: "idle" });
     const res = await session.login({ email, password });
     setSubmitting(false);
-    if (!res.ok) {
-      setError(res.error);
+    if (res.kind === "success") return;
+    if (res.kind === "mfa-challenge") {
+      if (onMfaChallenge) {
+        onMfaChallenge(res.challengeToken);
+        return;
+      }
+      setError({ reason: "mfa_not_supported" satisfies KnownLoginFailureReason });
       setFailedLoginEmail(email);
+      return;
     }
+    if (res.kind === "mfa-setup-required") {
+      if (onMfaSetupRequired) {
+        onMfaSetupRequired(res.preauthSetupToken, email);
+        return;
+      }
+      setError({ reason: "mfa_setup_required" satisfies KnownLoginFailureReason });
+      setFailedLoginEmail(email);
+      return;
+    }
+    setError(res.error);
+    setFailedLoginEmail(email);
   };
 
   const onSubmit = (e?: FormEvent): void => {
@@ -186,18 +235,25 @@ export function LoginScreen({
                 {error.reason === "email_not_verified" &&
                   email.trim().length > 0 &&
                   email === failedLoginEmail && (
-                    // kumiko-lint-ignore primitives-discipline Inline-Link im Banner (UX-Choice); Button-Primitive hat keinen link-Variant
-                    <button
-                      type="button"
-                      onClick={() => void onResend()}
-                      disabled={resendStatus.kind === "sending"}
-                      className={`${authMutedLinkClass} self-start text-left disabled:opacity-50`}
-                    >
-                      {resendStatus.kind === "sending"
-                        ? t("auth.login.submitting")
-                        : t("auth.login.resendVerification")}
-                    </button>
+                    <span className="self-start">
+                      <Button
+                        variant="link"
+                        onClick={() => void onResend()}
+                        disabled={resendStatus.kind === "sending"}
+                      >
+                        {resendStatus.kind === "sending"
+                          ? t("auth.login.submitting")
+                          : t("auth.login.resendVerification")}
+                      </Button>
+                    </span>
                   )}
+                {error.reason === "account_locked" && unlockAccountHref !== undefined && (
+                  <span className="self-start">
+                    <Link href={unlockAccountHref} variant="default">
+                      {t("auth.login.unlockAccount")}
+                    </Link>
+                  </span>
+                )}
                 {resendStatus.kind === "rateLimited" && (
                   <span className="text-xs">{t("auth.login.resendRateLimited")}</span>
                 )}
@@ -212,14 +268,14 @@ export function LoginScreen({
           </Button>
         </Form>
         {forgotPasswordHref !== undefined && (
-          <a href={forgotPasswordHref} className={`${authMutedLinkClass} self-center`}>
+          <Link href={forgotPasswordHref} variant="muted" className="self-center">
             {t("auth.login.forgotPassword")}
-          </a>
+          </Link>
         )}
         {signupHref !== undefined && (
-          <a href={signupHref} className={`${authMutedLinkClass} self-center`}>
+          <Link href={signupHref} variant="muted" className="self-center">
             {t("auth.signup.title")}
-          </a>
+          </Link>
         )}
         {legalLinks !== undefined && legalLinks.length > 0 && (
           <nav
@@ -227,9 +283,9 @@ export function LoginScreen({
             className="flex items-center justify-center gap-3 pt-2 border-t border-border/50"
           >
             {legalLinks.map((link) => (
-              <a key={link.href} href={link.href} className={`${authMutedLinkClass} text-xs`}>
+              <Link key={link.href} href={link.href} variant="muted" className="text-xs">
                 {link.label}
-              </a>
+              </Link>
             ))}
           </nav>
         )}

package/src/auth-email-password/web/request-account-unlock-screen.tsx

@@ -0,0 +1,112 @@
+// @runtime client
+// RequestAccountUnlockScreen — form with an email input. Submit triggers
+// /api/auth/request-account-unlock (silent-success, no account
+// enumeration). UI unconditionally shows an "if your account is locked,
+// a mail is on its way" confirmation — even when the server internally
+// knows the email doesn't exist or isn't locked. Mirrors
+// ForgotPasswordScreen 1:1.
+//
+// The app is responsible for mounting this screen under a URL (e.g.
+// /unlock-account) and for reaching it — LoginScreen can render a link
+// to the app route on accountLocked errors.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+import { requestAccountUnlock } from "./auth-client";
+import { AuthCard } from "./auth-form-primitives";
+
+export type RequestAccountUnlockScreenProps = {
+  readonly title?: string;
+  readonly subtitle?: ReactNode;
+  /** href for the "back to sign in" link in success + form state. App-
+   *  specific — default "/login". */
+  readonly loginHref?: string;
+};
+
+export function RequestAccountUnlockScreen({
+  title,
+  subtitle,
+  loginHref = "/login",
+}: RequestAccountUnlockScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
+  const [email, setEmail] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // guard:dup-ok — same submit pattern as forgot-password-screen, but different API endpoint and state
+  const doSubmit = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    try {
+      const res = await requestAccountUnlock(email);
+      if (res.ok) {
+        setDone(true);
+      } else if (res.error.reason === "rate_limited") {
+        const minutes =
+          res.error.retryAfterSeconds !== undefined
+            ? Math.ceil(res.error.retryAfterSeconds / 60)
+            : undefined;
+        setError(
+          minutes !== undefined
+            ? t("auth.requestUnlock.rateLimited", { minutes })
+            : t("auth.errors.rateLimited"),
+        );
+      } else {
+        setError(t("auth.errors.unknownError"));
+      }
+    } catch {
+      setError(t("auth.errors.unknownError"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void doSubmit();
+  };
+
+  const effectiveTitle = title ?? t("auth.requestUnlock.title");
+
+  return (
+    <AuthCard title={effectiveTitle} subtitle={subtitle}>
+      {done ? (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <Banner variant="info">
+            <p className="font-medium text-foreground">{t("auth.requestUnlock.successTitle")}</p>
+            <p className="mt-1">{t("auth.requestUnlock.successBody")}</p>
+          </Banner>
+          <Link href={loginHref} variant="muted">
+            {t("auth.requestUnlock.backToLogin")}
+          </Link>
+        </div>
+      ) : (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">{t("auth.requestUnlock.intro")}</p>
+          <Form onSubmit={onSubmit}>
+            <Field id="unlock-email" label={t("auth.requestUnlock.email")} required>
+              <Input
+                kind="text"
+                id="unlock-email"
+                name="unlock-email"
+                value={email}
+                onChange={setEmail}
+                disabled={submitting}
+                required
+              />
+            </Field>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting ? t("auth.requestUnlock.submitting") : t("auth.requestUnlock.submit")}
+            </Button>
+          </Form>
+          <Link href={loginHref} variant="muted" className="self-center">
+            {t("auth.requestUnlock.backToLogin")}
+          </Link>
+        </div>
+      )}
+    </AuthCard>
+  );
+}

package/src/auth-email-password/web/reset-password-screen.tsx

@@ -5,20 +5,16 @@
 // Code (anti-enumeration); UI zeigt unified "Link ungültig oder
 // abgelaufen"-message.
 //
-// Token-Quelle ist read-once: wir lesen via parseUrlToken() einmalig
-// im useState-Initializer. Apps die das anders brauchen (server-
-// injected Token-Prop, andere Parameter-Namen) reichen einen
-// expliziten `token` als Prop durch.
+// Token-Quelle ist read-once via useUrlToken(): liest `?token=...` beim
+// Mount und scrubbt den Param danach aus der URL (#774). Apps die das
+// anders brauchen (server-injected Token-Prop) reichen `token` als Prop
+// durch — dann bleibt die URL unangetastet.
 
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { resetPassword } from "./auth-client";
-import {
-  AuthCard,
-  authButtonClass,
-  authMutedLinkClass,
-  parseUrlToken,
-} from "./auth-form-primitives";
+import { passwordPairIssue } from "./auth-form-logic";
+import { AuthCard, useUrlToken } from "./auth-form-primitives";
 
 export type ResetPasswordScreenProps = {
   readonly title?: string;
@@ -36,8 +32,8 @@ export function ResetPasswordScreen({
   loginHref = "/login",
 }: ResetPasswordScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
-  const [token] = useState(() => tokenProp ?? parseUrlToken());
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
+  const token = useUrlToken(tokenProp);
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [submitting, setSubmitting] = useState(false);
@@ -46,11 +42,12 @@ export function ResetPasswordScreen({
 
   const doSubmit = async (): Promise<void> => {
     setError(null);
-    if (newPassword.length < 8) {
+    const issue = passwordPairIssue(newPassword, confirmPassword);
+    if (issue === "too_short") {
       setError(t("auth.resetPassword.tooShort"));
       return;
     }
-    if (newPassword !== confirmPassword) {
+    if (issue === "mismatch") {
       setError(t("auth.resetPassword.mismatch"));
       return;
     }
@@ -88,9 +85,9 @@ export function ResetPasswordScreen({
       <AuthCard title={effectiveTitle}>
         <div className="p-6 pt-0 flex flex-col gap-4">
           <p className="text-sm text-muted-foreground">{t("auth.resetPassword.missingToken")}</p>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.resetPassword.goToLogin")}
-          </a>
+          </Link>
         </div>
       </AuthCard>
     );
@@ -104,9 +101,9 @@ export function ResetPasswordScreen({
             <p className="font-medium text-foreground">{t("auth.resetPassword.successTitle")}</p>
             <p className="mt-1">{t("auth.resetPassword.successBody")}</p>
           </Banner>
-          <a href={loginHref} className={authButtonClass}>
+          <Link href={loginHref} variant="button">
             {t("auth.resetPassword.goToLogin")}
-          </a>
+          </Link>
         </div>
       ) : (
         <div className="p-6 pt-0 flex flex-col gap-4">

package/src/auth-email-password/web/session.tsx

@@ -15,8 +15,8 @@ import {
   type CurrentUserProfile,
   fetchCurrentUser,
   fetchTenants,
-  type LoginFailure,
   type LoginRequest,
+  type LoginResult,
   login as loginApi,
   logout as logoutApi,
   switchTenant as switchTenantApi,
@@ -39,9 +39,13 @@ export type SessionState = {
 };
 
 export type SessionApi = SessionState & {
-  readonly login: (req: LoginRequest) => Promise<{ ok: true } | { ok: false; error: LoginFailure }>;
+  readonly login: (req: LoginRequest) => Promise<LoginResult>;
   readonly logout: () => Promise<void>;
   readonly switchTenant: (tenantId: string) => Promise<void>;
+  /** Re-runs the /auth/tenants + user:me refresh round without a full page
+   *  reload. Used by auth-mfa's verify screen after a challenge completes
+   *  and mints cookies via a route session.tsx never calls directly. */
+  readonly refresh: () => Promise<void>;
 };
 
 // Exported so screens that render on BOTH authenticated and anonymous public
@@ -131,9 +135,10 @@ export function SessionProvider({ children }: { readonly children: ReactNode }):
   const login = useCallback<SessionApi["login"]>(
     async (req) => {
       const res = await loginApi(req);
-      if (!res.ok) return { ok: false, error: res.error };
-      await doRefresh();
-      return { ok: true };
+      if (res.kind === "success") {
+        await doRefresh();
+      }
+      return res;
     },
     [doRefresh],
   );
@@ -161,7 +166,7 @@ export function SessionProvider({ children }: { readonly children: ReactNode }):
     }
   }, []);
 
-  const api: SessionApi = { ...state, login, logout, switchTenant };
+  const api: SessionApi = { ...state, login, logout, switchTenant, refresh: doRefresh };
   return <SessionContext.Provider value={api}>{children}</SessionContext.Provider>;
 }
 

package/src/auth-email-password/web/signup-complete-screen.tsx

@@ -6,9 +6,9 @@
 // Server JWT + Cookies (Auto-Login!) und liefert tenantKey für den
 // Post-Signup-Redirect.
 //
-// Token-Quelle ist read-once: parseUrlToken im useState-Initializer.
-// Apps die einen anderen URL-Param nutzen, reichen `token` als Prop
-// durch.
+// Token-Quelle ist read-once via useUrlToken: liest `?token=...` beim
+// Mount und scrubbt den Param danach aus der URL (#774). Apps die einen
+// server-injected Token nutzen, reichen `token` als Prop durch.
 //
 // Nach success: redirect via window.location.assign zu loggedInHref.
 // Default-Pattern ist "/<tenantKey>/" — die App reicht ein Template
@@ -18,7 +18,8 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { confirmSignup } from "./auth-client";
-import { AuthCard, authMutedLinkClass, parseUrlToken } from "./auth-form-primitives";
+import { passwordPairIssue, resolveLoggedInHref } from "./auth-form-logic";
+import { AuthCard, useUrlToken } from "./auth-form-primitives";
 
 export type SignupCompleteScreenProps = {
   readonly title?: string;
@@ -43,8 +44,8 @@ export function SignupCompleteScreen({
   loginHref = "/login",
 }: SignupCompleteScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
-  const [token] = useState(() => tokenProp ?? parseUrlToken());
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
+  const token = useUrlToken(tokenProp);
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [submitting, setSubmitting] = useState(false);
@@ -52,11 +53,12 @@ export function SignupCompleteScreen({
 
   const doSubmit = async (): Promise<void> => {
     setError(null);
-    if (password.length < 8) {
+    const issue = passwordPairIssue(password, confirmPassword);
+    if (issue === "too_short") {
       setError(t("auth.signupComplete.tooShort"));
       return;
     }
-    if (password !== confirmPassword) {
+    if (issue === "mismatch") {
       setError(t("auth.signupComplete.mismatch"));
       return;
     }
@@ -66,11 +68,7 @@ export function SignupCompleteScreen({
     if (res.ok) {
       // Auto-Login: Cookies sind via Set-Cookie schon im Browser. Wir
       // schicken den User direkt zur eingeloggten Page.
-      const target =
-        typeof loggedInHref === "function"
-          ? loggedInHref({ tenantKey: res.data.tenantKey })
-          : loggedInHref;
-      window.location.assign(target);
+      window.location.assign(resolveLoggedInHref(loggedInHref, res.data.tenantKey));
       return;
     }
     if (res.error.reason === "invalid_signup_token") {
@@ -98,9 +96,9 @@ export function SignupCompleteScreen({
       <AuthCard title={effectiveTitle}>
         <div className="p-6 pt-0 flex flex-col gap-4">
           <p className="text-sm text-muted-foreground">{t("auth.signupComplete.missingToken")}</p>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.signup.haveAccount")}
-          </a>
+          </Link>
         </div>
       </AuthCard>
     );

package/src/auth-email-password/web/signup-screen.tsx

@@ -15,7 +15,8 @@
 import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { requestSignup } from "./auth-client";
-import { AuthCard, authMutedLinkClass } from "./auth-form-primitives";
+import { retryAfterMinutes } from "./auth-form-logic";
+import { AuthCard } from "./auth-form-primitives";
 
 export type SignupScreenProps = {
   readonly title?: string;
@@ -31,7 +32,7 @@ export function SignupScreen({
   loginHref = "/login",
 }: SignupScreenProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
   const [email, setEmail] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [done, setDone] = useState(false);
@@ -45,10 +46,7 @@ export function SignupScreen({
       if (res.ok) {
         setDone(true);
       } else if (res.error.reason === "rate_limited") {
-        const minutes =
-          res.error.retryAfterSeconds !== undefined
-            ? Math.ceil(res.error.retryAfterSeconds / 60)
-            : undefined;
+        const minutes = retryAfterMinutes(res.error.retryAfterSeconds);
         setError(
           minutes !== undefined
             ? t("auth.errors.accountLockedRetry", { minutes })
@@ -95,9 +93,9 @@ export function SignupScreen({
           <Button variant="secondary" onClick={onResend} disabled={submitting}>
             {t("auth.signup.resend")}
           </Button>
-          <a href={loginHref} className={authMutedLinkClass}>
+          <Link href={loginHref} variant="muted">
             {t("auth.signup.haveAccount")}
-          </a>
+          </Link>
         </div>
       ) : (
         <div className="p-6 pt-0 flex flex-col gap-4">
@@ -120,9 +118,9 @@ export function SignupScreen({
               {submitting ? t("auth.signup.submitting") : t("auth.signup.submit")}
             </Button>
           </Form>
-          <a href={loginHref} className={`${authMutedLinkClass} self-center`}>
+          <Link href={loginHref} variant="muted" className="self-center">
             {t("auth.signup.haveAccount")}
-          </a>
+          </Link>
         </div>
       )}
     </AuthCard>

package/src/auth-email-password/web/use-shell-user.ts

@@ -29,6 +29,9 @@ export function useShellUser(): ShellUser | undefined {
     if (session.status !== "authenticated" || session.user === null) return undefined;
     const activeTenant = session.tenants.find((t) => t.tenantId === session.activeTenantId);
     if (activeTenant === undefined) return undefined;
-    return { id: session.user.id, roles: activeTenant.roles };
-  }, [session.status, session.user, session.activeTenantId, session.tenants]);
+    // session.roles merges globalRoles (e.g. SystemAdmin) + membership — same
+    // merge the server uses for handler access; membership-only broke platform
+    // workspace gating for global operators.
+    return { id: session.user.id, roles: session.roles };
+  }, [session.status, session.user, session.activeTenantId, session.tenants, session.roles]);
 }

package/src/auth-email-password/web/user-menu.tsx

@@ -33,7 +33,9 @@ export type UserMenuProps = {
    *  controlliert der Caller — wir packen nur den Frame drumrum. */
   readonly children?: ReactNode;
   /** "pill" (Default) = kompakter Topbar-Trigger; "sidebar" = volle NavUser-
-   *  Row (Avatar + Name + Email) für den `sidebarFooter`-Slot der App-Shell. */
+   *  Row (Avatar + Name + Email) für den `sidebarFooter`-Slot der App-Shell.
+   *  Requires a `SidebarProvider` ancestor — the default App-Shell
+   *  `sidebarFooter` slot already provides one. */
   readonly variant?: UserMenuVariant;
 };