handoff-app 2.0.0-9 → 2.0.0

package/src/app/components/AiAssistant/AiToolResult.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { ArrowRight, Layers } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+
+/**
+ * Tool results the reader can act on, drawn as cards under the step that produced them. Every other
+ * tool, and any result in a shape this does not recognize, stays a status row.
+ */
+
+/** Search results shown before the rest collapse into a count. */
+const MAX_COMPONENT_CARDS = 5;
+
+type ComponentCard = { id: string; title: string; group?: string; description?: string };
+
+type PreviewCard = { id: string; title: string; url: string; html?: string; component: { id: string; title: string } };
+
+const componentRoute = (id: string): string => `/system/component/${encodeURIComponent(id)}`;
+
+/** The JSON payload of the single text block an MCP tool returns, or `null` for anything else. */
+const payloadOf = (output: unknown): Record<string, unknown> | null => {
+  const block = Array.isArray(output) ? output.find((entry) => entry?.type === 'text') : null;
+  if (typeof block?.text !== 'string') return null;
+  try {
+    const value = JSON.parse(block.text);
+    return value && typeof value === 'object' && !Array.isArray(value) ? value : null;
+  } catch {
+    return null;
+  }
+};
+
+const ComponentCards: React.FC<{ components: ComponentCard[]; total: number }> = ({ components, total }) => {
+  const shown = components.slice(0, MAX_COMPONENT_CARDS);
+  const hidden = total - shown.length;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {shown.map((component) => (
+        <Link
+          key={component.id}
+          href={componentRoute(component.id)}
+          className="flex w-full items-center gap-3 rounded-xl border bg-card px-3 py-2.5 text-left no-underline transition-colors hover:bg-muted/60 active:bg-muted"
+        >
+          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <Layers className="h-4 w-4" />
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-sm font-medium leading-tight text-foreground">{component.title}</span>
+            {(component.description || component.group) && (
+              <span className="line-clamp-2 text-xs text-muted-foreground">{component.description || component.group}</span>
+            )}
+          </span>
+          <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+        </Link>
+      ))}
+      {hidden > 0 && <p className="px-1 text-xs text-muted-foreground">and {hidden} more</p>}
+    </div>
+  );
+};
+
+const PreviewFrame: React.FC<{ preview: PreviewCard }> = ({ preview }) => (
+  <div className="overflow-hidden rounded-xl border bg-card">
+    {/* The rendered artifact, as the component page frames it. A preview that was never built has no markup to show. */}
+    {preview.html && (
+      <iframe
+        src={preview.url}
+        title={`${preview.component.title}: ${preview.title}`}
+        loading="lazy"
+        className="block h-48 w-full border-b bg-background"
+      />
+    )}
+    <Link
+      href={componentRoute(preview.component.id)}
+      className="flex items-center gap-3 px-3 py-2.5 no-underline transition-colors hover:bg-muted/60"
+    >
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-sm font-medium leading-tight text-foreground">{preview.component.title}</span>
+        <span className="block truncate text-xs text-muted-foreground">{preview.title}</span>
+      </span>
+      <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+    </Link>
+  </div>
+);
+
+/** The card for one finished tool call, or `null` when the result has none. */
+export const toolResultCard = (toolName: string, output: unknown): React.ReactNode => {
+  const payload = payloadOf(output);
+  if (!payload) return null;
+
+  if (toolName === 'handoff_search_components' && Array.isArray(payload.components) && payload.components.length > 0) {
+    const total = typeof payload.total === 'number' ? payload.total : payload.components.length;
+    return <ComponentCards components={payload.components as ComponentCard[]} total={total} />;
+  }
+  if (toolName === 'handoff_get_component_preview' && typeof payload.url === 'string' && payload.component) {
+    return <PreviewFrame preview={payload as unknown as PreviewCard} />;
+  }
+  return null;
+};

package/src/app/components/AiAssistant/dockState.ts

@@ -0,0 +1,86 @@
+/** The shape of the docked assistant, kept per reader in `localStorage` the way the side nav is. */
+
+export const MIN_WIDTH = 320;
+export const MAX_WIDTH = 720;
+export const DEFAULT_WIDTH = 320;
+
+/** Below this the assistant overlays the page instead of docking. Matches `useIsMobile`. */
+export const DOCK_BREAKPOINT = 768;
+
+/** Drives both the panel's width and the page's inset, so the two can never disagree. */
+export const DOCK_WIDTH_VAR = '--ai-dock-width';
+
+const STORAGE_KEY = 'handoff:ai:dock';
+const NON_DOCS_ROUTES = ['/cli/device', '/install', '/login', '/reset-password'] as const;
+const NON_DOCS_ROUTE_PREFIXES = ['/account'] as const;
+
+/** The assistant answers from the docs catalog, so application and authentication routes omit it. */
+export const isAiAssistantRoute = (pathname: string): boolean => {
+  const normalized = pathname.length > 1 ? pathname.replace(/\/+$/, '') : pathname;
+  return (
+    !NON_DOCS_ROUTES.some((route) => normalized === route) &&
+    !NON_DOCS_ROUTE_PREFIXES.some((route) => normalized === route || normalized.startsWith(`${route}/`))
+  );
+};
+
+export interface DockState {
+  open: boolean;
+  width: number;
+}
+
+export const DEFAULT_DOCK: DockState = { open: false, width: DEFAULT_WIDTH };
+
+const MAX_VIEWPORT_SHARE = 0.5;
+
+export const clampWidth = (width: number): number => Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, Math.round(width)));
+
+/**
+ * Caps the width against this viewport. A width kept from a large screen is otherwise most of a
+ * small one, and the expanded component preview is left with a strip to render into.
+ */
+export const fitWidth = (width: number): number =>
+  Math.min(clampWidth(width), Math.max(MIN_WIDTH, Math.round(window.innerWidth * MAX_VIEWPORT_SHARE)));
+
+export const dockWidth = (state: DockState): number => (state.open ? clampWidth(state.width) : 0);
+
+export const readDock = (): DockState => {
+  try {
+    const stored = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? 'null');
+    if (!stored || typeof stored !== 'object') return DEFAULT_DOCK;
+    return {
+      open: Boolean(stored.open),
+      width: fitWidth(Number(stored.width) || DEFAULT_WIDTH),
+    };
+  } catch {
+    return DEFAULT_DOCK;
+  }
+};
+
+export const writeDock = (state: DockState): void => {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    /* empty */
+  }
+};
+
+/**
+ * Reserves the dock's column before the first paint.
+ *
+ * React reads the stored state only after hydration, so without this the page paints full width and
+ * then reflows. `next-themes` avoids its theme flash the same way.
+ */
+export const dockWidthScript = `(function(){try{
+var p=location.pathname;
+var b=${JSON.stringify((process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/\/+$/, ''))};
+if(b&&p.indexOf(b)===0&&(p.length===b.length||p.charAt(b.length)==='/'))p=p.slice(b.length)||'/';
+while(p.length>1&&p.charAt(p.length-1)==='/')p=p.slice(0,-1);
+var hidden=${JSON.stringify(NON_DOCS_ROUTES)}.indexOf(p)!==-1||${JSON.stringify(NON_DOCS_ROUTE_PREFIXES)}.some(function(r){return p===r||p.indexOf(r+'/')===0});
+if(hidden)return;
+var s=JSON.parse(localStorage.getItem(${JSON.stringify(STORAGE_KEY)})||'null');
+if(!s||!s.open)return;
+document.documentElement.dataset.aiDockOpen='true';
+if(window.innerWidth<${DOCK_BREAKPOINT})return;
+var w=Math.min(${MAX_WIDTH},Math.max(${MIN_WIDTH},Math.round(s.width)||${DEFAULT_WIDTH}),Math.max(${MIN_WIDTH},Math.round(window.innerWidth*${MAX_VIEWPORT_SHARE})));
+document.documentElement.style.setProperty(${JSON.stringify(DOCK_WIDTH_VAR)},w+'px');
+}catch(e){}})();`;

package/src/app/components/AiAssistant/toolLabel.ts

@@ -0,0 +1,24 @@
+/** How one tool call reads in the collapsed row under the answer. */
+export const toolCallLabel = (toolName: string, input: unknown): string => {
+  const args = (input && typeof input === 'object' ? input : {}) as Record<string, unknown>;
+  const value = (key: string): string | undefined => (typeof args[key] === 'string' && args[key] ? (args[key] as string) : undefined);
+
+  switch (toolName) {
+    case 'handoff_search_components':
+      return value('query') ? `Searched components for “${value('query')}”` : 'Listed components';
+    case 'handoff_get_component':
+      return `Read component ${value('id') ?? ''}`.trim();
+    case 'handoff_get_component_source':
+      return `Read ${value('id') ?? 'component'} source`;
+    case 'handoff_get_component_preview':
+      return `Read ${value('id') ?? 'component'} preview ${value('preview') ?? ''}`.trim();
+    case 'handoff_get_tokens':
+      return value('set') ? `Read tokens for ${value('set')}` : 'Read design tokens';
+    case 'handoff_search_pages':
+      return value('query') ? `Searched pages for “${value('query')}”` : 'Listed pages';
+    case 'handoff_get_page':
+      return `Read page ${value('url') ?? ''}`.trim();
+    default:
+      return toolName;
+  }
+};

package/src/app/components/AiAssistant/useAiChat.ts

@@ -0,0 +1,147 @@
+'use client';
+
+import { Chat, useChat, type UseChatHelpers } from '@ai-sdk/react';
+import { DefaultChatTransport, isDynamicToolUIPart, isToolUIPart, type UIMessage, type UIMessagePart } from 'ai';
+import * as React from 'react';
+
+const basePath = process.env.HANDOFF_APP_BASE_PATH ?? '';
+
+const TRANSCRIPT_KEY = 'handoff:ai:transcript';
+const MODEL_KEY = 'handoff:ai:model';
+
+/** A transcript past this size is dropped, so one long answer cannot fill the storage quota. */
+const MAX_TRANSCRIPT_BYTES = 512 * 1024;
+
+/** Each token postpones the write, so only a settled answer reaches storage. */
+const SAVE_DELAY_MS = 400;
+
+/**
+ * Whether a stored part is safe to send back to the model.
+ *
+ * The transcript is written while an answer is in flight, so it can hold a call with an input and
+ * no output. A provider rejects a call with no matching result, and one of those in a restored
+ * conversation breaks every question after it.
+ */
+const isSettledPart = (part: UIMessagePart<never, never>): boolean => {
+  // MCP tools reach the agent as dynamic tools, so their parts carry `dynamic-tool` and not
+  // `tool-<name>`. Check both or this matches none of the app's own calls.
+  if (!isToolUIPart(part) && !isDynamicToolUIPart(part)) return true;
+  return (
+    part.state === 'output-error' ||
+    part.state === 'output-denied' ||
+    part.state === 'approval-responded' ||
+    (part.state === 'output-available' && part.preliminary !== true)
+  );
+};
+
+/** A message still worth restoring once the unsettled parts are gone. */
+const hasContent = (message: UIMessage): boolean =>
+  message.role === 'user' ||
+  message.parts.some(
+    (part) =>
+      (part.type === 'text' && part.text.trim().length > 0) || part.type === 'source-url' || isToolUIPart(part) || isDynamicToolUIPart(part)
+  );
+
+const readTranscript = (): UIMessage[] => {
+  try {
+    const stored = JSON.parse(window.localStorage.getItem(TRANSCRIPT_KEY) ?? 'null');
+    if (!Array.isArray(stored)) return [];
+    return (stored as UIMessage[]).map((message) => ({ ...message, parts: message.parts.filter(isSettledPart) })).filter(hasContent);
+  } catch {
+    return [];
+  }
+};
+
+const writeTranscript = (messages: UIMessage[]): void => {
+  try {
+    const payload = JSON.stringify(messages);
+    // Drop the older transcript too: the reader must not return to a conversation that stops halfway.
+    if (messages.length === 0 || payload.length > MAX_TRANSCRIPT_BYTES) window.localStorage.removeItem(TRANSCRIPT_KEY);
+    else window.localStorage.setItem(TRANSCRIPT_KEY, payload);
+  } catch {
+    /* empty */
+  }
+};
+
+const readModel = (): string | null => {
+  try {
+    return window.localStorage.getItem(MODEL_KEY);
+  } catch {
+    return null;
+  }
+};
+
+const writeModel = (model: string): void => {
+  try {
+    window.localStorage.setItem(MODEL_KEY, model);
+  } catch {
+    /* empty */
+  }
+};
+
+/**
+ * The live conversation, owned here and not by a component.
+ *
+ * `useChat` discards everything it owns when its component goes, and the panel does unmount. An
+ * instance held here outlives that, and an answer that still streams keeps arriving into it.
+ *
+ * Created on first use, never at import: a module-scope chat on the server would be shared by every
+ * request.
+ */
+let chat: Chat<UIMessage> | null = null;
+const listeners = new Set<() => void>();
+
+const createChat = (messages: UIMessage[]): Chat<UIMessage> =>
+  new Chat<UIMessage>({
+    messages,
+    transport: new DefaultChatTransport({ api: `${basePath}/api/ai/chat`, credentials: 'include' }),
+  });
+
+const getChat = (): Chat<UIMessage> => (chat ??= createChat(readTranscript()));
+
+const subscribe = (onChange: () => void): (() => void) => {
+  listeners.add(onChange);
+  return () => listeners.delete(onChange);
+};
+
+export interface AiChat extends UseChatHelpers<UIMessage> {
+  /** The model this reader picked, kept across reloads. `null` until the connections load. */
+  model: string | null;
+  chooseModel: (model: string) => void;
+  /** Replace the conversation with an empty one. */
+  startFresh: () => void;
+}
+
+export const useAiChat = (): AiChat => {
+  // Every caller must land on the same instance, including after a reset. Component state would
+  // give each a copy, and the one that did not call `startFresh` would keep reporting on the
+  // conversation the reader just cleared.
+  const instance = React.useSyncExternalStore(subscribe, getChat, getChat);
+  const [model, setModel] = React.useState<string | null>(readModel);
+  const helpers = useChat<UIMessage>({ chat: instance });
+  const { messages } = helpers;
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => writeTranscript(messages), SAVE_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  }, [messages]);
+
+  /**
+   * A replacement instance also settles an answer that still streams: the discarded chat is aborted
+   * and keeps whatever the transport wrote midway. Clearing the list in place races that write.
+   *
+   * The chosen model survives, because the reader already did the work to pick one.
+   */
+  const startFresh = React.useCallback(() => {
+    chat = createChat([]);
+    writeTranscript([]);
+    listeners.forEach((onChange) => onChange());
+  }, []);
+
+  const chooseModel = React.useCallback((next: string) => {
+    writeModel(next);
+    setModel(next);
+  }, []);
+
+  return { ...helpers, model, chooseModel, startFresh };
+};

package/src/app/components/AiAssistant/useAiConnections.ts

@@ -0,0 +1,86 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+/** One connection as `/api/ai/connections` reports it. Never carries a key, only whether one is set. */
+export interface AiConnection {
+  id: string;
+  label: string;
+  baseUrl?: string;
+  models?: string[];
+  credential: 'service' | 'user' | 'none';
+  configured: boolean;
+}
+
+/** One model this reader can run, as `<connectionId>/<model>`. */
+export interface AiModelOption {
+  id: string;
+  connectionId: string;
+  label: string;
+  model: string;
+}
+
+export interface AiConnectionsState {
+  /**
+   * Every model this reader can run right now, grouped by connection. Connections and their models
+   * keep the order the config declares, which is also the order the server falls back through.
+   */
+  models: AiModelOption[];
+  defaultModel: string | null;
+  /** Whether this deployment has an account page where a reader can add a key. */
+  canAddKeys: boolean;
+  loading: boolean;
+  /** The request failed, rather than succeeding with nothing usable. */
+  failed: boolean;
+}
+
+const basePath = process.env.HANDOFF_APP_BASE_PATH ?? '';
+
+/**
+ * The models the assistant may offer. Loaded once the assistant is first opened rather than on every
+ * page, so a reader who never asks a question pays nothing for the feature.
+ */
+export const useAiConnections = (active: boolean): AiConnectionsState => {
+  const [state, setState] = useState<AiConnectionsState>({
+    models: [],
+    defaultModel: null,
+    canAddKeys: false,
+    loading: true,
+    failed: false,
+  });
+
+  const load = useCallback(async () => {
+    const response = await fetch(`${basePath}/api/ai/connections`, { credentials: 'include', cache: 'no-store' });
+    if (!response.ok) throw new Error('unavailable');
+    const body = (await response.json()) as { connections: AiConnection[]; defaultModel: string | null; canAddKeys: boolean };
+    setState({
+      models: body.connections
+        .filter((connection) => connection.configured)
+        .flatMap((connection) =>
+          (connection.models ?? []).map((model) => ({
+            id: `${connection.id}/${model}`,
+            connectionId: connection.id,
+            label: connection.label,
+            model,
+          }))
+        ),
+      defaultModel: body.defaultModel,
+      canAddKeys: body.canAddKeys,
+      loading: false,
+      failed: false,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!active) return;
+    let live = true;
+    void load().catch(() => {
+      if (live) setState((current) => ({ ...current, loading: false, failed: true }));
+    });
+    return () => {
+      live = false;
+    };
+  }, [active, load]);
+
+  return state;
+};

package/src/app/components/AiAssistant/usePageContext.ts

@@ -0,0 +1,63 @@
+'use client';
+
+import type { NavMenuItem, SectionLink } from '@handoff/nav';
+import { useRouter } from 'next/router';
+import * as React from 'react';
+
+import { pageRefFromPath, type AiPageKind } from '../../lib/ai/context';
+import { normalizePathForMatch, stripBasePath } from '../../lib/utils';
+import { useNav } from '../context/NavProvider';
+
+/** The page a question can be asked about: its route as the server reads it, and its nav title. */
+export interface AiPage {
+  path: string;
+  kind: AiPageKind;
+  title: string;
+}
+
+/** A route with no base path, query, fragment or trailing slash, so nav paths and the router compare. */
+const routeOf = (href: string): string => `/${normalizePathForMatch(href)}`;
+
+/** Every titled route in the nav. The first title found for a route wins, as the side nav shows it first. */
+const collectTitles = (sections: SectionLink[]): Map<string, string> => {
+  const titles = new Map<string, string>();
+  const add = (path: string | undefined, title: string) => {
+    if (!path || !title) return;
+    const route = routeOf(stripBasePath(path));
+    if (!titles.has(route)) titles.set(route, title);
+  };
+  const walk = (items: NavMenuItem[] = []) => {
+    for (const item of items) {
+      add(item.path, item.title);
+      walk(item.menu);
+    }
+  };
+  for (const section of sections) {
+    add(section.path, section.title);
+    for (const sub of section.subSections) {
+      add(sub.path, sub.title);
+      walk(sub.menu);
+    }
+  }
+  return titles;
+};
+
+/** Nav titles by route, from the data the side nav already holds, so the panel makes no request. */
+export const useNavTitles = (): Map<string, string> => {
+  const { nav } = useNav();
+  return React.useMemo(() => collectTitles(nav.shell), [nav]);
+};
+
+/** The page at a route, or `null` when the route gives no context or is not in the nav. */
+export const pageAt = (path: string, titles: Map<string, string>): AiPage | null => {
+  const ref = pageRefFromPath(path);
+  const title = titles.get(path);
+  return ref && title ? { path, kind: ref.kind, title } : null;
+};
+
+/** The current page, or `null` when the route gives no context or is not in the nav. */
+export const usePageContext = (): AiPage | null => {
+  const { asPath } = useRouter();
+  const titles = useNavTitles();
+  return pageAt(routeOf(asPath), titles);
+};

package/src/app/components/Auth/AccountLayout.tsx

@@ -1,33 +1,57 @@
+import type { ClientConfig } from '@handoff/types/config';
+import { Bot, CircleUserRound, KeyRound, Users, type LucideIcon } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, type ReactNode } from 'react';
 import { cn } from '../../lib/utils';
+import { Separator } from '../ui/separator';
 import { AuthShell } from './AuthShell';
 
-const navGroups = [
+interface NavLink {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+  adminOnly?: boolean;
+}
+
+const navGroups: { label: string; links: NavLink[] }[] = [
   {
     label: 'Account',
     links: [
-      { href: '/account', label: 'Profile' },
-      { href: '/account/tokens', label: 'Access tokens' },
+      { href: '/account', label: 'Profile', icon: CircleUserRound },
+      { href: '/account/tokens', label: 'Access tokens', icon: KeyRound },
+      // Only meaningful where a connection declares `credential: 'user'`; the page itself says so
+      // when none does, rather than the nav guessing at a build-time value the browser cannot read.
+      ...(process.env.HANDOFF_AI_ENABLED === 'true' ? [{ href: '/account/ai', label: 'AI providers', icon: Bot }] : []),
     ],
   },
   {
     label: 'Administration',
-    links: [{ href: '/account/users', label: 'Users', adminOnly: true }],
+    links: [{ href: '/account/users', label: 'Users', icon: Users, adminOnly: true }],
   },
 ];
 
-export function AccountLayout({ children, title }: { children: ReactNode; title: string }) {
+interface AccountLayoutProps {
+  children: ReactNode;
+  config?: ClientConfig;
+  title: string;
+  description?: string;
+}
+
+export function AccountLayout({ children, config, title, description }: AccountLayoutProps) {
   if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
-    return <AuthShell title={title}>{null}</AuthShell>;
+    return <AuthShell config={config} title={title}>{null}</AuthShell>;
   }
 
-  return <RegistryAccountLayout title={title}>{children}</RegistryAccountLayout>;
+  return (
+    <RegistryAccountLayout config={config} title={title} description={description}>
+      {children}
+    </RegistryAccountLayout>
+  );
 }
 
-function RegistryAccountLayout({ children, title }: { children: ReactNode; title: string }) {
+function RegistryAccountLayout({ children, config, title, description }: AccountLayoutProps) {
   const { data: session, status } = useSession();
   const router = useRouter();
   const role = (session?.user as { role?: string } | undefined)?.role;
@@ -42,35 +66,42 @@ function RegistryAccountLayout({ children, title }: { children: ReactNode; title
   }, [router, session, status]);
 
   return (
-    <AuthShell title={title} wide>
+    <AuthShell config={config} title={title} wide>
       {status === 'loading' || !session?.user ? (
         <p className="py-20 text-center text-sm text-muted-foreground">Loading account…</p>
       ) : (
-        <div className="grid gap-8 md:grid-cols-[200px_minmax(0,1fr)]">
-          <aside className="space-y-6">
+        <div className="grid md:grid-cols-[16rem_minmax(0,1fr)]">
+          <aside className="pt-5">
             {navGroups
               .map((group) => ({
                 ...group,
-                links: group.links.filter((link) => !('adminOnly' in link && link.adminOnly) || role === 'admin'),
+                links: group.links.filter((link) => !link.adminOnly || role === 'admin'),
               }))
               .filter((group) => group.links.length > 0)
-              .map((group) => (
+              .map((group, index) => (
                 <div key={group.label}>
-                  <p className="mb-3 px-3 text-xs font-medium uppercase tracking-wide text-muted-foreground">{group.label}</p>
+                  {index > 0 ? <Separator className="my-4 hidden md:block" /> : null}
+                  <p className="flex h-8 items-center px-2 text-xs font-medium text-muted-foreground">{group.label}</p>
                   <nav className="flex gap-1 overflow-x-auto md:flex-col">
                     {group.links.map((link) => {
                       const active = router.pathname === link.href;
+                      const Icon = link.icon;
                       return (
                         <Link
                           key={link.href}
                           href={link.href}
                           className={cn(
-                            'whitespace-nowrap rounded-md px-3 py-2 text-sm',
-                            active
-                              ? 'bg-accent font-medium text-accent-foreground'
-                              : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
+                            'group/nav-item flex h-9 items-center gap-3 whitespace-nowrap rounded-md px-3 text-sm',
+                            active ? 'bg-accent font-medium text-accent-foreground' : 'hover:bg-accent/50'
                           )}
                         >
+                          <Icon
+                            className={cn(
+                              'size-4 shrink-0',
+                              active ? 'text-foreground' : 'text-muted-foreground group-hover/nav-item:text-foreground'
+                            )}
+                            strokeWidth={1.5}
+                          />
                           {link.label}
                         </Link>
                       );
@@ -79,7 +110,15 @@ function RegistryAccountLayout({ children, title }: { children: ReactNode; title
                 </div>
               ))}
           </aside>
-          <section className="min-w-0">{children}</section>
+          <section className="min-w-0 py-8 md:pl-8 lg:py-16 lg:pl-16">
+            <div className="mx-auto w-full max-w-4xl space-y-8">
+              <div>
+                <h1 className="text-xl font-semibold">{title}</h1>
+                {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+              </div>
+              {children}
+            </div>
+          </section>
         </div>
       )}
     </AuthShell>