/Users/maxgeorgopoulos/Documents/traces/frontend/components/HomeHero.tsx file 1: import { InstallTabs } from "@/components/InstallTabs"; 2: import { HeroImage } from "@/components/HeroImage"; 3: import { AgentLogo, AGENT_IDS_WITH_LOGOS, getAgentName } from "@/components/ui/AgentLogo"; 4: 5: /** 6: * Homepage hero section. 7: * Shows marketing content and CLI install instructions. 8: */ 9: export function HomeHero() { 10: return ( 11:

12:

23:

24:

25:

26:

33: Coding agents in multiplayer mode 34:

35:

42: A new way to discover, share and collaborate on agent traces. 43:

44:

45:

46: 47:

48:

49:

50: Works with your favorite agents 51:

52:

53: {AGENT_IDS_WITH_LOGOS.map((agentId) => ( 54:

55: 56:

57: ))} 58:

59:

60:

61:

62: 63:

64:

65:

66: ); 67: } 68: (End of file - total 68 lines)

Instructions from: /Users/maxgeorgopoulos/Documents/traces/frontend/AGENTS.md # Frontend Agent Instructions ## Stack - Next.js 15 (App Router, RSC) - React 19 - Tailwind CSS v4 - Convex (real-time backend) ## Commands | Command | Description | |---------|-------------| | `bun run dev` | Start dev server | | `bun run build` | Production build | | `bun run lint` | Run ESLint | ## Skills | Skill | Path | |-------|------| | Next.js | `.agents/skills/next-best-practices/SKILL.md` | | React Performance | `.agents/skills/vercel-react-best-practices/SKILL.md` | | React Composition | `.agents/skills/vercel-composition-patterns/SKILL.md` | | UI Guidelines | `.agents/skills/ui-guidelines/SKILL.md` | ## Conventions - MUST: Use `@traces/shared` PartType constants (not string literals) - MUST: Server Components by default, `'use client'` only when needed - MUST: Respect `prefers-reduced-motion` for animations - MUST: Use `next/image` over `` - MUST: Full keyboard support per WAI-ARIA APG - NEVER: Use `

` for navigation - NEVER: Disable browser zoom - SHOULD: Optimistic UI with rollback on failure ## File Structure ``` frontend/ ├── app/ # Next.js App Router pages ├── components/ # React components │ ├── ui/ # Reusable UI primitives │ ├── messages/ # Message rendering components │ └── filters/ # Filter components ├── contexts/ # React contexts ├── hooks/ # Custom hooks └── lib/ # Utilities and helpers ``` ## Data Fetching - Use Convex hooks (`useQuery`, `useMutation`) for real-time data - Server Components fetch via `fetchQuery` from `convex/nextjs` - Reference: `docs/api.md` for endpoint documentation ## Message Rendering Architecture - `frontend/lib/message-utils.ts` owns global message classification and shared predicates. - `frontend/lib/message-transforms.ts` owns parsing of injected XML-like context payloads (``, ``, ``, ``). - Keep this split strict: `message-utils` decides type, `message-transforms` parses payload detail. - `agent_context` messages render via `components/messages/special/AgentContextMessage.tsx` and should stay hidden in Highlights by default. - Interruption detection must support variants like `[Request interrupted by user for tool use]`, not only exact `[Request interrupted by user]`.

Summary

Summary