feat: итог отправки в заголовке истории согласования

Чтобы понять, чем закончилась отправка, приходилось читать все её события.
Теперь рядом с номером отправки — плашка итога: возврат/отказ, «В работе»,
если заявка сейчас у кого-то на шаге, иначе последнее решение. Правила —
в чистой функции roundOutcome, покрыты тестами.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/webparts/requestPortal/shared/approval/history/ApprovalHistory.module.scss

@@ -1,25 +1,36 @@
 @import '../../../../../styles/design-tokens';
 
-// Ширина колонки со временем — под «29.09.2026 11:02»; уже — текст переносится.
-$time-col-width: 124px;
-// Ниже этой ширины время встаёт над текстом события, а не слева от него.
-$feed-stack-breakpoint: 640px;
+// Кружок события на линии ленты.
+$marker-size: 24px;
+// Толщина линии, соединяющей события.
+$line-width: 2px;
+// Зазор между событиями — линия обязана его перекрыть, иначе рвётся.
+$event-gap: $sp-4;
 
 .feed {
   display: flex;
   flex-direction: column;
-  gap: $sp-4;
+  gap: $sp-5;
 }
 
 .round {
   display: flex;
   flex-direction: column;
-  gap: $sp-2;
+  gap: $sp-3;
 }
 
+// Номер отправки + плашка итога (см. RoundTitle). Капслок — только у номера:
+// повесь его на весь заголовок, и плашка унаследовала бы его вместе с разрядкой.
 .roundTitle {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $sp-1 $sp-2;
   padding-bottom: $sp-1;
   border-bottom: 1px solid $gray-200;
+}
+
+.roundNumber {
   font-size: $fs-overline;
   font-weight: 600;
   letter-spacing: 1.4px;
@@ -30,62 +41,122 @@ $feed-stack-breakpoint: 640px;
 .events {
   display: flex;
   flex-direction: column;
-  gap: $sp-3;
+  gap: $event-gap;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .event {
+  position: relative;
   display: flex;
   align-items: flex-start;
   gap: $sp-3;
   font-size: $fs-sm;
   color: $gray-900;
-}
 
-.current {
-  padding: $sp-2 $sp-3;
-  border-radius: $r-sm;
-  background: $gold-50;
+  // Линия от кружка к следующему событию — лента читается как хронология, а не
+  // как стопка одинаковых строк. У последнего события отправки линии нет:
+  // отправки разделены заголовками, а не одной сплошной нитью.
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    top: $marker-size;
+    bottom: -$event-gap;
+    left: calc((#{$marker-size} - #{$line-width}) / 2);
+    width: $line-width;
+    background: $gray-200;
+  }
 }
 
 .marker {
-  flex: 0 0 auto;
-  width: 20px;
-  text-align: center;
+  display: flex;
+  flex: 0 0 $marker-size;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: $marker-size;
+  height: $marker-size;
+  border: 1.5px solid;
+  border-radius: 50%;
+  font-size: 12px;
   font-weight: 700;
-  line-height: 1.4;
+  line-height: 1;
 }
 
-.markerNeutral { color: $navy-700; }
-.markerPositive { color: $green-600; }
-.markerWarning { color: $amber-700; }
-.markerNegative { color: $red-500; }
-.markerCurrent { color: $gold-600; }
+// Цвета — те же смысловые, что у плашки события и полосы комментария
+// (см. historyKinds.ts): кружок, плашка и комментарий одного события — одного цвета.
+.markerNeutral {
+  border-color: $navy-600;
+  background: $navy-50;
+  color: $navy-700;
+}
+
+.markerPositive {
+  border-color: $green-600;
+  background: $green-50;
+  color: $green-600;
+}
+
+.markerWarning {
+  border-color: $gold-500;
+  background: $gold-100;
+  color: $amber-700;
+}
+
+.markerNegative {
+  border-color: $red-500;
+  background: $red-50;
+  color: $red-500;
+}
+
+.markerCurrent {
+  border-color: $gold-500;
+  background: $gold-50;
+  color: $gold-600;
+  animation: current-pulse 2s ease-out infinite;
+}
+
+// Расходящееся кольцо вокруг кружка «сейчас».
+@keyframes current-pulse {
+  0% { box-shadow: 0 0 0 0 rgba($gold-500, .45); }
+  70% { box-shadow: 0 0 0 8px rgba($gold-500, 0); }
+  100% { box-shadow: 0 0 0 0 rgba($gold-500, 0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .markerCurrent {
+    animation: none;
+  }
+}
 
 .eventBody {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  gap: 2px;
-  min-width: 0;
+  gap: $sp-1;
+  min-width: 0; // иначе длинный комментарий распирает ленту вбок
 }
 
-.eventLine {
+// Плашка + время + длительность. На узкой ширине переносятся сами (flex-wrap),
+// отдельный медиазапрос не нужен. min-height — чтобы плашка стояла вровень
+// с центром кружка.
+.eventHead {
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
-  gap: $sp-1 $sp-3;
+  align-items: center;
+  gap: $sp-1 $sp-2;
+  min-height: $marker-size;
 }
 
 .time {
-  flex: 0 0 $time-col-width;
+  font-size: $fs-label;
   color: $gray-500;
   font-variant-numeric: tabular-nums;
-
-  @media (max-width: $feed-stack-breakpoint) {
-    flex-basis: 100%;
 }
+
+.actor {
+  overflow-wrap: anywhere;
 }
 
 .meta {
@@ -93,12 +164,6 @@ $feed-stack-breakpoint: 640px;
   color: $gray-500;
 }
 
-.comment {
-  color: $gray-700;
-  font-style: italic;
-  overflow-wrap: anywhere;
-}
-
 .note {
   font-size: $fs-label;
   color: $gray-500;

src/webparts/requestPortal/shared/approval/history/ApprovalHistoryFeed.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { ApprovalListService } from '../approvalList.service';
-import { IApprovalHistory } from './historyModel';
+import { IApprovalHistory, roundOutcome } from './historyModel';
 import { loadApprovalHistory } from './approvalHistory.service';
 import { CurrentHolderRow } from './CurrentHolderRow';
 import { HistoryEventRow } from './HistoryEventRow';
+import { RoundTitle } from './RoundTitle';
 import { HISTORY_TEXT } from './historyTexts';
 import styles from './ApprovalHistory.module.scss';
 
@@ -49,18 +50,22 @@ export const ApprovalHistoryFeed: React.FC<Props> = ({ approval, dataListRef, re
 
   return (
     <div className={styles.feed}>
-      {rounds.map((round, i) => (
+      {rounds.map((round, i) => {
+        // «Сейчас» — только у последней (верхней) отправки: прошлые уже закончились.
+        const isLatest = i === 0;
+        const isActive = isLatest && current.length > 0;
+        return (
           <section key={round.number} className={styles.round}>
-          <div className={styles.roundTitle}>{HISTORY_TEXT.round(round.number)}</div>
+            <RoundTitle number={round.number} outcome={roundOutcome(round, isActive)} />
             <ul className={styles.events}>
-            {/* «Сейчас» — только у последней (верхней) отправки. */}
-            {i === 0 && current.map((holder, j) => <CurrentHolderRow key={`current-${j}`} holder={holder} />)}
+              {isLatest && current.map((holder, j) => <CurrentHolderRow key={`current-${j}`} holder={holder} />)}
               {round.events.map((event, j) => (
                 <HistoryEventRow key={`${event.time}-${event.kind}-${j}`} event={event} />
               ))}
             </ul>
           </section>
-      ))}
+        );
+      })}
       <div className={styles.note}>{HISTORY_TEXT.partialNote}</div>
     </div>
   );

src/webparts/requestPortal/shared/approval/history/CurrentHolderRow.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Badge } from '@tnsu/ui-kit';
 import { formatDuration, ICurrentHolder } from './historyModel';
 import { HISTORY_TEXT } from './historyTexts';
 import styles from './ApprovalHistory.module.scss';
@@ -11,16 +12,22 @@ interface Props {
 export const CurrentHolderRow: React.FC<Props> = ({ holder }) => {
   const waitedMs = holder.since ? Date.now() - new Date(holder.since).getTime() : NaN;
   return (
-    <li className={`${styles.event} ${styles.current}`}>
+    <li className={styles.event}>
+      {/* Пульсирующий кружок — единственное «живое» место ленты: всё остальное уже
+          случилось, а это ещё ждёт. */}
       <span className={`${styles.marker} ${styles.markerCurrent}`} aria-hidden="true">
         ●
       </span>
       <div className={styles.eventBody}>
-        <div className={styles.eventLine}>
-          <span className={styles.time}>{HISTORY_TEXT.now}</span>
-          <strong>{holder.person || '—'}</strong>
+        <div className={styles.eventHead}>
+          <Badge variant="info" size="sm">
+            {HISTORY_TEXT.awaiting}
+          </Badge>
           {waitedMs > 0 && <span className={styles.meta}>{HISTORY_TEXT.waiting(formatDuration(waitedMs))}</span>}
         </div>
+        <div className={styles.actor}>
+          <strong>{holder.person || '—'}</strong>
+        </div>
         {holder.stepTitle && <div className={styles.meta}>{holder.stepTitle}</div>}
       </div>
     </li>

src/webparts/requestPortal/shared/approval/history/HistoryEventRow.tsx

@@ -1,22 +1,20 @@
 import * as React from 'react';
-import { formatDuration, HistoryEventKind, IHistoryEvent } from './historyModel';
-import { eventAction, HISTORY_TEXT } from './historyTexts';
+import { Badge } from '@tnsu/ui-kit';
+import { ApprovalComment, CommentTone } from '../ui/ApprovalComment';
+import { formatDuration, IHistoryEvent } from './historyModel';
+import { BADGE_BY_TONE, KIND_VIEW } from './historyKinds';
+import { eventDetails, eventLabel, HISTORY_TEXT } from './historyTexts';
 import styles from './ApprovalHistory.module.scss';
 
 interface Props {
   event: IHistoryEvent;
 }
 
-// Значок и цвет события — по смыслу решения, как у статусов в StatusBadge.
-const MARKER: Record<HistoryEventKind, { symbol: string; className: string }> = {
-  submitted: { symbol: '↗', className: styles.markerNeutral },
-  resubmitted: { symbol: '↗', className: styles.markerNeutral },
-  approved: { symbol: '✓', className: styles.markerPositive },
-  executed: { symbol: '✓', className: styles.markerPositive },
-  returned: { symbol: '↩', className: styles.markerWarning },
-  rejected: { symbol: '✕', className: styles.markerNegative },
-  delegated: { symbol: '→', className: styles.markerNeutral },
-  replaced: { symbol: '⇄', className: styles.markerNeutral },
+const MARKER_CLASS: Record<CommentTone, string> = {
+  positive: styles.markerPositive,
+  negative: styles.markerNegative,
+  warning: styles.markerWarning,
+  neutral: styles.markerNeutral,
 };
 
 export function formatDateTime(iso: string): string {
@@ -26,26 +24,35 @@ export function formatDateTime(iso: string): string {
   return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
-/** Одно событие ленты: время · кто — что сделал · за сколько + комментарий. */
+/**
+ * Одно событие ленты. Сверху — ЧТО произошло (цветная плашка) и когда: это то,
+ * за чем пользователь открывает историю. Ниже — кто, на каком шаге и почему.
+ */
 export const HistoryEventRow: React.FC<Props> = ({ event }) => {
-  const marker = MARKER[event.kind];
+  const view = KIND_VIEW[event.kind];
+  const details = eventDetails(event);
+
   return (
     <li className={styles.event}>
-      <span className={`${styles.marker} ${marker.className}`} aria-hidden="true">
-        {marker.symbol}
+      <span className={`${styles.marker} ${MARKER_CLASS[view.tone]}`} aria-hidden="true">
+        {view.symbol}
       </span>
       <div className={styles.eventBody}>
-        <div className={styles.eventLine}>
+        <div className={styles.eventHead}>
+          <Badge variant={BADGE_BY_TONE[view.tone]} size="sm">
+            {eventLabel(event.kind)}
+          </Badge>
           <span className={styles.time}>{formatDateTime(event.time)}</span>
-          <span>
-            <strong>{event.actor || '—'}</strong> — {eventAction(event)}
-          </span>
           {event.durationMs !== undefined && (
             <span className={styles.meta}>{HISTORY_TEXT.took(formatDuration(event.durationMs))}</span>
           )}
         </div>
+        <div className={styles.actor}>
+          <strong>{event.actor || '—'}</strong>
+          {details && <span className={styles.meta}> · {details}</span>}
+        </div>
         {event.stepTitle && <div className={styles.meta}>{event.stepTitle}</div>}
-        {event.comment && <div className={styles.comment}>«{event.comment}»</div>}
+        {event.comment && <ApprovalComment text={event.comment} tone={view.tone} />}
       </div>
     </li>
   );

src/webparts/requestPortal/shared/approval/history/RoundTitle.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Badge } from '@tnsu/ui-kit';
+import { RoundOutcome } from './historyModel';
+import { outcomeBadge } from './historyKinds';
+import { HISTORY_TEXT, outcomeLabel } from './historyTexts';
+import styles from './ApprovalHistory.module.scss';
+
+interface Props {
+  number: number;
+  /** Чем закончилась отправка (см. roundOutcome); нет — только номер. */
+  outcome?: RoundOutcome;
+}
+
+/**
+ * Заголовок отправки: номер + плашка итога. По одним заголовкам видна вся
+ * судьба заявки («вернули, вернули, в работе») без чтения событий.
+ */
+export const RoundTitle: React.FC<Props> = ({ number, outcome }) => (
+  <div className={styles.roundTitle}>
+    <span className={styles.roundNumber}>{HISTORY_TEXT.round(number)}</span>
+    {outcome && (
+      <Badge variant={outcomeBadge(outcome)} size="sm">
+        {outcomeLabel(outcome)}
+      </Badge>
+    )}
+  </div>
+);

src/webparts/requestPortal/shared/approval/history/historyKinds.ts

@@ -0,0 +1,37 @@
+import { BadgeVariant } from '@tnsu/ui-kit';
+import { CommentTone } from '../ui/ApprovalComment';
+import { HistoryEventKind, RoundOutcome } from './historyModel';
+
+/** Как событие выглядит в ленте: значок в кружке и цвет (кружок, плашка, комментарий). */
+export interface IKindView {
+  symbol: string;
+  tone: CommentTone;
+}
+
+// Цвет — по смыслу решения, как у статусов в StatusBadge: зелёное — пройдено,
+// золотое — вернули, красное — отказ, синее — служебное движение заявки.
+export const KIND_VIEW: Record<HistoryEventKind, IKindView> = {
+  submitted: { symbol: '↗', tone: 'neutral' },
+  resubmitted: { symbol: '↗', tone: 'neutral' },
+  approved: { symbol: '✓', tone: 'positive' },
+  executed: { symbol: '✓', tone: 'positive' },
+  returned: { symbol: '↩', tone: 'warning' },
+  rejected: { symbol: '✕', tone: 'negative' },
+  delegated: { symbol: '→', tone: 'neutral' },
+  replaced: { symbol: '⇄', tone: 'neutral' },
+};
+
+export const BADGE_BY_TONE: Record<CommentTone, BadgeVariant> = {
+  positive: 'success',
+  negative: 'danger',
+  warning: 'warning',
+  neutral: 'neutral',
+};
+
+/**
+ * Цвет плашки итога отправки: у решения — тот же, что у его события в ленте;
+ * «в работе» — синий, как плашка «Ожидает решения» у текущего шага.
+ */
+export function outcomeBadge(outcome: RoundOutcome): BadgeVariant {
+  return outcome === 'inProgress' ? 'info' : BADGE_BY_TONE[KIND_VIEW[outcome].tone];
+}

src/webparts/requestPortal/shared/approval/history/historyModel.test.ts

@@ -1,8 +1,11 @@
 import {
   buildApprovalHistory,
   formatDuration,
+  HistoryEventKind,
+  IHistoryRound,
   IRequestVersion,
   IRouteRowVersion,
+  roundOutcome,
   rowEvents,
   submitEvents,
 } from './historyModel';
@@ -131,6 +134,44 @@ describe('buildApprovalHistory', () => {
   });
 });
 
+/** Отправка из событий заданных видов — в том же порядке, что в ленте: НОВЫЕ СВЕРХУ. */
+function round(...kinds: HistoryEventKind[]): IHistoryRound {
+  return { number: 1, events: kinds.map((kind) => ({ kind, time: '2026-09-24T10:00:00Z', actor: 'Анна Ким' })) };
+}
+
+describe('roundOutcome', () => {
+  it('возврат — итог отправки', () => {
+    expect(roundOutcome(round('returned', 'approved', 'submitted'), false)).toBe('returned');
+  });
+
+  it('отказ — итог отправки', () => {
+    expect(roundOutcome(round('rejected', 'submitted'), false)).toBe('rejected');
+  });
+
+  it('возврат важнее «в работе»: вернули, а заново ещё не отправили', () => {
+    expect(roundOutcome(round('returned', 'submitted'), true)).toBe('returned');
+  });
+
+  it('заявка сейчас у кого-то на шаге — «в работе», даже если часть шагов уже согласована', () => {
+    expect(roundOutcome(round('resubmitted'), true)).toBe('inProgress');
+    expect(roundOutcome(round('approved', 'resubmitted'), true)).toBe('inProgress');
+  });
+
+  it('без возврата и не в работе — самое свежее решение', () => {
+    expect(roundOutcome(round('approved', 'approved', 'resubmitted'), false)).toBe('approved');
+    expect(roundOutcome(round('executed', 'approved', 'submitted'), false)).toBe('executed');
+  });
+
+  it('делегирование и замена решением не считаются', () => {
+    expect(roundOutcome(round('delegated', 'approved', 'submitted'), false)).toBe('approved');
+  });
+
+  it('решений нет — итога нет', () => {
+    expect(roundOutcome(round('delegated', 'submitted'), false)).toBeUndefined();
+    expect(roundOutcome(round(), false)).toBeUndefined();
+  });
+});
+
 describe('formatDuration', () => {
   it('минуты, часы, дни', () => {
     expect(formatDuration(30 * 1000)).toBe('1 мин');

src/webparts/requestPortal/shared/approval/history/historyModel.ts

@@ -181,6 +181,42 @@ export function buildApprovalHistory(rows: IRouteRowVersion[][], requestVersions
   };
 }
 
+/** Виды событий-решений — только ими может закончиться отправка. */
+export type DecisionKind = 'approved' | 'executed' | 'returned' | 'rejected';
+
+/** Итог отправки для плашки в её заголовке. 'inProgress' — заявка сейчас у кого-то на шаге. */
+export type RoundOutcome = DecisionKind | 'inProgress';
+
+const DECISION_EVENT_KINDS: HistoryEventKind[] = ['approved', 'executed', 'returned', 'rejected'];
+// Решения, после которых отправка заканчивается: дальше автор либо правит
+// и отправляет заново (новая отправка), либо заявка закрыта отказом.
+const CLOSING_KINDS: DecisionKind[] = ['returned', 'rejected'];
+
+function isDecisionKind(kind: HistoryEventKind): kind is DecisionKind {
+  return DECISION_EVENT_KINDS.indexOf(kind) >= 0;
+}
+
+/**
+ * Чем закончилась отправка. Правила по порядку:
+ *   1. был возврат или отказ — это итог (отправка на нём оборвалась);
+ *   2. заявка сейчас у кого-то на шаге — «в работе»;
+ *   3. иначе — последнее решение («согласовано» / «выполнено»);
+ *   4. решений нет (история сохранилась не полностью) — итога нет.
+ * @param round отправка; события в ней НОВЫЕ СВЕРХУ (см. buildApprovalHistory)
+ * @param isActive у кого-то на шаге сейчас именно эта отправка — имеет смысл
+ *   только для последней (верхней)
+ */
+export function roundOutcome(round: IHistoryRound, isActive: boolean): RoundOutcome | undefined {
+  for (const event of round.events) {
+    if (isDecisionKind(event.kind) && CLOSING_KINDS.indexOf(event.kind) >= 0) return event.kind;
+  }
+  if (isActive) return 'inProgress';
+  for (const event of round.events) {
+    if (isDecisionKind(event.kind)) return event.kind;
+  }
+  return undefined;
+}
+
 const MINUTE_MS = 60 * 1000;
 const HOUR_MS = 60 * MINUTE_MS;
 const DAY_MS = 24 * HOUR_MS;

src/webparts/requestPortal/shared/approval/history/historyTexts.ts

@@ -1,4 +1,4 @@
-import { HistoryEventKind, IHistoryEvent } from './historyModel';
+import { HistoryEventKind, IHistoryEvent, RoundOutcome } from './historyModel';
 
 // Тексты «Истории согласования» — в одном месте (задел под локализацию).
 // Формулировки безличные («согласовано», а не «согласовала»): пол по имени не
@@ -9,28 +9,43 @@ export const HISTORY_TEXT = {
   empty: 'Пока нет событий: заявка ещё не отправлялась.',
   errorPrefix: 'Не удалось загрузить историю:',
   round: (n: number): string => `Отправка ${n}`,
-  now: 'сейчас',
-  waiting: (duration: string): string => `ждёт ${duration}`,
+  inProgress: 'В работе',
+  awaiting: 'Ожидает решения',
+  waiting: (duration: string): string => `уже ${duration}`,
   took: (duration: string): string => `за ${duration}`,
+  delegatedTo: (name: string): string => `кому: ${name}`,
   partialNote:
     'Показаны события, сохранённые в SharePoint. Решения из отправок до включения истории могли не сохраниться.',
 };
 
-const ACTION: Record<HistoryEventKind, string> = {
-  submitted: 'отправлено на согласование',
-  resubmitted: 'отправлено повторно',
-  approved: 'согласовано',
-  executed: 'выполнено',
-  returned: 'возвращено на доработку',
-  rejected: 'отклонено',
-  delegated: 'передано',
-  replaced: 'заменён исполнитель',
+// С заглавной: текст стоит первым словом в плашке события.
+const ACTION_LABEL: Record<HistoryEventKind, string> = {
+  submitted: 'Отправлено на согласование',
+  resubmitted: 'Отправлено повторно',
+  approved: 'Согласовано',
+  executed: 'Выполнено',
+  returned: 'Возвращено на доработку',
+  rejected: 'Отклонено',
+  delegated: 'Передано',
+  replaced: 'Заменён исполнитель',
 };
 
-/** Что произошло — «согласовано», «передано: Асель Самаева», «заменён исполнитель: А → Б». */
-export function eventAction(event: IHistoryEvent): string {
-  const action = ACTION[event.kind];
-  if (event.kind === 'delegated' && event.target) return `${action}: ${event.target}`;
-  if (event.kind === 'replaced') return `${action}: ${event.previous || '—'} → ${event.target || '—'}`;
-  return action;
+/** Что произошло — текст плашки: «Согласовано», «Возвращено на доработку». */
+export function eventLabel(kind: HistoryEventKind): string {
+  return ACTION_LABEL[kind];
+}
+
+/** Итог отправки — текст плашки в её заголовке. Решения — теми же словами, что в ленте. */
+export function outcomeLabel(outcome: RoundOutcome): string {
+  return outcome === 'inProgress' ? HISTORY_TEXT.inProgress : ACTION_LABEL[outcome];
+}
+
+/**
+ * Над кем действие — дописывается к имени автора: «кому: Асель Самаева» для
+ * передачи, «Иванов → Петров» для замены. У прочих событий пусто.
+ */
+export function eventDetails(event: IHistoryEvent): string {
+  if (event.kind === 'delegated' && event.target) return HISTORY_TEXT.delegatedTo(event.target);
+  if (event.kind === 'replaced') return `${event.previous || '—'} → ${event.target || '—'}`;
+  return '';
 }

src/webparts/requestPortal/shared/approval/ui/ApprovalComment.module.scss

@@ -22,7 +22,8 @@ $quote-line-height: 19px;
 }
 
 // Цвет — у полосы и кавычки, фон лишь подтон: текст должен читаться так же
-// спокойно, как остальная таблица, а не кричать.
+// спокойно, как остальная таблица, а не кричать. Белую карточку пробовали —
+// внутри формы она похожа на поле ввода.
 .neutral {
   border-left-color: $navy-600;
   background: $navy-50;

src/webparts/requestPortal/shared/approval/ui/ApprovalComment.tsx

@@ -3,7 +3,7 @@ import styles from './ApprovalComment.module.scss';
 import { REQUEST_STATUS } from '../models/statuses';
 import { useTextOverflow } from './useTextOverflow';
 
-type CommentTone = 'positive' | 'negative' | 'warning' | 'neutral';
+export type CommentTone = 'positive' | 'negative' | 'warning' | 'neutral';
 
 // Цвет полосы — по решению на шаге: причину отказа или возврата видно с первого
 // взгляда, ещё до того, как глаз дойдёт до колонки «Статус».
@@ -31,18 +31,23 @@ export interface IApprovalCommentProps {
   text: string;
   /** Статус строки маршрута (см. REQUEST_STATUS) — от него цвет полосы. */
   status?: string;
+  /**
+   * Цвет полосы напрямую — для мест, где статуса строки нет (напр. лента
+   * «Истории согласования» знает вид события, а не статус). Важнее status.
+   */
+  tone?: CommentTone;
 }
 
 /**
  * Комментарий участника маршрута к своему решению. Длинный текст свёрнут до
  * нескольких строк (см. $comment-visible-lines), остальное — по кнопке.
  */
-export const ApprovalComment: React.FC<IApprovalCommentProps> = ({ text, status }) => {
+export const ApprovalComment: React.FC<IApprovalCommentProps> = ({ text, status, tone: toneProp }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const textRef = React.useRef<HTMLDivElement>(null);
   const isClamped = useTextOverflow(textRef, text);
 
-  const tone = (status && TONE_BY_STATUS[status]) || 'neutral';
+  const tone = toneProp || (status && TONE_BY_STATUS[status]) || 'neutral';
   // В развёрнутом виде обрезки нет, и замер честно вернёт false, но кнопка
   // «Свернуть» при этом всё равно нужна.
   const showToggle = isExpanded || isClamped;

src/webparts/requestPortal/shared/approval/ui/ApprovalMatrix.tsx

@@ -211,7 +211,8 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
 
   // Комментарий занимает всю ширину между объединёнными колонками «Шаг» и
   // стрелок: «Согласующий» + «Должность» + те необязательные колонки, что
-  // сейчас показаны. Колонку действий не захватывает — в ней своя пустая ячейка.
+  // сейчас показаны. Колонку действий не захватывает — её ячейка из строки
+  // участника объединена и на строку комментария (rowSpan у .matrixActions).
   const optionalColumns = [hasDepartment, hasOrganization, hasStatuses, hasDates, hasSla];
   const commentColSpan = 2 + optionalColumns.filter(Boolean).length;
   const hasActionsCol = editable || hasRemovable;
@@ -337,8 +338,11 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
                           )}
                         </td>
                       )}
+                      {/* Кнопки — на участника вместе с его комментарием, как номер
+                          шага и стрелки: иначе стрелки стоят по центру пары строк,
+                          а кнопки — по центру одной, и они расходятся по высоте. */}
                       {hasActionsCol && (
-                        <td className={styles.matrixActions}>
+                        <td className={styles.matrixActions} rowSpan={r.comment ? 2 : 1}>
                           {editable && (
                             <button
                               type="button"
@@ -379,14 +383,13 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
                     </tr>
                     {/* Комментарий — отдельной строкой во всю ширину под участником:
                         в узкой колонке «Согласующий» текст ломался по слову на строку.
-                        Ячейки «Шаг» и стрелок её не повторяют — их накрывает rowSpan
-                        (см. block.span); колонка действий — пустая ячейка. */}
+                        Ячейки «Шаг», стрелок и действий её не повторяют — их накрывает
+                        rowSpan из строки участника. */}
                     {r.comment && (
                       <tr ref={registerRow(commentRowKey(rowKeys[i]))} className={commentClassNames.join(' ')}>
                         <td colSpan={commentColSpan} className={styles.commentCell}>
                           <ApprovalComment text={r.comment} status={r.status} />
                         </td>
-                        {hasActionsCol && <td />}
                       </tr>
                     )}
                   </React.Fragment>

src/webparts/requestPortal/shared/approval/ui/approval.module.scss

@@ -159,9 +159,10 @@
 
 // Строка участника, под которой идёт его комментарий (см. ApprovalComment):
 // разделитель между ними убираем, иначе комментарий читается как отдельная
-// запись маршрута. Ячейки «Шаг» и стрелок не трогаем — они объединены на весь
-// шаг (rowSpan), и их нижняя граница — это граница всего шага.
-.rowWithComment > td:not(.matrixStepCol):not(.matrixMoveCol) {
+// запись маршрута. Объединённые ячейки (rowSpan) не трогаем: «Шаг» и стрелки
+// накрывают весь шаг, действия — участника с комментарием, и их нижняя
+// граница — это граница всей записи.
+.rowWithComment > td:not(.matrixStepCol):not(.matrixMoveCol):not(.matrixActions) {
   border-bottom-color: transparent;
 }
 
@@ -388,11 +389,6 @@
     flex: 1 1 100%;
   }
 
-  // Пустая ячейка под колонкой действий на телефоне дала бы лишний отступ.
-  .commentRow > td:empty {
-    display: none;
-  }
-
   .matrixActions,
   .matrixMoveCol {
     justify-content: flex-start;