-
-
-
Hello, {{ title() }}
-
Congratulations! Your app is running. 🎉
-
-
-
-
- @for (item of [
- { title: 'Explore the Docs', link: 'https://angular.dev' },
- { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
- { title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'},
- { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
- { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
- { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
- ]; track item.title) {
-
- {{ item.title }}
-
-
- }
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+ @if (isDev) {
+
+ }
+
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..2c3d309 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,17 @@
import { Routes } from '@angular/router';
-export const routes: Routes = [];
+export const routes: Routes = [
+ {
+ path: '',
+ loadComponent: () =>
+ import('./features/sessions/sessions-list/sessions-list.component').then((m) => m.SessionsListComponent),
+ },
+ {
+ path: 'sessions/:id',
+ loadComponent: () =>
+ import('./features/sessions/session-detail/session-detail.component').then(
+ (m) => m.SessionDetailComponent,
+ ),
+ },
+ { path: '**', redirectTo: '' },
+];
diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts
index 5de2561..5e1837f 100644
--- a/src/app/app.spec.ts
+++ b/src/app/app.spec.ts
@@ -1,10 +1,26 @@
import { TestBed } from '@angular/core/testing';
import { App } from './app';
+import { appConfig } from './app.config';
describe('App', () => {
beforeEach(async () => {
+ Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: (query: string) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: () => {},
+ removeListener: () => {},
+ addEventListener: () => {},
+ removeEventListener: () => {},
+ dispatchEvent: () => false,
+ }),
+ });
+
await TestBed.configureTestingModule({
imports: [App],
+ providers: [...appConfig.providers],
}).compileComponents();
});
@@ -14,10 +30,10 @@ describe('App', () => {
expect(app).toBeTruthy();
});
- it('should render title', async () => {
+ it('should show app name in header', async () => {
const fixture = TestBed.createComponent(App);
await fixture.whenStable();
const compiled = fixture.nativeElement as HTMLElement;
- expect(compiled.querySelector('h1')?.textContent).toContain('Hello, sparkguardian');
+ expect(compiled.querySelector('.brand')?.textContent).toContain('SparkGuardian');
});
});
diff --git a/src/app/app.ts b/src/app/app.ts
index 1188fce..91a460a 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,12 +1,14 @@
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { TuiRoot } from '@taiga-ui/core';
+import { Component, isDevMode } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { DevConsoleComponent } from './features/devtools/dev-console/dev-console.component';
@Component({
selector: 'app-root',
- imports: [RouterOutlet],
+ imports: [RouterLink, RouterOutlet, TuiRoot, DevConsoleComponent],
templateUrl: './app.html',
- styleUrl: './app.css'
+ styleUrl: './app.css',
})
export class App {
- protected readonly title = signal('sparkguardian');
+ protected readonly isDev = isDevMode();
}
diff --git a/src/app/core/config/api.tokens.ts b/src/app/core/config/api.tokens.ts
new file mode 100644
index 0000000..0ec98b5
--- /dev/null
+++ b/src/app/core/config/api.tokens.ts
@@ -0,0 +1,34 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, InjectionToken } from '@angular/core';
+
+import { environment } from '../../../environments/environment';
+
+/**
+ * Origin для разрешения относительных `playlist_url` (HLS).
+ * При `ng serve` — origin dev-сервера; API проксируется (см. `proxy.conf.cjs`, `SG_DEV_PROXY_TARGET` в `.env`).
+ */
+export const API_ORIGIN = new InjectionToken
('API_ORIGIN', {
+ factory: () => {
+ const doc = inject(DOCUMENT);
+ const loc = doc.defaultView?.location;
+ if (!loc || loc.protocol === 'file:') {
+ return environment.apiFallbackOrigin;
+ }
+ return loc.origin;
+ },
+});
+
+/**
+ * Базовый путь API. Относительный путь работает в dev (прокси) и при деплое на тот же домен.
+ * Для `file://` — абсолютный URL из `environment`.
+ */
+export const API_BASE_URL = new InjectionToken('API_BASE_URL', {
+ factory: () => {
+ const doc = inject(DOCUMENT);
+ const loc = doc.defaultView?.location;
+ if (loc?.protocol === 'file:') {
+ return `${environment.apiFallbackOrigin}${environment.apiBasePath}`;
+ }
+ return environment.apiBasePath;
+ },
+});
diff --git a/src/app/core/devtools/dev-log.service.ts b/src/app/core/devtools/dev-log.service.ts
new file mode 100644
index 0000000..9642894
--- /dev/null
+++ b/src/app/core/devtools/dev-log.service.ts
@@ -0,0 +1,52 @@
+import { Injectable, signal } from '@angular/core';
+
+export type DevLogLevel = 'info' | 'warn' | 'error';
+export type DevLogStatus = 'pending' | 'ok' | 'error';
+
+export interface DevHttpLogDetails {
+ method: string;
+ url: string;
+ requestHeaders?: Record;
+ requestBody?: unknown;
+ statusCode?: number;
+ durationMs?: number;
+ responseHeaders?: Record;
+ responseBody?: unknown;
+ error?: string;
+}
+
+export interface DevLogEntry {
+ id: number;
+ time: string;
+ level: DevLogLevel;
+ source: 'http' | 'system';
+ message: string;
+ status?: DevLogStatus;
+ details?: DevHttpLogDetails;
+}
+
+@Injectable({ providedIn: 'root' })
+export class DevLogService {
+ private seq = 0;
+ private readonly max = 300;
+ readonly entries = signal([]);
+
+ add(entry: Omit): void {
+ const withMeta: DevLogEntry = {
+ id: ++this.seq,
+ time: new Date().toISOString(),
+ ...entry,
+ };
+ this.entries.update((curr) => [...curr.slice(-(this.max - 1)), withMeta]);
+ }
+
+ update(id: number, patch: Partial>): void {
+ this.entries.update((curr) =>
+ curr.map((item) => (item.id === id ? { ...item, ...patch } : item)),
+ );
+ }
+
+ clear(): void {
+ this.entries.set([]);
+ }
+}
diff --git a/src/app/core/http/api-base-url.interceptor.ts b/src/app/core/http/api-base-url.interceptor.ts
new file mode 100644
index 0000000..7e5aff3
--- /dev/null
+++ b/src/app/core/http/api-base-url.interceptor.ts
@@ -0,0 +1,17 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+
+import { API_BASE_URL } from '../config/api.tokens';
+
+/**
+ * Подставляет базовый URL ко всем относительным запросам.
+ * Абсолютные URL (`http…`) не трогаем — как в Axios с `baseURL`, только через перехватчик.
+ */
+export const apiBaseUrlInterceptor: HttpInterceptorFn = (req, next) => {
+ const base = inject(API_BASE_URL);
+ if (/^https?:\/\//i.test(req.url)) {
+ return next(req);
+ }
+ const path = req.url.startsWith('/') ? req.url : `/${req.url}`;
+ return next(req.clone({ url: `${base}${path}` }));
+};
diff --git a/src/app/core/http/dev-log.interceptor.ts b/src/app/core/http/dev-log.interceptor.ts
new file mode 100644
index 0000000..f84a22b
--- /dev/null
+++ b/src/app/core/http/dev-log.interceptor.ts
@@ -0,0 +1,117 @@
+import {
+ HttpErrorResponse,
+ HttpEvent,
+ HttpHeaders,
+ HttpInterceptorFn,
+ HttpResponse,
+} from '@angular/common/http';
+import { inject, isDevMode } from '@angular/core';
+import { tap } from 'rxjs';
+
+import { httpErrorMessage } from './http-error.util';
+import { DevLogService } from '../devtools/dev-log.service';
+
+function headersToObject(headers: HttpHeaders): Record {
+ const out: Record = {};
+ for (const key of headers.keys()) {
+ out[key] = headers.get(key);
+ }
+ return out;
+}
+
+function normalizeBody(value: unknown): unknown {
+ if (value === undefined) {
+ return null;
+ }
+ if (value === null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+ return value;
+ }
+ if (value instanceof Blob) {
+ return `[Blob ${value.type || 'unknown'} ${value.size} bytes]`;
+ }
+ if (value instanceof FormData) {
+ const fields: Record = {};
+ value.forEach((v, k) => {
+ fields[k] = typeof v === 'string' ? v : `[File ${(v as File).name}]`;
+ });
+ return fields;
+ }
+ if (value instanceof ArrayBuffer) {
+ return `[ArrayBuffer ${value.byteLength} bytes]`;
+ }
+ return value;
+}
+
+export const devLogInterceptor: HttpInterceptorFn = (req, next) => {
+ if (!isDevMode()) {
+ return next(req);
+ }
+
+ const logs = inject(DevLogService);
+ const started = performance.now();
+ logs.add({
+ level: 'info',
+ source: 'http',
+ status: 'pending',
+ message: `→ ${req.method} ${req.urlWithParams} (pending)`,
+ details: {
+ method: req.method,
+ url: req.urlWithParams,
+ requestHeaders: headersToObject(req.headers),
+ requestBody: normalizeBody(req.body),
+ },
+ });
+ const entryId = logs.entries().at(-1)?.id;
+
+ return next(req).pipe(
+ tap({
+ next: (event: HttpEvent) => {
+ if (!(event instanceof HttpResponse)) {
+ return;
+ }
+ const ms = Math.round(performance.now() - started);
+ if (entryId) {
+ logs.update(entryId, {
+ level: 'info',
+ status: 'ok',
+ message: `✓ ${req.method} ${req.urlWithParams} [${event.status}] ${ms}ms`,
+ details: {
+ method: req.method,
+ url: req.urlWithParams,
+ requestHeaders: headersToObject(req.headers),
+ requestBody: normalizeBody(req.body),
+ statusCode: event.status,
+ durationMs: ms,
+ responseHeaders: headersToObject(event.headers),
+ responseBody: normalizeBody(event.body),
+ },
+ });
+ }
+ },
+ error: (error: unknown) => {
+ const ms = Math.round(performance.now() - started);
+ const status = error instanceof HttpErrorResponse ? error.status : undefined;
+ if (entryId) {
+ logs.update(entryId, {
+ level: 'error',
+ status: 'error',
+ message: `✕ ${req.method} ${req.urlWithParams}${status ? ` [${status}]` : ''} ${ms}ms: ${httpErrorMessage(error)}`,
+ details: {
+ method: req.method,
+ url: req.urlWithParams,
+ requestHeaders: headersToObject(req.headers),
+ requestBody: normalizeBody(req.body),
+ statusCode: status,
+ durationMs: ms,
+ responseHeaders:
+ error instanceof HttpErrorResponse ? headersToObject(error.headers) : undefined,
+ responseBody:
+ error instanceof HttpErrorResponse ? normalizeBody(error.error) : undefined,
+ error: httpErrorMessage(error),
+ },
+ });
+ }
+ },
+ }),
+ );
+};
diff --git a/src/app/core/http/error-classification.util.ts b/src/app/core/http/error-classification.util.ts
new file mode 100644
index 0000000..726d016
--- /dev/null
+++ b/src/app/core/http/error-classification.util.ts
@@ -0,0 +1,67 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { TimeoutError } from 'rxjs';
+
+import type { UserErrorKind } from '../notifications/user-error-messages.config';
+
+function isParseFailureMessage(message: string | undefined): boolean {
+ return !!message?.includes('Http failure during parsing');
+}
+
+/**
+ * Определяет категорию ошибки для пользовательского сообщения (без утечки технических деталей).
+ */
+export function classifyUserError(err: unknown): UserErrorKind {
+ if (err instanceof TimeoutError) {
+ return 'timeout';
+ }
+
+ if (err instanceof HttpErrorResponse) {
+ if (isParseFailureMessage(err.message)) {
+ return 'parse_error';
+ }
+ const s = err.status;
+ if (s === 0) {
+ return 'network';
+ }
+ if (s === 408) {
+ return 'timeout';
+ }
+ if (s === 401) {
+ return 'unauthorized';
+ }
+ if (s === 403) {
+ return 'forbidden';
+ }
+ if (s === 404) {
+ return 'not_found';
+ }
+ if (s === 400) {
+ return 'bad_request';
+ }
+ if (s >= 500) {
+ return 'server_error';
+ }
+ if (s >= 400 && s < 500) {
+ return 'client_error';
+ }
+ return 'unknown';
+ }
+
+ if (err instanceof Error) {
+ const m = err.message;
+ if (isParseFailureMessage(m)) {
+ return 'parse_error';
+ }
+ if (/идентификатор|некорректн/i.test(m)) {
+ return 'invalid_input';
+ }
+ if (/timeout|timed out/i.test(m)) {
+ return 'timeout';
+ }
+ if (/network|failed to fetch|load failed|net::/i.test(m)) {
+ return 'network';
+ }
+ }
+
+ return 'unknown';
+}
diff --git a/src/app/core/http/http-error.util.ts b/src/app/core/http/http-error.util.ts
new file mode 100644
index 0000000..3f0fb23
--- /dev/null
+++ b/src/app/core/http/http-error.util.ts
@@ -0,0 +1,56 @@
+import { HttpErrorResponse } from '@angular/common/http';
+
+import type { ApiErrorBody } from '../models/api.types';
+
+/** Безопасная подстановка текста в разметку с innerHTML (например, Taiga notification). */
+export function escapeHtml(text: string): string {
+ return text
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+function summarizeHtmlError(text: string): string | null {
+ const t = text.trim();
+ if (!t.startsWith(']*>([\s\S]*?)<\/pre>/i);
+ if (pre?.[1]) {
+ return pre[1].trim();
+ }
+ const title = t.match(/]*>([\s\S]*?)<\/title>/i);
+ if (title?.[1]) {
+ return title[1].trim();
+ }
+ return 'Сервер вернул HTML вместо JSON (часто редирект на вход или ошибка прокси).';
+}
+
+export function httpErrorMessage(err: unknown): string {
+ if (err instanceof HttpErrorResponse) {
+ const body = err.error as ApiErrorBody | string | null | undefined;
+ if (body && typeof body === 'object' && typeof body.error === 'string') {
+ return body.error;
+ }
+ if (typeof body === 'string' && body.length > 0) {
+ const fromHtml = summarizeHtmlError(body);
+ if (fromHtml) {
+ return fromHtml;
+ }
+ return body.length > 200 ? `${body.slice(0, 200)}…` : body;
+ }
+ if (err.message?.includes('Http failure during parsing')) {
+ return 'Ответ не JSON (часто HTML страницы входа или ошибка прокси /api). Перезапустите `npm start` и проверьте proxy.conf.cjs и `SG_DEV_PROXY_TARGET` в `.env`.';
+ }
+ return err.message || `HTTP ${err.status}`;
+ }
+ if (err instanceof Error) {
+ if (err.message.includes('Http failure during parsing')) {
+ return 'Ответ не JSON — проверьте авторизацию и прокси для API.';
+ }
+ return err.message;
+ }
+ return 'Неизвестная ошибка';
+}
diff --git a/src/app/core/keyboard/keyboard-key-name-map.ts b/src/app/core/keyboard/keyboard-key-name-map.ts
new file mode 100644
index 0000000..c5c6106
--- /dev/null
+++ b/src/app/core/keyboard/keyboard-key-name-map.ts
@@ -0,0 +1,71 @@
+import { charKeyNameToSvgKeyId } from './vk-to-keyboard-svg-id';
+
+/**
+ * Токены из `key_name` и из `modifiers` (через "+"), в нижнем регистре.
+ * Соответствие имён бэкенда → id прямоугольников в KB_USA-standard.svg.
+ */
+function tokenToSvgIds(token: string): string[] {
+ const t = token.trim().toLowerCase();
+ if (!t) {
+ return [];
+ }
+
+ const named: Record = {
+ shift: ['K_kb5a'],
+ meta: ['K_kb6b'],
+ super: ['K_kb6b'],
+ win: ['K_kb6b'],
+ windows: ['K_kb6b'],
+ control: ['K_kb6a'],
+ ctrl: ['K_kb6a'],
+ alt: ['K_kb6c'],
+ tab: ['K_kb3a'],
+ enter: ['K_kb4n'],
+ return: ['K_kb4n'],
+ backspace: ['K_kb2n'],
+ space: ['K_kb6d'],
+ caps: ['K_kb4a'],
+ menu: ['K_kb6m'],
+ };
+
+ if (named[t]) {
+ return named[t]!;
+ }
+
+ const single = charKeyNameToSvgKeyId(t);
+ if (single) {
+ return [single];
+ }
+
+ return [];
+}
+
+/**
+ * Формат бэкенда: `{ key_name, modifiers: "Shift+Meta", action }` и т.п.
+ * Собирает уникальные id клавиш для подсветки (модификаторы + основная клавиша).
+ */
+export function keyNameModifiersPayloadToSvgIds(o: Record): string[] {
+ const out: string[] = [];
+ const seen = new Set();
+
+ const add = (ids: string[]) => {
+ for (const id of ids) {
+ if (id && !seen.has(id)) {
+ seen.add(id);
+ out.push(id);
+ }
+ }
+ };
+
+ const modifiers = typeof o['modifiers'] === 'string' ? o['modifiers'] : '';
+ const keyName = typeof o['key_name'] === 'string' ? o['key_name'] : '';
+
+ for (const part of modifiers.split('+').map((s) => s.trim()).filter(Boolean)) {
+ add(tokenToSvgIds(part));
+ }
+ if (keyName.trim()) {
+ add(tokenToSvgIds(keyName));
+ }
+
+ return out;
+}
diff --git a/src/app/core/keyboard/keyboard-payload.util.ts b/src/app/core/keyboard/keyboard-payload.util.ts
new file mode 100644
index 0000000..9f7c3d5
--- /dev/null
+++ b/src/app/core/keyboard/keyboard-payload.util.ts
@@ -0,0 +1,88 @@
+import type { ParsedEvent } from '../models/api.types';
+
+import { keyNameModifiersPayloadToSvgIds } from './keyboard-key-name-map';
+import { normalizeVirtualKey, vkToKeyboardSvgKeyId } from './vk-to-keyboard-svg-id';
+
+export function isKeyboardTelemetryEvent(event: ParsedEvent): boolean {
+ const t = (event.event_type ?? '').toLowerCase();
+ return t.includes('keyboard') || t.includes('key');
+}
+
+/**
+ * Извлекает виртуальный код клавиши из payload (массив чисел, объект с полями vk/keyCode и т.д.).
+ */
+export function parseKeyboardVirtualKey(data: unknown): number | null {
+ if (data == null) {
+ return null;
+ }
+ if (Array.isArray(data)) {
+ if (data.length >= 1) {
+ const v = data[0];
+ if (typeof v === 'number' && Number.isFinite(v)) {
+ return v;
+ }
+ if (typeof v === 'string') {
+ const n = parseInt(v, 10);
+ return Number.isFinite(n) ? n : null;
+ }
+ }
+ return null;
+ }
+ if (typeof data === 'object') {
+ const o = data as Record;
+ for (const key of ['vk', 'virtualKey', 'VirtualKey', 'keyCode', 'KeyCode', 'wParam']) {
+ const v = o[key];
+ if (typeof v === 'number' && Number.isFinite(v)) {
+ return v;
+ }
+ if (typeof v === 'string') {
+ const n = parseInt(v, 10);
+ if (Number.isFinite(n)) {
+ return n;
+ }
+ }
+ }
+ }
+ return null;
+}
+
+export function eventPayloadJson(data: unknown): string {
+ try {
+ return JSON.stringify(data, null, 2);
+ } catch {
+ return String(data);
+ }
+}
+
+function unwrapJsonPayload(data: unknown): unknown {
+ if (typeof data === 'string') {
+ try {
+ return JSON.parse(data) as unknown;
+ } catch {
+ return data;
+ }
+ }
+ return data;
+}
+
+/**
+ * Id элементов `K_kb*` для подсветки: сначала объект `key_name` / `modifiers`, иначе VK из массива/полей.
+ */
+export function parseKeyboardHighlightKeyIds(data: unknown): string[] {
+ const raw = unwrapJsonPayload(data);
+ if (raw != null && typeof raw === 'object' && !Array.isArray(raw)) {
+ const o = raw as Record;
+ if (typeof o['key_name'] === 'string' || typeof o['modifiers'] === 'string') {
+ const fromNames = keyNameModifiersPayloadToSvgIds(o);
+ if (fromNames.length > 0) {
+ return fromNames;
+ }
+ }
+ }
+ const vk = parseKeyboardVirtualKey(raw);
+ if (vk != null) {
+ const id = vkToKeyboardSvgKeyId(normalizeVirtualKey(vk));
+ return id ? [id] : [];
+ }
+ return [];
+}
diff --git a/src/app/core/keyboard/keyboard-svg-highlight.service.ts b/src/app/core/keyboard/keyboard-svg-highlight.service.ts
new file mode 100644
index 0000000..8dc0168
--- /dev/null
+++ b/src/app/core/keyboard/keyboard-svg-highlight.service.ts
@@ -0,0 +1,54 @@
+import { Injectable, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Observable, defer, from, shareReplay } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+/**
+ * Файл из `public/KB_USA-standard.svg` — отдаётся с корня приложения (`/KB_USA-standard.svg`),
+ * не через API. HttpClient нельзя: `apiBaseUrlInterceptor` превратил бы путь в `/api/v1/...`.
+ */
+const KEYBOARD_SVG_PATH = '/KB_USA-standard.svg';
+
+@Injectable({ providedIn: 'root' })
+export class KeyboardSvgHighlightService {
+ private readonly sanitizer = inject(DomSanitizer);
+
+ private readonly baseSvg$ = defer(() =>
+ from(
+ fetch(KEYBOARD_SVG_PATH).then((r) => {
+ if (!r.ok) {
+ throw new Error(`Не удалось загрузить клавиатуру: ${r.status} ${r.statusText}`);
+ }
+ return r.text();
+ }),
+ ),
+ ).pipe(shareReplay({ bufferSize: 1, refCount: false }));
+
+ svgWithHighlight(keyIds: string[] | null): Observable {
+ return this.baseSvg$.pipe(
+ map((svg) => this.injectHighlight(svg, keyIds ?? [])),
+ map((html) => this.sanitizer.bypassSecurityTrustHtml(html)),
+ );
+ }
+
+ /** Подсветка: заливка `--sg-keyboard-key-pressed-fill` (акцент), подписи/иконки `--sg-keyboard-key-pressed-ink`. */
+ private injectHighlight(svgText: string, keyIds: string[]): string {
+ const valid = keyIds.filter((id) => /^K_kb[0-9a-z]+$/i.test(id));
+ if (valid.length === 0) {
+ return svgText;
+ }
+ const rules: string[] = [];
+ for (const id of valid) {
+ const suffix = id.slice(2);
+ rules.push(
+ `#${id}{fill:var(--sg-keyboard-key-pressed-fill)!important;stroke:none!important;}`,
+ );
+ rules.push(`[id^="T_${suffix}"]{fill:var(--sg-keyboard-key-pressed-ink)!important;}`);
+ rules.push(
+ `#S_${suffix} path,#S_${suffix} line,#S_${suffix} polyline,#S_${suffix} rect{stroke:var(--sg-keyboard-key-pressed-ink)!important;fill:none!important;}`,
+ );
+ }
+ const styleBlock = ``;
+ return svgText.replace(/]*>/i, (open) => `${open}${styleBlock}`);
+ }
+}
diff --git a/src/app/core/keyboard/vk-to-keyboard-svg-id.ts b/src/app/core/keyboard/vk-to-keyboard-svg-id.ts
new file mode 100644
index 0000000..994dd55
--- /dev/null
+++ b/src/app/core/keyboard/vk-to-keyboard-svg-id.ts
@@ -0,0 +1,115 @@
+/**
+ * Соответствие Windows Virtual Key → id элемента в `public/KB_USA-standard.svg` (K_kb*).
+ * Раскладка US QWERTY, без блока F1–F12 (на схеме их нет).
+ */
+export function normalizeVirtualKey(vk: number): number {
+ if (vk >= 0x61 && vk <= 0x7a) {
+ return vk - 0x20;
+ }
+ return vk;
+}
+
+function buildDigitMap(): Map {
+ const ids = ['K_kb2k', 'K_kb2b', 'K_kb2c', 'K_kb2d', 'K_kb2e', 'K_kb2f', 'K_kb2g', 'K_kb2h', 'K_kb2i', 'K_kb2j'];
+ const m = new Map();
+ for (let d = 0; d <= 9; d++) {
+ m.set(0x30 + d, ids[d]!);
+ }
+ return m;
+}
+
+const DIGIT_TO_ID = buildDigitMap();
+
+const LETTER_TO_ID: Record = {
+ A: 'K_kb4c',
+ B: 'K_kb5g',
+ C: 'K_kb5e',
+ D: 'K_kb4e',
+ E: 'K_kb3d',
+ F: 'K_kb4f',
+ G: 'K_kb4g',
+ H: 'K_kb4h',
+ I: 'K_kb3i',
+ J: 'K_kb4i',
+ K: 'K_kb4j',
+ L: 'K_kb4l',
+ M: 'K_kb5i',
+ N: 'K_kb5h',
+ O: 'K_kb3j',
+ P: 'K_kb3k',
+ Q: 'K_kb3b',
+ R: 'K_kb3e',
+ S: 'K_kb4d',
+ T: 'K_kb3f',
+ U: 'K_kb3h',
+ V: 'K_kb5f',
+ W: 'K_kb3c',
+ X: 'K_kb5d',
+ Y: 'K_kb3g',
+ Z: 'K_kb5c',
+};
+
+/** OEM и прочие VK (Windows). */
+const EXTRA_VK: Record = {
+ 0x08: 'K_kb2n',
+ 0x09: 'K_kb3a',
+ 0x0d: 'K_kb4n',
+ 0x10: 'K_kb5a',
+ 0x11: 'K_kb6a',
+ 0x12: 'K_kb6c',
+ 0x14: 'K_kb4a',
+ 0x20: 'K_kb6d',
+ 0x5b: 'K_kb6b',
+ 0x5c: 'K_kb6l',
+ 0x5d: 'K_kb6m',
+ 0xa0: 'K_kb5a',
+ 0xa1: 'K_kb5m',
+ 0xa2: 'K_kb6a',
+ 0xa3: 'K_kb6n',
+ 0xa4: 'K_kb6c',
+ 0xa5: 'K_kb6k',
+ 0xba: 'K_kb4l',
+ 0xbb: 'K_kb2m',
+ 0xbc: 'K_kb5j',
+ 0xbd: 'K_kb2l',
+ 0xbe: 'K_kb5k',
+ 0xbf: 'K_kb5l',
+ 0xc0: 'K_kb2a',
+ 0xdb: 'K_kb3l',
+ 0xdc: 'K_kb3n',
+ 0xdd: 'K_kb3m',
+ 0xde: 'K_kb4m',
+};
+
+export function vkToKeyboardSvgKeyId(vk: number): string | null {
+ const k = normalizeVirtualKey(vk);
+ const fromExtra = EXTRA_VK[k];
+ if (fromExtra) {
+ return fromExtra;
+ }
+ const digit = DIGIT_TO_ID.get(k);
+ if (digit) {
+ return digit;
+ }
+ if (k >= 0x41 && k <= 0x5a) {
+ const ch = String.fromCharCode(k);
+ return LETTER_TO_ID[ch] ?? null;
+ }
+ return null;
+}
+
+/** Одна буква A–Z или цифра 0–9 как в подписи клавиши (`key_name`). */
+export function charKeyNameToSvgKeyId(name: string): string | null {
+ const c = name.trim();
+ if (c.length !== 1) {
+ return null;
+ }
+ if (c >= '0' && c <= '9') {
+ return DIGIT_TO_ID.get(c.charCodeAt(0)) ?? null;
+ }
+ const ch = c.toUpperCase();
+ if (ch >= 'A' && ch <= 'Z') {
+ return LETTER_TO_ID[ch] ?? null;
+ }
+ return null;
+}
diff --git a/src/app/core/models/api.types.ts b/src/app/core/models/api.types.ts
new file mode 100644
index 0000000..55433bc
--- /dev/null
+++ b/src/app/core/models/api.types.ts
@@ -0,0 +1,71 @@
+/** Соответствует `handler.ErrorResponse` из OpenAPI. */
+export interface ApiErrorBody {
+ code?: string;
+ error?: string;
+}
+
+export interface CreateSessionRequest {
+ title: string;
+}
+
+export interface CreateSessionResponse {
+ id: number;
+ session_key: string;
+ status: string;
+ title: string;
+ created_at: string;
+}
+
+export interface SessionSummary {
+ id: string;
+ user_id?: string;
+ status: string;
+ started_at?: string;
+ ended_at?: string;
+ chunks_total?: number;
+ events_total?: number;
+ /** Не в swagger, но бэкенд может отдавать для списка. */
+ title?: string;
+}
+
+export interface SessionListResponse {
+ sessions: SessionSummary[];
+ total: number;
+ limit: number;
+ offset: number;
+}
+
+export interface StreamInfo {
+ stream_type: string;
+ chunk_count?: number;
+ duration_ms?: number;
+ playlist_url: string;
+}
+
+export interface SessionDetailResponse {
+ session: SessionSummary;
+ streams: StreamInfo[];
+}
+
+export interface TelemetryEvent {
+ id: number;
+ session_id: number;
+ user_id?: number;
+ event_type: string;
+ created_at: string;
+ payload?: number[];
+}
+
+export interface ParsedEvent {
+ event_type: string;
+ timestamp: number;
+ data?: unknown;
+}
+
+export interface ParsedEventsResponse {
+ session_id: number;
+ count: number;
+ events: ParsedEvent[];
+}
+
+export type StreamType = 'screen' | 'webcam';
diff --git a/src/app/core/notifications/user-error-messages.config.ts b/src/app/core/notifications/user-error-messages.config.ts
new file mode 100644
index 0000000..b555ca5
--- /dev/null
+++ b/src/app/core/notifications/user-error-messages.config.ts
@@ -0,0 +1,34 @@
+/**
+ * Типы ошибок для подбора дружелюбного текста во всплывающих уведомлениях.
+ * Соответствие «тип → фраза» задаётся здесь; технические детали — только в Dev Console.
+ */
+export const USER_ERROR_FRIENDLY_MESSAGES = {
+ /** Нет сети / соединение сброшено (часто HTTP 0). */
+ network: 'Проверьте интернет-соединение.',
+ /** Таймаут запроса (в т.ч. RxJS timeout, HTTP 408). */
+ timeout: 'Запрос занял слишком много времени. Попробуйте позже.',
+ /** Ответ сервера 5xx. */
+ server_error: 'Уже работаем над этим.',
+ /** 404. */
+ not_found: 'Не удалось найти запрашиваемые данные.',
+ /** 401. */
+ unauthorized: 'Требуется вход в систему.',
+ /** 403. */
+ forbidden: 'Недостаточно прав для этого действия.',
+ /** 400. */
+ bad_request: 'Некорректный запрос. Попробуйте позже.',
+ /** Прочие 4xx (кроме перечисленных выше). */
+ client_error: 'Не удалось выполнить запрос. Попробуйте позже.',
+ /** Не JSON / ошибка разбора ответа. */
+ parse_error: 'Получен неожиданный ответ сервера. Попробуйте позже.',
+ /** Локальная валидация (неверный id и т.п.). */
+ invalid_input: 'Проверьте введённые данные.',
+ /** Не удалось отнести к категории. */
+ unknown: 'Попробуйте позже.',
+} as const;
+
+export type UserErrorKind = keyof typeof USER_ERROR_FRIENDLY_MESSAGES;
+
+export function friendlyMessageForUserError(kind: UserErrorKind): string {
+ return USER_ERROR_FRIENDLY_MESSAGES[kind];
+}
diff --git a/src/app/core/notifications/user-error-notify.service.ts b/src/app/core/notifications/user-error-notify.service.ts
new file mode 100644
index 0000000..5eff160
--- /dev/null
+++ b/src/app/core/notifications/user-error-notify.service.ts
@@ -0,0 +1,40 @@
+import { isDevMode, inject, Injectable } from '@angular/core';
+import { TuiNotificationService } from '@taiga-ui/core/components/notification';
+
+import { DevLogService } from '../devtools/dev-log.service';
+import { classifyUserError } from '../http/error-classification.util';
+import { escapeHtml, httpErrorMessage } from '../http/http-error.util';
+import { friendlyMessageForUserError } from './user-error-messages.config';
+
+const ERROR_TOAST_TITLE = 'Что-то пошло не так...';
+
+/**
+ * Показывает пользователю обобщённое уведомление; точный текст ошибки — только в DevLog (в dev).
+ */
+@Injectable({ providedIn: 'root' })
+export class UserErrorNotifyService {
+ private readonly notifications = inject(TuiNotificationService);
+ private readonly devLog = inject(DevLogService);
+
+ notifyError(err: unknown, source: string): void {
+ const kind = classifyUserError(err);
+ const userSubtitle = friendlyMessageForUserError(kind);
+ const technical = httpErrorMessage(err);
+
+ if (isDevMode()) {
+ this.devLog.add({
+ level: 'error',
+ source: 'system',
+ message: `${source}: ${technical}`,
+ });
+ }
+
+ this.notifications
+ .open(escapeHtml(userSubtitle), {
+ label: ERROR_TOAST_TITLE,
+ appearance: 'negative',
+ autoClose: 0,
+ })
+ .subscribe();
+ }
+}
diff --git a/src/app/core/services/sessions-api.service.ts b/src/app/core/services/sessions-api.service.ts
new file mode 100644
index 0000000..ff82622
--- /dev/null
+++ b/src/app/core/services/sessions-api.service.ts
@@ -0,0 +1,80 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { API_ORIGIN } from '../config/api.tokens';
+import type {
+ CreateSessionRequest,
+ CreateSessionResponse,
+ ParsedEventsResponse,
+ SessionDetailResponse,
+ SessionListResponse,
+ StreamType,
+ TelemetryEvent,
+} from '../models/api.types';
+
+@Injectable({ providedIn: 'root' })
+export class SessionsApiService {
+ private readonly http = inject(HttpClient);
+ private readonly apiOrigin = inject(API_ORIGIN);
+
+ listSessions(limit = 50, offset = 0): Observable {
+ const params = new HttpParams()
+ .set('limit', String(limit))
+ .set('offset', String(offset));
+ return this.http.get('/sessions', { params });
+ }
+
+ createSession(body: CreateSessionRequest): Observable {
+ return this.http.post('/sessions', body);
+ }
+
+ getSession(id: number): Observable {
+ return this.http.get(`/sessions/${id}`);
+ }
+
+ getTelemetry(sessionId: number): Observable {
+ return this.http.get(`/sessions/${sessionId}/telemetry`);
+ }
+
+ getParsedEvents(sessionId: number, from?: number, to?: number): Observable {
+ let params = new HttpParams();
+ if (typeof from === 'number') {
+ params = params.set('from', String(from));
+ }
+ if (typeof to === 'number') {
+ params = params.set('to', String(to));
+ }
+ return this.http.get(`/sessions/${sessionId}/events`, { params });
+ }
+
+ /**
+ * Относительный `playlist_url` из API нужно разрешить относительно хоста (`API_ORIGIN`).
+ */
+ resolvePlaylistUrl(playlistUrl: string): string {
+ if (/^https?:\/\//i.test(playlistUrl)) {
+ return playlistUrl;
+ }
+ return new URL(playlistUrl, `${this.apiOrigin}/`).href;
+ }
+
+ /**
+ * Ручка для агента (Bearer). В веб-интерфейсе обычно не нужна — оставлена для отладки/скриптов.
+ */
+ uploadChunk(
+ sessionId: number,
+ chunkIdx: number,
+ file: File,
+ streamType: StreamType = 'screen',
+ bearerToken: string,
+ ): Observable {
+ const form = new FormData();
+ form.set('session_id', String(sessionId));
+ form.set('chunk_idx', String(chunkIdx));
+ form.set('stream_type', streamType);
+ form.set('file', file, file.name);
+ return this.http.post('/upload', form, {
+ headers: { Authorization: `Bearer ${bearerToken}` },
+ });
+ }
+}
diff --git a/src/app/core/sessions/session-status-chip-classes.pipe.ts b/src/app/core/sessions/session-status-chip-classes.pipe.ts
new file mode 100644
index 0000000..53fb74f
--- /dev/null
+++ b/src/app/core/sessions/session-status-chip-classes.pipe.ts
@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * Классы-модификаторы для чипа статуса. `finished` — без модификатора (дефолтный вид Taiga).
+ */
+@Pipe({
+ name: 'sessionStatusChipClasses',
+ standalone: true,
+})
+export class SessionStatusChipClassesPipe implements PipeTransform {
+ transform(value: string | null | undefined): Record {
+ const k = value?.trim().toLowerCase() ?? '';
+ if (k === '' || k === 'finished') {
+ return {};
+ }
+ if (k === 'active') {
+ return { 'status-chip--active': true };
+ }
+ if (k === 'pending') {
+ return { 'status-chip--pending': true };
+ }
+ return { 'status-chip--unknown': true };
+ }
+}
diff --git a/src/app/core/sessions/session-status-labels.config.ts b/src/app/core/sessions/session-status-labels.config.ts
new file mode 100644
index 0000000..c94b1ea
--- /dev/null
+++ b/src/app/core/sessions/session-status-labels.config.ts
@@ -0,0 +1,11 @@
+/**
+ * Отображаемые подписи для статусов сессий (значения с API — обычно в нижнем регистре).
+ * Неизвестный ключ в UI показывается как есть; в dev — предупреждение в консоли разработчика.
+ */
+export const SESSION_STATUS_LABELS: Readonly> = {
+ active: 'Активная',
+ pending: 'Ожидается',
+ finished: 'Завершена',
+ paused: 'Приостановлена',
+ failed: 'Ошибка',
+};
diff --git a/src/app/core/sessions/session-status.pipe.ts b/src/app/core/sessions/session-status.pipe.ts
new file mode 100644
index 0000000..b604b8d
--- /dev/null
+++ b/src/app/core/sessions/session-status.pipe.ts
@@ -0,0 +1,33 @@
+import { isDevMode, Pipe, PipeTransform, inject } from '@angular/core';
+
+import { DevLogService } from '../devtools/dev-log.service';
+import { SESSION_STATUS_LABELS } from './session-status-labels.config';
+
+@Pipe({
+ name: 'sessionStatus',
+ standalone: true,
+})
+export class SessionStatusPipe implements PipeTransform {
+ private readonly devLog = inject(DevLogService);
+ private readonly warnedUnknown = new Set();
+
+ transform(value: string | null | undefined): string {
+ if (value == null || value === '') {
+ return '—';
+ }
+ const key = value.trim();
+ const mapped = SESSION_STATUS_LABELS[key.toLowerCase()];
+ if (mapped !== undefined) {
+ return mapped;
+ }
+ if (isDevMode() && !this.warnedUnknown.has(key)) {
+ this.warnedUnknown.add(key);
+ this.devLog.add({
+ level: 'warn',
+ source: 'system',
+ message: `Неизвестный статус сессии (нет подписи в session-status-labels.config): ${key}`,
+ });
+ }
+ return key;
+ }
+}
diff --git a/src/app/features/devtools/dev-console/dev-console.component.ts b/src/app/features/devtools/dev-console/dev-console.component.ts
new file mode 100644
index 0000000..6db4871
--- /dev/null
+++ b/src/app/features/devtools/dev-console/dev-console.component.ts
@@ -0,0 +1,89 @@
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, isDevMode, signal } from '@angular/core';
+
+import { DevLogService } from '../../../core/devtools/dev-log.service';
+
+@Component({
+ selector: 'app-dev-console',
+ imports: [DatePipe],
+ templateUrl: './dev-console.html',
+ styleUrl: './dev-console.css',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevConsoleComponent {
+ private readonly logs = inject(DevLogService);
+ protected readonly isDev = isDevMode();
+ protected readonly collapsed = signal(false);
+ protected readonly minimized = signal(false);
+ protected readonly entries = this.logs.entries;
+ protected readonly count = computed(() => this.entries().length);
+ protected readonly expandedIds = signal>({});
+
+ constructor() {
+ if (!this.isDev || typeof window === 'undefined') {
+ return;
+ }
+
+ window.addEventListener('error', (e) => {
+ this.logs.add({
+ level: 'error',
+ source: 'system',
+ message: `${e.message} (${e.filename}:${e.lineno})`,
+ });
+ });
+
+ window.addEventListener('unhandledrejection', (e: PromiseRejectionEvent) => {
+ const reason =
+ typeof e.reason === 'string'
+ ? e.reason
+ : e.reason instanceof Error
+ ? e.reason.message
+ : 'Unhandled promise rejection';
+ this.logs.add({
+ level: 'warn',
+ source: 'system',
+ message: reason,
+ });
+ });
+ }
+
+ protected toggleCollapsed(): void {
+ this.collapsed.update((v) => !v);
+ }
+
+ protected minimize(): void {
+ this.minimized.set(true);
+ this.collapsed.set(false);
+ }
+
+ protected restore(): void {
+ this.minimized.set(false);
+ }
+
+ protected clear(): void {
+ this.logs.clear();
+ this.expandedIds.set({});
+ }
+
+ protected toggleExpanded(id: number): void {
+ this.expandedIds.update((curr) => ({ ...curr, [id]: !curr[id] }));
+ }
+
+ protected isExpanded(id: number): boolean {
+ return !!this.expandedIds()[id];
+ }
+
+ protected pretty(value: unknown): string {
+ if (value === undefined) {
+ return '';
+ }
+ if (typeof value === 'string') {
+ return value;
+ }
+ try {
+ return JSON.stringify(value, null, 2);
+ } catch {
+ return String(value);
+ }
+ }
+}
diff --git a/src/app/features/devtools/dev-console/dev-console.css b/src/app/features/devtools/dev-console/dev-console.css
new file mode 100644
index 0000000..ab13b83
--- /dev/null
+++ b/src/app/features/devtools/dev-console/dev-console.css
@@ -0,0 +1,144 @@
+:host {
+ position: fixed;
+ right: 1rem;
+ bottom: 1rem;
+ z-index: 1000;
+}
+
+.dev-console-mini {
+ border: 1px solid var(--tui-border-normal);
+ border-radius: 999px;
+ background: #1b1d22;
+ color: #e8edf1;
+ padding: 0.45rem 0.7rem;
+ font-size: 0.78rem;
+ line-height: 1;
+ cursor: pointer;
+ box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
+}
+
+.dev-console {
+ width: min(760px, calc(100vw - 2rem));
+ max-height: min(46vh, 380px);
+ border: 1px solid var(--tui-border-normal);
+ border-radius: 0.75rem;
+ background: #121317;
+ color: #e8edf1;
+ box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
+ overflow: hidden;
+}
+
+.dev-console_collapsed {
+ max-height: 2.5rem;
+}
+
+.dev-console__header {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ padding: 0.4rem 0.55rem;
+ background: #1b1d22;
+ border-bottom: 1px solid rgb(255 255 255 / 8%);
+ font-size: 0.8rem;
+}
+
+.dev-console__count {
+ margin-right: auto;
+ color: #9aa4b2;
+}
+
+.dev-console__header button {
+ border: 1px solid rgb(255 255 255 / 18%);
+ background: transparent;
+ color: inherit;
+ border-radius: 0.35rem;
+ font-size: 0.75rem;
+ line-height: 1;
+ padding: 0.35rem 0.45rem;
+ cursor: pointer;
+}
+
+.dev-console__list {
+ overflow: auto;
+ max-height: calc(min(46vh, 380px) - 2.5rem);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.76rem;
+}
+
+.dev-console__entry {
+ display: grid;
+ grid-template-columns: 6rem 3.2rem 1fr;
+ gap: 0.5rem;
+ padding: 0.35rem 0.55rem;
+ border-bottom: 1px solid rgb(255 255 255 / 6%);
+}
+
+.dev-console__main {
+ min-width: 0;
+}
+
+.dev-console__entry[data-level='warn'] {
+ background: rgb(255 199 0 / 8%);
+}
+
+.dev-console__entry[data-level='error'] {
+ background: rgb(217 45 32 / 12%);
+}
+
+.dev-console__time {
+ color: #9aa4b2;
+}
+
+.dev-console__source {
+ color: #c7cbd1;
+ text-transform: uppercase;
+}
+
+.dev-console__message {
+ word-break: break-word;
+}
+
+.dev-console__expand {
+ margin-top: 0.25rem;
+ border: 1px solid rgb(255 255 255 / 18%);
+ background: transparent;
+ color: #d6dde7;
+ border-radius: 0.3rem;
+ font-size: 0.72rem;
+ line-height: 1.2;
+ padding: 0.2rem 0.35rem;
+ cursor: pointer;
+}
+
+.dev-console__details {
+ margin-top: 0.35rem;
+ padding: 0.4rem;
+ border: 1px solid rgb(255 255 255 / 12%);
+ border-radius: 0.4rem;
+ background: rgb(0 0 0 / 18%);
+}
+
+.dev-console__meta {
+ margin-bottom: 0.35rem;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.6rem;
+}
+
+.dev-console__details details {
+ margin: 0.35rem 0;
+}
+
+.dev-console__details summary {
+ cursor: pointer;
+ color: #d4d9e0;
+}
+
+.dev-console__details pre {
+ margin: 0.35rem 0 0;
+ padding: 0.35rem;
+ border-radius: 0.35rem;
+ background: rgb(255 255 255 / 4%);
+ white-space: pre-wrap;
+ word-break: break-word;
+}
diff --git a/src/app/features/devtools/dev-console/dev-console.html b/src/app/features/devtools/dev-console/dev-console.html
new file mode 100644
index 0000000..e2b11ee
--- /dev/null
+++ b/src/app/features/devtools/dev-console/dev-console.html
@@ -0,0 +1,79 @@
+@if (isDev) {
+ @if (minimized()) {
+
+ } @else {
+
+ }
+}
diff --git a/src/app/features/sessions/hls-player/hls-player.component.ts b/src/app/features/sessions/hls-player/hls-player.component.ts
new file mode 100644
index 0000000..08140fe
--- /dev/null
+++ b/src/app/features/sessions/hls-player/hls-player.component.ts
@@ -0,0 +1,48 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ effect,
+ ElementRef,
+ input,
+ viewChild,
+} from '@angular/core';
+import Hls from 'hls.js';
+
+@Component({
+ selector: 'app-hls-player',
+ templateUrl: './hls-player.html',
+ styleUrl: './hls-player.css',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlsPlayerComponent {
+ /** Полный URL плейлиста `.m3u8`. */
+ readonly src = input.required();
+
+ private readonly videoRef = viewChild>('videoEl');
+
+ constructor() {
+ effect((onCleanup) => {
+ const url = this.src();
+ const ref = this.videoRef();
+ if (!ref) {
+ return;
+ }
+ const video = ref.nativeElement;
+ let hls: Hls | null = null;
+
+ if (Hls.isSupported()) {
+ hls = new Hls({ enableWorker: true, lowLatencyMode: true });
+ hls.loadSource(url);
+ hls.attachMedia(video);
+ } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+ video.src = url;
+ }
+
+ onCleanup(() => {
+ hls?.destroy();
+ video.removeAttribute('src');
+ video.load();
+ });
+ });
+ }
+}
diff --git a/src/app/features/sessions/hls-player/hls-player.css b/src/app/features/sessions/hls-player/hls-player.css
new file mode 100644
index 0000000..056c86a
--- /dev/null
+++ b/src/app/features/sessions/hls-player/hls-player.css
@@ -0,0 +1,11 @@
+:host {
+ display: block;
+ width: 100%;
+ max-width: 960px;
+}
+
+.player {
+ width: 100%;
+ border-radius: var(--tui-radius-l, 0.75rem);
+ background: var(--tui-background-neutral-1, #000);
+}
diff --git a/src/app/features/sessions/hls-player/hls-player.html b/src/app/features/sessions/hls-player/hls-player.html
new file mode 100644
index 0000000..34fd645
--- /dev/null
+++ b/src/app/features/sessions/hls-player/hls-player.html
@@ -0,0 +1 @@
+
diff --git a/src/app/features/sessions/session-detail/session-detail.component.ts b/src/app/features/sessions/session-detail/session-detail.component.ts
new file mode 100644
index 0000000..6115703
--- /dev/null
+++ b/src/app/features/sessions/session-detail/session-detail.component.ts
@@ -0,0 +1,325 @@
+import { AsyncPipe, NgClass } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ChangeDetectionStrategy, Component, inject, model, signal } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { TuiButton } from '@taiga-ui/core/components/button';
+import { TuiLink } from '@taiga-ui/core/components/link';
+import { TuiLoader } from '@taiga-ui/core/components/loader';
+import { TuiTitle } from '@taiga-ui/core/components/title';
+import { TuiChip } from '@taiga-ui/kit/components/chip';
+import { TuiTabs } from '@taiga-ui/kit/components/tabs';
+import { catchError, combineLatest, distinctUntilChanged, map, of, startWith, switchMap, tap, timeout } from 'rxjs';
+
+import { UserErrorNotifyService } from '../../../core/notifications/user-error-notify.service';
+import { SessionStatusChipClassesPipe } from '../../../core/sessions/session-status-chip-classes.pipe';
+import { SessionStatusPipe } from '../../../core/sessions/session-status.pipe';
+import type { ParsedEvent, SessionDetailResponse, StreamInfo } from '../../../core/models/api.types';
+import { SessionsApiService } from '../../../core/services/sessions-api.service';
+import { formatTimestamp } from '../../../shared/utils/date-time.util';
+import { HlsPlayerComponent } from '../hls-player/hls-player.component';
+import { TelemetryEventDetailComponent } from '../telemetry-event-detail/telemetry-event-detail.component';
+
+@Component({
+ selector: 'app-session-detail',
+ imports: [
+ AsyncPipe,
+ NgClass,
+ RouterLink,
+ HlsPlayerComponent,
+ TuiButton,
+ TuiChip,
+ ...TuiTabs,
+ TuiLink,
+ TuiLoader,
+ TuiTitle,
+ SessionStatusChipClassesPipe,
+ SessionStatusPipe,
+ TelemetryEventDetailComponent,
+ ],
+ templateUrl: './session-detail.html',
+ styleUrl: './session-detail.css',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SessionDetailComponent {
+ private readonly route = inject(ActivatedRoute);
+ private readonly api = inject(SessionsApiService);
+ private readonly userErrors = inject(UserErrorNotifyService);
+
+ private readonly telemetryToMs = signal(null);
+ private readonly recordingStartMs = signal(null);
+ private readonly recordingEndMs = signal(null);
+ protected readonly customToLocal = signal('');
+
+ /** Выбранный тип потока (или первая вкладка по умолчанию в шаблоне). */
+ protected readonly selectedStreamType = signal(null);
+
+ /** 0 — просмотр, 1 — служебная информация. */
+ protected readonly activeTabIndex = model(0);
+
+ /** null — все типы событий в таблице телеметрии. */
+ protected readonly telemetryEventTypeFilter = signal(null);
+
+ /** Раскрытая строка телеметрии: ключ или null. */
+ protected readonly expandedTelemetryRowKey = signal(null);
+
+ private readonly sessionId$ = this.route.paramMap.pipe(
+ map((p) => Number(p.get('id'))),
+ distinctUntilChanged(),
+ );
+
+ protected readonly vm$ = this.sessionId$.pipe(
+ switchMap((id) => {
+ if (!Number.isFinite(id)) {
+ this.userErrors.notifyError(new Error('Некорректный идентификатор сессии'), 'Сессия');
+ return of({ status: 'error' as const });
+ }
+ this.selectedStreamType.set(null);
+ this.activeTabIndex.set(0);
+ this.telemetryEventTypeFilter.set(null);
+ this.expandedTelemetryRowKey.set(null);
+ return this.api.getSession(id).pipe(
+ map((detail) => ({ status: 'ok' as const, id, detail })),
+ tap((state) => {
+ if (state.status !== 'ok') {
+ return;
+ }
+ const start = this.toUnixMs(state.detail.session.started_at);
+ const end = this.toUnixMs(state.detail.session.ended_at);
+ this.recordingStartMs.set(start);
+ this.recordingEndMs.set(end);
+ // Дефолт для телеметрии: до текущего момента (или конца записи, если завершена).
+ if (this.telemetryToMs() === null) {
+ this.telemetryToMs.set(end ?? Date.now());
+ }
+ }),
+ catchError((e: HttpErrorResponse) => {
+ this.userErrors.notifyError(e, 'Сессия');
+ return of({ status: 'error' as const });
+ }),
+ startWith({ status: 'loading' as const }),
+ );
+ }),
+ );
+
+ protected readonly telemetry$ = combineLatest([
+ this.sessionId$,
+ toObservable(this.telemetryToMs),
+ toObservable(this.recordingStartMs),
+ toObservable(this.recordingEndMs),
+ ]).pipe(
+ switchMap(([id, toMs, recordingStartMs, recordingEndMs]) => {
+ if (!Number.isFinite(id)) {
+ return of({
+ status: 'error' as const,
+ toMs,
+ fromMs: recordingStartMs ?? 0,
+ telemetry: [] as ParsedEvent[],
+ parsedMeta: undefined,
+ });
+ }
+ const now = Date.now();
+ const lowerBound = recordingStartMs ?? 0;
+ const upperBound = recordingEndMs ?? now;
+ const normalizedTo = this.clamp(toMs ?? upperBound, lowerBound, upperBound);
+ return this.api
+ .getParsedEvents(
+ id,
+ lowerBound,
+ normalizedTo,
+ )
+ .pipe(
+ timeout(12000),
+ map((resp) => ({
+ status: 'ok' as const,
+ toMs: normalizedTo,
+ fromMs: lowerBound,
+ telemetry: Array.isArray(resp.events) ? resp.events : [],
+ parsedMeta: {
+ session_id: resp.session_id,
+ count: resp.count,
+ },
+ })),
+ catchError((e: unknown) => {
+ this.userErrors.notifyError(e, 'Телеметрия');
+ return of({
+ status: 'error' as const,
+ toMs: normalizedTo,
+ fromMs: lowerBound,
+ telemetry: [] as ParsedEvent[],
+ parsedMeta: undefined,
+ });
+ }),
+ startWith({
+ status: 'loading' as const,
+ toMs: normalizedTo,
+ fromMs: lowerBound,
+ telemetry: [] as ParsedEvent[],
+ parsedMeta: undefined,
+ }),
+ );
+ }),
+ );
+
+ protected pickStream(type: string): void {
+ this.selectedStreamType.set(type);
+ }
+
+ protected activeStreamType(detail: SessionDetailResponse): string | null {
+ const streams = detail.streams;
+ if (!streams?.length) {
+ return null;
+ }
+ const picked = this.selectedStreamType();
+ if (picked && streams.some((s) => s.stream_type === picked)) {
+ return picked;
+ }
+ return streams[0].stream_type;
+ }
+
+ protected playlistUrl(detail: SessionDetailResponse): string | null {
+ const t = this.activeStreamType(detail);
+ if (!t) {
+ return null;
+ }
+ const stream = detail.streams.find((s) => s.stream_type === t);
+ return stream ? this.api.resolvePlaylistUrl(stream.playlist_url) : null;
+ }
+
+ protected formatDate(value: string | null | undefined): string {
+ return formatTimestamp(value);
+ }
+
+ protected formatUnixMs(value: number | null | undefined): string {
+ if (!value) {
+ return '—';
+ }
+ return formatTimestamp(new Date(value).toISOString());
+ }
+
+ protected pickTelemetryEventTypeFilter(type: string | null): void {
+ this.telemetryEventTypeFilter.set(type);
+ this.expandedTelemetryRowKey.set(null);
+ }
+
+ protected telemetryRowKey(row: ParsedEvent, index: number): string {
+ return `${row.timestamp}\u0000${row.event_type}\u0000${index}`;
+ }
+
+ protected toggleTelemetryRow(row: ParsedEvent, index: number): void {
+ const key = this.telemetryRowKey(row, index);
+ this.expandedTelemetryRowKey.update((cur) => (cur === key ? null : key));
+ }
+
+ protected isTelemetryRowExpanded(row: ParsedEvent, index: number): boolean {
+ return this.expandedTelemetryRowKey() === this.telemetryRowKey(row, index);
+ }
+
+ /** Уникальные значения `event_type` (пустая строка — отдельная вкладка). */
+ protected uniqueTelemetryEventTypes(events: ParsedEvent[]): string[] {
+ const set = new Set();
+ for (const e of events) {
+ set.add(e.event_type ?? '');
+ }
+ return [...set].sort((a, b) => a.localeCompare(b, 'ru'));
+ }
+
+ protected telemetryEventsOfType(events: ParsedEvent[], typeKey: string): number {
+ return events.filter((e) => (e.event_type ?? '') === typeKey).length;
+ }
+
+ protected filteredTelemetryEvents(events: ParsedEvent[]): ParsedEvent[] {
+ const filter = this.telemetryEventTypeFilter();
+ if (filter === null) {
+ return events;
+ }
+ return events.filter((e) => (e.event_type ?? '') === filter);
+ }
+
+ protected telemetryTypeTabLabel(typeKey: string): string {
+ return typeKey === '' ? 'Без типа' : typeKey;
+ }
+
+ protected eventDataPreview(event: ParsedEvent): string {
+ const data = event.data;
+ if (data === null || data === undefined) {
+ return '—';
+ }
+ if (Array.isArray(data)) {
+ return data.map((v) => String(v)).join(', ');
+ }
+ if (typeof data === 'object') {
+ try {
+ return JSON.stringify(data);
+ } catch {
+ return '[object]';
+ }
+ }
+ return String(data);
+ }
+
+ protected selectRecentWindow(seconds: number): void {
+ this.customToLocal.set('');
+ const start = this.recordingStartMs() ?? Date.now();
+ const end = this.recordingEndMs() ?? Date.now();
+ this.telemetryToMs.set(this.clamp(start + seconds * 1000, start, end));
+ }
+
+ protected loadUntilEndTelemetry(): void {
+ this.customToLocal.set('');
+ const end = this.recordingEndMs() ?? Date.now();
+ this.telemetryToMs.set(end);
+ }
+
+ protected applyCustomTo(value: string): void {
+ this.customToLocal.set(value);
+ if (!value) {
+ return;
+ }
+ const ms = new Date(value).getTime();
+ if (Number.isFinite(ms)) {
+ const start = this.recordingStartMs() ?? Date.now();
+ const end = this.recordingEndMs() ?? Date.now();
+ this.telemetryToMs.set(this.clamp(ms, start, end));
+ }
+ }
+
+ protected telemetryRangeLabel(toMs: number | null): string {
+ return `С ${this.formatUnixMs(this.recordingStartMs())} до ${this.formatUnixMs(toMs)}`;
+ }
+
+ protected detailPayloadJson(detail: SessionDetailResponse): string {
+ try {
+ return JSON.stringify(detail, null, 2);
+ } catch {
+ return '{}';
+ }
+ }
+
+ protected formatDurationMs(ms: number | null | undefined): string {
+ if (ms === null || ms === undefined || !Number.isFinite(ms)) {
+ return '—';
+ }
+ return `${ms} ms`;
+ }
+
+ protected streamResolvedPlaylistUrl(stream: StreamInfo): string {
+ return this.api.resolvePlaylistUrl(stream.playlist_url);
+ }
+
+ private toUnixMs(value: string | null | undefined): number | null {
+ if (!value) {
+ return null;
+ }
+ const ms = new Date(value).getTime();
+ return Number.isFinite(ms) ? ms : null;
+ }
+
+ private clamp(value: number, min: number, max: number): number {
+ if (max < min) {
+ return min;
+ }
+ return Math.min(max, Math.max(min, value));
+ }
+
+}
diff --git a/src/app/features/sessions/session-detail/session-detail.css b/src/app/features/sessions/session-detail/session-detail.css
new file mode 100644
index 0000000..6ad8a09
--- /dev/null
+++ b/src/app/features/sessions/session-detail/session-detail.css
@@ -0,0 +1,258 @@
+.page {
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 1.5rem 1rem 3rem;
+ box-sizing: border-box;
+}
+
+.back {
+ margin-bottom: 1rem;
+}
+
+.heading {
+ margin-bottom: 1.25rem;
+}
+
+/* Не задавать display: block — ломает горизонтальный flex у tui-tabs и переносит вкладки. */
+.session-tabs {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: flex-end;
+ margin-bottom: 1.25rem;
+ min-width: 0;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+/* Воздух между подписью и нижней линией (у Taiga у [tuiTab] padding: 0). */
+.session-tabs [tuiTab] {
+ padding-block-end: 0.5rem;
+}
+
+/*
+ * У Taiga для неактивной вкладки: box-shadow inset 0 -.125rem — линия hover оказывается
+ * выше общей нижней границы полосы (inset 0 -1px на tui-tabs). Убираем дублирующую линию.
+ */
+.session-tabs [tuiTab]:hover:not(._active) {
+ box-shadow: none;
+}
+
+.session-title {
+ margin: 0 0 0.75rem;
+ font: var(--tui-font-heading-6);
+ color: var(--tui-text-primary);
+}
+
+.kv {
+ display: grid;
+ grid-template-columns: minmax(10rem, 14rem) 1fr;
+ gap: 0.35rem 1rem;
+ margin: 0;
+ font: var(--tui-font-text-s);
+}
+
+.kv dt {
+ margin: 0;
+ color: var(--tui-text-tertiary);
+}
+
+.kv dd {
+ margin: 0;
+ word-break: break-word;
+}
+
+.mono {
+ font-family: ui-monospace, monospace;
+ font-size: 0.92em;
+}
+
+.json-block {
+ margin: 0.75rem 0 0;
+ padding: 1rem;
+ max-height: min(360px, 50vh);
+ overflow: auto;
+ border-radius: var(--tui-radius-m);
+ background: color-mix(in srgb, var(--tui-background-base) 88%, var(--tui-text-primary));
+ font-size: 0.8rem;
+ line-height: 1.45;
+ white-space: pre-wrap;
+ word-break: break-word;
+}
+
+.meta-table {
+ width: 100%;
+ border-collapse: collapse;
+ font: var(--tui-font-text-s);
+}
+
+.meta-table th,
+.meta-table td {
+ padding: 0.5rem 0.75rem;
+ text-align: left;
+ vertical-align: top;
+ border-bottom: 1px solid var(--tui-border-normal);
+}
+
+.meta-table th {
+ font-weight: 600;
+ color: var(--tui-text-secondary);
+}
+
+.table-wrap_flat {
+ max-height: none;
+}
+
+.loading-wrap {
+ display: flex;
+ justify-content: center;
+ padding: 3rem;
+}
+
+.loading-wrap_small {
+ padding: 1rem 0;
+}
+
+.error {
+ color: var(--tui-status-negative);
+}
+
+.card {
+ padding: 1.25rem 1.5rem;
+ border-radius: var(--tui-radius-l);
+ background: var(--tui-background-elevation-1);
+ margin-bottom: 1.5rem;
+}
+
+.section-title {
+ margin: 0 0 1rem;
+ font: var(--tui-font-heading-6);
+ color: var(--sg-color-subtitle);
+}
+
+.telemetry-head {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 0.75rem;
+ margin-bottom: 0.75rem;
+}
+
+.telemetry-head .section-title {
+ margin: 0;
+}
+
+.telemetry-actions {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.telemetry-presets {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.35rem;
+}
+
+.from-picker {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+}
+
+.summary-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 0.5rem;
+}
+
+.small {
+ font: var(--tui-font-text-s);
+ margin-top: 0.35rem;
+}
+
+.muted {
+ color: var(--tui-text-tertiary);
+}
+
+.stream-tabs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 1rem;
+}
+
+.stream-tabs button {
+ transition:
+ background-color 0.15s ease,
+ color 0.15s ease,
+ border-color 0.15s ease,
+ outline-color 0.15s ease;
+}
+
+/* Контраст к карточке — жёлтый акцент при наведении (специфичнее secondary appearance Taiga) */
+.stream-tabs
+ button[tuiButton][tuiAppearance][data-appearance='secondary']:hover:not(:disabled):not([data-state='disabled']) {
+ background: var(--sg-color-accent);
+ color: var(--sg-color-text);
+ border-color: color-mix(in srgb, var(--sg-color-accent) 78%, black);
+ outline: 2px solid transparent;
+}
+
+.stream-tabs button.stream-active[tuiButton][tuiAppearance][data-appearance='secondary'] {
+ outline: 2px solid var(--sg-color-accent);
+ background: color-mix(in srgb, var(--sg-color-accent) 22%, white);
+ border-color: var(--sg-color-accent);
+ color: var(--sg-color-text);
+}
+
+.table-wrap {
+ overflow: auto;
+ max-height: min(480px, 70vh);
+}
+
+.telemetry {
+ width: 100%;
+ border-collapse: collapse;
+ font: var(--tui-font-text-s);
+}
+
+.telemetry th,
+.telemetry td {
+ padding: 0.5rem 0.75rem;
+ text-align: left;
+ border-bottom: 1px solid var(--tui-border-normal);
+}
+
+.telemetry th {
+ position: sticky;
+ top: 0;
+ background: var(--tui-background-elevation-1);
+ z-index: 1;
+}
+
+.telemetry-row {
+ cursor: pointer;
+ transition: background-color 0.12s ease;
+}
+
+.telemetry-row:hover {
+ background: color-mix(in srgb, var(--tui-background-accent-1) 12%, transparent);
+}
+
+.telemetry-row.telemetry-row_expanded {
+ background: color-mix(in srgb, var(--tui-background-accent-1) 18%, transparent);
+}
+
+.telemetry-row-detail td {
+ padding: 0 0.75rem 1rem;
+ border-bottom: 1px solid var(--tui-border-normal);
+ vertical-align: top;
+}
+
+.payload {
+ font-family: ui-monospace, monospace;
+ word-break: break-all;
+}
diff --git a/src/app/features/sessions/session-detail/session-detail.html b/src/app/features/sessions/session-detail/session-detail.html
new file mode 100644
index 0000000..df2a686
--- /dev/null
+++ b/src/app/features/sessions/session-detail/session-detail.html
@@ -0,0 +1,271 @@
+
+
+
+ @if (vm$ | async; as state) {
+ @switch (state.status) {
+ @case ('loading') {
+
+
+
+ }
+ @case ('error') {
+
Не удалось загрузить сессию.
+ }
+ @case ('ok') {
+
Сессия {{ state.id }}
+
+
+
+
+
+
+ @if (telemetry$ | async; as telemetryState) {
+ @if (activeTabIndex() === 0) {
+
+ @if (state.detail.session.title) {
+ {{ state.detail.session.title }}
+ }
+
+ {{ state.detail.session.status | sessionStatus }}
+
+
+ Начало: {{ formatDate(state.detail.session.started_at) }} · Окончание:
+ {{ formatDate(state.detail.session.ended_at) }}
+
+
+
+
+ Трансляция
+ @if (state.detail.streams.length === 0) {
+ Потоки ещё не готовы.
+ } @else {
+
+ @for (s of state.detail.streams; track s.stream_type) {
+
+ }
+
+ @if (playlistUrl(state.detail); as src) {
+
+ }
+ }
+
+
+
+
+
+ События телеметрии ({{ filteredTelemetryEvents(telemetryState.telemetry).length }})
+
+
+
{{ telemetryRangeLabel(telemetryState.toMs) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } @else if (telemetryState.status === 'error') {
+ События телеметрии временно недоступны.
+ } @else {
+ @if (telemetryState.telemetry.length === 0) {
+ Событий пока нет.
+ } @else {
+
+
+ @for (t of uniqueTelemetryEventTypes(telemetryState.telemetry); track t) {
+
+ }
+
+ @if (filteredTelemetryEvents(telemetryState.telemetry).length === 0) {
+ Нет событий выбранного типа.
+ } @else {
+
+
+
+
+ | Время |
+ Тип |
+ Payload |
+
+
+
+ @for (
+ row of filteredTelemetryEvents(telemetryState.telemetry);
+ track row.timestamp + '-' + row.event_type + '-' + $index;
+ let i = $index
+ ) {
+
+ | {{ formatUnixMs(row.timestamp) }} |
+ {{ row.event_type || '—' }} |
+ {{ eventDataPreview(row) }} |
+
+ @if (isTelemetryRowExpanded(row, i)) {
+
+ |
+
+ |
+
+ }
+ }
+
+
+
+ }
+
+ @if (activeTabIndex() === 1) {
+
+ Сессия
+
+ - Идентификатор
+ - {{ state.detail.session.id }}
+ - ID пользователя
+ - {{ state.detail.session.user_id ?? '—' }}
+ - Статус
+ {{ state.detail.session.status }}- Начало
+ {{ state.detail.session.started_at ?? '—' }}- Окончание
+ {{ state.detail.session.ended_at ?? '—' }}- Всего чанков
+ - {{ state.detail.session.chunks_total ?? '—' }}
+ - Всего событий
+ - {{ state.detail.session.events_total ?? '—' }}
+ - Название
+ - {{ state.detail.session.title ?? '—' }}
+
+
+
+
+ Потоки
+ @if (state.detail.streams.length === 0) {
+ Нет записей о потоках.
+ } @else {
+
+ }
+
+
+
+ Запрос событий
+
+ - От (мс)
+ {{ telemetryState.fromMs }}- До (мс)
+ {{ telemetryState.toMs }}- ID сессии
+ -
+ @if (telemetryState.parsedMeta) {
+ {{ telemetryState.parsedMeta.session_id }}
+ } @else {
+ —
+ }
+
+ - Количество
+ -
+ @if (telemetryState.parsedMeta) {
+ {{ telemetryState.parsedMeta.count }}
+ } @else {
+ —
+ }
+
+ - Строк в выборке
+ - {{ telemetryState.telemetry.length }}
+ - Статус загрузки
+ {{ telemetryState.status }}
+
+
+
+ Исходный JSON
+ {{ detailPayloadJson(state.detail) }}
+
+ }
+ }
+ }
+ }
+ }
+
+
Сессии прокторинга
+
+
+
+ @if (listState$ | async; as state) {
+ @switch (state.status) {
+ @case ('loading') {
+
+
+
+ }
+ @case ('error') {
+
+ Список временно недоступен.
+
+ }
+ @case ('ok') {
+
+ @if (state.data.sessions.length === 0) {
+ Сессий пока нет.
+ } @else {
+
+ }
+
+
+ }
+ }
+ }
+
+
Подробности
+
+ - Тип
+ - {{ event().event_type || '—' }}
+ - Время
+ - {{ formatTime(event().timestamp) }}
+ @if (keyboardModel().kind === 'keyboard') {
+ - Виртуальный код (VK)
+ -
+ @if (keyboardModel().vk != null) {
+ {{ keyboardModel().vk }} (0x{{ keyboardModel().vk!.toString(16).toUpperCase() }})
+ } @else {
+ —
+ }
+
+ @if (keyboardKeyIds().length > 0) {
+ - Клавиши на схеме
+ {{ keyboardKeyIds().join(', ') }}- Данные
+ {{ payloadText(event()) }}
+
+ @if (keyboardModel().kind === 'keyboard') {
+
+
Клавиатура (US)
+ @if (keyboardSvg$ | async; as svg) {
+
+ } @else {
+
+
+
+ }
+ @if (keyboardKeyIds().length === 0) {
+
+ Не удалось сопоставить событие с клавишами на схеме (проверьте поля key_name /
+ modifiers или VK).
+
+ }
+
+ }
+