handoff-app 2.0.0-9 → 2.0.0

package/src/app/lib/server-module.ts

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import path from 'path';
+import { pathToFileURL } from 'url';
+import { resolveEnvReferences } from '@handoff/config/from-env';
+
+/**
+ * Import a consumer's server-only module (a custom asset storage, AI or email
+ * provider) by the path the config gives, relative to the project.
+ *
+ * A registry bundle mirrors the tracing root and runs with its root as the working directory, so the
+ * traced copy is at `<cwd>/<HANDOFF_BUNDLE_PROJECT_DIR>/<module>`. A workspace server reads the
+ * original file under `HANDOFF_WORKING_PATH`. A bare import would resolve against the webpack chunk.
+ */
+export const importServerModule = async (specifier: string): Promise<any> => {
+  const candidates = path.isAbsolute(specifier)
+    ? [specifier]
+    : [
+        path.resolve(process.cwd(), process.env.HANDOFF_BUNDLE_PROJECT_DIR ?? '', specifier),
+        path.resolve(process.env.HANDOFF_WORKING_PATH ?? process.cwd(), specifier),
+      ];
+  const target = candidates.find((candidate) => fs.existsSync(candidate)) ?? candidates[candidates.length - 1];
+  return import(/* webpackIgnore: true */ pathToFileURL(target).href);
+};
+
+/**
+ * Import a custom module and return its default export. A factory export is called first, with
+ * `fromEnv()` values in `context.options` resolved.
+ */
+export const loadServerModule = async (specifier: string, context: { options?: Record<string, unknown>; [key: string]: unknown }): Promise<unknown> => {
+  const mod = await importServerModule(specifier);
+  const exported = mod?.default ?? mod;
+  if (typeof exported !== 'function') return exported;
+  return exported({ ...context, options: resolveEnvReferences(context.options ?? {}, process.env), env: process.env });
+};

package/src/app/lib/utils.ts

@@ -14,6 +14,19 @@ export const toAbsolutePath = (input: string): string => {
   return `/${trimSlashes(input)}`;
 };
 
+/**
+ * A server-built path with the app's base path removed, so `next/link` does not re-apply it. Menu
+ * items and tool sources already carry the prefix; with no base path this returns the route as is.
+ */
+export const stripBasePath = (input: string): string => {
+  const base = trimSlashes(process.env.HANDOFF_APP_BASE_PATH ?? '');
+  let rel = input.replace(/^\/+/, '');
+  if (base && (rel === base || rel.startsWith(`${base}/`))) {
+    rel = rel.slice(base.length).replace(/^\/+/, '');
+  }
+  return `/${rel}`;
+};
+
 export const normalizePathForMatch = (input: string): string => {
   const [pathname] = input.split(/[?#]/);
   return trimSlashes(pathname);
@@ -38,3 +51,10 @@ export const filterOutNull = <T>(value: T): value is NonNullable<T> => value !==
  */
 export const hasRenderableNav = (section?: SectionLink | null): boolean =>
   !!section?.subSections?.some((sub) => (sub.menu && sub.menu.length > 0) || !!sub.dynamic);
+
+/**
+ * The browser title: a page's own `metaTitle` as written, otherwise its title followed by the
+ * site title from `app.title`.
+ */
+export const pageTitle = (metadata: { title?: string; metaTitle?: string }, siteTitle?: string): string =>
+  metadata.metaTitle || [metadata.title, siteTitle].filter(Boolean).join(' | ');

package/src/app/next.config.mjs

@@ -18,18 +18,7 @@ const resolveBasePath = (rawBasePath) => {
 //   - otherwise  → a normal server (workspace `next dev`/`start`).
 const handoffBuildTarget = process.env.HANDOFF_BUILD_TARGET;
 const handoffWorkingPath = path.resolve('%HANDOFF_WORKING_PATH%');
-
-// A configured custom asset-storage adapter module (relative to the consumer project). It is loaded
-// by a variable dynamic import at runtime, which nft cannot statically trace, so force it (and its
-// resolvable deps) into the registry bundle. Empty/unset for the built-in database/Vercel adapters.
-const handoffAssetStorageModule = '%HANDOFF_ASSET_STORAGE_MODULE%';
-const resolveAssetStorageInclude = () => {
-  if (handoffBuildTarget !== 'registry' || !handoffAssetStorageModule || handoffAssetStorageModule.startsWith('%HANDOFF_')) {
-    return undefined;
-  }
-  const abs = path.isAbsolute(handoffAssetStorageModule) ? handoffAssetStorageModule : path.resolve(handoffWorkingPath, handoffAssetStorageModule);
-  return { '/api/**': [abs] };
-};
+const handoffTracingRoot = path.resolve('%HANDOFF_TRACING_ROOT%');
 
 const resolveOutputMode = (target) => {
   if (target === 'static') {
@@ -49,11 +38,10 @@ const resolveOutputMode = (target) => {
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: resolveOutputMode(handoffBuildTarget),
-  // The tracer only copies files inside its root, so root it at the consumer project — the common
-  // ancestor of the staged app (`node_modules/handoff-app/.handoff/<projectId>`) and the runtime deps
-  // hoisted to the top-level `node_modules`. Rooting at the package dir would trace an empty
-  // `node_modules` and ship a non-bootable bundle. Registry-only; workspace dev/static is unchanged.
-  outputFileTracingRoot: handoffBuildTarget === 'registry' ? handoffWorkingPath : undefined,
+  // Rooted at the common ancestor of the staged app and the `node_modules` that the runtime
+  // dependencies resolve from. The builder bakes this value (`resolveRegistryTracingRoot`), so the
+  // assembly step uses the same root. This applies to the registry target only.
+  outputFileTracingRoot: handoffBuildTarget === 'registry' ? handoffTracingRoot : undefined,
   // nft speculatively traces the export-only paths the app references (`export-detail.json` and the
   // materializer's `.next/export/**` targets) as runtime deps. They never exist in a `standalone`
   // build, and `copyTracedFiles` copies traced files with no existence guard, so leaving them in
@@ -61,9 +49,6 @@ const nextConfig = {
   // Registry-only; static export, which legitimately produces these files, is untouched.
   outputFileTracingExcludes:
     handoffBuildTarget === 'registry' ? { '**': ['**/export-detail.json', '**/.next/export/**'] } : undefined,
-  // Force a configured custom asset-storage module into the registry trace (dynamic import is opaque
-  // to nft). Its SDK deps are additionally asserted via `getRequiredRegistryRuntimeModules`.
-  outputFileTracingIncludes: resolveAssetStorageInclude(),
   reactStrictMode: true,
   pageExtensions: ['js', 'jsx', 'ts', 'tsx'],
   trailingSlash: true,
@@ -102,6 +87,9 @@ const nextConfig = {
     // static export). Read straight from the build env — empty for workspace dev/start.
     HANDOFF_BUILD_TARGET: handoffBuildTarget ?? '',
     HANDOFF_WORKING_PATH: '%HANDOFF_WORKING_PATH%',
+    // Where the project sits inside a registry bundle, which mirrors the tracing root. Custom server
+    // modules are imported from there (see `lib/server-module.ts`).
+    HANDOFF_BUNDLE_PROJECT_DIR: path.relative(handoffTracingRoot, handoffWorkingPath),
     HANDOFF_MODULE_PATH: '%HANDOFF_MODULE_PATH%',
     HANDOFF_EXPORT_PATH: '%HANDOFF_EXPORT_PATH%',
     HANDOFF_WEBSOCKET_PORT: '%HANDOFF_WEBSOCKET_PORT%',
@@ -114,15 +102,29 @@ const nextConfig = {
     // Whether this build serves `/api/mcp/`. Both the route and the header UI read this, so a
     // disabled build hides the affordance instead of showing it fail against a 404.
     HANDOFF_MCP_ENABLED: '%HANDOFF_MCP_ENABLED%',
+    // Whether this build serves the docs AI assistant. Config-only and baked, like the MCP flag, so
+    // a build without it leaves out both `/api/ai/*` and the header control.
+    HANDOFF_AI_ENABLED: '%HANDOFF_AI_ENABLED%',
+    // The connection list `runtime.ai.connections` declared (env-var *names* and non-secret options
+    // only). Deliberately not named `HANDOFF_AI_CONNECTIONS`: Next inlines every name in this block
+    // at build time, which would shadow the deployment-supplied list of that name that the server
+    // reads at request time and merges over this one.
+    HANDOFF_AI_BAKED_CONNECTIONS: '%HANDOFF_AI_BAKED_CONNECTIONS%',
+    HANDOFF_AI_DEFAULT_MODEL: '%HANDOFF_AI_DEFAULT_MODEL%',
     HANDOFF_REGISTRY_DRIVER: '%HANDOFF_REGISTRY_DRIVER%',
     HANDOFF_REGISTRY_DATABASE_URL_ENV: '%HANDOFF_REGISTRY_DATABASE_URL_ENV%',
-    // Asset storage selection (provider + non-secret options + env-var names). Secret values (Blob
-    // token, custom credentials) are read from their named env var at request time, never baked.
-    HANDOFF_ASSET_STORAGE_ADAPTER: '%HANDOFF_ASSET_STORAGE_ADAPTER%',
+    // Asset storage provider, module, and options JSON. Option references keep only their variable
+    // name and are resolved at request time, so secret values are never baked.
+    HANDOFF_ASSET_STORAGE_PROVIDER: '%HANDOFF_ASSET_STORAGE_PROVIDER%',
     HANDOFF_ASSET_STORAGE_MODULE: '%HANDOFF_ASSET_STORAGE_MODULE%',
-    HANDOFF_ASSET_STORAGE_TOKEN_ENV: '%HANDOFF_ASSET_STORAGE_TOKEN_ENV%',
     HANDOFF_ASSET_STORAGE_MAX_INLINE_BYTES: '%HANDOFF_ASSET_STORAGE_MAX_INLINE_BYTES%',
     HANDOFF_ASSET_STORAGE_OPTIONS: '%HANDOFF_ASSET_STORAGE_OPTIONS%',
+    // Registry email provider, sender, module, and options JSON. Option references keep only their
+    // env-var names; the values are read at request time.
+    HANDOFF_EMAIL_PROVIDER: '%HANDOFF_EMAIL_PROVIDER%',
+    HANDOFF_EMAIL_FROM: '%HANDOFF_EMAIL_FROM%',
+    HANDOFF_EMAIL_MODULE: '%HANDOFF_EMAIL_MODULE%',
+    HANDOFF_EMAIL_OPTIONS: '%HANDOFF_EMAIL_OPTIONS%',
   },
   images: {
     unoptimized: true,

package/src/app/pages/[...slug]/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../components/util';
 import { resolveDocsBackend } from '../../lib/docs-api/backend';
 import { documentationMetadata, REGISTRY_PAGE_REVALIDATE_SECONDS } from '../../lib/docs-api/page-rendering';
+import { pageTitle } from '../../lib/utils';
 import { Home, getStaticProps as getHomeStaticProps } from '../index';
 
 type CatchAllDocumentationProps = DocumentationProps & { homeAlias?: boolean };
@@ -114,7 +115,7 @@ export default function DocCatchAllPage({
     return (
       <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
         <Head>
-          <title>404 - Page Not Found</title>
+          <title>{pageTitle({ title: 'Page Not Found' }, config?.app?.title)}</title>
           <meta name="description" content="Page Not Found" />
         </Head>
         <NotFound />

package/src/app/pages/_app.tsx

@@ -1,5 +1,6 @@
 import type { AppProps } from 'next/app';
 
+import { AiAssistantProvider } from '../components/AiAssistant/AiAssistantProvider';
 import { RegistrySessionProvider } from '../components/Auth/RegistrySessionProvider';
 import { RegistryInstallGate } from '../components/Auth/RegistryInstallGate';
 import { NavProvider } from '../components/context/NavProvider';
@@ -13,8 +14,11 @@ function MyApp({ Component, pageProps }: AppProps) {
     <RegistrySessionProvider>
       <RegistryInstallGate>
         <NavProvider initialNav={pageProps.navData} currentSectionId={pageProps.currentSectionId}>
-          {/* @ts-ignore */}
-          <Component {...pageProps} />
+          {/* Above the page tree: every page builds its own Layout, which a soft navigation replaces. */}
+          <AiAssistantProvider>
+            {/* @ts-ignore */}
+            <Component {...pageProps} />
+          </AiAssistantProvider>
         </NavProvider>
       </RegistryInstallGate>
     </RegistrySessionProvider>

package/src/app/pages/_document.tsx

@@ -1,9 +1,13 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import Script from 'next/script';
+import { dockWidthScript } from '../components/AiAssistant/dockState';
 import { getClientRuntimeConfig } from '../components/util';
 
 const config = getClientRuntimeConfig();
 
+// A build with no assistant must not reserve a column for state an earlier build left behind.
+const hasAssistant = process.env.HANDOFF_AI_ENABLED === 'true' && process.env.HANDOFF_BUILD_TARGET !== 'static';
+
 class MyDocument extends Document {
   render() {
     return (
@@ -11,6 +15,8 @@ class MyDocument extends Document {
         <Head>
           <link rel="shortcut icon" href={`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/favicon.ico`} />
           <link rel="icon" sizes="16x16 32x32 64x64" href={`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/favicon.ico`} />
+          {/* Blocking on purpose: it reserves the assistant's column before the first paint. */}
+          {hasAssistant && <script dangerouslySetInnerHTML={{ __html: dockWidthScript }} />}
           {config?.app?.google_tag_manager && (
             <Script id="google-tag-manager" strategy="afterInteractive">
               {`

package/src/app/pages/account/ai.tsx

@@ -0,0 +1,183 @@
+import type { ClientConfig } from '@handoff/types/config';
+import type { GetStaticProps } from 'next';
+import { getClientRuntimeConfig } from '../../components/util';
+import { Check, KeyRound, Trash2 } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { FormEvent, useCallback, useEffect, useState } from 'react';
+import { AccountLayout } from '../../components/Auth/AccountLayout';
+import { authApiUrl, readApiError } from '../../components/Auth/api';
+import { Alert, AlertDescription } from '../../components/ui/alert';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
+import { ConfirmDialog } from '../../components/ui/confirm-dialog';
+import { Input } from '../../components/ui/input';
+
+/**
+ * `/account/ai`: the one reader-facing setting this feature adds.
+ *
+ * One list, no add form. Each row is a connection the config declares with `credential: 'user'`,
+ * its endpoint and models shown as read-only text. There is no endpoint or model to enter.
+ *
+ * A key is write-only: once saved, the row shows only that it is configured.
+ */
+
+interface AiKeyConnection {
+  id: string;
+  label: string;
+  baseUrl?: string;
+  models?: string[];
+  configured: boolean;
+}
+
+export const getStaticProps: GetStaticProps = async () => ({ props: { config: getClientRuntimeConfig() } });
+
+export default function AiKeysPage({ config }: { config: ClientConfig }) {
+  if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
+    return <AccountLayout config={config} title="AI providers">{null}</AccountLayout>;
+  }
+
+  return <RegistryAiKeysPage config={config} />;
+}
+
+function RegistryAiKeysPage({ config }: { config: ClientConfig }) {
+  const { data: session } = useSession();
+  const [connections, setConnections] = useState<AiKeyConnection[]>([]);
+  const [pending, setPending] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState<string | null>(null);
+  const [connectionToRemove, setConnectionToRemove] = useState<AiKeyConnection | null>(null);
+
+  const load = useCallback(async () => {
+    const response = await fetch(authApiUrl('/api/account/ai/keys'), { credentials: 'include', cache: 'no-store' });
+    if (!response.ok) throw new Error(await readApiError(response, 'Could not load AI providers.'));
+    const body = (await response.json()) as { connections: AiKeyConnection[] };
+    setConnections(body.connections);
+  }, []);
+
+  useEffect(() => {
+    if (session?.user) void load().catch((reason: Error) => setError(reason.message));
+  }, [load, session]);
+
+  const save = async (connection: AiKeyConnection, event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const key = String(new FormData(form).get('key') ?? '').trim();
+    setPending(connection.id);
+    setError(null);
+    setSaved(null);
+    try {
+      const response = await fetch(authApiUrl(`/api/account/ai/keys/${encodeURIComponent(connection.id)}`), {
+        method: 'PUT',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ key }),
+      });
+      if (!response.ok) {
+        setError(await readApiError(response, 'Could not save the API key.'));
+        return;
+      }
+      form.reset();
+      setSaved(connection.id);
+      await load();
+    } catch {
+      setError('Could not connect to the registry.');
+    } finally {
+      setPending(null);
+    }
+  };
+
+  const remove = async (connection: AiKeyConnection) => {
+    setPending(connection.id);
+    setError(null);
+    setSaved(null);
+    try {
+      const response = await fetch(authApiUrl(`/api/account/ai/keys/${encodeURIComponent(connection.id)}`), {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      if (!response.ok) {
+        setError(await readApiError(response, 'Could not remove the API key.'));
+        return;
+      }
+      await load();
+    } finally {
+      setPending(null);
+    }
+  };
+
+  return (
+    <AccountLayout config={config} title="AI providers" description="Add your own keys for the AI providers this site uses.">
+      <div className="space-y-6">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {connections.length === 0 ? (
+          <p className="text-sm text-muted-foreground">This site does not ask readers for their own AI provider keys.</p>
+        ) : (
+          connections.map((connection) => (
+            <Card key={connection.id}>
+              <CardHeader>
+                <div className="flex flex-wrap items-center gap-2">
+                  <CardTitle className="text-base">{connection.label}</CardTitle>
+                  {connection.configured && (
+                    <Badge variant="secondary" className="gap-1">
+                      <Check className="h-3 w-3" />
+                      Configured
+                    </Badge>
+                  )}
+                </div>
+                <CardDescription>
+                  {connection.baseUrl}
+                  {connection.models?.length ? ` · ${connection.models.join(', ')}` : ''}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                {connection.configured ? (
+                  <Button variant="outline" onClick={() => setConnectionToRemove(connection)} disabled={pending === connection.id}>
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Remove
+                  </Button>
+                ) : (
+                  <form onSubmit={(event) => void save(connection, event)} className="flex flex-wrap items-center gap-2">
+                    <Input
+                      name="key"
+                      type="password"
+                      autoComplete="off"
+                      placeholder={`${connection.label} API key`}
+                      className="max-w-sm"
+                      required
+                    />
+                    <Button type="submit" disabled={pending === connection.id}>
+                      <KeyRound className="mr-2 h-4 w-4" />
+                      Save
+                    </Button>
+                    {saved === connection.id && <span className="text-sm text-muted-foreground">Saved.</span>}
+                  </form>
+                )}
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+
+      {connectionToRemove ? (
+        <ConfirmDialog
+          open
+          onOpenChange={(open) => {
+            if (!open) setConnectionToRemove(null);
+          }}
+          title={`Remove your ${connectionToRemove.label} API key?`}
+          description="You can add a new key at any time."
+          confirmLabel="Remove"
+          pendingLabel="Removing…"
+          variant="destructive"
+          onConfirm={() => remove(connectionToRemove)}
+        />
+      ) : null}
+    </AccountLayout>
+  );
+}

package/src/app/pages/account/index.tsx

@@ -1,9 +1,11 @@
+import type { ClientConfig } from '@handoff/types/config';
+import type { GetStaticProps } from 'next';
+import { getClientRuntimeConfig } from '../../components/util';
 import { AccountLayout } from '../../components/Auth/AccountLayout';
 import { authApiUrl, readApiError } from '../../components/Auth/api';
 import { Alert, AlertDescription } from '../../components/ui/alert';
 import { Badge } from '../../components/ui/badge';
 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 { useSession } from 'next-auth/react';
@@ -19,15 +21,17 @@ interface AccountUser {
   status?: 'invited' | 'active' | 'deactivated';
 }
 
-export default function AccountPage() {
+export const getStaticProps: GetStaticProps = async () => ({ props: { config: getClientRuntimeConfig() } });
+
+export default function AccountPage({ config }: { config: ClientConfig }) {
   if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
-    return <AccountLayout title="Profile">{null}</AccountLayout>;
+    return <AccountLayout config={config} title="Profile">{null}</AccountLayout>;
   }
 
-  return <RegistryAccountPage />;
+  return <RegistryAccountPage config={config} />;
 }
 
-function RegistryAccountPage() {
+function RegistryAccountPage({ config }: { config: ClientConfig }) {
   const { data: session } = useSession();
   const [user, setUser] = useState<AccountUser | null>(null);
   const [name, setName] = useState('');
@@ -83,71 +87,67 @@ function RegistryAccountPage() {
     .toUpperCase();
 
   return (
-    <AccountLayout title="Profile">
-      <Card>
-        <CardHeader>
-          <CardTitle>Profile</CardTitle>
-          <CardDescription>Manage how your account appears in this registry.</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-5">
-          {message ? (
-            <Alert variant={message.error ? 'destructive' : 'green'}>
-              <AlertDescription>{message.text}</AlertDescription>
-            </Alert>
-          ) : null}
-          {loading ? (
-            <p className="text-sm text-muted-foreground">Loading profile…</p>
-          ) : user ? (
-            <>
-              <div className="flex items-center gap-4">
-                {avatarUrl ? (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img src={avatarUrl} alt="" className="h-16 w-16 rounded-full border object-cover" />
-                ) : (
-                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-lg font-semibold">{initials}</div>
-                )}
-                <div>
-                  <p className="font-medium">{name || user.email}</p>
-                  <Badge variant={user.status === 'deactivated' ? 'destructive' : 'secondary'} className="mt-1">
-                    {user.role}
-                  </Badge>
-                </div>
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="account-email">Email</Label>
-                <Input id="account-email" value={user.email} disabled />
-                <p className="text-xs text-muted-foreground">Email addresses cannot be changed.</p>
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="account-name">Display name</Label>
-                <Input id="account-name" value={name} onChange={(event) => setName(event.target.value)} maxLength={100} />
+    <AccountLayout config={config} title="Profile" description="Manage how your account appears in this registry.">
+      <div className="space-y-5">
+        {message ? (
+          <Alert variant={message.error ? 'destructive' : 'green'}>
+            <AlertDescription>{message.text}</AlertDescription>
+          </Alert>
+        ) : null}
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading profile…</p>
+        ) : user ? (
+          <>
+            <div className="flex items-center gap-4">
+              {avatarUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={avatarUrl} alt="" className="h-16 w-16 rounded-full border object-cover" />
+              ) : (
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-lg font-semibold">{initials}</div>
+              )}
+              <div>
+                <p className="font-medium">{name || user.email}</p>
+                <Badge variant={user.status === 'deactivated' ? 'destructive' : 'secondary'} className="mt-1">
+                  {user.role}
+                </Badge>
               </div>
-              <div className="space-y-2">
-                <div className="flex items-center justify-between gap-2">
-                  <Label htmlFor="account-avatar">Avatar URL</Label>
-                  {gravatarUrl ? (
-                    <Button type="button" variant="ghost" size="sm" onClick={() => setAvatarUrl(gravatarUrl)}>
-                      Use Gravatar
-                    </Button>
-                  ) : null}
-                </div>
-                <Input
-                  id="account-avatar"
-                  type="url"
-                  placeholder="https://example.com/avatar.png"
-                  value={avatarUrl}
-                  onChange={(event) => setAvatarUrl(event.target.value)}
-                  maxLength={500}
-                />
-                <p className="text-xs text-muted-foreground">Use an HTTPS image URL, click Use Gravatar, or leave this empty to show your initials.</p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="account-email">Email</Label>
+              <Input id="account-email" value={user.email} disabled />
+              <p className="text-xs text-muted-foreground">Email addresses cannot be changed.</p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="account-name">Display name</Label>
+              <Input id="account-name" value={name} onChange={(event) => setName(event.target.value)} maxLength={100} />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-2">
+                <Label htmlFor="account-avatar">Avatar URL</Label>
+                {gravatarUrl ? (
+                  <Button type="button" variant="ghost" size="sm" onClick={() => setAvatarUrl(gravatarUrl)}>
+                    Use Gravatar
+                  </Button>
+                ) : null}
               </div>
-              <Button onClick={() => void save()} disabled={saving}>
-                {saving ? 'Saving…' : 'Save changes'}
-              </Button>
-            </>
-          ) : null}
-        </CardContent>
-      </Card>
+              <Input
+                id="account-avatar"
+                type="url"
+                placeholder="https://example.com/avatar.png"
+                value={avatarUrl}
+                onChange={(event) => setAvatarUrl(event.target.value)}
+                maxLength={500}
+              />
+              <p className="text-xs text-muted-foreground">
+                Use an HTTPS image URL, click Use Gravatar, or leave this empty to show your initials.
+              </p>
+            </div>
+            <Button onClick={() => void save()} disabled={saving}>
+              {saving ? 'Saving…' : 'Save changes'}
+            </Button>
+          </>
+        ) : null}
+      </div>
     </AccountLayout>
   );
 }