MIZ OKI 3.5 Console — design artifacts

The design-session output for the miz-oki-command-center-ui redesign: a repository evaluation, a front-end thesis, and a working console prototype. Provenance and screen-by-screen sourcing: github.md. Import record: PLACEMENT.md.

Status

These are design artifacts, not shipping code. Nothing in this directory is built, bundled, deployed, or imported by the Next.js app. They are reference documents: read them to understand the intended information architecture, then verify every claim against the tree before building to it (.claude/rules/01-verification-discipline.md — when a doc and the tree disagree, the tree wins).

The prototype's [NOT-WIRED] badges are the honest state, not placeholders. Where the prototype marks a panel not-wired, it is recording that no governed aggregate read-API exists for that surface — the same discipline the live app already runs on (NotWiredNote in components/ui/section-label.tsx, and the standing note in app/command-center/layout.tsx). Do not "finish" a not-wired panel by substituting a plausible number, a zero, or a mock. The gap is the content. The proposals that would close them: ../READ_API_PROPOSALS.md.

Status labels inside the documents (LIVE / PARTIAL / IN BUILD / SHADOW / OBSERVE-ONLY / FLAG OFF) are quoted from canon at import time — docs/CANON_STATUS.md is the generated source and outranks any label here. Service-posture and registry-health tables in the prototype are dated snapshots, labeled as such; they are not live reads and must never be quoted as current state.

What each file is

File What it is
System Sketch.dc.html Master document — three parts with a contents index. Part 1 repository evaluation (SRPVDAL spine, 39-cell map, governance moat, surfaces, open gates); parts 2–3 are the two documents below, mounted as children. Start here.
Optimal Frontend UI.dc.html Part 2 — the front-end thesis. Decision-first IA: inbox / record / loop screens, and the consolidation map from the current route surface to five destinations.
Console Prototype.dc.html Part 3 — the interactive console. Five destinations, tri-state reads, the approve flow, and the component contract.
export/MIZ-OKI-3.5-Console-standalone.html Single-file standalone export of the prototype.
_ds/miz-oki-3-5-design-system-…/ Design-system bundle: colors_and_type.css, styles.css, _ds_bundle.js, and the Cabinet Grotesk .woff2 faces. Referenced relatively by the HTML — do not flatten or rename this directory. Its _ds_manifest.json declares "components": []: it is a token/CSS bundle, not a bound component library.
support.js The runtime the three .dc.html files load.
animations-v3.jsx, tweaks-panel.jsx Animation specs and tweaks-panel sources from the design session.

How to open them

Serve the directory over HTTP. Do not open the files directly.

cd docs/frontend/console-prototype
python3 -m http.server 8899
# then open http://127.0.0.1:8899/System%20Sketch.dc.html

Two view-time facts, both measured 2026-08-28 in a headless Chromium:

  1. file:// silently loses parts 2 and 3. The master document fetch()es its two sibling documents at boot. Under a file:// origin those fetches are blocked by CORS, and the runtime logs [dc-runtime] sibling fetch for "Optimal Frontend UI" threw — part 1 still renders, so the failure looks like a short document rather than an error. Served over HTTP the same document renders all three parts with zero console errors and zero failed requests.

  2. The documents fetch React from a third-party CDN at view time. support.js loads react@18.3.1, react-dom@18.3.1, and @babel/standalone@7.29.0 from unpkg.com. If unpkg.com is unreachable the page boots to an empty body and logs [dc] failed to load React or boot. This is a standing fragility for a repository-archived reference document: it does not render offline, inside a restricted-egress build sandbox, or if those exact versions are ever withdrawn. Vendoring the three UMD bundles into _ds/ would make the artifacts self-contained; that is not done yet, and is worth doing before these are treated as durable records rather than working references.

Placement

These artifacts live at docs/frontend/console-prototype/, alongside the other frontend design records (../READ_API_PROPOSALS.md, ../FRONTEND_ROUTE_INVENTORY.md, ../FRONTEND_ARCHITECTURE_DECISIONS.md).

PLACEMENT.md recorded that this README had not synced at import time and pre-authorized its placement choice to win. When it did arrive it proposed docs/design/console/; that was considered and declined (owner decision, 2026-08-28) in favour of keeping one frontend-docs directory. Moving the tree would churn 17 files including the font binaries, break the relative _ds/ paths' provenance in PLACEMENT.md and github.md, and split frontend design records across two roots for no reader benefit. That PENDING item is now closed.

← All docsView source on GitHub →