UI Preview Master Home — Spec

project: ui-preview
surface: master-home
current_version: v1
preview_url: https://vps.incomexsaigoncorp.vn/ui-preview/_master/v1/
status: draft
approval_status: pending_user_review
last_updated: 2026-05-30

Purpose

A static governance landing page / index for the Incomex UI Preview Workspace. It is not production UI — it is the single place where User / Cowork / GPT / Claude Design / Claude Code can see every surface draft, its status, preview URL, KB spec path, review-log path, owner, next action, and approval state.

Scope — covers BOTH layers

As of the 2026-05-30 manifest replace from the Cowork source doc UI-MASTER-GOVERNANCE-61-ITEMS-SOURCE (drive 1VtOjX0m44taOv9YySKNZ_yV8nKX7YKyKAKa7qv5Bm5g), the Master Home indexes 61 items across two layers:

• DATA LAYER — 36 items (layer: "data"): registries / tables / mapping views (e.g. field_registry, the 4 Mother registries, MOWD blueprint tables, runtime + governance + M2M-mapping tables). Grouped into 9 groups (Nhóm 1–9). These describe schema design ("Thiết kế schema") and PG implementation state, not Cowork/Design/Code visual columns.
• UI LAYER — 25 items (layer: "ui"): screens / components (MOW, MOT, MOIT, MOUT, Registry Managers, MOWD Core, Ops/Monitoring). Grouped into 7 groups (Nhóm A–G). These carry the full Cowork → Design → Code progression via the 9-box checklist.

The two layers are tagged per item with a layer field and described at the top level via layers[]. The page header may render them as two distinct sections; the underlying table is grouped by the 16 groups[] in source order, so data groups render first, then UI groups.

Non-goals

• Not Nuxt. Not a production app.
• No backend calls. No PG / Directus / Qdrant access.
• Does not mutate any preview; only reads its own manifest.json.

Layout

• Header: title "Incomex UI Preview Workspace".
• Featured backlink: MOW Unified Canvas v1 (preview + spec + review-log paths).
• Summary cards: total surfaces, deployed previews, pending review, approved, not started.
• Toolbar: search (surface name/id), filter by group, status, approval.
• Tables grouped by category, each row: surface name + description, status badge + approval + version, 9-box checklist, links (preview / spec path / review-log path), next action, owner.

Visual tokens

• Primary green #639922, accent orange #ef9f27, alert red #e24b4a. Light theme.

Data

• Single source: manifest.json (same directory). See manifest-contract.md.
• Loaded client-side via fetch('manifest.json'). Plain HTML/CSS/JS, no framework.
• Each surface carries id, optional screen_id (A1/B2/… for UI), group, layer, surface_name, description, status, approval_status, current_version, preview_url, optional preview_note, spec_path, review_log_path, design_brief_path, owner_agent, next_action, dependencies[], checklist{9}, updated_at.

Files

• index.html — the page (self-contained CSS+JS). Data-driven; unchanged across the 61-item manifest replace.
• manifest.json — the surface inventory (61 items, 16 groups, 2 layers).

Status

v1 static index deployed 2026-05-30; manifest replaced from the 61-item Cowork source doc the same day. Pending GPT + User review.