Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/webui/ui-common.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ The WebUI uses all 17 components that `dist/index.d.ts` exports. `grep -rn '@lab
| EmptyState | Common EmptyState with product illustration/actions; an explicit `role=heading` / `aria-level=2` ref bridge preserves the product hierarchy because alpha.19 fixes its DOM title at h3. |
| Tabs | Common controlled segmented Tabs, IDs prefixed with `useId`, callbacks translated to caller IDs, empty-array handling, IME capture guard and wrapping rather than a mobile dropdown. Callers provide unique IDs within each tabset. |
| Select | Common Select for normal pages, with localized labels and field help/error/busy state. An explicit ref bridge completes the combobox role because alpha.19 supplies active-descendant/listbox attributes on a plain button without exposing a role prop. |
| DataTable<T> and column/state types | Typed common table seam with required accessible label, stable caller-supplied opaque row keys and caller-owned column/sort state. Models and Activity must use this export. No automatic storage or API pagination/filtering is introduced. |
| DataTable<T> and column/state types | Typed common table seam with required accessible label, stable caller-supplied opaque row keys and caller-owned column/sort state. Models and Activity must use this export. No automatic storage or API pagination/filtering is introduced. Opt-in `activateRowPrimary` makes the whole row a pointer target by delegating to the row's primary control, the element carrying `ROW_PRIMARY_CLASS` (the Models name button, "Inspect {name}"): a click anywhere in a body row focuses and clicks that control, so pointer and keyboard run the same handler. A click on another interactive element in the row, a click that ends a text-selection drag, and rows whose primary control is missing or disabled (including the loading and empty rows) do nothing. Rows keep their native `row` role and gain no tab stop, so the primary control stays the only keyboard and screen-reader target; adapter CSS gives rows with an enabled primary control the package's pointer cursor and hover fill, and outlines the whole row while that control has `:focus-visible`. In Models, the name button's own `onClick` skips `actions.selectModel` when its entry is already selected, so activating the already-selected row, whether by clicking elsewhere in it or clicking the name button directly, is a no-op instead of re-aborting the live event stream and restarting the snapshot refetch that `selectModel` always triggers. The package's own `onRowClick` and `isRowClickable` are deliberately not exposed: in alpha.19 they render every body `<tr>` as `role="button"` with its own tab stop, which on the Models page fails axe `aria-required-children` (the table's rowgroup then holds buttons, not rows) and `nested-interactive` (the name button sits inside the row button), doubles the tab stops per row, and gives the row an accessible name that also matches the `Inspect .*{name}` locator the router-real harness relies on. |
| StaticTable | Legacy semantic markup table retained only for the existing gallery fixture. New feature tables must use DataTable<T>. |
| Dialog | Retained native `showModal` top-layer/focus implementation; the package has no Dialog or Modal. See the follow-up below. |
| Select and Tooltip inside Dialog | Native select and in-place tooltip markup, selected by NativeModalContext, because alpha.19 unconditionally portals popups and tooltip content into body without a portal-container option. A z-index override cannot repair top-layer ancestry. |
Expand All @@ -27,7 +27,7 @@ The WebUI uses all 17 components that `dist/index.d.ts` exports. `grep -rn '@lab
| StatCard | Common StatCard for the Activity runtime tiles: a group named "label: value", with scope, observed time and reason in the hint slot. Values arrive as formatted strings. Adapter CSS undoes the package's label and value truncation, label uppercasing and hover lift. |
| LoadingStatus | Decorative common Skeleton rows under one visible, localized `role="status"` in the Models table loading slot. SkeletonRow and SkeletonText are not used because each mounts one status per row named "Loading"; SkeletonCard and SkeletonChart have no matching surface. |
| SmoothHeight | Common SmoothHeight around the Activity operations list. It is active only while an operation is in flight plus a 400 ms settle window, so a settled list is never height-pinned or clipped by its `overflow: hidden`. The settle window always runs the full 400 ms from the latest transition to false, so a false→true→false sequence within that window restarts it instead of releasing early. |
| Badge | Common Badge for the Models row metadata (selected state, source, quantization), separated by real spaces, keeping authored casing and wrapping long values. Lifecycle state stays on StatusBadge. |
| Badge | Common Badge for the Models row metadata (selected state, source, quantization), separated by real spaces, keeping authored casing and wrapping long values. Lifecycle state stays on StatusBadge. Adapter CSS draws the accent tone (the "Selected" badge) as body text inside a `--color-focus` outline, because the package paints `--token-colorPrimary` text on a fixed translucent blue fill that measured 4.49:1 on the selected Models row in mlxcel-light and 3.7 to 4.5:1 in every theme under high contrast; `webui/tests/models.spec.ts` checks a selected and a hovered row for color contrast in all four themes with high contrast off and on. |
| Field / password login / auth / inspector / list / shell / icons | Product-specific semantic wrappers with no equivalent package control. AuthGate and SchemaMismatchView compose ErrorBanner. |

The semantic ref bridges are narrowly scoped compatibility workarounds for the pinned API, not claims of independently verified assistive-technology behavior. Re-audit them when upgrading. Product icon SVGs remain project-authored. The bundled `third-party-licenses.txt` includes the package's published NOTICE and Apache-2.0 license verbatim.
Expand All @@ -47,7 +47,7 @@ Only the library base stylesheet, one product theme stylesheet and component sub

## Verification boundary

Typecheck, lint and the Vitest suite cover props/ref/submit behavior, busy controls, all lifecycle mappings, finite/unknown progress, heading roles, duplicate tabset IDs, IME suppression, modal select and tooltip exceptions and typed tables. The `webui/src/design-system/ui-common-*.test.tsx` files and the `webui/tests/ui-common-components.spec.ts` and `webui/tests/ui-common-shell.spec.ts` browser specs pin the behavior each adoption above had to keep: live-region roles and outline, focus entry, wrap and restoration, shortcut suppression, the 390 px drawer and content column at the 200 percent text scale, test ids and focus fallbacks, untruncated tile and badge text, a single loading status, and unclipped focus rings. Unit tests use jsdom, including an explicit scrollIntoView mock; they do not establish layout, native select behavior, CSP or VoiceOver correctness.
Typecheck, lint and the Vitest suite cover props/ref/submit behavior, busy controls, all lifecycle mappings, finite/unknown progress, heading roles, duplicate tabset IDs, IME suppression, modal select and tooltip exceptions and typed tables, including the row-activation guards. The `webui/src/design-system/ui-common-*.test.tsx` files and the `webui/tests/ui-common-components.spec.ts` and `webui/tests/ui-common-shell.spec.ts` browser specs pin the behavior each adoption above had to keep: live-region roles and outline, focus entry, wrap and restoration, shortcut suppression, the 390 px drawer and content column at the 200 percent text scale, test ids and focus fallbacks, untruncated tile and badge text, a single loading status, and unclipped focus rings. `webui/tests/models.spec.ts` drives DataTable row activation by pointer, by keyboard and by a text-selection drag, and runs axe with the inspector open. Unit tests use jsdom, including an explicit scrollIntoView mock; they do not establish layout, native select behavior, CSP or VoiceOver correctness.

The normal hosted browser suite continues axe, keyboard, reflow and 44px-target checks. Only narrowly identified package CSSOM geometry properties are allowed in the static DOM assertions: progress width, select popup position/top/left/width, common table header width, the Drawer panel's width with its `100vw` max-width, the Tooltip content's px top/left (or `visibility: hidden` before it is measured), SmoothHeight's measured px height and Skeleton width/height. React writes these through CSSOM, which a strict `style-src 'self'` permits, but the static assertions do not certify production CSP.

Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3,741 changes: 3,741 additions & 0 deletions src/webui/assets/assets/index-CCGbr2W2.js

Large diffs are not rendered by default.

Large diffs are not rendered by default.

3,741 changes: 0 additions & 3,741 deletions src/webui/assets/assets/index-Dr3vFhNw.js

This file was deleted.

4 changes: 2 additions & 2 deletions src/webui/assets/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<meta name="color-scheme" content="light dark" />
<title>mlxcel WebUI</title>
<script src="./theme-bootstrap.js"></script>
<script type="module" crossorigin src="./assets/index-Dr3vFhNw.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DKf-cZT7.css">
<script type="module" crossorigin src="./assets/index-CCGbr2W2.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CHdEXEMP.css">
</head>
<body>
<div id="root"></div>
Expand Down
40 changes: 20 additions & 20 deletions src/webui/assets/mlxcel-webui-manifest.json
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
{
"budgets": {
"embedded_asset_bytes": 744693,
"embedded_asset_bytes": 746104,
"embedded_asset_limit_bytes": 5242880,
"initial_js_gzip_bytes": 157801,
"initial_js_gzip_bytes": 158146,
"initial_js_gzip_limit_bytes": 204800,
"total_js_gzip_bytes": 158974,
"total_js_gzip_bytes": 159325,
"total_js_gzip_limit_bytes": 716800
},
"files": [
{
"bytes": 951,
"gzip_bytes": 611,
"path": "assets/code-highlight-Ckt-j4Gi.js",
"sha256": "ef1042ddb4e6787d771c5a523db9c48dcb423241e893a43a12ecf2a2df76e6d8"
"gzip_bytes": 613,
"path": "assets/code-highlight-B24EZUmw.js",
"sha256": "5015bf4e231a2944b84e11144de91736e62fe4ec2919d7034ec2e2f242bf619b"
},
{
"bytes": 1134,
"gzip_bytes": 562,
"path": "assets/history-C8MQaV90.js",
"sha256": "839f4a9404a08703afec488420502a47a393de556727658ab43c82772043fc03"
"gzip_bytes": 566,
"path": "assets/history-B_cN6LK7.js",
"sha256": "543d0301e16274f6571e0101b329123f91dda0bc42984f3e2bc0602e00ca0820"
},
{
"bytes": 116240,
"gzip_bytes": 18410,
"path": "assets/index-DKf-cZT7.css",
"sha256": "df33ee8157806c7872b471a7bc2be31c305e1152a74a8461203d5165e7086517"
"bytes": 609104,
"gzip_bytes": 157157,
"path": "assets/index-CCGbr2W2.js",
"sha256": "4e2e166e278a15ae05ae90ea2881cabff8c13e83e79c13b05173f7f3ea680ed0"
},
{
"bytes": 608230,
"gzip_bytes": 156812,
"path": "assets/index-Dr3vFhNw.js",
"sha256": "0e89aaa0f697d9849352c98d839382a33d8bcc9f634db4eddf1b2dee64ca2206"
"bytes": 116777,
"gzip_bytes": 18527,
"path": "assets/index-CHdEXEMP.css",
"sha256": "503d11e47505305a5e6bda4ea31976ea20f53d08bbdbe32dd0c0a0b095fbf27b"
},
{
"bytes": 503,
"gzip_bytes": 302,
"gzip_bytes": 303,
"path": "index.html",
"sha256": "68dac0ecfb05fe55fd6a52853577a45801472f84f20ebd5ab7c67e1274edcdc0"
"sha256": "c6bd85fd1a15741bfc9d96c6cb4063d74ed47c35e9a68d640d39407daa7316a6"
},
{
"bytes": 2129,
Expand Down Expand Up @@ -73,5 +73,5 @@
},
"pnpm_version": "11.18.0",
"schema_version": 1,
"source_digest_sha256": "b249e304e21938e47dbf33e5f903222db2c6609b63b0fcad167e28685b3f822f"
"source_digest_sha256": "99d56437dcb42febc536c46ed8095a3d2c479074bd630a64903fdda1fd7a65c0"
}
Loading
Loading