Merge main and resolve frameworks.tsx conflict

.changeset/three-hands-open.md

@@ -0,0 +1,2 @@
+---
+---

docs/app/(home)/components/frameworks.tsx

@@ -179,8 +179,8 @@ export const Vite = (props: ComponentProps<'svg'>) => (
         y2="344"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#41D1FF" />
-        <stop offset="1" stop-color="#BD34FE" />
+        <stop stopColor="#41D1FF" />
+        <stop offset="1" stopColor="#BD34FE" />
       </linearGradient>
       <linearGradient
         id="paint1_linear_16_2"
@@ -190,9 +190,9 @@ export const Vite = (props: ComponentProps<'svg'>) => (
         y2="292.989"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#FFEA83" />
-        <stop offset="0.0833333" stop-color="#FFDD35" />
-        <stop offset="1" stop-color="#FFA800" />
+        <stop stopColor="#FFEA83" />
+        <stop offset="0.0833333" stopColor="#FFDD35" />
+        <stop offset="1" stopColor="#FFA800" />
       </linearGradient>
     </defs>
   </svg>

docs/app/docs/[[...slug]]/page.tsx

@@ -2,6 +2,7 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
 import { notFound } from 'next/navigation';
+import { AgentTraces } from '@/components/custom/agent-traces';
 import { AskAI } from '@/components/geistdocs/ask-ai';
 import { CopyPage } from '@/components/geistdocs/copy-page';
 import {
@@ -61,6 +62,7 @@ const Page = async (props: PageProps<'/docs/[[...slug]]'>) => {
             a: createRelativeLink(source, page),
 
             // Add your custom components here
+            AgentTraces,
             Badge,
             TSDoc,
             Step,

docs/app/layout.tsx

@@ -39,6 +39,7 @@ const suggestions = [
   'How does retrying work?',
   'What control flow patterns are there?',
   'How do directives work?',
+  'How do I build an AI agent?',
 ];
 
 const Layout = ({ children }: LayoutProps<'/'>) => (

docs/components/custom/agent-traces.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { motion } from 'motion/react';
+import { cn } from '@/lib/utils';
+
+// Color presets for trace rows
+const colors = {
+  workflow:
+    'bg-[#E1F0FF] dark:bg-[#00254D] border-[#99CEFF] text-[#0070F3] dark:border-[#0067D6] dark:text-[#52AEFF]',
+  stream:
+    'bg-[#DCF6DC] dark:bg-[#1B311E] border-[#99E59F] text-[#46A758] dark:border-[#297C3B] dark:text-[#6CDA76]',
+  tool: 'bg-[#FFF4E5] dark:bg-[#3D2800] border-[#FFCC80] text-[#F5A623] dark:border-[#9A6700] dark:text-[#FFCA28]',
+  approval:
+    'bg-[#FCE7F3] dark:bg-[#4A1D34] border-[#F9A8D4] text-[#EC4899] dark:border-[#BE185D] dark:text-[#F472B6]',
+  webhook:
+    'bg-[#EDE9FE] dark:bg-[#2E1065] border-[#C4B5FD] text-[#7C3AED] dark:border-[#6D28D9] dark:text-[#A78BFA]',
+};
+
+type TraceRow = {
+  label: string;
+  className: string;
+  start: number;
+  duration: number;
+};
+
+const defaultRows: TraceRow[] = [
+  {
+    label: 'chatWorkflow',
+    className: colors.workflow,
+    start: 0,
+    duration: 100,
+  },
+  { label: 'agent.stream', className: colors.stream, start: 2, duration: 16 },
+  { label: 'searchWeb', className: colors.tool, start: 20, duration: 13 },
+  { label: 'agent.stream', className: colors.stream, start: 37, duration: 16 },
+  {
+    label: 'waitForHumanApproval',
+    className: colors.approval,
+    start: 57,
+    duration: 24,
+  },
+  { label: 'agent.stream', className: colors.stream, start: 84, duration: 16 },
+];
+
+const messageQueueRows: TraceRow[] = [
+  {
+    label: 'chatWorkflow',
+    className: colors.workflow,
+    start: 0,
+    duration: 100,
+  },
+  { label: 'agent.stream', className: colors.stream, start: 2, duration: 16 },
+  {
+    label: 'hook.enqueue()',
+    className: colors.webhook,
+    start: 12,
+    duration: 24,
+  },
+  {
+    label: 'tool.checkDB()',
+    className: colors.tool,
+    start: 18,
+    duration: 18,
+  },
+  { label: 'agent.stream', className: colors.stream, start: 36, duration: 16 },
+  {
+    label: 'hook.enqueue()',
+    className: colors.webhook,
+    start: 46,
+    duration: 24,
+  },
+  {
+    label: 'tool.search()',
+    className: colors.tool,
+    start: 52,
+    duration: 18,
+  },
+  { label: 'agent.stream', className: colors.stream, start: 70, duration: 16 },
+];
+
+const variants = {
+  default: defaultRows,
+  'message-queue': messageQueueRows,
+} as const;
+
+type Variant = keyof typeof variants;
+
+interface AgentTracesProps {
+  variant?: Variant;
+}
+
+export const AgentTraces = ({ variant = 'default' }: AgentTracesProps) => {
+  const rows = variants[variant];
+
+  return (
+    <div className="not-prose my-8 rounded-lg border bg-card p-4 sm:p-6">
+      <div className="space-y-2 w-full">
+        {rows.map((row, index) => (
+          <div
+            key={`${row.label}-${index}`}
+            className="flex flex-col overflow-hidden"
+            style={{
+              marginLeft: `${row.start}%`,
+              width: `${row.duration}%`,
+            }}
+          >
+            <div className="relative h-6 w-full">
+              <motion.div
+                initial={{ width: 0, opacity: 0 }}
+                whileInView={{ width: 'auto', opacity: 1 }}
+                viewport={{ once: true, amount: 0.8 }}
+                transition={{
+                  duration: 0.55,
+                  delay: index * 0.12,
+                  ease: [0.22, 1, 0.36, 1],
+                }}
+                className={cn(
+                  'h-full rounded-sm border overflow-hidden',
+                  row.className
+                )}
+              >
+                <div className="flex justify-between items-center h-full px-2">
+                  <span className="text-[10px] sm:text-[11px] font-mono font-medium text-foreground truncate leading-none">
+                    {row.label}
+                  </span>
+                  {index === 0 && (
+                    <span className="text-[10px] sm:text-[11px] hidden sm:inline leading-none">
+                      {row.duration}ms
+                    </span>
+                  )}
+                </div>
+              </motion.div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

docs/components/geistdocs/desktop-menu.tsx

@@ -1,20 +1,28 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
 } from '@/components/ui/navigation-menu';
 import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
 
 type DesktopMenuProps = {
   items: { label: string; href: string }[];
 };
 
 export const DesktopMenu = ({ items }: DesktopMenuProps) => {
   const isMobile = useIsMobile();
+  const pathname = usePathname();
+
+  const isActive = (href: string) => {
+    if (href.startsWith('http')) return false;
+    return pathname === href || pathname.startsWith(`${href}/`);
+  };
 
   return (
     <NavigationMenu viewport={isMobile}>
@@ -23,7 +31,10 @@ export const DesktopMenu = ({ items }: DesktopMenuProps) => {
           <NavigationMenuItem key={item.href}>
             <NavigationMenuLink
               asChild
-              className="rounded-md px-3 font-medium text-sm"
+              className={cn(
+                'rounded-md px-3 font-medium text-sm text-gray-400',
+                isActive(item.href) && 'text-white'
+              )}
             >
               <Link href={item.href}>{item.label}</Link>
             </NavigationMenuLink>

docs/components/geistdocs/docs-layout.tsx

@@ -18,7 +18,7 @@ export const DocsLayout = ({
     }}
     sidebar={{
       className:
-        'md:static md:sticky md:top-16 md:h-fit md:w-auto! bg-background! md:bg-transparent! border-none transition-none',
+        'md:static md:sticky md:top-16 md:max-h-[calc(100vh-4rem)] md:overflow-y-auto md:w-auto! bg-background! md:bg-transparent! border-none transition-none',
       collapsible: false,
       components: {
         Folder,