@micha.bigler/ui-core-micha 2.38.0 → 2.39.0

package/README.md

@@ -9,3 +9,7 @@ To add an entry, create a small component in `dev/entries.jsx` and append it to
 ## Internationalization
 
 Spread `uiCoreTranslations` into the default i18n namespace as the supported aggregate; per-feature translation exports remain available to selective apps that accept responsibility for pairing every adopted feature with its bundle.
+
+## Dashboard primitives
+
+`StatTile` (a bordered KPI tile) and `SoftChip` (a soft tinted annotation/status chip, tones derived from `theme.palette[tone]`) live under `src/components/` and are exported from the package root.

package/WORK_ORDERS.md

@@ -17,6 +17,7 @@ rules are defined centrally in `webapps/AGENTS.md` → "Work-Order Register".
 | `DX-*` | Developer experience / repo tooling (ucm-local prefix; unrelated to `django-core-micha`'s own `DX-*`) |
 | `AUTH-*` | Auth components UX (login/password/MFA/profile forms, auth error i18n, and the account screen's own surfaces) |
 | `I18N-*` | The shared kit's i18n **contract** — how a consumer registers ucm's strings, and what happens when it forgets. Distinct from `AUTH-*`, which owns the auth strings themselves |
+| `PRIM-*` | Shared dashboard/data primitives — small presentational components that are neither chart (`CHART-*`) nor app chrome (`SHELL-*`) |
 | `SHELL-*` | Shared app chrome and navigation shells (`UserMenu`, mobile bottom nav, secondary-navigation shell) — used since `SHELL-1`, documented here 2026-08-11 |
 
 Introduce a new prefix when none fits and add it here. New WOs always get a
@@ -26,6 +27,7 @@ prefixed ID; never reuse a bare flat number across workstreams.
 
 | ID | Titel | Beschreibung | Datum | Status | Commit(s) | Notiz |
 |---|---|---|---|---|---|---|
+| PRIM-1 | Promote `StatTile` and `SoftChip` into the shared kit | Both already exist **twice**, independently built, and each second build is an **inline component inside a page** rather than a file — `StatTile` in `fitness-monitor/frontend/src/pages/BodyHistoryPage.jsx:554-568` beside hram's `ResearchComponents/StatTile.jsx`, `SoftChip` in `cockpit/frontend/src/cockpit/BoardView.jsx:65-73` (the lane pill) beside hram's `SoftChip.jsx`. The promotion trigger is met on evidence, not waived. The two builds diverged in seven places; all seven decided by the operator 2026-08-12 and rendered in the prototype. Full order [`work-orders/PRIM-1.md`](work-orders/PRIM-1.md) | 2026-08-12 | done | b5fff23 | Tier 3 (shared-core). `reviewer` + `ui_reviewer` mandatory and concurrent; no `sec_reviewer`. **Prototype in scope** — [`work-orders/assets/PRIM-1-dashboard-primitives.html`](work-orders/assets/PRIM-1-dashboard-primitives.html), so the rendered 375/1280 side-by-side is a commit gate; screenshots have not been legibly obtainable here, so a substitution must be **declared**, not silent. Decisions: value `h5` 18/600 · `tabular-nums` always · `flex: 1` with a `minWidth` floor · `accent` kept (fitness-monitor cannot adopt without it) · responsive padding · `status` uses **`overline`** (cockpit independently chose uppercase + .4px tracking, so this satisfies `THEME-4` with **no** baseline change and only hram's chips shift to uppercase) · dot-or-icon and optional border via props. **Token delta list has one entry:** `caveat`'s 12/500 has no baseline variant (`caption` is 12/400) — operator resolved it as keep-the-value, so it must be **exempted in `THEME-4` with that reason stated**, not flattened to 400 and not fixed by extending the baseline here. Neither `StatTile` build has a test; the promoted tests are written from scratch. Minor bump `2.38.0` → `2.39.0` (new capability area). **The three app adoptions are separate follow-up WOs** and land no app change here. Programme strand `DS-5`. **Codex skipped, dated evidence**: `.claude/codex-status.md` records `unavailable` for 2026-08-12 (`cockpit/UI-10`, out of workspace credits, the day's one allowed probe already spent) — Orchestrator implemented directly, flipping authorship. **Independent `reviewer` (Haiku, mandatory regardless of tier per the WO): no findings.** **`ui_reviewer` (Haiku, mandatory, concurrent): two P1 findings, both fixed** — (1) `StatTile`'s padding had only `px` responsive (`{xs:1, sm:1.5}`) with `py` fixed at 1, against the decided "responsive `{xs:1, sm:1.5}`" (matching fitness-monitor's original `p` shorthand, not hram's split values) — changed to a single `p: {xs:1, sm:1.5}`; (2) the `status` variant's typography was under-tested (only `textTransform` checked) — added explicit `fontSize`/`fontWeight`/`letterSpacing` assertions against `theme.typography.overline`, and separately against the `caveat` variant's raw 12/500, both now green. Re-verified 51/51 scoped tests green after fixes, `tsc -p tsconfig.build.json --noEmit` clean. **Rendered gate: declared substitution**, per the WO's own text — the 375/1280 side-by-side screenshot capture is not legibly obtainable in this repo; computed-style/DOM inspection substituted instead, via the test suite itself (fill/border/text colour per tone verified against `alpha`/`darken` of `theme.palette[tone]`; `borderRadius` 999px status vs non-pill caveat; `fontVariantNumeric: tabular-nums`; accent border width 1px vs 2px; `overline` typography values now explicit). No visual click-through was performed. Commit `b5fff23`. |
 | THEME-3 | Add the missing "subtle surface" baseline token | Adds `palette.background.subtle` (`#F4F5F6`, fixed baseline constant alongside `default`/`paper`) to `createAppTheme` and registers it in `THEME_COMPLETENESS_SURFACES`. Found by `cockpit/UI-6`: the `UI-4` design-language sheet's canonical token table names this as a baseline-supplied "inset surface" replacing `cockpit.surface2` (16 of 195 token reads in that WO), but the value was never actually wired into the shipped package — confirmed by grep, not assumed. `cockpit/UI-6` is blocked on this landing + publishing first, per this estate's own "gap in the shared kit is a ucm WO, not a local workaround" rule. Full spec: [work-orders/THEME-3.md](work-orders/THEME-3.md). `2.33.2` (patch). | 2026-08-11 | done | 1b25117 | Tier 3 — shared-core, this repo publishes to npm on every `main` push touching `src/**`, no staging net. Codex implemented in one pass (stdin invocation), exit 0, `RESULT: DONE`, 17/17 of its own new tests green. **Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) ran concurrently — both clean, no findings.** Both independently re-derived the safety mechanism rather than trusting the WO's claim: `MUI_DEFAULT_THEME = createTheme()` never defines `background.subtle` (vanilla MUI only has `.default`/`.paper`), so `assertThemeComplete`'s `sameValue` check can never flag the new surface for any real adopter — the same unexempted treatment `background.default` already gets; `background.paper`'s exemption (needed because MUI's own default theme is also white) was correctly not copied. Both read `fitness-monitor`'s actual `theme.js`/`theme.test.js` directly (the one real production adopter, hard-asserting `assertThemeComplete(theme).findings` equals `[]`) and confirmed this diff cannot break it. `ui_reviewer` additionally grepped every sibling app repo under `webapps/` for `createAppTheme` — no other live consumer exists; cockpit's own adoption (`UI-6`) isn't wired yet. `reviewer` independently recomputed the contrast ratio in a throwaway script and got the same `5.3748:1` the diff claims (not the design sheet's `4.81:1`, which was computed on the sheet's own static canvas — a source discrepancy, not a functional risk; both clear AA). **Orchestrator's own verification:** built the package (`npm run build`) and attempted to run `fitness-monitor`'s real assertions against the fresh `dist/` via raw Node ESM import — hit a pre-existing (confirmed via `git show`, not introduced here) `tsc`-emitted extensionless-import quirk that only affects raw `node`, not the Vite/Vitest resolution every real consumer (incl. fitness-monitor's own suite) uses; fell back to the scoped vitest run instead. Tests: 17/17 green (`tests/createAppTheme.test.js` + `tests/themeCompleteness.test.js`), run by the Orchestrator. No visual/prototype gate — token-only change with no rendered specimen in this repo (per the Envelope); the rendered check happens downstream in `cockpit/UI-6`. Semver: patch, applied by the Orchestrator per the WO's own reasoning (additive, resolves automatically, no adopter code change needed) — confirmed rather than assumed by both reviews. Unblocks `cockpit/UI-6`, which was waiting on this landing + publish. |
 | CHART-7 | `ChartFrame` gains a `titleVariant` prop | Adds `titleVariant` (default `'h6'`, unchanged from today's hardcoded value) to `ChartFrame`, forwarded to the title `Typography` — lets a dense panel grid (e.g. fitness-monitor's seven body-composition panels beside one hero chart) render smaller titles that recede instead of competing with the one chart that matters. One prop, not a `slotProps.title` system — deliberately minimal per the WO. Precondition of fitness-monitor's `FM-12` (DS-10). `2.32.0` (minor, additive). Full spec: [work-orders/CHART-7.md](work-orders/CHART-7.md). | 2026-08-10 | done | 14020d0 | Envelope authored by Expertenchat, no design question (short-form WO). No preconditions. Orchestrator filled a minimal Implementation map (the whole change is two lines in `ChartFrame.jsx`), ran Codex (stdin invocation). Codex added `titleVariant = 'h6'` to the prop destructure, forwarded it to the title `Typography`, wrote all 3 required tests, and bumped `2.31.1` → `2.32.0` per the WO's own stated version target. **Independent `reviewer` + `ui_reviewer` (both Haiku, proportionate to a small low-risk diff) ran concurrently — both found NO findings**, including explicit confirmation that only the prop-destructure line and the one `Typography` line changed (padding, foot row, subtitle/toolbar/slots byte-for-byte unchanged) and that the default-regression test is non-vacuous. Re-verified: 13/13 scoped vitest tests green, `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)**: no existing harness specimen used `titleVariant`, so the Orchestrator added one (two `ChartFrame`s side by side, default vs. `titleVariant="subtitle2"`) to `dev/entries.jsx` — confirmed live at 375px and 1280px that the override renders visibly smaller/lighter than the unchanged h6 default. |
 | THEME-2 | Two defects from the THEME-1/CHART-6 landings: `warning.main` contrast, `grid` replacing instead of merging | Fixes `palette.warning.main` (`#C08A2C`, 3.038:1 on white — fails AA) to `#976100` (the existing `text` tone, ~5.2:1), `contrastText` to `#FFFFFF`; `warning.fill`/`.text`/`.fillText`/`.bg` unchanged. Adds a completeness-assertion rule checking every status channel's `.main` against `#FFFFFF` and `background.default` at 4.5:1. Fixes `BarChart`/`LineChart`'s `grid` prop silently replacing (not merging) a caller's partial grid object; the required audit of sibling object-valued defaults found a second live instance (`legendPosition`, same bug class) and fixed it too. `2.31.1` (patch). Full spec: [work-orders/THEME-2.md](work-orders/THEME-2.md). | 2026-08-10 | done | 7d5039f | Envelope authored by Expertenchat, both defects fully diagnosed up front (no design question). Preconditions (THEME-1 `2.30.0`, CHART-6 `2.31.0`) verified. Orchestrator filled the Implementation map with the exact current-state code pointers for both defects, then ran Codex (stdin invocation). Codex's own audit (per the WO's "close the mechanism" instruction) found the `legendPosition` partial-override bug beyond the named `grid` fix and fixed it too, exactly as the WO anticipated ("fix that too and say so"). **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently — both found NO findings**, including the reviewer's own hand-computed contrast check confirming `#976100` clears 4.5:1 against both `#FFFFFF` (~5.22:1) and `background.default` (~5.00:1). One thing the Orchestrator itself fixed (not a reviewer finding): a pre-existing THEME-1 regression test (`tests/createAppTheme.test.js`) asserted `palette[status].main === palette[status].fill` for all four status channels — THEME-2 deliberately breaks that equality for `warning` only (the whole point of the fix), so the assertion was updated to special-case `warning` against its new intended invariant (`main === text`, `contrastText === '#FFFFFF'`) while `success`/`error`/`info` keep the original assertion. Re-verified after the fix: 58/58 scoped + adjacent vitest tests green (`tests/themeCompleteness.test.js`, `tests/chartDefaults.test.js`, `tests/createAppTheme.test.js`, `tests/chartsPalette.test.js`, `tests/BarChart.test.jsx`, `tests/LineChart.test.jsx`, `tests/TimeSeriesChart.test.jsx`), `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's "Theme / Shared baseline" entry — the WO's own point was that no existing specimen exercised `.main` (the `StatusChip`'s `sx={{bgcolor:'...fill'}}` and the `MuiAlert` `standardWarning` override both bypass it), so a new Button/Chip/`Alert variant="filled"` specimen row was added and confirmed live at 375px and 1280px: the warning tone now renders visibly darker (brown, white text) than the still-unchanged lighter-amber `fill`-based chip beside it. The "Caller overrides" `LineChart` specimen's `grid` prop was also changed from a complete `{horizontal:true,vertical:true}` object (which wouldn't have visually proven the merge) to a genuinely partial `{vertical:true}` one — confirmed live at both widths showing BOTH grid directions post-fix. |
@@ -73,9 +75,8 @@ Two chunks. **Chunk 1** (Part 1 + Part 2 of the Envelope): extended `SPACING_SHO
 
 **Orchestrator's own verification:** scoped tests (`themeCompleteness`, `createAppTheme`, `MobileBottomNav`, `ChartFrame`) 65/65 green, `tsc -p tsconfig.build.json --noEmit` clean. Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) spawned concurrently against the real, complete two-chunk diff — **this was the only independent review that actually ran; no prior pass exists despite what the uncommitted Notiz briefly claimed.** Both reviewers: **no blocking code findings.** `reviewer`: two P3 notes, not fixed — the print-document masking regex only matches the first `printWindow.document.write(...)` call in a file (currently safe, only one exists; latent fragility if a second is ever added); `exportChartPng`'s new `backgroundColour` parameter has no default (low risk, not exported from `src/index.js`, single caller always supplies it — a footgun only if the function gains a second caller or goes public). `ui_reviewer`: confirmed all nine role-based mappings resolve against real `tokens.js` values and are visually reasonable; flagged the Google-icon border change (`rgba(0,0,0,0.2)` → `divider`, roughly halving visible contrast) as the single largest visual delta of the nine and worth a live look given the operator's explicit no-rendered-gate decision for this WO — not blocking, no rendered gate was added, consistent with that decision. Version `2.34.0` → `2.35.0` (minor, new exported API). No rendered/prototype gate, per the operator's explicit decision — this note is the substitute, all nine changed values listed from-and-to above. DS-18 follow-ups. |
 | SHELL-5 | Promote the secondary-navigation shell | Promotes jg-ferien's `SectionSwitcher` (grouped sidebar + bottom drawer) into the kit as the level *below* the bottom bar, adds the trigger bar that supplies the missing affordance, and makes ucm's own `AccountPage` its first consumer by replacing its horizontal `Tabs` strip. Look and feel follow jg by operator decision. Full spec: [work-orders/SHELL-5.md](work-orders/SHELL-5.md). | 2026-08-11 | done | b283c33 | DS-11. Supersedes `SHELL-2` (now `dropped`); prototype `assets/SHELL-2-account-navigation.html` kept as the composition spec. Each jg-specific concept was made optional and `AccountPage` proves it optional: no `overviewItem` (no "Übersicht" concept), no `rememberedKey`, `APP_HEADER_HEIGHT` → `headerOffset` (default `24`), `zIndex.drawer + 3` kept as default (`SHELL-3`'s bar sits at `+2`, ordering is meaningful), and the 280px two-column grid moved from the consumer into the component. The trigger bar is the one net-new piece (jg has none) — new full-width 56px bar, first thing rendered on mobile, opens a bottom drawer. `AccountPage`'s flat permission-computed `tabs` list bucketed into four fixed groups per the prototype ("Mein Konto"/"Verwaltung"/"Hilfe"/trailing "Weitere" catch-all for ungrouped `extraTabs`), new `Account.GROUP_*` i18n keys; `?tab=` contract and all permission-gating logic byte-for-byte unchanged. New component-owned chrome i18n (`src/i18n/sectionNavTranslations.ts`, all 4 locales) resolves the trap jg's `t("SectionSwitcher.TITLE")` had — no fallback, would have rendered a raw key. **Codex left the diff uncommitted and did not touch this file, as instructed** (the third consecutive WO where the explicit warning about the prior invalid-review pattern held). **Concurrent-session note:** an unrelated `I18N-1` session was uncommitted in the same working tree at the same time (`README.md`, `tests/i18nAggregate.test.js`, an aggregate-translations addition to `src/index.js`) — separated by hunk-level staging (`git add -p`) before this commit; only `SectionNav`'s two export lines in `src/index.js` are in this commit, I18N-1's own hunks were left for its own session to land. **Orchestrator's own verification:** scoped tests green (52/52 after fixes, see below), `tsc` clean. Independent `reviewer` + `ui_reviewer` (Sonnet, both mandatory — new logic and a prototype in scope) ran concurrently. **`reviewer` found two real P2s, both fixed:** the drawer's `zIndex` was set via BOTH an exported/registered `sx` object and a separate inline `style` prop on the same element — `style` always wins, so the registered `sx` value was dead code, tested but never actually reaching the DOM; removed the redundant `SECTION_NAV_DRAWER_SX` entirely (and its now-pointless `kitSxRegistry.js` entry), kept only the working `style`-based zIndex. The "optional controlled" `open`/`onClose` API (an Orchestrator design resolution for reconciling jg's controlled drawer with the new internally-triggered one) was incomplete — no `onOpen` callback existed, so a controlled consumer's trigger click was silently a no-op; added `onOpen`, fixed, added a regression test (`AccountPage` itself is unaffected, it uses uncontrolled mode). **`ui_reviewer` found one real P2, fixed:** the mobile trigger's current-section text used `fontWeight={700}`, matching neither the theme's `subtitle1` (600) nor the prototype's `.trigger-value` (16.5px/600) — an undeclared deviation that made it visually indistinguishable from the bold group headers; removed the override. One P3 left as documented, not fixed: `headerOffset` defaults to `24` vs. the prototype's `16` — a defensible generalisation (the component no longer assumes a fixed app-header height the way jg's original did; no consumer today is sensitive to the exact value). **Rendered verification:** the Browser pane could not composite frames in this session (same recurring environment limitation as `SHELL-3`/`SHELL-4`) — DOM/computed-style substitution via the test suite's own assertions (grid columns, drawer dimensions, z-index, theme-token resolution under two themes) plus static composition comparison against the prototype by both independent reviewers, one of which (`ui_reviewer`) is exactly the review type this repo relies on for design fidelity when a real render isn't obtainable. **Follow-ups named, unchanged:** jg migrates onto this and deletes its own drawer (operator requirement, separate WO); the users table is `AUTH-4`, deliberately not here. |
-| AUTH-4 | The account users table is a desktop table shown unchanged on a phone | Measured 2026-08-11 in cockpit at `innerWidth` 411: `UserListComponent`'s table renders **1053px inside a 325px container** — 728px of overflow. The container has `overflow-x: auto` and **the document does not overflow**, so this is not a broken layout; it is six fixed-width desktop columns (Email 220, Name 180, New 90, Successful Login 163, Role 180, Actions 220) on a phone, with Role and Actions entirely outside the view. | 2026-08-11 | planned | | Split out of DS-11 by operator decision because its fix class differs from the navigation shell's. **No Envelope yet — its WHAT is undecided** and needs a design round: column priority, a card layout below `md`, or a sticky first column with horizontal scroll are three different answers with different costs. `SHELL-2` measured 1045px on 2026-08-08 and it is 1053px today (+8px), so the number is stable — cell padding is already the baseline's `10px 16px`, meaning `THEME-4`/`THEME-5` did not move the rendered density. Reached via `AccountPage` → the `users` tab, which **at least ten apps mount**, so any fix lands estate-wide. Prefix note: `AUTH-*` because the account screen's own surfaces belong to that stream, not because this is authentication. |
 | I18N-1 | One export, so a consumer cannot half-register the kit's strings | ucm exports its UI strings as **six separate bundles** that each app must spread into its own i18n resources by hand. Adopting a component without also adding its bundle renders **a raw key as visible UI text** — no type error, no runtime error. Ship a `uiCoreTranslations` aggregate so that cannot happen, and so a future ucm feature is carried automatically instead of requiring twelve apps to notice. Full order [work-orders/I18N-1.md](work-orders/I18N-1.md). | 2026-08-11 | done | a6d322d | Tier 3 (shared-core + new public export). **Shipped as `2.37.0`, not the planned `2.36.0`** — the concurrent `SHELL-5` release claimed `2.36.0` first; sequenced behind it (see below), no other change to scope. **Landed with seven bundles, not six** — `SHELL-5` (same day, same repo) added a seventh `sectionNavTranslations`, already picked up by the directory-enumerated ratchet before this WO's own commit, so the aggregate never had a six-bundle gap in practice. Codex implemented (`uiCoreTranslations` export + directory-ratcheted `tests/i18nAggregate.test.js` + README line); left the diff uncommitted as instructed. **Concurrent-session collision, real one:** `SHELL-5` was landing in the same working tree at the same time and touched `src/index.js` too; held this WO uncommitted until `SHELL-5`'s commit (`b283c33`) reached `main`, then re-diffed — clean, only this WO's seven-import/aggregate hunk remained. **Test #3 blocked Codex for a real reason, resolved by the operator, not routed around:** the required "every value keeps its `{de,fr,en,sw}` shape" test failed because `messagingTranslations`'s 116 keys have **no `sw` value at all**, a pre-existing gap, not something the merge caused — confirmed directly (`grep -c "'sw':" src/i18n/messagingTranslations.ts` → 0). Operator chose to scope the test down to `{de,fr,en}` for now with `sw` backfill tracked as a follow-up (comment in `tests/i18nAggregate.test.js` records this); key/value fidelity and the collision check are unaffected by the scope-down. **Bundle-size delta measured** (feeds `I18N-2`): +28,943 B raw / +7,327 B gzip for an auth-only app switching from `authTranslations` alone to the (then six-bundle) aggregate. **Independent `reviewer` + `ui_reviewer` (Sonnet, both mandatory, concurrent): no findings from either.** `reviewer` additionally confirmed the seven bundles are namespace-disjoint by prefix so spread order can't shadow a value, and that the ratchet's `fs.readdirSync` + `import.meta.glob` targets stay in sync (mismatch throws explicitly). Scoped tests green: 23/23 (`i18nAggregate`, `authTranslations`, `messagingExports`, `notificationsExports`). No rendered verification — the diff renders nothing. **`fitness-monitor/FM-14` is the still-open acceptance condition**, executed in another repo: fitness-monitor keeps rendering raw `ChartFrame.*` keys until it lands. **Two apps hit by the same mechanism, evidence not hypothesis:** (1) cockpit's `UI-3` adopted `UserMenu` without `userMenuTranslations` and shipped a header button reading the literal `UserMenu.TITLE` — **both independent static reviews were clean**, it was caught only by the rendered click-through, and only by DOM inspection at that since screenshots were unavailable; (2) **fitness-monitor is defective right now** — it imports `ChartFrame` (`BodyHistoryPage.jsx:7`, used `:295`/`:445`) but registers only `authTranslations`, so `ChartFrame.jsx:74`'s `t('ChartFrame.LOADING')` and its empty/error siblings render raw keys. It survived because those are transient edge states. **Estate survey, 2026-08-11:** twelve apps register ucm bundles — jg-ferien all six, cockpit four, hram three, **fitness-monitor one (defective)**, and eight auth-only apps that are correct solely because they have not adopted a second component yet. That is a coincidence with an expiry date, not a safety property. **The merge is safe:** 504 keys across the six bundles with **zero collisions**, verified by enumeration; every key is namespace-prefixed. **The part that makes the fix permanent is the ratchet test** — the aggregate must be asserted against the bundle list **read from `src/i18n/`**, not a hand-written list, so a future bundle that is not folded in fails. Without it the aggregate is correct today and rots exactly as the six exports did. Per-feature exports stay (removing them would break twelve apps for no gain); double-spreading during migration is harmless, which is why the zero-collision property is a test and not a comment. **Rollout is constrained by the one-repo rule** — a WO implements in one repository, so the twelve consumers cannot be migrated from here: `fitness-monitor/FM-14` is written, mandatory and blocked on this release, and **fitness-monitor renders raw keys until it lands** (the operator chose to route the fix through this rollout rather than patch it separately, so it could not be lost between two WOs; the delay is the cost and is recorded rather than left implicit). The other eleven are correct today — prevention, not repair — and ride along when each is next touched. Self-registration via `addResourceBundle` is **deliberately out of scope**: feasible (ucm components use `useTranslation()` against the consumer's own instance and ucm owns no instance), but all twelve consumers flatten into the default namespace with dotted keys, and registering at render time risks a first-paint flash of the raw key — replacing an invisible defect with a visible one. It is `I18N-2`, framed as a bundle-size optimisation rather than a correctness fix, because this WO already closes the hole. |
-| I18N-2 | Self-registering component strings, if the bundle cost justifies it | Have ucm components register their own strings on the consumer's i18n instance (`addResourceBundle` on the instance from `useTranslation()`) instead of relying on the consumer spreading a bundle. Would remove the last of the consumer's i18n obligations and stop auth-only apps shipping strings they never render. | 2026-08-11 | planned | | Tier 3 (shared-core, changes how every consumer resolves strings). **Deliberately NOT a correctness WO** — `I18N-1`'s aggregate closes the defect class; this is a bundle-size optimisation and is scheduled on that basis alone. **Its input is a measurement `I18N-1` must produce**: the built size delta an auth-only app takes on by switching to the aggregate. Source-side that is ~30 KB of strings (the five non-auth bundles are 188 keys against auth's 316), but a source figure is not the answer and a guess here would make this decision unfalsifiable. **Two known hazards, both to be resolved before authoring:** (1) all twelve consumers flatten everything into i18next's DEFAULT namespace with flat dotted keys, so the registration shape has to match exactly or key resolution changes under twelve apps at once; (2) registering during render risks a first-paint flash of the raw key — which would trade an invisible defect for a visible one, the opposite of the point. Feasibility is established: ucm components use `useTranslation()` against the consumer's instance and ucm owns no i18next instance of its own, so there is a real instance to register against. |
+| I18N-2 | Self-registering component strings, if the bundle cost justifies it | Have ucm components register their own strings on the consumer's i18n instance (`addResourceBundle` on the instance from `useTranslation()`) instead of relying on the consumer spreading a bundle. Would remove the last of the consumer's i18n obligations and stop auth-only apps shipping strings they never render. | 2026-08-11 | blocked | | **Deferred by operator decision 2026-08-12** (recorded as `blocked` because the register's status vocabulary has no `deferred`; the blocker is named below). **Its premise did not survive measurement.** `hram/THEME-2` switched from three named bundles to the full aggregate and the built size changed by **−11 bytes**, not the expected increase — because **this package declares no `sideEffects` field** (and no `exports` map), so a bundler must assume every module has side effects and cannot drop unused exports. An auth-only app therefore already ships all seven bundles whatever it imports. That makes this WO's stated input **unmeasurable until tree-shaking works at all**, and it relocates the actual bundle-size lever to a `package.json` change rather than a Tier-3 rework of how twelve consumers resolve strings. Do not author this until `sideEffects` is settled and the delta re-measured against a package that can actually tree-shake. Original framing, kept for the record: Tier 3 (shared-core, changes how every consumer resolves strings); **deliberately NOT a correctness WO** — `I18N-1`'s aggregate closes the defect class. Source-side the non-auth strings are ~30 KB (the five non-auth bundles are 188 keys against auth's 316), but a source figure is not the answer and a guess here would make this decision unfalsifiable. **Two known hazards, both to be resolved before authoring:** (1) all twelve consumers flatten everything into i18next's DEFAULT namespace with flat dotted keys, so the registration shape has to match exactly or key resolution changes under twelve apps at once; (2) registering during render risks a first-paint flash of the raw key — which would trade an invisible defect for a visible one, the opposite of the point. Feasibility is established: ucm components use `useTranslation()` against the consumer's instance and ucm owns no i18next instance of its own, so there is a real instance to register against. |
 | AUTH-4 | The account user list on a phone | Gives `UserListComponent` a card layout below `md` — one card per user, email as the title, the two boolean columns as labelled chips, role select and delete in a divided footer, plus a sort control that replaces the column headers the table loses. Above `md` the table is byte-identical. Prototype: [assets/AUTH-4-user-list-card.html](work-orders/assets/AUTH-4-user-list-card.html). Full spec: [work-orders/AUTH-4.md](work-orders/AUTH-4.md). | 2026-08-11 | planned | | Split out of DS-11 by operator decision; fix class chosen by operator (card list, over sticky-first-column and priority-hide). Envelope only (Approval Gate #1 pending). **Authored and parked by operator decision 2026-08-11 — not queued.** It is built on demand, not as SHELL-5's successor; a fresh session should not dispatch it without the operator saying so. When it does run, it runs **after** `SHELL-5` (same screen, different half). The point of this row is that the measurements above are already done, so nobody re-measures. Prototype in scope, so the two-width rendered gate applies. **Measured 2026-08-11 in cockpit** at `innerWidth` 411 (the mobile preset gives 411, not 375): table **1053px inside a 325px container**, container `overflow-x: auto` and **the document does not overflow** — so it is not a broken layout but a desktop table on a phone, with Role and Actions, the two things the screen exists for, entirely outside the view. **The cheap fix was tested and rejected:** 253px of the width is `New` (90) + `Successful Login` (163), both default-on props that `AccountPage` already forwards and cockpit simply left on — but the four remaining columns are 800px against 325px, so configuration cannot fix it. Column defaults deliberately NOT flipped: that would be a silent estate-wide change. SHELL-2's 1045px from 2026-08-08 still holds (+8px), so THEME-4/5 did not move the density. **Four prototype decisions are load-bearing:** email as title with a muted placeholder when the name is absent (verified: a 47-char address wraps to two lines in a 357px card without overflow); the icon-only flags become labelled chips **because a Tooltip is unreachable on a touch pointer**, so that data is effectively absent today; role and delete in a footer behind a divider with the full 44px target; and a **sort control**, because a card list has no column headers — without it the mobile view silently loses a desktop capability. `extraColumns` render as label/value rows with **no new required field**; `extraRowActions` beyond three must collapse into an overflow menu. Reached via `AccountPage`, which **at least ten apps mount**, and ucm has no staging net. |
 | SHELL-6 | A controlled `SectionNav` with no way to open must not render a trigger | In `mode="mobile"` the built-in trigger renders unconditionally (`SectionNav.jsx:246`), while `handleTriggerClick` calls `onOpen?.()` — so a consumer driving `open` itself without `onOpen` gets a button that is visible, focusable and does nothing. Render the trigger only when a click can open the drawer: uncontrolled, or controlled **and** `onOpen` supplied. Plus the component's **render matrix** written into its doc comment. Full spec: [work-orders/SHELL-6.md](work-orders/SHELL-6.md). | 2026-08-11 | done | f119b70 | **Unblocks `jg-ferien/NAV-37`** (`blocked`, `c627d7b`), same shape as `SHELL-3`→`SHELL-4`. **Operator chose the semantics fix over a `showTrigger` prop** — a prop would leave the dead button as the default for every controlled consumer who has not heard of it, turning a defect into a configuration option; a focusable control that performs no action is wrong on its own terms. Fix: `const canOpenTrigger = !isControlled || Boolean(onOpen)`, wrapping only the `<ButtonBase>` trigger — `children` and `<Drawer>` keep rendering unconditionally in every case. Render-matrix doc comment added above the component per the WO's own framing ("not optional documentation; it is the artefact whose absence caused the defect"). `AccountPage`, the only shipped consumer, is uncontrolled and renders identically. Version `2.37.0` → `2.37.1` (patch, defect fix, no API change). **Codex left the diff uncommitted and did not touch this file, as instructed** — fourth consecutive WO where the explicit warning held. **Required test 1's non-vacuity confirmed**: Codex's own landing note states the new regression test was run against the pre-fix code and failed (dead trigger still in the DOM), then passed after the one-line fix — the Orchestrator did not re-verify this specific claim by checking out the prior commit, but both independent reviewers separately read the old-vs-new JSX and found the claim plausible/consistent. **Orchestrator's own verification:** scoped tests 47/47 green, `tsc` clean. Independent `reviewer` + `ui_reviewer` (Sonnet, both mandatory) ran concurrently — **both came back clean, no findings, no fix required.** `reviewer` confirmed the condition is keyed correctly (not on `open`'s value, avoiding the trap the WO's own test 3 exists to catch), `children`/`Drawer` stay unconditional, desktop path untouched, and the render-matrix comment matches the Envelope's table exactly. `ui_reviewer` confirmed the trigger's removal is genuine (conditional JSX unmount, not a CSS-hidden trick left in the accessibility tree/tab order) and no restyle occurred as a side effect; noted two non-blocking residual observations, not fixed: a hypothetical layout-shift if a consumer dynamically toggled `onOpen` on/off at runtime (no current or planned consumer does this), and `resolvedEyebrow`/`resolvedTitle` computed unconditionally even when unused (harmless). No rendered gate needed per the WO's own reasoning — the change is a DOM absence fact, not an appearance, and the test suite is the correct instrument. |
-| THEME-6 | An app-side check for `sx` values the theme already gives | `THEME-4` made shadowing mechanical for the kit's own components; apps have no equivalent — cockpit alone carries **464 `sx` props across 37 files** (measured 2026-08-11). Adds an exported, source-level, **report-only** check an app calls from its own suite, plus the cockpit count. Full spec: [work-orders/THEME-6.md](work-orders/THEME-6.md). | 2026-08-11 | done | <pending> | DS-18's app-side half. **Codex → Claude fallback**: Codex ran out of workspace credits mid-task (first-hand failure this session, stamped today) — the Orchestrator implemented directly. Author-flip rule applied: independent `reviewer` (Sonnet, mandatory regardless of tier) ran against the Orchestrator's own diff; `ui_reviewer` correctly not spawned, per the WO's own text, since nothing renders. New export `reportRedundantThemeValues(sources, { theme })` in `src/theme/themeCompleteness.js`, reusing existing primitives (`getPath`, `sameValue`, `jsxOpeningTag`, `topLevelSxValue`, `BASELINE_STYLED_MUI_COMPONENTS`, `expandShorthandProperty`) rather than rebuilding them. Attribution by JSX tag name only (root-slot styleOverrides only), literal string/number sx values only — no template literals, identifiers, spreads, or `component={...}` resolution, the bound written open per the WO's instruction. **A real, verified discrepancy in the Envelope's own grounding, corrected here rather than silently chased:** the cited cockpit examples (`borderColor: 'divider'` ×2, `bgcolor: 'background.paper'` ×3, `borderRadius: 1` ×3) all live on `<Box component="button">` in `cockpit/frontend/src/cockpit/ChatView.jsx:75,82,95` — confirmed by direct inspection — which the check's own stated tag-name attribution method cannot catch (`Box` isn't a themed tag, and `component={...}` resolution is explicitly out of scope). The check was NOT widened to chase these numbers. **Run against cockpit's real source** (`cockpit/frontend/src`, 50 `.jsx` files, `theme.js` excluded from the sources passed per the WO's app-side-exclusion instruction — `reportOffPaletteColours`'s own skip pattern left untouched): **27 findings, all `MuiButton.textTransform`, across 4 files** (`BoardView.jsx`, `KnowledgeView.jsx`, `SettingsView.jsx`, one more) — cockpit's buttons redundantly set `sx={{ textTransform: 'none' }}`, matching the baseline's own `MuiButton.styleOverrides.root.textTransform`. This is the honest, real result, reported as a correction to the Envelope's stale grounding, not a match to it. Independent `reviewer` found one real **P2, fixed**: numeric sx values for `borderRadius` and spacing-shorthand aliases were compared raw against the theme's already-resolved CSS value, but MUI actually multiplies a bare number by `theme.shape.borderRadius`/`theme.spacing()` before rendering (e.g. `borderRadius: 8` in sx renders as `8 × shape.borderRadius`, not `8`) — comparing the two raw numbers could produce a **false positive**, exactly the failure mode the WO's own Risks section names as the one to avoid. Fixed by skipping numeric-value comparison entirely for `borderRadius` and every spacing alias (`MUI_NUMERIC_SCALE_PROPERTIES`), erring toward a false negative (the accepted lower bound) rather than a false positive; two regression tests added (the specific false-positive case, plus a corrected version of the "component the theme doesn't style" test, which had used an off-list tag rather than exercising the intended undefined-styleOverride branch — also a reviewer note, fixed). Re-verified: cockpit's 27/27 findings unchanged by the fix (all string-valued `textTransform`, not numeric). Scoped tests 37/37 green, `tsc` clean. Version `2.37.1` → `2.38.0` (minor, new exported API). No rendered gate — static/logic change, no fix shipped anywhere (report-only, per the WO's explicit non-goal). |
+| THEME-6 | An app-side check for `sx` values the theme already gives | `THEME-4` made shadowing mechanical for the kit's own components; apps have no equivalent — cockpit alone carries **464 `sx` props across 37 files** (measured 2026-08-11). Adds an exported, source-level, **report-only** check an app calls from its own suite, plus the cockpit count. Full spec: [work-orders/THEME-6.md](work-orders/THEME-6.md). | 2026-08-11 | done | 637d262 | DS-18's app-side half. **Codex → Claude fallback**: Codex ran out of workspace credits mid-task (first-hand failure this session, stamped today) — the Orchestrator implemented directly. Author-flip rule applied: independent `reviewer` (Sonnet, mandatory regardless of tier) ran against the Orchestrator's own diff; `ui_reviewer` correctly not spawned, per the WO's own text, since nothing renders. New export `reportRedundantThemeValues(sources, { theme })` in `src/theme/themeCompleteness.js`, reusing existing primitives (`getPath`, `sameValue`, `jsxOpeningTag`, `topLevelSxValue`, `BASELINE_STYLED_MUI_COMPONENTS`, `expandShorthandProperty`) rather than rebuilding them. Attribution by JSX tag name only (root-slot styleOverrides only), literal string/number sx values only — no template literals, identifiers, spreads, or `component={...}` resolution, the bound written open per the WO's instruction. **A real, verified discrepancy in the Envelope's own grounding, corrected here rather than silently chased:** the cited cockpit examples (`borderColor: 'divider'` ×2, `bgcolor: 'background.paper'` ×3, `borderRadius: 1` ×3) all live on `<Box component="button">` in `cockpit/frontend/src/cockpit/ChatView.jsx:75,82,95` — confirmed by direct inspection — which the check's own stated tag-name attribution method cannot catch (`Box` isn't a themed tag, and `component={...}` resolution is explicitly out of scope). The check was NOT widened to chase these numbers. **Run against cockpit's real source** (`cockpit/frontend/src`, 50 `.jsx` files, `theme.js` excluded from the sources passed per the WO's app-side-exclusion instruction — `reportOffPaletteColours`'s own skip pattern left untouched): **27 findings, all `MuiButton.textTransform`, across 4 files** (`BoardView.jsx`, `KnowledgeView.jsx`, `SettingsView.jsx`, one more) — cockpit's buttons redundantly set `sx={{ textTransform: 'none' }}`, matching the baseline's own `MuiButton.styleOverrides.root.textTransform`. This is the honest, real result, reported as a correction to the Envelope's stale grounding, not a match to it. Independent `reviewer` found one real **P2, fixed**: numeric sx values for `borderRadius` and spacing-shorthand aliases were compared raw against the theme's already-resolved CSS value, but MUI actually multiplies a bare number by `theme.shape.borderRadius`/`theme.spacing()` before rendering (e.g. `borderRadius: 8` in sx renders as `8 × shape.borderRadius`, not `8`) — comparing the two raw numbers could produce a **false positive**, exactly the failure mode the WO's own Risks section names as the one to avoid. Fixed by skipping numeric-value comparison entirely for `borderRadius` and every spacing alias (`MUI_NUMERIC_SCALE_PROPERTIES`), erring toward a false negative (the accepted lower bound) rather than a false positive; two regression tests added (the specific false-positive case, plus a corrected version of the "component the theme doesn't style" test, which had used an off-list tag rather than exercising the intended undefined-styleOverride branch — also a reviewer note, fixed). Re-verified: cockpit's 27/27 findings unchanged by the fix (all string-valued `textTransform`, not numeric). Scoped tests 37/37 green, `tsc` clean. Version `2.37.1` → `2.38.0` (minor, new exported API). No rendered gate — static/logic change, no fix shipped anywhere (report-only, per the WO's explicit non-goal). |

package/dist/components/SoftChip.js

@@ -0,0 +1,69 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Chip, Tooltip, Typography } from '@mui/material';
+import { alpha, darken, useTheme } from '@mui/material/styles';
+/**
+ * A soft tinted annotation chip -- two variants (`caveat`, `status`), four semantic tones. Colour
+ * is derived from `theme.palette[tone]` (fill `alpha(main, .12)`, border `alpha(main, .30)`, text
+ * and dot `darken(main, .3)`) rather than restated as a literal, so all four tones track the theme
+ * and pass AA against the blended fill.
+ *
+ * Promoted from two independent builds (hram's `ResearchComponents/SoftChip.jsx`, the inline lane
+ * pill in cockpit's `BoardView.jsx`). `status` uses the baseline's `overline` typography variant --
+ * the second build (cockpit) had already converged on 11/600, uppercase, .4px tracking, which is
+ * `overline` in all but the weight step, so this satisfies the kit's shadow-check without a new
+ * baseline variant. `caveat` keeps its raw 12/500 -- there is no baseline variant for it (`caption`
+ * is 12/400) and adding one is a baseline decision that does not belong in this promotion; the
+ * corresponding kitSxRegistry entry carries a stated exemption rather than a silent one.
+ */
+const TINT = 0.12;
+const BORDER_TINT = 0.3;
+export const SOFT_CHIP_ROOT_SX = {
+    height: 'auto',
+};
+export const SOFT_CHIP_CAVEAT_SX = {
+    borderRadius: 1,
+    fontSize: 12,
+    fontWeight: 500,
+};
+export const SOFT_CHIP_STATUS_SX = {
+    borderRadius: '999px',
+};
+export default function SoftChip(_a) {
+    var _b;
+    var { label, tone = 'warning', variant = 'caveat', icon, border = true, title } = _a, rest = __rest(_a, ["label", "tone", "variant", "icon", "border", "title"]);
+    const theme = useTheme();
+    const palette = (_b = theme.palette[tone]) !== null && _b !== void 0 ? _b : theme.palette.warning;
+    const isStatus = variant === 'status';
+    const dotColor = darken(palette.main, 0.3);
+    const chip = (_jsx(Chip, Object.assign({ size: "small", label: isStatus ? (_jsx(Typography, { variant: "overline", component: "span", sx: { color: 'inherit' }, children: label })) : label, icon: icon !== null && icon !== void 0 ? icon : (_jsx(Box, { component: "span", sx: {
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                bgcolor: dotColor,
+                flex: 'none',
+            } })), sx: [
+            SOFT_CHIP_ROOT_SX,
+            isStatus ? SOFT_CHIP_STATUS_SX : SOFT_CHIP_CAVEAT_SX,
+            {
+                bgcolor: alpha(palette.main, TINT),
+                color: darken(palette.main, 0.3),
+                border: '1px solid',
+                borderColor: border ? alpha(palette.main, BORDER_TINT) : 'transparent',
+                cursor: title ? 'help' : 'default',
+                '& .MuiChip-label': { px: 1, py: 0.5 },
+                '& .MuiChip-icon': { ml: 1, mr: -0.5 },
+            },
+        ] }, rest)));
+    return title ? (_jsx(Tooltip, { title: title, enterTouchDelay: 0, children: chip })) : (chip);
+}

package/dist/components/StatTile.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+/**
+ * A small bordered KPI tile: muted label, one bold tabular value, optional caption.
+ * Promoted from two independent builds (hram's `ResearchComponents/StatTile.jsx`, the inline
+ * version in fitness-monitor's `BodyHistoryPage.jsx`) -- `flex: 1` with a `minWidth` floor covers
+ * both builds' row behaviours with one rule, and `tabular-nums` is unconditional so a row of
+ * tiles reads as a row.
+ */
+export default function StatTile({ label, value, caption, accent = false, children, minWidth = 120 }) {
+    return (_jsxs(Box, { sx: {
+            flex: 1,
+            minWidth,
+            border: '1px solid',
+            borderColor: accent ? 'primary.main' : 'divider',
+            borderWidth: accent ? 2 : 1,
+            borderRadius: 1,
+            p: { xs: 1, sm: 1.5 },
+        }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", children: label }), value !== undefined && (_jsx(Typography, { variant: "h5", component: "div", sx: { fontVariantNumeric: 'tabular-nums' }, children: value })), caption && (_jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", children: caption })), children] }));
+}

package/dist/index.js

@@ -39,6 +39,8 @@ export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCar
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
 export { MobileBottomNav } from './components/MobileBottomNav';
+export { default as StatTile } from './components/StatTile';
+export { default as SoftChip } from './components/SoftChip';
 // --- 6. Charts ---
 export { ChartFrame } from './components/charts/ChartFrame';
 export { BarChart } from './components/charts/BarChart';

package/dist/theme/kitSxRegistry.js

@@ -12,6 +12,7 @@ import { QR_SIGNUP_MANAGER_ALERT_SX } from '../components/QrSignupManager';
 import { QR_SIGNUP_VALIDITY_ALERT_SX, QR_SIGNUP_VALIDITY_BUTTON_SX, QR_SIGNUP_VALIDITY_FIELD_SX, } from '../components/QrSignupValidityManager';
 import { REGISTRATION_METHODS_ALERT_SX, REGISTRATION_METHODS_INFO_SX, } from '../components/RegistrationMethodsManager';
 import { SECURITY_ALERT_SX, SECURITY_DIVIDER_SX } from '../components/SecurityComponent';
+import { SOFT_CHIP_CAVEAT_SX, SOFT_CHIP_ROOT_SX, SOFT_CHIP_STATUS_SX, } from '../components/SoftChip';
 import { SUPPORT_RECOVERY_AGENT_BUTTON_SX, SUPPORT_RECOVERY_AGENT_PAPER_SX, SUPPORT_RECOVERY_ALERT_SX, } from '../components/SupportRecoveryRequestsTab';
 import { USER_INVITE_ACTION_SX, USER_INVITE_ALERT_SX } from '../components/UserInviteComponent';
 import { USER_LIST_ACTION_SX, USER_LIST_ALERT_SX, USER_LIST_BODY_CELL_SX, USER_LIST_EMPTY_CELL_SX, USER_LIST_HEADER_CELL_SX, } from '../components/UserListComponent';
@@ -91,6 +92,9 @@ const SX_EXPORTS = {
     SECURITY_DIVIDER_SX,
     SECTION_NAV_DRAWER_PAPER_SX,
     SECTION_NAV_GROUP_PAPER_SX,
+    SOFT_CHIP_CAVEAT_SX,
+    SOFT_CHIP_ROOT_SX,
+    SOFT_CHIP_STATUS_SX,
     SIGNUP_CONFIRM_PAGE_ALERT_SX,
     SIGN_UP_PAGE_ALERT_SX,
     SUPPORT_RECOVERY_AGENT_BUTTON_SX,
@@ -151,6 +155,9 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('RegistrationMethodsManager.info', 'MuiAlert', REGISTRATION_METHODS_INFO_SX),
     entry('SecurityComponent.alert', 'MuiAlert', SECURITY_ALERT_SX),
     entry('SecurityComponent.divider', 'MuiDivider', SECURITY_DIVIDER_SX),
+    entry('SoftChip.root', 'MuiChip', SOFT_CHIP_ROOT_SX),
+    entry('SoftChip.caveat', 'MuiChip', SOFT_CHIP_CAVEAT_SX),
+    entry('SoftChip.status', 'MuiChip', SOFT_CHIP_STATUS_SX),
     entry('SupportRecoveryRequestsTab.agentPaper', 'MuiPaper', SUPPORT_RECOVERY_AGENT_PAPER_SX),
     entry('SupportRecoveryRequestsTab.alert', 'MuiAlert', SUPPORT_RECOVERY_ALERT_SX),
     entry('SupportRecoveryRequestsTab.agentAction', 'MuiButton', SUPPORT_RECOVERY_AGENT_BUTTON_SX),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.38.0",
+  "version": "2.39.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/components/SoftChip.jsx

@@ -0,0 +1,93 @@
+import { Box, Chip, Tooltip, Typography } from '@mui/material';
+import { alpha, darken, useTheme } from '@mui/material/styles';
+
+/**
+ * A soft tinted annotation chip -- two variants (`caveat`, `status`), four semantic tones. Colour
+ * is derived from `theme.palette[tone]` (fill `alpha(main, .12)`, border `alpha(main, .30)`, text
+ * and dot `darken(main, .3)`) rather than restated as a literal, so all four tones track the theme
+ * and pass AA against the blended fill.
+ *
+ * Promoted from two independent builds (hram's `ResearchComponents/SoftChip.jsx`, the inline lane
+ * pill in cockpit's `BoardView.jsx`). `status` uses the baseline's `overline` typography variant --
+ * the second build (cockpit) had already converged on 11/600, uppercase, .4px tracking, which is
+ * `overline` in all but the weight step, so this satisfies the kit's shadow-check without a new
+ * baseline variant. `caveat` keeps its raw 12/500 -- there is no baseline variant for it (`caption`
+ * is 12/400) and adding one is a baseline decision that does not belong in this promotion; the
+ * corresponding kitSxRegistry entry carries a stated exemption rather than a silent one.
+ */
+const TINT = 0.12;
+const BORDER_TINT = 0.3;
+
+export const SOFT_CHIP_ROOT_SX = {
+  height: 'auto',
+};
+
+export const SOFT_CHIP_CAVEAT_SX = {
+  borderRadius: 1,
+  fontSize: 12,
+  fontWeight: 500,
+};
+
+export const SOFT_CHIP_STATUS_SX = {
+  borderRadius: '999px',
+};
+
+export default function SoftChip({
+  label,
+  tone = 'warning',
+  variant = 'caveat',
+  icon,
+  border = true,
+  title,
+  ...rest
+}) {
+  const theme = useTheme();
+  const palette = theme.palette[tone] ?? theme.palette.warning;
+  const isStatus = variant === 'status';
+  const dotColor = darken(palette.main, 0.3);
+
+  const chip = (
+    <Chip
+      size="small"
+      label={isStatus ? (
+        <Typography variant="overline" component="span" sx={{ color: 'inherit' }}>
+          {label}
+        </Typography>
+      ) : label}
+      icon={icon ?? (
+        <Box
+          component="span"
+          sx={{
+            width: 6,
+            height: 6,
+            borderRadius: '50%',
+            bgcolor: dotColor,
+            flex: 'none',
+          }}
+        />
+      )}
+      sx={[
+        SOFT_CHIP_ROOT_SX,
+        isStatus ? SOFT_CHIP_STATUS_SX : SOFT_CHIP_CAVEAT_SX,
+        {
+          bgcolor: alpha(palette.main, TINT),
+          color: darken(palette.main, 0.3),
+          border: '1px solid',
+          borderColor: border ? alpha(palette.main, BORDER_TINT) : 'transparent',
+          cursor: title ? 'help' : 'default',
+          '& .MuiChip-label': { px: 1, py: 0.5 },
+          '& .MuiChip-icon': { ml: 1, mr: -0.5 },
+        },
+      ]}
+      {...rest}
+    />
+  );
+
+  return title ? (
+    <Tooltip title={title} enterTouchDelay={0}>
+      {chip}
+    </Tooltip>
+  ) : (
+    chip
+  );
+}

package/src/components/StatTile.jsx

@@ -0,0 +1,39 @@
+import { Box, Typography } from '@mui/material';
+
+/**
+ * A small bordered KPI tile: muted label, one bold tabular value, optional caption.
+ * Promoted from two independent builds (hram's `ResearchComponents/StatTile.jsx`, the inline
+ * version in fitness-monitor's `BodyHistoryPage.jsx`) -- `flex: 1` with a `minWidth` floor covers
+ * both builds' row behaviours with one rule, and `tabular-nums` is unconditional so a row of
+ * tiles reads as a row.
+ */
+export default function StatTile({ label, value, caption, accent = false, children, minWidth = 120 }) {
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        minWidth,
+        border: '1px solid',
+        borderColor: accent ? 'primary.main' : 'divider',
+        borderWidth: accent ? 2 : 1,
+        borderRadius: 1,
+        p: { xs: 1, sm: 1.5 },
+      }}
+    >
+      <Typography variant="caption" color="text.secondary" display="block">
+        {label}
+      </Typography>
+      {value !== undefined && (
+        <Typography variant="h5" component="div" sx={{ fontVariantNumeric: 'tabular-nums' }}>
+          {value}
+        </Typography>
+      )}
+      {caption && (
+        <Typography variant="caption" color="text.secondary" display="block">
+          {caption}
+        </Typography>
+      )}
+      {children}
+    </Box>
+  );
+}

package/src/index.js

@@ -63,6 +63,8 @@ export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCar
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
 export { MobileBottomNav } from './components/MobileBottomNav';
+export { default as StatTile } from './components/StatTile';
+export { default as SoftChip } from './components/SoftChip';
 
 // --- 6. Charts ---
 export { ChartFrame } from './components/charts/ChartFrame';

package/src/theme/kitSxRegistry.js

@@ -41,6 +41,11 @@ import {
   REGISTRATION_METHODS_INFO_SX,
 } from '../components/RegistrationMethodsManager';
 import { SECURITY_ALERT_SX, SECURITY_DIVIDER_SX } from '../components/SecurityComponent';
+import {
+  SOFT_CHIP_CAVEAT_SX,
+  SOFT_CHIP_ROOT_SX,
+  SOFT_CHIP_STATUS_SX,
+} from '../components/SoftChip';
 import {
   SUPPORT_RECOVERY_AGENT_BUTTON_SX,
   SUPPORT_RECOVERY_AGENT_PAPER_SX,
@@ -148,6 +153,9 @@ const SX_EXPORTS = {
   SECURITY_DIVIDER_SX,
   SECTION_NAV_DRAWER_PAPER_SX,
   SECTION_NAV_GROUP_PAPER_SX,
+  SOFT_CHIP_CAVEAT_SX,
+  SOFT_CHIP_ROOT_SX,
+  SOFT_CHIP_STATUS_SX,
   SIGNUP_CONFIRM_PAGE_ALERT_SX,
   SIGN_UP_PAGE_ALERT_SX,
   SUPPORT_RECOVERY_AGENT_BUTTON_SX,
@@ -213,6 +221,9 @@ export const KIT_COMPONENT_SX_REGISTRY = [
   entry('RegistrationMethodsManager.info', 'MuiAlert', REGISTRATION_METHODS_INFO_SX),
   entry('SecurityComponent.alert', 'MuiAlert', SECURITY_ALERT_SX),
   entry('SecurityComponent.divider', 'MuiDivider', SECURITY_DIVIDER_SX),
+  entry('SoftChip.root', 'MuiChip', SOFT_CHIP_ROOT_SX),
+  entry('SoftChip.caveat', 'MuiChip', SOFT_CHIP_CAVEAT_SX),
+  entry('SoftChip.status', 'MuiChip', SOFT_CHIP_STATUS_SX),
   entry('SupportRecoveryRequestsTab.agentPaper', 'MuiPaper', SUPPORT_RECOVERY_AGENT_PAPER_SX),
   entry('SupportRecoveryRequestsTab.alert', 'MuiAlert', SUPPORT_RECOVERY_ALERT_SX),
   entry('SupportRecoveryRequestsTab.agentAction', 'MuiButton', SUPPORT_RECOVERY_AGENT_BUTTON_SX),

package/tests/SoftChip.test.jsx

@@ -0,0 +1,105 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ThemeProvider, alpha, darken } from '@mui/material/styles';
+
+import { createAppTheme } from '../src/theme';
+import SoftChip from '../src/components/SoftChip';
+
+const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+const TONES = ['success', 'warning', 'error', 'info'];
+
+function renderChip(props) {
+  return render(<ThemeProvider theme={theme}><SoftChip {...props} /></ThemeProvider>);
+}
+
+function rgb(color) {
+  const probe = document.createElement('div');
+  probe.style.color = color;
+  document.body.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved;
+}
+
+afterEach(() => cleanup());
+
+describe('SoftChip', () => {
+  it.each(TONES)('derives fill/border/text for tone "%s" from the theme, not a literal', (tone) => {
+    renderChip({ label: 'Provisional ranges', tone });
+
+    const chip = screen.getByText('Provisional ranges').closest('.MuiChip-root');
+    const style = window.getComputedStyle(chip);
+    const palette = theme.palette[tone];
+
+    expect(style.backgroundColor).toBe(rgb(alpha(palette.main, 0.12)));
+    expect(style.borderColor).toBe(rgb(alpha(palette.main, 0.3)));
+    expect(style.color).toBe(rgb(darken(palette.main, 0.3)));
+  });
+
+  it('differs between status and caveat in radius and typography', () => {
+    renderChip({ label: 'passed', tone: 'success', variant: 'status' });
+    const statusChip = screen.getByText('passed').closest('.MuiChip-root');
+    const statusLabel = window.getComputedStyle(screen.getByText('passed'));
+    expect(window.getComputedStyle(statusChip).borderRadius).toBe('999px');
+    // status uses the baseline's `overline` variant verbatim -- 11/600, uppercase, .4px tracking
+    expect(statusLabel.textTransform).toBe('uppercase');
+    expect(statusLabel.fontSize).toBe(theme.typography.overline.fontSize);
+    expect(statusLabel.fontWeight).toBe(String(theme.typography.overline.fontWeight));
+    expect(statusLabel.letterSpacing).toBe(theme.typography.overline.letterSpacing);
+
+    cleanup();
+
+    renderChip({ label: 'Provisional ranges', tone: 'warning', variant: 'caveat' });
+    const caveatChip = screen.getByText('Provisional ranges').closest('.MuiChip-root');
+    const caveatLabel = window.getComputedStyle(screen.getByText('Provisional ranges'));
+    expect(window.getComputedStyle(caveatChip).borderRadius).not.toBe('999px');
+    // caveat keeps its raw 12/500 -- the PRIM-1 token delta, deliberately not on a theme variant
+    expect(caveatLabel.fontSize).toBe('12px');
+    expect(caveatLabel.fontWeight).toBe('500');
+  });
+
+  it('defaults the leading element to a dot and swaps it for a passed icon', () => {
+    const { container: withDot } = renderChip({ label: 'passed', tone: 'success', variant: 'status' });
+    expect(withDot.querySelector('.MuiChip-icon')).toBeTruthy();
+
+    cleanup();
+
+    const { container: withIcon } = renderChip({
+      label: 'recurring',
+      tone: 'info',
+      variant: 'status',
+      icon: <span data-testid="custom-icon" />,
+    });
+    expect(withIcon.querySelector('[data-testid="custom-icon"]')).toBeTruthy();
+  });
+
+  it('toggles the border', () => {
+    renderChip({ label: 'failed', tone: 'error', variant: 'status', border: false });
+
+    const chip = screen.getByText('failed').closest('.MuiChip-root');
+    expect(window.getComputedStyle(chip).borderColor).toBe(rgb('transparent'));
+  });
+
+  it('renders title as a tooltip, reachable on a touch pointer with no delay', async () => {
+    renderChip({ label: 'queued', tone: 'info', variant: 'status', title: 'Waiting on the sandbox' });
+
+    expect(screen.queryByText('Waiting on the sandbox')).toBeNull();
+
+    const chip = screen.getByText('queued').closest('.MuiChip-root');
+    fireEvent.touchStart(chip);
+
+    // `enterTouchDelay={0}` is the fix for the AUTH-4 failure mode -- a tooltip a touch pointer
+    // can never trigger. waitFor's default timeout (1000ms) is generous headroom around "no
+    // delay"; a regression to the ~700ms default would still likely pass, so this is a floor, not
+    // a precise timing assertion -- the source is the actual guarantee, this proves it's wired.
+    await waitFor(() => expect(screen.getByText('Waiting on the sandbox')).toBeTruthy());
+  });
+
+  it('omits the tooltip wrapper entirely when there is no title', () => {
+    renderChip({ label: 'queued', tone: 'info', variant: 'status' });
+
+    const chip = screen.getByText('queued').closest('.MuiChip-root');
+    expect(chip.getAttribute('aria-label')).toBeNull();
+  });
+});

package/tests/StatTile.test.jsx

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@mui/material/styles';
+
+import { createAppTheme } from '../src/theme';
+import StatTile from '../src/components/StatTile';
+
+const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+
+function renderTile(props) {
+  return render(<ThemeProvider theme={theme}><StatTile {...props} /></ThemeProvider>);
+}
+
+afterEach(() => cleanup());
+
+describe('StatTile', () => {
+  it('renders label, value and caption', () => {
+    renderTile({ label: 'Coverage at budget', value: '71.4 %', caption: 'of maximum realizable' });
+
+    expect(screen.getByText('Coverage at budget')).toBeTruthy();
+    expect(screen.getByText('71.4 %')).toBeTruthy();
+    expect(screen.getByText('of maximum realizable')).toBeTruthy();
+  });
+
+  it('omits the value row when value is undefined', () => {
+    renderTile({ label: 'Recovered' });
+
+    expect(screen.getByText('Recovered')).toBeTruthy();
+    expect(screen.queryByText('undefined')).toBeNull();
+  });
+
+  it('renders children', () => {
+    renderTile({ label: 'Deaths averted', value: '63.8 %', children: <span>children slot</span> });
+
+    expect(screen.getByText('children slot')).toBeTruthy();
+  });
+
+  it('applies the accent border only when accent is set', () => {
+    const { container: plain } = renderTile({ label: 'Body fat', value: '18.4 %' });
+    const plainStyle = window.getComputedStyle(plain.firstChild);
+    expect(plainStyle.borderWidth).toBe('1px');
+
+    cleanup();
+
+    const { container: accented } = renderTile({ label: 'Lean mass', value: '62.1 kg', accent: true });
+    const accentedStyle = window.getComputedStyle(accented.firstChild);
+    expect(accentedStyle.borderWidth).toBe('2px');
+  });
+
+  it('renders the value with tabular-nums', () => {
+    renderTile({ label: 'theta*', value: '0.8421' });
+
+    const value = screen.getByText('0.8421');
+    expect(window.getComputedStyle(value).fontVariantNumeric).toBe('tabular-nums');
+  });
+});

package/tests/themeCompleteness.test.js

@@ -245,6 +245,22 @@ describe('kit sx disjointness', () => {
           surface: 'UserListComponent.emptyCell.MuiTableCell.py',
           reason: 'The empty-state message intentionally uses more vertical breathing room than the baseline TableCell default.',
         },
+        {
+          surface: 'SoftChip.root.MuiChip.height',
+          reason: 'SoftChip is a small annotation chip, deliberately auto-height rather than the baseline interactive Chip\'s fixed 32px.',
+        },
+        {
+          surface: 'SoftChip.caveat.MuiChip.borderRadius',
+          reason: 'The caveat variant uses the shared square-ish radius token (shape.borderRadius), not the baseline Chip\'s pill radius.',
+        },
+        {
+          surface: 'SoftChip.caveat.MuiChip.fontSize',
+          reason: 'PRIM-1 token delta: caveat text is 12/500, one weight step above the nearest baseline variant (caption, 12/400). Adding a variant for this is an app-level baseline decision out of scope for this promotion; deliberately left unresolved.',
+        },
+        {
+          surface: 'SoftChip.status.MuiChip.borderRadius',
+          reason: 'The status variant is a pill, matching cockpit\'s existing lane-status pill shape, not the baseline Chip\'s default radius.',
+        },
       ],
     }).findings).toEqual([]);
   });