Branch D — Four Master UI Surfaces

Each surface is one render-shell over backend views + DOTs. All four share the same PG SoT and are bound to Điều-28 design_templates rows (TPL-mow-hierarchy-canvas, TPL-mot-task-card, TPL-mow-design-registry, TPL-governance-cockpit). Điều-37 jurisdiction = same UI, different backend-permission slice.

---

Surface 1 — MOW Unified Canvas / Tree-List

• User goal: navigate the T6→T1 hierarchy, read process structure & health, propose improvements.
• Primary persona: Manager, System designer; operator (read-only).
• Source data/view: v_mow_design_workflow (+ parent_workflow_id, level, category_id); tier tables tbl_* when ratified (else workflow substrate). TreeView variant (PHU-LUC-E) = left 280px tree panel + right content panel with stats cards (Đang hoạt động / Bản nháp / Deprecated / Instances đang chạy).
• Filters: status, owner_gov_code, frozen (y/n), category, has-unbound-steps, free-text on title/code, deadline window, severity.
• Sorting: code, title, status, bound_step/step ratio, date_updated. Default: status then code.
• Traffic-light rules: 🟢 owner set + version set + 100% steps bound + not frozen-for-error · 🟡 partial binding or no active version · 🔴 no owner OR validation failures OR dangling refs.
• Drill-down: card → child tier (drill) → … → T1 opens Surface 2 task card; tree expand via parent_id.
• Actions → DOT: Open=dot_mow_canvas_get_context/dot_mow_design_get · Validate=dot_mow_design_validate · Freeze=dot_mow_design_freeze · Unfreeze=dot_mow_design_unfreeze · Propose=dot_mow_design_propose_change.
• Permission: read=any MOW-scoped role; Freeze/Unfreeze=MOW owner; mutating chips hidden for read-only.
• Mobile/responsive: desktop-first (constraint: no mobile before desktop complete); tree panel collapses to a drawer on narrow.
• Scale strategy: <VirtualGrid> virtualization, keyset pagination, pre-aggregated step_count/bound_step_count (replace the two correlated subqueries in v_mow_design_workflow with a pre-agg join before exposing at thousands of rows), T6→T1 heatmap rollups.
• States: empty="Chưa có quy trình"/"Không có mục nào khớp"; loading=skeleton; error=banner+retry.

Surface 2 — MOT / JFT Task Surface (Task Card)

• User goal: operator does one task — see what to do, do it, report a problem. Progressive disclosure (user req Surface 2; PHU-LUC-D must be refactored to this).
• Primary persona: Vận hành (operator, non-technical).
• Source data/view: tasks (10 live) ⋈ workflow via workflow_steps.task_id; MOIT form via field_registry/input_form_registry; MOUT reference table; guide via iu_ref. Read-only in Phase 1 (MOT runtime out of scope).
• Progressive disclosure (4 levels):
  • Level 1 (default): task name + deadline countdown chip + 9-state badge + main action (Bắt đầu làm / Hoàn thành / Báo vấn đề).
  • Level 2 (on-demand): MOIT form ("Việc cần thực hiện") — fields from field_registry.
  • Level 3: MOUT reference table ("Thông tin tham khảo").
  • Level 4 (hidden): guide via IU ref ("Hướng dẫn thực hiện") + audit trail.
• Fields: task code (T04 · BF-INV-042 · Bước 2/5), task name, countdown (Còn 1 ngày 14 giờ / Quá hạn 2 ngày), 9-state status badge, assignee, workflow crumb.
• Filters/sort (list mode): workflow, status, actor_type, assignee (Phase 2), date range; keyset pagination — never OFFSET at 10k+.
• Traffic-light: 🟢 linked to bound step · 🟡 linked to inline step · 🔴 orphan task. Instance badge uses 9-state model.
• Drill-down: task → its workflow (Surface 1/Design Registry) → step.
• Actions → DOT: Phase 1 read/inspect only (dot_mot_get_task_card); "Open design" → Surface 1. Form submit shows two channels: Lưu kết quả (direct, Phase 2) vs Gửi đề xuất (queue → approval). No task-runtime DOT in Phase 1 (doc 08 runtime boundary).
• Permission: read=task-scoped role; no mutate buttons Phase 1.
• Mobile/responsive: this surface MUST be mobile-friendly eventually (operators on phones) — Level-1 single-column collapse; still desktop-first for v1.
• States: empty="Không có công việc"; loading=paged skeleton; large-guard="Hiển thị N mục đầu — hãy lọc thêm".

Surface 3 — MOW Design Registry List / Detail (Control Tower)

• User goal: designer manages the blueprint — header + steps + relations + binding state + change history. Answers "how many processes / how automated / where errors".
• Primary persona: System designer (MOWD).
• Source data/view: header v_mow_design_workflow; steps v_mow_design_step; relations workflow_step_relations (+condition_iu_ref); history dot_mow_design_audit.
• Fields (detail): header (owner, version, freeze, health) + per-step: step_key, step_type, actor_type, title, step_iu_ref, guide_iu_ref, dot_ref, output_table_ref, event refs, step_version, is_iu_bound; relation list (from→to, relation_type, condition_expression, condition_iu_ref, label).
• Filters (steps): step_type, actor_type, is_iu_bound, has-dot-ref, has-event-ref.
• Sorting: sort_order (DAG order), step_type.
• Traffic-light (per step): 🟢 bound + dot_ref resolves + (event refs resolve or N/A) · 🟡 inline-only / not bound · 🔴 dangling ref.
• Drill-down: step_iu_ref → IU viewer; dot_ref → DOT catalog; output_table_ref → table_registry; render DAG via dot_mow_design_render_tree (Standard Process View: nodes=step/IU brick/sub-workflow, edges=relations, parallel=horizontal swimlanes, sub-workflow=collapsed node).
• Actions → DOT: Bind IU=dot_mow_design_bind_iu/_bind_step_iu · Bind DOT=dot_mow_design_bind_dot · Bind Event=dot_mow_design_bind_event · Propose=dot_mow_design_propose_change · Activate=dot_mow_design_activate (council) · Rollback=dot_mow_design_rollback (council).
• Permission: bind=MOW owner; activate/rollback=council only (button disabled+explained for non-council); proposing allowed for any author incl. agent (queued, never auto-applied).
• Mobile/responsive: desktop-only surface (dense designer tool).
• Scale: long-workflow graph (100–500+ steps) via zoom/pan/mini-map/critical-path/collapse (doc 02 §7).
• States: empty steps="Design not yet decomposed"; activate disabled until validation 🟢 + approval present; per-action error toast with the failing check.

Surface 4 — Governance Cockpit

• User goal: super-admin/SRE sees problems first — pending proposals, approvals needed, frozen/failing designs, gate status, SLA breaches.
• Primary persona: super-admin / SRE / council.
• Source data/view: v_mow_governance_cockpit over approval_requests (211), apr_approvals (42), workflow_change_requests (3), governance_registry (9); gate via fn_iu_gate_verify_closed. Default landing /governance/problems (problem-first). Scales to 20k+ entries.
• Fields: pending proposals (entity, request_type, author, age), approvals needed (cross-sign count vs ≥2), recent activations/rollbacks, frozen workflows, validation-failing workflows, gate status, severity problem queue (16 problem classes; severities critical|high|medium|low|info), SLO/SLA, T6→T1 heatmaps, DLQ replay, Kaizen panel, AI/Agent ops.
• Filters: request_type, status (draft/approved/applied/rejected/expired), entity_type, owner_gov_code, age bucket, severity.
• Sorting: age desc, priority/severity.
• Traffic-light: 🟢 no pending > SLA, gates all_safe · 🟡 proposals awaiting review · 🔴 stale proposal past SLA OR gate not safe OR activation attempted without ≥2 signatures.
• Drill-down: proposal → target workflow (Surface 3) + its dsl_diff; approval → signers.
• Actions → DOT: Approve/Reject = human/council only, writes apr_approvals (NOT an agent-callable DOT); Withdraw proposal=dot_mow_design_propose_change(status=withdrawn); View gate=dot_iu_gate_verify_closed.
• Permission: approve/reject visible only to council; agent sees read-only; backend rejects any agent decision row (Điều 32 + automated-agent CHECK).
• Mobile/responsive: desktop dashboard; key alerts may push to mobile (Phase 2).
• States: empty="No pending governance items"; error=banner; never hide a 🔴 item.

---

Surface ↔ prototype ↔ template map

Surface	Cowork prototype	Status	Điều-28 template
1 Canvas / Tree-List	PHU-LUC-A (locked), PHU-LUC-E (draft)	A locked, E draft	TPL-mow-hierarchy-canvas
2 Task Card	PHU-LUC-D (draft → refactor to progressive disclosure)	draft	TPL-mot-task-card
3 Design Registry	(Standard Process View §6.1 + Phase 1 Surface 2)	spec	TPL-mow-design-registry
4 Governance Cockpit	(Master Design §7.9 panel set)	spec	TPL-governance-cockpit

Surfaces verdict

Specified. All four surfaces carry user goal, persona, source view, filters, sort, traffic-light rule, drill-down, action→DOT, permission, mobile note, scale strategy, and states. Mapped to Cowork prototypes and Điều-28 templates.