@pixel-normal-edit/mcp 2.0.10 → 2.1.0

package/rules/README.md

@@ -1,403 +1,476 @@
-# Rules Module — Báo cáo hoạt động
+# RULE: QUY TRÌNH TẠO, SỬA ẢNH VÀ TẠO ANIMATION
 
-## Tổng quan
+## 1. Nguyên tắc chung
 
-Module `rules/` là **bộ não điều khiển** của MCP Firebase Bridge. Nó đảm bảo agent AI **không thể làm bậy** — mọi thao tác vẽ đều phải tuân theo quy trình đã định sẵn.
+Mọi thao tác vẽ, sửa ảnh hoặc tạo animation phải được thực hiện theo quy trình tuần tự, có trạng thái rõ ràng.
 
----
+AI không được tự ý:
 
-## Cấu trúc thư mục
+* Bỏ qua bước.
+* Nhảy sang bước tiếp theo khi bước hiện tại chưa hoàn tất.
+* Tự ý tạo ảnh mới trong quy trình sửa ảnh.
+* Thay đổi các thành phần không nằm trong phạm vi yêu cầu.
+* Ghi đè trạng thái của bước trước nếu chưa hoàn tất hoặc chưa được xác nhận.
 
-```
-rules/
-├── index.js           # Module aggregator — import tất cả và export registerAll()
-├── rules.js           # Định nghĩa rules: naming, workflow steps, constraints
-├── workflow.js        # Workflow engine — quản lý trạng thái từng bước
-└── prerequisites.js   # 7 MCP Tools để agent tương tác với workflow
+Mỗi bước phải được lưu vào trạng thái, ví dụ:
+
+```text
+current_mode
+current_step
+current_layer
+current_frame
+user_approval_required
+step_status
 ```
 
----
+Trạng thái mẫu:
 
-## Luồng hoạt động (Workflow)
+```text
+current_mode: CREATE_IMAGE
+current_step: ANALYZE_REQUEST
+current_layer: 0
+current_frame: null
+step_status: IN_PROGRESS
+user_approval_required: false
+```
 
-### 1. Agent bắt đầu bằng `workflow_start`
+Các trạng thái có thể sử dụng:
 
-```
-Agent → workflow_start()
-       ↓
-Workflow Engine khởi tạo 9 bước:
-  [create_canvas → name_canvas → resize_canvas → enable_animation → 
-   setup_layers → prepare_colors → draw → review → finalize]
-       ↓
-Trả về: "Bước hiện tại: Tạo canvas"
+```text
+PENDING
+IN_PROGRESS
+WAITING_FOR_USER
+COMPLETED
+FAILED
+CANCELLED
 ```
 
-### 2. Agent thực hiện từng bước
+---
 
-Mỗi bước có **3 tool** liên quan:
+# 2. TẠO ẢNH MỚI
 
-| Tool | Mục đích | Khi nào dùng |
-|------|----------|--------------|
-| `workflow_validate` | Kiểm tra có được phép làm bước này không | **TRƯỚC** mỗi thao tác |
-| `*_tools` (vd: `canvas_resize`) | Thực hiện thao tác thật | Sau khi validate OK |
-| `workflow_advance` | Đánh dấu hoàn thành, chuyển bước tiếp theo | **SAU** khi thao tác thành công |
+## Bước 1: Khởi tạo Canvas
 
-**Ví dụ thực tế — Bước "Đặt tên canvas":**
+Khi người dùng yêu cầu tạo ảnh:
 
-```
-Agent → workflow_validate(stepId: "name_canvas")
-       ↓
-Workflow Engine kiểm tra:
-  - Đang ở bước 2? ✓
-  - Bước 1 đã hoàn thành? ✓
-       ↓
-Trả về: "✅ Bạn có thể thực hiện name_canvas"
-       ↓
-Agent → validate_canvas_name(name: "Bức tranh 1")
-       ↓
-Trả về: "✅ Tên hợp lệ!"
-       ↓
-Agent → workspace_rename_tab(tabId: "...", name: "Bức tranh 1")
-       ↓
-Thực hiện đổi tên thành công
-       ↓
-Agent → workflow_advance()
-       ↓
-Workflow Engine:
-  - Đánh dấu "name_canvas" = completed
-  - Chuyển sang bước 3: "Resize canvas"
-       ↓
-Trả về: "✅ Hoàn thành: Đặt tên canvas. Bước tiếp theo: Resize canvas"
-```
+1. Kiểm tra kích thước canvas.
+2. Kích thước pixel bắt buộc phải do người dùng cung cấp.
+3. Nếu người dùng chưa cung cấp kích thước, phải hỏi lại.
+4. Không tự động sử dụng kích thước mặc định 32×32 nếu chưa được người dùng xác nhận.
 
-### 3. Nếu agent làm sai thứ tự → BỊ CHẶN
+Ví dụ:
 
+```text
+Canvas:
+width: [user_input]
+height: [user_input]
 ```
-Agent → draw_pixel(x: 10, y: 10, color: "#ff0000")  # ❌ Vẽ trước khi tạo canvas!
-       ↓
-(Nếu có middleware kiểm tra workflow)
-       ↓
-Trả về: "⛔ Bạn chưa thể thực hiện 'draw'. 
-         Trước hết hãy hoàn thành: Tạo canvas"
+
+Sau khi nhận được kích thước, tạo canvas mới.
+
+Trạng thái:
+
+```text
+current_step: INITIALIZE_CANVAS
+step_status: COMPLETED
 ```
 
 ---
 
-## 7 Workflow Tools (trong `prerequisites.js`)
+## Bước 2: Phân tích yêu cầu
 
-### 1. `workflow_start`
-**Mục đích:** Khởi tạo workflow mới  
-**Tham số:** Không có  
-**Trả về:** Trạng thái workflow ban đầu + bước đầu tiên cần làm
+Phân tích yêu cầu của người dùng thành các thành phần có cấu trúc.
 
-```json
-{
-  "content": [{
-    "type": "text",
-    "text": "🚀 Workflow đã bắt đầu!\n📋 Tiến trình vẽ:\n⬜ Tạo canvas\n🔄 Đặt tên canvas ← ĐANG LÀM\n..."
-  }]
-}
-```
+Ví dụ:
 
-### 2. `workflow_status`
-**Mục đích:** Xem tiến trình hiện tại  
-**Tham số:** Không có  
-**Trả về:** Danh sách các bước với trạng thái (✅/🔄/⬜)
+```text
+Subject:
+- Cây
 
-### 3. `workflow_advance`
-**Mục đích:** Đánh dấu hoàn thành bước hiện tại, chuyển sang bước tiếp theo  
-**Tham số:** Không có  
-**Trả về:** Thông báo bước vừa hoàn thành + bước tiếp theo
+Components:
+- Thân cây
+- Cành cây
+- Lá cây
+- Hoa/quả
 
-### 4. `workflow_validate`
-**Mục đích:** Kiểm tra agent có được phép thực hiện hành động không  
-**Tham số:**
-- `stepId` (string): ID bước muốn kiểm tra (vd: "draw", "resize_canvas")
+Environment:
+- Mặt đất
+- Bầu trời
+- Vật thể xung quanh
 
-**Trả về:**
-- Nếu OK: `"✅ Bạn có thể thực hiện 'draw'. Hãy tiếp tục!"`
-- Nếu sai thứ tự: `"⛔ Bạn chưa thể thực hiện 'draw'. Trước hết hãy hoàn thành: Tạo canvas"`
+Style:
+- Pixel art
+- Anime
+- Realistic
+- ...
 
-### 5. `workflow_reset`
-**Mục đích:** Reset workflow về đầu (xóa toàn bộ tiến trình)  
-**Tham số:** Không có  
-**Trả về:** `"🔄 Workflow đã được reset. Hãy bắt đầu lại từ đầu."`
+Lighting:
+- Direction
+- Intensity
+- Shadow
 
-### 6. `validate_canvas_name`
-**Mục đích:** Kiểm tra tên canvas có hợp lệ không  
-**Tham số:**
-- `name` (string): Tên canvas muốn kiểm tra
+Composition:
+- Position
+- Scale
+- Perspective
+```
 
-**Quy tắc:**
-- 3-64 ký tự
-- Chỉ gồm chữ, số, `_`, `-`, khoảng trắng
-- Ví dụ hợp lệ: "Bức_tranh_1", "My Canvas 2024"
+Cấu trúc này phải có khả năng mở rộng tùy theo yêu cầu.
 
-### 7. `validate_canvas_size`
-**Mục đích:** Kiểm tra kích thước canvas có nằm trong giới hạn không  
-**Tham số:**
-- `width` (int): Chiều rộng
-- `height` (int): Chiều cao
+Trạng thái:
 
-**Giới hạn:** 8x8 đến 1024x1024 pixels
+```text
+current_step: ANALYZE_REQUEST
+step_status: COMPLETED
+```
 
 ---
 
-## 9 Workflow Steps (định nghĩa trong `rules.js`)
+## Bước 3: Lập kế hoạch vẽ
+
+AI phải tạo kế hoạch vẽ theo thứ tự từ tổng thể đến chi tiết.
 
-| # | Step ID | Label | Description |
-|---|---------|-------|-------------|
-| 1 | `create_canvas` | Tạo canvas | Tạo tab mới với kích thước phù hợp |
-| 2 | `name_canvas` | Đặt tên canvas | Đặt tên cho canvas (3-64 ký tự) |
-| 3 | `resize_canvas` | Resize canvas | Điều chỉnh kích thước canvas nếu cần |
-| 4 | `enable_animation` | Bật animation | Bật chế độ animation nếu cần nhiều frame |
-| 5 | `setup_layers` | Thiết lập layers | Tạo/sắp xếp layers trước khi vẽ |
-| 6 | `prepare_colors` | Chuẩn bị màu sắc | Chọn màu chính/phụ trước khi vẽ |
-| 7 | `draw` | Vẽ | Thực hiện vẽ theo đúng kỹ thuật |
-| 8 | `review` | Kiểm tra | Xem lại kết quả sau khi vẽ |
-| 9 | `finalize` | Hoàn tất | Lưu và hoàn tất tác phẩm |
+Ví dụ:
+
+```text
+1. Phác thảo bố cục tổng thể.
+2. Vẽ background.
+3. Vẽ các hình khối chính.
+4. Vẽ line hoặc silhouette.
+5. Vẽ từng thành phần chính.
+6. Thêm màu cơ bản.
+7. Thêm ánh sáng và bóng.
+8. Thêm chi tiết nhỏ.
+9. Kiểm tra tổng thể.
+10. Tinh chỉnh.
+```
+
+AI phải trả kế hoạch cho người dùng trước khi bắt đầu thực hiện.
+
+Nếu quy trình yêu cầu xác nhận, chuyển sang:
+
+```text
+step_status: WAITING_FOR_USER
+user_approval_required: true
+```
+
+AI chỉ được tiếp tục sau khi người dùng xác nhận.
 
 ---
 
-## Các loại Rules (trong `rules.js`)
+# 3. QUY TẮC VẼ THEO TỪNG GIAI ĐOẠN
+
+AI phải vẽ theo từng giai đoạn, không thực hiện toàn bộ ảnh trong một bước duy nhất.
 
-### 1. Naming Rules (`NAMING_RULES`)
+Thứ tự tổng quát:
 
-Quy tắc đặt tên cho các đối tượng:
+```text
+PHASE_0: SKETCH / BLOCKING
+PHASE_1: BACKGROUND
+PHASE_2: MAIN_SHAPES
+PHASE_3: LINE / SILHOUETTE
+PHASE_4: BASE_COLORS
+PHASE_5: SHADING
+PHASE_6: LIGHTING
+PHASE_7: DETAILS
+PHASE_8: FINAL_REVIEW
+```
+
+Sau mỗi giai đoạn:
+
+1. Lưu trạng thái.
+2. Kiểm tra kết quả.
+3. Nếu cần, cung cấp ảnh xem trước hoặc cho phép người dùng sử dụng lệnh xem ảnh.
+4. Nếu chưa đạt, tiếp tục chỉnh sửa ở đúng giai đoạn hiện tại.
+5. Không được chuyển sang giai đoạn tiếp theo nếu giai đoạn hiện tại chưa hoàn tất.
+
+Ví dụ:
 
-| Object | Pattern | Example |
-|--------|---------|---------|
-| Canvas/Tab | `^[A-Za-z0-9_\-\sÀ-ỹ]{3,64}$` | "Bức_tranh_1" |
-| Stamp | `^[a-z][a-z0-9_]{2,32}$` | "my_tree_01" |
-| Anchor | `^[a-z][a-z0-9_]{2,32}$` | "head_top" |
+```text
+current_step: DRAW_BACKGROUND
+step_status: IN_PROGRESS
+```
 
-### 2. Workflow Steps (`WORKFLOW_STEPS`)
+Sau khi hoàn tất:
 
-Danh sách 9 bước bắt buộc (xem bảng ở mục trên).
+```text
+current_step: DRAW_BACKGROUND
+step_status: COMPLETED
+```
 
-### 3. Drawing Constraints (`DRAWING_CONSTRAINTS`)
+Sau đó mới được chuyển sang:
 
-| Constraint | Value |
-|------------|-------|
-| Max canvas size | 1024x1024 |
-| Min canvas size | 8x8 |
-| Allowed colors | Tất cả hex colors |
-| Max stamp name length | 32 ký tự |
-| Max anchor name length | 32 ký tự |
+```text
+current_step: DRAW_MAIN_SHAPES
+step_status: IN_PROGRESS
+```
 
 ---
 
-## Workflow Engine (`workflow.js`)
+# 4. QUẢN LÝ LAYER
 
-### State Management
+Layer được sử dụng xuyên suốt toàn bộ quy trình.
 
-Workflow engine lưu trạng thái **in-memory** theo session:
+Cấu trúc cơ bản:
 
-```javascript
-sessions = new Map([
-  "session-id-1": {
-    currentStepIndex: 2,
-    steps: [
-      { id: "create_canvas", label: "Tạo canvas", status: "completed" },
-      { id: "name_canvas", label: "Đặt tên canvas", status: "completed" },
-      { id: "resize_canvas", label: "Resize canvas", status: "in_progress" },
-      // ...
-    ],
-    completedSteps: ["create_canvas", "name_canvas"],
-    startedAt: 1234567890
-  }
-])
+```text
+Layer 0: Background
+Layer 1: Main subject
+Layer 2: Secondary subject
+Layer 3: Details
+Layer n: Additional elements
 ```
 
-### Các hàm chính
-
-| Hàm | Mục đích |
-|------|----------|
-| `start(sessionId)` | Khởi tạo workflow mới |
-| `getState(sessionId)` | Lấy toàn bộ trạng thái |
-| `getCurrentStep(sessionId)` | Lấy bước hiện tại |
-| `validateStep(sessionId, stepId)` | Kiểm tra có được phép làm bước này không |
-| `advance(sessionId)` | Hoàn thành bước hiện tại, chuyển sang bước tiếp |
-| `reset(sessionId)` | Reset workflow về đầu |
-| `getProgressReport(sessionId)` | Lấy báo cáo tiến trình dạng text |
+Tuy nhiên, layer phải được phân chia theo thành phần cần chỉnh sửa độc lập.
 
-### Logic Validation
+Ví dụ với một cái cây:
 
+```text
+Layer 0: Background
+Layer 1: Trunk
+Layer 2: Branches
+Layer 3: Leaves
+Layer 4: Fruits
+Layer 5: Shadows
+Layer 6: Highlights
 ```
-validateStep(sessionId, stepId):
-  1. Nếu chưa start workflow → TỪ CHỐI
-  2. Nếu workflow đã hoàn thành → TỪ CHỐI
-  3. Nếu stepId đã hoàn thành → CHO PHÉP (với warning)
-  4. Nếu stepId đúng là bước hiện tại → CHO PHÉP
-  5. Nếu stepId nằm ở tương lai → TỪ CHỐI (với hướng dẫn bước hiện tại)
+
+Nguyên tắc:
+
+* Mỗi thành phần có thể chỉnh sửa độc lập nên được đặt trên layer riêng.
+* Không gộp nhiều thành phần khác nhau vào cùng một layer nếu việc đó làm mất khả năng chỉnh sửa riêng.
+* Khi thêm một thành phần mới, phải xác định layer phù hợp trước khi vẽ.
+* Mọi thay đổi phải được ghi nhận vào trạng thái.
+
+Ví dụ:
+
+```text
+current_layer: 3
+layer_name: Leaves
+layer_status: IN_PROGRESS
 ```
 
 ---
 
-## Cách sử dụng cho Agent
+# 5. KIỂM TRA VÀ XÁC NHẬN
 
-### Scenario 1: Vẽ một hình tròn đơn giản
+Sau mỗi giai đoạn, AI phải kiểm tra:
 
+```text
+- Đúng yêu cầu người dùng chưa?
+- Bố cục có đúng không?
+- Tỷ lệ có phù hợp không?
+- Layer có đúng không?
+- Thành phần có bị ảnh hưởng ngoài phạm vi không?
+- Có lỗi phát sinh từ bước trước không?
 ```
-1. workflow_start()
-   → "Bước 1: Tạo canvas"
 
-2. validate_canvas_size(width: 32, height: 32)
-   → "✅ Kích thước 32x32 hợp lệ!"
+Nếu cần người dùng xác nhận:
 
-3. workspace_create_tab(width: 32, height: 32)
-   → Tạo canvas thành công
-
-4. workflow_validate(stepId: "name_canvas")
-   → "✅ Bạn có thể thực hiện name_canvas"
+```text
+step_status: WAITING_FOR_USER
+```
 
-5. validate_canvas_name(name: "Hình tròn")
-   → "✅ Tên hợp lệ!"
+AI phải dừng và chờ phản hồi.
 
-6. workspace_rename_tab(tabId: "...", name: "Hình tròn")
-   → Đổi tên thành công
+Người dùng có thể:
 
-7. workflow_advance()
-   → "✅ Hoàn thành: Đặt tên canvas. Bước tiếp theo: Resize canvas"
+```text
+APPROVE
+CONTINUE
+REVIEW
+EDIT
+UNDO
+REGENERATE_CURRENT_STEP
+```
 
-8. workflow_validate(stepId: "resize_canvas")
-   → "✅ Bạn có thể thực hiện resize_canvas"
+Nếu người dùng yêu cầu chỉnh sửa, chỉ chỉnh sửa bước hoặc layer liên quan, không tự động tạo lại toàn bộ ảnh.
 
-9. canvas_resize(width: 64, height: 64)
-   → Resize thành công
+---
 
-10. workflow_advance()
-    → Chuyển sang bước "Bật animation"
+# 6. SỬA ẢNH
 
-11. workflow_validate(stepId: "enable_animation")
-    → "✅ Bạn có thể thực hiện enable_animation"
+Quy trình sửa ảnh phải sử dụng ảnh hiện tại làm nguồn gốc.
 
-12. animation_enable(enabled: false)  # Không cần animation
-    → OK
+AI không được tự ý tạo một ảnh mới thay thế ảnh hiện tại.
 
-13. workflow_advance()
-    → Chuyển sang bước "Thiết lập layers"
+Quy trình:
 
-14. workflow_validate(stepId: "setup_layers")
-    → "✅ Bạn có thể thực hiện setup_layers"
+```text
+1. Nhận yêu cầu sửa.
+2. Phân tích chính xác nội dung cần sửa.
+3. Lấy ảnh hiện tại.
+4. So sánh yêu cầu với ảnh hiện tại.
+5. Xác định vùng hoặc layer cần chỉnh sửa.
+6. Khoanh vùng khu vực cần sửa.
+7. Thực hiện chỉnh sửa trong phạm vi đó.
+8. Kiểm tra sự tương thích với môi trường xung quanh.
+9. Điều chỉnh phần chuyển tiếp nếu cần.
+10. Cập nhật thay đổi vào ảnh hiện tại.
+11. Kiểm tra kết quả.
+```
 
-15. layer_add()
-    → Thêm layer mới
+Ví dụ:
 
-16. workflow_advance()
-    → Chuyển sang bước "Chuẩn bị màu sắc"
+```text
+current_mode: EDIT_IMAGE
+target_area: Layer 3 / Leaves
+edit_scope: Specific region
+```
 
-17. workflow_validate(stepId: "prepare_colors")
-    → "✅ Bạn có thể thực hiện prepare_colors"
+Nguyên tắc bắt buộc:
 
-18. color_set(primary: "#ff0000")
-    → Đặt màu đỏ
+* Chỉ sửa phần được yêu cầu.
+* Giữ nguyên các phần không liên quan.
+* Không tạo lại toàn bộ ảnh.
+* Không thay đổi bố cục, phong cách hoặc thành phần khác nếu người dùng không yêu cầu.
+* Sau khi sửa phải kiểm tra sự hòa hợp với các vùng xung quanh.
 
-19. workflow_advance()
-    → Chuyển sang bước "Vẽ" ← ĐÂY LÀ BƯỚC QUAN TRỌNG
+Nếu chỉnh sửa chưa đạt:
 
-20. workflow_validate(stepId: "draw")
-    → "✅ Bạn có thể thực hiện draw"
+```text
+current_step: EDIT_TARGET_AREA
+step_status: IN_PROGRESS
+```
 
-21. draw_circle(cx: 32, cy: 32, r: 20, color: "#ff0000")
-    → Vẽ hình tròn thành công
+Không được chuyển sang bước khác cho đến khi vùng chỉnh sửa hoàn tất.
 
-22. workflow_advance()
-    → Chuyển sang bước "Kiểm tra"
+---
 
-23. workflow_validate(stepId: "review")
-    → "✅ Bạn có thể thực hiện review"
+# 7. TẠO ANIMATION MỚI
 
-24. query_snapshot()
-    → Xem kết quả vẽ
+Quy trình tạo animation tương tự quy trình tạo ảnh nhưng bổ sung hệ thống frame.
 
-25. workflow_advance()
-    → Chuyển sang bước "Hoàn tất"
+## Bước 1: Khởi tạo
 
-26. workflow_validate(stepId: "finalize")
-    → "✅ Bạn có thể thực hiện finalize"
+Xác định:
 
-27. workspace_save()
-    → Lưu tác phẩm
+```text
+Canvas:
+width
+height
 
-28. workflow_advance()
-    → "🎉 Hoàn tất tất cả các bước!"
+Animation:
+fps
+total_frames
+loop
 ```
 
-### Scenario 2: Agent cố gắng vẽ trước khi tạo canvas
+Nếu người dùng chưa cung cấp thông tin cần thiết, phải hỏi lại.
+
+---
+
+## Bước 2: Phân tích animation
+
+Phân tích:
 
+```text
+- Đối tượng.
+- Chuyển động.
+- Hướng chuyển động.
+- Frame bắt đầu.
+- Frame kết thúc.
+- Các keyframe.
+- Các frame trung gian.
+- Layer cần sử dụng.
 ```
-1. workflow_start()
-   → "Bước 1: Tạo canvas"
 
-2. draw_pixel(x: 10, y: 10, color: "#ff0000")  # ❌ Sai thứ tự!
-   → (Nếu có middleware kiểm tra)
-   → "⛔ Bạn chưa thể thực hiện 'draw'. 
-      Trước hết hãy hoàn thành: Tạo canvas"
+Ví dụ:
+
+```text
+Frame 0: Initial pose
+Frame 1: Movement begins
+Frame 2: Mid movement
+Frame 3: Peak movement
+Frame 4: Return
 ```
 
 ---
 
-## Lưu ý quan trọng
+## Bước 3: Tạo và xử lý từng frame
 
-1. **Workflow là per-session:** Mỗi session có workflow riêng, không ảnh hưởng lẫn nhau.
-2. **Có thể quay lại bước cũ:** Nếu agent đã hoàn thành bước 3 và muốn làm lại, `validateStep` sẽ cho phép nhưng có cảnh báo.
-3. **Workflow không tự động chặn tool:** Tool `draw_pixel` vẫn chạy được nếu agent gọi trực tiếp. Tuy nhiên, agent được hướng dẫn **PHẢI** gọi `workflow_validate` trước mỗi thao tác.
-4. **Có thể reset:** Dùng `workflow_reset` để bắt đầu lại từ đầu nếu cần.
+Mỗi frame phải được xử lý riêng theo đúng thứ tự:
 
----
+```text
+1. Activate frame.
+2. Xác định trạng thái của frame.
+3. Xác định layer cần vẽ.
+4. Vẽ hoặc chỉnh sửa layer.
+5. Kiểm tra tính liên tục với frame trước và sau.
+6. Lưu frame.
+7. Chuyển sang frame tiếp theo.
+```
 
-## Cách thêm Rule mới
+Ví dụ:
 
-### Thêm Naming Rule mới
+```text
+current_frame: 0
+current_layer: 1
+current_step: DRAW_FRAME
+step_status: IN_PROGRESS
+```
 
-```javascript
-// rules.js
-const NAMING_RULES = {
-  // ... existing rules
-  newObject: {
-    pattern: /^[a-z]{3,16}$/,
-    message: 'Tên phải 3-16 ký tự, chỉ chữ thường',
-    example: 'myobject',
-  },
-};
+Chỉ được chuyển sang:
 
-// Thêm validator
-function validateNewObjectName(name) {
-  if (!name || typeof name !== 'string') {
-    return { valid: false, message: 'Tên không được để trống' };
-  }
-  if (!NAMING_RULES.newObject.pattern.test(name)) {
-    return { valid: false, message: NAMING_RULES.newObject.message };
-  }
-  return { valid: true };
-}
+```text
+current_frame: 1
 ```
 
-### Thêm Workflow Step mới
+sau khi frame 0 đã hoàn tất.
 
-```javascript
-// rules.js
-const WORKFLOW_STEPS = [
-  // ... existing steps
-  { id: 'new_step', label: 'Bước mới', description: 'Mô tả bước mới' },
-];
+---
+
+# 8. KIỂM TRA TÍNH LIÊN TỤC CỦA ANIMATION
 
-// prerequisites.js — Thêm tool validate nếu cần
-registerTool(server, 'validate_new_step', 'Kiểm tra...', {...}, (p) => {...});
+Sau khi hoàn thành các frame, phải kiểm tra:
+
+```text
+- Vị trí đối tượng có chuyển động liên tục không?
+- Layer có nhất quán giữa các frame không?
+- Có hiện tượng nhảy hình không?
+- Có thay đổi ngoài ý muốn không?
+- Bố cục có bị lệch không?
+- Chuyển động có đúng yêu cầu không?
 ```
 
+Nếu phát hiện lỗi, chỉ quay lại frame hoặc layer bị lỗi để sửa.
+
+Không được tạo lại toàn bộ animation nếu chỉ một frame hoặc một layer bị lỗi.
+
 ---
 
-## Tóm tắt
+# 9. NGUYÊN TẮC TRẠNG THÁI BẮT BUỘC
+
+Mọi thao tác phải tuân theo:
+
+```text
+CHECK_CURRENT_STATE
+→ EXECUTE_CURRENT_STEP
+→ SAVE_STATE
+→ VALIDATE_RESULT
+→ WAIT_FOR_USER_IF_REQUIRED
+→ COMPLETE_CURRENT_STEP
+→ MOVE_TO_NEXT_STEP
+```
+
+Không được:
+
+```text
+CURRENT_STEP
+→ SKIP
+→ NEXT_STEP
+```
 
-Module `rules/` đảm bảo:
+Mọi thao tác phải có trạng thái rõ ràng:
 
-✅ Agent **bắt buộc** tuân theo thứ tự 9 bước  
-✅ Tất cả tên đều **hợp lệ** theo quy tắc  
-✅ Kích thước canvas **nằm trong giới hạn**  
-✅ Agent **không thể bỏ qua** bước nào  
-✅ Có thể **kiểm tra tiến trình** bất cứ lúc nào  
-✅ Có thể **reset** nếu cần làm lại  
+```text
+mode
+step
+layer
+frame
+status
+user_approval
+history
+```
 
-**Mục tiêu:** Không còn tình trạng "agent muốn gì làm nấy" — mọi thao tác đều có **rule engine** giám sát.
+Mục tiêu của hệ thống là đảm bảo toàn bộ quá trình tạo ảnh, sửa ảnh và tạo animation có thể kiểm soát, theo dõi, xem lại và tiếp tục chính xác từ bất kỳ bước nào mà không làm mất trạng thái trước đó.