---

title: 10 — Static UI Preview Readiness date: 2026-05-31 gate: P3 (RG6). Plan + mock contract here; NOT deployed this session. deploy_decision: DEFERRED — preview is outward-facing; deploy is a one-command gated follow-up.

10 — Static UI Preview Readiness

Target: /ui-preview/registries-pivot/v1/ — a static, data-driven preview that fetch()es a mock JSON shaped exactly like the doc-09 contract, so design can be reviewed before any production Nuxt work. The existing pipeline (nginx location /ui-preview/ → static root; deploy via ssh contabo + tar; rollback = rm the version dir) is established and zero-DB-mutation.

Decision: the mock contract + page plan are produced here; deployment is NOT performed this session (it is outward-facing and not required for PASS). Deploy is the gated P3 step: drop the files under the static root and reuse the existing location — no nginx change, no production Nuxt.

A. Mock contract JSON (mirrors live values 2026-05-31; every count pivot-backed or PIVOT_MISSING)

{
  "surface": "registries-pivot", "version": "v1", "generated_from": "data-contract doc-03/09",
  "root_summary": {
    "leaf_rows": 160, "sum_record": 2002041, "sum_actual": 2001909, "net_gap": 132,
    "drift_rows": 3, "unverified_rows": 5, "leaf_orphans": 0,
    "pivot_backed": 21, "pivot_missing": 139, "count_integrity_status": "FAILED",
    "grand_total_anchor": {"pivot_code": "PIV-500", "value": null, "state": "PIVOT_MISSING"}
  },
  "drill": {
    "node": "PIV-001", "name": "meta_catalog Total", "count": 169, "has_children": true,
    "children": [
      {"node": "PIV-101", "name": "Danh mục theo Lớp", "has_children": true,
       "rows": [{"level":"atom","total":75},{"level":"molecule","total":49},
                {"level":"compound","total":34},{"level":"meta","total":3},
                {"level":"material","total":1},{"level":"building","total":1},{"level":"product","total":1}]},
      {"node": "PIV-102", "name": "Danh mục theo Loại quản lý", "has_children": false},
      {"node": "PIV-106", "name": "Lớp × Loại quản lý", "has_children": false}
    ]
  },
  "drift_warnings": [
    {"code":"CAT-006","name":"DOT Tools","record":309,"actual":163,"gap":146,
     "classification":"model_b_phantom_candidate","pivot_count":309},
    {"code":"CAT-007","name":"Pages/Routes","record":37,"actual":52,"gap":-15,
     "classification":"model_b_unregistered_candidate","pivot_count":null},
    {"code":"CAT-023","name":"So khai sinh","record":985472,"actual":985471,"gap":1,
     "classification":"model_a_surplus_recheck","pivot_count":985472}
  ],
  "orphan_phantom_warning": {
    "leaf_orphans": 0,
    "rollup_orphans": [{"code":"CAT-DOT","orphans":140},{"code":"CAT-COL","orphans":20},{"code":"CAT-SPE","orphans":1}],
    "phantom": {"status":"LAW_DEFINITION_GAP","render":"warning_flag=phantom(unconfirmed)"}
  },
  "label_grouping_example": {
    "species":"dot_tool","list_count":309,"resolved_ceiling":30,"ceiling_source":"display_policy",
    "requires_grouping": true, "note":"50 = MAX; per-species smaller allowed"
  },
  "pin_example": {
    "object_ref":"CAT-023","object_kind":"registry","scope":"global","priority":10,
    "pinned_by":"<principal>","source":"registry_pin (proposed)"
  },
  "leaf_substrate_panel": {
    "code":"CAT-006","registry_collection":"dot_tools","source_model":"B",
    "source_location":"File:dot/bin/","record_count":309,"actual_count":163,
    "pivot_backed":true,"pivot_count":309,
    "three_way_note":"registry 309 / files 163 / pivot 309"
  }
}

B. Page plan (sections)

1. Root summary card — leaf_rows, net_gap, status (traffic-light), grand-total anchor (PIVOT_MISSING badge until PIV-500).
2. Drill panel — expand PIV-001 → PIV-101 → level rows; has_children drives the chevron; leaf → substrate panel.
3. Drift warnings — the 3 rows with source_model-aware classification badges (phantom vs unregistered vs race).
4. Orphan/phantom warning — rollup orphans (CAT-DOT/COL/SPE); phantom shown as unconfirmed (LAW_DEFINITION_GAP).
5. Label grouping example — DOT list 309 vs resolved ceiling 30 → "group required" (ceiling from display_policy).
6. Pin example — pinned CAT-023 at top (scope/priority from registry_pin).
7. Leaf substrate panel — fn_registries_pivot_node_substrate('CAT-006') shape with the 3-way DOT count.
8. PIVOT_MISSING ledger — the 139 unbacked + 5 unmeasured, explicitly listed (honesty).

C. No-hardcode guarantees in the preview

• Every number is read from fetch('mock-data.json'); no number is inline in the template.
• No category/species/label/threshold/pin arrays in JS — all come from the JSON (which mirrors PG).
• Counts shown as PIVOT_MISSING where the JSON says so; the preview never invents a count.
• This makes the preview a faithful stand-in for the eventual Đ28 render-shell.

D. Deploy procedure (gated P3 — NOT run now)

1. Author index.html (data-driven fetch) + mock-data.json (§A) locally.
2. tar → ssh contabo → extract under the static /ui-preview/registries-pivot/v1/ root.
3. Verify GET https://vps.incomexsaigoncorp.vn/ui-preview/registries-pivot/v1/ → 200.
4. Rollback = rm -rf the version dir. Zero DB/Directus/Qdrant/Nuxt change.