diff --git a/bundle-budget.json b/bundle-budget.json index 607b72b9a..d5c59176a 100644 --- a/bundle-budget.json +++ b/bundle-budget.json @@ -1,5 +1,5 @@ { - "$comment": "Client-bundle budgets, enforced by scripts/check-bundle-budget.mjs (--check) after `next build` in CI. Values are KB gzip and include every emitted lazy route and locale chunk, while route budgets include the shared rootMainFiles baseline. Re-measured at v1.37.2: / 455, /insights 443, /measurements 441, /insights/mood 453, total 3328, baseline 130, lazy catalogs 849. Every per-route ceiling is unchanged. The /insights overview crept a kilobyte over its 445 ceiling when the ECG teaser began importing its overview cap from the classification module, dragging that module's label map and helpers into the eager page; the cap now lives in its own value-only module, and the Health Score's single provenance entry is split out of the full metric-provenance map, so the overview imports the bare number and citation it renders rather than every metric's label map behind them. Both are back under 445 with room to spare. The 42 KB aggregate rise from 3286 (v1.35.0) is all locale-catalog strings: v1.36 and v1.37 added the encounter, mood-context, mood-prognosis, practitioner, workout-batch and account-sharing surfaces, and their copy lands across the six locale catalogs the whole-build sum counts independently (804 to 849 KB). The non-catalog client chunks are flat against v1.35.0, so nothing a person downloads on a given route grew beyond its own ceiling. The aggregate cap therefore moves from 3310 to 3352 (24 KB headroom, matching the previous margin); per-route ceilings, the static-catalog guard and the one-Recharts-chunk guard remain unchanged. v1.37.4's honest-error-state charge then added recoverable read-failure handling to thirteen surfaces (the shared QueryErrorCard and QueryErrorRow primitives plus an isError branch per surface) and rewrote the MCP scope note and the managed-record error copy across the six locales; the measured total rose to 3404 while every per-route ceiling stayed met (/page 457, /insights 445, /measurements 443, /insights/mood 455). The aggregate cap moves from 3352 to 3428, keeping the same margin; nothing a person downloads on a given route grew beyond its ceiling. v1.37.15's async-truth charge then added the refresh settling state with its two-locale-key copy, the index-outcome plain-words line (seven keys across the six catalogs) and the reindex-count wiring; the measured total rose to 3429 while every per-route ceiling stayed met (/page 456, /insights 445, /measurements 442, /insights/mood 455). The aggregate cap moves from 3428 to 3452, keeping the same margin; nothing a person downloads on a given route grew beyond its ceiling. v1.37.27 found /insights sitting a few hundred bytes under 445 on main and a few hundred over it on the release branch — the page had been at its ceiling for three releases and the release only had to breathe on it. The weight it was carrying was not its own: the authenticated shell imported one destination predicate from the `@/lib/record-settings` barrel, and the barrel also re-exports the managed settings-patch schemas, so Zod, the module registry and three validation modules rode into the eager bundle of every authenticated route for a function that reads a URL slug. The shell imports the `classification` leaf now. Measured across all 585 client-rendered routes: none grew by a byte, 100 fell, by 4.7 KB at the median and 8.1 KB at the most; /insights 444 to 437, /measurements 442 to 435, / 456 to 450, /insights/mood 455 to 450. The whole-build sum moved the other way, 3451 to 3476, and that direction is the metric rather than the change: the aggregate counts each emitted chunk once, so a graph that leaves the chunk group every route shares gets counted again wherever it lands — here inside the deferred settings chunks that actually use it. Bytes on disk rose 25 KB; bytes a reader downloads only ever fell. The aggregate cap moves from 3452 to 3500, the same 24 KB headroom as the four re-measurements before it. Per-route ceilings keep their old values rather than tightening to the new floor: the CI runner measures each route about 1.5 KB heavier than a local arm64 build does, and a ceiling set from a local number would fail on a build that had not regressed. The static-catalog guard and the one-Recharts-chunk guard remain unchanged. Raised to 3700 at v1.37.32 for the seventh interface language (Korean): the lazy message catalogs went 6->7 chunks (1026 KB gz measured), pushing the aggregate to 3631 against the old 3500. The raise is entirely the new catalog; no route budget moved, and the four eager route ceilings are unchanged and still passing. Most of the aggregate is the dynamic locale-switch and fallback path that a first paint never loads (see issue #253), so this ceiling guards bytes almost no visitor requests; 3700 leaves ~69 KB for ordinary drift until that double-count is cleaned up. v1.38.14 re-measures the four eager routes and changes what the number means. The ceilings had been re-stated but never re-based since v1.37.4, so /insights and /measurements sat within a kilobyte of theirs and / and /insights/mood within one of theirs; e2e run 34043772954 failed on `/insights/page: 445 KB gz exceeds the 445 KB budget` with the other two at 459 of 460, and none of it was a regression anyone had made. A ceiling a route is already touching does not measure the route, it measures whichever dependency bump landed that week. The file states the measured value per route now, plus one drift allowance over it: measured on a local arm64 build at d48bbff01 as / 447, /insights 434, /measurements 433, /insights/mood 447, with a 20 KB allowance, so the effective ceilings are 467 / 454 / 453 / 467 — a raise for all four. The allowance covers the runner delta (the CI runner measures each route a little heavier than a local arm64 build) and ordinary week-to-week drift, while the step change the gate exists for — a statically imported message catalog, a duplicated chart library — is several times larger and still fails. Every run now prints the delta against the baseline, so a route that has crept 15 KB is legible in the log long before it is red; the flat ceiling could only ever say pass or fail. Re-base by re-measuring on a build with nothing else in it and writing the new numbers here with the reason, exactly as a raised ceiling was written before. Raised to 3724 at v1.39.4 on a measured delta, not a feature. The release branch alone measured 3699 KB gz (3698.9) against the 3700 cap, so the ordinary drift room the v1.37.32 raise left had been used up by the releases since; the review fixes on top of it added 1.3 KB gz across the whole build (3700.2), almost all of it new copy in the seven lazy locale catalogs (the total and reused-table labels, the step and chip wording) plus the result-panel states. The four eager routes measured the same on both builds (/ 458, /insights/mood 456, /insights 445, /measurements 442), all inside their ceilings. The aggregate cap moves from 3700 to 3724, the same 24 KB headroom as the re-measurements before it. Raised to 3749 at v1.39.9 on a measured delta. Main measured 3718 KB gz after v1.39.7 and v1.39.8 (unit-aware copy, the phone layouts, the time-zone work and the account-settings restore labels, almost all of it new strings in the seven lazy locale catalogs), leaving 6 KB of the v1.39.4 headroom; the manual workout entry (#1085: the form, its sheet, the delete action and their copy in seven locales) adds about 7 KB and measured 3725. The four eager routes stay inside their drift allowances (/ +12.5, /insights +12.1, /insights/mood +10.2 KB of 20 on main). The aggregate cap moves from 3724 to 3749, the same 24 KB headroom as the re-measurements before it. Raised to 3790 at v1.40.0 on a measured delta. With the background document reads on main (#1103: the run polling hook, the still-reading states and their copy in seven locales), the key backup step and the plain-http sign-in notice (#1104) and the v1.40 fixes (#1106: the duration reader, the marker unit lock, the chart window) each branch measured 3752 KB gz on its own against the 3749 cap; together they add a few KB more. The four eager routes stay inside their drift allowances (/ +18.4, /insights +16.5, /measurements +14.9, /insights/mood +14.7 KB of 20). The aggregate cap moves from 3749 to 3790, about 24 KB above the combined build, the same headroom as the re-measurements before it. Re-based at v1.40.0 when the quick-entry forms began loading on demand. Custom symptoms added a fifth quick-entry form, and with all five forms bundled eagerly every one of the four eager routes measured over its ceiling (/ 472, /insights 457, /insights/mood 468, /measurements 454 KB gz, each 21 to 25 KB over the baseline). Loading the forms on demand brings them to / 429, /insights 368, /insights/mood 379, /measurements 411: 43 to 90 KB less on first load. The four route baselines move down to those measured values, so the gain is protected by the same 20 KB allowance rather than spent. The aggregate moves the other way, 3774 to 4077, for the reason described at v1.37.27: the aggregate counts each emitted chunk once per route group, and on-demand form chunks land in every route group that can open a quick-entry sheet. Bundling the five forms into one shared on-demand module measured the same (4078), so the split is not the cause. The aggregate cap moves from 3790 to 4100. Bytes on disk rose; bytes a reader downloads fell on every eager route. Raised to 4155 at v1.40.2 on a measured delta. The Coach redesign (the right conversation panel, its row menu and the quick-settings overlay, all loaded on demand), the answer action row, the dashboard's Today overview, the document procedure filter and their copy in seven locales took the whole-build sum from 4080 to 4129 KB gz; most of it is new strings in the seven lazy locale catalogs and the on-demand Coach chunks, which a first paint does not load. The four eager routes stay well inside their drift allowances (/ +1.9, /measurements +1.9, /insights/mood +1.4, /insights +1.0 KB of 20). The aggregate cap moves from 4100 to 4155, about 26 KB above the build, the same headroom as before; per-route baselines are unchanged. Raised to 4182 at v1.42.0 on a measured delta. Main measured 4146 KB gz (lazy catalogs 1177, other chunks 2969); the release branch's shared contract change measured 4158 (lazy catalogs 1188, other chunks 2969): the whole 12 KB is new strings in the seven lazy locale catalogs (the Health Connect import card, air quality and pollen, the managed-profile handover and claim, own vaccines, the lab conversion note, the per-type Apple Health list), and no eager route moved (/ +3.6, /measurements +1.5, /insights/mood +1.1, /insights +0.7 KB of 20). The aggregate cap moves from 4155 to 4182, about 24 KB above the build, the same headroom as before; per-route baselines are unchanged. Re-based at v1.42.0 when the settings sections and Zod left the shared bundles. The settings section route imported all twenty-one sections statically; each now loads on its own, and /settings/[section] measured 611 KB gz before and 403 after. The account-access parse that runs on every boot was the shell's only Zod import, about 63 KB gz on every route; it is plain TypeScript now, held to the published schema by an equivalence test, and the layout entry fell from 199 to 136 KB gz. The canonical unit table moved out of the measurement validation module, which took Zod off the routes whose only reason for it was the display transform: /insights 369 to 304, /medications 428 to 365, /labs 400 to 337. Across the 627 client routes 62 fell, none grew by more than 2 KB, and the per-route sum fell by 1844 KB gz. The /insights baseline moves down to 304 and /settings/[section] joins the watched routes at 403, so both gains are held by the same 20 KB allowance rather than spent. The aggregate moves the other way, 4167 to 4311, for the reason described at v1.37.27 and v1.40.0: the aggregate counts each emitted chunk once, and modules that used to sit in one shared chunk are now emitted into each route group that still needs them (the measurement validation module and the unit table into about twenty-five each, the settings sections into their own chunks). Bytes on disk rose; bytes a reader downloads fell on every route that moved. The aggregate cap moves from 4182 to 4335, about 24 KB above the build, the same headroom as before. Raised to 4400 at v1.42.0 on a measured delta. The release branch after its tickets merge measured 4365 KB gz (lazy catalogs 1206, other chunks 3159), already 30 KB over the 4335 cap; the day view and timeline contract adds 10 more (catalogs 1215, other 3160), almost all of it the base copy for the day, the timeline and life events in seven locales. The aggregate cap moves from 4335 to 4400, about 25 KB above the build, the same headroom as before; per-route baselines are unchanged. Raised to 4470 at v1.42.0 on a measured delta. The release branch with the day view, the timeline and their server measured 4386 KB gz (lazy catalogs 1228, other chunks 3158); giving every chart drawn in days the same doors to its day (one shared hook for the click, the touch tooltip's button, the open day's line, the row of day dots and the caption, a shared calendar adapter, a data table under each newly linked chart) measured 4446 (catalogs 1228, other chunks 3218). The 60 KB is the aggregate's double count again: the hook, the data table and the day link are emitted into each chart's own chunk group rather than once. The eager routes moved by a kilobyte or a few (/ +1.6, /measurements +1.7, /settings/[section] +0.8, /insights/mood +4.6, /insights +1.5 KB) and stay inside their allowances. The aggregate cap moves from 4400 to 4470, about 24 KB above the build, the same headroom as before; per-route baselines are unchanged.", + "$comment": "Client-bundle budgets, enforced by scripts/check-bundle-budget.mjs (--check) after `next build` in CI. Values are KB gzip and include every emitted lazy route and locale chunk, while route budgets include the shared rootMainFiles baseline. Re-measured at v1.37.2: / 455, /insights 443, /measurements 441, /insights/mood 453, total 3328, baseline 130, lazy catalogs 849. Every per-route ceiling is unchanged. The /insights overview crept a kilobyte over its 445 ceiling when the ECG teaser began importing its overview cap from the classification module, dragging that module's label map and helpers into the eager page; the cap now lives in its own value-only module, and the Health Score's single provenance entry is split out of the full metric-provenance map, so the overview imports the bare number and citation it renders rather than every metric's label map behind them. Both are back under 445 with room to spare. The 42 KB aggregate rise from 3286 (v1.35.0) is all locale-catalog strings: v1.36 and v1.37 added the encounter, mood-context, mood-prognosis, practitioner, workout-batch and account-sharing surfaces, and their copy lands across the six locale catalogs the whole-build sum counts independently (804 to 849 KB). The non-catalog client chunks are flat against v1.35.0, so nothing a person downloads on a given route grew beyond its own ceiling. The aggregate cap therefore moves from 3310 to 3352 (24 KB headroom, matching the previous margin); per-route ceilings, the static-catalog guard and the one-Recharts-chunk guard remain unchanged. v1.37.4's honest-error-state charge then added recoverable read-failure handling to thirteen surfaces (the shared QueryErrorCard and QueryErrorRow primitives plus an isError branch per surface) and rewrote the MCP scope note and the managed-record error copy across the six locales; the measured total rose to 3404 while every per-route ceiling stayed met (/page 457, /insights 445, /measurements 443, /insights/mood 455). The aggregate cap moves from 3352 to 3428, keeping the same margin; nothing a person downloads on a given route grew beyond its ceiling. v1.37.15's async-truth charge then added the refresh settling state with its two-locale-key copy, the index-outcome plain-words line (seven keys across the six catalogs) and the reindex-count wiring; the measured total rose to 3429 while every per-route ceiling stayed met (/page 456, /insights 445, /measurements 442, /insights/mood 455). The aggregate cap moves from 3428 to 3452, keeping the same margin; nothing a person downloads on a given route grew beyond its ceiling. v1.37.27 found /insights sitting a few hundred bytes under 445 on main and a few hundred over it on the release branch — the page had been at its ceiling for three releases and the release only had to breathe on it. The weight it was carrying was not its own: the authenticated shell imported one destination predicate from the `@/lib/record-settings` barrel, and the barrel also re-exports the managed settings-patch schemas, so Zod, the module registry and three validation modules rode into the eager bundle of every authenticated route for a function that reads a URL slug. The shell imports the `classification` leaf now. Measured across all 585 client-rendered routes: none grew by a byte, 100 fell, by 4.7 KB at the median and 8.1 KB at the most; /insights 444 to 437, /measurements 442 to 435, / 456 to 450, /insights/mood 455 to 450. The whole-build sum moved the other way, 3451 to 3476, and that direction is the metric rather than the change: the aggregate counts each emitted chunk once, so a graph that leaves the chunk group every route shares gets counted again wherever it lands — here inside the deferred settings chunks that actually use it. Bytes on disk rose 25 KB; bytes a reader downloads only ever fell. The aggregate cap moves from 3452 to 3500, the same 24 KB headroom as the four re-measurements before it. Per-route ceilings keep their old values rather than tightening to the new floor: the CI runner measures each route about 1.5 KB heavier than a local arm64 build does, and a ceiling set from a local number would fail on a build that had not regressed. The static-catalog guard and the one-Recharts-chunk guard remain unchanged. Raised to 3700 at v1.37.32 for the seventh interface language (Korean): the lazy message catalogs went 6->7 chunks (1026 KB gz measured), pushing the aggregate to 3631 against the old 3500. The raise is entirely the new catalog; no route budget moved, and the four eager route ceilings are unchanged and still passing. Most of the aggregate is the dynamic locale-switch and fallback path that a first paint never loads (see issue #253), so this ceiling guards bytes almost no visitor requests; 3700 leaves ~69 KB for ordinary drift until that double-count is cleaned up. v1.38.14 re-measures the four eager routes and changes what the number means. The ceilings had been re-stated but never re-based since v1.37.4, so /insights and /measurements sat within a kilobyte of theirs and / and /insights/mood within one of theirs; e2e run 34043772954 failed on `/insights/page: 445 KB gz exceeds the 445 KB budget` with the other two at 459 of 460, and none of it was a regression anyone had made. A ceiling a route is already touching does not measure the route, it measures whichever dependency bump landed that week. The file states the measured value per route now, plus one drift allowance over it: measured on a local arm64 build at d48bbff01 as / 447, /insights 434, /measurements 433, /insights/mood 447, with a 20 KB allowance, so the effective ceilings are 467 / 454 / 453 / 467 — a raise for all four. The allowance covers the runner delta (the CI runner measures each route a little heavier than a local arm64 build) and ordinary week-to-week drift, while the step change the gate exists for — a statically imported message catalog, a duplicated chart library — is several times larger and still fails. Every run now prints the delta against the baseline, so a route that has crept 15 KB is legible in the log long before it is red; the flat ceiling could only ever say pass or fail. Re-base by re-measuring on a build with nothing else in it and writing the new numbers here with the reason, exactly as a raised ceiling was written before. Raised to 3724 at v1.39.4 on a measured delta, not a feature. The release branch alone measured 3699 KB gz (3698.9) against the 3700 cap, so the ordinary drift room the v1.37.32 raise left had been used up by the releases since; the review fixes on top of it added 1.3 KB gz across the whole build (3700.2), almost all of it new copy in the seven lazy locale catalogs (the total and reused-table labels, the step and chip wording) plus the result-panel states. The four eager routes measured the same on both builds (/ 458, /insights/mood 456, /insights 445, /measurements 442), all inside their ceilings. The aggregate cap moves from 3700 to 3724, the same 24 KB headroom as the re-measurements before it. Raised to 3749 at v1.39.9 on a measured delta. Main measured 3718 KB gz after v1.39.7 and v1.39.8 (unit-aware copy, the phone layouts, the time-zone work and the account-settings restore labels, almost all of it new strings in the seven lazy locale catalogs), leaving 6 KB of the v1.39.4 headroom; the manual workout entry (#1085: the form, its sheet, the delete action and their copy in seven locales) adds about 7 KB and measured 3725. The four eager routes stay inside their drift allowances (/ +12.5, /insights +12.1, /insights/mood +10.2 KB of 20 on main). The aggregate cap moves from 3724 to 3749, the same 24 KB headroom as the re-measurements before it. Raised to 3790 at v1.40.0 on a measured delta. With the background document reads on main (#1103: the run polling hook, the still-reading states and their copy in seven locales), the key backup step and the plain-http sign-in notice (#1104) and the v1.40 fixes (#1106: the duration reader, the marker unit lock, the chart window) each branch measured 3752 KB gz on its own against the 3749 cap; together they add a few KB more. The four eager routes stay inside their drift allowances (/ +18.4, /insights +16.5, /measurements +14.9, /insights/mood +14.7 KB of 20). The aggregate cap moves from 3749 to 3790, about 24 KB above the combined build, the same headroom as the re-measurements before it. Re-based at v1.40.0 when the quick-entry forms began loading on demand. Custom symptoms added a fifth quick-entry form, and with all five forms bundled eagerly every one of the four eager routes measured over its ceiling (/ 472, /insights 457, /insights/mood 468, /measurements 454 KB gz, each 21 to 25 KB over the baseline). Loading the forms on demand brings them to / 429, /insights 368, /insights/mood 379, /measurements 411: 43 to 90 KB less on first load. The four route baselines move down to those measured values, so the gain is protected by the same 20 KB allowance rather than spent. The aggregate moves the other way, 3774 to 4077, for the reason described at v1.37.27: the aggregate counts each emitted chunk once per route group, and on-demand form chunks land in every route group that can open a quick-entry sheet. Bundling the five forms into one shared on-demand module measured the same (4078), so the split is not the cause. The aggregate cap moves from 3790 to 4100. Bytes on disk rose; bytes a reader downloads fell on every eager route. Raised to 4155 at v1.40.2 on a measured delta. The Coach redesign (the right conversation panel, its row menu and the quick-settings overlay, all loaded on demand), the answer action row, the dashboard's Today overview, the document procedure filter and their copy in seven locales took the whole-build sum from 4080 to 4129 KB gz; most of it is new strings in the seven lazy locale catalogs and the on-demand Coach chunks, which a first paint does not load. The four eager routes stay well inside their drift allowances (/ +1.9, /measurements +1.9, /insights/mood +1.4, /insights +1.0 KB of 20). The aggregate cap moves from 4100 to 4155, about 26 KB above the build, the same headroom as before; per-route baselines are unchanged. Raised to 4182 at v1.42.0 on a measured delta. Main measured 4146 KB gz (lazy catalogs 1177, other chunks 2969); the release branch's shared contract change measured 4158 (lazy catalogs 1188, other chunks 2969): the whole 12 KB is new strings in the seven lazy locale catalogs (the Health Connect import card, air quality and pollen, the managed-profile handover and claim, own vaccines, the lab conversion note, the per-type Apple Health list), and no eager route moved (/ +3.6, /measurements +1.5, /insights/mood +1.1, /insights +0.7 KB of 20). The aggregate cap moves from 4155 to 4182, about 24 KB above the build, the same headroom as before; per-route baselines are unchanged. Re-based at v1.42.0 when the settings sections and Zod left the shared bundles. The settings section route imported all twenty-one sections statically; each now loads on its own, and /settings/[section] measured 611 KB gz before and 403 after. The account-access parse that runs on every boot was the shell's only Zod import, about 63 KB gz on every route; it is plain TypeScript now, held to the published schema by an equivalence test, and the layout entry fell from 199 to 136 KB gz. The canonical unit table moved out of the measurement validation module, which took Zod off the routes whose only reason for it was the display transform: /insights 369 to 304, /medications 428 to 365, /labs 400 to 337. Across the 627 client routes 62 fell, none grew by more than 2 KB, and the per-route sum fell by 1844 KB gz. The /insights baseline moves down to 304 and /settings/[section] joins the watched routes at 403, so both gains are held by the same 20 KB allowance rather than spent. The aggregate moves the other way, 4167 to 4311, for the reason described at v1.37.27 and v1.40.0: the aggregate counts each emitted chunk once, and modules that used to sit in one shared chunk are now emitted into each route group that still needs them (the measurement validation module and the unit table into about twenty-five each, the settings sections into their own chunks). Bytes on disk rose; bytes a reader downloads fell on every route that moved. The aggregate cap moves from 4182 to 4335, about 24 KB above the build, the same headroom as before. Raised to 4400 at v1.42.0 on a measured delta. The release branch after its tickets merge measured 4365 KB gz (lazy catalogs 1206, other chunks 3159), already 30 KB over the 4335 cap; the day view and timeline contract adds 10 more (catalogs 1215, other 3160), almost all of it the base copy for the day, the timeline and life events in seven locales. The aggregate cap moves from 4335 to 4400, about 25 KB above the build, the same headroom as before; per-route baselines are unchanged. Raised to 4470 at v1.42.0 on a measured delta. The release branch with the day view, the timeline and their server measured 4386 KB gz (lazy catalogs 1228, other chunks 3158); giving every chart drawn in days the same doors to its day (one shared hook for the click, the touch tooltip's button, the open day's line, the row of day dots and the caption, a shared calendar adapter, a data table under each newly linked chart) measured 4446 (catalogs 1228, other chunks 3218). The 60 KB is the aggregate's double count again: the hook, the data table and the day link are emitted into each chart's own chunk group rather than once. The eager routes moved by a kilobyte or a few (/ +1.6, /measurements +1.7, /settings/[section] +0.8, /insights/mood +4.6, /insights +1.5 KB) and stay inside their allowances. The aggregate cap moves from 4400 to 4470, about 24 KB above the build, the same headroom as before; per-route baselines are unchanged. Raised to 4760 at v1.42.0 on a measured delta, the other way round from a feature: the day panel and the date field's calendar left the first load. The day view (its scores, sections and calendar) now loads when a day first opens, not with the shell, and the date field loads react-day-picker and the seven date-fns locales when its popover first opens. Every watched route fell: / 460 to 420, /measurements 439 to 398, /insights/mood 438 to 395, /settings/[section] 432 to 387, /insights 360 to 317 KB gz, all five back under their unchanged ceilings. The aggregate rose from 4426 to 4736 for the reason described at v1.37.27 and v1.40.0: while the day view sat in the shell, the small primitives it shares with the pages (card, table, popover, switch, input, badge, the chart day links) were emitted once into the shared chunk; with the day view on demand, each route group that uses them gets its own copy, and the aggregate counts every copy. Bytes on disk rose; bytes a reader downloads fell on every route. The aggregate cap moves from 4470 to 4760, about 24 KB above the build, the same headroom as before; per-route baselines are unchanged.", "routeBaselineKbGz": { "/page": 429, "/insights/page": 304, @@ -8,6 +8,6 @@ "/settings/[section]/page": 403 }, "routeDriftAllowanceKbGz": 20, - "totalClientKbGz": 4470, + "totalClientKbGz": 4760, "maxRechartsChunks": 1 } diff --git a/e2e/coach-layout.spec.ts b/e2e/coach-layout.spec.ts index 8f061e112..fc4b02a72 100644 --- a/e2e/coach-layout.spec.ts +++ b/e2e/coach-layout.spec.ts @@ -13,15 +13,17 @@ import { mockDay } from "./setup/day-mock"; * * Contracts under test, at 1920, 1440, 1280 and 390 px: * - * 1. From 1280 px the panel docks beside the thread, open on a first visit, - * and the reading column (thread and composer) is exactly as wide with - * the panel open as folded. Folded, the panel keeps a 48 px edge whose - * button (in the place of the open panel's fold control) opens it - * again; the choice survives a reload. The panel is flush with the - * viewport's right edge and runs from the top of the window to the - * bottom; the top bar ends at its left edge and the panel's header - * border is the top bar's. Focus moves between the fold control and - * the edge's button, and Escape inside the open panel folds it. + * 1. From 1280 px the panel docks beside the thread, open on a first visit. + * From 1440 px the reading column (thread and composer) is exactly as + * wide with the panel open as folded; at 1280 the two strips leave the + * open column below its cap, so folding widens it up to the cap. Its 40 px strip stays at the right edge, + * left of the day's, open or not, and never moves: a click opens the + * panel left of the strips, a second click shuts it; the choice + * survives a reload. The panel is flush with the strips and runs from + * the top of the window to the bottom; the top bar ends at its left + * edge and the panel's header border is the top bar's. Focus moves + * between the fold control and the strip, and Escape inside the open + * panel folds it. * 2. New conversation is a round 56 px button in the conversation column, * never over the panel, never over the composer's field, and absent * from the panel's header. @@ -216,7 +218,10 @@ async function mockCoach(page: Page): Promise { const toggle = (page: Page) => page.locator('[data-slot="coach-panel-toggle"]'); const collapse = (page: Page) => page.locator('[data-slot="coach-panel-collapse"]'); -const expand = (page: Page) => page.locator('[data-slot="coach-panel-expand"]'); +const expand = (page: Page) => + page.locator('[data-slot="coach-panel-strip-toggle"]'); +const strip = (page: Page) => page.locator('[data-slot="coach-panel-strip"]'); +const dayStrip = (page: Page) => page.locator('[data-slot="day-strip"]'); const fab = (page: Page) => page.locator('[data-slot="coach-new-chat-fab"]'); const dayPanel = (page: Page) => page.locator('[data-slot="day-panel"]'); const panel = (page: Page) => @@ -247,50 +252,72 @@ async function expectNoSidewaysScroll(page: Page) { } /** - * The docked panel is flush with the window: its right edge is the - * viewport's (no scrollbar gutter beside it), it runs from the top of the - * window to the bottom, the top bar ends at its left edge, its header row's - * bottom border is the top bar's, and its own border is the left one only. + * The docked panel is flush with its strips: the conversations' strip sits + * right of the panel and the day's right of that, against the viewport's + * right edge (no scrollbar gutter beside them). The panel runs from the top + * of the window to the bottom, the top bar ends at its left edge, an open + * panel's header row has the top bar's bottom border, and its own border + * is the left one only. Both strips start below the top bar's band. */ async function expectPanelFlush(page: Page, width: number, height: number) { const geometry = await page.evaluate(() => { - const aside = document.querySelector( + const box = (selector: string) => + document.querySelector(selector)?.getBoundingClientRect() ?? null; + const outer = document.querySelector( '[data-slot="coach-conversations-panel"]', )!; - const inner = aside.firstElementChild as HTMLElement; - // Open, the header row; folded, the edge's band. - const header = - aside.querySelector('[data-slot="coach-conversations-panel-header"]') ?? - aside.querySelector('[data-slot="coach-panel-expand"]')!.parentElement!; - const bar = document.querySelector('[data-slot="top-bar"]')!; + const inner = outer.querySelector("aside"); + const style = inner ? getComputedStyle(inner) : null; const main = document.getElementById("main-content")!; - const style = getComputedStyle(inner); - const box = aside.getBoundingClientRect(); - const barBox = bar.getBoundingClientRect(); + const panel = outer.getBoundingClientRect(); return { - right: box.right, - top: box.top, - bottom: box.bottom, - left: box.left, - headerBottom: header.getBoundingClientRect().bottom, - barBottom: barBox.bottom, - barRight: barBox.right, + panel: { + left: panel.left, + right: panel.right, + top: panel.top, + bottom: panel.bottom, + }, + header: + box('[data-slot="coach-conversations-panel-header"]')?.bottom ?? null, + bar: box('[data-slot="top-bar"]')!, + list: box('[data-slot="coach-panel-strip"]')!, + listButton: box('[data-slot="coach-panel-strip-toggle"]')!, + day: box('[data-slot="day-strip"]')!, + dayDock: box("#day-docked-panel")!, gutter: main.offsetWidth - main.clientWidth, - borders: [ - style.borderTopWidth, - style.borderRightWidth, - style.borderBottomWidth, - style.borderLeftWidth, - ], + borders: style + ? [ + style.borderTopWidth, + style.borderRightWidth, + style.borderBottomWidth, + style.borderLeftWidth, + ] + : null, }; }); - expect(geometry.right).toBe(width); - expect(geometry.top).toBe(0); - expect(geometry.bottom).toBe(height); - expect(geometry.barRight).toBe(geometry.left); - expect(geometry.headerBottom).toBe(geometry.barBottom); + expect(geometry.day.right).toBe(width); + expect(geometry.list.right).toBe(geometry.day.left); + expect(Math.round(geometry.list.width)).toBe(40); + expect(Math.round(geometry.day.width)).toBe(40); + // Conversations, then the day (open or slid to nothing), then the strips. + expect(geometry.panel.right).toBe(geometry.dayDock.left); + expect(geometry.dayDock.right).toBe(geometry.list.left); + expect(geometry.panel.top).toBe(0); + expect(geometry.panel.bottom).toBe(height); + expect(geometry.bar.right).toBe(geometry.panel.left); + // The strips start below the band; the palette's corner stays the bar's. + expect(geometry.listButton.top).toBe(geometry.bar.bottom); + if (geometry.header !== null) { + expect(geometry.header).toBe(geometry.bar.bottom); + expect(geometry.borders).toEqual(["0px", "0px", "0px", "1px"]); + } expect(geometry.gutter).toBe(0); - expect(geometry.borders).toEqual(["0px", "0px", "0px", "1px"]); +} + +/** Where a strip stands on screen. */ +async function stripBox(locator: Locator) { + const box = (await locator.boundingBox())!; + return { x: Math.round(box.x), width: Math.round(box.width) }; } /** @@ -430,7 +457,10 @@ test.describe("Coach page frame", () => { "coach-conversations-panel", ); const open = await columnWidths(page); - expect(open.thread).toBeCloseTo(672, 0); + // The full 672 px column at 1440; at 1280 the two strips take 80 px + // of it and the column stays well above the 560 px floor. + if (width === 1440) expect(open.thread).toBeCloseTo(672, 0); + else expect(open.thread).toBeGreaterThanOrEqual(560); expect(Math.abs(open.composer - open.thread)).toBeLessThanOrEqual(1); // The panel sits right of the column, never over it. const aside = (await panel(page).boundingBox())!; @@ -444,11 +474,16 @@ test.describe("Coach page frame", () => { await expectNoSidewaysScroll(page); await shot(page, testInfo, `coach-frame-${width}-open`); - // Folded: a 48 px edge stays, its button takes the focus, and the - // top bar ends at the edge. + // The strip stands still through a fold and an open. + const stripOpen = await stripBox(strip(page)); + await expect(expand(page)).toHaveAttribute("aria-expanded", "true"); + + // Folded: the panel slides to nothing, the strip takes the focus, and + // the top bar ends at the strips. await collapse(page).click(); await expect(panel(page)).toHaveAttribute("data-state", "closed"); - await waitForWidth(panel(page), 48); + await waitForWidth(panel(page), 0); + expect(await stripBox(strip(page))).toEqual(stripOpen); await expect(expand(page)).toBeFocused(); await expect(expand(page)).toHaveAttribute("aria-expanded", "false"); await expect(expand(page)).toHaveAttribute( @@ -460,8 +495,15 @@ test.describe("Coach page frame", () => { ).toHaveCount(0); await expectPanelFlush(page, width, 900); const closed = await columnWidths(page); - expect(Math.abs(closed.thread - open.thread)).toBeLessThanOrEqual(1); - expect(Math.abs(closed.composer - open.composer)).toBeLessThanOrEqual(1); + if (width === 1440) { + expect(Math.abs(closed.thread - open.thread)).toBeLessThanOrEqual(1); + } else { + // At 1280 the strips leave the open column below its 672 px cap, so + // folding the list gives the column back what it lacked, and no more. + expect(closed.thread).toBeGreaterThanOrEqual(open.thread); + expect(closed.thread).toBeLessThanOrEqual(672 + 1); + } + expect(Math.abs(closed.composer - closed.thread)).toBeLessThanOrEqual(1); await expectNewChatFab(page); await expectNoSidewaysScroll(page); await shot(page, testInfo, `coach-frame-${width}-closed`); @@ -470,8 +512,18 @@ test.describe("Coach page frame", () => { await openCoach(page); await expect(panel(page)).toHaveAttribute("data-state", "closed"); + // A click on the strip opens it, a second click shuts it, and the + // strip does not move either time. + await expand(page).click(); + await expect(panel(page)).toHaveAttribute("data-state", "open"); + expect(await stripBox(strip(page))).toEqual(stripOpen); + await expand(page).click(); + await expect(panel(page)).toHaveAttribute("data-state", "closed"); + await expect(expand(page)).toBeFocused(); + expect(await stripBox(strip(page))).toEqual(stripOpen); + // Opened from the keyboard, focus lands on the fold control; Escape - // from inside folds it again and focus goes back to the edge. + // from inside folds it again and focus goes back to the strip. await expand(page).focus(); await page.keyboard.press("Enter"); await expect(panel(page)).toHaveAttribute("data-state", "open"); @@ -500,15 +552,17 @@ test.describe("Coach page frame", () => { page.locator('[data-slot="coach-message-thread"]').getByText(ANSWER), ).toBeVisible({ timeout: 15_000 }); - // The day opens docked, right of the conversations, which fold to - // their edge for it. + // The day opens docked, left of the strips, and the conversations + // close for it; both strips stay. await expect(dayPanel(page)).toHaveAttribute("data-shell", "docked"); await expect(panel(page)).toHaveAttribute("data-state", "closed"); - await waitForWidth(panel(page), 48); - const rail = (await panel(page).boundingBox())!; + await waitForWidth(panel(page), 0); const dayBox = (await dayPanel(page).boundingBox())!; - expect(rail.x + rail.width).toBeLessThanOrEqual(dayBox.x + 1); - expect(Math.round(dayBox.x + dayBox.width)).toBe(1440); + const listStrip = (await strip(page).boundingBox())!; + expect(Math.round(dayBox.x + dayBox.width)).toBe(Math.round(listStrip.x)); + expect(Math.round(listStrip.x + listStrip.width)).toBe(1400); + await expect(dayStrip(page)).toHaveAttribute("data-state", "open"); + await expectPanelFlush(page, 1440, 900); await expectNewChatFab(page); expect( (await page.locator('[data-slot="coach-page-main"]').boundingBox())! @@ -517,30 +571,28 @@ test.describe("Coach page frame", () => { await expectNoSidewaysScroll(page); await shot(page, testInfo, "coach-frame-1440-day"); - // Opening the conversations folds the day to its edge; focus goes to - // the conversations' fold control, the day is out of the URL, and the - // conversation stays the same. + // Opening the conversations closes the day; its strip keeps the day, + // focus goes to the conversations' fold control, the day is out of the + // URL, and the conversation stays the same. await expand(page).click(); await expect(panel(page)).toHaveAttribute("data-state", "open"); await expect(dayPanel(page)).toHaveCount(0); - await expect(page.locator('[data-slot="day-rail"]')).toHaveAttribute( - "data-day", - day, - ); + await expect(dayStrip(page)).toHaveAttribute("data-day", day); + await expect(dayStrip(page)).toHaveAttribute("data-state", "closed"); await expect(collapse(page)).toBeFocused(); await expect(page).toHaveURL(/\/coach\?c=frame-bp$/); await expectNewChatFab(page); await shot(page, testInfo, "coach-frame-1440-list"); - // And back: the day's edge opens the day, the conversations fold. - await page.locator('[data-slot="day-expand"]').click(); + // And back: the day's strip opens the day, the conversations close. + await page.locator('[data-slot="day-strip-toggle"]').click(); await expect(dayPanel(page)).toHaveAttribute("data-shell", "docked"); await expect(panel(page)).toHaveAttribute("data-state", "closed"); await expect(page).toHaveURL(new RegExp(`c=frame-bp&day=${day}$`)); // Switching conversations keeps the day open. await expand(page).click(); - await page.locator('[data-slot="day-expand"]').click(); + await page.locator('[data-slot="day-strip-toggle"]').click(); await expect(dayPanel(page)).toBeVisible(); await fab(page).click(); await expect(page).toHaveURL(new RegExp(`/coach\\?day=${day}$`)); @@ -565,6 +617,7 @@ test.describe("Coach page frame", () => { const list = (await panel(page).boundingBox())!; const dayBox = (await dayPanel(page).boundingBox())!; expect(list.x + list.width).toBeLessThanOrEqual(dayBox.x + 1); + await expectPanelFlush(page, 1920, 1000); expect( (await page.locator('[data-slot="coach-page-main"]').boundingBox())! .width, diff --git a/e2e/day-doors.spec.ts b/e2e/day-doors.spec.ts index c650f5c81..367e99e46 100644 --- a/e2e/day-doors.spec.ts +++ b/e2e/day-doors.spec.ts @@ -291,9 +291,9 @@ test.describe("the dashboard and the list of all values", () => { }) .toBeLessThanOrEqual(panelBox.x); - // Collapsed, the day keeps a narrow edge; the launcher stays clear of it. + // Folded, the day keeps its strip; the launcher stays clear of it. await page.locator('[data-slot="day-close"]').click(); - const edge = (await page.locator('[data-slot="day-rail"]').boundingBox())!; + const edge = (await page.locator('[data-slot="day-strip"]').boundingBox())!; await expect .poll(async () => { const b = (await fab.boundingBox())!; diff --git a/e2e/day-view.spec.ts b/e2e/day-view.spec.ts index e6d5fadbf..4337d3f33 100644 --- a/e2e/day-view.spec.ts +++ b/e2e/day-view.spec.ts @@ -29,8 +29,8 @@ import { MOBILE_ROUTES_ANALYTE } from "./setup/mobile-routes-fixture"; * the header's `day-date-button` and its `day-date-picker` (days keyed by * `data-date-key`, dotted by `data-entries`, and `day-date-today`), * `chart-plot[data-day-links]`, `chart-tooltip-open-day`, `day-prev` / - * `day-next` / `day-close`, and the collapsed edge `day-rail` (+ `data-day`) - * with its `day-expand`. + * `day-next` / `day-close`, and the docked day's strip `day-strip` + * (+ `data-day`, `data-state`) with its `day-strip-toggle`. */ const panel = (page: Page) => page.locator('[data-slot="day-panel"]'); @@ -145,7 +145,7 @@ test.describe("the day view", () => { await expect(tiles).toHaveCount(2); await expect( scores.locator('[data-slot="day-score"][data-score="healthScore"]'), - ).toHaveAttribute("href", "/insights"); + ).toHaveAttribute("href", "/insights/health-score"); await expect( scores.locator('[data-slot="day-score"][data-score="strain"]'), ).toHaveAttribute("href", "/insights/scores/strain"); @@ -164,7 +164,7 @@ test.describe("the day view", () => { expect(order).toEqual(["day-values", "day-scores", "day-events"]); }); - test("the docked day collapses to an edge and comes back on another page", async ({ + test("the docked day folds beside its strip and comes back on another page", async ({ page, }, testInfo) => { test.skip( @@ -178,14 +178,16 @@ test.describe("the day view", () => { await page.locator('[data-slot="day-close"]').click(); await expect(panel(page)).toHaveCount(0); await expect(page).toHaveURL(/\/mood$/); - // A narrow edge stays, holding the day, and focus waits on its button. - const rail = page.locator('[data-slot="day-rail"]'); - const expand = page.locator('[data-slot="day-expand"]'); + // The strip stays, holding the day, and focus waits on it. + const rail = page.locator('[data-slot="day-strip"]'); + const expand = page.locator('[data-slot="day-strip-toggle"]'); await expect(rail).toHaveAttribute("data-day", day); + await expect(rail).toHaveAttribute("data-state", "closed"); await expect(expand).toBeFocused(); await expect(expand).toHaveAttribute("aria-expanded", "false"); + await expect(expand).toHaveAttribute("aria-controls", "day-docked-panel"); expect(await expand.getAttribute("aria-label")).toMatch(/^Show /); - expect((await rail.boundingBox())!.width).toBeLessThanOrEqual(48); + expect((await rail.boundingBox())!.width).toBeLessThanOrEqual(40); // Another page: the edge is still there and brings the same day back, // from the keyboard too. @@ -200,7 +202,9 @@ test.describe("the day view", () => { ); await expect(page).toHaveURL(new RegExp(`/labs\\?day=${day}$`)); await expect(panel(page).locator("h2").first()).toBeFocused(); - await expect(rail).toHaveCount(0); + // Open, the strip stays where it was and says so. + await expect(rail).toHaveAttribute("data-state", "open"); + await expect(expand).toHaveAttribute("aria-expanded", "true"); }); test("the date opens a calendar; a picked day opens, Today goes to today", async ({ @@ -278,7 +282,7 @@ test.describe("the day view", () => { await expect(panel(page).locator('[data-slot="day-next"]')).toBeDisabled(); }); - test("a sheet closes for good and leaves no edge behind", async ({ + test("a sheet closes for good and leaves no strip behind", async ({ page, }, testInfo) => { const desktop = testInfo.project.name === "chromium-desktop"; @@ -298,7 +302,7 @@ test.describe("the day view", () => { await page.locator('[data-slot="day-close"]').click(); await expect(panel(page)).toHaveCount(0); await expect(page).toHaveURL(/\/mood$/); - await expect(page.locator('[data-slot="day-rail"]')).toHaveCount(0); + await expect(page.locator('[data-slot="day-strip"]')).toHaveCount(0); }); test("a future or malformed ?day= is dropped without a word", async ({ diff --git a/e2e/timeline.spec.ts b/e2e/timeline.spec.ts index 0a5280be6..e2d09e17b 100644 --- a/e2e/timeline.spec.ts +++ b/e2e/timeline.spec.ts @@ -626,7 +626,10 @@ test("an open day stays open from the timeline to another page", async ({ await expect(panel).toHaveCount(0); await page.locator('a[href="/timeline"]').first().click(); await expect(page).toHaveURL(/\/timeline$/); - await expect(page.locator('[data-slot="day-rail"]')).toBeVisible(); + await expect(page.locator('[data-slot="day-strip"]')).toHaveAttribute( + "data-state", + "closed", + ); await expect(panel).toHaveCount(0); }); @@ -775,3 +778,102 @@ test("listing all of a day's values scrolls the panel, never the page", async ({ expect(Math.abs(after.doc - before.doc)).toBeLessThanOrEqual(2); expect(Math.abs(after.main - before.main)).toBeLessThanOrEqual(2); }); + +test("the day's strip stays at the right edge, opens and closes the day, and never moves", async ({ + page, +}, testInfo) => { + await setTimelineModuleOn(page); + await mockTimeline(page, "full", TODAY); + const strip = page.locator('[data-slot="day-strip"]'); + const toggle = page.locator('[data-slot="day-strip-toggle"]'); + const panel = page.locator('[data-slot="day-panel"]'); + const where = async () => { + const box = (await strip.boundingBox())!; + return [box.x, box.y, box.width, box.height].map(Math.round); + }; + const measure = () => + page.evaluate(() => { + const main = document.getElementById("main-content")!; + const doc = document.scrollingElement!; + return { + docSw: doc.scrollWidth - doc.clientWidth, + docSh: doc.scrollHeight - doc.clientHeight, + mainSw: main.scrollWidth - main.clientWidth, + bar: document + .querySelector('[data-slot="top-bar"]')! + .getBoundingClientRect().bottom, + }; + }); + + for (const width of [1280, 1440, 1920]) { + await page.setViewportSize({ width, height: 900 }); + await page.goto("/timeline"); + await expect( + page.locator('[data-slot="timeline-chart"] > svg'), + ).toBeVisible({ timeout: 20_000 }); + + // Closed: the strip is there, at the right edge, below the top bar's + // band, holding today. + await expect(strip).toHaveAttribute("data-state", "closed"); + await expect(toggle).toHaveAttribute("aria-expanded", "false"); + const closed = await where(); + expect(closed[0] + closed[2], `${width}px right edge`).toBe(width); + const before = await measure(); + expect( + Math.round((await toggle.boundingBox())!.y), + `${width}px below the band`, + ).toBe(Math.round(before.bar)); + expect(before.docSw).toBeLessThanOrEqual(0); + expect(before.mainSw).toBeLessThanOrEqual(0); + + // A click opens the day left of the strip; the strip stays put. + await toggle.click(); + await expect(panel).toHaveAttribute("data-shell", "docked"); + await expect(strip).toHaveAttribute("data-state", "open"); + await expect(page.locator("#day-docked-panel")).toHaveAttribute( + "data-state", + "open", + ); + await expect + .poll(async () => { + const box = (await panel.boundingBox())!; + return Math.round(box.x + box.width); + }) + .toBe(closed[0]); + expect(await where()).toEqual(closed); + await expect(panel.locator("h2").first()).toBeFocused(); + const open = await measure(); + expect(open.docSw, `${width}px open, sideways`).toBeLessThanOrEqual(0); + expect(open.mainSw, `${width}px open, sideways`).toBeLessThanOrEqual(0); + expect(open.docSh, `${width}px open, page height`).toBeLessThanOrEqual( + before.docSh, + ); + await testInfo.attach(`day-strip-${width}-open`, { + body: await page.screenshot(), + contentType: "image/png", + }); + + // A second click closes it; focus stays on the strip, which stays put. + await toggle.click(); + await expect(panel).toHaveCount(0); + await expect(strip).toHaveAttribute("data-state", "closed"); + await expect(toggle).toBeFocused(); + expect(await where()).toEqual(closed); + await expect(page).toHaveURL(/\/timeline$/); + } + + // Both themes, open at 1440. + await page.setViewportSize({ width: 1440, height: 900 }); + for (const colorScheme of ["light", "dark"] as const) { + await page.emulateMedia({ colorScheme }); + await page.goto("/timeline"); + await toggle.click(); + await expect(panel).toHaveAttribute("data-shell", "docked"); + await testInfo.attach(`day-strip-1440-${colorScheme}`, { + body: await page.screenshot(), + contentType: "image/png", + }); + await toggle.click(); + await expect(panel).toHaveCount(0); + } +}); diff --git a/src/app/api/dashboard/chart-overlay-prefs/route.ts b/src/app/api/dashboard/chart-overlay-prefs/route.ts index daa87e2ad..35338d159 100644 --- a/src/app/api/dashboard/chart-overlay-prefs/route.ts +++ b/src/app/api/dashboard/chart-overlay-prefs/route.ts @@ -97,39 +97,41 @@ export const PUT = apiHandler(async (request: NextRequest) => { return returnAllZodIssues(parsed.error, 422); } - // Read-modify-write inside a Serializable transaction so two - // concurrent toggles (e.g. user opens two tabs and flips overlays - // on different charts) can't drop one another's update by reading - // the same layout snapshot and clobbering each other on write. + // Read-modify-write under a row lock, so two concurrent toggles (two + // tabs, two charts flipped in quick succession) can neither drop one + // another's update nor fail. `FOR UPDATE` queues every writer for this + // account behind the one holding the row, and the read happens through + // the same `tx`, after the lock, so it sees the previous writer's commit. + // A Serializable transaction used to guard this instead: it kept the + // updates from clobbering each other by aborting all but one of them + // with a serialization failure, which surfaced as a 500. // Resolver normalises legacy / missing fields, so layouts saved // before v1.4.18 pick up the new field with default-empty prefs // without a one-off migration. - await prisma.$transaction( - async (tx) => { - const row = await tx.user.findUnique({ - where: { id: user.id }, - select: { dashboardWidgetsJson: true }, - }); + await prisma.$transaction(async (tx) => { + await tx.$queryRaw`SELECT id FROM users WHERE id = ${user.id} FOR UPDATE`; + const row = await tx.user.findUnique({ + where: { id: user.id }, + select: { dashboardWidgetsJson: true }, + }); - const current = resolveDashboardLayout(row?.dashboardWidgetsJson); - const next: DashboardLayout = { - ...current, - chartOverlayPrefs: { - ...(current.chartOverlayPrefs ?? {}), - [parsed.data.chartKey]: parsed.data.prefs, - }, - }; - const normalized = serializeDashboardLayout(next); + const current = resolveDashboardLayout(row?.dashboardWidgetsJson); + const next: DashboardLayout = { + ...current, + chartOverlayPrefs: { + ...(current.chartOverlayPrefs ?? {}), + [parsed.data.chartKey]: parsed.data.prefs, + }, + }; + const normalized = serializeDashboardLayout(next); - await tx.user.update({ - where: { id: user.id }, - data: { - dashboardWidgetsJson: toJson(normalized), - }, - }); - }, - { isolationLevel: "Serializable" }, - ); + await tx.user.update({ + where: { id: user.id }, + data: { + dashboardWidgetsJson: toJson(normalized), + }, + }); + }); // The partial-update path mutates the same `User.dashboardWidgetsJson` // blob the `/api/dashboard/widgets` GET reads from. Bust the cache so diff --git a/src/app/api/dashboard/widgets/__tests__/route.test.ts b/src/app/api/dashboard/widgets/__tests__/route.test.ts index 0e9ce687f..fc9bc3e33 100644 --- a/src/app/api/dashboard/widgets/__tests__/route.test.ts +++ b/src/app/api/dashboard/widgets/__tests__/route.test.ts @@ -11,6 +11,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest"; import { NextRequest } from "next/server"; +const transactionLock = vi.hoisted(() => vi.fn(async () => [])); const transactionUser = vi.hoisted(() => ({ findUnique: vi.fn(), update: vi.fn(), @@ -123,8 +124,12 @@ beforeEach(() => { // test below the dead-switch block assumes. vi.mocked(isModuleEnabled).mockResolvedValue(true as never); vi.mocked(prisma.$transaction).mockImplementation((async ( - callback: (tx: { user: typeof transactionUser }) => Promise, - ) => callback({ user: transactionUser })) as never); + callback: (tx: { + user: typeof transactionUser; + $queryRaw: typeof transactionLock; + }) => Promise, + ) => + callback({ user: transactionUser, $queryRaw: transactionLock })) as never); }); describe("PUT /api/dashboard/widgets — 422 multi-issue envelope (v1.4.42 W2)", () => { @@ -942,9 +947,13 @@ describe("DELETE /api/dashboard/widgets — web-owned reset scope", () => { expect(res.status).toBe(200); expect(prisma.$transaction).toHaveBeenCalledOnce(); - expect(vi.mocked(prisma.$transaction).mock.calls[0]?.[1]).toEqual({ - isolationLevel: "Serializable", - }); + // A row lock, not Serializable isolation, which failed concurrent + // writers with a serialization error. + expect(vi.mocked(prisma.$transaction).mock.calls[0]?.[1]).toBeUndefined(); + expect(transactionLock).toHaveBeenCalledOnce(); + expect( + (transactionLock.mock.calls[0] as unknown[] | undefined)?.[0], + ).toEqual(expect.arrayContaining([expect.stringContaining("FOR UPDATE")])); expect(prisma.user.findUnique).not.toHaveBeenCalled(); expect(prisma.user.update).not.toHaveBeenCalled(); expect(transactionUser.findUnique).toHaveBeenCalledOnce(); diff --git a/src/app/api/dashboard/widgets/route.ts b/src/app/api/dashboard/widgets/route.ts index 688355b0e..d4d3675b1 100644 --- a/src/app/api/dashboard/widgets/route.ts +++ b/src/app/api/dashboard/widgets/route.ts @@ -494,32 +494,33 @@ export const DELETE = apiHandler(async () => { // dashboard to defaults is the loudest possible version of redecorating it. const { user } = await requireAuth(); - const { normalized, updatedAt } = await prisma.$transaction( - async (tx) => { - const existing = await tx.user.findUnique({ - where: { id: user.id }, - select: { dashboardWidgetsJson: true }, - }); - const existingLayout = resolveDashboardLayout( - existing?.dashboardWidgetsJson, - ); - const normalized = serializeDashboardLayout({ - ...existingLayout, - widgets: DEFAULT_DASHBOARD_LAYOUT.widgets, - enabledHeroItemKinds: DEFAULT_DASHBOARD_LAYOUT.enabledHeroItemKinds, - // A reset brings a hidden top card back. - todayCardVisible: DEFAULT_DASHBOARD_LAYOUT.todayCardVisible, - }); + // Under a row lock rather than Serializable isolation: a reset racing a + // chart-overlay toggle on the same account waits for it instead of + // failing with a serialization error (a 500). + const { normalized, updatedAt } = await prisma.$transaction(async (tx) => { + await tx.$queryRaw`SELECT id FROM users WHERE id = ${user.id} FOR UPDATE`; + const existing = await tx.user.findUnique({ + where: { id: user.id }, + select: { dashboardWidgetsJson: true }, + }); + const existingLayout = resolveDashboardLayout( + existing?.dashboardWidgetsJson, + ); + const normalized = serializeDashboardLayout({ + ...existingLayout, + widgets: DEFAULT_DASHBOARD_LAYOUT.widgets, + enabledHeroItemKinds: DEFAULT_DASHBOARD_LAYOUT.enabledHeroItemKinds, + // A reset brings a hidden top card back. + todayCardVisible: DEFAULT_DASHBOARD_LAYOUT.todayCardVisible, + }); - const updated = await tx.user.update({ - where: { id: user.id }, - data: { dashboardWidgetsJson: toJson(normalized) }, - select: { updatedAt: true }, - }); - return { normalized, updatedAt: updated.updatedAt.toISOString() }; - }, - { isolationLevel: "Serializable" }, - ); + const updated = await tx.user.update({ + where: { id: user.id }, + data: { dashboardWidgetsJson: toJson(normalized) }, + select: { updatedAt: true }, + }); + return { normalized, updatedAt: updated.updatedAt.toISOString() }; + }); annotate({ action: { name: "dashboard.widgets.reset" } }); diff --git a/src/components/day/day-date-picker.tsx b/src/components/day/day-date-picker.tsx index eda77a736..b6c61ba0e 100644 --- a/src/components/day/day-date-picker.tsx +++ b/src/components/day/day-date-picker.tsx @@ -5,7 +5,7 @@ import { useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Calendar, CalendarDayButton } from "@/components/ui/calendar"; import { ResponsiveSheet } from "@/components/ui/responsive-sheet"; -import { resolveDateFnsLocale } from "@/components/ui/date-field"; +import { resolveDateFnsLocale } from "@/components/ui/calendar-locale"; import { Popover, PopoverContent, diff --git a/src/components/day/day-label.ts b/src/components/day/day-label.ts new file mode 100644 index 000000000..3f96cb993 --- /dev/null +++ b/src/components/day/day-label.ts @@ -0,0 +1,25 @@ +"use client"; + +import type { DateKey } from "@/lib/day/contract"; +import { resolveIntlLocale } from "@/lib/format-locale"; +import { useTranslations } from "@/lib/i18n/context"; + +/** + * "Saturday, 3 January 2026", for the day's header, its spoken name and its + * strip. Its own module, so the shell's day layer can name a day without + * loading the day view. + */ +export function useLongDayLabel( + length: "long" | "short" = "long", +): (date: DateKey) => string { + const { locale } = useTranslations(); + const intl = resolveIntlLocale(locale); + return (date: DateKey) => + new Intl.DateTimeFormat(intl, { + weekday: length, + day: "numeric", + month: length, + year: "numeric", + timeZone: "UTC", + }).format(new Date(`${date}T12:00:00.000Z`)); +} diff --git a/src/components/day/day-layer.tsx b/src/components/day/day-layer.tsx index 77d503dc5..b0dcf3899 100644 --- a/src/components/day/day-layer.tsx +++ b/src/components/day/day-layer.tsx @@ -1,5 +1,6 @@ "use client"; +import dynamic from "next/dynamic"; import { usePathname, useSearchParams } from "next/navigation"; import { Suspense, @@ -12,11 +13,17 @@ import { useSyncExternalStore, } from "react"; -import { PanelRightOpen } from "lucide-react"; +import { CalendarDays } from "lucide-react"; +import { + DOCK_SLIDE, + DOCK_SLIDE_MS, + DockStrip, + ShellStrip, + useLingering, +} from "@/components/layout/shell-dock"; import { ShellSidePanel } from "@/components/layout/shell-side-panel"; import { SHELL_HEADER_BAND } from "@/components/layout/shell-metrics"; -import { Button } from "@/components/ui/button"; import { Sheet, SheetContent, @@ -48,13 +55,14 @@ import { takeDayYield, useDayFocus, } from "./day-layer-controller"; -import { parseDayParam, shiftDateKey, withDayHref } from "./day-url"; import { - DayView, - PANEL_TOGGLE, - PANEL_TOGGLE_ICON, - useLongDayLabel, -} from "./day-view"; + parseDayParam, + shiftDateKey, + stripDayOf, + withDayHref, +} from "./day-url"; +import { useLongDayLabel } from "./day-label"; +import type { DayViewProps } from "./day-view"; import { usePrefetchDay } from "./use-day"; import { useTodayKey } from "./use-today-key"; @@ -67,10 +75,12 @@ import { useTodayKey } from "./use-today-key"; * - from 1280 px, a column docked beside the page, the same place and the * same breakpoint as the Coach's conversations panel. Not modal: the * chart beside it stays usable, and another point swaps the day. It is a - * landmark (`complementary`) named by the date. It collapses like a - * sidebar instead of going away: hidden, a narrow edge stays on the - * right with a button that brings the last day back, on this page or any - * other (`last-day.ts` remembers it per browser and account). + * landmark (`complementary`) named by the date. Its strip stays at the + * right edge of the window whether the day is open or not + * (`shell-dock.tsx`): it names the day and opens or closes it, on this + * page or any other (`last-day.ts` remembers the day per browser and + * account; with nothing remembered the strip holds today). The column + * slides open and shut left of the strip the way the conversations do. * - from 768 px, a sheet from the right, modal. * - on a phone, a sheet from the bottom at a bit over half the height, so * the chart stays in view above it; dragging the handle up (or tapping @@ -78,14 +88,36 @@ import { useTodayKey } from "./use-today-key"; * * On `/coach` the day docks too, right of the Coach's conversations: page, * conversations, day. Below 1600 px only one of the two is open at a time; - * opening the day folds the conversations to their edge, and opening the - * conversations folds the day to its edge (`yieldDay`). + * opening the day closes the conversations, and opening the conversations + * closes the day (`yieldDay`). * * The parameter is the state. A date that is not a calendar date, or lies in * the future, is removed from the URL without a word. Collapsing the docked * day removes the parameter like closing does; only the remembered date * stays, and expanding opens it again. */ +export const DAY_PANEL_ID = "day-docked-panel"; + +/** + * The day's content loads when a day first opens (or when the pointer + * reaches the strip), not with the shell: the scores, the calendar and the + * sections are no part of a page until a day is open. Until it arrives the + * frame shows its header band and nothing else. + */ +const loadDayView = () => import("./day-view").then((m) => m.DayView); +function preloadDayView() { + void loadDayView(); +} +const DayView = dynamic(loadDayView, { + ssr: false, + loading: () => ( +
+ ), +}); + export function DayLayerMount() { // `useSearchParams` suspends a statically rendered route until the client // has the URL; the boundary keeps that from blanking the page around it. @@ -205,19 +237,48 @@ function DayLayer() { const shortLabel = useLongDayLabel("short"); const { t } = useTranslations(); const titleId = useId(); - const titleRef = useRef(null); + const titleRef = useRef(null); + // Focus asked for before the day's content had loaded: the heading takes + // it the moment it mounts. + const titleFocusPending = useRef(false); + const attachTitle = useCallback((el: HTMLHeadingElement | null) => { + titleRef.current = el; + if (el && titleFocusPending.current) { + titleFocusPending.current = false; + el.focus({ preventScroll: true }); + } + }, []); + const focusTitle = useCallback(() => { + const el = titleRef.current; + if (el) el.focus({ preventScroll: true }); + else titleFocusPending.current = true; + }, []); const panelRef = useRef(null); - const expandRef = useRef(null); - // Set by the collapse control: focus then lands on the control that - // brings the day back, in the same place, as a sidebar's toggle does. + const stripRef = useRef(null); + // Set by a fold (the header's control, the strip): focus then lands on the + // strip, which brings the day back from the same place. const collapsing = useRef(false); - // The collapsed edge: the docked frame only, and only with a day to bring - // back that is still a day the layer would open. + // The remembered day, while the docked day is shut, if it is still a day + // the layer would open. const railDay = shell === "docked" && date === null && lastDay !== null ? parseDayParam(lastDay, today) : null; + // A page change drops `?day=` before the new page puts the remembered day + // back (below); a day left open stays open through that gap instead of + // sliding shut and open again. + const heldOpen = shell === "docked" && date === null && leftOpen; + const dockedDay = + shell === "docked" ? (date ?? (heldOpen ? railDay : null)) : null; + // The docked column keeps painting the day it showed while it slides shut. + const shownDay = useLingering(dockedDay); + // No slide on arrival: a day restored with the page is simply there. + const [settled, setSettled] = useState(false); + useEffect(() => { + const id = requestAnimationFrame(() => setSettled(true)); + return () => cancelAnimationFrame(id); + }, []); const collapse = useCallback(() => { collapsing.current = true; @@ -253,7 +314,7 @@ function DayLayer() { // (on the arrow the person pressed), and so does a day restored on a // new page. if (before === null && shell === "docked" && !restoring.current) { - titleRef.current?.focus({ preventScroll: true }); + focusTitle(); } restoring.current = false; return; @@ -272,7 +333,7 @@ function DayLayer() { collapsing.current = false; return; } - const rail = expandRef.current; + const rail = stripRef.current; if (collapsing.current && rail) { takeDayTrigger(); rail.focus({ preventScroll: true }); @@ -281,7 +342,7 @@ function DayLayer() { } } collapsing.current = false; - }, [date, shell, owner]); + }, [date, shell, owner, focusTitle]); const onStep = useCallback( (delta: number) => { @@ -347,71 +408,13 @@ function DayLayer() {

); - if (date === null) { - if (railDay === null) return live; - const label = t("day.showPanel", { date: longLabel(railDay) }); - const expand = () => - openDay(railDay, { trigger: expandRef.current ?? undefined }); - return ( - <> - {live} - -
- {/* The top bar's band, so the two bottom borders draw one line; - the control sits where the open day keeps its own. */} -
- -
- {/* The rest of the edge takes a click too and names the day it - holds; the keyboard has the button above. */} - -
- - - ); - } - const view = ( - Title: Parameters[0]["Title"], - extra?: Partial[0]>, + shown: DateKey, + Title: DayViewProps["Title"], + extra?: Partial, ) => ( ); if (shell === "docked") { + // What the strip holds: the open day, else the remembered one, else today. + const stripDay = stripDayOf(date, railDay, today); + const open = dockedDay !== null; + const toggle = () => { + if (open) { + collapse(); + return; + } + openDay(stripDay, { trigger: stripRef.current ?? undefined }); + }; return ( <> {live} - + {shownDay !== null ? ( + + ) : null} +
+ + + ); } + if (date === null) return live; + return ( <> {live} view(SheetTitle, extra)} + render={(extra) => view(date, SheetTitle, extra)} /> ); @@ -472,10 +521,13 @@ function DayLayer() { * and there the chart the person clicked slid away under the pointer by the * height the reflow added above it. Measured after layout, so where the * browser already anchored, the correction is zero and nothing moves twice. + * The column slides, so the page reflows on every frame of the slide; the + * correction follows it frame by frame until the slide has run. */ function useKeepAnchorInView(active: boolean) { const anchor = useRef<{ el: HTMLElement; top: number } | null>(null); const wasActive = useRef(false); + const frame = useRef(0); // Before paint, so the corrected position is the first one drawn. useLayoutEffect(() => { @@ -491,15 +543,28 @@ function useKeepAnchorInView(active: boolean) { ? { el: opened.el, top: opened.top } : null; } - const a = anchor.current; - if (a && a.el.isConnected) { - const delta = a.el.getBoundingClientRect().top - a.top; - if (Math.abs(delta) > 1) main.scrollTop += delta; - a.top = a.el.getBoundingClientRect().top; - } + const held = anchor.current; if (!active) anchor.current = null; + if (!held) return; + const correct = () => { + if (!held.el.isConnected) return; + const delta = held.el.getBoundingClientRect().top - held.top; + if (Math.abs(delta) > 1) main.scrollTop += delta; + held.top = held.el.getBoundingClientRect().top; + }; + correct(); + cancelAnimationFrame(frame.current); + const until = performance.now() + DOCK_SLIDE_MS + 50; + const tick = () => { + correct(); + if (performance.now() < until) + frame.current = requestAnimationFrame(tick); + }; + frame.current = requestAnimationFrame(tick); }, [active]); + useEffect(() => () => cancelAnimationFrame(frame.current), []); + // While the column is open, the page may scroll; the anchor follows. useEffect(() => { if (!active) return; @@ -552,16 +617,17 @@ function returnFocus(fallback?: HTMLElement | null) { function DaySheet({ shell, panelRef, - titleRef, + focusTitle, onDismiss, render, }: { shell: "sheet" | "bottom"; panelRef: React.RefObject; - titleRef: React.RefObject; + /** Focus the day's heading, now or as soon as it has loaded. */ + focusTitle: () => void; /** The person closed the sheet (a swipe down, Escape, the overlay). */ onDismiss: () => void; - render: (extra: Partial[0]>) => React.ReactNode; + render: (extra: Partial) => React.ReactNode; }) { const { t } = useTranslations(); const [full, setFull] = useState(false); @@ -625,7 +691,7 @@ function DaySheet({ data-full={bottom && full ? "true" : undefined} onOpenAutoFocus={(event) => { event.preventDefault(); - titleRef.current?.focus({ preventScroll: true }); + focusTitle(); }} onCloseAutoFocus={(event) => { event.preventDefault(); diff --git a/src/components/day/day-url.ts b/src/components/day/day-url.ts index a679a3bf6..ea3092121 100644 --- a/src/components/day/day-url.ts +++ b/src/components/day/day-url.ts @@ -55,6 +55,19 @@ export function parseDayParam( return isOpenableDay(raw, todayKey) ? raw : null; } +/** + * The day the docked day's strip holds: the open day, else the remembered + * one while the layer would still open it, else today. The strip always + * names a day, so it always has something to open. + */ +export function stripDayOf( + open: DateKey | null, + remembered: string | null, + todayKey: DateKey, +): DateKey { + return open ?? parseDayParam(remembered, todayKey) ?? todayKey; +} + /** `key` moved by `delta` calendar days. */ export function shiftDateKey(key: DateKey, delta: number): DateKey { const anchor = new Date(`${key}T12:00:00.000Z`); diff --git a/src/components/day/day-view.tsx b/src/components/day/day-view.tsx index 38d4a6927..6e290bb49 100644 --- a/src/components/day/day-view.tsx +++ b/src/components/day/day-view.tsx @@ -26,10 +26,10 @@ import { useAuth } from "@/hooks/use-auth"; import { useModuleEnabled } from "@/hooks/use-module-enabled"; import { useRecordCapabilities } from "@/hooks/use-record-capabilities"; import { DAY_QUERY_PARAM, type DateKey } from "@/lib/day/contract"; -import { resolveIntlLocale } from "@/lib/format-locale"; import { useTranslations } from "@/lib/i18n/context"; import { cn } from "@/lib/utils"; +import { useLongDayLabel } from "./day-label"; import { DayDatePicker } from "./day-date-picker"; import type { DayFocus } from "./day-layer-controller"; import { @@ -55,22 +55,6 @@ import { useDayValueFormat } from "./use-day-value-format"; * three frames cannot drift apart. */ -/** "Saturday, 3 January 2026", for the header and the spoken name. */ -export function useLongDayLabel( - length: "long" | "short" = "long", -): (date: DateKey) => string { - const { locale } = useTranslations(); - const intl = resolveIntlLocale(locale); - return (date: DateKey) => - new Intl.DateTimeFormat(intl, { - weekday: length, - day: "numeric", - month: length, - year: "numeric", - timeZone: "UTC", - }).format(new Date(`${date}T12:00:00.000Z`)); -} - export interface DayViewProps { date: DateKey; today: DateKey; diff --git a/src/components/documents/document-bulk-bar.tsx b/src/components/documents/document-bulk-bar.tsx index 26283d67e..08719e408 100644 --- a/src/components/documents/document-bulk-bar.tsx +++ b/src/components/documents/document-bulk-bar.tsx @@ -61,7 +61,7 @@ function VerbLabel({ children }: { children: string }) { // Icon-only again while a day is docked: the bar then shares the width // with the day panel and the labelled row would no longer fit one line. return ( - + {children} ); @@ -116,10 +116,11 @@ export function DocumentBulkBar({ // the bar shows, which is the shell's call, not a width's: a phone // held sideways is wider than `md` and still has the bar. "bg-card border-border shell-desktop:bottom-6 fixed bottom-[calc(env(safe-area-inset-bottom,0px)+5rem)] left-1/2 z-40 -translate-x-1/2", - // v1.42 — while a day is docked on the right, the bar sits against - // the page's right edge instead of the window's centre, clear of the - // day's footer actions and of an expanded sidebar. - "[body:has([data-slot=day-panel][data-shell=docked])_&]:right-[calc(26.25rem+1rem)] [body:has([data-slot=day-panel][data-shell=docked])_&]:left-auto [body:has([data-slot=day-panel][data-shell=docked])_&]:max-w-[calc(100vw-44.25rem)] [body:has([data-slot=day-panel][data-shell=docked])_&]:translate-x-0", + // v1.42 — while a day is docked on the right (its strip open), the + // bar sits against the page's right edge instead of the window's + // centre, clear of the day's footer actions, its strip and an + // expanded sidebar. + "[body:has([data-slot=day-strip][data-state=open])_&]:right-[calc(26.25rem+2.5rem+1rem)] [body:has([data-slot=day-strip][data-state=open])_&]:left-auto [body:has([data-slot=day-strip][data-state=open])_&]:max-w-[calc(100vw-46.75rem)] [body:has([data-slot=day-strip][data-state=open])_&]:translate-x-0", "flex w-[calc(100%-2rem)] max-w-3xl flex-col gap-2 rounded-xl border p-3 shadow-lg", )} > diff --git a/src/components/insights/coach-panel/__tests__/conversations-panel-fold.test.tsx b/src/components/insights/coach-panel/__tests__/conversations-panel-fold.test.tsx index 1e2805559..d49f2a115 100644 --- a/src/components/insights/coach-panel/__tests__/conversations-panel-fold.test.tsx +++ b/src/components/insights/coach-panel/__tests__/conversations-panel-fold.test.tsx @@ -67,10 +67,11 @@ describe("the folded list", () => { "utf8", ); - it("keeps an edge with its button, and sits left of the day", () => { - expect(source).toContain('data-slot="coach-panel-rail"'); - expect(source).toContain('data-slot="coach-panel-expand"'); - expect(source).toContain('dockedOpen ? "w-72" : "w-12"'); + it("slides to nothing, keeps its own strip, and sits left of the day", () => { + expect(source).toContain('slot="coach-panel-strip"'); + expect(source).toContain("order={1}"); + expect(source).toContain('dockedOpen ? "w-72" : "w-0"'); + expect(source).toContain("DOCK_SLIDE"); expect(source).toMatch(/order-1/); }); diff --git a/src/components/insights/coach-panel/conversations-panel.tsx b/src/components/insights/coach-panel/conversations-panel.tsx index 41bd0d228..6c3c66c04 100644 --- a/src/components/insights/coach-panel/conversations-panel.tsx +++ b/src/components/insights/coach-panel/conversations-panel.tsx @@ -2,7 +2,13 @@ import { useEffect, useRef, useState, useSyncExternalStore } from "react"; import Link from "next/link"; -import { PanelRightClose, PanelRightOpen, Target, X } from "lucide-react"; +import { + MessagesSquare, + PanelRightClose, + PanelRightOpen, + Target, + X, +} from "lucide-react"; import { useOpenDay, yieldDay } from "@/components/day/day-layer-controller"; import { Button } from "@/components/ui/button"; @@ -13,6 +19,12 @@ import { SheetDescription, SheetTitle, } from "@/components/ui/sheet"; +import { + DOCK_SLIDE, + DockStrip, + ShellStrip, + useLingering, +} from "@/components/layout/shell-dock"; import { ShellSidePanel } from "@/components/layout/shell-side-panel"; import { SHELL_HEADER_BAND } from "@/components/layout/shell-metrics"; import { TopBarActions } from "@/components/layout/top-bar-actions"; @@ -43,25 +55,27 @@ import { useDeleteCoachConversationWithUndo } from "./use-coach"; * Docked, the panel is a column of the shell beside the content column * (top bar and page): it runs the full height of the window, and the top bar * ends at its left edge. The panel's header row is the top bar's band, so - * the two bottom borders draw one line. It folds like the day beside it: the - * header's first control folds it to a narrow edge, and the edge's button - * (in the same place) opens it again. Folded, the edge names the list. + * the two bottom borders draw one line. Its strip stays at the right edge of + * the window, left of the day's (`shell-dock.tsx`), open or not: a click + * on the strip opens the panel left of the strips and a second click shuts + * it; the header's first control shuts it too. The panel slides open and + * shut (a 200 ms width transition, none under reduced motion). * The header carries the title, a link to Plans, the settings gear and, in * the sheet, a close button. New conversation is not here: it floats in the * conversation itself (`NewChatFab`). * * The day docks right of the panel on this page too (page, conversations, * day). Below 1600 px only one of the two is open: a day opening folds the - * list to its edge without touching the remembered choice, and opening the - * list folds the day to its edge (`yieldDay`). From 1600 px both stay open. + * list without touching the remembered choice, and opening the list closes + * the day (`yieldDay`). From 1600 px both stay open. * * Below 1280 px the panel is a sheet, opened from the toggle at the end of * the top bar. * * Keyboard: Escape folds the docked panel when focus is inside it and * nothing inside (a row menu, the rename field, the settings popover) has - * already claimed the key; focus moves to the edge's button, and opening - * from there lands on the fold control. In the sheet Radix owns Escape, the + * already claimed the key; focus moves to the strip, and opening from the + * strip lands on the fold control. In the sheet Radix owns Escape, the * focus trap and the return. */ export const COACH_PANEL_ID = "coach-conversations-panel"; @@ -121,6 +135,17 @@ export function listYields(state: { ); } +/** + * Whether opening the docked list closes an open day: below 1600 px only one + * of the two is open, and the one the person just opened wins. + */ +export function dayYields(state: { + fitsBoth: boolean; + dayOpen: boolean; +}): boolean { + return !state.fitsBoth && state.dayOpen; +} + /** * Whether the phone sheet is open. A settings deep link opens it only once * the viewport is known: the server and hydration renders take the narrow @@ -263,6 +288,8 @@ export function ConversationsPanel({ const expanded = docked ? dockedOpen : sheetOpen; const collapseRef = useRef(null); const expandRef = useRef(null); + // The list keeps painting while it slides shut. + const shownOpen = useLingering(docked && dockedOpen ? true : null) ?? false; // Where focus goes once the docked panel has folded or opened. const focusAfter = useRef<"collapse" | "expand" | null>(null); useEffect(() => { @@ -282,7 +309,7 @@ export function ConversationsPanel({ setRevealed(false); setOpen(true); // Below 1600 px the day makes room: it folds to its edge. - if (!fitsBoth && openDay !== null) yieldDay(); + if (dayYields({ fitsBoth, dayOpen: openDay !== null })) yieldDay(); } function collapseDocked() { @@ -425,89 +452,65 @@ export function ConversationsPanel({ )} {docked ? ( - - - + icon={MessagesSquare} + onToggle={dockedOpen ? collapseDocked : expandDocked} + /> + + ) : ( {}} + data={{ "data-day": "2026-06-04" }} + />, + ); +} + +describe("DockStrip", () => { + it("is a toggle button for its panel, closed", () => { + const html = strip(false); + expect(html).toContain('data-slot="day-strip"'); + expect(html).toContain('data-state="closed"'); + expect(html).toContain('data-day="2026-06-04"'); + expect(html).toMatch(/]*type="button"/); + expect(html).toContain('data-slot="day-strip-toggle"'); + expect(html).toContain('aria-expanded="false"'); + expect(html).toContain('aria-controls="day-docked-panel"'); + expect(html).toContain('aria-label="Show Thursday, 4 June 2026"'); + // The label reads top to bottom. + expect(html).toContain("[writing-mode:vertical-rl]"); + expect(html).toContain("Thu, 4 Jun 2026"); + }); + + it("says it is open and what a click does then", () => { + const html = strip(true); + expect(html).toContain('data-state="open"'); + expect(html).toContain('aria-expanded="true"'); + expect(html).toContain('aria-label="Hide day"'); + }); + + it("keeps the same shape open and closed, below the top bar's band", () => { + const shape = (html: string) => html.match(/^]*class="([^"]*)"/)![1]; + expect(shape(strip(true))).toBe(shape(strip(false))); + expect(shape(strip(false))).toContain("w-10"); + // The first cell is the band (`SHELL_HEADER_BAND`), empty and hidden. + expect(strip(false)).toMatch( + /^]*> diff --git a/src/components/layout/shell-dock.tsx b/src/components/layout/shell-dock.tsx new file mode 100644 index 000000000..bce15d195 --- /dev/null +++ b/src/components/layout/shell-dock.tsx @@ -0,0 +1,147 @@ +"use client"; + +import { useEffect, useState } from "react"; +import type { LucideIcon } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +import { SHELL_HEADER_BAND } from "./shell-metrics"; +import { createShellSlot } from "./shell-slot"; + +/** + * The docked panels' strips (v1.42): from 1280 px every docked panel (the + * day on every page, the Coach's conversations on `/coach`) keeps its own + * narrow vertical strip at the right edge of the window, visible whether the + * panel is open or not. The strips stand side by side in one column of the + * shell, right of the panels (`ShellSidePanel`), in the same order as their + * panels: conversations (`order-1`), then the day (`order-2`). A panel opens + * to the left of the strips; the strips never move or change shape. + * + * Each strip starts below the top bar's band. The band above them is empty + * and draws the top bar's bottom line on through, so nothing in the strips + * meets the command palette at the end of the top bar. + */ +const strips = createShellSlot("shell-strips"); + +/** Where the shell paints the strips. Empty unless a docked panel fills it. */ +export const ShellStripOutlet = strips.Outlet; + +/** Render a strip into the shell's strip column. */ +export const ShellStrip = strips.Portal; + +/** + * The slide every docked panel shares: the panel's box animates its width + * between the open column and nothing, and its content keeps the open width, + * pinned to the box's left edge, so it slides out under the strip instead of + * squeezing. The Coach's conversations introduced it; the day takes the same + * duration and easing. No motion under reduced motion. + */ +export const DOCK_SLIDE = + "relative h-full shrink-0 overflow-hidden transition-[width] duration-200 ease-linear motion-reduce:transition-none"; + +/** The slide's length in milliseconds, for content that waits it out. */ +export const DOCK_SLIDE_MS = 200; + +function prefersReducedMotion(): boolean { + if (typeof window === "undefined" || !window.matchMedia) return true; + return window.matchMedia("(prefers-reduced-motion: reduce)").matches; +} + +/** + * `value` while it is set, and for the length of the slide after it is + * cleared: a closing panel keeps painting what it showed while its width + * runs to nothing. Cleared at once under reduced motion, where nothing + * slides. + */ +export function useLingering(value: T | null): T | null { + const [held, setHeld] = useState(value); + if (value !== null && held !== value) setHeld(value); + useEffect(() => { + if (value !== null || held === null) return; + const id = window.setTimeout( + () => setHeld(null), + prefersReducedMotion() ? 0 : DOCK_SLIDE_MS, + ); + return () => window.clearTimeout(id); + }, [value, held]); + return value ?? held; +} + +export interface DockStripProps { + ref?: React.Ref; + /** `data-slot` of the strip; its button is `-toggle`. */ + slot: string; + /** Left to right: conversations 1, day 2. */ + order: 1 | 2; + /** The id of the panel the strip opens and closes. */ + controls: string; + expanded: boolean; + /** The strip's visible, vertical label. */ + label: string; + /** The button's accessible name (what a click does). */ + actionLabel: string; + icon: LucideIcon; + onToggle: () => void; + /** Called when the pointer or focus reaches the strip (load ahead). */ + onPreload?: () => void; + /** Extra attributes for the strip (`data-day`). */ + data?: Record<`data-${string}`, string>; +} + +/** + * One strip: an empty cell of the top bar's band, then a button the rest of + * the window's height that opens and closes its panel. The label reads + * top to bottom; the strip is marked while its panel is open. + */ +export function DockStrip({ + ref, + slot, + order, + controls, + expanded, + label, + actionLabel, + icon: Icon, + onToggle, + onPreload, + data, +}: DockStripProps) { + return ( +
+ + ); +} diff --git a/src/components/layout/shell-side-panel.tsx b/src/components/layout/shell-side-panel.tsx index 761fbebda..849e405f2 100644 --- a/src/components/layout/shell-side-panel.tsx +++ b/src/components/layout/shell-side-panel.tsx @@ -7,8 +7,9 @@ import { createShellSlot } from "./shell-slot"; * `
` rather than inside `
`. A panel portalled here runs the full * height of the content row, from the top of the window (below any banner * strip) to the bottom, and the top bar ends at its left edge instead of - * running underneath it. The Coach's docked conversations panel is the one - * user. See `shell-slot.tsx`. + * running underneath it. The docked day and the Coach's docked + * conversations live here; their strips sit right of this column + * (`shell-dock.tsx`). See `shell-slot.tsx`. */ const slot = createShellSlot("shell-side-panel"); diff --git a/src/components/ui/calendar-locale.ts b/src/components/ui/calendar-locale.ts new file mode 100644 index 000000000..138686267 --- /dev/null +++ b/src/components/ui/calendar-locale.ts @@ -0,0 +1,29 @@ +import { de, enUS, es, fr, it, ko, pl } from "date-fns/locale"; +import type { Locale as DateFnsLocale } from "date-fns"; + +import type { Locale } from "@/lib/i18n/config"; + +/** + * Map the app locale → the date-fns locale so the calendar's month / weekday + * names match the UI language. Defaults to enUS for anything unmapped. + * Imported only by the calendars, which load on demand, so the seven + * locales never ride a page's first load. + */ +export function resolveDateFnsLocale(locale: Locale): DateFnsLocale { + switch (locale) { + case "de": + return de; + case "es": + return es; + case "fr": + return fr; + case "it": + return it; + case "pl": + return pl; + case "ko": + return ko; + default: + return enUS; + } +} diff --git a/src/components/ui/date-field-calendar.tsx b/src/components/ui/date-field-calendar.tsx new file mode 100644 index 000000000..9ee496761 --- /dev/null +++ b/src/components/ui/date-field-calendar.tsx @@ -0,0 +1,40 @@ +"use client"; + +import type { Matcher } from "react-day-picker"; + +import { Calendar } from "@/components/ui/calendar"; +import type { Locale } from "@/lib/i18n/config"; + +import { resolveDateFnsLocale } from "./calendar-locale"; + +/** + * `DateField`'s single-day calendar, in its own module so the field can + * load it on demand (`date-field.tsx`). Takes the app locale and resolves + * the date-fns one here, beside react-day-picker, so neither rides the + * field. + */ +export function DateFieldCalendar({ + appLocale, + selected, + onSelect, + disabled, + defaultMonth, +}: { + appLocale: Locale; + selected: Date | undefined; + onSelect: (date: Date | undefined) => void; + disabled: Matcher[] | undefined; + defaultMonth: Date; +}) { + return ( + + ); +} diff --git a/src/components/ui/date-field.tsx b/src/components/ui/date-field.tsx index ed011d731..95b427c6f 100644 --- a/src/components/ui/date-field.tsx +++ b/src/components/ui/date-field.tsx @@ -2,20 +2,35 @@ import * as React from "react"; import { CalendarIcon } from "lucide-react"; +import dynamic from "next/dynamic"; import type { Matcher } from "react-day-picker"; -import { de, enUS, es, fr, it, ko, pl } from "date-fns/locale"; -import type { Locale as DateFnsLocale } from "date-fns"; import { cn } from "@/lib/utils"; import { useTranslations, useDateFormatPreference } from "@/lib/i18n/context"; import { formatDate, parseIsoDate } from "@/lib/date-format"; -import { Calendar } from "@/components/ui/calendar"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; +/** + * The calendar (react-day-picker and the date-fns month names of every + * interface language) loads when the popover first opens, not with every + * form that holds a date field: it is the heaviest part of the field and + * the only one a person may never use. Until it arrives the popover keeps + * the calendar's footprint. + */ +const DateFieldCalendar = dynamic( + () => import("./date-field-calendar").then((m) => m.DateFieldCalendar), + { + ssr: false, + loading: () => ( +
+ ), + }, +); + /** * Dependency-free date input that DISPLAYS the value in the user's date-order * preference (AUTO follows the locale; DMY / MDY / YMD pin the field order) @@ -236,8 +251,7 @@ export const DateField = React.forwardRef(
- { commitIso(d ? dateToIso(d) : ""); @@ -245,8 +259,7 @@ export const DateField = React.forwardRef( }} disabled={disabledMatchers.length ? disabledMatchers : undefined} defaultMonth={selectedDate ?? new Date()} - locale={resolveDateFnsLocale(locale)} - autoFocus + appLocale={locale} /> @@ -311,31 +324,6 @@ function resolveOrder( return locale === "en" ? "MDY" : "DMY"; } -/** - * Map the app locale → the date-fns locale so the calendar's month / weekday - * names match the UI language. Defaults to enUS for anything unmapped. - */ -export function resolveDateFnsLocale( - locale: ReturnType["locale"], -): DateFnsLocale { - switch (locale) { - case "de": - return de; - case "es": - return es; - case "fr": - return fr; - case "it": - return it; - case "pl": - return pl; - case "ko": - return ko; - default: - return enUS; - } -} - /** * ISO `yyyy-MM-dd` → a LOCAL `Date` at midnight (no UTC shift — the value is a * plain calendar date, so it must read back as the same day in the user's diff --git a/tests/integration/dashboard-chart-overlay-concurrency.test.ts b/tests/integration/dashboard-chart-overlay-concurrency.test.ts new file mode 100644 index 000000000..7ccf4b471 --- /dev/null +++ b/tests/integration/dashboard-chart-overlay-concurrency.test.ts @@ -0,0 +1,164 @@ +/** + * Concurrent writes to one account's dashboard layout blob. + * + * `PUT /api/dashboard/chart-overlay-prefs` read-modifies-writes + * `User.dashboardWidgetsJson`. It used to do so in a Serializable + * transaction, which kept parallel toggles from clobbering one another by + * aborting all but one with a serialization failure, and every aborted one + * answered 500. A row lock queues them instead: every request succeeds, and + * the stored layout holds every toggle, because each writer reads after the + * previous one committed. A reset (`DELETE /api/dashboard/widgets`) racing + * the toggles takes the same lock and keeps the per-chart preferences. + */ +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; + +process.env.ENCRYPTION_KEY ??= + "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef"; + +import { cookieJar, headerJar } from "./mock-next-headers"; +import { getPrismaClient, truncateAllTables } from "./setup"; +import { CHART_OVERLAY_KEYS } from "@/lib/dashboard-layout"; + +vi.mock("next/headers", async () => { + const { cookieJar, headerJar } = await import("./mock-next-headers"); + return { + headers: vi.fn(async () => ({ + get: (name: string) => headerJar.get(name.toLowerCase()) ?? null, + })), + cookies: vi.fn(async () => ({ + get: (name: string) => { + const value = cookieJar.get(name); + return value ? { name, value } : undefined; + }, + set: (name: string, value: string) => { + cookieJar.set(name, value); + }, + delete: (name: string) => { + cookieJar.delete(name); + }, + })), + }; +}); + +vi.mock("@/lib/db-compat", () => ({ + ensureDbCompatibility: vi.fn().mockResolvedValue(undefined), +})); + +beforeEach(async () => { + await truncateAllTables(getPrismaClient()); + cookieJar.clear(); + headerJar.clear(); +}); + +afterEach(() => { + vi.restoreAllMocks(); +}); + +async function seedUser(): Promise<{ userId: string }> { + const prisma = getPrismaClient(); + const user = await prisma.user.create({ + data: { + username: "chart-overlay-race-user", + email: "chart-overlay-race@example.test", + role: "USER", + }, + }); + const session = await prisma.session.create({ + data: { + userId: user.id, + expiresAt: new Date(Date.now() + 60_000), + }, + }); + cookieJar.set("healthlog_session", session.id); + return { userId: user.id }; +} + +type Handler = (req: Request) => Promise; + +function put(chartKey: string, showTrendArrow: boolean) { + return new Request("http://localhost/api/dashboard/chart-overlay-prefs", { + method: "PUT", + headers: { "content-type": "application/json" }, + body: JSON.stringify({ + chartKey, + prefs: { + showTrendIndicator: true, + showTrendArrow, + showTargetRange: false, + comparisonBaseline: "none", + }, + }), + }); +} + +async function storedPrefs(userId: string) { + const row = await getPrismaClient().user.findUniqueOrThrow({ + where: { id: userId }, + select: { dashboardWidgetsJson: true }, + }); + const layout = row.dashboardWidgetsJson as { + chartOverlayPrefs?: Record; + } | null; + return layout?.chartOverlayPrefs ?? {}; +} + +describe("concurrent chart-overlay writes from one account", () => { + it("answers 200 to every parallel PUT and keeps every chart's toggle", async () => { + const { userId } = await seedUser(); + const { PUT } = + await import("@/app/api/dashboard/chart-overlay-prefs/route"); + const keys = CHART_OVERLAY_KEYS.slice(0, 8); + expect(keys.length).toBe(8); + + const responses = await Promise.all( + keys.map((key) => (PUT as Handler)(put(key, true))), + ); + expect(responses.map((res) => res.status)).toEqual(keys.map(() => 200)); + + const prefs = await storedPrefs(userId); + for (const key of keys) { + expect(prefs[key]?.showTrendArrow, key).toBe(true); + } + }); + + it("settles parallel writes to the same chart on one of the written values", async () => { + const { userId } = await seedUser(); + const { PUT } = + await import("@/app/api/dashboard/chart-overlay-prefs/route"); + const responses = await Promise.all( + Array.from({ length: 10 }, (_, i) => + (PUT as Handler)(put("weight", i % 2 === 0)), + ), + ); + expect(responses.map((res) => res.status)).toEqual( + Array.from({ length: 10 }, () => 200), + ); + const prefs = await storedPrefs(userId); + expect(typeof prefs.weight?.showTrendArrow).toBe("boolean"); + }); + + it("keeps every toggle when a layout reset races them", async () => { + const { userId } = await seedUser(); + const { PUT } = + await import("@/app/api/dashboard/chart-overlay-prefs/route"); + const { DELETE } = await import("@/app/api/dashboard/widgets/route"); + const keys = CHART_OVERLAY_KEYS.slice(0, 6); + + const responses = await Promise.all([ + ...keys.map((key) => (PUT as Handler)(put(key, true))), + (DELETE as Handler)( + new Request("http://localhost/api/dashboard/widgets", { + method: "DELETE", + }), + ), + ]); + expect(responses.map((res) => res.status)).toEqual( + responses.map(() => 200), + ); + + const prefs = await storedPrefs(userId); + for (const key of keys) { + expect(prefs[key]?.showTrendArrow, key).toBe(true); + } + }); +});