AGENTS.md

This project ships agent context: skills under .agents/skills/ and MCP servers in .mcp.json. Load them before writing code.

Project

React + TypeScript (Vite) todo app backed by Project Rayfin with Radix-based UI components styled with Tailwind CSS. Demonstrates todo management with Fabric Entra authentication enabled by default. Auth is fully integrated: local dev uses a mock email/password flow, production uses Fabric Entra SSO.

Repo map

• src/ – React UI
• src/components/ui/ – Radix-based UI components (shadcn)
• src/components/ – App components (TodoForm, TodoList, AuthPage, MockSignInDialog)
• src/hooks/ – React hooks (useTodos, AuthContext)
• src/pages/ – Page components (Dashboard, AuthCallback)
• src/services/ – Service layer (ServiceContainer, Rayfin services, auth services)
• rayfin/rayfin.yml – Rayfin configuration (auth and data enabled)
• rayfin/data/ – Entities (export from rayfin/data/schema.ts)

UI (Radix-based shadcn/ui)

This project uses Radix-based UI components styled with Tailwind CSS v4.

• UI components live in src/components/ui/
• Utility helper lives in src/lib/utils.ts (cn)
• Add a component: npx shadcn@latest add <component>

Key config/files:

• Global styles + Tailwind import: src/styles/theme.css
• Path alias @/* → src/*: tsconfig.json
• Vite plugins + alias: vite.config.ts
• shadcn registry/config: components.json

Architecture

Service Layer

• ServiceContainer: Singleton that initializes and provides access to services; auto-detects local vs. production and selects the appropriate auth service
• RayfinClientService: Manages the RayfinClient singleton instance
• RayfinTodoService: Todo CRUD via DataApi fluent interface

Auth Service Layer

• RayfinAuthService: Fabric Entra authentication operations (production)
• RayfinFabricAuthService: Delegates to @microsoft/rayfin-auth-provider-fabric SDK for Entra flows
• MockAuthService: Local development mock authentication (email/password via local backend)
• AuthContext: React context for auth state management

Routing

• /auth – Public auth page (Fabric sign-in or mock sign-in; redirects to / if authenticated)
• /auth/callback – Fabric Entra OAuth callback
• / – Protected dashboard (redirects to /auth if not authenticated)

Key files

• rayfin/data/Todo.ts – Entity with @role decorator and user_id policy
• src/services/ServiceContainer.ts – Service initialization with auth-mode detection
• src/hooks/useTodos.ts – Todo operations hook with milestone seeding
• src/pages/Dashboard.tsx – Main dashboard with milestones and todo list

Environment

• .env – Default Fabric API configuration
• .env.local – Local overrides (git-ignored, generated by rayfin dev)
• rayfin/.env – Runtime + deployment env (managed by Rayfin CLI)
• rayfin/.deployments.json – Registry of all Fabric workspace deployments (managed by Rayfin CLI)

Code conventions

• TypeScript strict mode; prefer small functional React components.
• Keep UI logic in src/; keep data model code in rayfin/data/.
• Services follow the singleton pattern via ServiceContainer.
• ServiceContainer auto-selects MockAuthService for localhost backends and RayfinAuthService for production.

Generated files (do not edit)

• rayfin/.temp/ – Rayfin/DAB config generation output
• dist/ – Vite build output
• .env.local – Local environment overrides (git-ignored, script-managed)