@burdenoff/microfe-movethewheels 2026.1017.16 → 2026.1017.18

package/src/movethewheels/hooks/useConsumedFuelPreview.ts

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { print } from 'graphql';
+import {
+  MtwConsumedFuelPreviewDocument,
+  type MtwConsumedFuelPreviewInput,
+} from '../../generated/consumed-fuel-preview-operations';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+import {
+  parseConsumedFuelPreview,
+  validateConsumedFuelEnvelope,
+  type ConsumedFuelPreview,
+} from '../utils/consumedFuelResponse';
+
+const query = print(MtwConsumedFuelPreviewDocument);
+export function useConsumedFuelPreview() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl, authToken, workspaceToken } =
+    useMoveTheWheels();
+  const context = useMemo(
+    () => ({
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+    }),
+    [workspaceId, tenantId, currentUser?.id, apiGatewayUrl, authToken, workspaceToken]
+  );
+  const active = useRef(context);
+  useLayoutEffect(() => {
+    active.current = context;
+  }, [context]);
+  const generation = useRef(0);
+  const pending = useRef<AbortController | null>(null);
+  const [state, setState] = useState<{
+    context: typeof context;
+    generation: number;
+    loading: boolean;
+    result: ConsumedFuelPreview | null;
+    input: MtwConsumedFuelPreviewInput | null;
+    failed: boolean;
+  } | null>(null);
+  const cancel = useCallback(() => {
+    generation.current++;
+    pending.current?.abort();
+    pending.current = null;
+  }, []);
+  const invalidate = useCallback(() => {
+    cancel();
+    setState(null);
+  }, [cancel]);
+  useEffect(() => {
+    invalidate();
+    return cancel;
+  }, [context, cancel, invalidate]);
+  const run = useCallback(
+    async (input: MtwConsumedFuelPreviewInput) => {
+      if (active.current !== context || pending.current || !context.workspaceId || !context.actorId)
+        return;
+      input = structuredClone(input);
+      const controller = new AbortController();
+      pending.current = controller;
+      const ticket = ++generation.current;
+      setState({ context, generation: ticket, loading: true, result: null, input, failed: false });
+      try {
+        const data = await executeGraphQL<unknown>(
+          {
+            ...context,
+            signal: controller.signal,
+            validateResponse: validateConsumedFuelEnvelope,
+          },
+          query,
+          { input },
+          'SINGLE_ATTEMPT'
+        );
+        const result = parseConsumedFuelPreview(data, input);
+        if (
+          !controller.signal.aborted &&
+          active.current === context &&
+          generation.current === ticket
+        )
+          setState({ context, generation: ticket, loading: false, result, input, failed: false });
+      } catch {
+        if (
+          !controller.signal.aborted &&
+          active.current === context &&
+          generation.current === ticket
+        )
+          setState({
+            context,
+            generation: ticket,
+            loading: false,
+            result: null,
+            input,
+            failed: true,
+          });
+      } finally {
+        if (pending.current === controller) pending.current = null;
+      }
+    },
+    [context]
+  );
+  const current = state?.context === context;
+  return {
+    run,
+    invalidate,
+    ready: !!context.workspaceId && !!context.actorId,
+    loading: current ? state.loading : false,
+    result: current ? state.result : null,
+    input: current ? state.input : null,
+    failed: current ? state.failed : false,
+  };
+}

package/src/movethewheels/pages/ConsumedFuelPreviewPage.tsx

@@ -0,0 +1,389 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import { Gauge } from 'lucide-react';
+import { Button, Input, Label } from '../components/ui';
+import { PageLayout } from '../components/PageLayout';
+import { useTr } from '../hooks';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useConsumedFuelPreview } from '../hooks/useConsumedFuelPreview';
+import {
+  consumedFuelInput,
+  newConsumedFuelDraft,
+  ConsumedFuelInputError,
+  formatFuelRatio,
+  type FuelObservationDraft,
+} from '../utils/consumedFuelInput';
+import type { ConsumedFuelPreview } from '../utils/consumedFuelResponse';
+
+const reasonCopy = {
+  DISTANCE_UNKNOWN: 'Distance is missing.',
+  FUEL_UNKNOWN: 'Consumed volume is missing.',
+  SOURCE_UNKNOWN: 'Source reference or revision is missing.',
+  NON_MEASURED_DISTANCE: 'Distance is not declared measured.',
+  UNSUPPORTED_FUEL_BASIS: 'Fuel basis is estimated, refuelled or unknown.',
+  INTERVAL_MISMATCH: 'The observation intervals differ.',
+  PARTIAL_COVERAGE: 'Coverage is declared partial.',
+  ZERO_DISTANCE: 'L/100 km is undefined for zero distance.',
+};
+function ObservationFields({
+  kind,
+  value,
+  prefix,
+  error,
+  onChange,
+}: {
+  kind: 'distance' | 'fuel';
+  value: FuelObservationDraft;
+  prefix: string;
+  error: ConsumedFuelInputError | null;
+  onChange: (patch: Partial<FuelObservationDraft>) => void;
+}) {
+  const tr = useTr();
+  const fields = [
+    ['amount', kind === 'distance' ? 'Distance (km)' : 'Reported fuel volume (L)'],
+    ['intervalFrom', 'Interval start (UTC)'],
+    ['intervalUntil', 'Interval end (UTC)'],
+    ['sourceReference', 'Source reference'],
+    ['sourceRevision', 'Source revision'],
+  ] as const;
+  const basis =
+    kind === 'distance'
+      ? [
+          ['MEASURED', 'Measured'],
+          ['PROVIDER_ESTIMATE', 'Provider estimate'],
+          ['OPERATOR_ESTIMATE', 'Operator estimate'],
+        ]
+      : [
+          ['MEASURED_CONSUMPTION', 'Measured consumption'],
+          ['ESTIMATED_CONSUMPTION', 'Estimated consumption'],
+          ['PURCHASED_OR_REFUELLED', 'Purchased or refuelled'],
+          ['UNKNOWN', 'Unknown'],
+        ];
+  const heading =
+    kind === 'distance'
+      ? tr('movethewheels.fuelPreview.distance', 'Distance observation')
+      : tr('movethewheels.fuelPreview.fuel', 'Fuel observation');
+  return (
+    <fieldset className="min-w-0 rounded-xl border border-outline p-4 space-y-4">
+      <legend className="px-1 font-semibold">{heading}</legend>
+      <Label htmlFor={`${prefix}-${kind}-included`} className="flex items-center gap-2 min-h-11">
+        <input
+          id={`${prefix}-${kind}-included`}
+          type="checkbox"
+          checked={value.included}
+          onChange={(e) => onChange({ included: e.target.checked })}
+        />
+        {tr('movethewheels.fuelPreview.include', 'Include this observation')}
+      </Label>
+      {!value.included ? (
+        <p className="text-sm text-text-secondary">
+          {tr(
+            'movethewheels.fuelPreview.absent',
+            'Not supplied. This observation will remain unknown.'
+          )}
+        </p>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2">
+          {fields.map(([field, label]) => (
+            <div key={field} className="min-w-0 space-y-1">
+              <Label htmlFor={`${prefix}-${kind}-${field}`}>
+                {tr(`movethewheels.fuelPreview.${kind}.${field}`, label)}
+              </Label>
+              <Input
+                id={`${prefix}-${kind}-${field}`}
+                type="text"
+                inputMode={field === 'amount' ? 'decimal' : 'text'}
+                autoComplete="off"
+                value={value[field]}
+                onChange={(e) => onChange({ [field]: e.target.value })}
+                required={field === 'intervalFrom' || field === 'intervalUntil'}
+                maxLength={field === 'amount' ? 32 : field.startsWith('interval') ? 32 : 255}
+                aria-invalid={error?.field === `${kind}-${field}`}
+                aria-describedby={
+                  error?.field === `${kind}-${field}` ? `${prefix}-error` : undefined
+                }
+                className="min-h-11"
+              />
+            </div>
+          ))}
+          {(
+            [
+              ['basis', tr('movethewheels.fuelPreview.basis', 'Observation basis'), basis],
+              [
+                'coverage',
+                tr('movethewheels.fuelPreview.coverage', 'Declared interval coverage'),
+                [
+                  ['COMPLETE', tr('movethewheels.fuelPreview.complete', 'Complete')],
+                  ['PARTIAL', tr('movethewheels.fuelPreview.partial', 'Partial')],
+                ],
+              ],
+            ] as const
+          ).map(([field, label, choices]) => (
+            <div key={field} className="space-y-1">
+              <Label htmlFor={`${prefix}-${kind}-${field}`}>{label}</Label>
+              <select
+                id={`${prefix}-${kind}-${field}`}
+                required
+                value={value[field]}
+                onChange={(e) => onChange({ [field]: e.target.value })}
+                aria-invalid={error?.field === `${kind}-${field}`}
+                aria-describedby={
+                  error?.field === `${kind}-${field}` ? `${prefix}-error` : undefined
+                }
+                className="min-h-11 w-full rounded-md border border-outline bg-surface px-3"
+              >
+                <option value="">
+                  {tr('movethewheels.fuelPreview.choose', 'Choose a declared basis or coverage')}
+                </option>
+                {choices.map(([choice, label]) => (
+                  <option key={choice} value={choice}>
+                    {tr(`movethewheels.fuelPreview.choices.${choice}`, label)}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ))}
+        </div>
+      )}
+    </fieldset>
+  );
+}
+function FuelResults({ result }: { result: ConsumedFuelPreview }) {
+  const tr = useTr();
+  return (
+    <section
+      aria-label={tr('movethewheels.fuelPreview.result', 'Consumption preview result')}
+      className="rounded-xl border border-outline p-4 space-y-3"
+      data-testid="fuel-preview-result"
+    >
+      <h2 className="text-xl font-semibold">
+        {result.status === 'KNOWN' && result.litresPer100Km !== null
+          ? formatFuelRatio(result.litresPer100Km)
+          : tr('movethewheels.fuelPreview.unknown', 'Unknown — no ratio available')}
+      </h2>
+      <p>
+        {tr(
+          'movethewheels.fuelPreview.unverified',
+          'Operator reported · unverified. Source labels do not authenticate measurements.'
+        )}
+      </p>
+      {result.reasons.length > 0 && (
+        <ul className="list-disc ps-5">
+          {result.reasons.map((reason) => (
+            <li key={reason}>
+              {tr(`movethewheels.fuelPreview.reasons.${reason}`, reasonCopy[reason])}
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="grid gap-3 sm:grid-cols-2">
+        {(['distance', 'fuel'] as const).map((kind) => {
+          const observation = result[kind];
+          return (
+            <div key={kind} className="min-w-0 break-words text-sm">
+              <h3 className="font-semibold">
+                {kind === 'distance'
+                  ? tr('movethewheels.fuelPreview.distance', 'Distance observation')
+                  : tr('movethewheels.fuelPreview.fuel', 'Fuel observation')}
+              </h3>
+              {!observation ? (
+                <p>{tr('movethewheels.fuelPreview.notSupplied', 'Not supplied')}</p>
+              ) : (
+                <>
+                  <p>
+                    {kind === 'distance'
+                      ? `${result.distance?.metres ?? tr('movethewheels.fuelPreview.missing', 'Unknown')} m`
+                      : `${result.fuel?.millilitres ?? tr('movethewheels.fuelPreview.missing', 'Unknown')} mL`}
+                  </p>
+                  <p>
+                    {observation.intervalFrom} → {observation.intervalUntil}
+                  </p>
+                  <p>
+                    {tr(
+                      `movethewheels.fuelPreview.choices.${observation.basis}`,
+                      observation.basis
+                    )}{' '}
+                    ·{' '}
+                    {tr(
+                      `movethewheels.fuelPreview.choices.${observation.coverage}`,
+                      observation.coverage
+                    )}
+                  </p>
+                  <p>
+                    {observation.sourceReference ??
+                      tr('movethewheels.fuelPreview.noSource', 'No source reference')}{' '}
+                    /{' '}
+                    {observation.sourceRevision ??
+                      tr('movethewheels.fuelPreview.noRevision', 'No source revision')}
+                  </p>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+export default function ConsumedFuelPreviewPage() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
+  return (
+    <ConsumedFuelWorkbench
+      key={JSON.stringify([workspaceId, tenantId, currentUser?.id, apiGatewayUrl])}
+    />
+  );
+}
+function fuelInputErrorCopy(
+  error: ConsumedFuelInputError | null,
+  tr: ReturnType<typeof useTr>
+): string {
+  return error?.kind === 'QUANTITY'
+    ? tr(
+        'movethewheels.fuelPreview.quantityError',
+        'Use a nonnegative decimal with at most three fractional digits, up to 2147483.647 km or L. No separators, signs or exponents.'
+      )
+    : error?.kind === 'INSTANT'
+      ? tr(
+          'movethewheels.fuelPreview.instantError',
+          'Use a real UTC timestamp such as YYYY-MM-DDTHH:mm:ssZ, with at most three fractional digits.'
+        )
+      : error?.kind === 'INTERVAL'
+        ? tr(
+            'movethewheels.fuelPreview.intervalError',
+            'Start must precede end; end must not be in the future.'
+          )
+        : error?.kind === 'SOURCE'
+          ? tr(
+              'movethewheels.fuelPreview.sourceError',
+              'Leave a source label blank, or shorten it and include at least one non-space character.'
+            )
+          : tr('movethewheels.fuelPreview.choiceError', 'Choose the declared basis and coverage.');
+}
+function ConsumedFuelWorkbench() {
+  const tr = useTr(),
+    prefix = useId();
+  const [draft, setDraft] = useState(newConsumedFuelDraft);
+  const [error, setError] = useState<ConsumedFuelInputError | null>(null);
+  const [edited, setEdited] = useState(false);
+  const [unexpectedInputFailure, setUnexpectedInputFailure] = useState(false);
+  const preview = useConsumedFuelPreview();
+  const errorRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (error) {
+      const field = document.getElementById(`${prefix}-${error.field}`);
+      if (field instanceof HTMLElement) field.focus();
+      else errorRef.current?.focus();
+    } else if (preview.failed || unexpectedInputFailure) errorRef.current?.focus();
+  }, [error, prefix, preview.failed, unexpectedInputFailure]);
+  const edit = (kind: 'distance' | 'fuel', patch: Partial<FuelObservationDraft>) => {
+    preview.invalidate();
+    setEdited(true);
+    setError(null);
+    setUnexpectedInputFailure(false);
+    setDraft((old) => ({ ...old, [kind]: { ...old[kind], ...patch } }));
+  };
+  const copy = fuelInputErrorCopy(error, tr);
+  return (
+    <PageLayout
+      title={tr('movethewheels.fuelPreview.title', 'Consumed fuel preview')}
+      subtitle={tr(
+        'movethewheels.fuelPreview.subtitle',
+        'Compare sourced consumption and distance for the same interval.'
+      )}
+      icon={<Gauge aria-hidden="true" />}
+    >
+      <p className="mb-4 text-sm">
+        {tr(
+          'movethewheels.fuelPreview.limits',
+          'Reported interval arithmetic only. No measurement verification, savings, emissions, backhaul suitability or safety approval. Nothing is saved.'
+        )}
+      </p>
+      <form
+        noValidate
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (preview.loading || !preview.ready) return;
+          setUnexpectedInputFailure(false);
+          try {
+            const input = consumedFuelInput(draft);
+            setError(null);
+            setEdited(false);
+            void preview.run(input);
+          } catch (cause) {
+            if (cause instanceof ConsumedFuelInputError) setError(cause);
+            else {
+              preview.invalidate();
+              setError(null);
+              setUnexpectedInputFailure(true);
+            }
+          }
+        }}
+        className="space-y-4"
+      >
+        <p className="text-sm text-text-secondary">
+          {tr(
+            'movethewheels.fuelPreview.precision',
+            'Blank quantities stay unknown; explicit zero stays zero. Enter km and litres with at most three decimal places. COMPLETE is your declaration for that interval, not a trip certificate.'
+          )}
+        </p>
+        <div className="grid gap-4 lg:grid-cols-2">
+          {(['distance', 'fuel'] as const).map((kind) => (
+            <ObservationFields
+              key={kind}
+              kind={kind}
+              value={draft[kind]}
+              prefix={prefix}
+              error={error}
+              onChange={(patch) => edit(kind, patch)}
+            />
+          ))}
+        </div>
+        {(error || preview.failed || unexpectedInputFailure) && (
+          <div
+            id={`${prefix}-error`}
+            ref={errorRef}
+            tabIndex={-1}
+            role="alert"
+            className="rounded-md border border-outline p-3"
+          >
+            {error
+              ? copy
+              : unexpectedInputFailure
+                ? tr(
+                    'movethewheels.fuelPreview.inputUnavailable',
+                    'The observations could not be prepared. Review the form before trying this read again.'
+                  )
+                : tr(
+                    'movethewheels.fuelPreview.unavailable',
+                    'Preview unavailable. No result is accepted; check your connection and access before trying this read again.'
+                  )}
+          </div>
+        )}
+        {!preview.ready && (
+          <p role="status">
+            {tr(
+              'movethewheels.fuelPreview.contextRequired',
+              'Choose an active workspace and sign in before previewing.'
+            )}
+          </p>
+        )}
+        <Button type="submit" disabled={preview.loading || !preview.ready} className="min-h-11">
+          {preview.loading
+            ? tr('movethewheels.fuelPreview.loading', 'Previewing…')
+            : tr('movethewheels.fuelPreview.submit', 'Preview consumption')}
+        </Button>
+      </form>
+      <div aria-live="polite" className="mt-5">
+        {preview.result ? (
+          <FuelResults result={preview.result} />
+        ) : edited ? (
+          <p>
+            {tr(
+              'movethewheels.fuelPreview.stale',
+              'Inputs changed. Preview again for these observations; the previous result is hidden.'
+            )}
+          </p>
+        ) : null}
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/utils/consumedFuelInput.ts

@@ -0,0 +1,148 @@
+import type {
+  MtwConsumedFuelPreviewInput,
+  MtwConsumedFuelBasis,
+  MtwUtilizationDistanceBasis,
+  MtwTripUtilizationCoverage,
+} from '../../generated/consumed-fuel-preview-operations';
+
+export interface FuelObservationDraft {
+  included: boolean;
+  amount: string;
+  intervalFrom: string;
+  intervalUntil: string;
+  basis: string;
+  coverage: string;
+  sourceReference: string;
+  sourceRevision: string;
+}
+export interface ConsumedFuelDraft {
+  distance: FuelObservationDraft;
+  fuel: FuelObservationDraft;
+}
+export function newConsumedFuelDraft(): ConsumedFuelDraft {
+  const blank = (): FuelObservationDraft => ({
+    included: false,
+    amount: '',
+    intervalFrom: '',
+    intervalUntil: '',
+    basis: '',
+    coverage: '',
+    sourceReference: '',
+    sourceRevision: '',
+  });
+  return { distance: blank(), fuel: blank() };
+}
+export class ConsumedFuelInputError extends Error {
+  constructor(
+    readonly field: string,
+    readonly kind: 'QUANTITY' | 'INSTANT' | 'INTERVAL' | 'SOURCE' | 'CHOICE'
+  ) {
+    super('Review the supplied interval observations.');
+  }
+}
+/** Parse decimal km/L text directly into whole m/mL; no floating multiplication or rounding. */
+export function exactMilliUnits(value: string, field: string): number | null {
+  if (value === '') return null;
+  if (value.length > 11 || !/^(0|[1-9]\d*)(\.\d{1,3})?$/.test(value) || value.trim() !== value)
+    throw new ConsumedFuelInputError(field, 'QUANTITY');
+  const [whole, fraction = ''] = value.split('.');
+  const units = Number(whole) * 1000 + Number(fraction.padEnd(3, '0'));
+  if (!Number.isSafeInteger(units) || units > 2147483647)
+    throw new ConsumedFuelInputError(field, 'QUANTITY');
+  return units;
+}
+export function strictFuelInstant(value: string, field: string): string {
+  if (value.length < 20 || value.length > 24) throw new ConsumedFuelInputError(field, 'INSTANT');
+  const clock = value.slice(0, 19),
+    suffix = value.slice(19);
+  const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})$/.exec(clock);
+  if (!match || match[0] !== clock || match[1] === '0000' || !/^(Z|\.\d{1,3}Z)$/.test(suffix))
+    throw new ConsumedFuelInputError(field, 'INSTANT');
+  const year = Number(match[1]),
+    month = Number(match[2]),
+    day = Number(match[3]);
+  const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+  const days = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  if (
+    month < 1 ||
+    month > 12 ||
+    day < 1 ||
+    day > (days[month - 1] ?? 0) ||
+    Number(match[4]) > 23 ||
+    Number(match[5]) > 59 ||
+    Number(match[6]) > 59
+  )
+    throw new ConsumedFuelInputError(field, 'INSTANT');
+  const canonical = `${clock}.${(suffix === 'Z' ? '' : suffix.slice(1, -1)).padEnd(3, '0')}Z`;
+  const parsed = Date.parse(canonical);
+  if (!Number.isFinite(parsed) || new Date(parsed).toISOString() !== canonical)
+    throw new ConsumedFuelInputError(field, 'INSTANT');
+  return canonical;
+}
+function label(value: string, field: string): string | null {
+  if (value === '') return null;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.length > 255) throw new ConsumedFuelInputError(field, 'SOURCE');
+  return trimmed;
+}
+function coverage(value: string, field: string): MtwTripUtilizationCoverage {
+  if (value === 'COMPLETE' || value === 'PARTIAL') return value;
+  throw new ConsumedFuelInputError(field, 'CHOICE');
+}
+function distanceBasis(value: string): MtwUtilizationDistanceBasis {
+  if (value === 'MEASURED' || value === 'PROVIDER_ESTIMATE' || value === 'OPERATOR_ESTIMATE')
+    return value;
+  throw new ConsumedFuelInputError('distance-basis', 'CHOICE');
+}
+function fuelBasis(value: string): MtwConsumedFuelBasis {
+  if (
+    value === 'MEASURED_CONSUMPTION' ||
+    value === 'ESTIMATED_CONSUMPTION' ||
+    value === 'PURCHASED_OR_REFUELLED' ||
+    value === 'UNKNOWN'
+  )
+    return value;
+  throw new ConsumedFuelInputError('fuel-basis', 'CHOICE');
+}
+function observation(value: FuelObservationDraft, kind: 'distance' | 'fuel', now: number) {
+  const intervalFrom = strictFuelInstant(value.intervalFrom, `${kind}-intervalFrom`);
+  const intervalUntil = strictFuelInstant(value.intervalUntil, `${kind}-intervalUntil`);
+  if (Date.parse(intervalFrom) >= Date.parse(intervalUntil) || Date.parse(intervalUntil) > now)
+    throw new ConsumedFuelInputError(`${kind}-intervalUntil`, 'INTERVAL');
+  return {
+    intervalFrom,
+    intervalUntil,
+    coverage: coverage(value.coverage, `${kind}-coverage`),
+    sourceReference: label(value.sourceReference, `${kind}-sourceReference`),
+    sourceRevision: label(value.sourceRevision, `${kind}-sourceRevision`),
+  };
+}
+export function consumedFuelInput(
+  draft: ConsumedFuelDraft,
+  now = Date.now()
+): MtwConsumedFuelPreviewInput {
+  if (!Number.isFinite(now)) throw new ConsumedFuelInputError('distance-intervalUntil', 'INSTANT');
+  return {
+    distance: draft.distance.included
+      ? {
+          ...observation(draft.distance, 'distance', now),
+          metres: exactMilliUnits(draft.distance.amount, 'distance-amount'),
+          basis: distanceBasis(draft.distance.basis),
+        }
+      : null,
+    fuel: draft.fuel.included
+      ? {
+          ...observation(draft.fuel, 'fuel', now),
+          millilitres: exactMilliUnits(draft.fuel.amount, 'fuel-amount'),
+          basis: fuelBasis(draft.fuel.basis),
+        }
+      : null,
+  };
+}
+/** Display precision is not sensor precision; positive values must never appear as zero. */
+export function formatFuelRatio(value: number, locale?: string): string {
+  if (!Number.isFinite(value) || value < 0) throw new Error('Invalid ratio');
+  if (value > 0 && value < 0.01)
+    return `<${new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(0.01)} L/100 km`;
+  return `${value > 0 ? '≈ ' : ''}${new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value)} L/100 km`;
+}