GUARD
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/features/sessions/keyboard-view/keyboard-view.css b/src/app/features/sessions/keyboard-view/keyboard-view.css
index bfc2fb3..a4160e5 100644
--- a/src/app/features/sessions/keyboard-view/keyboard-view.css
+++ b/src/app/features/sessions/keyboard-view/keyboard-view.css
@@ -49,7 +49,9 @@
cursor: default;
user-select: none;
- transition: background 60ms ease;
+ transition:
+ background 0.24s cubic-bezier(0.33, 1, 0.68, 1),
+ box-shadow 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Space bar: fills leftover width in modifier row */
@@ -58,7 +60,7 @@
width: auto;
}
-/* Pressed state */
+/* Pressed state — плавный переход с «серого» idle-surface на акцент */
.key--active {
background: var(--sg-keyboard-key-pressed-fill);
box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--sg-keyboard-key-pressed-fill) 55%, black);
@@ -81,6 +83,7 @@
font-family: var(--sg-keyboard-font-family);
font-weight: var(--sg-keyboard-font-weight);
min-width: 0;
+ transition: color 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Russian glyph — top-right */
@@ -92,6 +95,7 @@
font-weight: var(--sg-keyboard-font-weight);
text-align: right;
min-width: 0;
+ transition: color 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Main English label — bottom-left */
@@ -102,6 +106,7 @@
font-family: var(--sg-keyboard-font-family);
font-weight: 500;
letter-spacing: var(--sg-keyboard-letter-spacing);
+ transition: color 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Label for special keys (Tab, Caps, Shift, ⌘ …) — centered */
@@ -115,6 +120,7 @@
margin: auto;
text-align: center;
width: 100%;
+ transition: color 0.24s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Active key — invert text colors */
diff --git a/src/app/features/sessions/mouse-view/mouse-view.css b/src/app/features/sessions/mouse-view/mouse-view.css
index c493224..3c26118 100644
--- a/src/app/features/sessions/mouse-view/mouse-view.css
+++ b/src/app/features/sessions/mouse-view/mouse-view.css
@@ -1,9 +1,17 @@
:host {
- display: inline-block;
+ display: flex;
+ flex: 0 0 auto;
+ align-self: stretch;
+ min-height: 0;
+ min-width: 0;
}
.mouse {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
width: 120px;
+ min-height: 0;
border-radius: 26px 26px 18px 18px;
background: var(--sg-keyboard-key-surface-idle);
box-shadow: inset 0 0 0 0.5px var(--sg-keyboard-key-stroke);
@@ -14,6 +22,7 @@
/* ── Buttons area ──────────────────────────────────────────────────────── */
.mouse__buttons {
+ flex-shrink: 0;
height: 88px;
display: grid;
grid-template-columns: 1fr 10px 1fr;
diff --git a/src/app/features/sessions/session-detail/session-detail.component.ts b/src/app/features/sessions/session-detail/session-detail.component.ts
index 62dddd8..9d26654 100644
--- a/src/app/features/sessions/session-detail/session-detail.component.ts
+++ b/src/app/features/sessions/session-detail/session-detail.component.ts
@@ -3,8 +3,6 @@ import { HttpErrorResponse } from '@angular/common/http';
import { ChangeDetectionStrategy, Component, inject, isDevMode, model, signal } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { ActivatedRoute, RouterLink } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { TuiCheckbox } from '@taiga-ui/core/components/checkbox';
import { TuiLink } from '@taiga-ui/core/components/link';
import { TuiLoader } from '@taiga-ui/core/components/loader';
import { TuiTitle } from '@taiga-ui/core/components/title';
@@ -29,14 +27,13 @@ import { SessionsApiService } from '../../../core/services/sessions-api.service'
import { SessionViewTabComponent } from './session-view-tab/session-view-tab.component';
import { SessionInteractiveTabComponent } from './session-interactive-tab/session-interactive-tab.component';
import { SessionInfoTabComponent } from './session-info-tab/session-info-tab.component';
+import { SessionFingerprintTabComponent } from './session-fingerprint-tab/session-fingerprint-tab.component';
@Component({
selector: 'app-session-detail',
imports: [
AsyncPipe,
- FormsModule,
RouterLink,
- TuiCheckbox,
TuiLink,
TuiLoader,
TuiTitle,
@@ -44,6 +41,7 @@ import { SessionInfoTabComponent } from './session-info-tab/session-info-tab.com
SessionViewTabComponent,
SessionInteractiveTabComponent,
SessionInfoTabComponent,
+ SessionFingerprintTabComponent,
],
templateUrl: './session-detail.html',
styleUrl: './session-detail.css',
@@ -58,7 +56,7 @@ export class SessionDetailComponent {
protected readonly telemetryToMs = signal
+
+
+ Умный прокторинг от SparkGuardian
++ Панель ревьюера для поведенческого анализа экзаменационных сессий. Синхронный просмотр видеозаписи, телеметрии клавиатуры и мыши, аппаратный фингерпринт — в одном окне. +
+
+
+
+
+ 
+
+
+ Ключевые инструменты
+ +
+
+
+
+
+
+
+
+
+
+ Интерактивный режим
++ Синхронный просмотр HLS-видеопотока одновременно с визуализацией нажатий клавиатуры, позиции мыши и восстановленного набранного текста. Единый таймлайн с перемоткой ±5/±10 секунд. +
+
+
+
+
+
+
+
+ Аппаратный фингерпринт
++ Периодические Heartbeat-снимки оборудования: хеш CPU, материнской платы, дисков, MAC-адресов. Автоматическое выявление смены экранов, сетевого адаптера или появления гипервизора. +
+
+
+
+
+
+ Тепловая карта активности
++ Визуализация плотности событий телеметрии вдоль таймлайна сессии. Мгновенный переход к подозрительным моментам одним кликом по тепловой карте. +
+4 режима анализа в каждой сессии
+ +
+
+
+
+ 01
+ Просмотр
+HLS-плеер с переключением потоков (screen / webcam), полная лента телеметрии с фильтрацией по типам событий.
+
+
+ 02
+ Интерактивный режим
+Синхронное воспроизведение видео, клавиатуры, мыши и набранного текста. Тепловая карта событий с курсором позиции.
+
+
+ 03
+ Отпечаток системы
+Текущая конфигурация устройства и журнал подозрительных изменений: смена экрана, сети, юзера или обнаружение ВМ.
+
+
+ 04
+ Служебная информация
+Сырые данные сессии, метаинформация о потоках и подробная статистика по телеметрии для разработчиков.
+
+
+
+
+ 17
+ параметров оборудования в каждом Heartbeat-снимке
+
+
+ 5
+ полей автоматического мониторинга аномалий
+
+
+ 4
+ режима анализа в каждой сессии
+
+
+ 2
+ видеопотока — экран и камера одновременно
+ Как это работает
+ +
+
+
+
+
+ 1
+
+
+ Создание сессии
+Ревьюер создаёт сессию в панели. Агент на устройстве студента получает session_key и начинает сбор телеметрии и запись видеопотоков.
+
+
+
+ 2
+
+
+ Потоковая загрузка данных
+Видеочанки загружаются через API с bearer-авторизацией. Параллельно поступают события клавиатуры, мыши и периодические Heartbeat-фингерпринты.
+
+
+ 3
+
+
+ Анализ ревьюером
+Ревьюер открывает сессию в интерактивном режиме, видит видеозапись синхронно с клавиатурой и мышью, и проверяет журнал аномалий фингерпринта.
+Отвечаем на вопросы
+ ++ Агент записывает видеопотоки (screen и webcam), события клавиатуры (нажатия/отпускания), координаты мыши, и периодически отправляет Heartbeat — снимок аппаратной конфигурации (хеши CPU, дисков, MAC, конфигурация экранов, наличие гипервизора). +
++ Система автоматически сравнивает последовательные Heartbeat-снимки и фиксирует все изменения: смену конфигурации экранов, имени пользователя, имени хоста, сетевого адаптера или появление гипервизора. Все изменения отображаются в хронологическом журнале. +
++ Да. Каждый Heartbeat содержит поле hypervisor_present. Если агент обнаруживает среду виртуализации, в панели ревьюера это отображается как критический флаг с предупреждением. +
++ HLS-видео воспроизводится параллельно с визуализацией: виртуальная клавиатура подсвечивает нажатые клавиши, блок мыши показывает позицию курсора, текстовое поле восстанавливает набранный текст из потока событий. Всё синхронизировано через единый таймлайн. +
++ На данный момент поддерживаются два типа HLS-потоков: screen (запись экрана) и webcam (запись с камеры). Переключение между ними происходит через селектор потоков в интерфейсе сессии. +
++ Да. В режиме «Просмотр» доступна фильтрация по типу событий (клавиатура, мышь и др.) с отображением количества событий каждого типа. Также можно скрыть события mouse_move для удобства чтения ленты. +
+
@if (vm$ | async; as state) {
@@ -19,24 +19,11 @@
+
@if (telemetry$ | async; as telemetryState) {
- @if (activeTabIndex() === 0 || activeTabIndex() === 1) {
-
- }
@switch (activeTabIndex()) {
@case (0) {
();
+
+ protected readonly data$ = toObservable(this.sessionId).pipe(
+ switchMap((id) => {
+ // Параллельно запрашиваем все данные фингерпринта
+ return combineLatest([
+ this.api.getFingerprintSummary(id).pipe(catchError(() => of(null))),
+ this.api.getFingerprintFull(id).pipe(catchError(() => of(null))),
+ this.api.getFingerprintHeartbeats(id, undefined, undefined, 50).pipe(catchError(() => of(null)))
+ ]).pipe(
+ map(([summary, full, heartbeats]) => {
+ const hbs = heartbeats?.heartbeats || [];
+ const anomalies = this.detectAnomalies(hbs);
+ const currentConfig = hbs.length > 0 ? hbs[hbs.length - 1].payload : null;
+
+ return {
+ status: 'ok' as const,
+ summary,
+ full,
+ heartbeats: hbs,
+ anomalies,
+ currentConfig,
+ };
+ }),
+ catchError((e: HttpErrorResponse) => {
+ this.userErrors.notifyError(e, 'Фингерпринт');
+ return of({ status: 'error' as const });
+ }),
+ startWith({ status: 'loading' as const })
+ );
+ })
+ );
+
+ private detectAnomalies(heartbeats: FingerprintHeartbeat[]): Anomaly[] {
+ if (!heartbeats || heartbeats.length < 2) {
+ return [];
+ }
+
+ const anomalies: Anomaly[] = [];
+ const fieldsToCheck = [
+ { key: 'screen_layout', label: 'Конфигурация экранов' },
+ { key: 'username', label: 'Пользователь системы' },
+ { key: 'hostname', label: 'Имя компьютера' },
+ { key: 'active_iface', label: 'Сетевой адаптер' },
+ { key: 'hypervisor_present', label: 'Виртуализация / Hypervisor' },
+ ] as const;
+
+ for (let i = 1; i < heartbeats.length; i++) {
+ const prev = heartbeats[i - 1].payload;
+ const curr = heartbeats[i].payload;
+ const timestamp = heartbeats[i].timestamp_ms;
+
+ for (const field of fieldsToCheck) {
+ // @ts-ignore (dynamic key access)
+ const oldValue = prev[field.key];
+ // @ts-ignore
+ const newValue = curr[field.key];
+
+ if (oldValue !== newValue) {
+ anomalies.push({
+ timestamp_ms: timestamp,
+ field: field.key,
+ fieldLabel: field.label,
+ oldValue,
+ newValue,
+ });
+ }
+ }
+ }
+
+ // Сортируем от новых к старым
+ return anomalies.sort((a, b) => b.timestamp_ms - a.timestamp_ms);
+ }
+}
diff --git a/src/app/features/sessions/session-detail/session-fingerprint-tab/session-fingerprint-tab.css b/src/app/features/sessions/session-detail/session-fingerprint-tab/session-fingerprint-tab.css
new file mode 100644
index 0000000..9240547
--- /dev/null
+++ b/src/app/features/sessions/session-detail/session-fingerprint-tab/session-fingerprint-tab.css
@@ -0,0 +1,131 @@
+.fingerprint-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ padding-top: 1rem;
+}
+
+.section-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+.loading-wrap {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 4rem 0;
+}
+
+/* Безопасность / Сейф баннер */
+.safe-banner {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 1rem;
+ background: var(--tui-positive-bg, rgba(74, 201, 155, 0.1));
+ color: var(--tui-positive, #259b6f);
+ border-radius: var(--tui-radius-m);
+ font-weight: 500;
+}
+.success-icon {
+ font-size: 1.2rem;
+}
+
+/* Журнал аномалий */
+.anomalies-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+.anomaly-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ padding: 0.75rem 1rem;
+ background: var(--tui-negative-bg, rgba(239, 68, 68, 0.1));
+ border-left: 4px solid var(--tui-negative, #ef4444);
+ border-radius: var(--tui-radius-m);
+}
+.anomaly-time {
+ font-family: monospace;
+ font-size: 0.85rem;
+ color: var(--tui-text-secondary);
+ padding-top: 0.1rem;
+}
+.anomaly-content {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+.anomaly-label {
+ font-weight: 600;
+ color: var(--tui-text-primary);
+}
+.cross-out {
+ text-decoration: line-through;
+ color: var(--tui-text-secondary);
+}
+.arrow-icon {
+ font-size: 1rem;
+ color: var(--tui-text-secondary);
+}
+.highlight {
+ font-weight: bold;
+ color: var(--tui-negative, #ef4444);
+}
+
+/* Текущая конфигурация */
+.config-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 1rem;
+}
+
+.config-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ padding: 1rem;
+ border-radius: var(--tui-radius-m);
+ border: 1px solid var(--tui-border-normal);
+ background: var(--tui-background-base);
+}
+
+.danger-container.danger {
+ border-color: var(--tui-negative, #ef4444);
+ color: var(--tui-negative, #ef4444);
+}
+.danger-container.danger .cfg-label {
+ color: var(--tui-negative, #ef4444);
+}
+
+.cfg-icon {
+ font-size: 2rem;
+ color: var(--tui-text-secondary);
+ flex-shrink: 0;
+ margin-top: 0.1rem;
+}
+.danger-container.danger .cfg-icon {
+ color: var(--tui-negative, #ef4444);
+}
+
+.cfg-text {
+ display: flex;
+ flex-direction: column;
+}
+.cfg-label {
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ color: var(--tui-text-secondary);
+ letter-spacing: 0.05em;
+ margin-bottom: 0.25rem;
+}
+.cfg-value {
+ font-weight: 500;
+ color: var(--tui-text-primary);
+ line-height: 1.4;
+}
diff --git a/src/app/features/sessions/session-detail/session-fingerprint-tab/session-fingerprint-tab.html b/src/app/features/sessions/session-detail/session-fingerprint-tab/session-fingerprint-tab.html
new file mode 100644
index 0000000..2c014f3
--- /dev/null
+++ b/src/app/features/sessions/session-detail/session-fingerprint-tab/session-fingerprint-tab.html
@@ -0,0 +1,81 @@
+@if (data$ | async; as state) {
+ @switch (state.status) {
+ @case ('loading') {
+ ();
readonly recordingStartMs = input.required();
readonly recordingEndMs = input.required();
- readonly excludeMouseMoves = input(false);
+ readonly excludeMouseMoves = input(true);
protected readonly selectedStreamType = signal(null);
protected readonly timelineSec = signal(0);
protected readonly durationSec = signal(null);
protected readonly isPlaying = signal(false);
-
protected readonly timelineMaxSec = computed(() => {
const videoDuration = this.durationSec();
if (videoDuration != null && Number.isFinite(videoDuration) && videoDuration > 0) {
@@ -111,6 +113,68 @@ export class SessionInteractiveTabComponent {
.sort((a, b) => a.timestamp - b.timestamp),
);
+ /**
+ * Только `press`. Группировка по целой секунде unix-времени: floor(ts/1000)*1000.
+ * Внутри секунды n нажатий в порядке телеметрии получают непересекающиеся интервалы
+ * [T + i/n·1000, T + (i+1)/n·1000); фактическая подсветка держится минимум KEY_HIGHLIGHT_MIN_MS.
+ */
+ private readonly keyboardPressDisplaySlots = computed(
+ (): { startMs: number; endMs: number; keyIds: string[]; data: unknown }[] => {
+ const events = this.sortedKeyboardEvents();
+ type RawPress = { ts: number; keyIds: string[]; data: unknown };
+ const raw: RawPress[] = [];
+ for (const event of events) {
+ if (parseKeyboardAction(event.data) !== 'press') {
+ continue;
+ }
+ const keyIds = parseKeyboardHighlightKeyIds(event.data);
+ if (keyIds.length === 0) {
+ continue;
+ }
+ const ts = event.timestamp;
+ if (!Number.isFinite(ts)) {
+ continue;
+ }
+ raw.push({ ts, keyIds, data: event.data });
+ }
+ const out: { startMs: number; endMs: number; keyIds: string[]; data: unknown }[] = [];
+ let i = 0;
+ while (i < raw.length) {
+ const secStartMs = Math.floor(raw[i]!.ts / 1000) * 1000;
+ let j = i + 1;
+ while (j < raw.length && Math.floor(raw[j]!.ts / 1000) * 1000 === secStartMs) {
+ j++;
+ }
+ const n = j - i;
+ for (let k = 0; k < n; k++) {
+ const startMs = secStartMs + (k / n) * 1000;
+ const endMs = secStartMs + ((k + 1) / n) * 1000;
+ out.push({ startMs, endMs, keyIds: raw[i + k]!.keyIds, data: raw[i + k]!.data });
+ }
+ i = j;
+ }
+ return out;
+ },
+ );
+
+ /**
+ * Текст, «набранный» к моменту позиции на timeline (порядок с тем же распределением по секунде).
+ */
+ protected readonly interactiveTypedText = computed((): string => {
+ const cursorMs = this.cursorMs();
+ if (cursorMs == null) {
+ return '';
+ }
+ let buffer = '';
+ for (const slot of this.keyboardPressDisplaySlots()) {
+ if (slot.startMs > cursorMs) {
+ break;
+ }
+ buffer = applyKeyboardPressToTranscriptBuffer(buffer, slot.data);
+ }
+ return buffer;
+ });
+
/**
* Pre-sorted mouse events — recomputed only when telemetryEvents changes.
*/
@@ -126,32 +190,26 @@ export class SessionInteractiveTabComponent {
);
/**
- * Set of key IDs that were pressed in the window [cursorMs - KEY_DISPLAY_MS, cursorMs].
- * Iterates backwards (newest first), deduplicates by keyId.
+ * Клавиши слота с наибольшим `startMs`, для которого cursorMs попадает в
+ * [startMs, max(endMs, startMs + KEY_HIGHLIGHT_MIN_MS)).
*/
protected readonly pressedKeyIds = computed((): ReadonlySet => {
const cursorMs = this.cursorMs();
if (cursorMs == null) {
return new Set();
}
- const seen = new Set();
- const events = this.sortedKeyboardEvents();
- for (let i = events.length - 1; i >= 0; i--) {
- const event = events[i]!;
- if (event.timestamp > cursorMs) {
+ const slots = this.keyboardPressDisplaySlots();
+ for (let idx = slots.length - 1; idx >= 0; idx--) {
+ const s = slots[idx]!;
+ if (s.startMs > cursorMs) {
continue;
}
- if (event.timestamp < cursorMs - KEY_DISPLAY_MS) {
- break;
- }
- if (parseKeyboardAction(event.data) !== 'press') {
- continue;
- }
- for (const keyId of parseKeyboardHighlightKeyIds(event.data)) {
- seen.add(keyId);
+ const visibleUntilMs = Math.max(s.endMs, s.startMs + KEY_HIGHLIGHT_MIN_MS);
+ if (cursorMs < visibleUntilMs) {
+ return new Set(s.keyIds);
}
}
- return seen;
+ return new Set();
});
protected readonly mouseTargets = computed(() => {
@@ -171,6 +229,53 @@ export class SessionInteractiveTabComponent {
return [] as MouseHighlightTarget[];
});
+ protected readonly heatmapBuckets = computed(() => {
+ const BUCKETS_COUNT = 150; // Более точная разбивка (150 баров)
+ const events = this.telemetryEvents();
+ if (!events?.length) {
+ return [];
+ }
+
+ const startMs = this.telemetryAnchorStartMs();
+ const durationSec = this.timelineMaxSec();
+
+ if (startMs == null || durationSec <= 0) {
+ return [];
+ }
+
+ const buckets = new Array(BUCKETS_COUNT).fill(0);
+ const bucketDurationMs = (durationSec * 1000) / BUCKETS_COUNT;
+
+ let maxCount = 0;
+ for (const e of events) {
+ if (!Number.isFinite(e.timestamp)) {
+ continue;
+ }
+ // Относительное время от старта
+ const offsetMs = e.timestamp - startMs;
+ if (offsetMs < 0 || offsetMs > durationSec * 1000) {
+ continue;
+ }
+
+ const bucketIdx = Math.min(Math.floor(offsetMs / bucketDurationMs), BUCKETS_COUNT - 1);
+ buckets[bucketIdx]++;
+ if (buckets[bucketIdx] > maxCount) {
+ maxCount = buckets[bucketIdx];
+ }
+ }
+
+ return buckets.map((count, idx) => {
+ // Нормализуем opacity: фоновый цвет почти прозрачен, активные ярче.
+ const rawOpacity = count > 0 ? Math.max(0.15, count / maxCount) : 0.03;
+ return {
+ index: idx,
+ count,
+ opacity: rawOpacity,
+ startSec: (idx * bucketDurationMs) / 1000,
+ };
+ });
+ });
+
protected activeStreamType(): string | null {
const streams = this.detail().streams;
if (!streams?.length) {
diff --git a/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.css b/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.css
index dff317f..2beac55 100644
--- a/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.css
+++ b/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.css
@@ -166,10 +166,20 @@
overflow-x: auto;
}
+.input-preview app-keyboard-view {
+ flex: 0 0 auto;
+}
+
+.input-preview app-mouse-view {
+ flex: 0 0 auto;
+}
+
.mouse-sidebar {
flex: 0 0 auto;
display: flex;
align-items: stretch;
+ align-self: stretch;
+ min-height: 0;
}
@media (max-width: 980px) {
@@ -178,3 +188,70 @@
align-items: center;
}
}
+
+.interactive-transcript-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: 0.65rem;
+ width: 100%;
+ min-width: 0;
+ margin-top: 1.25rem;
+ padding-top: 1.25rem;
+ border-top: 1px solid var(--tui-border-normal);
+}
+
+.interactive-transcript-field {
+ width: 100%;
+}
+
+.heatmap-card {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.heatmap-title {
+ font-size: 1rem;
+ font-weight: 500;
+ margin: 0;
+ color: var(--tui-text-primary);
+}
+
+.heatmap-container {
+ display: flex;
+ height: 48px;
+ width: 100%;
+ position: relative;
+ border-radius: var(--tui-radius-s);
+ overflow: hidden;
+ background: var(--tui-background-base-alt, #f5f5f6);
+ border: 1px solid var(--tui-border-normal);
+ cursor: pointer;
+}
+
+.heatmap-bucket {
+ flex-grow: 1;
+ height: 100%;
+ transition: opacity 0.1s;
+}
+
+.heatmap-bucket:hover {
+ opacity: 0.7;
+}
+
+.heatmap-cursor {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ background-color: var(--tui-primary, #3872c2);
+ transform: translateX(-50%);
+ pointer-events: none;
+ z-index: 2;
+ box-shadow: 0 0 4px var(--tui-primary, rgba(56, 114, 194, 0.4));
+}
+
+.interactive-transcript-hint {
+ margin: 0;
+ max-width: 52rem;
+}
diff --git a/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.html b/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.html
index 586217c..e48f123 100644
--- a/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.html
+++ b/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.html
@@ -131,7 +131,7 @@
-
+
+ }
+ @case ('error') {
+ Не удалось загрузить данные системы.
+ } + @case ('ok') { +
+
+
+
+
+
+
+
+
+
+
+ }
+ }
+}
diff --git a/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.component.ts b/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.component.ts
index f620666..56ebd56 100644
--- a/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.component.ts
+++ b/src/app/features/sessions/session-detail/session-interactive-tab/session-interactive-tab.component.ts
@@ -1,6 +1,9 @@
import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
import { TuiButton } from '@taiga-ui/core/components/button';
+import { TuiTextarea } from '@taiga-ui/kit/components/textarea';
+import { applyKeyboardPressToTranscriptBuffer } from '../../../../core/keyboard/keyboard-transcript.util';
import {
isKeyboardTelemetryEvent,
parseKeyboardAction,
@@ -21,19 +24,19 @@ import { KeyboardViewComponent } from '../../keyboard-view/keyboard-view.compone
import { MouseViewComponent } from '../../mouse-view/mouse-view.component';
import { environment } from '../../../../../environments/environment';
-/**
- * Окно видимости нажатия клавиши (мс). Должно быть > интервала timeupdate (~250ms),
- * чтобы каждое нажатие попало хотя бы в один кадр курсора.
- */
-const KEY_DISPLAY_MS = 400;
const INTERACTIVE_PREROLL_MS = Number.isFinite(environment.interactivePrerollMs)
? Math.max(0, environment.interactivePrerollMs)
: 4000;
+/** Минимальная длительность подсветки нажатия (мс); при перекрытии побеждает более позднее нажатие. */
+const KEY_HIGHLIGHT_MIN_MS = 500;
+
@Component({
selector: 'app-session-interactive-tab',
imports: [
+ FormsModule,
TuiButton,
+ ...TuiTextarea,
HlsPlayerComponent,
StreamSelectorComponent,
KeyboardViewComponent,
@@ -50,13 +53,12 @@ export class SessionInteractiveTabComponent {
readonly telemetryEvents = input.requiredТекущая конфигурация устройства
+ @if (state.currentConfig; as config) { +
+
+ } @else {
+
+
+
+ Экраны
+ {{ config.screen_layout }}
+
+
+
+
+ Пользователь
+ {{ config.username }} @{{ config.hostname }}
+
+
+
+
+ Сеть
+ {{ config.active_iface }}
+
+
+
+
+ Виртуализация
+ {{ config.hypervisor_present ? 'ОБНАРУЖЕНА' : 'Нет' }}
+
+ Данные телеметрии еще не поступили.
+ } +Журнал подозрительных действий
+ @if (state.anomalies.length === 0) { + + } @else { +
+ @for (anomaly of state.anomalies; track anomaly.timestamp_ms) {
+
+ }
+
+
+ }
+ {{ anomaly.timestamp_ms | date:'HH:mm:ss' }}
+
+ {{ anomaly.fieldLabel }}:
+ {{ anomaly.oldValue }}
+
+ Тепловая карта событий телеметрии
+
+ @for (bucket of heatmapBuckets(); track bucket.index) {
+
+ }
+ @if (timelineMaxSec() > 0) {
+
+ }
+
+
+
+
+
+
+
+{{ telemetryRangeLabel(telemetryState().toMs) }}
+
diff --git a/src/app/features/sessions/sessions-list/sessions-list.component.ts b/src/app/features/sessions/sessions-list/sessions-list.component.ts
index 274073d..a6829bf 100644
--- a/src/app/features/sessions/sessions-list/sessions-list.component.ts
+++ b/src/app/features/sessions/sessions-list/sessions-list.component.ts
@@ -22,6 +22,7 @@ import { UserErrorNotifyService } from '../../../core/notifications/user-error-n
import { SessionStatusChipClassesPipe } from '../../../core/sessions/session-status-chip-classes.pipe';
import { SessionStatusPipe } from '../../../core/sessions/session-status.pipe';
import { SessionsApiService } from '../../../core/services/sessions-api.service';
+import { DEFAULT_PAGE_LIMIT } from '../../../core/config/app.tokens';
import { formatTimestamp } from '../../../shared/utils/date-time.util';
@Component({
@@ -50,7 +51,7 @@ export class SessionsListComponent {
private readonly router = inject(Router);
private readonly userErrors = inject(UserErrorNotifyService);
- protected readonly limit = 10;
+ protected readonly limit = inject(DEFAULT_PAGE_LIMIT);
protected readonly pageIndex = signal(0);
protected readonly titleControl = new FormControl('', {
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 5474064..4a28a5d 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,4 +4,5 @@ export const environment = {
apiFallbackOrigin: "https://sparkguardian.ru",
apiBasePath: "/api/v1",
interactivePrerollMs: 4000,
+ defaultPageLimit: 10,
} as const;
diff --git a/src/styles/sg-input-fields.css b/src/styles/sg-input-fields.css
index 964bc8e..c7a977e 100644
--- a/src/styles/sg-input-fields.css
+++ b/src/styles/sg-input-fields.css
@@ -63,6 +63,19 @@ tui-textfield.sg-tui-textfield[tuiAppearance][data-appearance='textfield'][data-
color: var(--sg-color-textfield-focus-label);
}
+tui-textfield.sg-tui-textfield[tuiAppearance][data-appearance='textfield'] textarea {
+ background: transparent;
+ outline: none;
+ box-shadow: none;
+ color: var(--sg-color-text);
+}
+
+tui-textfield.sg-tui-textfield[tuiAppearance][data-appearance='textfield']:focus-within textarea,
+tui-textfield.sg-tui-textfield[tuiAppearance][data-appearance='textfield'][data-focus='true'] textarea {
+ outline: none;
+ box-shadow: none;
+}
+
/* --- нативные поля (datetime-local, text, …) --- */
.sg-native-input {
box-sizing: border-box;