# Trang 5.8: Quản lý môi trường xem trước và theo dõi tiến độ (/preview & /status).

## 1. Tổng quan

Trang này hướng dẫn hai workflow đơn giản nhưng cực kỳ hữu ích trong công việc hàng ngày:

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-workflow-m%E1%BB%A5c-%C4%91%C3%ADch-%2Fp"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Workflow</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Mục đích</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Quản lý server phát triển cục bộ</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`/status`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Xem tổng quan tiến độ và trạng thái dự án</td></tr></tbody></table>

</div>---

## Phần A: `/preview` — Quản lý server phát triển

### A.1. Các lệnh `/preview`

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-l%E1%BB%87nh-ch%E1%BB%A9c-n%C4%83ng-%2Fprev"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Lệnh</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Chức năng</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview start`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Khởi động server phát triển</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview stop`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Dừng server đang chạy</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview restart`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Khởi động lại server (áp dụng config mới)</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm tra trạng thái hiện tại</td></tr></tbody></table>

</div>### A.2. Tính năng tự động nhận diện framework

Workflow này đủ thông minh để **tự nhận diện** loại dự án và chạy đúng lệnh:

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-framework-l%E1%BB%87nh-%C4%91%C6%B0%E1%BB%A3c-"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Framework</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Lệnh được chạy tự động</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Next.js</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`npm run dev` (port 3000)</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Vite</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`npm run dev` (port 5173)</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Create React App</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`npm start` (port 3000)</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Express/Node.js</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`node server.js` hoặc `npm start`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">FastAPI (Python)</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`uvicorn main:app --reload`</td></tr></tbody></table>

</div>### A.3. Xử lý xung đột Port

Nếu port mặc định (3000) đã bị chiếm bởi ứng dụng khác:

```html
🤖 AI: Port 3000 đang bận.
Đề xuất alternatives:
- Port 3001 ✅ (available)
- Port 8080 ✅ (available)


Dùng port 3001? (Y/N)
```

### A.4. Ví dụ phiên làm việc

```html
👤 Bạn: /preview start


🤖 AI:
   🔍 Đang phát hiện framework...
   ✅ Tìm thấy: Next.js 14 (App Router)


   📦 Đang khởi động...
   Running: npm run dev


   ✅ Preview sẵn sàng!
   URL: http://localhost:3000


Server sẽ tiếp tục chạy. Dùng /preview stop để tắt.


👤 Bạn: /preview


🤖 AI:
   📊 Preview Status
   -----------------
   Status: 🟢 Running
   URL: http://localhost:3000
   Framework: Next.js 14
   Port: 3000
   Uptime: 12 phút


👤 Bạn: /preview stop


🤖 AI:
   ⏹️ Đã dừng server preview.
   Port 3000 đã được giải phóng.
```

### A.5. Khi nào dùng `/preview`

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-t%C3%ACnh-hu%E1%BB%91ng-l%E1%BB%87nh-sau-"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Tình huống</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Lệnh</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Sau khi `/create` hoặc `/enhance` xong</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview start`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Cần xem UI thay đổi trên trình duyệt</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview start`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Thay đổi cấu hình (next.config.js...)</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview restart`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Trước khi tắt máy</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview stop`</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Không nhớ server có đang chạy không</td><td class="px-3 py-2 leading-snug border border-gray-500/20">`/preview`</td></tr></tbody></table>

</div>---

## Phần B: `/status` — Bảng điều khiển tiến độ dự án

### B.1. Mục đích

Lệnh `/status` cung cấp **bảng điều khiển tổng thể** (dashboard) để bạn nắm bắt nhanh tình trạng hiện tại của dự án, bao gồm: thông tin kỹ thuật, tiến độ các Agent đang làm việc, và trạng thái server.

### B.2. Cú pháp

```bash
bash
/status
```

### B.3. Thông tin được hiển thị

```bash
=== Project Status ===


📁 Project Information
Name: my-ecommerce-app
Type: Next.js + PostgreSQL
Version: 1.2.0
Files: 147 total (73 created, 12 modified, 62 unchanged)


=== Agent Status ===


✅ database-architect → Completed (Schema + Migrations)
✅ backend-specialist → Completed (All API Endpoints)
🔄 frontend-specialist → In Progress (60% — Cart Page)
⏳ test-engineer → Waiting (Pending frontend completion)


=== Test Results ===


✅ Unit Tests: 45/45 passed
✅ Integration Tests: 12/12 passed
⚠️ E2E Tests: 8/10 passed (2 failing)


=== Preview ===


🌐 URL: http://localhost:3000
💚 Health: OK (responding in 124ms)
```

### B.4. Ví dụ phiên làm việc

```html
👤 Bạn: /status


🤖 AI:


=== 📊 PROJECT STATUS ===


📁 my-saas-app (Next.js + Prisma + PostgreSQL)
Files: 89 tổng (34 mới tạo hôm nay)
Branch: feature/payment-integration


=== 🤖 AGENT STATUS ===


✅ database-architect → DONE — Payment schema + Stripe webhook table
✅ backend-specialist → DONE — /api/payments (create, confirm, refund)
✅ security-auditor → DONE — Reviewed, không có high-severity issues
🔄 frontend-specialist → 70% — Đang tạo CheckoutPage...
⏳ test-engineer → Chưa bắt đầu


=== 🧪 TEST STATUS ===


✅ 38 tests passed | ❌ 0 failed | 📊 Coverage: 82%


=== 🌐 PREVIEW ===


Status: 🟢 Running — http://localhost:3000
Response time: 89ms


=== 💡 NEXT STEPS ===


1. Chờ frontend-specialist hoàn thành CheckoutPage (~30 phút)
2. Chạy /test để tạo test cho payment flow
3. Chạy /deploy khi tất cả test pass
```

### B.5. Khi nào dùng `/status`

<div class="my-4 rounded-lg overflow-hidden border border-gray-500/20 [&_thead_tr:first-child_th:first-child]:border-t-0 [&_thead_tr:first-child_th:first-child]:border-l-0 [&_thead_tr:first-child_th:last-child]:border-t-0 [&_thead_tr:first-child_th:last-child]:border-r-0 [&_tbody_tr:last-child_td:first-child]:border-b-0 [&_tbody_tr:last-child_td:first-child]:border-l-0 [&_tbody_tr:last-child_td:last-child]:border-b-0 [&_tbody_tr:last-child_td:last-child]:border-r-0 [&_thead_tr:first-child_th]:border-t-0 [&_tbody_tr:last-child_td]:border-b-0 [&_th:first-child]:border-l-0 [&_td:first-child]:border-l-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0" id="bkmrk-t%C3%ACnh-hu%E1%BB%91ng-l%C3%BD-do-%C4%90%E1%BA%A7u"><table class="min-w-full border-separate border-spacing-0"><thead><tr><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Tình huống</th><th class="bg-gray-500/20 px-3 py-2 text-left font-medium leading-snug border border-gray-500/20">Lý do</th></tr></thead><tbody><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Đầu ngày làm việc</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Nhắc lại tiến độ từ hôm qua</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Sau khi `/orchestrate` phức tạp</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Kiểm tra tất cả Agent đã xong chưa</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Trước khi `/deploy`</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Đảm bảo mọi thứ xanh trước khi đẩy lên production</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Khi bàn giao cho đồng đội</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Chia sẻ trạng thái hiện tại nhanh chóng</td></tr><tr><td class="px-3 py-2 leading-snug border border-gray-500/20">Khi không nhớ đang làm đến đâu</td><td class="px-3 py-2 leading-snug border border-gray-500/20">Lấy lại ngữ cảnh công việc</td></tr></tbody></table>

</div>---

## Phần C: Vòng lặp phát triển kết hợp

Sử dụng `/preview` và `/status` trong quy trình hàng ngày:

```html
🌅 Bắt đầu ngày làm việc:
/status → Xem lại tiến độ hôm qua
/preview start → Khởi động server để làm việc


🔨 Trong giờ làm:
/enhance [feature] → Thêm tính năng
/preview start → Xem kết quả
/test → Kiểm tra không có regression


🌇 Cuối ngày:
/status → Tổng kết tiến độ hôm nay
/preview stop → Tắt server


🚀 Trước khi deploy:
/status → Xác nhận tất cả Agent xong việc
/test → Đảm bảo tất cả test pass
/deploy → Triển khai
```