feat(dashboard/contract): AuthGate prefers extension-contributed /login route, polish built-in form

Two follow-ons to slice (l):

1. The auth extension now owns the login UI by default. AuthGate fetches
   useContractGraph(loginContributor, "/login") before falling back to the
   built-in LoginScreen. authsome (or any extension) registers a single
   `/login` graph route under its contributor (default "auth") to take
   over — no React code, just YAML + a command intent.
   - extension.go: bootstrap config gains `loginContributor: "auth"`.
   - runtime/config.ts: surfaces `loginContributor` (default "auth").
   - auth/AuthGate.tsx: when authRequired, fetches the contract /login
     graph; renders it via GraphRenderer wrapped in
     ContributorProvider/RouteParamsProvider when the extension owns it.
     404 / no graph → built-in LoginScreen.

2. Built-in LoginScreen polished to match the latest shadcn login-03 layout
   that ships with the Sidebar block from ui.shadcn.com:
   - Centered card on a subtle bg-muted/40 background.
   - Brand lockup above the card (LayoutDashboard icon + "Forge Dashboard"
     by default; override via prop).
   - "Welcome back" heading + concise description copy.
   - Email/password inputs with placeholder, "Forgot password?" link
     beside the password label, full-width primary submit button.
   - Inline error block with AlertCircle icon for failed auth.
   - Footer caption beneath the card.

Tests: AuthGate test split into three cases — pass-through, contract-owned
/login override, fallback to built-in form on 404. 33 React tests green.

Author: juicycleff

extensions/dashboard/contract/shell/src/auth/AuthGate.tsx

@@ -2,27 +2,64 @@ import * as React from "react";
 import { usePrincipalStore } from "./principal";
 import { LoginScreen } from "./LoginScreen";
 import { LoadingNode } from "../runtime/fallbacks";
+import { GraphRenderer } from "../runtime/renderer";
+import { ContributorProvider, RouteParamsProvider } from "../runtime/context";
+import { useContractGraph } from "../contract/hooks";
+import { ContractClientError } from "../contract/client";
+import { loginContributor } from "../runtime/config";
 
 interface AuthGateProps {
   children: React.ReactNode;
 }
 
+const LOGIN_ROUTE = "/login";
+
 /**
  * AuthGate sits between the router and the dashboard layout. While the
  * principal is loading the gate renders a spinner; once loaded it either
  * passes through (auth disabled or user authenticated) or replaces the tree
- * with the built-in LoginScreen (auth enabled but unauthenticated).
+ * with a login UI.
  *
- * This is the slice (l) auth gate. Auth extensions that ship a contract
- * /login route bypass the LoginScreen by handling the login envelope on the
- * server side so the next /principal call succeeds; the gate is therefore
- * also the integration seam — no React-side hook required for the extension.
+ * Slice (l) login UI sourcing — preferred path is the auth extension's
+ * contract `/login` graph route under its contributor (default `auth`).
+ * The gate fetches it; if the contributor or route is missing the gate
+ * falls back to the built-in `LoginScreen` so the shell still works
+ * out-of-the-box. This means authsome (or any auth extension) owns the
+ * login UI by registering one graph node, no React code required.
  */
 export function AuthGate({ children }: AuthGateProps) {
   const loaded = usePrincipalStore((s) => s.loaded);
   const authRequired = usePrincipalStore((s) => s.authRequired);
 
   if (!loaded) return <LoadingNode />;
-  if (authRequired) return <LoginScreen />;
+  if (authRequired) return <LoginGate />;
   return <>{children}</>;
 }
+
+function LoginGate() {
+  const { data, error, isLoading } = useContractGraph(loginContributor, LOGIN_ROUTE);
+
+  if (isLoading) return <LoadingNode />;
+
+  // 404 (no contract /login route registered) → fall back to the built-in
+  // form. Any other error also falls through; the LoginScreen submission
+  // surfaces command-level errors of its own.
+  if (error || !data) {
+    return <LoginScreen />;
+  }
+
+  // The auth extension registered a /login route — render its graph as the
+  // login surface. Wrap with the contributor + route-params context the
+  // GraphRenderer expects so leaf intents (form.edit submitting auth.login)
+  // resolve correctly.
+  return (
+    <ContributorProvider value={loginContributor}>
+      <RouteParamsProvider value={data.routeParams}>
+        <GraphRenderer node={data.node} />
+      </RouteParamsProvider>
+    </ContributorProvider>
+  );
+}
+
+// Re-export for tests + external callers that need to inspect the error type.
+export { ContractClientError };

extensions/dashboard/contract/shell/src/auth/LoginScreen.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { LogIn } from "lucide-react";
+import { AlertCircle, LayoutDashboard } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ContractClient, ContractClientError } from "../contract/client";
 import { usePrincipalStore } from "./principal";
 import { loginOp } from "../runtime/config";
+import { cn } from "@/lib/utils";
 
 const DEFAULT_AUTH_CONTRIBUTOR = "auth";
 
@@ -15,19 +15,26 @@ interface LoginScreenProps {
   contributor?: string;
   /** Override the command op. Defaults to runtime config's loginOp ("auth.login"). */
   op?: string;
+  /** Override the brand label shown above the form. */
+  brand?: string;
+  /** Optional secondary description rendered below the title. */
+  description?: string;
 }
 
 /**
- * LoginScreen is the built-in fallback rendered by AuthGate when the
- * /principal endpoint returns 401. It issues a `kind: command` envelope to
- * the configured `loginOp` (default "auth.login") and on success reloads the
- * principal so the gate releases. Auth extensions that prefer a richer flow
- * register a contract /login graph route — AuthGate prefers that path when
- * available.
+ * LoginScreen is the built-in fallback rendered by AuthGate when no contract
+ * /login route is registered. Visual style follows the latest shadcn
+ * "login-03" layout — centered card on a subtle muted background, branded
+ * lockup above, polished form controls. Authsome-style auth extensions
+ * normally replace this entirely by publishing their own /login graph
+ * route; this component exists so the shell ships with a working sign-in
+ * UX out of the box.
  */
 export function LoginScreen({
   contributor = DEFAULT_AUTH_CONTRIBUTOR,
   op,
+  brand = "Forge Dashboard",
+  description = "Sign in to continue.",
 }: LoginScreenProps) {
   const reloadPrincipal = usePrincipalStore((s) => s.load);
   const [email, setEmail] = React.useState("");
@@ -55,32 +62,38 @@ export function LoginScreen({
   };
 
   return (
-    <div className="flex min-h-svh items-center justify-center bg-background p-6">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-1 text-center">
-          <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
-            <LogIn className="h-5 w-5" />
-          </div>
-          <CardTitle>Sign in</CardTitle>
-          <CardDescription>
-            Use your account credentials to continue to the dashboard.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={submit} className="space-y-4">
-            <div className="space-y-2">
+    <div className="flex min-h-svh w-full items-center justify-center bg-muted/40 p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <BrandLockup brand={brand} />
+        <div className="flex flex-col gap-6 rounded-xl border border-border/60 bg-background p-6 shadow-sm sm:p-8">
+          <header className="flex flex-col gap-1.5">
+            <h1 className="text-xl font-semibold tracking-tight">Welcome back</h1>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </header>
+          <form onSubmit={submit} className="flex flex-col gap-5">
+            <div className="flex flex-col gap-2">
               <Label htmlFor="login-email">Email</Label>
               <Input
                 id="login-email"
                 type="email"
                 autoComplete="email"
+                placeholder="you@example.com"
                 required
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
               />
             </div>
-            <div className="space-y-2">
-              <Label htmlFor="login-password">Password</Label>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="login-password">Password</Label>
+                <a
+                  href="#"
+                  className="text-xs font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+                  tabIndex={-1}
+                >
+                  Forgot password?
+                </a>
+              </div>
               <Input
                 id="login-password"
                 type="password"
@@ -91,16 +104,36 @@ export function LoginScreen({
               />
             </div>
             {errorMsg ? (
-              <div className="rounded-md border border-destructive/30 bg-destructive/10 p-2 text-sm text-destructive">
-                {errorMsg}
+              <div
+                role="alert"
+                className={cn(
+                  "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+                )}
+              >
+                <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
+                <span className="leading-tight">{errorMsg}</span>
               </div>
             ) : null}
             <Button type="submit" className="w-full" disabled={submitting}>
               {submitting ? "Signing in…" : "Sign in"}
             </Button>
           </form>
-        </CardContent>
-      </Card>
+        </div>
+        <p className="text-center text-xs text-muted-foreground">
+          Protected by your organization&apos;s sign-in policy.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function BrandLockup({ brand }: { brand: string }) {
+  return (
+    <div className="flex flex-col items-center gap-2 text-center">
+      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-foreground text-background">
+        <LayoutDashboard className="h-5 w-5" aria-hidden />
+      </div>
+      <span className="text-sm font-medium tracking-tight text-foreground">{brand}</span>
     </div>
   );
 }

extensions/dashboard/contract/shell/src/runtime/config.ts

@@ -21,6 +21,12 @@ interface InjectedConfig {
   authEnabled?: boolean;
   loginPath?: string;
   loginOp?: string;
+  // Slice (l): the contributor that owns the contract /login graph route.
+  // AuthGate fetches `useContractGraph(loginContributor, "/login")` first;
+  // if it 404s, the built-in LoginScreen renders. An auth extension drops
+  // a /login route into its manifest under this contributor name to
+  // override the form completely.
+  loginContributor?: string;
 }
 
 declare global {
@@ -44,3 +50,4 @@ export const shellBase: string = injected.shellBase ?? `${FALLBACK_BASE}/contrac
 export const authEnabled: boolean = injected.authEnabled ?? false;
 export const loginPath: string = injected.loginPath ?? `${FALLBACK_BASE}/login`;
 export const loginOp: string = injected.loginOp ?? "auth.login";
+export const loginContributor: string = injected.loginContributor ?? "auth";

extensions/dashboard/contract/shell/test/auth.test.tsx

@@ -2,11 +2,24 @@ import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { AuthGate } from "../src/auth/AuthGate";
 import { LoginScreen } from "../src/auth/LoginScreen";
 import { usePrincipalStore } from "../src/auth/principal";
+import { IntentRegistryProvider } from "../src/runtime/context";
+import { buildIntentRegistry } from "../src/intents/register";
 
 const server = setupServer();
+const intentRegistry = buildIntentRegistry();
+
+function withProviders(ui: React.ReactElement) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false, staleTime: 0 } } });
+  return (
+    <QueryClientProvider client={qc}>
+      <IntentRegistryProvider value={intentRegistry}>{ui}</IntentRegistryProvider>
+    </QueryClientProvider>
+  );
+}
 
 beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
 afterEach(() => {
@@ -30,27 +43,83 @@ describe("AuthGate", () => {
       principal: { subject: "x", displayName: "X", roles: [], scopes: [] },
     });
     render(
-      <AuthGate>
-        <div>protected-content</div>
-      </AuthGate>,
+      withProviders(
+        <AuthGate>
+          <div>protected-content</div>
+        </AuthGate>,
+      ),
     );
     expect(screen.getByText("protected-content")).toBeInTheDocument();
   });
 
-  it("renders LoginScreen when principal is loaded and auth required", () => {
+  it("falls back to built-in LoginScreen when no contract /login route is registered", async () => {
+    server.use(
+      // No /login graph route → 404 envelope. AuthGate should fall through.
+      http.post("/api/dashboard/v1", () =>
+        HttpResponse.json(
+          { ok: false, envelope: "v1", error: { code: "NOT_FOUND", message: "no /login" } },
+          { status: 404 },
+        ),
+      ),
+    );
     usePrincipalStore.setState({
       loaded: true,
       authRequired: true,
       principal: null,
     });
     render(
-      <AuthGate>
-        <div>protected-content</div>
-      </AuthGate>,
+      withProviders(
+        <AuthGate>
+          <div>protected-content</div>
+        </AuthGate>,
+      ),
     );
     expect(screen.queryByText("protected-content")).not.toBeInTheDocument();
-    // The login form has an email field — distinct enough to confirm it rendered.
-    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    });
+  });
+
+  it("renders the auth extension's contract /login graph when registered", async () => {
+    server.use(
+      http.post("/api/dashboard/v1", () =>
+        HttpResponse.json({
+          ok: true,
+          envelope: "v1",
+          kind: "graph",
+          data: {
+            intent: "page.shell",
+            route: "/login",
+            slots: {
+              main: [
+                {
+                  intent: "custom",
+                  component: "extension-login-marker",
+                  props: { label: "extension-login-here" },
+                },
+              ],
+            },
+          },
+          meta: {},
+        }),
+      ),
+    );
+    usePrincipalStore.setState({
+      loaded: true,
+      authRequired: true,
+      principal: null,
+    });
+    render(
+      withProviders(
+        <AuthGate>
+          <div>protected-content</div>
+        </AuthGate>,
+      ),
+    );
+    // Built-in form should not appear when the contract owns /login.
+    await waitFor(() => {
+      expect(screen.queryByLabelText(/email/i)).not.toBeInTheDocument();
+    });
   });
 });
 

extensions/dashboard/extension.go

@@ -1760,7 +1760,13 @@ func (e *Extension) makeShellSPAHandler(shellFS fs.FS) http.HandlerFunc {
 			"shellBase":    e.config.BasePath + "/contract/app",
 			"authEnabled":  e.config.EnableAuth,
 			"loginPath":    e.config.BasePath + e.config.LoginPath,
-			"loginOp":      "auth.login",
+			// Slice (l): the contributor that owns the contract /login graph
+			// route. Auth extensions like authsome register a `/login` route
+			// under their own contributor and the shell renders that page
+			// instead of the built-in LoginScreen. Default "auth" for
+			// authsome; deployments can override via config later.
+			"loginContributor": "auth",
+			"loginOp":          "auth.login",
 		}
 		cfgJSON, _ := json.Marshal(cfg)
 		bootstrap := []byte("<script>window.__FORGE_DASHBOARD__=" + string(cfgJSON) + ";</script>")