Analysis: one selected period, one set of numbers, on every page

The dashboards told several stories at once. Overview asked for full
calendar years, meter detail for a fixed 12-month window that was really
13, Trends for 24 months with an Apply button, and the energy pages for
60. Each page derived "today" from UTC, so the first hours of a local day
belonged to yesterday. A missing tariff, a month nobody measured and a
genuine zero all rendered as 0. And a virtual meter -- the one thing the
spreadsheet leans on hardest -- was excluded from analysis outright:
MeterPeriodService returned null for it and the page offered a flow
diagram instead.

docs/DASHBOARD_ANALYSIS_CHANGE_BRIEF.md is the work order. Every choice it
left open is settled in docs/ANALYSIS_IMPLEMENTATION_NOTE.md as D-01..D-58
plus amendments A-01..A-30; code, tests and release notes cite those ids.

The analysis layer

Core/Analysis holds the pure rules: period presets resolved once in the
instance zone into a local date range and a half-open UTC range, bucket
plans, calendar-unit comparisons, coverage runs with a resolution class,
normalized quantities and units, the totals policy, the virtual formula
parser/validator/evaluator, and the cost calculator. "Now" comes from
TimeProvider; services never read the clock.

Normalization now writes, in the same transaction as consumption and by
diff, per-meter rollups by local day and month plus coverage runs and a
rollup state (AnalysisDataWriter). AnalysisReader answers a request from
those tables -- month rollups for month and year buckets, day rollups
otherwise, at most two partial edge days from consumption -- and
CostReader prices the result month by month. Pages, /api/v1 and the CSV
export read nothing else. The unused continuous aggregates are dropped.

The reader's statement count per request is constant whether it covers one
meter or a thousand. On a synthetic 1,000-meter, ten-year instance the
brief's target request (100 meters, ten years, monthly) takes 374 ms
against a two-second target, and the Overview went from 48,244 SQL
statements per load to 205.

Missing is not zero

Every bucket carries a status -- available, partial, missing, unresolved,
invalid, pending -- derived from coverage, never from the amount, with
provenance and a reason code beside it. A true zero is a number and a bar
on the baseline; an unknown bucket is a gap that says why; a month whose
data only exists monthly says so instead of inventing daily detail; a
scope with no tariff says "not priced" instead of 0. Rows whose interval
closes after now are reported separately rather than counted.

Virtual meters are analysis subjects

A virtual meter stores a canonical definition -- expression over m<id>
references, result kind, unit and cost rule -- validated on save and on
read for syntax, unknown or self references, loops and unit/kind rules.
It is evaluated on read from its sources' rollups over their joint
coverage: a missing source makes the bucket missing, an observed zero is
a valid input, a non-finite result is invalid with its dependency path,
and the page lists each source's contribution. Topology links are
topology only and never rewrite a saved calculation; expression-less
meters from older installs are converted once at startup. The editor has
Sum, Difference and Advanced modes with a live preview.

Totals and the bill

Per energy type the totals policy separates use, grid import, export,
generation and runtime, marks breakdown meters as breakdowns and virtual
meters as views, and never adds across units. The bill follows it: grid
import where there is one, separately priced subsections at their own
price, feed-in only on export meters, standing charges once per scope per
local day, manual costs once on their start day, categories as
non-overlapping covers whose composition reconciles to the bill. The
seeded demo's yearly totals now match the spreadsheet.

Pages and navigation

The period lives in the URL and every page reads the same contract, so a
link, a reload and the browser's Back button keep it. Shared components
carry it: page header with breadcrumbs, period toolbar, theme-aware chart
with an accessible table beside it, metric cards, comparison and
availability states, attention items that each link to the one action
that fixes them. Meter detail leads with an Analysis tab and resolves its
tabs by key; the energy page has Overview, History, Flow and Meters; the
old cost-only Trends page is a general Analysis page over portfolio, type,
category, meter or a meter comparison. Records tabs are paged server-side
instead of showing the latest 200. Everything is English and German,
light and dark, down to 360px.

Some figures change on purpose; docs/RELEASE_NOTES.md lists each one and
what the first start after the update does (it rebuilds all analysis data
before the web server listens). docs/SDD.md and CLAUDE.md describe the
system as it now is.

Tests: 1,733 Core and 746 integration, all green, plus an opt-in
performance suite with a synthetic 1,000-meter generator.

src/App/wwwroot/app.css

@@ -2,10 +2,131 @@ h1:focus {
     outline: none;
 }
 
-/* MeterVault helpers */
-.mv-up { color: #ef5350; }
-.mv-down { color: #66bb6a; }
+/* MeterVault helpers. Colours come from the MudBlazor palette variables, so light and dark mode both work. */
+.mv-up { color: var(--mud-palette-error); }
+.mv-down { color: var(--mud-palette-success); }
 .mv-main { max-width: 1400px; }
+.mv-muted { color: var(--mud-palette-text-secondary); }
+
+/* Visually hidden, still read by screen readers. */
+.mv-sr-only {
+    position: absolute !important;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Page header (Shared/Analysis/PageHeader): title h1 with chips, actions wrapping below on narrow screens. */
+.mv-page-header { margin-bottom: 16px; }
+.mv-page-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
+.mv-page-header__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
+.mv-page-header__h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.mv-page-header__chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.mv-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.mv-breadcrumbs .mud-breadcrumbs { flex-wrap: wrap; padding: 0 0 4px 0; }
+@media (max-width: 599.98px) {
+    .mv-page-header__h1 { font-size: 1.5rem; }
+}
+
+/* Period toolbar (Shared/Analysis/PeriodToolbar): controls wrap; each takes a full row on a phone. */
+.mv-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
+.mv-toolbar__field { flex: 1 1 180px; min-width: 160px; max-width: 280px; }
+.mv-toolbar__info { align-self: center; }
+.mv-toolbar__details { display: flex; flex-direction: column; gap: 2px; max-width: 280px; }
+.mv-toolbar__custom { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; flex: 1 1 100%; }
+.mv-toolbar__date { flex: 1 1 160px; max-width: 220px; }
+.mv-toolbar__apply { align-self: center; min-height: 40px; }
+.mv-toolbar__hint { flex: 1 1 100%; color: var(--mud-palette-error); }
+.mv-toolbar__reset, .mv-toolbar__export { align-self: center; }
+@media (max-width: 599.98px) {
+    .mv-toolbar__field, .mv-toolbar__date { max-width: none; flex-basis: 100%; }
+}
+
+/* Changes (Shared/Analysis/ChangeChip): tone by the metric's polarity; the words and the arrow carry the meaning. */
+.mv-change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 0.875rem; line-height: 1.4; }
+.mv-change__icon { flex: none; }
+.mv-change__caption { color: var(--mud-palette-text-secondary); }
+.mv-change-good { color: var(--mud-palette-success); }
+.mv-change-bad { color: var(--mud-palette-error); }
+.mv-change-neutral { color: var(--mud-palette-text-secondary); }
+
+/* Metric cards. */
+.mv-metric { height: 100%; }
+.mv-metric__value-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.mv-metric__value { font-size: 1.5rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
+.mv-metric__value--words { font-size: 1.1rem; color: var(--mud-palette-text-secondary); }
+.mv-metric__link { display: block; width: fit-content; margin-top: 4px; }
+
+/* Charts and tables. A wide table scrolls inside its container, never the page. */
+.mv-chart-stack { display: flex; flex-direction: column; gap: 16px; }
+.mv-chart { margin: 0; min-width: 0; }
+.mv-chart__unit { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
+.mv-chart__note { font-size: 0.75rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }
+.mv-chart--clickable .apexcharts-bar-area,
+.mv-chart--clickable .apexcharts-marker,
+.mv-chart--clickable .apexcharts-xaxis-label { cursor: pointer; }
+/* Positioned, so visually hidden cells (absolute) stay inside the scrolling box instead of widening the page. */
+.mv-table-scroll { position: relative; max-width: 100%; overflow-x: auto; }
+.mv-table-scroll:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
+
+/* Visible keyboard focus (brief §8): MudBlazor removes the outline of links and buttons and marks focus only with a ~6 %
+   tint. Every focusable control gets a solid ring in the text colour of the theme — readable on both the light and the
+   dark surface (the teal primary is under 3:1 on white). Nav links are drawn inside, so the drawer never clips the ring. */
+.mud-button-root:focus-visible,
+.mud-icon-button:focus-visible,
+.mud-icon-button:has(:focus-visible),
+.mud-chip:focus-visible,
+.mud-link:focus-visible,
+.mud-tab:focus-visible,
+.mud-breadcrumb-item a:focus-visible,
+.mv-drill a:focus-visible {
+    outline: 2px solid var(--mud-palette-text-primary);
+    outline-offset: 2px;
+}
+.mud-nav-link:focus-visible,
+.mud-nav-group > button:focus-visible,
+.mud-list-item:focus-visible {
+    outline: 2px solid var(--mud-palette-text-primary);
+    outline-offset: -2px;
+}
+.mv-analysis-table th, .mv-analysis-table td { white-space: nowrap; }
+.mv-analysis-table td .mv-cell-secondary { white-space: normal; min-width: 12ch; }
+.mv-num { text-align: right; font-variant-numeric: tabular-nums; }
+.mv-cell-secondary { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
+.mv-row-label { font-weight: 400; text-align: left; }
+.mv-row-total th, .mv-row-total td { font-weight: 600; border-top: 2px solid var(--mud-palette-lines-default); }
+.mv-qualified { font-style: italic; }
+.mv-unknown { color: var(--mud-palette-text-secondary); }
+.mv-drill { width: 1%; }
+
+/* States: empty, refreshing, projection, comparison, attention, contributions. */
+.mv-empty { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px dashed var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); }
+.mv-empty__icon { color: var(--mud-palette-text-secondary); flex: none; }
+.mv-refresh__bar { min-height: 4px; }
+.mv-refresh--busy .mv-refresh__content { opacity: 0.55; transition: opacity 0.2s ease-in; }
+.mv-projection { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--mud-palette-text-secondary); }
+.mv-comparison { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; }
+.mv-comparison__warning { display: inline-flex; align-items: center; gap: 4px; }
+.mv-attention__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.mv-attention__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
+.mv-attention__icon { flex: none; align-self: center; }
+.mv-attention__item--error .mv-attention__icon { color: var(--mud-palette-error); }
+.mv-attention__item--warning .mv-attention__icon { color: var(--mud-palette-warning); }
+.mv-attention__item--info .mv-attention__icon { color: var(--mud-palette-info); }
+.mv-attention__text { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
+.mv-contributions__formula { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.mv-formula { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
+.mv-formula code { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
+.mv-formula__ref { display: inline-flex; align-items: baseline; gap: 4px; }
+
+@media (prefers-reduced-motion: reduce) {
+    .mv-refresh--busy .mv-refresh__content { transition: none; }
+}
 
 .valid.modified:not([type=checkbox]) {
     outline: 1px solid #26b050;

src/App/wwwroot/metervault.js

@@ -0,0 +1,19 @@
+// MeterVault's own browser helpers. Kept tiny and declarative: no eval, no dynamic code, nothing but what the
+// server-side components call through IJSRuntime.
+window.meterVault = window.meterVault || {};
+
+// UI preferences the server reads on the next request (App.razor): the theme and the expanded navigation groups.
+// Only these cookie names are accepted, so a component cannot be used to set anything else.
+(function () {
+    const allowed = ["mv-theme", "mv-nav"];
+    const maxAge = 60 * 60 * 24 * 365; // one year
+
+    window.meterVault.setPreference = function (name, value) {
+        if (allowed.indexOf(name) < 0) {
+            return false;
+        }
+
+        document.cookie = name + "=" + encodeURIComponent(String(value)) + "; path=/; max-age=" + maxAge + "; samesite=lax";
+        return true;
+    };
+})();