Prime Frontend: Web UI Orientation

Objective

Orient on the React frontend (packages/web/) before working on Web UI code. Also covers the server-side Web adapter that feeds data to the UI via SSE.

Process

1. Understand the Frontend Stack

Read packages/web/package.json for exact dependency versions (React 19, Vite 6, TanStack Query v5, React Router v7, Tailwind v4, shadcn/ui).

2. Understand the Route and Layout Structure

Read packages/web/src/App.tsx for routes, layout, QueryClient config, and ErrorBoundary.

List route pages: !ls packages/web/src/routes/

List component directories: !ls packages/web/src/components/

3. Understand Component Organization

List each component subdirectory to understand the breakdown (chat, conversations, dashboard, layout, sidebar, ui, workflows): !ls packages/web/src/components/chat/ packages/web/src/components/workflows/ packages/web/src/components/layout/

4. Understand Data Fetching

Read packages/web/src/lib/api.ts — API client with REST functions and SSE base URL logic.

Read hooks in packages/web/src/hooks/: !ls packages/web/src/hooks/

Read packages/web/src/hooks/useSSE.ts for the SSE streaming pattern.

5. Understand Theme and Styling

Read packages/web/src/index.css for the Tailwind v4 @theme inline \{\} block — this is the single source of truth for colors, fonts, and design tokens (dark theme only, blue accents, Inter + JetBrains Mono fonts). Note: uses @import "tailwindcss" (not @tailwind directives).

6. Understand the Server-Side Web Adapter

Read packages/server/src/adapters/web/ files — the Web adapter uses SSE for streaming and sendStructuredEvent() for rich tool call data. !ls packages/server/src/adapters/web/

Read packages/server/src/routes/api.ts first 80 lines for API route structure.

7. Check Recent Frontend Activity

!git log -8 --oneline -- packages/web/ packages/server/src/adapters/web/

Output

Summarize (under 200 words):

Route Structure

• List each route page and its URL path
• Note active route and layout components

Component Organization

• Key component groups and their responsibilities

Data Fetching

• TanStack Query for REST (conversations, codebases, workflows)
• Manual EventSource (useSSE) for SSE streaming — bypasses Vite proxy in dev
• SSE_BASE_URL pattern: direct backend in dev, relative in prod

Tailwind v4 + shadcn/ui Patterns

• @theme inline \{\} block (not tailwind.config.ts)
• tw-animate-css for animations
• Component aliases in tsconfig.json (@/ → src/)

Recent Changes

• Last few frontend commits