@agent-native/toolkit 0.201.1 → 0.202.0-nightly-20261006033736

package/src/app/auth/AuthPage.tsx

@@ -32,7 +32,7 @@ import { AuthForm } from "@agent-native/toolkit/onboarding";
 import { IconLoader2 } from "@tabler/icons-react";
 import * as React from "react";
 
-import { StarfieldBackground } from "../shared/StarfieldBackground.js";
+import { WaveBackground } from "../shared/WaveBackground.js";
 
 export type {
   AuthLegalNotice,
@@ -595,16 +595,6 @@ export function shouldStartWithLocalDev(
   );
 }
 
-function AuthMarketingBackground() {
-  return (
-    <div
-      aria-hidden="true"
-      className="auth-marketing-screenshot"
-      data-agent-native-marketing-background
-    />
-  );
-}
-
 export function AuthPage(props: AuthPageProps) {
   const {
     authMode,
@@ -2349,15 +2339,6 @@ export function AuthPage(props: AuthPageProps) {
       </span>
     </p>
   ) : null;
-  const signupWave =
-    usesMarketingWelcome && view === "signup" ? (
-      <div className="auth-marketing-signup-wave">
-        <StarfieldBackground
-          className="auth-marketing-signup-wave-canvas"
-          transparent
-        />
-      </div>
-    ) : null;
   const signupForm = (
     <AuthForm
       id="signup-form"
@@ -2423,7 +2404,6 @@ export function AuthPage(props: AuthPageProps) {
       footer={
         <>
           {legalNote}
-          {signupWave}
           {localModeNote}
         </>
       }
@@ -3052,12 +3032,7 @@ export function AuthPage(props: AuthPageProps) {
             {authCard}
           </aside>
           <section className="marketing-panel">
-            <div className="auth-marketing-visual">
-              <div className="auth-marketing-screenshot-wrap">
-                <AuthMarketingBackground />
-              </div>
-              {marketingContent}
-            </div>
+            <div className="auth-marketing-visual">{marketingContent}</div>
           </section>
         </div>
       </div>
@@ -3129,13 +3104,19 @@ export function AuthPage(props: AuthPageProps) {
     </div>
   );
   return (
-    <>
-      {localePicker}
-      {initialPrompt ? (
-        <div className="auth-centered">{authCard}</div>
-      ) : (
-        marketingSurface
-      )}
-    </>
+    <div
+      className="auth-page"
+      data-auth-marketing={marketingCopy && !initialPrompt ? "true" : undefined}
+    >
+      <WaveBackground className="auth-wave-background" />
+      <div className="auth-page-content">
+        {localePicker}
+        {initialPrompt ? (
+          <div className="auth-centered">{authCard}</div>
+        ) : (
+          marketingSurface
+        )}
+      </div>
+    </div>
   );
 }

package/src/app/auth/server.spec.ts

@@ -0,0 +1,68 @@
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import {
+  getOnboardingHtml,
+  getResetPasswordHtml,
+} from "@agent-native/core/server/onboarding-html";
+import { describe, expect, it } from "vitest";
+
+import { renderAuthPage, renderAuthResetPasswordPage } from "./server.js";
+
+const repoRoot = fileURLToPath(new URL("../../../../../", import.meta.url));
+const templatesRoot = join(repoRoot, "templates");
+const templateAuthPlugins = readdirSync(templatesRoot, {
+  withFileTypes: true,
+})
+  .filter((entry) => entry.isDirectory())
+  .map((entry) => join(templatesRoot, entry.name, "server/plugins/auth.ts"))
+  .filter((path) => {
+    try {
+      readFileSync(path);
+      return true;
+    } catch {
+      return false;
+    }
+  });
+const firstPartyAuthPlugins = [
+  ...templateAuthPlugins,
+  join(repoRoot, "packages/docs/server/plugins/auth.ts"),
+  join(repoRoot, "packages/dispatch/src/server/plugins/auth.ts"),
+  join(repoRoot, "packages/core/src/templates/default/server/plugins/auth.ts"),
+];
+
+describe("Toolkit auth server renderer", () => {
+  it("renders the full sign-in page and shared wave into the initial HTML", () => {
+    const html = getOnboardingHtml({
+      requestHost: "slides.agent-native.com",
+      renderSignInPage: renderAuthPage,
+    });
+
+    expect(html).toContain('data-agent-native-wave="true"');
+    expect(html).toContain('id="signup-form"');
+    expect(html).toContain('id="login-form"');
+    expect(html).not.toContain('data-agent-native-auth-fallback="true"');
+  });
+
+  it("renders the reset password page before hydration", () => {
+    const html = getResetPasswordHtml(
+      "/_agent-native/auth/reset",
+      renderAuthResetPasswordPage,
+    );
+
+    expect(html).toContain('id="reset-form"');
+    expect(html).not.toContain('data-agent-native-auth-fallback="true"');
+  });
+
+  it("routes every first-party auth plugin through the shared SSR renderer", () => {
+    for (const path of firstPartyAuthPlugins) {
+      const source = readFileSync(path, "utf8");
+      if (source.includes("@agent-native/dispatch/server")) continue;
+      expect(source, path).toContain("createToolkitAuthPlugin");
+      expect(source, path).not.toContain(
+        'createAuthPlugin } from "@agent-native/core/server"',
+      );
+    }
+  });
+});

package/src/app/auth/server.ts

@@ -0,0 +1,29 @@
+import { createAuthPlugin, type AuthOptions } from "@agent-native/core/server";
+import type {
+  AuthPageProps,
+  ResetPasswordPageProps,
+} from "@agent-native/core/shared/auth-page-types";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+
+import { AuthPage } from "./AuthPage.js";
+import { ResetPasswordPage } from "./ResetPasswordPage.js";
+
+export function renderAuthPage(props: AuthPageProps): string {
+  return renderToString(createElement(AuthPage, props));
+}
+
+export function renderAuthResetPasswordPage(
+  props: ResetPasswordPageProps,
+): string {
+  return renderToString(createElement(ResetPasswordPage, props));
+}
+
+export function createToolkitAuthPlugin(options: AuthOptions = {}) {
+  return createAuthPlugin({
+    ...options,
+    renderSignInPage: options.renderSignInPage ?? renderAuthPage,
+    renderResetPasswordPage:
+      options.renderResetPasswordPage ?? renderAuthResetPasswordPage,
+  });
+}