Branch B — T6→T1 Interaction Model

The interaction grammar of the single canvas. Same grammar at every tier (doc 01 intent #2).

---

1. The tier ladder (canonical, verbatim from PHU-LUC-A LEVELS + Master Design Rev2 §6.6)

Tier	Label (tab)	Name	Each card =	Backend source (design-side)
T6	T6: Lĩnh vực	Domain	T5 companies	tbl_linh_vuc
T5	T5: Công ty	Company	T4 departments	tbl_cong_ty
T4	T4: Phòng ban	Department	T3 specialties	tbl_phong_ban
T3	T3: Chuyên môn	Specialty	T2 workflows/missions	tbl_chuyen_mon
T2	T2: Nhiệm vụ	Workflow / Mission	T1 tasks	tbl_nhiem_vu_type → workflows
T1	T1: Task	Task	(opens MOT Task Card)	tbl_task_type / tasks
T0	—	Form fields	—	field_registry / MOIT form — NOT a navigation tier

Default view: T3 (Chuyên môn). T1 label conflict to resolve: prototype A says T1: Task, TreeView (PHU-LUC-E) says Công việc. Canonical decision required (doc 07 design brief asks Design to pick one; recommendation: "Công việc" for tiers, reserve "Task" for the MOT runtime envelope).

Backend reality note: the six tbl_* hierarchy tables are design-only / not yet born in live PG (prior audits: "6 tbl_* hierarchy ABSENT"). For Phase 1 the canvas runs on the workflow substrate that exists (workflows, workflow_steps with parent_workflow_id/level/category_id) and mocks T6–T4 until the tbl_* tier tables are ratified. Doc 08 (Code handoff) makes this explicit so the shell degrades gracefully.

2. Core interactions

Interaction	Trigger	Behavior	Backend call
Tier tab click	click [T6]…[T1] tab	re-query that tier under current parent context; active tab highlighted; badge = item count	dot_mow_canvas_get_nodes(tier, parent_id)
Breadcrumb navigation	click a crumb	jump to that ancestor tier/node; trailing crumb is current (bold)	dot_mow_canvas_get_context(node_id)
Drill-down	click a node card	descend one tier into that node's children	dot_mow_canvas_drill_down(from_node_id, from_tier)
Drill-up	click parent crumb / tab	ascend to parent tier	context recompute
Node/card click	click card body	T6–T2 → drill-down; T1 → open MOT Task Card (separate screen)	dot_mot_get_task_card(task_type_id, instance_id)
Child-list expansion	card shows max 3 children then ··· +N thêm	"+N" → drill into that node to see full child list	get_nodes(child tier)
Proposal/change entry	top-right "Đề xuất cải tiến" toggle	enters Proposal Mode (doc 06): per-card pills (sửa/xóa), green "+" between cards, "+ Thêm nhiệm vụ" at list end	dot_mow_design_propose_change(...)
Search / filter	sidebar inputs (status / owner / deadline window / severity / free-text)	all backend-filtered; never client scan	get_nodes with filter args
Traffic-light status	per card	computed in SQL/DOT (rollup), color + icon + text	design_health / fn_workflow_rollup_compute

3. Breadcrumb spec

• Always visible: Lĩnh vực > Công ty > Phòng ban > Chuyên môn > (tên hiện tại) (e.g. Tài chính > Inc Co. > Kế toán > Phải thu > Workflow X).
• Parent crumbs clickable (accent color); current crumb bold #111; trailing tier-label chip on the right.
• Breadcrumb is the single source of "where am I" — drives drill-up and context.

4. Card anatomy (same at every tier)

• Header: số thứ tự + tên (e.g. Bước 1 + NV01 Tiếp nhận).
• Metrics: child_count, progress indicator (instance mode), proposal_count badge.
• Traffic-light: color + icon + text triplet (never color-alone — a11y).
• Child preview: first 3 children, then ··· +N thêm.
• Action chips: Mở chi tiết (open), Đề xuất cải tiến (propose).
• Card style: border-radius 10px, 0.5px border, white bg, ~170px box width (PHU-LUC-A).

5. States (mandatory, never silent)

State	Treatment
Empty	"Chưa có [tên tầng] — nhấn '+' để thêm" (proposal mode) / "Không có mục nào khớp" (filter)
Loading	skeleton cards (never blank)
Error	banner + retry; never a partial silent list; never hide a 🔴 item
Large result guard	"Hiển thị N mục đầu — hãy lọc thêm" (refine-filters guard)

6. Keyboard / accessibility basics

• Traffic-light = color + icon + text triplet always (WCAG 2.1 AA; color-blind-safe shapes: cross vs check vs triangle; per §3.2 tokens carry high_contrast.fg/bg + shape_token).
• Tab order: tier tabs → breadcrumb → filters → card grid (roving tabindex within grid).
• Each card focusable; Enter = drill-down; Space = toggle proposal pill (in proposal mode).
• aria-labels on all status chips and action chips; screen-reader announces tier + position ("Chuyên môn, card 4 of 12").
• Dark / high-contrast: activate the paired high_contrast token set on prefers-contrast:more or theme toggle (doc 07).

7. Large-scale behavior (10k+ workflows / 20k+ governance entries)

• Virtualization: single <VirtualGrid> primitive (shared with <WorkflowGraph>); render only visible cards.
• Server pagination/sort/filter: keyset (id/date) pagination — never OFFSET at 10k+; hard page cap (e.g. 100) with refine-filters guard.
• Pre-aggregated counts: child_count / step_count computed in SQL (pre-aggregated join, not correlated subquery at scale — see doc 04 Surface 1 scale note).
• Long-workflow graph (100–500+ steps): zoom/pan 25–200%, collapse subgraph, critical-path highlight, blocked-chain visualization, mini-map (bottom-right), lazy-load step body, group-by-lane. Sentinel: every long feature must also work on a 2-step workflow.
• Heatmaps T6→T1 in the Governance Cockpit for fleet-scale status.

8. Interaction model verdict

Explicit. Tier ladder, every interaction (tab/breadcrumb/drill/card/child-expand/propose/search/traffic-light), all UI states, a11y basics, and 10k-scale strategy are specified and tied to the backend call that powers each. No layout differs by tier (intent invariant preserved).