Nexis UX Modernization — Prototype Review

Review each page below and reply in chat, one page at a time: approve, revise (say what's wrong), or defer. Nothing is implemented until a page is approved — see the footer for the full approval policy.

Known capture artifact: the harness-generated "before" screenshots for most pages show a stale sidebar highlight that incorrectly remains on "Dashboard" (the screenshot harness switches pages programmatically rather than via a real sidebar click — see CAPTURE_NOTES.md gotcha #5). The prototypes ("after" renders) deliberately show the correct sidebar highlight for each page. This is expected and not a regression to flag.

Processes

Table-centric Cross-platform (macOS + Linux captured)
  1. Wrapped the bare edge-to-edge process table in one elevated container card (fill @cardBgElevated, 1px @borderColor, radius 12, single drop shadow alpha 90 / blur 26 / offset 0,2, 8px outer margin). The shadow lives on the container, never on rows. Source: DESIGN_SYSTEM.md DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (container-level shadow). Evidence: renders/processes_dark.png.
  2. Established the three-layer surface hierarchy so the table reads as a raised surface — page @pageContent, container @cardBgElevated, flat rows @cardBg. In the before, the table band and page were near-identical tones. Source: DS §1 (values.ini:2,29,30).
  3. Rebuilt the toolbar on header anatomy: a 3px accent bar + "Processes" title + muted "Live process list" source line, with the toolbar's real controls (the "All Processes" radio and the Search field) kept. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 typography (style.qss:772-815).
  4. Frozen sticky header + right-aligned tabular numerics for the PID / Resident Memory / %Memory / %CPU columns [NNG-TABLES]; row zebra + hover-highlight recipe is in place for when rows populate. Source: DS §7 (style.qss:328-350); [NNG-TABLES] (sources.md).
  5. The captured page shows an empty process table (headers, no body rows). Upgraded that bare-empty region to a full empty state: list icon + explanation + a "Refresh now" next-action affordance. Source: DS §5 empty-state rule + [NNG-EMPTY] (sources.md).
MAINTAINER JUDGMENT — decision needed
  • Empty-state action button added. The captured page shows only column headers with no rows and no next-action control. The prototype adds a “Refresh now” button inside the new empty-state pattern. Decide: keep this new interactive element, or leave the empty state as icon + explanation only, with no button.

Dark

Before
Processes before, dark theme
After
Processes after, dark theme

Light

Before
Processes before, light theme
After
Processes after, light theme
Reply in chat for Processes: approve / revise (say what's wrong) / defer.

Search

Table-centric Cross-platform (macOS + Linux captured)
  1. Wrapped the bare results table in one elevated container card (DS §2 recipe: @cardBgElevated, 1px @borderColor, radius 12, one drop shadow alpha 90 / blur 26 / offset 0,2, 8px margin) — container-level shadow, flat rows. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7. Evidence: renders/search_dark.png.
  2. Applied the three-layer surface hierarchy (@pageContent / @cardBgElevated / @cardBg) so the results surface separates from the page. Source: DS §1 (values.ini:2,29,30).
  3. This page has no page title in the current state, so header anatomy is applied as toolbar chrome only — consistent 14/12 top spacing and header-row gap 8, with the real controls kept (Browse… button, Search field, the "All" scope select, the primary search-icon button, and the "Advanced Search ▾" toggle). No title/accent bar was invented. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 (style.qss:772-815).
  4. Frozen sticky header + tabular-numeric alignment on Size; zebra + hover recipe ready for result rows. Source: DS §7 (style.qss:328-350); [NNG-TABLES].
  5. The capture shows an empty results table. Upgraded the bare-empty region to a full empty state: search icon + "No results yet" + a hint pointing at the query field / Browse… as the next action. Source: DS §5 + [NNG-EMPTY].
MAINTAINER JUDGMENT — decision needed
  • Empty-state action button added. The captured page shows an empty results table with no explicit next step. The prototype adds a hint pointing at the query field / “Browse…” as the next action. Decide whether to keep this addition.
  • Primary search control changed shape. The capture has a filled orange search button; the prototype renders it as a plain icon-button (matching the flat-control language used elsewhere on this page). This turns a filled, high-contrast call-to-action into a lower-emphasis icon button. Decide whether that trade is correct, or whether the filled button should be preserved.

Dark

Before
Search before, dark theme
After
Search after, dark theme

Light

Before
Search before, light theme
After
Search after, light theme
Reply in chat for Search: approve / revise (say what's wrong) / defer.

System Logs

Table-centric Cross-platform code; macOS captured, Linux not captured (outside harness, headless host)
  1. Wrapped the full-bleed log table in one elevated container card (DS §2: @cardBgElevated, 1px @borderColor, radius 12, single drop shadow alpha 90 / blur 26 / offset 0,2, 8px margin). The shadow is on the container only; the many log rows stay flat. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7. Evidence: renders/system_logs_dark.png.
  2. Three-layer surface hierarchy (@pageContent / @cardBgElevated / @cardBg) — flat rows on @cardBg with the container elevated one step above the page. Source: DS §1 (values.ini:2,29,30).
  3. Toolbar chrome rebuilt on header-anatomy spacing (this page has no title in current state): the "All Severities" select, the "Search logs…" field, and the refresh icon-button (a 24-ish setAutoRaise-style action button) are kept and aligned. Source: DS §3 (metric_tile_base.cpp:255-307, gear button 24×24 autoRaise :171-180); DS §4 (style.qss:772-815).
  4. Flat rows with the DS §7 scanning kit: frozen sticky header, @borderColor gridlines, zebra striping realised through the DS §1 flat-row surface (@cardBg), and an @accentBgTint hover-highlight. Source: DS §7 (style.qss:328-350); [NNG-TABLES].
  5. Severity rendered as status pills on the neutral @chartGridColor track: NOTICE → info (@infoColor), INFO → dimmed (@tertiaryText). Those are the only two severities present in the capture; the same [status] mechanism carries warning/error (@warningColor/@destructiveColor) when present. Source: DS §5 (style.qss:2421-2435, pill 809-815).
  6. Empty Unit cells render an em-dash placeholder (before: blank cells). Source: [NNG-TABLES].

Dark

Before
System Logs before, dark theme
After
System Logs after, dark theme

Light

Before
System Logs before, light theme
After
System Logs after, light theme
Reply in chat for System Logs: approve / revise (say what's wrong) / defer.

Boot Analysis

Table-centric Cross-platform code; macOS captured, Linux not captured (outside harness, headless host)
  1. Promoted the bare "System uptime since last boot: 721091.0 s" text off the flat page into an elevated card (DS §2 recipe) with header anatomy — an accent bar + "System uptime since last boot" title (@color06) + the value as the 14pt/700 hero (@color05). Source: DS §2 (dashboard_tile_wrapper.cpp:107-130); DS §3 (metric_tile_base.cpp:255-307); DS §4 hero role (style.qss:772-815). Evidence: renders/boot_analysis_dark.png.
  2. Established surface hierarchy (@pageContent / @cardBgElevated) so the uptime card and the notice card read as raised surfaces rather than floating text. Source: DS §1 (values.ini:2,29,30).
  3. Rebuilt the page toolbar on header anatomy: 3px accent bar + "Boot Analysis" title + "Startup timing" source line, with the existing top-right "Refresh" button kept. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 (style.qss:772-815).
  4. Upgraded the page's existing text-only empty notice ("Per-service boot timing is not available on macOS…") into the full empty-state pattern: clock icon + explanation + a "Refresh uptime" next-action affordance, inside its own elevated card. The empty-state copy was reworded and expanded from the capture's notice text ("is not" → "isn't"; added "macOS does not expose per-service startup durations."). DS §5 explicitly names this page's #lblBootEmptyState as the text-only instance to upgrade. Source: DS §5 (boot_analysis_page.cpp:78-83,145-146); [NNG-EMPTY].

Dark

Before
Boot Analysis before, dark theme
After
Boot Analysis after, dark theme

Light

Before
Boot Analysis before, light theme
After
Boot Analysis after, light theme
Reply in chat for Boot Analysis: approve / revise (say what's wrong) / defer.

Hardware Info

Table-centric Cross-platform (macOS + Linux captured)
  1. Put each section body (System, Processor, Graphics, Memory) in its own elevated card (DS §2 recipe: @cardBgElevated, 1px @borderColor, radius 12, one drop shadow alpha 90 / blur 26 / offset 0,2, 8px margin). In the before, the sections were near-flat outlined boxes on a same-tone page; they now read as raised surfaces. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130). Evidence: renders/hardware_info_dark.png.
  2. Three-layer surface hierarchy (@pageContent base / @cardBgElevated cards) so the elevated cards separate from the page. Source: DS §1 (values.ini:2,29,30).
  3. Gave each section title header anatomy — a 3px accent bar + label — instead of a plain floating heading, for cross-page layout consistency with the tile-header language. The Graphics section's accent bar uses the GPU metric token (var(--gpuColor)), while other sections use their respective type-appropriate accent tokens (System/Processor/Memory). Source: DS §3 (metric_tile_base.cpp:255-307); DS §3 accent bar rule ("accent bar takes a type-appropriate metric color, as on Dashboard tiles").
  4. Typography consistency inside the key/value rows: labels 9pt/600 @color06, values @color05, with a @borderColor divider between rows. Source: DS §4 (style.qss:772-815).

Dark

Before
Hardware Info before, dark theme
After
Hardware Info after, dark theme

Light

Before
Hardware Info before, light theme
After
Hardware Info after, light theme
Reply in chat for Hardware Info: approve / revise (say what's wrong) / defer.

Uninstaller (sidebar label: "Applications")

Table-centric Cross-platform (macOS + Linux captured)
  1. Wrapped the application list in one elevated container card (DS §2 recipe) — container-level shadow, flat rows inside. In the before the list sat as a flat panel barely distinct from the page. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (shadow on the container, never per row). Evidence: renders/uninstaller_dark.png.
  2. Three-layer surface hierarchy (@pageContent / @cardBgElevated container / @cardBg rows). Source: DS §1 (values.ini:2,29,30).
  3. Toolbar chrome rebuilt on header-anatomy spacing (this page leads with tabs, no title): the "Applications (49)" / "Orphan Packages (0)" segmented tabs and the Search field are kept and aligned; active tab uses @accentColor. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 (style.qss:772-815).
  4. The "Application" column header is frozen (@cardBgElevated, @borderColor bottom rule) and the "▸ Applications (49)" group row is a flat @cardBg-eligible row inside the elevated card. Source: DS §7 (style.qss:328-350); [NNG-TABLES].

Dark

Before
Uninstaller (sidebar label: "Applications") before, dark theme
After
Uninstaller (sidebar label: "Applications") after, dark theme

Light

Before
Uninstaller (sidebar label: "Applications") before, light theme
After
Uninstaller (sidebar label: "Applications") after, light theme
Reply in chat for Uninstaller (sidebar label: "Applications"): approve / revise (say what's wrong) / defer.

Services

List-of-rows Cross-platform (macOS + Linux captured)
  1. Collapsed the stack of individually-shadowed service cards into one elevated container card (fill @cardBgElevated, 1px @borderColor, radius 12, single drop shadow alpha 90 / blur 26 / offset 0,2, 8px outer margin) holding flat @cardBg rows. This supersedes the per-row Utilities::addDropShadow(this, 30, 10) each ServiceItem currently applies. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (shadow on the container, never per row — supersedes service_item.cpp:30). Evidence: renders/services_dark.png.
  2. Established the three-layer surface hierarchy (@pageContent page / @cardBgElevated container / @cardBg rows) so the list reads as one raised surface; in the before, each row floated on its own shadow with no unifying container. Source: DS §1 (values.ini:2,29,30).
  3. Rebuilt the toolbar on header anatomy: a 3px accent bar + "System Services" title + a muted "27 services" source line (the captured "(27)" count moved into the source line), keeping the two real filter dropdowns ("Startup Status", "Running Status") and the two top-right start-all / stop-all icon actions. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 typography (style.qss:772-815).
  4. Row typography follows the scale: service label at the 9pt/600 title role, the – identifier suffix at the muted meta role; long identifiers ellipsis-clip [NNG-TABLES] and rows carry a hover-highlight. Source: DS §4 (style.qss:772-815); DS §7 / [NNG-TABLES] (sources.md).
  5. Status is shown on the DS §5 pill track (neutral @chartGridColor background, colored text): "Running" = @successColor, "Stopped" = @tertiaryText dimmed — replacing the before's solid-green / bordered-grey chips. The green on/off toggle affordance is kept unchanged. Source: DS §5 pill (style.qss:809-815) + [status="…"] selectors (style.qss:2421-2435).

Dark

Before
Services before, dark theme
After
Services after, dark theme

Light

Before
Services before, light theme
After
Services after, light theme
Reply in chat for Services: approve / revise (say what's wrong) / defer.

Startup Apps

List-of-rows Cross-platform (macOS + Linux captured)
  1. Wrapped the per-item startup cards in one elevated container card (DS §2 recipe) with flat @cardBg rows inside — one container-level shadow instead of a shadow on every row. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (container-level shadow). Evidence: renders/startup_apps_dark.png.
  2. Three-layer surface hierarchy (@pageContent / @cardBgElevated container / @cardBg rows). Source: DS §1 (values.ini:2,29,30).
  3. Toolbar rebuilt on header anatomy: 3px accent bar + "Startup Applications" title + muted "22 items" source line (captured "(22)" count moved to the source line), keeping the real Search field, the "Add Startup App" primary action, and the "Repair BTM…" action (rendered on the danger button token to match its captured red treatment). Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 (style.qss:772-815).
  4. Preserved the captured "User Agents" / "System Agents" section grouping as muted uppercase group labels between the flat rows. Each row keeps its two-line layout — app name at the 9pt/600 title role, the .plist path at the muted meta role — and its three affordances unchanged: edit (pencil), remove (X), and the green enable toggle. Source: DS §4 typography (style.qss:772-815); DS §7 (style.qss:328-350); GNOME grouped-list convention [GNOME-HIG] (sources.md).

Dark

Before
Startup Apps before, dark theme
After
Startup Apps after, dark theme

Light

Before
Startup Apps before, light theme
After
Startup Apps after, light theme
Reply in chat for Startup Apps: approve / revise (say what's wrong) / defer.

APT Source Manager

List-of-rows Linux-only page (macOS build uses Homebrew in this sidebar slot)
  1. Rendered the listWidgetAptSources repository list as one elevated container card (DS §2 recipe) with flat @cardBg rows — a GNOME-style boxed list — replacing the per-row Utilities::addDropShadow(this, 30, 10) each AptSourceRepositoryItem currently applies. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (container-level shadow, supersedes apt_source_repository_item.cpp:29); boxed-list container convention [GNOME-HIG] (sources.md). Evidence: renders/apt_source_manager_dark.png.
  2. Three-layer surface hierarchy (@pageContent / @cardBgElevated container / @cardBg rows). Source: DS §1 (values.ini:2,29,30).
  3. Toolbar rebuilt on header anatomy: 3px accent bar + "APT Repositories" title + the .ui's own "Select to delete or edit." info label (lblAptSourceSelectInfo) folded into the muted source line, keeping the captured Search field (txtSearchAptSource, placeholder "Search…"). Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 (style.qss:772-815).
  4. Each repository row keeps its .ui structure — icon + deb … source line (9pt/600 title role) + the enable toggle (checkAptSource, an iconSize 45×23 switch-style checkbox) — unchanged as an affordance; one row is shown in the disabled/off toggle state. Source: DS §4 typography (style.qss:772-815); DS §7 (style.qss:328-350).
  5. Rebuilt the bottom action bar directly from apt_source_manager_page.ui's horizontalLayout_2: Edit + Delete on the left, then the txtAptSource source input, the "Enable Source" circle checkbox (checkEnableSource, accessibleName "circle"), "Add Repository", and Cancel. Primary buttons use @accentColor; the two danger-role buttons (Delete, Cancel) use @destructiveColor. Source: .ui (apt_source_manager_page.ui rows 200-353, accessibleName "primary"/"danger"/"circle"); DS §5 status colors (style.qss:2421-2435).
UNVERIFIED — no live capture; skeleton derived from .ui files. Row/control values shown are representative, not copied from a live capture.

Dark

After (unverified skeleton)
APT Source Manager after (unverified), dark theme

Light

After (unverified skeleton)
APT Source Manager after (unverified), light theme
Reply in chat for APT Source Manager: approve / revise (say what's wrong) / defer.

System Cleaner

Tree / stacked Cross-platform (macOS + Linux captured)
  1. Recast the eight cleaning categories as DS §2 elevated tiles (fill @cardBgElevated, 1px @borderColor, radius 12, single drop shadow alpha 90 / blur 26 / offset 0,2). The shadow lives on each tile container, never on its inner rows — consistent with the Dashboard's one-shadow-per-tile precedent, so eight tiles stay within the bounded-shadow guardrail. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7/§9-3 (container-level shadow, bounded count). Evidence: renders/system_cleaner_dark.png.
  2. Established the three-layer surface hierarchy — page @pageContent, category tiles @cardBgElevated, controls on @cardBg — so the grid reads as raised surfaces over the page. Source: DS §1 (values.ini:2,29,30).
  3. Rebuilt the toolbar on header anatomy: a 3px accent bar + "System Cleaner" title + the muted "Reclaim disk space by removing caches, logs, and crash reports." source line, keeping the captured gear button, "Schedule…" and "Scan system" controls. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 typography (style.qss:772-815).
  4. Bottom action bar rebuilt on DS §3 spacing: the "Estimated recoverable" readout (@successColor value, per the captured green underline) + "Select All" + primary "Clean selected", control set unchanged. Source: DS §3 (metric_tile_base.cpp:255-307); DS §5 status color (style.qss:2421-2435).
  5. Normalized the scan bar to the DS §6 progress recipe — static track @chartGridColor, fill @accentColor, radius 2, height 4 — a static placeholder with no animation per the no-per-frame guardrail. Source: DS §6 (style.qss:817-826); DS §9-2 (no timers/animation).
MAINTAINER JUDGMENT — decision needed
  • Eight shadow-bearing tiles on one page. Recasting all eight cleaning categories as individually elevated cards puts eight simultaneous drop-shadows on screen at once — this tests the bounded-shadow-ceiling guardrail harder than any other page in this pass. Decide whether eight elevated tiles is an acceptable ceiling, or whether some categories should be flattened / grouped to reduce the shadow count.

Dark

Before
System Cleaner before, dark theme
After
System Cleaner after, dark theme

Light

Before
System Cleaner before, light theme
After
System Cleaner after, light theme
Reply in chat for System Cleaner: approve / revise (say what's wrong) / defer.

Disk Tools

Tree / stacked Cross-platform code; macOS captured, Linux not captured (outside harness, headless host)
  1. Wrapped the scan-roots list and the results table each in one DS §2 elevated container card (fill @cardBgElevated, 1px @borderColor, radius 12, single container-level shadow) — the results table's scan-root rows and result rows are flat inside their container. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (shadow on the container, never per row). Evidence: renders/disk_tools_dark.png.
  2. Three-layer surface hierarchy — page @pageContent, containers @cardBgElevated, flat path/result rows @cardBg. In the before, the panels and page were near-identical tones. Source: DS §1 (values.ini:2,29,30).
  3. Header chrome: this page leads with the captured "Large & Old Files" / "Duplicate Finder" tabs (no title label), kept and aligned on DS §3 header spacing; the active tab uses @accentColor. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 (style.qss:772-815).
  4. Frozen sticky header + right-aligned tabular Size column for the results table [NNG-TABLES]; the pre-scan empty table is upgraded to a full empty state — disk icon + explanation + a "Scan" next-action affordance — rather than a bare header over blank space. Source: DS §7 (style.qss:328-350); DS §5 empty-state rule + [NNG-EMPTY] (sources.md).
  5. Bottom action bar rebuilt on DS §3 spacing: the "No files selected" selection readout + "Move to Trash", control set unchanged. Source: DS §3 (metric_tile_base.cpp:255-307).
MAINTAINER JUDGMENT — decision needed
  • Empty-state upgrade. The pre-scan results table (a bare header over blank space in the capture) is upgraded to a full icon + explanation + “Scan” action empty state. Decide whether this new pattern is wanted here, consistent with Processes / Search, or whether Disk Tools should stay minimal until a scan has run.

Dark

Before
Disk Tools before, dark theme
After
Disk Tools after, dark theme

Light

Before
Disk Tools before, light theme
After
Disk Tools after, light theme
Reply in chat for Disk Tools: approve / revise (say what's wrong) / defer.

Docker

Tree / stacked Cross-platform page; no live capture on either platform
  1. Rendered the .ui tabWidget → treeWidgetImages (a rootIsDecorated tree, NoSelection) as one DS §2 elevated container card with a frozen "Image / Size / Created" header and flat @cardBg tree rows; the decorated group node (ubuntu, expanded) and its child tag rows keep the tree's caret/indent. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (container-level shadow, frozen header, flat rows). Evidence: renders/docker_dark.png.
  2. Three-layer surface hierarchy (@pageContent / @cardBgElevated container / @cardBg rows). Source: DS §1 (values.ini:2,29,30).
  3. Toolbar rebuilt on header anatomy: 3px accent bar + "Docker" title + a muted "Images, containers, and volumes" source line, keeping the .ui top bar — the txtSearch field ("Search docker resources…") and the btnRefresh button. The .ui's cmbContainerFilter is visible=false, so it is omitted. The .ui tabWidget tabs (Images / Containers / Volumes) are kept, Images active. Source: DS §3 (metric_tile_base.cpp:255-307); .ui (docker_page.ui topBarLayout rows 30-61, tabWidget rows 113-269).
  4. Bottom bars rebuilt from the .ui: the bottomBarLayout status line (lblDockerStatus left, lblItemCount right) as a footer band, then the actionBarLayout — Start + Stop, spacer, Prune Unused, Remove Selected. Primary buttons (btnStartContainer, btnPrune, accessibleName="primary") use @accentColor; the danger-role button (btnRemoveSelected, accessibleName="danger") uses @destructiveColor. Source: .ui (docker_page.ui rows 307-390); DS §5 status colors (style.qss:2421-2435).
UNVERIFIED — no live capture; skeleton derived from .ui files. Row/control values shown are representative, not copied from a live capture.

Dark

After (unverified skeleton)
Docker after (unverified), dark theme

Light

After (unverified skeleton)
Docker after (unverified), light theme
Reply in chat for Docker: approve / revise (say what's wrong) / defer.

Helpers

Tree / stacked Cross-platform (macOS + Linux captured)
  1. Recast the four Maintenance actions as DS §2 elevated action cards (fill @cardBgElevated, 1px @borderColor, radius 12, container-level shadow) in a 4-up grid; the Host Manage table sits in one DS §2 elevated container with flat @cardBg rows. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (container-level shadow, flat rows). Evidence: renders/helpers_dark.png.
  2. Three-layer surface hierarchy — page @pageContent, cards/containers @cardBgElevated, table rows @cardBg. Source: DS §1 (values.ini:2,29,30).
  3. The "Tools" and "Maintenance" group labels use the DS §4 meta role (@tertiaryText, uppercase); each Maintenance card is title (DS §4 title role, @color05) over description (DS §4 meta role, @tertiaryText); the "Hosts (1)" sub-section leads with a 3px accent bar per DS §3. The captured tool buttons are kept, Host Manage active (@accentColor). Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 (style.qss:772-815).
  4. Frozen sticky header for the hosts table (IP Address / Full Qualified / Aliases) [NNG-TABLES]; the captured "New Host" and bottom "Save Changes" primary actions are kept on DS §3 spacing. Source: DS §7 (style.qss:328-350); [NNG-TABLES] (sources.md).
MAINTAINER JUDGMENT — decision needed
  • Accent-bar section header added. The “Hosts (1)” sub-section (and by extension future per-tool sub-sections) gains a new 3px accent-bar header that the capture did not have. Decide whether this new header treatment should apply to Helpers' per-tool sub-sections.

Dark

Before
Helpers before, dark theme
After
Helpers after, dark theme

Light

Before
Helpers before, light theme
After
Helpers after, light theme
Reply in chat for Helpers: approve / revise (say what's wrong) / defer.

Homebrew

Tree / stacked macOS-only sidebar slot (Linux build uses APT Source Manager instead)
  1. Wrapped the "Available Updates" table and the "Homebrew Packages" tree each in one DS §2 elevated container card (fill @cardBgElevated, 1px @borderColor, radius 12, single container-level shadow); update rows and the collapsible tree-group rows are flat inside their container. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130) + DS §7 (shadow on the container, never per row). Evidence: renders/homebrew_dark.png.
  2. Three-layer surface hierarchy — page @pageContent, containers @cardBgElevated, flat rows @cardBg. In the before the tables sat as flat bands barely distinct from the page. Source: DS §1 (values.ini:2,29,30).
  3. Rebuilt the top of the page on header anatomy: a 3px accent bar + "Available Updates (3)" title + muted "Outdated Homebrew packages" source line, keeping the captured "Check Now" action; the second section gets a matching accent-bar "Homebrew Packages (171)" header with the captured "Search packages" field. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 (style.qss:772-815).
  4. Frozen sticky headers + right-aligned tabular Version column for the updates table [NNG-TABLES]; the two package groups ("Homebrew Cask (6)", "Homebrew Formula (165)") keep their collapsed tree state with the disclosure caret, as captured. Source: DS §7 (style.qss:328-350); [NNG-TABLES] (sources.md).
MAINTAINER JUDGMENT — decision needed
  • Accent-bar section headers added. Both the “Available Updates” and “Homebrew Packages” sections gain new 3px accent-bar headers with title + source line, replacing the capture's plain floating headings. Decide whether this new header treatment is wanted on this page.

Dark

Before
Homebrew before, dark theme
After
Homebrew after, dark theme

Light

Before
Homebrew before, light theme
After
Homebrew after, light theme
Reply in chat for Homebrew: approve / revise (say what's wrong) / defer.

Resources

Charts Cross-platform (macOS + Linux captured)
  1. Wrapped each bare edge-to-edge history-chart band ("History of CPU", "History of CPU Load Averages", "History of GPU", "History of Disk Read Write") in its own DS §2 elevated container card (fill @cardBgElevated, 1px @borderColor, radius 12, single drop shadow alpha 90 / blur 26 / offset 0,2, 8px outer margin). The shadow lives on the container, never on chart internals. Source: DESIGN_SYSTEM.md DS §2 (dashboard_tile_wrapper.cpp:107-130, addDropShadow(90,26)); DS §7 (container-level shadow). Evidence: renders/resources_dark.png.
  2. Established the three-layer surface hierarchy so each chart reads as a raised surface: page @pageContent, container @cardBgElevated, and the plot inset uses the chart surface token @chartBackgroundColor with @chartGridColor gridlines. In the before, the chart bands and the page were near-identical tones. Source: DS §1 (values.ini:2,29,30); DS §6 chart surface/grid tokens (values.ini:60-79, CHANGELOG.md:31,45).
  3. Rebuilt each chart header on header anatomy: a 3px accent bar + the exact chart title + the "expand" (fullscreen) button kept top-right as an unchanged control. Accent-bar color is the metric token for that chart — CPU/Load @cpuColor, GPU @gpuColor, Disk @diskColor. Source: DS §3 (metric_tile_base.cpp:255-307, gear/action button metric_tile_base.cpp:171-180); DS §4 typography (style.qss:772-815).
  4. Rendered the plots as static SVG (no JS chart library, no animation): @chartBackgroundColor surface, @chartGridColor gridlines, @chartLabelColor axis text. Axis labels copied exactly from the capture — CPU/GPU Y 100.0 / 75.0 / 50.0 / 25.0 / 0.0, Load Averages Y 1.00 / 0.75 / 0.50 / 0.25 / 0.00, all X axes 60.0 / 45.0 / 30.0 / 15.0 / 0.0. Plots are empty (no data series drawn), matching the captured empty plots — no data was invented. Source: DS §6 (chart tokens); DS §9-2 (no animation, static chrome only).
  5. Legend swatch rows copied exactly from the capture using the DS §6 series palette: CPU = 10 swatches (@chartSeries01–@chartSeries10), CPU Load Averages = 3 (@chartSeries01–03), GPU = 1 (@chartSeries01), Disk Read Write = 2 (@chartSeries01–02). Source: DS §6 series palette (values.ini:60-79).
  6. Corrected the sidebar highlight to "Resources" (the committed harness capture shows a stale "Dashboard" highlight — CAPTURE_NOTES.md gotcha #5). Source: CAPTURE_NOTES.md §"Gotchas" item 5.

Dark

Before
Resources before, dark theme
After
Resources after, dark theme

Light

Before
Resources before, light theme
After
Resources after, light theme
Reply in chat for Resources: approve / revise (say what's wrong) / defer.

Network Usage

Charts Cross-platform (macOS + Linux captured)
  1. Wrapped each bare edge-to-edge band (throughput readout, the Today/This Week/This Month stat trio, "30-Day History", "Monthly Data Cap", "Settings") in a DS §2 elevated container card (fill @cardBgElevated, 1px @borderColor, radius 12, single drop shadow alpha 90 / blur 26 / offset 0,2, 8px outer margin). Shadows live on the container, never on internals. Source: DS §2 (dashboard_tile_wrapper.cpp:107-130); DS §7 (container-level shadow). Evidence: renders/network_usage_dark.png.
  2. Established the three-layer surface hierarchy — page @pageContent, container @cardBgElevated, and the stat/hero readouts on the elevated surface. In the before, the bands and page were near-identical tones. Source: DS §1 (values.ini:2,29,30).
  3. Added a DS §3 page header — 3px accent bar (@networkColor) + "Network Usage" title + a muted "Per-interface throughput and data usage" source line — and kept the interface selector (unchanged control) top-right. The faint page title is present in the light capture; the source line is the DS §3 pattern applied per Processes precedent. Source: DS §3 (metric_tile_base.cpp:255-307); DS §4 typography (style.qss:772-815).
  4. Gave each inner section its own DS §3 accent-bar header (@networkColor) with the title copied exactly ("30-Day History (↓ Download ↑ Upload)", "Monthly Data Cap", "Settings"). Source: DS §3.
  5. Rendered the "30-Day History" plot as a static SVG surface (no JS chart library, no animation): @chartBackgroundColor fill with @chartGridColor gridlines. The plot is empty, matching the captured empty plot — no download/upload bars were invented. The throughput arrows use the metric tokens @networkDownloadColor (↓) and @networkUploadColor (↑). Source: DS §6 (chart tokens, download/upload metric tokens); DS §9-2 (static, no animation).
  6. Styled the "Monthly Data Cap" track with the DS §6 track token @chartGridColor (empty fill, as captured — 0% used). Source: DS §6 (style.qss:817-826, track @chartGridColor).
  7. Corrected the sidebar highlight to "Network Usage" (the committed harness capture shows a stale "Dashboard" highlight — CAPTURE_NOTES.md gotcha #5). Source: CAPTURE_NOTES.md §"Gotchas" item 5.
MAINTAINER JUDGMENT — decision needed
  • Throughput arrows now colored. The capture's ↓/↑ throughput arrows are monochrome; the prototype colors them with the download / upload metric tokens. Decide whether metric-colored arrows are wanted here, or whether they should stay monochrome to match the capture exactly.

Dark

Before
Network Usage before, dark theme
After
Network Usage after, dark theme

Light

Before
Network Usage before, light theme
After
Network Usage after, light theme
Reply in chat for Network Usage: approve / revise (say what's wrong) / defer.

Settings

Forms Cross-platform (macOS + Linux captured)
  1. Each QGroupBox form section (groupGeneral, groupAppearance, groupAlerts, groupTools, groupScheduledCleaning) becomes one DS §2 elevated section card (@cardBgElevated, radius 12, 1px @borderColor, single container shadow alpha 90 / blur 26 / offset (0,2)). Source: DS §2 (dashboard_tile_wrapper.cpp:107-130, utilities.h:21-32); .ui section list (settings_page.ui:41,148,214,311,358).
  2. Three-layer surface hierarchy — @pageContent behind the scroll, @cardBgElevated section cards, flat controls on top. Source: DS §1 (values.ini:2,29,30).
  3. Every section card gets a DS §3 header: a 3px ≥18px accent bar (@accentColor) left of the section title (General, Appearance, …). A page-level accent-bar header ("Settings" + "Preferences and alerts" source line) sits above the scroll. Source: DS §3 (metric_tile_base.cpp:255-307).
  4. Label/field rows follow the DS §4 scale and macOS control alignment [HIG-MACOS]: label left (9pt/600 @color06), control right — combos as @cardBg selects (Language English, Start Page Dashboard, Default Disk /dev/disk3s1s1, Color Scheme Auto, Font Inter (Recommended), Tray Icon Style Color (Default), Disk Analyzer Auto (Detect)), %/GB steppers for the QSpinBox alerts (CPU/Memory/Disk/Battery all 0 %). Boolean options render as the capture's toggle switches (green @successColor on, @chartGridColor off): "Show Dashboard system summary and status bar" and "Enable disk health alerts" on, the rest off, per the capture. Source: DS §4 (style.qss:772-815); .ui labels/values (settings_page.ui:47-306,317-513).

Dark

Before
Settings before, dark theme
After
Settings after, dark theme

Light

Before
Settings before, light theme
After
Settings after, light theme
Reply in chat for Settings: approve / revise (say what's wrong) / defer.

GNOME Settings

Forms Linux-only page; no live capture (headless host, no GNOME session)
  1. Each Appearance-tab QGroupBox (groupThemes, groupFonts, groupInterface, groupClock) becomes one DS §2 elevated section card (@cardBgElevated, radius 12, 1px @borderColor, single container shadow alpha 90 / blur 26 / offset (0,2)). Source: DS §2 (dashboard_tile_wrapper.cpp:107-130, utilities.h:21-32); .ui group list (gnome_appearance_tab.ui:27,103,250,285).
  2. Three-layer surface hierarchy — @pageContent behind the scroll, @cardBgElevated group cards, flat controls. Source: DS §1 (values.ini:2,29,30).
  3. Every group card gets a DS §3 header (3px ≥18px @accentColor accent bar + group title). A page-level accent-bar header ("GNOME Settings" + "GNOME desktop preferences" source line) sits above the tab bar. Source: DS §3 (metric_tile_base.cpp:255-307).
  4. Rows follow the DS §4 scale and GNOME boxed-list grouping/alignment [GNOME-HIG]: label left (9pt/600 @color06), control right — @cardBg combos (Color Scheme, GTK/Icon/Cursor Theme, Font Antialiasing, Font Hinting, Clock Format), QFontComboBox+size-QSpinBox pairs in the Fonts group (UI / Document / Monospace font, each with an 11 pt stepper), a QDoubleSpinBox stepper for Text Scaling Factor (1.0), a spinbox stepper for Cursor Size (24), and toggle switches for the QCheckBox rows (Animations / Hot Corners on; Clock Show Seconds off; Clock Show Weekday / Show Battery Percentage on). Source: DS §4 (style.qss:772-815); .ui labels/controls (gnome_appearance_tab.ui:33-338).
  5. The .ui tabBarLayout (gnome_settings_page.ui:36-144) renders as a tab strip — Appearance (checked, @accentColor) / Window Manager / Mouse & Touchpad / Desktop — above the section cards. Only the Appearance tab's content is shown (its .ui is the checked/default tab); the other three tabs' stackedWidget pages are not populated in this skeleton. Source: .ui (gnome_settings_page.ui:40-130).
UNVERIFIED — no live capture; skeleton derived from .ui files. Row/control values shown are representative, not copied from a live capture.

Dark

After (unverified skeleton)
GNOME Settings after (unverified), dark theme

Light

After (unverified skeleton)
GNOME Settings after (unverified), light theme
Reply in chat for GNOME Settings: approve / revise (say what's wrong) / defer.