fix: theme auth gate review scenes

Author: pallyoung

packages/web/src/styles/components.css

@@ -2257,9 +2257,21 @@ body.is-resizing-panels * {
 .auth-screen {
   padding: var(--sp-8);
   background:
-    radial-gradient(circle at top, rgba(120, 215, 178, 0.08), transparent 34%),
-    radial-gradient(circle at bottom right, rgba(108, 182, 255, 0.1), transparent 30%),
-    linear-gradient(180deg, rgba(17, 24, 31, 0.96), rgba(10, 16, 20, 0.99));
+    radial-gradient(
+      circle at top,
+      color-mix(in srgb, var(--accent-green) 12%, transparent),
+      transparent 34%
+    ),
+    radial-gradient(
+      circle at bottom right,
+      color-mix(in srgb, var(--accent-blue) 14%, transparent),
+      transparent 30%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--bg-page) 92%, var(--bg-surface) 8%),
+      var(--bg-page)
+    );
 }
 
 .auth-card-shell {
@@ -2268,9 +2280,13 @@ body.is-resizing-panels * {
   text-align: left;
   gap: var(--sp-4);
   padding: var(--sp-10);
-  background: linear-gradient(180deg, rgba(17, 24, 31, 0.96), rgba(13, 20, 26, 0.94));
-  border-color: color-mix(in srgb, var(--border) 88%, rgba(108, 182, 255, 0.18));
-  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--bg-surface) 98%, white 2%),
+    color-mix(in srgb, var(--bg-surface) 88%, var(--bg-page) 12%)
+  );
+  border-color: color-mix(in srgb, var(--border) 88%, var(--accent-blue) 12%);
+  box-shadow: var(--shadow-xl);
 }
 
 .auth-card-shell .welcome-kicker,

packages/web/src/styles/components.theme.test.ts

@@ -187,6 +187,20 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(bottomTerminalShell).not.toContain("rgba(17, 24, 31, 0.96)");
   });
 
+  it("keeps auth shells theme-aware instead of forcing dark gradients", () => {
+    const authScreen = getLastRuleBlock(".auth-screen");
+    const authCard = getLastRuleBlock(".auth-card-shell");
+
+    expect(authScreen).toContain("var(--bg-page)");
+    expect(authScreen).toContain("var(--accent-green)");
+    expect(authScreen).toContain("var(--accent-blue)");
+    expect(authScreen).not.toContain("rgba(17, 24, 31, 0.96)");
+    expect(authCard).toContain("var(--bg-surface)");
+    expect(authCard).toContain("var(--accent-blue)");
+    expect(authCard).toContain("var(--shadow-xl)");
+    expect(authCard).not.toContain("rgba(13, 20, 26, 0.94)");
+  });
+
   it("keeps quick actions sized to its label instead of icon-button width", () => {
     const quickActions = getLastRuleBlock(".topbar-quick-actions");
 

packages/web/src/ui-preview/catalog.test.tsx

@@ -74,6 +74,7 @@ describe("UI preview catalog", () => {
         "workspace-desktop",
         "workspace-mobile",
         "auth-preview",
+        "session-gate",
         "not-found",
       ])
     );
@@ -168,6 +169,13 @@ describe("UI preview catalog", () => {
     expect(document.querySelector(".workspace-resolving-card")).toBeTruthy();
   });
 
+  it("renders the session gate scene through the shared auth shell", async () => {
+    renderScene("session-gate");
+
+    expect(await screen.findByRole("button", { name: /re-enter|重新进入/i })).toBeInTheDocument();
+    expect(document.querySelector(".auth-card-shell")).toBeTruthy();
+  });
+
   it("renders the file-tree delete confirm scene with the shared danger dialog", async () => {
     renderScene("file-tree-delete-confirm");
 

packages/web/src/ui-preview/scene-metadata.ts

@@ -145,6 +145,18 @@ export const UI_PREVIEW_SCENE_METADATA: UiPreviewSceneMetadata[] = [
     locales: ["zh", "en"],
     capture: { selector: ".auth-card-shell" },
   },
+  {
+    id: "session-gate",
+    title: "Session Gate",
+    category: "error",
+    source: "real-route",
+    description:
+      "Session gate shell shown when activation is displaced and the app requires re-entry.",
+    devices: ["desktop", "mobile"],
+    themes: allThemeIds(),
+    locales: ["zh", "en"],
+    capture: { selector: ".auth-card-shell" },
+  },
   {
     id: "not-found",
     title: "Not Found",

packages/web/src/ui-preview/scenes/page-scenes.tsx

@@ -1,5 +1,6 @@
 import type { FileNode, GitStatus, Session, Workspace } from "@coder-studio/core";
 import { LoginPage } from "../../features/auth";
+import { SessionGatePage } from "../../features/auth/session-gate";
 import { NotFoundPage } from "../../features/not-found";
 import { SettingsPage } from "../../features/settings";
 import { WelcomePage } from "../../features/welcome";
@@ -211,6 +212,15 @@ export function createPageScenes(): UiPreviewSceneDefinition[] {
       }),
       render: () => <LoginPage />,
     }),
+    scene("session-gate", {
+      router: () => ({ initialEntries: ["/session-gate"], path: "/session-gate" }),
+      seed: (context) => ({
+        ...context,
+        authEnabled: false,
+        authenticated: false,
+      }),
+      render: () => <SessionGatePage />,
+    }),
     scene("not-found", {
       router: () => ({ initialEntries: ["/preview-missing"], path: "*" }),
       seed: (context) => ({ ...context }),