# DevOS v1 Frontend Architecture

## 1. Stack
React + TypeScript + Ant Design + ProComponents + TanStack Query + Zustand + React Router + TipTap.

## 2. Application Layout

```text
apps/web
├── app
├── routes
├── layouts
├── features
│   ├── auth
│   ├── dashboard
│   ├── resources
│   ├── servers
│   ├── websites
│   ├── deployments
│   ├── domains
│   ├── monitoring
│   ├── automation
│   └── ai
├── components
└── services
```

Shared packages:

```text
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.