Showcase PR-V1: unify the eight-page visual system - #178
Merged
Conversation
…-V1) Portfolio Showcase Sprint PR-V1: upgrade the existing Phase 1-F visual system to a professional, portfolio-grade operational design system. Zero backend/API/contract changes; pure presentation improvement. index.html — MergePilot Operational Design System: - Expanded CSS token set: 30+ custom properties covering surfaces (4 levels), borders (3 weights), text (5 tones), accent, 4 semantic states (ok/warn/err with dim+border variants), typography scale (6 sizes), geometry (3 radii + 6 spacing steps), motion (transition timing + elevation shadows + focus ring shadow), and layout dimensions (sidebar width, content max, topbar height). - Skip-to-content link for screen-reader/keyboard users. - :focus-visible styles on all interactive elements (2px accent outline, offset variants for nav vs. content). - @media (prefers-reduced-motion: reduce): all animations and transitions reduced to 0.01ms, spinner disabled. - @media (prefers-contrast: high): elevated border and text tokens. - Brand identity: icon block + wordmark + mode banner. - Sidebar nav: numbered items (01-08), Console label, active state with accent border, arrow-key roving tabindex navigation. - Per-page header scaffold emitted by JS (pageHeader() helper): eyebrow (section label), title, description — consistent across all 8 pages. - Panel titles with accent bar indicator (::before pseudo-element). - Status chips now carry a shape indicator (::before dot) — status is never conveyed by color alone. - Tables: sticky headers, row hover, severity row tints, separated borders replaced with bottom-borders only, scoped column headers (scope=col via tableWrap helper). - .table-wrap: overflow-x auto container for mobile scroll. - Evidence rows: label/value flex layout for provenance data. - Empty states: .empty-note with dot indicator (not just text). - Loading placeholder: animated spinner with reduced-motion fallback. - Mobile (max-width 880px): horizontal scroll nav strip (no scrollbar visible), table-wrap extends full-bleed, metrics tighten, title scales down, content padding reduces. live-refresh.js — renderer enhancement (all engine invariants preserved): - New PAGE_META map: per-page eyebrow/title/description for all 8 pages. - pageHeader(page) helper: consistent .page-head scaffold (eyebrow + h2.title + p.desc) — every renderer now calls it first. - tableWrap(headers, rows) helper: wraps tables in .table-wrap for mobile scroll; adds scope=col thead. - panel(title, body) helper: panel with optional .panel-title header. - evidenceRow(label, value) helper: provenance key-value row. - Banner: restructured with aria-hidden separators, cleaner labels. - All existing engine invariants verified by verify_js_contract: single fetch wrapper, single setInterval + clearInterval, pagehide/ beforeunload cleanup, MIN_INTERVAL_MS=2000, PAGES order unchanged, 5-character esc() on every dynamic value. test_dynamic_refresh.py — 22 new showcase tests (TestShowcaseDesignSystem): - CSS token set existence (30+ tokens) - 8-page header structure (eyebrow/title/desc) via JS PAGE_META - focus-visible, skip-link, reduced-motion, high-contrast, ARIA landmarks, aria-current page management - Table wrapper for mobile scroll, sticky headers - Status chip shape indicator (not color-only) - No extra fetch calls, no localStorage/sessionStorage/reload - Single timer contract (exactly one executable setInterval) - Pages order unchanged (exact array match) - Keyboard arrow navigation presence - Panel title accent bar, evidence row component, metric hover - No ninth page (exactly 8 sections) Regression: 1135 passed / 13 skipped (baseline 1113/13; +22). Browser-verified: desktop 1440×900 (8 pages, header structure, content blocks, zero placeholder, zero overflow) and mobile 390×844 (overview active, zero overflow). Screenshots captured locally for verification only (not committed — formal screenshots are PR-V3). NOT implemented in PR-V1: Case A/B/C showcase data, README changes, committed screenshots, architecture diagram, demo script — these are PR-V2 and PR-V3 scope. No backend/API/container/network changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
1. Positioning
This is PR-V1 of the MergePilot Portfolio Showcase Sprint: it unifies the existing 8-page visual system and presentation density. It does not add a 9th page, does not expand backend or production scope, does not implement Case A/B/C, and does not implement README, formal screenshots, architecture diagram, or demo script (those are PR-V2 and PR-V3).
2. Visual System Deliverables
PAGE_META+pageHeader()overflow-wrap: anywherefor long valuesrole=status,aria-live,aria-label,aria-labelledby,aria-current=page),:focus-visible(2px accent outline),@media (prefers-reduced-motion: reduce),@media (prefers-contrast: high), arrow-key nav code3. Eight-Page Scope
Exactly these 8 pages (no 9th):
All pages still consume one shared live snapshot — no per-page API, no per-page poller.
4. Dynamic Refresh & Safety Invariants (Unchanged)
/api/live/statusand GET/api/live/snapshotfetch(in source)esc()escaping contract before entering innerHTMLserve.py verify_js_contractpasses on the updated JS5. Tests
22 new structure/contract tests (
TestShowcaseDesignSystem): CSS token set, page header structure, skip-link, ARIA landmarks, table-wrap, single timer, page order, no 9th page, keyboard code presence, focus-visible, reduced-motion, high-contrast, evidence-row component, no extra fetch, no localStorage. Zero new skip, zero test removed.6. Real Browser Verification (Existing Evidence)
7. Residual Validation (Honest Disclosure)
These were NOT independently browser-automated due to in-app browser tool limitations:
These are non-blocking for the mouse/touch-focused Portfolio Showcase scope. This PR does not claim WCAG compliance or complete accessibility certification.
8. Next Scope
9. Truth Boundaries (Unchanged)
Showcase data is not external customer data. No real users or production deployment claimed.
application_integration_verified=falsedatabase_verified=falseproduction_verified=false