feat: add WebUI design system shell - #1863
Merged
Merged
Conversation
inureyes
added a commit
that referenced
this pull request
Sep 12, 2026
Replace the first design-shell pass with the reviewed compact navigation sheet, accessible modal and tab behavior, storage-safe appearance preferences, explicit high-contrast controls, axe-backed browser coverage, non-overwriting screenshot baselines, honest placeholder states, and rebuilt deterministic WebUI assets for PR #1863. Refs #1834, #1843
inureyes
added a commit
that referenced
this pull request
Sep 12, 2026
Replace the first design-shell pass with the reviewed compact navigation sheet, accessible modal and tab behavior, storage-safe appearance preferences, explicit high-contrast controls, axe-backed browser coverage, non-overwriting screenshot baselines, honest placeholder states, and rebuilt deterministic WebUI assets for PR #1863. Refs #1834, #1843
inureyes
force-pushed
the
feature/issue-1843-webui-design-shell
branch
from
September 12, 2026 16:16
cb489f4 to
5c15d6c
Compare
This was referenced Sep 13, 2026
Add the shared WebUI design-system layer for issue #1843: semantic macOS-inspired tokens, appearance preferences without inline styles, localized shell navigation, reusable controls, a component gallery, screenshot baselines, documentation, and rebuilt deterministic embedded assets. Validation: pnpm --dir webui run typecheck, lint, unit, and browser pass; canonical build_bundle.py --verify passes; make verify-webui-contract, verify-llama-compat, verify-versions, and verify-kernel-dtype-keys pass with the contract Python path. Refs #1834 Closes #1843
Replace the first design-shell pass with the reviewed compact navigation sheet, accessible modal and tab behavior, storage-safe appearance preferences, explicit high-contrast controls, axe-backed browser coverage, non-overwriting screenshot baselines, honest placeholder states, and rebuilt deterministic WebUI assets for PR #1863. Refs #1834, #1843
Compare viewport screenshots instead of full-page captures so Linux and macOS font metric differences do not change the captured image height, while still exercising the 390, 1024, 1440 and text-scale design-system viewports through Playwright baselines. Refs #1843
Separate Playwright image snapshots by process platform so macOS review baselines and Linux CI baselines no longer overwrite each other, and upload failed browser screenshots from CI so Linux expected files can be reviewed before they are accepted. The LoginView token field no longer advertises current-password autofill, clears spelling/capitalization helpers, and ignores programmatic submits while busy or empty; unit coverage now asserts those guards. Validation: pnpm --dir webui run typecheck, pnpm --dir webui run lint, pnpm --dir webui run unit, pnpm --dir webui run browser, and python3 scripts/webui/build_bundle.py --verify pass locally. Linux screenshot baselines are intentionally not committed in this capture step.
The 390px dark 200% gallery candidate exposed real horizontal clipping in the hero copy, tab strip, and controls. The design-system wrappers now preserve min-width: 0, wrap tabs and button text, and stretch large-text controls instead of relying on clipped overflow. Playwright now asserts document and key panel scroll widths stay within their client widths at the 200% text-scale fixture, then verifies tabs, buttons, and form labels remain horizontally reachable after scrolling. The seven root-reviewed Linux baselines from CI run 34694795080 are committed, while the regenerated Linux 200% candidate is intentionally withheld for another review pass. Validation: pnpm --dir webui run typecheck, pnpm --dir webui run lint, pnpm --dir webui run unit, pnpm --dir webui run browser, and python3 scripts/webui/build_bundle.py --verify pass locally.
Add the root-reviewed Linux 390px dark 200% text-scale screenshot from CI run 34695396080 now that the gallery title, intro copy, tabs, and controls reflow without horizontal clipping. Refresh the design-system documentation and PR reports with the final 10-test Vitest count, the platform-separated browser baseline wording, and the rebuilt bundle digest. Validation: the accepted screenshot was produced by the Linux WebUI bundle job artifact for run 34695396080 after the 200% reflow fix; local typecheck, lint, unit, browser, and bundle verification were already green at commit 8ecbeb9.
Distinguish component and screenshot baselines from pending provider integration, user approval, and actual Safari, VoiceOver, and browser zoom gates. Explain that autocomplete hints cannot guarantee password-manager behavior. Frontend typecheck, lint, 10 unit tests and all shared static gates pass at b202f22. This update changes documentation only. Refs #1843 and #1834
Connect the #1843 WebUI shell to the shared #1842 provider so login, logout, connection state, selected model labels, catalog/operation freshness and schema-mismatch recovery all flow through the real client instead of static placeholders or a second auth cache. Add provider/mock HTTP coverage for no pre-submit network requests, Bearer-prefixed bootstrap/catalog/operations/events, 401 session purge, fail-closed malformed schema handling, wrong-key/offline localized errors, token non-reflection and no autoload or inference calls while browsing authenticated routes. Validation: pnpm --dir webui run typecheck; pnpm --dir webui run lint; pnpm --dir webui run unit; pnpm --dir webui run browser; make verify-webui-contract WEBUI_CONTRACT_PY=/tmp/mlxcel-webui-contract/bin/python; make verify-webui-bundle. Refs #1843.
Add a reachable clear-session action to the shared toolbar so authenticated, authenticating, settings, and gallery routes can always return to the signed-out surface without a route-local logout control. Fence login presentation errors with a local attempt counter so a delayed failure from an older token attempt cannot reappear after logout or after a newer login attempt, while the shared provider remains the only token/session authority. Report catalog and operation counts as pending until the provider has authoritative snapshot fences, strip fixture-only schema markers from mock API responses, and add browser coverage for prefixed bootstrap/catalog/operations/events routing, bad keys, 401 purge, inflight abort, mismatch reload, token containment, and mocked product login/signed-in screenshots. Signed-off-by: Jeongkyu Shin <inureyes@gmail.com>
Replace the earlier floating shell treatment with the approved 4185 source candidate: a flush full-height sidebar, shared 58px sidebar/header edge, sticky toolbar with a hard scroll boundary, neutral content surfaces, compact two-row toolbar reflow, and 44px compact toolbar hit targets without Apple assets or fake window chrome. Keep the provider-backed product shell honest by adding mock-API product baselines, Darwin/Linux screenshot sets, production-selector overflow and hit-target assertions, and refreshed embedded assets with source digest c4df0326df35998f03e315ab1382867150bb20b3ad516aebe184e722cbf20748. Validation: typecheck, lint, Vitest 62 tests, Darwin Playwright 19 tests, Linux Docker Playwright 19 tests, webui bundle verification, and webui contract verification passed locally. Refs #1843.
Move the shared Playwright fixtures, mock API routing, boot helpers and layout assertions out of the oversized browser spec so the executable test file stays focused while preserving the approved 4185 screenshot and product journey coverage. Validation: typecheck, lint, Vitest 62 tests, Darwin Playwright 19 tests, Linux Docker Playwright 19 tests, webui bundle verification, and webui contract verification passed locally. Refs #1843.
Separate the approved 4185 source from its pending targeted Safari, VoiceOver, and native zoom recheck. Refresh provider integration and test counts so reports and the shared contract no longer contradict the approval ledger. Typecheck, lint, 62 unit tests and shared static gates pass. Approved source and embedded bundle digests are unchanged. Refs #1843 and #1834
Add diagnostic-only WebUI browser logging for the hosted screenshot failure: CI now records the Ubuntu/fontconfig/browser environment, and an opt-in Playwright test prints CDP platform fonts for representative gallery and product shell text without changing production CSS, screenshot thresholds, or approved assets. Validation: typecheck, lint, Vitest 62 tests, and Darwin Playwright with `MLXCEL_WEBUI_FONT_DIAGNOSTICS=1` passed locally. Refs #1843.
Pin the WebUI job to Ubuntu 24.04 and the observed DejaVu/WenQuanYi packages instead of treating every Linux system-font fallback as identical. Adopt the twelve individually reviewed hosted images after a strict native ARM reproduction matched them with those fonts, and record image hashes and toolchain limitations. Keep production assets, the approved source digest, screenshot tolerances, fixtures, browser flags, and all required jobs unchanged. The hosted canonical build rerun remains the final CI gate. Refs #1843, #1834
Replace the stock-container equivalence claim with pinned-font reproduction and the canonical hosted pass at b3c5326. Record the QEMU pre-render failure without treating it as a test pass, while keeping design approval distinct from pending manual accessibility checks. Hosted typecheck, lint, 62 unit tests, 20 browser tests and deterministic bundle verification passed. This correction changes documentation only. Refs #1843 and #1834
Record explicit design confirmation and the separately accepted Safari, VoiceOver, focus and native-zoom recheck for the immutable 4185 candidate. Distinguish user-reported evidence from independent observations and keep central integration gates open. No source, styles, assets or tests change. Host GPU recovery remains unconfirmed; no local GPU, browser or runtime tests run for this documentation update. Refs #1843, #1834
Pin the published alpha.19 package and route reusable controls through one typed product adapter seam. Preserve macOS 27 shell tokens and compact geometry while retaining native modal/select/tooltip boundaries that body portals cannot satisfy. Cover supported button props, tab ID namespaces, IME, progress and semantic bridges with focused tests; retain upstream license notices and regenerate deterministic assets. Prepare strict served-CSP geometry checks without relaxing policy or claiming the prior immutable preview's manual acceptance covers rewritten DOM. Refs #1843, #1834
Keep determinate and indeterminate progress in one gallery cell and preserve product lifecycle-label casing. Assert actual Chromium accessibility-tree heading semantics across tab remounts instead of Playwright 1.63's native-tag-first heading-level model. Retain strict screenshot thresholds and regenerate the canonical bundle.
Update only the visually reviewed Darwin high-contrast States image with exact source and image provenance. Preserve all other baselines and strict comparison thresholds; hosted Linux review and migrated-DOM Safari acceptance remain separate gates.
inureyes
force-pushed
the
feature/issue-1843-webui-design-shell
branch
from
September 14, 2026 03:11
700d0a6 to
62c4f25
Compare
Adopt only the independently reviewed hosted States screenshot from run 34801765896, preserving the other eleven images and strict thresholds. Record exact renderer/source provenance and the rebased migration's CPU, AX, and pending runtime/manual validation boundaries in both reports.
Record the canonical 76-unit and 20-browser hosted pass alongside the separate two-case actual production CSP pass. Keep migrated-DOM Safari acceptance and final download-backend integration explicitly pending; production assets remain unchanged.
Record the user's explicit remote-environment constraint and defer changed-DOM Safari, VoiceOver, and native-zoom checks until the whole implementation is ready. This is not a pass or a per-unit merge blocker; preserve the final integrated acceptance obligation and unchanged production bundle.
Record the UI-first merge sequence, stable shared-component documentation URL, final hosted validation, and exact GB10-only waiver scope. Keep native manual acceptance deferred to the final integrated implementation and preserve all production assets.
This was referenced Sep 14, 2026
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.
Summary
@lablup/ui-common@0.1.0-alpha.19package through one typed adapter/token seam: buttons, status, progress, empty states, namespaced tabs, normal-page select and generic table exports. Preserve macOS 27 shell topology and product colors instead of the package's default theme.Current migration validation
7e4577b1; central Unicode validation, schema and 44 fixtures are preserved. CPU frozen install/typecheck/lint, 76 unit tests and 44 contract fixtures pass. Independent correctness/security rereviews report no findings in the shared migration seam.cfbcaada7d5e9734b2d305eacf534e003d8b8ea3916ce163c5a53f294c6bbd78, bundle858f5775f548532b3fa93942c7f063e06b83f427d107b47c82678f3564638f7f. Production source/assets remain frozen and equivalent to the actual startup validation.a01724dfpassed typecheck/lint, all 76 unit tests, all 20 browser cases and deterministic bundle verification. Only individually reviewed Darwin/Linux States baselines changed; the other eleven images and all thresholds are unchanged.62c4f259separately passed both supplied-server CSP cases (1440 light/390 dark): actual policy, no violations/external requests, Select geometry/Escape focus, measured progress, reduced motion, axe and actual heading AX. Static hosted results were not substituted for production proof. Production assets are identical at the validated heads.Acceptance boundaries
Refs #1834
Closes #1843