IA redesign mockups — Operator review (2026-10-13) #16

Open
opened 2026-10-13 18:07:12 +00:00 by jsutter · 1 comment
Owner

Mockups for docs/superpowers/specs/2026-10-13-ditdash-ia-redesign.md — every page in §3.1–§3.31,
generated from one shell template (build.py) and rendered with the shipped kit stylesheet
(ditdash.css, copied verbatim) plus mockups.css for what the kit lacks: the left rail, the aggregate
status cards, the layer-matrix cell pills, the Jump field / identity menu, the settings forms.

What to check here: the left rail's groups, order, counts and operator marks; one object type per pane;
the health-verdict status column (never provenance); the gap renderings (§4 G1/G2/G3); Settings apart from
observe; and the phone stacking order.

Notes on the drawing (so nothing in a frame reads as an oversight):

  • Columns follow the kit's container queries. p2 columns appear in panes ≥64rem and p3 in panes ≥96rem,
    so a full-width 1440 table shows its p2 columns and hides its p3 ones — exactly the spec's own priority
    notes. A mockup-local fourth tier hides the columns the spec's phone notes drop (Phone: Status, Host, Disk, Runs) below 30rem of pane, so the phone frames show those sets and desktop frames keep them.
  • The rail's FEDERATION group appears only on the three linked-MSP pages — it exists iff a link exists
    (§2.1, P8), and the Settings hub sample says “no linked MSPs”. Every other page carries a byte-identical
    rail (checked mechanically).
  • Gap renderings drawn on purpose: a row-level gap (host dito-fnf01, Overview + Hosts), a column-level
    gap (Host events › Actor), and a pane-level gap (Monitoring › Gap history).
  • Overview extras: the Clients pane is shown collapsed/all-ok to draw the §3.0 “all-ok pane collapses to
    its header line” rule (the brief's §6.8); the Clients rollup comes from the inventory strip. The
    why-popover is drawn open on the drifted edge pill (one frame, same page, real popovertarget).
  • Statement shows gal · 2026-10: its “Meters without a source” pane is correctly absent (that pane
    renders only when non-empty; ild carries the incomplete case on the Statements index).
  • Sample values, dates, names and money are the spec's own, verbatim where the spec supplies rows.

Local copy of everything (HTML sources, PNGs, build.py, render.sh):
~/realms/deepnet/docs/mockups/2026-10-13-ia/ — no file outside that directory was touched.


54 PNGs across 43 pages · local copy: ~/realms/deepnet/docs/mockups/2026-10-13-ia/

Overview

1440×900

Overview — 1440×900

1440×900 · why-popover open

Overview — 1440×900 · why-popover open

1440×900 · dark frame

Overview — 1440×900 · dark frame

3440×1440 · ultrawide, 4 tracks

Overview — 3440×1440 · ultrawide, 4 tracks

390×844 · phone, drawer closed

Overview — 390×844 · phone, drawer closed

390×844 · phone, drawer open

Overview — 390×844 · phone, drawer open

390×844 · phone, whole page

Overview — 390×844 · phone, whole page

Hosts

1440×900

Hosts — 1440×900

390×844

Hosts — 390×844

Host — dito-sf1-dcc02

1440×900

Host — dito-sf1-dcc02 — 1440×900

Edges

1440×900

Edges — 1440×900

Edge — sf1

1440×900

Edge — sf1 — 1440×900

Releases

1440×900

Releases — 1440×900

Release — v1.5.3-rc2

1440×900

Release — v1.5.3-rc2 — 1440×900

Rings

1440×900

Rings — 1440×900

390×844

Rings — 390×844

Ring — 0

1440×900

Ring — 0 — 1440×900

Clients

1440×900

Clients — 1440×900

Client — Gallaher Companies

1440×900

Client — Gallaher Companies — 1440×900

Tenants

1440×900

Tenants — 1440×900

390×844

Tenants — 390×844

Tenant — gal

1440×900

Tenant — gal — 1440×900

390×844

Tenant — gal — 390×844

Services

1440×900

Services — 1440×900

Service — gal/forge

1440×900

Service — gal/forge — 1440×900

Apps

1440×900

Apps — 1440×900

App — gal/constructionbot

1440×900

App — gal/constructionbot — 1440×900

Users

1440×900

Users — 1440×900

User — ebutler

1440×900

User — ebutler — 1440×900

Operators

1440×900

Operators — 1440×900

Statements

1440×900

Statements — 1440×900

Statement — gal · 2026-10

1440×900

Statement — gal · 2026-10 — 1440×900

Usage

1440×900

Usage — 1440×900

History

1440×900

History — 1440×900

Converge runs

1440×900

Converge runs — 1440×900

Converge run — cr-20261013-1140 (refused)

1440×900

Converge run — cr-20261013-1140 (refused) — 1440×900

Monitoring health

1440×900

Monitoring health — 1440×900

390×844

Monitoring health — 390×844

Linked MSP — Ridgeline MSP

1440×900

Linked MSP — Ridgeline MSP — 1440×900

Linked MSP — tenants

1440×900

Linked MSP — tenants — 1440×900

Linked MSP — tenant harbor

1440×900

Linked MSP — tenant harbor — 1440×900

Settings hub

1440×900

Settings hub — 1440×900

Settings › Branding

1440×900

Settings › Branding — 1440×900

Settings › Price book

1440×900

Settings › Price book — 1440×900

Settings › Federation (unconfigured empty state)

1440×900

Settings › Federation (unconfigured empty state) — 1440×900

Settings › Access

1440×900

Settings › Access — 1440×900

Settings › Display defaults

1440×900

Settings › Display defaults — 1440×900

Settings › Secret references

1440×900

Settings › Secret references — 1440×900

Settings › Config document

1440×900

Settings › Config document — 1440×900

Preferences

1440×900

Preferences — 1440×900

System — Not found / denied

1440×900

System — Not found / denied — 1440×900

System — Action refused

1440×900

System — Action refused — 1440×900

System — Config save refused

1440×900

System — Config save refused — 1440×900

System — Sign in

1440×900

System — Sign in — 1440×900

Mockups for `docs/superpowers/specs/2026-10-13-ditdash-ia-redesign.md` — every page in §3.1–§3.31, generated from **one shell template** (`build.py`) and rendered with the **shipped kit stylesheet** (`ditdash.css`, copied verbatim) plus `mockups.css` for what the kit lacks: the left rail, the aggregate status cards, the layer-matrix cell pills, the Jump field / identity menu, the settings forms. **What to check here:** the left rail's groups, order, counts and operator marks; one object type per pane; the health-verdict status column (never provenance); the gap renderings (§4 G1/G2/G3); Settings apart from observe; and the phone stacking order. **Notes on the drawing (so nothing in a frame reads as an oversight):** - **Columns follow the kit's container queries.** p2 columns appear in panes ≥64rem and p3 in panes ≥96rem, so a full-width 1440 table shows its p2 columns and hides its p3 ones — exactly the spec's own priority notes. A mockup-local fourth tier hides the columns the spec's *phone* notes drop (`Phone: Status, Host, Disk, Runs`) below 30rem of pane, so the phone frames show those sets and desktop frames keep them. - **The rail's FEDERATION group appears only on the three linked-MSP pages** — it exists iff a link exists (§2.1, P8), and the Settings hub sample says “no linked MSPs”. Every other page carries a byte-identical rail (checked mechanically). - **Gap renderings drawn on purpose:** a row-level gap (host `dito-fnf01`, Overview + Hosts), a column-level gap (Host events › Actor), and a pane-level gap (Monitoring › Gap history). - **Overview extras:** the Clients pane is shown collapsed/all-ok to draw the §3.0 “all-ok pane collapses to its header line” rule (the brief's §6.8); the Clients rollup comes from the inventory strip. The **why-popover** is drawn open on the drifted edge pill (one frame, same page, real `popovertarget`). - **Statement** shows `gal · 2026-10`: its “Meters without a source” pane is correctly absent (that pane renders only when non-empty; `ild` carries the `incomplete` case on the Statements index). - Sample values, dates, names and money are the spec's own, verbatim where the spec supplies rows. Local copy of everything (HTML sources, PNGs, `build.py`, `render.sh`): `~/realms/deepnet/docs/mockups/2026-10-13-ia/` — no file outside that directory was touched. --- **54 PNGs across 43 pages** · local copy: `~/realms/deepnet/docs/mockups/2026-10-13-ia/` ## Overview **1440×900** ![Overview — 1440×900](https://forge.deepnet.com/attachments/e28d760c-f8ed-4384-998f-5e6736fe3518) **1440×900 · why-popover open** ![Overview — 1440×900 · why-popover open](https://forge.deepnet.com/attachments/5ef8157c-a037-4659-8e23-8c8532f50f41) **1440×900 · dark frame** ![Overview — 1440×900 · dark frame](https://forge.deepnet.com/attachments/e0bedb06-ed20-4164-982c-ba0d3dc07efe) **3440×1440 · ultrawide, 4 tracks** ![Overview — 3440×1440 · ultrawide, 4 tracks](https://forge.deepnet.com/attachments/be588ba4-a436-4014-aaa2-075d30c7cfe8) **390×844 · phone, drawer closed** ![Overview — 390×844 · phone, drawer closed](https://forge.deepnet.com/attachments/7d1e6e4a-0175-4b98-ae8d-0e26e6876753) **390×844 · phone, drawer open** ![Overview — 390×844 · phone, drawer open](https://forge.deepnet.com/attachments/baa2ead1-14a8-4f5b-8925-270e44b5288e) **390×844 · phone, whole page** ![Overview — 390×844 · phone, whole page](https://forge.deepnet.com/attachments/86b6dd8a-d3aa-4fae-b1d0-65840c07dc17) ## Hosts **1440×900** ![Hosts — 1440×900](https://forge.deepnet.com/attachments/cdcf7e5a-b02f-4380-81eb-2b9318b02166) **390×844** ![Hosts — 390×844](https://forge.deepnet.com/attachments/5726e132-f508-4a99-9654-fe3f88c895a9) ## Host — dito-sf1-dcc02 **1440×900** ![Host — dito-sf1-dcc02 — 1440×900](https://forge.deepnet.com/attachments/496f8c55-8fd7-44e0-9cb3-a581ab291e60) ## Edges **1440×900** ![Edges — 1440×900](https://forge.deepnet.com/attachments/c5ff9718-d83b-438c-8fdf-140d79cca91d) ## Edge — sf1 **1440×900** ![Edge — sf1 — 1440×900](https://forge.deepnet.com/attachments/b8abf1fd-7580-41e0-b4d8-392f1d995da0) ## Releases **1440×900** ![Releases — 1440×900](https://forge.deepnet.com/attachments/1902e92f-160b-4e9a-a146-2437eb0dc155) ## Release — v1.5.3-rc2 **1440×900** ![Release — v1.5.3-rc2 — 1440×900](https://forge.deepnet.com/attachments/8bd70b19-7af6-4ef9-a399-b6adfa0bbe5d) ## Rings **1440×900** ![Rings — 1440×900](https://forge.deepnet.com/attachments/65a73626-f401-4ef4-8c10-6ace08318aef) **390×844** ![Rings — 390×844](https://forge.deepnet.com/attachments/8caa9f81-1412-4f7f-a272-17963b0e4f43) ## Ring — 0 **1440×900** ![Ring — 0 — 1440×900](https://forge.deepnet.com/attachments/965108c2-30be-4a68-9456-f2b14c120299) ## Clients **1440×900** ![Clients — 1440×900](https://forge.deepnet.com/attachments/18d55543-f083-4166-a90f-7b47b15a9387) ## Client — Gallaher Companies **1440×900** ![Client — Gallaher Companies — 1440×900](https://forge.deepnet.com/attachments/2b2d890e-e3fd-4555-b256-651ff010ee49) ## Tenants **1440×900** ![Tenants — 1440×900](https://forge.deepnet.com/attachments/032472ae-512f-4e2a-b724-60d8e7511f6a) **390×844** ![Tenants — 390×844](https://forge.deepnet.com/attachments/b2ab3cc5-7813-4bca-99a6-cb9990414aa8) ## Tenant — gal **1440×900** ![Tenant — gal — 1440×900](https://forge.deepnet.com/attachments/216df589-546f-486a-9bdb-fc9254b29bf4) **390×844** ![Tenant — gal — 390×844](https://forge.deepnet.com/attachments/e88e2bd4-d8eb-47dd-8bca-9ac8051c4449) ## Services **1440×900** ![Services — 1440×900](https://forge.deepnet.com/attachments/aa184035-6990-4a0e-b4b6-78a4463469f6) ## Service — gal/forge **1440×900** ![Service — gal/forge — 1440×900](https://forge.deepnet.com/attachments/04995aa2-6d9d-4056-b36b-b77b92bcaf46) ## Apps **1440×900** ![Apps — 1440×900](https://forge.deepnet.com/attachments/d5eeca32-ac08-4dc8-a20f-278815c888cf) ## App — gal/constructionbot **1440×900** ![App — gal/constructionbot — 1440×900](https://forge.deepnet.com/attachments/a753ce9b-735c-4f32-a2ce-99afbe450167) ## Users **1440×900** ![Users — 1440×900](https://forge.deepnet.com/attachments/41a77d10-e018-49bb-a7c8-5f6de20f1915) ## User — ebutler **1440×900** ![User — ebutler — 1440×900](https://forge.deepnet.com/attachments/cc9d3e33-8085-41e8-a247-2b0ec445a76f) ## Operators **1440×900** ![Operators — 1440×900](https://forge.deepnet.com/attachments/ce4956be-c0b0-430a-89f3-9c6f6c413225) ## Statements **1440×900** ![Statements — 1440×900](https://forge.deepnet.com/attachments/993aee53-6cb9-4f36-a75c-a78e52743b02) ## Statement — gal · 2026-10 **1440×900** ![Statement — gal · 2026-10 — 1440×900](https://forge.deepnet.com/attachments/121e061b-2f5c-40d3-b4ec-120ae86fb54f) ## Usage **1440×900** ![Usage — 1440×900](https://forge.deepnet.com/attachments/50c011eb-9c7e-40ce-a64d-aeef1e1040a4) ## History **1440×900** ![History — 1440×900](https://forge.deepnet.com/attachments/6deef61a-3277-4898-b4b3-bcf43fb0121f) ## Converge runs **1440×900** ![Converge runs — 1440×900](https://forge.deepnet.com/attachments/837f9e6b-3285-4857-b673-ecee59534852) ## Converge run — cr-20261013-1140 (refused) **1440×900** ![Converge run — cr-20261013-1140 (refused) — 1440×900](https://forge.deepnet.com/attachments/450c2020-a7d5-4baf-bd9c-a32521ce0a3e) ## Monitoring health **1440×900** ![Monitoring health — 1440×900](https://forge.deepnet.com/attachments/c5e7fb05-48e3-4d29-9da6-eebc8ff22797) **390×844** ![Monitoring health — 390×844](https://forge.deepnet.com/attachments/3c2e361c-331e-460c-8a86-c9d1900e9aff) ## Linked MSP — Ridgeline MSP **1440×900** ![Linked MSP — Ridgeline MSP — 1440×900](https://forge.deepnet.com/attachments/b592a028-7902-45ab-bee3-b6dad351136a) ## Linked MSP — tenants **1440×900** ![Linked MSP — tenants — 1440×900](https://forge.deepnet.com/attachments/16e150a0-4665-4301-9622-f4036c503c75) ## Linked MSP — tenant harbor **1440×900** ![Linked MSP — tenant harbor — 1440×900](https://forge.deepnet.com/attachments/f7dc449e-73f6-45fe-b281-1b57ef2cacec) ## Settings hub **1440×900** ![Settings hub — 1440×900](https://forge.deepnet.com/attachments/9e54a2c0-9364-4ddc-8290-df3bfbce1e59) ## Settings › Branding **1440×900** ![Settings › Branding — 1440×900](https://forge.deepnet.com/attachments/10f15c51-b7a3-4ec0-b1b4-7d23b6f0bdb9) ## Settings › Price book **1440×900** ![Settings › Price book — 1440×900](https://forge.deepnet.com/attachments/affd5c1d-5e2b-42cb-8230-c9d90308325b) ## Settings › Federation (unconfigured empty state) **1440×900** ![Settings › Federation (unconfigured empty state) — 1440×900](https://forge.deepnet.com/attachments/513eacc6-bf3b-4d32-b17c-2381b945e063) ## Settings › Access **1440×900** ![Settings › Access — 1440×900](https://forge.deepnet.com/attachments/c0e90c53-4629-49be-b612-271f0d4d85e9) ## Settings › Display defaults **1440×900** ![Settings › Display defaults — 1440×900](https://forge.deepnet.com/attachments/e7a8f207-bf02-447b-bdcf-2a082a9d922a) ## Settings › Secret references **1440×900** ![Settings › Secret references — 1440×900](https://forge.deepnet.com/attachments/966ffbfa-1f59-45d5-b9ad-8b51ea4ec77c) ## Settings › Config document **1440×900** ![Settings › Config document — 1440×900](https://forge.deepnet.com/attachments/679e5474-5f57-4cd4-89ff-45e6cd96f87f) ## Preferences **1440×900** ![Preferences — 1440×900](https://forge.deepnet.com/attachments/054a1011-364d-4fed-be6c-cd506139645a) ## System — Not found / denied **1440×900** ![System — Not found / denied — 1440×900](https://forge.deepnet.com/attachments/7f1abebb-87f5-4fcc-9f08-cac222be20e6) ## System — Action refused **1440×900** ![System — Action refused — 1440×900](https://forge.deepnet.com/attachments/90257404-bd69-4731-9ca7-1c8b29c75619) ## System — Config save refused **1440×900** ![System — Config save refused — 1440×900](https://forge.deepnet.com/attachments/a13c19f8-2c6b-4bff-ab5a-ee7caf0e9ffb) ## System — Sign in **1440×900** ![System — Sign in — 1440×900](https://forge.deepnet.com/attachments/ca15c79c-3a3d-49fa-8837-bbbcb2a1b389)
Author
Owner

On hold (2026-10-13). The Operator is writing a hierarchy spec that will define which pages and panes to build. Scope narrowed to a standard desktop browser only (mobile and ultrawide are out for now). These mockups stay as reference material; nothing is built from them until the spec lands.

**On hold (2026-10-13).** The Operator is writing a hierarchy spec that will define which pages and panes to build. Scope narrowed to a standard desktop browser only (mobile and ultrawide are out for now). These mockups stay as reference material; nothing is built from them until the spec lands.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
deepnet/ditdash#16
No description provided.