lct-16 и половина lct-19: разбор, отчёт, внешний монитор, эталон

Эталонный диалог собирается кодом из фактов и чек-листа: написанный
руками, он разошёлся бы с фактами при первой же правке сценария,
и курсанта оштрафовали бы за правильный ответ.

Отчёт: метрики фактом против норматива со ссылкой, отметка E1 на каждый
недобытый факт с эталонным вопросом, расхождение самооценки — что
курсант заметил сам, чего не заметил, что отметил зря. Не заметил —
самое ценное для разбора.

Внешний монитор — не отдельное приложение, а другой режим отрисовки тех
же событий: крупный таймер опроса, ход разговора, карточка, после оценки
разбор на весь экран.

Коррекция преподавателем сохраняет автооценку рядом: видно, что
скорректировано и кем.

Найдено: все метрики весили одинаково, и курсант, не задавший ни одного
вопроса, но заполнивший карточку руками, получал 87 из 100. Предварительные
веса (полнота опроса — 4) дают 74; окончательные утверждает методист,
вопрос записан в DEBRIEF.md.

frontend/src/features/debrief/Debrief.tsx

@@ -0,0 +1,148 @@
+// Разбор после звонка — главный учебный момент занятия.
+//
+// Ни одной отметки без обоснования: у каждой есть код, факт и норматив.
+// По каждому пропущенному пункту видно, каким был эталонный вопрос
+// (docs/product/DEBRIEF.md).
+
+import type { SessionReport } from "@/shared/types/generated";
+
+import { Radar } from "./Radar";
+
+export function Debrief({ report, big = false }: { report: SessionReport; big?: boolean }) {
+  const questions = new Map(report.reference_questions.map((item) => [item.checklist_id, item.question]));
+  const diff = report.self_assessment_diff;
+  // Поля со значениями по умолчанию приходят из контракта необязательными.
+  const unnoticed = diff?.unnoticed ?? [];
+  const noticed = diff?.noticed ?? [];
+  const overcautious = diff?.overcautious ?? [];
+  const notes = report.notes ?? [];
+
+  return (
+    <section className={big ? "debrief debrief-big" : "debrief"}>
+      <h2>
+        Разбор · оценка {report.score_final.toFixed(0)} из 100
+        {report.overridden_by && ` · скорректировано (${report.overridden_by}), автооценка ${report.score_auto.toFixed(0)}`}
+      </h2>
+
+      <div className="columns">
+        <section>
+          <h3>Нормативы и факты</h3>
+          <table className="grid">
+            <tbody>
+              {report.metrics.map((metric) => (
+                <tr key={metric.key}>
+                  <th>{metric.title}</th>
+                  <td className={metric.passed ? "state-ok" : "state-violated"}>
+                    {metric.fact} · норматив {metric.norm}
+                    {metric.ref && <span className="ref"> ({metric.ref})</span>}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <h3>Отметки</h3>
+          <table className="grid">
+            <tbody>
+              {report.findings.map((finding, index) => (
+                <tr key={index}>
+                  <th>{finding.code}</th>
+                  <td>
+                    {finding.summary}
+                    <div className="ref">{finding.fact}{finding.norm && ` · ${finding.norm}`}</div>
+                  </td>
+                </tr>
+              ))}
+              {report.findings.length === 0 && <tr><td colSpan={2}>ошибок не найдено</td></tr>}
+            </tbody>
+          </table>
+        </section>
+
+        <section>
+          <h3>Компетенции</h3>
+          <Radar values={report.competencies} size={big ? 320 : 220} />
+
+          {report.missed_checklist.length > 0 && (
+            <>
+              <h3>Пропущенные вопросы</h3>
+              <table className="grid">
+                <tbody>
+                  {report.missed_checklist.map((id) => (
+                    <tr key={id}>
+                      <th>{id}</th>
+                      <td>эталонный вопрос: «{questions.get(id)}»</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </>
+          )}
+
+          {diff && (
+            <>
+              <h3>Самооценка</h3>
+              <table className="grid">
+                <tbody>
+                  <tr>
+                    <th>Не заметил, что пропустил</th>
+                    <td className={unnoticed.length ? "state-violated" : ""}>
+                      {unnoticed.map((id) => questions.get(id) ?? id).join("; ") || "—"}
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>Заметил сам</th>
+                    <td>{noticed.map((id) => questions.get(id) ?? id).join("; ") || "—"}</td>
+                  </tr>
+                  <tr>
+                    <th>Отметил зря — спрашивал</th>
+                    <td>{overcautious.map((id) => questions.get(id) ?? id).join("; ") || "—"}</td>
+                  </tr>
+                  {report.self_assessment?.comment && (
+                    <tr><th>Комментарий курсанта</th><td>{report.self_assessment.comment}</td></tr>
+                  )}
+                </tbody>
+              </table>
+            </>
+          )}
+
+          {report.hints_used.length > 0 && (
+            <>
+              <h3>Использованные подсказки</h3>
+              <table className="grid">
+                <tbody>
+                  {report.hints_used.map((hint, index) => (
+                    <tr key={index}><th>{hint.checklist_id}</th><td>{hint.question}</td></tr>
+                  ))}
+                </tbody>
+              </table>
+            </>
+          )}
+        </section>
+      </div>
+
+      <h3>Транскрипт</h3>
+      <table className="grid">
+        <tbody>
+          {report.transcript.map((line) => {
+            const marks = report.findings.filter((finding) => finding.transcript_ref === line.ref);
+            const note = notes.find((item) => item.transcript_ref === line.ref);
+            return (
+              <tr key={line.ref}>
+                <th>{line.speaker === "caller" ? "звонящий" : "оператор"}</th>
+                <td>
+                  {line.text}
+                  {marks.map((mark, index) => (
+                    <div key={index} className="state-violated" title={`${mark.fact} · ${mark.norm ?? ""}`}>
+                      {mark.code}: {mark.summary}
+                    </div>
+                  ))}
+                  {note && <div className="ref">пометка преподавателя: {note.text}</div>}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </section>
+  );
+}

frontend/src/features/debrief/Radar.tsx

@@ -0,0 +1,48 @@
+// Радар компетенций: проекция уже посчитанных метрик, без пересчёта весов.
+// Преподаватель читает его за секунду: где провал — там тема следующего занятия
+// (docs/product/METHODOLOGY.md).
+
+import type { CompetencyScore } from "@/shared/types/generated";
+
+export const COMPETENCY_LABELS: Record<string, string> = {
+  intake: "Приём вызова",
+  interview: "Опрос",
+  card: "Карточка",
+  routing: "Маршрутизация",
+  norms: "Нормативы",
+  communication: "Коммуникация",
+};
+
+export function Radar({ values, size = 220 }: { values: CompetencyScore[]; size?: number }) {
+  if (values.length < 3) return null;
+  const center = size / 2;
+  const radius = center - 28;
+
+  const point = (index: number, value: number) => {
+    const angle = (Math.PI * 2 * index) / values.length - Math.PI / 2;
+    return [center + radius * value * Math.cos(angle), center + radius * value * Math.sin(angle)];
+  };
+  const polygon = values.map((item, index) => point(index, item.value).join(",")).join(" ");
+
+  return (
+    <svg width={size} height={size} className="radar" role="img" aria-label="радар компетенций">
+      {[0.25, 0.5, 0.75, 1].map((ring) => (
+        <polygon
+          key={ring}
+          points={values.map((_, index) => point(index, ring).join(",")).join(" ")}
+          fill="none"
+          stroke="var(--line)"
+        />
+      ))}
+      <polygon points={polygon} fill="rgba(31,111,61,0.18)" stroke="var(--ok)" strokeWidth={2} />
+      {values.map((item, index) => {
+        const [x, y] = point(index, 1.16);
+        return (
+          <text key={item.competency} x={x} y={y} textAnchor="middle" fontSize={10}>
+            {COMPETENCY_LABELS[item.competency] ?? item.competency}
+          </text>
+        );
+      })}
+    </svg>
+  );
+}