Incomex AI Portal
KB-5B89

MOW Unified Canvas — UI Handoff Pack v1

10 min read Revision 1
uihandoffmowcanvasmowddesign-contractdata-contractdot-actions2026-05-29

MOW UNIFIED CANVAS — UI HANDOFF PACK v1

Ngày: 2026-05-29 Drive: https://docs.google.com/document/d/1Y5UKLnXvNGsfZ0dkcQaw2HNeZ8oiVVx7TgHDHNqNsdM/edit Tham chiếu: MOWD-step1-user-requirements-FINAL

CÁCH ĐỌC:

  • Claude Code CLI: đọc COMPONENT 3 (Data Contract) + COMPONENT 4 (DOT Actions) + COMPONENT 6 (Constraints)
  • Claude Design: đọc COMPONENT 1 (UI Intent) + COMPONENT 2 (Interaction Model) + COMPONENT 5 (Visual Reference) + COMPONENT 6 (Constraints)
  • GPT: đọc toàn bộ, giữ vai trò kiểm tra kiến trúc
  • Cowork: tác giả — cập nhật khi có thay đổi

COMPONENT 1: UI INTENT

Triết lý cốt lõi

MỘT khuôn UI duy nhất — SÁU tầng dữ liệu. Dữ liệu thay đổi khi đổi tầng. Khuôn UI không thay đổi.

T6 Lĩnh vực  → các ô = Công ty
T5 Công ty   → các ô = Phòng ban
T4 Phòng ban → các ô = Chuyên môn
T3 Chuyên môn → các ô = Nhiệm vụ/Workflow  ← default view
T2 Nhiệm vụ  → các ô = Task
T1 Task      → mở MOT Task Card

Màn hình DÙNG để

  • Đọc cấu trúc quy trình theo tầng
  • Drill-down từ T6 xuống T1
  • Đề xuất thay đổi qua Proposal Mode (Kaizen)
  • Xem trạng thái quy trình (traffic light)

Màn hình KHÔNG dùng để

  • Sửa trực tiếp workflow/DB
  • Chứa business logic
  • Hardcode tên tầng, tên quy trình, tên task

COMPONENT 2: INTERACTION MODEL

Tab navigation

Click T6/T5/T4/T3/T2/T1 → canvas hiện nodes của tầng đó. Tab active = tầng đang xem. Badge = số items trong tầng + context hiện tại.

Lĩnh vực > Công ty > Phòng ban > Chuyên môn > (hiện tại) Click node breadcrumb → quay lên tầng đó.

Node card

Click card → drill-down xuống tầng con. Hiển thị: số thứ tự + tên + progress + traffic light + sub-list (max 3 + "··· +N")

Proposal Mode

Kích hoạt: nút "Đề xuất cải tiến" góc phải. Khi bật:

  • Toggle pill vàng/đỏ trên mỗi card (sửa/xóa)
  • Nút "+" xanh giữa các cards (thêm bước)
  • "+ Thêm nhiệm vụ" cuối sub-list
  • Tất cả actions → tạo proposal, KHÔNG sửa DB trực tiếp

Instance Mode

Khi xem instance đang chạy (không phải template):

  • Traffic light theo 9-state thực tế
  • Progress bar trên card
  • Assignee avatar + SLA countdown

Click T1

Không drill-down. Mở MOT Task Card (slide-in panel hoặc modal).

COMPONENT 3: DATA CONTRACT

CanvasNode

CanvasNode:
  id: uuid
  code: string              # "NV01", "T03", "PB002"
  title: string
  tier: T1|T2|T3|T4|T5|T6
  parent_id: uuid|null
  order_index: integer
  status: draft|active|deprecated
  traffic_light: green|yellow|red|gray
  child_count: integer
  child_preview:            # max 3 items
    - code: string
      title: string
      status: string
      traffic_light: green|yellow|red|gray
  automation_level: full_auto|agent_in_loop|human_in_loop|manual|null
  workflow_ref: uuid|null
  task_type_ref: uuid|null
  iu_ref: string|null
  proposal_count: integer
  permission_actions: [view, propose, admin]
  instance_data:            # chỉ có khi view_mode=instance
    instance_id: uuid|null
    assignee_avatar: string|null
    assignee_name: string|null
    sla_due_at: datetime|null
    sla_traffic_light: green|yellow|red
    progress_ratio: float   # 0.0-1.0
    state: created|assigned|in_progress|waiting_for_input|
           waiting_for_approval|completed|overdue|blocked|cancelled

CanvasContext

CanvasContext:
  active_tier: T1|T2|T3|T4|T5|T6
  breadcrumb:
    - tier: T6
      id: uuid
      code: string
      title: string
  current_node_id: uuid|null
  view_mode: template|instance
  proposal_mode: boolean
  instance_id: uuid|null

API Endpoints (qua Directus — Nuxt không gọi PG trực tiếp)

GET  /api/canvas/nodes?tier={T}&parent_id={id}&view_mode={mode}
     → CanvasNode[]

GET  /api/canvas/context?node_id={id}
     → CanvasContext

POST /api/canvas/proposals
     → body: ProposalPayload

COMPONENT 4: DOT ACTIONS

dot_mow_canvas_get_nodes

purpose: Lấy danh sách nodes theo tier + parent
input:
  tier: T1|T2|T3|T4|T5|T6
  parent_id: uuid|null
  view_mode: template|instance
  instance_id: uuid|null
output: CanvasNode[]

dot_mow_canvas_get_context

purpose: Lấy breadcrumb + context state
input:
  node_id: uuid
output: CanvasContext

dot_mow_design_propose_change

purpose: Tạo change proposal — KHÔNG edit trực tiếp
input:
  target_node_id: uuid
  target_tier: T1|T2|T3|T4|T5|T6
  change_type: add|edit|delete|reorder
  proposed_data:
    title: string|null
    order_index: integer|null
    parent_id: uuid|null
  reason: string
  iu_ref: string|null
output:
  proposal_id: uuid
  status: pending
gate: permission_action = "propose" required

dot_mow_canvas_drill_down

purpose: Chuyển view xuống tầng con
input:
  from_node_id: uuid
  from_tier: T2|T3|T4|T5|T6
output:
  new_context: CanvasContext
  nodes: CanvasNode[]

dot_mot_get_task_card

purpose: Lấy full data cho MOT Task Card (T1)
input:
  task_type_id: uuid
  instance_id: uuid|null
output: TaskCardData

Checklist verify với live system (Claude Code CLI)

□ dot_mow_canvas_get_nodes        — kiểm tra dot_iu_command_catalog
□ dot_mow_canvas_get_context      — kiểm tra
□ dot_mow_design_propose_change   — có thể reuse workflow_change_requests DOT
□ dot_mow_canvas_drill_down       — kiểm tra
□ dot_mot_get_task_card           — kiểm tra

COMPONENT 5: VISUAL REFERENCE

PHU-LUC Files (Google Drive)

PHU-LUC-A — MOW Normal + Proposal Mode Drive ID: 1uy16CJ3lmH6llDroV18Gy5ZbAyH6cJaB Dùng cho: style canvas, tabs T6→T1, step boxes, arrows

PHU-LUC-C — Proposal Flow v2 Drive ID: 1hxm3qBYc1uZF1-ayGaFx3Im1k7F3zC1mABMskpuekSs Dùng cho: proposal mode — toggle pill, nút "+", form đề xuất

PHU-LUC-D — MOT Task Card Drive ID: 1btm_SHoZUk1n2SDK3QgKzOaY-F5BHbWg_0zfvlGlKNE Dùng cho: 9-state badge, progressive disclosure layout

PHU-LUC-E — MOW TreeView Drive ID: 1wrIByOIyzodxJsRUwv2K0b5ER1z8NmZD4ymoA Dùng cho: split-view layout, tree navigation

Design Tokens

--accent: #639922;
--accent-dark: #3b6d11;
--accent-light: #eaf3de;
--warn: #ef9f27;
--danger: #e24b4a;
--neutral-bg: #f0f0f0;
font: system-ui / Be Vietnam Pro
mono: JetBrains Mono

Traffic Light (Master Design Rev2 chuẩn)

green  → completed / on-track / active / ok
yellow → in_progress / warning / sắp hạn
red    → overdue / blocked / error / failed
gray   → created / pending / chưa active
blue   → assigned / waiting_for_input
orange → waiting_for_approval

Style direction cho Claude Design

Mood: Clean & dense — enterprise SaaS (Linear, Retool). KHÔNG: Spacious/calm kiểu Notion, Industrial kiểu CAD. Card: border-radius 10px, border 0.5px, white bg.

COMPONENT 6: CONSTRAINTS

Claude Code CLI — KHÔNG được

✗ Viết Nuxt component custom cho canvas
✗ Hardcode tier labels trong component code
✗ Hardcode tên quy trình, task trong code
✗ Query PG trực tiếp từ Nuxt
✗ Tạo bảng mới mà không có trong registry (reuse-first)
✗ Bật vector realtime
✗ Business logic trong Nuxt/Vue
✗ Tạo DOT khi DOT tương đương đã có

Claude Design — KHÔNG được

✗ Thay đổi triết lý "một khuôn, sáu tầng"
✗ Bỏ tab T6→T1
✗ Bỏ breadcrumb
✗ Bỏ Proposal Mode / nút "Đề xuất cải tiến"
✗ Thêm nút "Sửa trực tiếp"
✗ Hardcode tên tầng/quy trình trong design
✗ Thêm business logic vào prototype
✗ Đổi traffic light colors
✗ Mobile-first trước khi desktop xong

Mọi agent — KHÔNG được

✗ Implement UI Nuxt trước khi live PG survey xong
✗ Sửa trực tiếp workflow/task trong DB
✗ Dùng Lark làm canonical data store
✗ Bỏ IU ref — narrative/guide phải là iu_ref
✗ Tạo bot/agent ngoài "For Gem"

BRIEF NGẮN CHO TỪNG AGENT

Claude Code CLI

  1. Đọc Component 3 + 4 + 6
  2. Chạy live PG survey (MOWD FINAL Phần II checklist A-H)
  3. Map CanvasNode fields → existing PG columns
  4. Verify 5 DOTs trong Component 4
  5. Output: annotated data contract + DOT availability report
  6. KHÔNG code UI, KHÔNG tạo bảng mới

Claude Design

  1. Đọc Component 1 + 2 + 5 + 6
  2. Mở PHU-LUC-A (Drive) làm visual reference
  3. Làm đẹp hơn — giữ triết lý, không thay đổi interaction model
  4. Trả lời trong prototype: card khi có lỗi, proposal transition, empty state
  5. Output: high-fidelity prototype 3 states (Normal/Proposal/Instance)

GPT

  1. Đọc toàn bộ
  2. Review kết quả của Code và Design — kiểm tra lệch kiến trúc
  3. KHÔNG implement — chỉ raise blockers

WORKFLOW CHUẨN

① Cowork + User  → ý tưởng + HTML prototype → cập nhật pack này
② GPT            → review pack → xác nhận kiến trúc
③ Claude Code    → live PG survey + annotated data contract
④ Claude Code    → configure registries + 4 shell components
⑤ Claude Design  → nhận pack → design polish shell components
⑥ Claude Code    → apply style → system chạy từ registry config

TRẠNG THÁI

Component Status
UI Intent ✅ Chốt
Interaction Model ✅ Chốt
Data Contract 🟡 Draft — cần Code verify
DOT Actions 🟡 Draft — cần Code verify
Visual Reference ✅ PHU-LUC A/C/D/E
Constraints ✅ Chốt
Live PG Survey 🔴 BLOCKING
Shell Components 🔴 Sau survey
Design Polish 🔴 Sau shell