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:
-
file://silently loses parts 2 and 3. The master documentfetch()es its two sibling documents at boot. Under afile://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. -
The documents fetch React from a third-party CDN at view time.
support.jsloadsreact@18.3.1,react-dom@18.3.1, and@babel/standalone@7.29.0fromunpkg.com. Ifunpkg.comis 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.