Files
devos/Docs/devos-v1/06-FRONTEND-ARCHITECTURE.md
phptits 0d6cd37579 DevOS v1 + Phase 2: unified resource model, infra ops, website deployment, AI chat ops
- 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)
2026-09-10 06:35:55 +00:00

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.