- Monorepo: NestJS API (Fastify) + React web (antd/ProComponents) + shared packages - PostgreSQL/Prisma (unified resources, relations graph, audit, events, jobs) - Auth/RBAC/workspace isolation, credential vault (AES-256-GCM) - Servers/SSH, Docker discovery & lifecycle, Job Center - Websites & deployments (git provider credential clone, env, health verification) - Domains/DNS (Cloudflare adapter), certificates (TLS probe), monitoring - Automation (cron/event/webhook HMAC + notifications), AI Gateway, MCP (29 tools) - AI chat window (LLM function-calling + rules fallback, SSE streaming, approvals) - Notes: Vditor WYSIWYG markdown editor, non-blocking autosave - Tests: 35 unit/security tests; UI audit clean (desktop+mobile, deep links)
1.4 KiB
1.4 KiB
DevOS v1 Frontend Architecture
1. Stack
React + TypeScript + Ant Design + ProComponents + TanStack Query + Zustand + React Router + TipTap.
2. Application Layout
apps/web
├── app
├── routes
├── layouts
├── features
│ ├── auth
│ ├── dashboard
│ ├── resources
│ ├── servers
│ ├── websites
│ ├── deployments
│ ├── domains
│ ├── monitoring
│ ├── automation
│ └── ai
├── components
└── services
Shared packages:
packages/
├── ui/
├── api-client/
├── types/
└── auth/
3. UI Principle
Use Ant Design and ProComponents instead of building common enterprise controls from scratch.
Primary components:
- ProLayout
- ProTable
- ProForm
- ProDescriptions
- ProCard
- ProList
4. State
- Server state: TanStack Query
- Local UI state: Zustand / React state
- Do not duplicate server state into global stores without a clear reason.
5. Dashboard
The home page should prioritize:
- AI command entry
- Infrastructure health
- Projects
- Recent activity
- Deployment/monitoring warnings
6. Resource UI
Resource detail pages should expose:
- Overview
- Relations
- Actions
- Activity/Audit
- Logs where applicable
- Related resources
Dangerous actions require explicit confirmation and risk presentation.