CoaxysPanel/AGENTS.md

Project Architecture & Exploration

This document summarizes the findings from the autonomous agents deployed to analyze the CoaxysPanel frontend repository.

1. Features & Routing Structure

Explored by the Features Researcher

• Routing Model: Uses Next.js App Router. The application is divided into (auth) (for login, passwords, 2FA flows) and (panel) (for the authenticated control panel). The panel relies heavily on a centralized dynamic catch-all route [...slug] to manage over 100 configured paths without duplicating page boilerplate.
• Route Registry: src/lib/routes.ts defines all available panel modules (e.g., Databases, Websites, Files, Security).
• Core Views: Handled by the FeaturePage component which dynamically loads the relevant feature (like the Dashboard, File Manager, DNS Editor, or Terminal) based on the current path and required permissions.

2. Components & UI Design

Explored by the Components Researcher

• Layered Architecture: Organized into four groups inside src/components:
  • ui/: Fundamental design blocks (shadcn/ui style with Radix and Tailwind).
  • common/: Reusable composites like DataTable (using @tanstack/react-table), PageHeader, and loading/error states.
  • shell/: The main application frame containing the sidebar, header, and global command palette.
  • features/: The complex domain-specific pages (e.g., Wizards, Terminals) loaded by the Next.js router.
• Design System: A robust, heavily customized "glassmorphic" Tailwind UI, using css variables and variants to construct glowing shadows, backdrops, and seamless transitions.
• Key Patterns: Widespread use of client components ("use client"), dynamic lazy loading for heavy widgets like the Terminal (xterm.js) and charts, and TanStack React Query for data fetching.

3. Architecture & Data Flow

Explored by the Architecture Researcher

• State Management: Uses Zustand (with persistence) centrally located at src/stores/ui-store.ts. Primarily tracks layout views (sidebar status) and complex appearance themes (accents, glass intensity, density).
• API Contracts: Strong typing in src/api/contracts/ for requests, responses, pagination, and data models (e.g., User, Website, Database, Backup).
• Mock Services: Because this is a frontend-only control center template, data access occurs through a mock client (src/api/client.ts) that simulates network latency and errors. Rich placeholder data is generated by src/api/mocks/seed.ts (using date-fns), which feeds into the simulated endpoints in src/api/services/panel-service.ts.
• Utilities: Employs clsx and tailwind-merge for style class merging, along with robust date utilities.

---

Generated autonomously via specialized subagents.