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

@@ -20,6 +20,7 @@ const {
   muted3,
   line,
   line2,
+  line3,
   lineSoft,
   bracket,
   barLo,
@@ -27,6 +28,7 @@ const {
   track,
   success,
   hint,
+  scatterDeal,
   disabledBorder,
   disabledValue,
   disabledLabel,
@@ -442,7 +444,7 @@ export default function ResultPanel({
           borderRadius: 8,
           padding: "18px 20px",
           display: "grid",
-          gridTemplateColumns: "1fr 1fr",
+          gridTemplateColumns: "1fr 168px 1fr",
           gap: 24,
           alignItems: "center",
           flex: "0 0 auto",
@@ -530,6 +532,190 @@ export default function ResultPanel({
           </div>
         </div>
 
+        {/* radar — price × sell-time scatter */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 6,
+          }}
+        >
+          <div style={{ fontSize: 8, letterSpacing: 1.5, color: muted2 }}>
+            ЦЕНА × СРОК ПРОДАЖИ
+          </div>
+          <svg width="168" height="140" viewBox="0 0 168 140" fill="none">
+            <g stroke="#e3ecf4" strokeWidth="1">
+              <line x1="34" y1="38" x2="158" y2="38" />
+              <line x1="34" y1="74" x2="158" y2="74" />
+              <line x1="96" y1="10" x2="96" y2="110" />
+            </g>
+            <line
+              x1="34"
+              y1="10"
+              x2="34"
+              y2="110"
+              stroke={line3}
+              strokeWidth="1"
+            />
+            <line
+              x1="34"
+              y1="110"
+              x2="158"
+              y2="110"
+              stroke={line3}
+              strokeWidth="1"
+            />
+            <line
+              x1="40"
+              y1="100"
+              x2="150"
+              y2="30"
+              stroke={accent}
+              strokeWidth="1"
+              strokeDasharray="3 4"
+              opacity="0.45"
+            />
+            <g fill={scatterDeal}>
+              {data.scatterMini.deals.map((p, i) => (
+                <circle key={i} cx={p.x} cy={p.y} r={p.r} />
+              ))}
+            </g>
+            <g fill={accent}>
+              {data.scatterMini.analogs.map((p, i) => (
+                <circle key={i} cx={p.x} cy={p.y} r={p.r} />
+              ))}
+            </g>
+            <circle
+              cx={data.scatterMini.subject.x}
+              cy={data.scatterMini.subject.y}
+              r={data.scatterMini.subject.r}
+              fill={ink}
+            />
+            <circle
+              cx={data.scatterMini.subject.x}
+              cy={data.scatterMini.subject.y}
+              r="6.5"
+              fill="none"
+              stroke={ink}
+              strokeWidth="1"
+              opacity="0.4"
+            />
+            <g
+              fontFamily={font.mono}
+              fontSize="6.5"
+              fill={muted2}
+              textAnchor="end"
+            >
+              {data.scatterMini.yTicks.map((t, i) => (
+                <text key={i} x={30} y={t.y}>
+                  {t.label}
+                </text>
+              ))}
+            </g>
+            <g
+              fontFamily={font.mono}
+              fontSize="6.5"
+              fill={muted2}
+              textAnchor="middle"
+            >
+              {data.scatterMini.xTicks.map((t, i) => (
+                <text key={i} x={t.x} y={120}>
+                  {t.label}
+                </text>
+              ))}
+            </g>
+            <text
+              x="96"
+              y="134"
+              fontSize="6.5"
+              letterSpacing="1"
+              fill={muted2}
+              textAnchor="middle"
+            >
+              СРОК ПРОДАЖИ, ДН
+            </text>
+            <text
+              x="11"
+              y="60"
+              fontSize="6.5"
+              letterSpacing="1"
+              fill={muted2}
+              textAnchor="middle"
+              transform="rotate(-90 11 60)"
+            >
+              ЦЕНА ПРОДАЖИ
+            </text>
+          </svg>
+          <div
+            style={{
+              display: "flex",
+              gap: 12,
+              fontSize: 7.5,
+              letterSpacing: 0.5,
+              color: muted2,
+            }}
+          >
+            <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+              <span
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: "50%",
+                  background: accent,
+                }}
+              />
+              аналоги
+            </span>
+            <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+              <span
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: "50%",
+                  background: scatterDeal,
+                }}
+              />
+              сделки
+            </span>
+            <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
+              <span
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: "50%",
+                  background: ink,
+                }}
+              />
+              объект
+            </span>
+          </div>
+          <button
+            type="button"
+            className="rp-more"
+            onClick={() => onNavigate(3)}
+            aria-label="Подробнее — цена и срок продажи"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              cursor: "pointer",
+              fontSize: 9,
+              letterSpacing: 0.3,
+              color: accent,
+              background: "none",
+              border: "none",
+              padding: 0,
+              margin: 0,
+              marginTop: 2,
+              fontFamily: "inherit",
+            }}
+          >
+            Подробнее <span>→</span>
+          </button>
+        </div>
+
         {/* right range — deals */}
         <div>
           <div