Trovella Wiki

Application

Next.js App Router, page patterns, middleware, API routes, UI components, and state management.

The Application domain covers the Next.js web application layer -- everything from the HTTP request entering the App Router through rendering in the browser.

Topics

Routing & Pages

App Router file structure, page patterns, middleware (CSP), server/client component boundaries, and API route handlers.

API Layer

tRPC v11 setup, procedure chain, router patterns, error handling, and client configuration.

State Management

Server state (TanStack Query via tRPC), client state (React hooks, Zustand planned), URL state (nuqs planned), form handling (controlled inputs, Zod validation), and React Hook Form (planned).

UI Components

shadcn/ui component library, design tokens, theming, and component patterns.

Admin Dashboard

Admin views for monitoring AI usage, research plans, skill executions, and hybrid search.

Key Packages

PackageRole
@repo/webNext.js 16 application, App Router pages, middleware, API routes
@repo/apitRPC router definitions, procedure chain
@repo/validatorsZod schemas shared between client and server
@repo/design-tokensTailwind + theme configuration

Cross-Domain References

  • Identity & Access -- authentication checks in page components, organization bootstrapping in DashboardPage
  • Data & Storage -- tRPC procedures called from client components via TanStack Query
  • Infrastructure -- standalone Docker output, Sentry error tracking, security headers
  • Delivery -- CI quality gates, architecture enforcement for import boundaries

On this page