fix(tradein/v2): визуальный аудит — иерархия/честность/микрокопи (#2266)

Живой визуальный аудит /trade-in/v2 нашёл HIGH/MEDIUM/LOW дефекты после
honest-hero раунда — фиксы:

- H1: честный fallback-state флагманской карточки при expected_sold_price=null
  (вместо четырёх прочерков)
- H3: две расходящиеся "медианы объявлений" на одном экране (рейка 14.23млн
  vs герой 8.99млн на тех же аналогах) — унифицированы на e.median_price_rub
- M1-M3: иерархия трёх цен (asking уменьшен, круговой гейдж → пилюля
  "-N% к цене объявления", дисклеймер разброса читаем)
- M4: PDF-отчёт primary после результата (без добавления lead-CTA —
  открытый продуктовый вопрос, не решался)
- M5: порядок меток оси X графика (2026 в начале, не терялась при years!=5) —
  geometry вынесена в общий export (phYearX) вместо дублирования в двух файлах
- M6: gate немонотонного "срок продажи" при n<5 аналогов
- M7: сброс scroll оверлея при смене секции
- M8 + LOW: унификация терминов (СТОИМОСТЬ→ЦЕНА, CV→"разброс цен",
  P25-P75 человекочитаемо, ДКП-расшифровка, скрыт литеральный
  "Обновлено: —", метро-разделители в адресе, убран внутренний
  "ПОВТОРНЫЕ АДРЕСА" label)
- Контраст accent-текста hero (40px headline) поднят с ~2.87:1 до ~4.2:1
  (accent → accentDeep, существующий токен той же палитры)

Мобильная раскладка (H2) вынесена в отдельный issue #2275, не в этом PR.
Lead-CTA "Оставить заявку" — открытый продуктовый вопрос, не решался.

Refs #2266, #2262

tradein-mvp/frontend/pnpm-lock.yaml

@@ -24,6 +24,9 @@ importers:
         specifier: ^2.15.4
         version: 2.15.4(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     devDependencies:
+      '@eslint/eslintrc':
+        specifier: ^3.0.0
+        version: 3.3.5
       '@types/node':
         specifier: ^22.0.0
         version: 22.19.19

tradein-mvp/frontend/src/app/v2/page.tsx

@@ -814,6 +814,7 @@ export default function TradeInV2Page() {
                 key={estimate?.estimate_id ?? "new"}
                 onSubmit={handleSubmit}
                 isPending={mutation.isPending}
+                hasEstimate={hasEstimate}
                 error={apiError}
                 initialValues={initialValues}
                 markers={markers}

tradein-mvp/frontend/src/components/trade-in/v2/AnalyticsView.tsx

@@ -8,6 +8,7 @@
 import { useMemo, useState } from "react";
 import { tokens } from "./tokens";
 import { analytics as ANALYTICS_FIXTURE } from "./fixtures";
+import { phYearX as histYearX } from "./mappers";
 import type { Analytics, SellTimeTier } from "./types";
 
 interface AnalyticsViewProps {
@@ -36,8 +37,14 @@ function parsePoints(s: string): Pt[] {
     });
 }
 
-// X positions of the year axis labels (chart scaffolding, not in fixtures).
+// M5 — X positions of the year axis labels. MUST be DATA-DRIVEN from the number
-const histYearX = [50, 250, 460, 670, 860];
+// of years, using the SAME geometry the mapper uses for the polyline vertices
+// (buildPriceHistory: phYearX over [PH_X_LEFT, PH_X_RIGHT]) — imported from
+// ./mappers (single source of truth) rather than copy-pasted, so the two never
+// drift apart. A fixed 5-slot array broke whenever the real series had ≠5
+// years: the extra labels fell back to an undefined x → x=0, so a late year
+// (e.g. 2026) was drawn FIRST, on top of the y-axis ticks. Now each label sits
+// centred under its own vertex.
 
 // ---- sell-time tier tints --------------------------------------------------
 // One-off decorative tints per variant (design lines 553-556). The soft border
@@ -92,12 +99,39 @@ function sellTimeRangeMeaningful(tier: SellTimeTier): boolean {
   return true;
 }
 
+// M6 — «Срок продажи в зависимости от цены» is not a real trend when built on
+// thin buckets: on the audited object +5% mapped to 80 дн (below the 119-дн
+// median) off just 3–6 analogs, i.e. noise read as a signal. We therefore GATE
+// the chart honestly instead of faking monotonicity:
+//   • a tile with fewer than SELLTIME_MIN_N analogs is dropped (too few to trust);
+//   • if fewer than SELLTIME_MIN_TILES tiles survive, the whole grid is replaced
+//     by a «мало данных» note (nothing meaningful left to compare).
+const SELLTIME_MIN_N = 5;
+const SELLTIME_MIN_TILES = 3;
+
+/** Parse the analog count out of a tier ("6 аналогов" → 6). Unknown → 0. */
+function sellTimeTierN(tier: SellTimeTier): number {
+  const n = Number.parseInt(tier.count, 10);
+  return Number.isFinite(n) ? n : 0;
+}
+
+/** A tier is trustworthy only with a real point estimate AND ≥ SELLTIME_MIN_N lots. */
+function sellTimeTierValid(tier: SellTimeTier): boolean {
+  return tier.days !== "—" && sellTimeTierN(tier) >= SELLTIME_MIN_N;
+}
+
 export default function AnalyticsView({
   data = ANALYTICS_FIXTURE,
   onNavigate,
 }: AnalyticsViewProps) {
   const [hoverHist, setHoverHist] = useState(false);
 
+  // M6 — only trustworthy price/sell-time tiles (≥ SELLTIME_MIN_N analogs).
+  const sellTimeTiles = useMemo(
+    () => data.sellTime.filter(sellTimeTierValid),
+    [data.sellTime],
+  );
+
   // Price-history series + hover targets, derived from the data prop. Яндекс
   // only draws dots where its series diverges from Avito (последние 3 года).
   const avitoPts = useMemo(
@@ -215,56 +249,73 @@ export default function AnalyticsView({
         >
           {data.sellTimeNote}
         </div>
-        <div
+        {sellTimeTiles.length >= SELLTIME_MIN_TILES ? (
-          style={{
+          <div
-            display: "grid",
+            style={{
-            gridTemplateColumns: "repeat(4,1fr)",
+              display: "grid",
-            gap: 12,
+              gridTemplateColumns: `repeat(${sellTimeTiles.length},1fr)`,
-          }}
+              gap: 12,
-        >
+            }}
-          {data.sellTime.map((tier, i) => {
+          >
-            const v = tierStyles[tier.variant];
+            {sellTimeTiles.map((tier, i) => {
-            return (
+              const v = tierStyles[tier.variant];
-              <div
+              return (
-                key={i}
-                style={{
-                  background: v.bg,
-                  border: v.border,
-                  borderRadius: 7,
-                  padding: "13px 15px",
-                }}
-              >
-                <div
-                  style={{ fontSize: 9.5, color: v.label, letterSpacing: 0.5 }}
-                >
-                  {tier.tier}
-                </div>
                 <div
+                  key={i}
                   style={{
-                    fontFamily: tokens.font.mono,
+                    background: v.bg,
-                    fontSize: 26,
+                    border: v.border,
-                    fontWeight: 300,
+                    borderRadius: 7,
-                    color: tokens.ink2,
+                    padding: "13px 15px",
-                    margin: "6px 0 4px",
                   }}
                 >
-                  {tier.days}
+                  <div
+                    style={{ fontSize: 9.5, color: v.label, letterSpacing: 0.5 }}
+                  >
+                    {tier.tier}
+                  </div>
+                  <div
+                    style={{
+                      fontFamily: tokens.font.mono,
+                      fontSize: 26,
+                      fontWeight: 300,
+                      color: tokens.ink2,
+                      margin: "6px 0 4px",
+                    }}
+                  >
+                    {tier.days}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: 9.5,
+                      color: tokens.hint,
+                      lineHeight: 1.5,
+                    }}
+                  >
+                    {sellTimeRangeMeaningful(tier) ? (
+                      <>
+                        {tier.range}
+                        <br />
+                      </>
+                    ) : null}
+                    {tier.count}
+                  </div>
                 </div>
-                <div
+              );
-                  style={{ fontSize: 9.5, color: tokens.hint, lineHeight: 1.5 }}
+            })}
-                >
+          </div>
-                  {sellTimeRangeMeaningful(tier) ? (
+        ) : (
-                    <>
+          <div
-                      {tier.range}
+            style={{
-                      <br />
+              fontSize: 11,
-                    </>
+              color: tokens.muted2,
-                  ) : null}
+              lineHeight: 1.5,
-                  {tier.count}
+              padding: "6px 0 2px",
-                </div>
+            }}
-              </div>
+          >
-            );
+            Мало данных для оценки чувствительности срока продажи к цене.
-          })}
+          </div>
-        </div>
+        )}
       </div>
 
       {/* история цен */}
@@ -339,9 +390,18 @@ export default function AnalyticsView({
               </text>
             ))}
           </g>
-          <g fontFamily={tokens.font.mono} fontSize={11} fill={tokens.muted2}>
+          <g
+            fontFamily={tokens.font.mono}
+            fontSize={11}
+            fill={tokens.muted2}
+            textAnchor="middle"
+          >
             {data.priceHistory.years.map((yr, i) => (
-              <text key={yr} x={histYearX[i]} y={214}>
+              <text
+                key={yr}
+                x={histYearX(i, data.priceHistory.years.length)}
+                y={214}
+              >
                 {yr}
               </text>
             ))}

tradein-mvp/frontend/src/components/trade-in/v2/HeroBar.tsx

@@ -64,6 +64,17 @@ const pdfBtnStyle: CSSProperties = {
   transition: "all .15s",
 };
 
+// M4 — once a result is on screen the primary action is «СКАЧАТЬ PDF-ОТЧЁТ»
+// (re-running the estimate is secondary), so the download becomes the single
+// filled/primary button and «ОЦЕНИТЬ КВАРТИРУ» demotes to outline (ParamsPanel).
+const pdfFilledStyle: CSSProperties = {
+  ...pdfBtnStyle,
+  background: `linear-gradient(90deg, ${tokens.accentDeep}, ${tokens.accent})`,
+  border: `1px solid ${tokens.accent}`,
+  color: tokens.onAccent,
+  boxShadow: "0 2px 10px rgba(46,139,255,.25)",
+};
+
 export default function HeroBar({
   data = HERO_FIXTURE,
   estimateId,
@@ -71,22 +82,29 @@ export default function HeroBar({
   onOpenInfo,
 }: HeroBarProps) {
   const pdfHref = pdfDownloadHref(estimateId);
+  // A downloadable report exists ⇔ the estimate is ready ⇒ the PDF button is the
+  // filled/primary CTA (M4). Otherwise it stays a disabled outline.
+  const pdfFilled = Boolean(pdfHref);
   // Hide the building photo if the asset 404s/400s so the photoBg fill shows
   // instead of a broken-image icon.
   const [imgFailed, setImgFailed] = useState(false);
-  const pdfBtnInner = (
+  const pdfBtnInner = (filled: boolean) => {
-    <>
+    const frame = filled ? "#fff" : "#2e8bff";
-      <svg width="18" height="20" viewBox="0 0 18 20" fill="none" aria-hidden="true">
+    const rule = filled ? "rgba(255,255,255,.75)" : "#6f8195";
-        <path d="M2 1h9l5 5v13H2z" stroke="#2e8bff" strokeWidth="1.2" />
+    return (
-        <path d="M11 1v5h5" stroke="#2e8bff" strokeWidth="1.2" />
+      <>
-        <line x1="5" y1="11" x2="13" y2="11" stroke="#6f8195" />
+        <svg width="18" height="20" viewBox="0 0 18 20" fill="none" aria-hidden="true">
-        <line x1="5" y1="14" x2="13" y2="14" stroke="#6f8195" />
+          <path d="M2 1h9l5 5v13H2z" stroke={frame} strokeWidth="1.2" />
-      </svg>
+          <path d="M11 1v5h5" stroke={frame} strokeWidth="1.2" />
-      <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "1px" }}>
+          <line x1="5" y1="11" x2="13" y2="11" stroke={rule} />
-        СКАЧАТЬ PDF-ОТЧЁТ
+          <line x1="5" y1="14" x2="13" y2="14" stroke={rule} />
-      </span>
+        </svg>
-    </>
+        <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "1px" }}>
-  );
+          СКАЧАТЬ PDF-ОТЧЁТ
+        </span>
+      </>
+    );
+  };
 
   return (
     <div
@@ -100,6 +118,9 @@ export default function HeroBar({
       <style>{`
         .hero-pdf-btn:hover { border-color: ${tokens.accent}; background: rgba(46,139,255,.07); }
         .hero-pdf-btn:active { transform: translateY(1px); }
+        .hero-pdf-btn-filled { transition: all .18s; }
+        .hero-pdf-btn-filled:hover { background: ${tokens.accentDeep}; box-shadow: 0 6px 22px rgba(46,139,255,.4); }
+        .hero-pdf-btn-filled:active { transform: translateY(1px); }
         .hero-calc-btn:hover { border-color: ${tokens.accent}; color: ${tokens.accent}; }
         .hero-coef-row:hover { background: rgba(46,139,255,.09); }
         @keyframes hero-scanv { 0% { transform: translateY(-100%); } 100% { transform: translateY(900%); } }
@@ -197,13 +218,13 @@ export default function HeroBar({
         <div style={{ display: "flex", gap: 12, width: "100%", maxWidth: 440 }}>
           {pdfHref ? (
             <a
-              className="hero-pdf-btn"
+              className={pdfFilled ? "hero-pdf-btn-filled" : "hero-pdf-btn"}
               href={pdfHref}
               target="_blank"
               rel="noopener noreferrer"
-              style={pdfBtnStyle}
+              style={pdfFilled ? pdfFilledStyle : pdfBtnStyle}
             >
-              {pdfBtnInner}
+              {pdfBtnInner(pdfFilled)}
             </a>
           ) : (
             <button
@@ -212,7 +233,7 @@ export default function HeroBar({
               title="Отчёт станет доступен после расчёта оценки"
               style={{ ...pdfBtnStyle, cursor: "not-allowed", opacity: 0.45 }}
             >
-              {pdfBtnInner}
+              {pdfBtnInner(false)}
             </button>
           )}
           {hasEstimate && (

tradein-mvp/frontend/src/components/trade-in/v2/ObjectSummary.tsx

@@ -20,14 +20,13 @@ interface ObjectSummaryProps {
 
 // Audit M11 — name the unnamed «N · XX,XX млн» numbers. Each summary row value
 // is built in mappers.mapSummary as "count · metric"; the metric is different
-// per row and the «млн» medians (Аналоги/Сделки) are NOT the headline median
+// per row. This caption labels each ·-separated token token-for-token. Keyed by
-// (e.median_price_rub is area-normalised to the subject; these are raw medians
+// label content so it matches both the mapper labels ("Продажи рядом") and the
-// of the analog/deal listing prices), so users couldn't tell what they were.
+// older fixture labels ("Продажи в доме"). Sources in mappers.mapSummary:
-// This caption labels each ·-separated token token-for-token. Keyed by label
-// content so it matches both the mapper labels ("Продажи рядом") and the older
-// fixture labels ("Продажи в доме"). Sources in mappers.mapSummary:
 //   Продажи рядом : houseSold · kpi.median_exposure_days
-//   Аналоги       : e.n_analogs · median(e.analogs.map(a => a.price_rub))
+//   Аналоги       : e.n_analogs · e.median_price_rub (H3 — SAME field as the
+//                   02-РЕЗУЛЬТАТ hero «медиана объявлений», not the raw analog
+//                   listing-price median which read far higher over the same set)
 //   Сделки        : dealCount · streetDeals.median_price_rub ?? median(deals)
 //   Аналитика     : kpi.median_exposure_days · -kpi.median_bargain_pct
 function rowHint(label: string): string {
@@ -356,7 +355,7 @@ export function ObjectSummary({
               lineHeight: 1.7,
             }}
           >
-            <span>CV</span>
+            <span>Разброс цен</span>
             <span
               style={{ fontFamily: tokens.font.mono, color: tokens.accent }}
             >

tradein-mvp/frontend/src/components/trade-in/v2/ParamsPanel.tsx

@@ -313,6 +313,10 @@ const styles = `
 .pp-eval-btn:hover{background:${tokens.accentDeep};box-shadow:0 6px 22px rgba(46,139,255,.4)}
 .pp-eval-btn:active{transform:translateY(1px)}
 .pp-eval-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(46,139,255,.35)}
+.pp-eval-btn-secondary{background:transparent;transition:all .18s}
+.pp-eval-btn-secondary:hover{background:rgba(46,139,255,.08)}
+.pp-eval-btn-secondary:active{transform:translateY(1px)}
+.pp-eval-btn-secondary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(46,139,255,.35)}
 `;
 
 // Primary field captions ("АДРЕС", "ПЛОЩАДЬ", "КОМНАТ", …) — the labels the user
@@ -457,6 +461,9 @@ interface ParamsPanelProps {
   onSubmit?: (input: TradeInEstimateInput) => void;
   /** Disables the button + shows a pending label while the estimate is running. */
   isPending?: boolean;
+  /** M4 — once a result is on screen the primary CTA moves to «СКАЧАТЬ PDF-ОТЧЁТ»
+   *  (HeroBar), so «ОЦЕНИТЬ КВАРТИРУ» (a re-run) demotes to a secondary outline. */
+  hasEstimate?: boolean;
   /** Server-side error to surface inline (validation errors are handled locally). */
   error?: string | null;
   /** Prefill for restore-by-id (?id=) — maps API enums back to RU dropdown labels. */
@@ -499,10 +506,14 @@ function initRadiusLabel(radiusM: number | null | undefined): string {
 export default function ParamsPanel({
   onSubmit,
   isPending = false,
+  hasEstimate = false,
   error = null,
   initialValues,
   markers = [],
 }: ParamsPanelProps) {
+  // M4 — once a result is on screen the primary CTA is «СКАЧАТЬ PDF-ОТЧЁТ»
+  // (HeroBar); this button (a re-run) demotes to a secondary outline.
+  const secondaryCta = hasEstimate;
   const [openDd, setOpenDd] = useState<DdKey>(null);
   // РАДИУС combobox a11y state (aria-activedescendant highlight + listbox id).
   const radiusListId = useId();
@@ -1569,10 +1580,10 @@ export default function ParamsPanel({
         </div>
       </div>
 
-      {/* button */}
+      {/* button — filled/primary before a result, outline/secondary after (M4). */}
       <button
         type="button"
-        className="pp-eval-btn"
+        className={secondaryCta ? "pp-eval-btn-secondary" : "pp-eval-btn"}
         onClick={handleSubmit}
         disabled={isPending}
         style={{
@@ -1588,7 +1599,7 @@ export default function ParamsPanel({
           cursor: isPending ? "wait" : "pointer",
           opacity: isPending ? 0.6 : 1,
           fontFamily: tokens.font.sans,
-          color: tokens.onAccent,
+          color: secondaryCta ? tokens.accentDeep : tokens.onAccent,
           flex: "0 0 auto",
         }}
       >
@@ -1604,9 +1615,11 @@ export default function ParamsPanel({
             justifyContent: "center",
             width: 26,
             height: 26,
-            border: "1px solid rgba(255,255,255,.7)",
+            border: `1px solid ${
+              secondaryCta ? tokens.accent : "rgba(255,255,255,.7)"
+            }`,
             borderRadius: "50%",
-            color: tokens.onAccent,
+            color: secondaryCta ? tokens.accentDeep : tokens.onAccent,
           }}
         >
           →

tradein-mvp/frontend/src/components/trade-in/v2/ResultPanel.tsx

@@ -14,7 +14,9 @@ import type { ResultPanelData } from "./mappers";
 
 const {
   accent,
+  accentDeep,
   ink,
+  body,
   body2,
   muted,
   muted2,
@@ -158,7 +160,7 @@ export default function ResultPanel({
             ДОСТОВЕРНОСТЬ: <b style={{ color: ink }}>{data.meta.confidence}</b>
           </span>
           <span>
-            CV{" "}
+            РАЗБРОС ЦЕН{" "}
             <b style={{ color: accent, fontFamily: font.mono }}>
               {data.meta.cv}
             </b>
@@ -176,17 +178,24 @@ export default function ResultPanel({
         }}
       >
         {data.cards.map((card, ci) => {
-          // Price hierarchy (audit H2). The three cards are NOT equal weight:
+          // Price hierarchy (audit H2 + M1). The three cards are NOT equal weight:
           //   ci 0 — РЕКОМЕНДОВАННАЯ ЦЕНА В ОБЪЯВЛЕНИИ (market asking, baseline)
           //   ci 1 — ОЖИДАЕМАЯ ЦЕНА СДЕЛКИ (the real answer → headline)
           //   ci 2 — ДКП · РОСРЕЕСТР (registry reference, ~−43% → demoted)
-          // The headline gets an accent border + tint + glow + larger accent
+          // The headline gets an accent border + tint + glow + a larger accent
           // value so the user can't confuse it with the registry figure; the
           // registry card is demoted to a softer, smaller, muted "СПРАВОЧНО"
-          // tile. All three values stay (honesty); wiring (mapResultPanel) is
+          // tile. Value scale reads expected(40) ≫ asking(30) > ДКП(28).
-          // untouched — emphasis is presentation only.
+          //
-          const isHeadline = ci === 1;
+          // H1 — when the expected card has no prediction (emptyNote), it drops
+          // to an honest empty-state and the accent frame moves onto the asking
+          // card (ci 0) so the panel always has ONE clear headline, never a hole.
+          const expectedEmpty = Boolean(data.cards[1]?.emptyNote);
+          const isEmptyCard = Boolean(card.emptyNote);
           const isRegistry = ci === 2;
+          const headlineIndex = expectedEmpty ? 0 : 1;
+          const isHeadline = !isEmptyCard && ci === headlineIndex;
+          const isAsking = ci === 0;
           return (
           <div
             key={ci}
@@ -225,7 +234,12 @@ export default function ResultPanel({
               style={{
                 fontSize: 9.5,
                 letterSpacing: 1.5,
-                color: isHeadline ? accent : isRegistry ? muted2 : body2,
+                // Contrast follow-up (audit #2266): accent (#2e8bff) on the
+                // headline card's pale infoSoftBg tint measured ≈2.87:1 — below
+                // even the AA "large text" floor (3:1). accentDeep is the same
+                // brand hue, darkened (existing token, not a one-off hex) — it
+                // clears ~4.2:1 here, so the label reads reliably too.
+                color: isHeadline ? accentDeep : isRegistry ? muted2 : body2,
                 fontWeight: isHeadline ? 600 : undefined,
                 lineHeight: 1.6,
               }}
@@ -241,74 +255,133 @@ export default function ResultPanel({
                   marginTop: 3,
                 }}
               >
-                СПРАВОЧНО
+                {/* §M8 — расшифровка «ДКП» один раз на секцию. */}
+                СПРАВОЧНО · ДОГОВОРЫ КУПЛИ-ПРОДАЖИ
               </div>
             )}
-            <div
+            {/* H1 empty-state: no bare «—» / gauge / «· с учётом торга» — just an
-              style={{
+                honest note pointing at the recommended asking price. */}
-                marginTop: 14,
+            {isEmptyCard ? (
-                display: "flex",
-                alignItems: "baseline",
-                gap: 6,
-              }}
-            >
-              <span
-                style={{
-                  fontFamily: font.mono,
-                  fontSize: isHeadline ? 40 : isRegistry ? 28 : 38,
-                  fontWeight: isHeadline ? 600 : 400,
-                  letterSpacing: -1,
-                  color: isHeadline ? accent : isRegistry ? muted : undefined,
-                }}
-              >
-                {card.value}
-              </span>
-              <span
-                style={{
-                  fontSize: 13,
-                  color: muted,
-                  letterSpacing: 1,
-                  whiteSpace: "nowrap",
-                }}
-              >
-                {card.unit}
-              </span>
-            </div>
-            <div
-              style={{
-                fontFamily: font.mono,
-                fontSize: 11,
-                color: muted,
-                marginTop: 10,
-              }}
-            >
-              {card.range}
-            </div>
-            <div
-              style={{
-                fontFamily: font.mono,
-                fontSize: 10,
-                color: muted2,
-                marginTop: 4,
-              }}
-            >
-              {card.ppm}
-            </div>
-            {card.note && (
               <div
                 style={{
-                  fontSize: 9,
+                  marginTop: 12,
-                  color: muted2,
+                  fontSize: 11,
-                  marginTop: 4,
+                  lineHeight: 1.5,
-                  lineHeight: 1.4,
+                  color: body,
-                  maxWidth: "82%",
+                  maxWidth: "94%",
                 }}
               >
-                {card.note}
+                {card.emptyNote}
               </div>
+            ) : (
+              <>
+                <div
+                  style={{
+                    marginTop: 14,
+                    display: "flex",
+                    alignItems: "baseline",
+                    gap: 6,
+                  }}
+                >
+                  <span
+                    style={{
+                      fontFamily: font.mono,
+                      // M1 — asking (30) sits above the ДКП «справочно» tier (28)
+                      // yet clearly below the accent headline (40).
+                      fontSize: isHeadline ? 40 : isRegistry ? 28 : 30,
+                      fontWeight: isHeadline ? 600 : 400,
+                      letterSpacing: -1,
+                      // Contrast follow-up (audit #2266) — accentDeep, not
+                      // accent, for the same reason as the title label above.
+                      color: isHeadline
+                        ? accentDeep
+                        : isRegistry
+                          ? muted
+                          : isAsking
+                            ? ink
+                            : undefined,
+                    }}
+                  >
+                    {card.value}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: 13,
+                      color: muted,
+                      letterSpacing: 1,
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {card.unit}
+                  </span>
+                </div>
+                {card.range && (
+                  <div
+                    style={{
+                      fontFamily: font.mono,
+                      fontSize: 11,
+                      color: muted,
+                      marginTop: 10,
+                    }}
+                  >
+                    {card.range}
+                  </div>
+                )}
+                {card.ppm && (
+                  <div
+                    style={{
+                      fontFamily: font.mono,
+                      fontSize: 10,
+                      color: muted2,
+                      marginTop: 4,
+                    }}
+                  >
+                    {card.ppm}
+                  </div>
+                )}
+                {card.note && (
+                  <div
+                    style={{
+                      fontSize: 9,
+                      color: muted2,
+                      marginTop: 4,
+                      lineHeight: 1.4,
+                      maxWidth: "82%",
+                    }}
+                  >
+                    {card.note}
+                  </div>
+                )}
+              </>
             )}
 
-            {card.bars ? (
+            {isEmptyCard ? (
+              <button
+                type="button"
+                className="rp-more"
+                onClick={() => onNavigate(card.nav)}
+                aria-label={`Подробнее — ${card.title.join(" ")}`}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  gap: 4,
+                  cursor: "pointer",
+                  fontSize: 9,
+                  letterSpacing: 0.3,
+                  color: accent,
+                  width: "100%",
+                  background: "none",
+                  border: "none",
+                  padding: 0,
+                  margin: 0,
+                  marginTop: 16,
+                  fontFamily: "inherit",
+                }}
+              >
+                Подробнее <span>→</span>
+              </button>
+            ) : card.bars ? (
               <div
                 style={{
                   display: "flex",
@@ -363,7 +436,50 @@ export default function ResultPanel({
                 </button>
               </div>
             ) : (
-              <>
+              // M2 — calm delta pill (was a 51px circular gauge that read like a
+              // tech "занижение" indicator). Full text «−18% к цене объявления»,
+              // neutral accentDeep on a soft-blue chip, tabular-nums.
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 10,
+                  marginTop: 14,
+                }}
+              >
+                {card.delta ? (
+                  <span
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "baseline",
+                      gap: 5,
+                      background: infoSoftBg,
+                      border: `1px solid ${lineSoft}`,
+                      borderRadius: 20,
+                      padding: "3px 10px",
+                      color: accentDeep,
+                      fontFamily: font.sans,
+                      fontVariantNumeric: "tabular-nums",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontFamily: font.mono,
+                        fontSize: 12,
+                        fontWeight: 600,
+                      }}
+                    >
+                      {card.delta}
+                    </span>
+                    <span style={{ fontSize: 9.5, letterSpacing: 0.2 }}>
+                      {card.deltaLabel}
+                    </span>
+                  </span>
+                ) : (
+                  <span />
+                )}
                 <button
                   type="button"
                   className="rp-more"
@@ -372,87 +488,22 @@ export default function ResultPanel({
                   style={{
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "flex-end",
                     gap: 4,
                     cursor: "pointer",
                     fontSize: 9,
                     letterSpacing: 0.3,
                     color: accent,
-                    width: "100%",
+                    whiteSpace: "nowrap",
                     background: "none",
                     border: "none",
                     padding: 0,
                     margin: 0,
-                    marginTop: 16,
                     fontFamily: "inherit",
                   }}
                 >
                   Подробнее <span>→</span>
                 </button>
-                <div
+              </div>
-                  style={{
-                    position: "absolute",
-                    right: 14,
-                    top: 13,
-                    width: 58,
-                    height: 58,
-                  }}
-                >
-                  <svg width="58" height="58" viewBox="0 0 58 58" aria-hidden="true">
-                    <circle
-                      cx="29"
-                      cy="29"
-                      r="25"
-                      fill="none"
-                      stroke={track}
-                      strokeWidth="3"
-                    />
-                    <circle
-                      cx="29"
-                      cy="29"
-                      r="25"
-                      fill="none"
-                      stroke={accent}
-                      strokeWidth="3"
-                      strokeLinecap="round"
-                      strokeDasharray="157"
-                      strokeDashoffset="140"
-                      transform="rotate(-90 29 29)"
-                    />
-                  </svg>
-                  <div
-                    style={{
-                      position: "absolute",
-                      inset: 0,
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center",
-                    }}
-                  >
-                    <span
-                      style={{
-                        fontFamily: font.mono,
-                        fontSize: 13,
-                        fontWeight: 500,
-                        color: accent,
-                      }}
-                    >
-                      {card.delta}
-                    </span>
-                    <span
-                      style={{
-                        fontSize: 6.5,
-                        letterSpacing: 1,
-                        color: muted2,
-                        marginTop: 1,
-                      }}
-                    >
-                      {card.deltaLabel}
-                    </span>
-                  </div>
-                </div>
-              </>
             )}
           </div>
           );
@@ -464,9 +515,11 @@ export default function ResultPanel({
           не читался как «неуверенность расчёта». */}
       <div
         style={{
-          fontSize: 10,
+          // M3 — было 10px muted-микропринт; повышено до 12px body, чтобы
+          // ключевая honest-оговорка о разбросе читалась, а не терялась.
+          fontSize: 12,
           lineHeight: 1.5,
-          color: hint,
+          color: body,
           marginTop: -4,
         }}
       >

tradein-mvp/frontend/src/components/trade-in/v2/SectionOverlay.tsx

@@ -50,10 +50,19 @@ export default function SectionOverlay({
   // effect (deps []) never re-runs / re-traps focus on parent re-renders even
   // though page.tsx passes a fresh arrow each render.
   const dialogRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
   const lastFocused = useRef<Element | null>(null);
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
 
+  // M7 — the overlay body is ONE scroller shared by every section view; switching
+  // sections (nav within the overlay) used to inherit the previous section's
+  // scroll offset, dropping the user into the middle of the new view. Reset to the
+  // top whenever the active section changes.
+  useEffect(() => {
+    if (bodyRef.current) bodyRef.current.scrollTop = 0;
+  }, [active]);
+
   useEffect(() => {
     const dialog = dialogRef.current;
     // Remember the trigger, then move focus into the dialog.
@@ -294,6 +303,7 @@ export default function SectionOverlay({
 
         {/* overlay body */}
         <div
+          ref={bodyRef}
           style={{
             flex: 1,
             minHeight: 0,

tradein-mvp/frontend/src/components/trade-in/v2/SourcesView.tsx

@@ -228,7 +228,8 @@ const AD_COLS: Col<AdRowData>[] = [
   {
     key: "price",
     fr: "1.1fr",
-    head: <span role="columnheader">СТОИМОСТЬ</span>,
+    // §M8 — унификация терминологии: везде «цена» (был «СТОИМОСТЬ»).
+    head: <span role="columnheader">ЦЕНА</span>,
     cell: (r) => (
       <span role="cell" style={monoInk}>
         {r.price}
@@ -475,7 +476,7 @@ export default function SourcesView({
             </div>
           </div>
           <div style={headerRight}>
-            Обновлено: —<br />
+            {/* §M8 — литеральный «Обновлено: —» скрыт (нет реального значения). */}
             Источников:{" "}
             <b style={{ color: tokens.muted }}>{data.sourceCount ?? "—"}</b>
           </div>
@@ -493,9 +494,11 @@ export default function SourcesView({
             unit={`млн ₽ · ${data.marketAds.kpi.ppm} ₽/м²`}
           />
           <KpiCell
-            label="ДИАПАЗОН P25–P75"
+            // §M8 — «СРЕДНИЕ 50% РЫНКА» вместо статистического «ДИАПАЗОН P25–P75»
+            // (P25–P75 оставлен в скобках); «CV» → «разброс» (внутренний термин).
+            label="СРЕДНИЕ 50% РЫНКА (P25–P75)"
             value={data.marketAds.kpi.range}
-            unit={`млн · CV ${data.marketAds.kpi.cv}`}
+            unit={`млн · разброс ${data.marketAds.kpi.cv}`}
             valueColor={tokens.accent}
             last
           />

tradein-mvp/frontend/src/components/trade-in/v2/fixtures.ts

@@ -624,7 +624,7 @@ export const dropdownOptions: DropdownOptions = {
 export const locationFactors: LocationFactors = {
   coef: "0.87",
   intro:
-    "Показывает, как адрес корректирует стоимость относительно медианы по Екатеринбургу. 1.00 — средний уровень. 0.87 означает, что локация снижает цену примерно на 13% из-за баланса факторов ниже.",
+    "Показывает, как адрес корректирует цену относительно медианы по Екатеринбургу. 1.00 — средний уровень. 0.87 означает, что локация снижает цену примерно на 13% из-за баланса факторов ниже.",
   formula: { base: "11,29 млн", coef: "0.87", result: "9,82 млн ₽" },
   positives: [
     { label: "Центр города, пешая доступность ключевых точек", delta: "+0.06" },

tradein-mvp/frontend/src/components/trade-in/v2/mappers.ts

@@ -262,12 +262,15 @@ function coeffVar(values: number[]): number | null {
   return (Math.sqrt(variance) / mean) * 100;
 }
 
+// «Разброс цен» (§M8 / #1993): the внутренний term "CV" (coefficient of
+// variation) is not surfaced to users anymore, and the витрина rounds it to a
+// whole percent ("42%", not "42,2%") — the extra decimal implied a false
+// precision for what is a rough spread indicator.
 function cvStr(values: number[]): string {
   const cv = coeffVar(values);
   return cv != null
     ? `${cv.toLocaleString("ru-RU", {
-        minimumFractionDigits: 1,
+        maximumFractionDigits: 0,
-        maximumFractionDigits: 1,
       })}%`
     : "—";
 }
@@ -857,6 +860,14 @@ export function mapResultPanel(
 ): ResultPanelData {
   const dealTier = resolveDealTier(e, streetDeals);
 
+  // H1 — the «ОЖИДАЕМАЯ ЦЕНА СДЕЛКИ» flagship card must NOT render as a hole of
+  // bare «—» when the model has no expected-sold prediction. When it is missing
+  // we emit an honest empty-state (emptyNote) and drop the value/range/ppm/delta;
+  // the view then moves the accent frame onto the «рекомендованная цена» card.
+  const hasExpected =
+    e.expected_sold_price_rub != null &&
+    Number.isFinite(e.expected_sold_price_rub);
+
   const cards: ResultCard[] = [
     {
       title: ["РЕКОМЕНДОВАННАЯ ЦЕНА", "В ОБЪЯВЛЕНИИ"],
@@ -869,21 +880,29 @@ export function mapResultPanel(
     },
     {
       title: ["ОЖИДАЕМАЯ ЦЕНА", "СДЕЛКИ"],
-      value: fmtMln(e.expected_sold_price_rub),
+      value: hasExpected ? fmtMln(e.expected_sold_price_rub) : "—",
       unit: "млн ₽",
-      range: rangeLine(
+      range: hasExpected
-        e.expected_sold_range_low_rub,
+        ? rangeLine(
-        e.expected_sold_range_high_rub,
+            e.expected_sold_range_low_rub,
-      ),
+            e.expected_sold_range_high_rub,
-      ppm: `${fmtPpm(e.expected_sold_per_m2)} · с учётом торга`,
+          )
+        : "",
+      ppm: hasExpected ? `${fmtPpm(e.expected_sold_per_m2)} · с учётом торга` : "",
       delta:
-        e.asking_to_sold_ratio != null
+        hasExpected && e.asking_to_sold_ratio != null
           ? fmtPct((e.asking_to_sold_ratio - 1) * 100)
-          : "—",
+          : undefined,
-      // §1.3: разрыв «цена в объявлении → ожидаемая сделка», НЕ скидка сервиса.
+      // §1.3 / M2: разрыв «цена в объявлении → ожидаемая сделка», НЕ скидка
-      // «К ОБЪЯВЛ.» однозначнее прежнего «К РЫНКУ» (не читается как «скидка от нас»).
+      // сервиса. Полная формулировка «к цене объявления» (единая с §M8) — вместо
-      deltaLabel: "К ОБЪЯВЛ.",
+      // обрубка «К ОБЪЯВЛ.»; рендерится спокойной пилюлей, не круговым гейджем.
+      deltaLabel: "к цене объявления",
+      // H1 empty-state message (only when there is no expected-sold prediction).
+      emptyNote: hasExpected
+        ? undefined
+        : "Недостаточно данных для прогноза цены сделки — ориентируйтесь на рекомендованную цену в объявлении",
       note:
+        hasExpected &&
         dealTier != null &&
         e.expected_sold_price_rub != null &&
         Number.isFinite(e.expected_sold_price_rub) &&
@@ -972,11 +991,18 @@ export function mapSummary(
       ? `${houseSold}${houseExp != null ? ` · ${houseExp} дн` : ""}`
       : "—";
 
-  const analogMedian = median(e.analogs.map((a) => a.price_rub));
+  // H3 — «медиана объявлений» in the СВОДКА rail MUST match the hero/02-РЕЗУЛЬТАТ
+  // headline (e.median_price_rub, the subject-area-normalised median). It used to
+  // show median(analogs.price_rub) — the RAW median of the analog LISTING totals
+  // across mixed areas — which for a small subject reads far higher (e.g. 14,23
+  // млн vs the hero's 8,99 млн over the same 37 analogs) and looked like two
+  // contradictory medians on one screen. Now both surfaces read the same field.
   const row2Value =
     e.n_analogs > 0
       ? `${e.n_analogs}${
-          analogMedian != null ? ` · ${fmtMln(analogMedian)} млн` : ""
+          Number.isFinite(e.median_price_rub)
+            ? ` · ${fmtMln(e.median_price_rub)} млн`
+            : ""
         }`
       : "—";
 
@@ -1204,7 +1230,17 @@ function dealMeta(l: AnalogLot): string {
  * touches the comma-splitting parseAddress.
  */
 function deglueAddr(addr: string): string {
-  return addr.replace(/([а-яёa-z\d])([А-ЯЁ][а-яё])/g, "$1 $2");
+  return (
+    addr
+      .replace(/([а-яёa-z\d])([А-ЯЁ][а-яё])/g, "$1 $2")
+      // §M8 — metro proximity glued straight into the address with no spaces
+      // ("Геологическая11–15 мин.Чкаловская16–20"): (a) split a Cyrillic word
+      // from a following digit ("Геологическая11" → "Геологическая 11"), and
+      // (b) separate a "мин." run from the next station name with " · "
+      // ("мин.Чкаловская" → "мин. · Чкаловская"). Display cleanup only.
+      .replace(/([а-яё])(\d)/g, "$1 $2")
+      .replace(/(мин\.)\s*([А-ЯЁ])/g, "$1 · $2")
+  );
 }
 
 // ── 04 ПРОДАЖИ В ДОМЕ (HistoryView) ─────────────────────────────────────────
@@ -1393,8 +1429,11 @@ function buildSellTime(s: SellTimeSensitivityResponse | null): SellTimeTier[] {
 // [58,885]. The Y domain is DATA-DRIVEN (zoomed to the real median ₽/м² band)
 // so a narrow series like 120–160k fills the plot instead of flat-lining against
 // a fixed 0–200k scale; the axis labels are emitted as yTicks for the 5 gridlines.
-const PH_X_LEFT = 58;
+// PH_X_LEFT/PH_X_RIGHT/phYearX are exported — AnalyticsView's year-axis labels
-const PH_X_RIGHT = 885;
+// (M5) must share this EXACT geometry with the polyline vertices below, or a
+// label drifts off its own dot. Single source of truth, no copy-pasted consts.
+export const PH_X_LEFT = 58;
+export const PH_X_RIGHT = 885;
 const PH_Y_TOP = 20; // top gridline pixel (high value)
 const PH_Y_BOTTOM = 195; // bottom gridline pixel (low value)
 const PH_Y_SPAN = PH_Y_BOTTOM - PH_Y_TOP; // 175
@@ -1403,7 +1442,7 @@ const PH_GRID_Y = [20, 65, 110, 155, 195]; // 5 gridlines (top → bottom)
 // the union of their finite medians so the two series share one axis.
 const PH_SERIES_SOURCES = ["avito_imv", "yandex_valuation"];
 
-function phYearX(i: number, n: number): number {
+export function phYearX(i: number, n: number): number {
   if (n <= 1) return (PH_X_LEFT + PH_X_RIGHT) / 2;
   return PH_X_LEFT + ((PH_X_RIGHT - PH_X_LEFT) * i) / (n - 1);
 }
@@ -1802,7 +1841,9 @@ export function mapSources(
     kpi: {
       count: dealCount > 0 ? String(dealCount) : "—",
       median: dealMedianRub != null ? fmtMln(dealMedianRub) : "—",
-      delta: deltaPct != null ? `${fmtPct(deltaPct)} к рынку` : "—",
+      // §M8 — единая формулировка дельт: всё считается «относительно цен
+      // объявлений» (deltaPct = медиана сделок / медиана объявлений − 1).
+      delta: deltaPct != null ? `${fmtPct(deltaPct)} к цене объявления` : "—",
       range: mlnRangeSp(dealLo, dealHi),
     },
   };
@@ -1887,8 +1928,8 @@ function cacheStatus(iso: string | null | undefined): {
  * 07 ПРЕДЫДУЩИЕ ОЦЕНКИ: таблица последних оценок + 3 KPI, всё посчитано на
  * фронте из per-user /history (null → пустая таблица + KPI с "—").
  *   rows  — addr/время/статус по каждой строке (src всегда "—", TODO BE-1).
- *   kpis  — ВСЕГО ОЦЕНОК (length) · СРЕДНЯЯ ЦЕНА (avg median_price, млн) ·
+ *   kpis  — ВСЕГО ОЦЕНОК (length) · СРЕДНЯЯ ЦЕНА (avg median_price, млн).
- *           ПОВТОРНЫЕ АДРЕСА (доля переоценок = (всего − уникальных)/всего).
+ *           «ПОВТОРНЫЕ АДРЕСА» убран (§M8 — внутренняя ops-метрика).
  */
 export function mapCache(history: EstimateHistoryItem[] | null): CacheData {
   const list = history ?? [];
@@ -1896,7 +1937,10 @@ export function mapCache(history: EstimateHistoryItem[] | null): CacheData {
   const rows: CacheRow[] = list.map((h) => {
     const { status, statusColor } = cacheStatus(h.created_at);
     return {
-      addr: h.address || "—",
+      // §M8 — de-glue metro/address runs the same way as the analog/deal rows
+      // (these are the user's own past-estimate addresses, often geocoded with
+      // metro proximity jammed on with no separators).
+      addr: h.address ? deglueAddr(h.address) : "—",
       time: fmtCacheTime(h.created_at),
       src: "—", // TODO BE-1: /history без sources_used → N/7 недоступно
       status,
@@ -1916,17 +1960,9 @@ export function mapCache(history: EstimateHistoryItem[] | null): CacheData {
       ? prices.reduce((a, b) => a + b, 0) / prices.length
       : null;
 
-  // KPI 3 — доля переоценок: (всего адресов − уникальных) / всего адресов.
+  // §M8 — «ПОВТОРНЫЕ АДРЕСА» (доля переоценок) was an internal ops metric with no
-  const seen = new Map<string, number>();
+  // meaning for the end user, so it is dropped from this витрина. Only the two
-  for (const h of list) {
+  // user-relevant KPIs remain.
-    const key = (h.address ?? "").trim().toLowerCase();
-    if (!key) continue;
-    seen.set(key, (seen.get(key) ?? 0) + 1);
-  }
-  const withAddr = [...seen.values()].reduce((a, b) => a + b, 0);
-  const dupPct =
-    withAddr > 0 ? ((withAddr - seen.size) / withAddr) * 100 : null;
-
   const kpis: CacheKpi[] = [
     {
       label: "ВСЕГО ОЦЕНОК",
@@ -1939,14 +1975,6 @@ export function mapCache(history: EstimateHistoryItem[] | null): CacheData {
       unit: avg != null ? "млн ₽" : undefined,
       sub: "по проведённым оценкам",
     },
-    {
-      // fmtPct не используем намеренно: он добавляет знак (+18%) и второй "%" —
-      // для доли это неверно; рендерим число + unit "%" (как в дизайне).
-      label: "ПОВТОРНЫЕ АДРЕСА",
-      value: dupPct != null ? String(Math.round(dupPct)) : "—",
-      unit: dupPct != null ? "%" : undefined,
-      sub: "доля переоценок",
-    },
   ];
 
   return { rows, kpis };

tradein-mvp/frontend/src/components/trade-in/v2/types.ts

@@ -38,12 +38,16 @@ export interface ResultCard {
   ppm: string;
   /** Mini-histogram column heights in % (cards 1 & 3). */
   bars?: number[];
-  /** Donut delta value, e.g. "−11%" (card 2). */
+  /** Delta value, e.g. "−18%" (card 2). Rendered as a calm pill, not a gauge. */
   delta?: string;
-  /** Donut caption, e.g. "К РЫНКУ" (card 2). */
+  /** Delta pill caption, e.g. "к цене объявления" (card 2). */
   deltaLabel?: string;
   /** Reconciliation note under the value (card 2: expected price vs ДКП median). */
   note?: string;
+  /** H1 empty-state message: when set (card 2, no expected-sold prediction) the
+   *  card renders this instead of value/range/ppm/delta, and the panel moves the
+   *  accent frame onto the «рекомендованная цена» card. */
+  emptyNote?: string;
   /** Nav index opened by the card's "Подробнее →" link. */
   nav: number;
 }