handoff-app 2.0.0-8 → 2.0.0

package/src/app/components/Component/slices/ComponentDisplaySlice.tsx

@@ -1,3 +1,4 @@
+import { PreviewWidth } from '@handoff/transformers/preview/types';
 import { PreviewObject } from '@handoff/types/preview';
 import { Filter, evaluateFilter } from '@handoff/utils/filter';
 import React from 'react';
@@ -13,6 +14,7 @@ export interface ComponentDisplaySliceProps {
   showPreview?: boolean;
   showCodeHighlight?: boolean;
   defaultHeight?: string;
+  defaultWidth?: PreviewWidth;
   filterBy?: Filter;
   codeHighlight?: boolean;
 }
@@ -38,6 +40,7 @@ const ComponentDisplaySlice: React.FC<ComponentDisplaySliceProps> = ({
   showPreview = true,
   showCodeHighlight,
   defaultHeight,
+  defaultWidth,
   filterBy,
   codeHighlight = true,
 }) => {
@@ -68,6 +71,7 @@ const ComponentDisplaySlice: React.FC<ComponentDisplaySliceProps> = ({
           title={title}
           component={filteredPreview}
           defaultHeight={finalDefaultHeight}
+          defaultWidth={defaultWidth}
           onPreviewChange={onPreviewChange}
         />
       )}

package/src/app/components/Foundations/ColorGrid.tsx

@@ -16,7 +16,7 @@ import {
 import { Separator } from '../ui/separator';
 import { Sheet, SheetClose, SheetContent, SheetHeader } from '../ui/sheet';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
-import { hexToRgb } from '../util/colors';
+import { hexToRgb, hexToRgbaCss } from '../util/colors';
 import ColorContrast from './ColorContrast';
 import ColorInfo from './ColorInfo';
 import ColorSpaces from './ColorSpaces';
@@ -25,7 +25,6 @@ import ColorTailwind from './ColorTailwind';
 type ColorGridProps = {
   title: string;
   group: string;
-  description: string;
   colors: CoreTypes.IColorObject[];
 };
 
@@ -33,7 +32,7 @@ const LargeColorGrid: React.FC<{ colors: CoreTypes.IColorObject[]; setOpen: (col
   <div className="@container">
     <div className="mb-6 grid grid-cols-1 gap-6 @md:grid-cols-2">
       {colors.map((color) => (
-        <a href="#" className="flex flex-col items-start" key={color.group + '-' + color.name}>
+        <div className="flex flex-col items-start" key={color.group + '-' + color.name}>
           <div
             className="group relative mb-2 block h-32 w-full rounded-lg"
             style={{ background: color.value ?? '', backgroundBlendMode: color.blend ?? '' }}
@@ -42,7 +41,7 @@ const LargeColorGrid: React.FC<{ colors: CoreTypes.IColorObject[]; setOpen: (col
           </div>
           <p className="mb-1 text-sm font-medium line-clamp-1" title={color.name}>{color.name}</p>
           <small className="font-mono text-xs font-light text-gray-400 line-clamp-1" title={color.value}>{color.value}</small>
-        </a>
+        </div>
       ))}
     </div>
   </div>
@@ -52,10 +51,11 @@ const SmallColorGrid: React.FC<{ colors: CoreTypes.IColorObject[]; setOpen: (col
   // group colors by subgroup
   const groupedColors = colors.reduce(
     (acc, color) => {
-      if (!acc[color.subgroup]) {
-        acc[color.subgroup] = [];
+      const subgroup = color.subgroup ?? '';
+      if (!acc[subgroup]) {
+        acc[subgroup] = [];
       }
-      acc[color.subgroup].push(color);
+      acc[subgroup].push(color);
       return acc;
     },
     {} as Record<string, CoreTypes.IColorObject[]>
@@ -64,11 +64,11 @@ const SmallColorGrid: React.FC<{ colors: CoreTypes.IColorObject[]; setOpen: (col
     <>
       {Object.entries(groupedColors).map(([subgroup]) => (
         <div className="mb-5" key={`group-${subgroup}`}>
-          <HeadersType.H4 key={subgroup}>{startCase(subgroup.replaceAll('-', ' '))}</HeadersType.H4>
+          {subgroup && <HeadersType.H4>{startCase(subgroup.replaceAll('-', ' '))}</HeadersType.H4>}
           <div className="grid grid-cols-[repeat(auto-fit,minmax(60px,60px))] gap-6">
             {groupedColors[subgroup].map((color) => (
               <React.Fragment key={`group-${subgroup}-${color.name}`}>
-                <a href="" className="flex flex-col">
+                <div className="flex flex-col">
                   <div
                     className="group relative mb-2 block h-14 rounded-lg"
                     style={{ background: color.value ?? '', backgroundBlendMode: color.blend ?? '' }}
@@ -77,7 +77,7 @@ const SmallColorGrid: React.FC<{ colors: CoreTypes.IColorObject[]; setOpen: (col
                   </div>
                   <p className="mb-1 text-xs font-medium line-clamp-1" title={color.name}>{color.name}</p>
                   <small className="font-mono text-xs font-light text-gray-400 line-clamp-1" title={color.value}>{color.value}</small>
-                </a>
+                </div>
               </React.Fragment>
             ))}
           </div>
@@ -87,7 +87,7 @@ const SmallColorGrid: React.FC<{ colors: CoreTypes.IColorObject[]; setOpen: (col
   );
 };
 
-const ColorGrid: React.FC<ColorGridProps> = ({ title, description, colors, group }) => {
+const ColorGrid: React.FC<ColorGridProps> = ({ title, colors, group }) => {
   const [open, setOpen] = React.useState(false);
   const [selectedColor, setSelectedColor] = React.useState(null);
   const openSheet = (color) => {
@@ -96,8 +96,7 @@ const ColorGrid: React.FC<ColorGridProps> = ({ title, description, colors, group
   };
   return (
     <div id={`${group}-colors`} className="scroll-mt-24 scroll-smooth pb-10">
-      <h3 className="text-lg font-medium">{title}</h3>
-      <p className="mb-8">{description}</p>
+      <h3 className="mb-8 text-lg font-medium">{title}</h3>
       {colors.length < 5 ? <LargeColorGrid colors={colors} setOpen={openSheet} /> : <SmallColorGrid colors={colors} setOpen={openSheet} />}
       <ColorSheet color={selectedColor} open={open} setOpen={setOpen} />
     </div>
@@ -122,7 +121,7 @@ const ColorDropdown: React.FC<{ color: CoreTypes.IColorObject; openSheet: (color
         <Copy className="text-gray-400" /> HEX
         <DropdownMenuShortcut className="max-w-[100px] truncate">{color.value}</DropdownMenuShortcut>
       </DropdownMenuItem>
-      <DropdownMenuItem onClick={() => navigator.clipboard.writeText('rgba(0, 49, 82, 1)')}>
+      <DropdownMenuItem onClick={() => navigator.clipboard.writeText(hexToRgbaCss(color.value) ?? color.value)}>
         <Copy className="text-gray-400" /> RGBA
         <DropdownMenuShortcut className="max-w-[100px] truncate">{hexToRgb(color.value)}</DropdownMenuShortcut>
       </DropdownMenuItem>

package/src/app/components/Layout/Header.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import { AiAssistantTrigger } from '../../components/AiAssistant/AiAssistantProvider';
 import { McpConfigDialog } from '../../components/McpIntegration/McpConfigDialog';
 import { ModeToggle } from '../../components/ModeSwitcher';
 import { MainNav } from '../../components/Navigation/MainNav';
@@ -9,7 +10,7 @@ import { useConfigContext } from '../context/ConfigContext';
 import { AuthControls } from '../Auth/AuthControls';
 import { RuntimeModeBadge } from './RuntimeModeBadge';
 
-export function Header() {
+export function Header({ hideNav = false }: { hideNav?: boolean }) {
   const context = useConfigContext();
   const [isScrolled, setIsScrolled] = useState(false);
   const runtimeMode = context.config?.runtime?.mode ?? 'workspace';
@@ -26,30 +27,35 @@ export function Header() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  const logo = <img className="max-h-5" src={`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/logo.svg`} alt={context.config?.app?.title} />;
+
   return (
     <div
       className={cn(
-        'sticky top-0 z-50 py-4 shadow-[0_0_3px_0_rgba(0,0,0,0.15)] backdrop-blur-sm transition-all duration-300',
-        isScrolled && 'bg-background/70 py-3 shadow-[0_0_4px_0_rgba(0,0,0,0.15)]'
+        'ai-dock-bleed h-17 sticky top-0 z-50 py-4 shadow-[0_0_3px_0_rgba(0,0,0,0.15)] backdrop-blur-sm transition-all duration-300',
+        isScrolled && 'bg-background/70 shadow-[0_0_4px_0_rgba(0,0,0,0.15)]'
       )}
     >
       <header className="border-grid container mx-auto w-full max-w-[1500px] bg-transparent px-8">
         <div className="mx-auto flex items-center justify-between @container">
           <div className="flex items-center gap-3">
-            <Link href="/">
-              <img className="max-h-5" src={`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/logo.svg`} alt={context.config?.app?.title} />
-            </Link>
+            {hideNav ? logo : <Link href="/">{logo}</Link>}
             {!isStaticSnapshot && <RuntimeModeBadge mode={runtimeMode} />}
           </div>
-          <div className="hidden items-center gap-4 @2xl:flex">
-            <MainNav />
-            <McpConfigDialog />
-            {runtimeMode === 'registry' ? <AuthControls /> : null}
-            <ModeToggle />
-          </div>
-          <div className="flex items-center gap-4 @2xl:hidden">
-            <MobileNav />
-          </div>
+          {hideNav ? null : (
+            <>
+              <div className="hidden items-center gap-4 @2xl:flex">
+                <MainNav />
+                <AiAssistantTrigger />
+                <McpConfigDialog />
+                {runtimeMode === 'registry' ? <AuthControls /> : null}
+                <ModeToggle />
+              </div>
+              <div className="flex items-center gap-4 @2xl:hidden">
+                <MobileNav />
+              </div>
+            </>
+          )}
         </div>
       </header>
     </div>

package/src/app/components/Layout/Main.tsx

@@ -5,7 +5,7 @@ import { Header } from '../../components/Layout/Header';
 import { ThemeProvider } from '../../components/util/theme-provider';
 import SideNav from '../Navigation/SideNav';
 import { ConfigContextProvider } from '../context/ConfigContext';
-import { hasRenderableNav } from '../../lib/utils';
+import { hasRenderableNav, pageTitle } from '../../lib/utils';
 import { SidebarInset, SidebarProvider } from '../ui/sidebar';
 import { SectionLink } from '../util';
 
@@ -34,7 +34,7 @@ export default function Layout<LayoutComponentProps>({ children, config, menu, m
       <ConfigContextProvider defaultConfig={config} defaultMenu={menu}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
           <Head>
-            <title>{metadata.metaTitle}</title>
+            <title>{pageTitle(metadata, config?.app?.title)}</title>
             <meta name="description" content={metadata.metaDescription} />
           </Head>
           <div className="absolute left-[-200px] top-[-200px] z-[-1] h-[400px] w-[600px] bg-[#111111] opacity-[0.05] blur-[350px]">

package/src/app/components/Markdown/MarkdownComponents.tsx

@@ -70,38 +70,36 @@ function extractText(node: any): string {
 
 const Headings = (element: any) => {
   const { children, node } = element;
-  if (children[0]) {
-    const type = node.tagName || 'h6';
-
-    let anchor = extractText(children).toLowerCase();
-    anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, '');
-    anchor = anchor.replace(/ /g, '-');
-
-    const container = (children: React.ReactNode): React.ReactNode => (
-      <>
-        {children}
-        <a id={anchor} href={`#${anchor}`} className="doc-link"></a>
-      </>
-    );
-
-    switch (type) {
-      case 'h1':
-        return <h1 className="text-2xl font-bold">{container(children)}</h1>;
-      case 'h2':
-        return <h2 className="text-xl font-bold">{container(children)}</h2>;
-      case 'h3':
-        return <h3 className="text-lg font-bold">{container(children)}</h3>;
-      case 'h4':
-        return <h4 className="text-base font-bold">{container(children)}</h4>;
-      case 'h5':
-        return <h5 className="text-sm font-bold">{container(children)}</h5>;
-      case 'h6':
-        return <h6 className="text-xs font-bold">{container(children)}</h6>;
-      default:
-        return <h6 className="text-xs font-bold">{container(children)}</h6>;
-    }
-  } else {
-    return <h1>children</h1>;
+  if (React.Children.count(children) === 0) return <></>;
+
+  const type = node.tagName || 'h6';
+
+  let anchor = extractText(children).toLowerCase();
+  anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, '');
+  anchor = anchor.replace(/ /g, '-');
+
+  const container = (children: React.ReactNode): React.ReactNode => (
+    <>
+      {children}
+      <a id={anchor} href={`#${anchor}`} className="doc-link"></a>
+    </>
+  );
+
+  switch (type) {
+    case 'h1':
+      return <h1 className="text-2xl font-bold">{container(children)}</h1>;
+    case 'h2':
+      return <h2 className="text-xl font-bold">{container(children)}</h2>;
+    case 'h3':
+      return <h3 className="text-lg font-bold">{container(children)}</h3>;
+    case 'h4':
+      return <h4 className="text-base font-bold">{container(children)}</h4>;
+    case 'h5':
+      return <h5 className="text-sm font-bold">{container(children)}</h5>;
+    case 'h6':
+      return <h6 className="text-xs font-bold">{container(children)}</h6>;
+    default:
+      return <h6 className="text-xs font-bold">{container(children)}</h6>;
   }
 };
 

package/src/app/components/McpIntegration/McpConfigDialog.tsx

@@ -134,18 +134,13 @@ type EndpointStatus = 'checking' | 'live' | 'unreachable';
 let cachedStatus: EndpointStatus | null = null;
 let inFlight: Promise<EndpointStatus> | null = null;
 
-/**
- * Statuses that prove the route is being served. A GET is the cheapest question to ask: the handler
- * answers 405 without ever building an MCP server, and a registry answers 401 ahead of that because
- * the credential check runs first. Anything else, 404 and 5xx included, means it is not there.
- */
-const LIVE_STATUSES = new Set([200, 401, 403, 405]);
-
 const probeEndpoint = (url: string): Promise<EndpointStatus> => {
   if (cachedStatus) return Promise.resolve(cachedStatus);
   if (inFlight) return inFlight;
-  inFlight = fetch(url, { method: 'GET' })
-    .then((res): EndpointStatus => (LIVE_STATUSES.has(res.status) ? 'live' : 'unreachable'))
+  // The endpoint answers HEAD with 204 before the credential check. Thus a served route never logs an
+  // error status to the console.
+  inFlight = fetch(url, { method: 'HEAD' })
+    .then((res): EndpointStatus => (res.ok ? 'live' : 'unreachable'))
     .catch((): EndpointStatus => 'unreachable')
     .then((status) => {
       cachedStatus = status;
@@ -184,29 +179,19 @@ const StatusDot: React.FC<{ status: EndpointStatus; className?: string }> = ({ s
   <span role="status" aria-label={DOT[status].label} title={DOT[status].label} className={cn('size-1.5 rounded-full', DOT[status].className, className)} />
 );
 
-const Snippet: React.FC<{ label: string; value: string; compact?: boolean }> = ({ label, value, compact }) => (
+const Snippet: React.FC<{ label: string; value: string }> = ({ label, value }) => (
   <div className="min-w-0 space-y-1.5">
     <div className="flex items-center justify-between gap-2">
       <code className="truncate rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">{label}</code>
       <CopyToClipboard value={value} tooltip={`Copy ${label}`} showTooltip={false} className="relative size-7 shrink-0" />
     </div>
-    <pre
-      className={cn(
-        'overflow-auto rounded-md border bg-muted/50 p-3 leading-relaxed',
-        compact ? 'max-h-48 text-[10px]' : 'max-h-64 text-xs'
-      )}
-    >
+    <pre className="max-h-64 overflow-auto rounded-md border bg-muted/50 p-3 text-xs leading-relaxed">
       <code>{value}</code>
     </pre>
   </div>
 );
 
-const ClientConfig: React.FC<{ client: McpClient; name: string; target: McpTarget; compact?: boolean }> = ({
-  client,
-  name,
-  target,
-  compact,
-}) => {
+const ClientConfig: React.FC<{ client: McpClient; name: string; target: McpTarget }> = ({ client, name, target }) => {
   // A one-click install would write the `<your-token>` placeholder verbatim and register a server
   // that cannot connect, so a registry gets the snippet and the token pointer instead.
   const deeplink = isRegistryRuntime ? undefined : client.deeplink?.(name, target);
@@ -222,8 +207,8 @@ const ClientConfig: React.FC<{ client: McpClient; name: string; target: McpTarge
           </a>
         </Button>
       )}
-      {command && <Snippet label="command line" value={command} compact={compact} />}
-      <Snippet label={client.configPath} value={JSON.stringify(client.file(name, target), null, 2)} compact={compact} />
+      {command && <Snippet label="command line" value={command} />}
+      <Snippet label={client.configPath} value={JSON.stringify(client.file(name, target), null, 2)} />
       <p className="text-xs text-muted-foreground">{client.note}</p>
     </div>
   );
@@ -261,8 +246,8 @@ const Credential: React.FC = () => (
   </p>
 );
 
-/** Endpoint, per-client config and credential guidance. Shared by the dialog and the mobile nav. */
-const ConnectionDetails: React.FC<{ url: string; status: EndpointStatus; compact?: boolean }> = ({ url, status, compact }) => {
+/** Endpoint, per-client config and credential guidance. */
+const ConnectionDetails: React.FC<{ url: string; status: EndpointStatus }> = ({ url, status }) => {
   const name = useServerName();
   const target: McpTarget = { url, headers: isRegistryRuntime ? CREDENTIAL_HEADERS : undefined };
 
@@ -279,7 +264,7 @@ const ConnectionDetails: React.FC<{ url: string; status: EndpointStatus; compact
         </TabsList>
         {CLIENTS.map((client) => (
           <TabsContent key={client.id} value={client.id} className="min-w-0">
-            <ClientConfig client={client} name={name} target={target} compact={compact} />
+            <ClientConfig client={client} name={name} target={target} />
           </TabsContent>
         ))}
       </Tabs>
@@ -323,27 +308,3 @@ const McpDialog: React.FC = () => {
     </Dialog>
   );
 };
-
-/**
- * Inline variant for the mobile nav, which is itself a sheet, so a nested dialog would sit on top of
- * it. It owns its divider, so a build without the endpoint renders nothing and leaves no stray rule.
- */
-export function McpConfigMobile() {
-  return isAvailable ? <McpMobile /> : null;
-}
-
-const McpMobile: React.FC = () => {
-  const url = useMcpEndpoint();
-  const status = useEndpointStatus(url);
-
-  return (
-    <div className="mt-4 space-y-3 border-t pt-4">
-      <div className="flex flex-wrap items-center gap-2">
-        <McpIcon className="h-4 w-4" />
-        <span className="text-sm font-medium">Connect a coding agent</span>
-        <RuntimeModeBadge mode={mode} />
-      </div>
-      <ConnectionDetails url={url} status={status} compact />
-    </div>
-  );
-};

package/src/app/components/Navigation/MobileNav.tsx

@@ -3,7 +3,7 @@ import { Menu, Monitor, Moon, Sun, X } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { McpConfigMobile } from '../../components/McpIntegration/McpConfigDialog';
+import { AiAssistantMobileTrigger } from '../../components/AiAssistant/AiAssistantProvider';
 import { Button } from '../../components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../../components/ui/sheet';
 import { cn } from '../../lib/utils';
@@ -52,6 +52,7 @@ export function MobileNav() {
           </SheetTrigger>
         </SheetHeader>
         <div className="mt-8 flex flex-col space-y-4">
+          <AiAssistantMobileTrigger />
           {menu &&
             menu.map((section) => {
               const isActive = trimSlashes(router.asPath).startsWith(trimSlashes(section.path));
@@ -70,7 +71,6 @@ export function MobileNav() {
                 </Link>
               );
             })}
-          <McpConfigMobile />
           <div className="mt-4 border-t pt-4">
             <Button variant="ghost" className="w-full justify-start font-normal" onClick={toggleTheme}>
               {theme === 'light' && (

package/src/app/components/Navigation/SideNav.tsx

@@ -31,23 +31,9 @@ import {
   SidebarMenuSub,
   SidebarSeparator,
 } from '../../components/ui/sidebar';
-import { normalizePathForMatch } from '../../lib/utils';
+import { normalizePathForMatch, stripBasePath } from '../../lib/utils';
 import { useNav } from '../context/NavProvider';
 
-/**
- * `next/link` re-applies `basePath`, but the menu item paths already carry the base prefix (built by
- * the server navigation resolver). Strip the leading base segment once so the link is not
- * double-prefixed; with no base path this just returns a leading-slash route.
- */
-const stripBasePath = (p: string): string => {
-  const base = (process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/^\/+|\/+$/g, '');
-  let rel = p.replace(/^\/+/, '');
-  if (base && (rel === base || rel.startsWith(`${base}/`))) {
-    rel = rel.slice(base.length).replace(/^\/+/, '');
-  }
-  return `/${rel}`;
-};
-
 const NormalMenuItem = ({ title, icon, path }) => {
   const router = useRouter();
   const isActive = normalizePathForMatch(path) === normalizePathForMatch(router.asPath);

package/src/app/components/context/NavProvider.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { NavData, SectionLink } from '@handoff/nav';
+import { useRouter } from 'next/router';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
 export type { NavData, NavEntity } from '@handoff/nav';
@@ -13,6 +14,8 @@ interface INavContext {
 const EMPTY_NAV: NavData = { shell: [] };
 const NavContext = createContext<INavContext>({ nav: EMPTY_NAV, currentSectionId: '' });
 const isRegistryMode = process.env.HANDOFF_RUNTIME_MODE === 'registry';
+/** Routes that render no navigation, so they do not fetch it. */
+const NAVLESS_ROUTES = ['/install', '/login', '/reset-password'];
 
 // A module-level fulfilled cache and in-flight guard make the registry refresh a single hard-load
 // operation, including StrictMode remounts. A browser hard reload resets both and observes publishes.
@@ -43,9 +46,11 @@ export const NavProvider: React.FC<{
   // Registry alone owns refresh state. Workspace renders the latest page prop directly, so soft
   // navigation cannot briefly expose the preceding page's tree and triggers no provider effect.
   const [registryNav, setRegistryNav] = useState<NavData>(() => cachedNav ?? initialNav);
+  const { pathname } = useRouter();
+  const hasNav = !NAVLESS_ROUTES.includes(pathname);
 
   useEffect(() => {
-    if (!isRegistryMode || cachedNav) return;
+    if (!isRegistryMode || !hasNav || cachedNav) return;
     let active = true;
     loadNav().then((data) => {
       if (active && data) setRegistryNav(data);
@@ -53,8 +58,7 @@ export const NavProvider: React.FC<{
     return () => {
       active = false;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [hasNav]);
 
   const nav = isRegistryMode ? registryNav : initialNav;
   return <NavContext.Provider value={{ nav, currentSectionId }}>{children}</NavContext.Provider>;

package/src/app/components/ui/attachment.tsx

@@ -0,0 +1,50 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+
+const attachmentVariants = cva(
+  'group/attachment relative flex w-fit min-w-40 max-w-full shrink-0 flex-wrap items-center rounded-xl border bg-card text-card-foreground focus-within:ring-1 focus-within:ring-ring/50',
+  {
+    variants: {
+      size: {
+        default:
+          'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
+        sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
+        xs: 'gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
+      },
+    },
+  }
+);
+
+function Attachment({ className, size = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof attachmentVariants>) {
+  return <div data-slot="attachment" data-size={size} className={cn(attachmentVariants({ size }), className)} {...props} />;
+}
+
+function AttachmentMedia({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="attachment-media"
+      className={cn(
+        "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AttachmentContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="attachment-content" className={cn('min-w-0 max-w-full flex-1 leading-tight', className)} {...props} />;
+}
+
+function AttachmentTitle({ className, ...props }: React.ComponentProps<'span'>) {
+  return <span data-slot="attachment-title" className={cn('block min-w-0 max-w-full truncate font-medium', className)} {...props} />;
+}
+
+function AttachmentAction({ className, variant, size = 'icon-xs', ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="attachment-action" variant={variant ?? 'ghost'} size={size} className={cn(className)} {...props} />;
+}
+
+export { Attachment, AttachmentAction, AttachmentContent, AttachmentMedia, AttachmentTitle };

package/src/app/components/ui/bubble.tsx

@@ -0,0 +1,57 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const bubbleVariants = cva(
+  'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 data-[align=end]:self-end data-[variant=ghost]:max-w-full',
+  {
+    variants: {
+      variant: {
+        default:
+          '*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80',
+        secondary:
+          '*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-secondary/80',
+        muted: '*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/80',
+        outline:
+          '*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground',
+        ghost:
+          '*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted',
+        destructive:
+          '*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Bubble({
+  variant = 'default',
+  align = 'start',
+  className,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof bubbleVariants> & { align?: 'start' | 'end' }) {
+  return (
+    <div data-slot="bubble" data-variant={variant} data-align={align} className={cn(bubbleVariants({ variant }), className)} {...props} />
+  );
+}
+
+function BubbleContent({ asChild = false, className, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="bubble-content"
+      className={cn(
+        'wrap-break-word w-fit min-w-0 max-w-full overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed group-data-[align=end]/bubble:self-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Bubble, BubbleContent, bubbleVariants };

package/src/app/components/ui/button.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-gray-800 text-white shadow-sm hover:bg-gray-700',
+        default: 'bg-neutral-800 text-white shadow-sm hover:bg-neutral-700',
         destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
         outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
@@ -21,6 +21,8 @@ const buttonVariants = cva(
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
         icon: 'h-9 w-9',
+        'icon-sm': 'h-8 w-8',
+        'icon-xs': 'h-6 w-6',
       },
     },
     defaultVariants: {