rev 4

AGENTS.md

@@ -1,336 +1,15 @@
 # AGENTS.md — Coffee Project Frontend
 
-Primary Codex reference: [`../.codex/services/frontend.md`](/Users/daniilrakityansky/Documents/Work/Cofee/.codex/services/frontend.md).
-If this file conflicts with the `.codex` guide, prefer the `.codex` guide. `CLAUDE.md` remains for Claude-specific tooling.
+Primary workflow guidance lives in `../AGENTS.md`.
 
-## Project Overview
+Use `./CLAUDE.md` as the service-specific source of truth for:
 
-Next.js 16 application using **Feature-Sliced Design (FSD)** architecture, powered by **Bun** runtime and package manager.
+- frontend commands
+- FSD architecture and boundaries
+- frontend conventions and gotchas
 
----
+OpenCode/Codex notes:
 
-## Tech Stack
-
-| Category      | Technology                                 |
-| ------------- | ------------------------------------------ |
-| Runtime       | Bun 1.3.5                                  |
-| Framework     | Next.js 16.1.1 (App Router)                |
-| Language      | TypeScript 5.9                             |
-| UI Library    | React 19                                   |
-| Styling       | SCSS Modules, normalize.css                |
-| State/Fetch   | TanStack React Query 5, Axios, Xior        |
-| Animation     | Framer Motion                              |
-| Utilities     | Lodash, date-fns, classnames, usehooks-ts  |
-| Icons         | Lucide React, SVGR (custom icons)          |
-| Notifications | React Toastify                             |
-| File Upload   | React Dropzone                             |
-| Linting       | ESLint 9, Prettier, Stylelint              |
-| Testing       | Jest, Testing Library                      |
-
----
-
-## Commands
-
-```bash
-bun dev              # Start dev server
-bun run build        # Production build
-bun run start        # Start production server
-bun run lint         # Run ESLint + Prettier
-bun run gc <layer> <ComponentName>  # Generate FSD component
-bun run gicons       # Convert SVGs to React components
-```
-
----
-
-## Project Structure (FSD)
-
-```
-app/                  # Next.js App Router entry
-pages/                # Keep empty (Next.js requires it)
-public/               # Static assets
-src/
-├── app/              # App layer: global styles, providers
-├── pages/            # Page compositions
-├── widgets/          # Large UI blocks (header, sidebar)
-├── features/         # User interactions (auth, search)
-├── entities/         # Business entities (user, product)
-└── shared/           # Reusable: UI kit, utils, API, assets
-    ├── ui/           # Button, Input, Icons...
-    ├── api/          # API clients
-    ├── lib/          # Utilities
-    └── assets/       # Images, raw-icons
-```
-
-### Path Aliases
-
-```ts
-@app/*       → ./src/app/*
-@pages/*     → ./src/pages/*
-@widgets/*   → ./src/widgets/*
-@features/*  → ./src/features/*
-@entities/*  → ./src/entities/*
-@shared/*    → ./src/shared/*
-@/*          → ./src/*
-```
-
----
-
-## Component Structure
-
-Each component follows **flat FSD structure** (simplified for MVP):
-
-```
-ComponentName/
-├── index.ts                  # Public API (re-export)
-├── ComponentName.tsx         # Component + imports
-├── ComponentName.module.scss # Styles
-├── ComponentName.d.ts        # Props interface
-└── useComponentApi.ts        # Optional: hooks/API if needed
-```
-
-> **Note:** Old nested structure (`ui/`, `model/`, `api/` folders) has been deprecated.
-> The backup of the old generator is at `.scripts/create-fsd-component.ts.bak`
-
-### Component Template
-
-```tsx
-import type { IComponentNameProps } from "./ComponentName.d"
-import type { JSX } from "react"
-
-import { FunctionComponent } from "react"
-
-import styles from "./ComponentName.module.scss"
-
-export const ComponentName: FunctionComponent<
-	IComponentNameProps
-> = (): JSX.Element => {
-	return (
-		<div className={styles.root} data-testid="ComponentName">
-			ComponentName
-		</div>
-	)
-}
-```
-
-### Props Interface Template (ComponentName.d.ts)
-
-```typescript
-export interface IComponentNameProps {
-	className?: string
-}
-```
-
-### Generate Component
-
-Use one of these commands to generate new project-wide standardized component, don't create new component file by file by yourself
-
-```bash
-bun run gc <layer> <ComponentName>
-# Examples:
-bun run gc shared Button
-bun run gc feature AuthForm
-bun run gc entity UserCard
-bun run gc page HomePage
-bun run gc widget Sidebar
-```
-
----
-
-## Best Practices
-
-### Code Style
-
-1. **Small Functions** — max 20-30 lines; extract helpers
-2. **Single Responsibility** — one function = one purpose
-3. **Descriptive Names** — `getUserById` not `getData`
-4. **Early Returns** — reduce nesting with guard clauses
-5. **No Magic Values** — use constants: `const MAX_ITEMS = 10`
-
-### TypeScript
-
-```ts
-// ✅ Use interfaces for props
-interface IButtonProps {
-	variant: "primary" | "secondary"
-	disabled?: boolean
-	onClick: () => void
-}
-
-// ✅ Prefer explicit types over `any`
-// ✅ Use `type` for unions/intersections, `interface` for objects
-```
-
-### React Patterns
-
-```tsx
-// ✅ Functional components with explicit return type
-export const Button: FC<IButtonProps> = ({ variant, onClick }): JSX.Element => { ... }
-
-// ✅ Destructure props
-// ✅ Use data-testid for testing
-// ✅ Colocate styles with components (CSS Modules)
-```
-
-### FSD Rules
-
-1. **Import Direction** — only downward: `features → entities → shared`
-2. **Public API** — export only through `index.ts`
-3. **No Cross-Slice Imports** — features cannot import from other features
-4. **Shared is Agnostic** — no business logic in shared layer
-5. **Features are module-aware** — group features by domain inside module folders (see below)
-
-### When to Split Files
-
-Split into separate files **only when**:
-
-- Hook/API is reused by multiple components
-- File exceeds ~200 lines
-- Props interface is shared across 3+ components
-
-### File Naming
-
-| Type      | Convention        | Example                |
-| --------- | ----------------- | ---------------------- |
-| Component | PascalCase        | `UserCard.tsx`         |
-| Module    | PascalCase.module | `UserCard.module.scss` |
-| Types     | PascalCase.d      | `UserCard.d.ts`        |
-| Hook      | camelCase (use-)  | `useAuth.ts`           |
-| Utility   | camelCase         | `formatDate.ts`        |
-| Constant  | UPPER_SNAKE_CASE  | `API_ENDPOINTS.ts`     |
-
-### Performance
-
-1. Use `React.memo` for expensive renders
-2. Use `useMemo` / `useCallback` for derived data and callbacks
-3. Lazy load pages/heavy components with `next/dynamic`
-4. Prefer server components where possible (Next.js App Router)
-
-### Testing
-
-- Place tests next to components: `ComponentName.test.tsx`
-- Use `data-testid` attributes for queries
-- Test behavior, not implementation
-
----
-
-## Features Layer — Module-Aware Structure
-
-Features **must be grouped by domain module**. Never place feature folders flat at the top of `src/features/`.
-
-```
-src/features/
-├── profile/              # Profile domain module
-│   ├── index.ts          # Barrel export for all features in this module
-│   ├── AvatarUpload/
-│   ├── EditProfileForm/
-│   └── LogoutButton/
-└── project/              # Project domain module
-    ├── index.ts
-    ├── CreateProjectModal/
-    └── ...
-```
-
-**Rules:**
-- Each module folder has an `index.ts` barrel that re-exports all its features
-- Import via the module barrel: `import { AvatarUpload } from "@features/profile"`
-- When creating a new feature, place it inside the relevant domain folder
-- After running `bun run gc feature <Name>`, move the generated folder into the correct module
-- Create a new module folder + barrel if the domain doesn't exist yet
-
----
-
-## Shared Utilities
-
-Reusable operations should live in `src/shared/` — **do not inline shared logic inside feature components**.
-
-### File Upload
-
-Use `uploadFile()` from `@shared/api/uploadFile` for any file upload:
-
-```ts
-import { uploadFile } from "@shared/api/uploadFile"
-
-const result = await uploadFile(file, "avatars")
-// result.file_url — URL of the uploaded file
-// result.file_path — storage path
-```
-
-This handles FormData construction, Content-Type header override, and JWT auth automatically.
-
-### Date Formatting
-
-Use `date-fns` with Russian locale via shared utilities in `src/shared/lib/dates.ts`. **Never use `moment.js` or inline `Date` formatting in components.**
-
-```ts
-import { formatDate, formatRelativeTime } from "@shared/lib/dates"
-
-formatDate(user.date_joined)           // "21.02.2026" (default: "dd.MM.yyyy")
-formatDate(date, "dd MMM yyyy")        // "21 февр. 2026"
-formatRelativeTime(project.updated_at) // "2 дня назад"
-```
-
-Add new date helpers to `src/shared/lib/dates.ts`, not to individual components.
-
-### API Client
-
-- **In React components**: use `api.useQuery()` / `api.useMutation()` from `@shared/api`
-- **Outside React** (utilities, event handlers): use `fetchClient` from `@shared/api`
-- **File uploads**: use `uploadFile()` from `@shared/api/uploadFile`
-
----
-
-## Icons Workflow
-
-1. Place raw SVG in `src/shared/assets/raw-icons/`
-2. Run `bun run gicons`
-3. Import from `@shared/ui/Icons/IconName`
-
----
-
-## Notes
-
-- **Keep `pages/` folder** in root — removing causes Next.js build errors
-- **Bun only** — use `bun` commands, not npm/yarn
-- **SCSS Modules** — all styles are scoped via `.module.scss`
-- **Strict TypeScript** — `strict: true` in tsconfig
-
----
-
-## Quick Reference
-
-| Task               | Command / Location              |
-| ------------------ | ------------------------------- |
-| Add dependency     | `bun add <package>`             |
-| Add dev dependency | `bun add -d <package>`          |
-| Create component   | `bun run gc <layer> <Name>`     |
-| Global styles      | `src/app/styles/global.scss`    |
-| API client         | Use Axios/Xior with React Query |
-| State management   | TanStack Query (server state)   |
-
-## Localization
-
-All user-facing UI text **must be in Russian**. This includes: labels, headings, buttons, placeholders, tooltips, aria-labels, error messages, breadcrumbs, and any other text visible to the user. The only exception is the brand name "Coffee Project" / "Cofee Project" — it stays in English.
-
-## Implementation sentiments
-
-Write less complicated code, simple but readable code
-Less overhead - better
-Write all components with html semantics in mind
-To import classNames lib use
-`import cs from 'classnames'`
-Always install packages using
-`bun install <package>`
-To test is project have no errors use
-`bunx tsc --noEmit`
-
----
-
-## Common Mistakes to Avoid
-
-1. **Flat features folder** — never place feature component folders directly in `src/features/`. Always group them inside a domain module folder (`profile/`, `project/`, etc.).
-2. **Inlining reusable logic** — if an operation (file upload, date formatting, etc.) could be used by multiple features, extract it to `src/shared/`. Features should be thin wrappers around shared utilities.
-3. **Wrong StaticLoader import** — it lives at `@shared/ui/Loader`, not `@shared/ui/Loader/StaticLoader`. There is no subdirectory.
-4. **multipart/form-data with fetchClient** — the default `fetchClient` sets `Content-Type: application/json`. For file uploads you must override headers and body serializer. Use the shared `uploadFile()` utility instead.
-5. **Broken lint scripts** — `bun run lint` calls `lint:es` and `lint:prettier` which are not defined in `package.json`. Use `bunx tsc --noEmit` for type checking until lint is fixed.
-6. **Generator output needs moving** — `bun run gc feature <Name>` creates the folder flat in `src/features/`. You must manually move it into the correct domain module folder afterward.
-7. **Raw `fetch` / `useEffect` for API calls** — never use plain `fetch` or `useEffect`-based polling for API requests. Always use `api.useQuery()` / `api.useMutation()` from `@shared/api` which wraps TanStack Query + openapi-fetch. For polling, use `refetchInterval`. Raw `fetch` bypasses typed routes, auth middleware, and query caching.
+- Keep `../AGENTS.md` as the workflow and delegation source of truth.
+- Treat `CLAUDE.md` as architecture, commands, and conventions only.
+- Do not rely on `.claude/` directory contents.

src/entities/ProjectCard/ProjectCard.module.scss

@@ -103,8 +103,7 @@
 		position: absolute;
 		inset: -6px;
 		border-radius: 50%;
-		background: rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(2px);
+		background: rgba(0, 0, 0, 0.25);
 		z-index: 0;
 	}
 
@@ -262,8 +261,8 @@
 	left: 10px;
 	padding: 4px 10px;
 	border-radius: 20px;
-	background: rgba(255, 255, 255, 0.92);
-	backdrop-filter: blur(8px);
+	background: color-mix(in srgb, variables.$bg-default 88%, transparent);
+	border: 1px solid color-mix(in srgb, variables.$border-default 72%, transparent);
 	@include typography.font-caption-m;
 	font-weight: 600;
 	color: variables.$text-primary;

src/entities/dashboard/ActionCard/ActionCard.module.scss

@@ -38,14 +38,14 @@
 	}
 
 	&.accent {
-		background: linear-gradient(135deg, variables.$purple-400 0%, variables.$purple-600 100%);
+		background: linear-gradient(135deg, variables.$accent-solid-start 0%, variables.$accent-solid-end 100%);
 		border-color: transparent;
-		color: variables.$color-white;
-		box-shadow: 0 4px 14px hsla(262, 75%, 48%, 0.25);
+		color: variables.$accent-foreground;
+		box-shadow: 0 4px 14px variables.$accent-shadow;
 
 		&:hover {
-			background: linear-gradient(135deg, variables.$purple-500 0%, variables.$purple-700 100%);
-			box-shadow: 0 6px 20px hsla(262, 75%, 48%, 0.4);
+			filter: brightness(1.06);
+			box-shadow: 0 6px 20px variables.$accent-shadow-hover;
 		}
 	}
 }

src/features/notifications/NotificationPopup/NotificationPopup.module.scss

@@ -83,55 +83,51 @@
 	min-width: 0;
 }
 
-.itemTitle {
-	@include typography.font-body-14(600);
-	color: variables.$text-primary;
+.itemHeader {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.itemHeadline {
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	flex: 1;
+	min-width: 0;
 }
 
-.itemMessage {
-	@include typography.font-caption-m;
-	color: variables.$text-secondary;
-	margin-top: 2px;
+.itemTitle {
+	@include typography.font-body-14(600);
+	color: variables.$text-primary;
+	min-width: 0;
+	flex: 1;
+}
+
+.itemTitleText {
+	display: block;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-.itemMeta {
+.itemStatusBadge {
+	flex-shrink: 0;
+}
+
+.itemTime {
 	@include typography.font-caption-m;
 	color: variables.$text-tertiary;
+	flex-shrink: 0;
+}
+
+.itemMessage {
+	@include typography.font-caption-m;
+	color: variables.$text-secondary;
 	margin-top: 4px;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.statusBadge {
-	display: inline-flex;
-	align-items: center;
-	padding: 1px 6px;
-	border-radius: 9999px;
-	font-size: 11px;
-	font-weight: 600;
-	line-height: 16px;
-}
-
-.statusRunning {
-	background-color: hsl(262, 50%, 94%);
-	color: hsl(262, 72%, 45%);
-}
-
-.statusDone {
-	background-color: hsl(150, 30%, 92%);
-	color: hsl(150, 50%, 30%);
-}
-
-.statusFailed {
-	background-color: hsl(0, 80%, 95%);
-	color: hsl(0, 65%, 40%);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .progressBar {

src/features/notifications/NotificationPopup/NotificationPopup.tsx

@@ -10,13 +10,16 @@ import { FunctionComponent, useCallback, useEffect, useRef } from "react"
 import { useDispatch } from "react-redux"
 
 import { useAppSelector } from "@shared/hooks/useAppSelector"
-import { formatRelativeTime } from "@shared/lib/dates"
+import { formatNotificationRelativeTime } from "@shared/lib/dates"
 import { API_URL } from "@shared/lib/constants"
 import {
 	markAllRead,
 	markRead,
 	NotificationItem,
 } from "@shared/store/notifications"
+import { Badge } from "@shared/ui"
+
+import { getNotificationPresentation } from "./presentation"
 
 const apiBase = API_URL || "http://localhost:8000"
 
@@ -27,34 +30,6 @@ function authHeaders(): HeadersInit {
 
 import styles from "./NotificationPopup.module.scss"
 
-const JOB_TYPE_LABELS: Record<string, string> = {
-	MEDIA_PROBE: "Анализ медиа",
-	SILENCE_REMOVE: "Удаление тишины",
-	MEDIA_CONVERT: "Конвертация",
-	TRANSCRIPTION_GENERATE: "Транскрипция",
-	CAPTIONS_GENERATE: "Генерация субтитров",
-}
-
-const STATUS_LABELS: Record<string, string> = {
-	PENDING: "Ожидание",
-	RUNNING: "Выполняется",
-	DONE: "Завершено",
-	FAILED: "Ошибка",
-}
-
-function getStatusClass(status: string | null): string {
-	switch (status) {
-		case "RUNNING":
-			return styles.statusRunning
-		case "DONE":
-			return styles.statusDone
-		case "FAILED":
-			return styles.statusFailed
-		default:
-			return ""
-	}
-}
-
 export const NotificationPopup: FunctionComponent<INotificationPopupProps> = ({
 	onClose,
 	anchorRef,
@@ -120,56 +95,59 @@ export const NotificationPopup: FunctionComponent<INotificationPopupProps> = ({
 				{items.length === 0 ? (
 					<div className={styles.empty}>Нет уведомлений</div>
 				) : (
-					items.map((item, idx) => (
-						<div
-							key={item.notification_id || `${item.job_id}-${idx}`}
-							className={cs(styles.item, {
-								[styles.itemUnread]: !item.is_read,
-							})}
-							onClick={() => handleItemClick(item)}
-						>
-							<div className={styles.itemContent}>
-								<div className={styles.itemTitle}>
-									<span>
-										{item.job_type
-											? (JOB_TYPE_LABELS[item.job_type] ||
-												item.title)
-											: item.title}
-									</span>
-									{item.status && (
-										<span
-											className={cs(
-												styles.statusBadge,
-												getStatusClass(item.status),
-											)}
-										>
-											{STATUS_LABELS[item.status] ||
-												item.status}
+					items.map((item, idx) => {
+						const presentation = getNotificationPresentation(item)
+
+						return (
+							<div
+								key={item.notification_id || `${item.job_id}-${idx}`}
+								className={cs(styles.item, {
+									[styles.itemUnread]: !item.is_read,
+								})}
+								onClick={() => handleItemClick(item)}
+							>
+								<div className={styles.itemContent}>
+									<div className={styles.itemHeader}>
+										<div className={styles.itemHeadline}>
+											<div className={styles.itemTitle}>
+												<span className={styles.itemTitleText}>
+													{presentation.title}
+												</span>
+											</div>
+											{presentation.statusText &&
+												presentation.statusVariant && (
+													<Badge
+														variant={presentation.statusVariant}
+														className={styles.itemStatusBadge}
+													>
+														{presentation.statusText}
+													</Badge>
+												)}
+										</div>
+										<span className={styles.itemTime}>
+											{formatNotificationRelativeTime(item.created_at)}
 										</span>
-									)}
-								</div>
-								{item.message && (
-									<div className={styles.itemMessage}>
-										{item.message}
 									</div>
-								)}
-								{item.status === "RUNNING" &&
-									item.progress_pct != null && (
-										<div className={styles.progressBar}>
-											<div
-												className={styles.progressFill}
-												style={{
-													width: `${item.progress_pct}%`,
-												}}
-											/>
+									{presentation.detailText && (
+										<div className={styles.itemMessage}>
+											{presentation.detailText}
 										</div>
 									)}
-								<div className={styles.itemMeta}>
-									{formatRelativeTime(item.created_at)}
+									{item.status === "RUNNING" &&
+										item.progress_pct != null && (
+											<div className={styles.progressBar}>
+												<div
+													className={styles.progressFill}
+													style={{
+														width: `${item.progress_pct}%`,
+													}}
+												/>
+											</div>
+										)}
 								</div>
 							</div>
-						</div>
-					))
+						)
+					})
 				)}
 			</div>
 		</div>

src/features/notifications/NotificationPopup/presentation.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, test } from "bun:test"
+
+import type { NotificationItem } from "@shared/store/notifications"
+
+import { getNotificationPresentation } from "./presentation"
+
+function buildNotification(
+	overrides: Partial<NotificationItem> = {},
+): NotificationItem {
+	return {
+		event: "task_update",
+		notification_id: "notification-1",
+		job_id: "job-1",
+		project_id: "project-1",
+		job_type: "TRANSCRIPTION_GENERATE",
+		status: "DONE",
+		progress_pct: 100,
+		message: "Завершено",
+		title: "Задача завершена",
+		created_at: "2026-04-05T12:00:00.000Z",
+		is_read: false,
+		...overrides,
+	}
+}
+
+describe("getNotificationPresentation", () => {
+	test("uses the task type as the notification title and moves status into secondary text", () => {
+		expect(getNotificationPresentation(buildNotification())).toEqual({
+			title: "Транскрипция",
+			statusText: "Завершено",
+			statusVariant: "success",
+			detailText: null,
+		})
+	})
+
+	test("maps silence apply notifications to the operation title instead of backend status title", () => {
+		expect(
+			getNotificationPresentation(
+				buildNotification({
+					job_type: "SILENCE_APPLY",
+					title: "Задача завершена",
+					message: "Завершено",
+				}),
+			),
+		).toEqual({
+			title: "Применение вырезок",
+			statusText: "Завершено",
+			statusVariant: "success",
+			detailText: null,
+		})
+	})
+
+	test("keeps detailed progress text when it carries more information than the status", () => {
+		expect(
+			getNotificationPresentation(
+				buildNotification({
+					status: "RUNNING",
+					message: "Транскрибирование (whisper)",
+				}),
+			),
+		).toEqual({
+			title: "Транскрипция",
+			statusText: "Выполняется",
+			statusVariant: "info",
+			detailText: "Транскрибирование (whisper)",
+		})
+	})
+
+	test("maps failed notifications to a danger badge", () => {
+		expect(
+			getNotificationPresentation(
+				buildNotification({
+					status: "FAILED",
+					message: "Ошибка",
+				}),
+			),
+		).toEqual({
+			title: "Транскрипция",
+			statusText: "Ошибка",
+			statusVariant: "danger",
+			detailText: null,
+		})
+	})
+})

src/features/notifications/NotificationPopup/presentation.ts

@@ -0,0 +1,61 @@
+import type { NotificationItem } from "@shared/store/notifications"
+import type { BadgeVariant } from "@shared/ui/Badge/Badge.d"
+
+const JOB_TYPE_LABELS: Record<string, string> = {
+	MEDIA_PROBE: "Анализ медиа",
+	SILENCE_REMOVE: "Удаление тишины",
+	SILENCE_DETECT: "Анализ тишины",
+	SILENCE_APPLY: "Применение вырезок",
+	MEDIA_CONVERT: "Конвертация",
+	TRANSCRIPTION_GENERATE: "Транскрипция",
+	CAPTIONS_GENERATE: "Генерация субтитров",
+	FRAME_EXTRACT: "Извлечение кадров",
+}
+
+const STATUS_LABELS: Record<string, string> = {
+	PENDING: "Ожидание",
+	RUNNING: "Выполняется",
+	DONE: "Завершено",
+	FAILED: "Ошибка",
+}
+
+const STATUS_VARIANTS: Record<string, BadgeVariant> = {
+	PENDING: "secondary",
+	RUNNING: "info",
+	DONE: "success",
+	FAILED: "danger",
+}
+
+export interface NotificationPresentation {
+	title: string
+	statusText: string | null
+	statusVariant: BadgeVariant | null
+	detailText: string | null
+}
+
+function normalizeText(value: string | null | undefined): string | null {
+	const trimmed = value?.trim()
+	return trimmed ? trimmed : null
+}
+
+export function getNotificationPresentation(
+	item: NotificationItem,
+): NotificationPresentation {
+	const statusText = item.status ? (STATUS_LABELS[item.status] ?? item.status) : null
+	const statusVariant = item.status ? (STATUS_VARIANTS[item.status] ?? null) : null
+	const rawTitle = normalizeText(item.title)
+	const rawMessage = normalizeText(item.message)
+	const title = item.job_type
+		? (JOB_TYPE_LABELS[item.job_type] ?? rawTitle ?? "Уведомление")
+		: (rawTitle ?? "Уведомление")
+
+	return {
+		title,
+		statusText,
+		statusVariant,
+		detailText:
+			rawMessage && rawMessage !== statusText && rawMessage !== rawTitle
+				? rawMessage
+				: null,
+	}
+}

src/features/project/CaptionResultStep/CaptionResultStep.module.scss

@@ -1,23 +1,168 @@
+/* ── Entrance animations ── */
+
+@keyframes fadeSlideDown {
+	from {
+		opacity: 0;
+		transform: translateY(-12px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes fadeSlideUp {
+	from {
+		opacity: 0;
+		transform: translateY(16px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes sparkleFloat {
+	0%,
+	100% {
+		opacity: 0;
+		transform: scale(0.6) translateY(0);
+	}
+
+	20% {
+		opacity: 0.7;
+		transform: scale(1) translateY(-6px);
+	}
+
+	50% {
+		opacity: 0.4;
+		transform: scale(0.8) translateY(-12px);
+	}
+
+	80% {
+		opacity: 0.6;
+		transform: scale(1) translateY(-4px);
+	}
+}
+
+/* ── Root ── */
+
 .root {
+	position: relative;
 	display: flex;
 	flex-direction: column;
-	gap: 16px;
-	padding: 24px;
+	flex: 1;
+	overflow: hidden;
+	min-height: 0;
+}
+
+/* ── Sparkle particles ── */
+
+.sparkles {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	overflow: hidden;
+	z-index: 0;
+}
+
+.sparkle {
+	position: absolute;
+	border-radius: 50%;
+	animation: sparkleFloat 3.5s ease-in-out infinite;
+}
+
+.sparkleGreen {
+	background: color-mix(in srgb, variables.$color-success 60%, transparent);
+}
+
+.sparklePurple {
+	background: color-mix(in srgb, variables.$purple-400 55%, transparent);
+}
+
+/* ── Content area (scrollable) ── */
+
+.content {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 24px;
+	flex: 1;
+	padding: 32px 24px 24px;
+	overflow-y: auto;
+	min-height: 0;
+}
+
+/* ── Success header ── */
+
+.header {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	animation: fadeSlideDown 0.6s variables.$ease-out both;
 }
 
 .title {
-	font-size: 20px;
-	font-weight: 600;
-	color: var(--gray-12);
+	@include typography.font-header-l;
+
+	color: variables.$text-primary;
 	margin: 0;
 }
 
+.subtitle {
+	@include typography.font-body-14(400);
+
+	color: variables.$text-tertiary;
+	margin: 0;
+}
+
+/* ── Video player ── */
+
+.playerContainer {
+	width: 100%;
+	max-width: 780px;
+	animation: fadeSlideUp 0.7s variables.$ease-out 0.15s both;
+}
+
 .playerWrapper {
-	border-radius: 12px;
+	position: relative;
+	border-radius: variables.$radius-md;
 	overflow: hidden;
 	background: #000;
-	max-height: 60vh;
+	box-shadow: variables.$shadow-lg;
 	aspect-ratio: 16 / 9;
+
+	:global([data-media-player]) {
+		width: 100% !important;
+		height: 100% !important;
+	}
+
+	:global(.vds-video-layout) {
+		width: 100%;
+		height: 100%;
+	}
+
+	video {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		display: block;
+	}
 }
 
 .player {
@@ -30,29 +175,92 @@
 	align-items: center;
 	justify-content: center;
 	aspect-ratio: 16 / 9;
-	color: var(--gray-9);
+	color: variables.$text-tertiary;
+	@include typography.font-body-14(400);
 }
 
-.filename {
-	font-size: 13px;
-	color: var(--gray-9);
-	margin: 0;
+/* ── File info bar ── */
+
+.fileInfoContainer {
+	width: 100%;
+	max-width: 780px;
+	animation: fadeSlideUp 0.6s variables.$ease-out 0.35s both;
 }
 
+.fileInfoBar {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 14px;
+	background: variables.$bg-default;
+	border: 1px solid variables.$border-subtle;
+	border-radius: variables.$radius-sm;
+	box-shadow: variables.$shadow-sm;
+}
+
+.fileIcon {
+	color: variables.$text-tertiary;
+	flex-shrink: 0;
+}
+
+.fileName {
+	@include typography.font-body-14(500);
+
+	color: variables.$text-primary;
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.fileSize {
+	@include typography.font-caption-m;
+
+	color: variables.$text-tertiary;
+	flex-shrink: 0;
+}
+
+/* ── Loading state ── */
+
 .loading {
 	padding: 48px;
 	text-align: center;
-	color: var(--gray-9);
+	color: variables.$text-tertiary;
+	@include typography.font-body-14(400);
 }
 
+/* ── Footer ── */
+
 .footer {
+	position: relative;
+	z-index: 1;
 	display: flex;
 	justify-content: space-between;
-	padding-top: 16px;
-	border-top: 1px solid var(--gray-6);
+	align-items: center;
+	padding: 16px 24px;
+	border-top: 1px solid variables.$border-subtle;
+	background: variables.$bg-surface;
+	animation: fadeIn 0.5s variables.$ease-out 0.5s both;
 }
 
 .rightActions {
 	display: flex;
 	gap: 8px;
 }
+
+/* ── Reduced motion ── */
+
+@media (prefers-reduced-motion: reduce) {
+	.header,
+	.playerContainer,
+	.fileInfoContainer,
+	.footer {
+		animation: none;
+	}
+
+	.sparkle {
+		animation: none;
+		display: none;
+	}
+}

src/features/project/CaptionResultStep/CaptionResultStep.tsx

@@ -12,17 +12,33 @@ import {
 import "@vidstack/react/player/styles/default/theme.css"
 import "@vidstack/react/player/styles/default/layouts/video.css"
 
-import { Download, RefreshCw } from "lucide-react"
+import {
+	Check,
+	CheckCircle,
+	Download,
+	FileVideo,
+	RefreshCw,
+} from "lucide-react"
 import { FunctionComponent, useMemo } from "react"
 
 import cs from "classnames"
 
 import api from "@shared/api"
 import { useWizard } from "@shared/context/WizardContext"
-import { Button } from "@shared/ui"
+import { Badge, Button } from "@shared/ui"
 
 import styles from "./CaptionResultStep.module.scss"
 
+const SPARKLE_COUNT = 10
+
+function formatFileSize(bytes: number): string {
+	if (bytes < 1024) return `${bytes} Б`
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} КБ`
+	if (bytes < 1024 * 1024 * 1024)
+		return `${(bytes / (1024 * 1024)).toFixed(1)} МБ`
+	return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} ГБ`
+}
+
 export const CaptionResultStep: FunctionComponent<ICaptionResultStepProps> = ({
 	className,
 }): JSX.Element => {
@@ -73,20 +89,11 @@ export const CaptionResultStep: FunctionComponent<ICaptionResultStepProps> = ({
 		setCaptionedVideoPath(effectivePath)
 	}
 
-	const { data: fileRecord } = api.useQuery(
-		"get",
-		"/api/files/files/{file_id}/",
-		{ params: { path: { file_id: effectiveFileId ?? "" } } },
-		{ enabled: !!effectiveFileId },
-	)
-
-	const filePath = fileRecord?.path ?? effectivePath ?? ""
-
 	const { data: fileInfo, isLoading } = api.useQuery(
 		"get",
-		"/api/files/get_file/",
-		{ params: { query: { file_path: filePath } } },
-		{ enabled: !!filePath },
+		"/api/files/files/{file_id}/resolve/",
+		{ params: { path: { file_id: effectiveFileId ?? "" } } },
+		{ enabled: !!effectiveFileId },
 	)
 
 	const videoUrl = fileInfo?.file_url ?? ""
@@ -107,6 +114,19 @@ export const CaptionResultStep: FunctionComponent<ICaptionResultStepProps> = ({
 		markStepCompleted("caption-result")
 	}
 
+	const sparkles = useMemo(
+		() =>
+			Array.from({ length: SPARKLE_COUNT }, (_, i) => ({
+				id: i,
+				variant: i % 2 === 0 ? "green" : "purple",
+				left: `${10 + (i * 80) / SPARKLE_COUNT + Math.sin(i * 1.7) * 5}%`,
+				top: `${15 + Math.sin(i * 2.3) * 30 + 20}%`,
+				delay: `${(i * 0.3) % 2.5}s`,
+				size: 4 + (i % 3) * 2,
+			})),
+		[],
+	)
+
 	if (isLoading) {
 		return (
 			<div className={cs(styles.root, className)}>
@@ -117,39 +137,90 @@ export const CaptionResultStep: FunctionComponent<ICaptionResultStepProps> = ({
 
 	return (
 		<div className={cs(styles.root, className)} data-testid="CaptionResultStep">
-			<h2 className={styles.title}>Результат</h2>
+			{/* Sparkle particles */}
+			<div className={styles.sparkles} aria-hidden="true">
+				{sparkles.map((s) => (
+					<span
+						key={s.id}
+						className={cs(
+							styles.sparkle,
+							s.variant === "green"
+								? styles.sparkleGreen
+								: styles.sparklePurple,
+						)}
+						style={{
+							left: s.left,
+							top: s.top,
+							animationDelay: s.delay,
+							width: s.size,
+							height: s.size,
+						}}
+					/>
+				))}
+			</div>
 
-			<div className={styles.playerWrapper}>
-				{videoUrl ? (
-					<MediaPlayer
-						src={videoUrl}
-						crossOrigin=""
-						playsInline
-						className={styles.player}
-					>
-						<MediaProvider />
-						<DefaultVideoLayout icons={defaultLayoutIcons} />
-					</MediaPlayer>
-				) : (
-					<div className={styles.placeholder}>Видео недоступно</div>
+			{/* Content area */}
+			<div className={styles.content}>
+				{/* Success header */}
+				<div className={styles.header}>
+					<Badge variant="success">
+						<CheckCircle size={14} />
+						Готово
+					</Badge>
+					<h2 className={styles.title}>Результат</h2>
+					<p className={styles.subtitle}>
+						Видео с субтитрами готово к скачиванию
+					</p>
+				</div>
+
+				{/* Video player */}
+				<div className={styles.playerContainer}>
+					<div className={styles.playerWrapper}>
+						{videoUrl ? (
+							<MediaPlayer
+								src={videoUrl}
+								crossOrigin=""
+								playsInline
+								className={styles.player}
+							>
+								<MediaProvider />
+								<DefaultVideoLayout icons={defaultLayoutIcons} />
+							</MediaPlayer>
+						) : (
+							<div className={styles.placeholder}>Видео недоступно</div>
+						)}
+					</div>
+				</div>
+
+				{/* File info bar */}
+				{fileInfo?.filename && (
+					<div className={styles.fileInfoContainer}>
+						<div className={styles.fileInfoBar}>
+							<FileVideo size={18} className={styles.fileIcon} />
+							<span className={styles.fileName}>{fileInfo.filename}</span>
+							{typeof fileInfo.file_size === "number" && (
+								<span className={styles.fileSize}>
+									{formatFileSize(fileInfo.file_size)}
+								</span>
+							)}
+						</div>
+					</div>
 				)}
 			</div>
 
-			{fileInfo?.filename && (
-				<p className={styles.filename}>{fileInfo.filename}</p>
-			)}
-
+			{/* Footer */}
 			<div className={styles.footer}>
-				<Button variant="outline" onClick={handleRerender}>
+				<Button variant="ghost" onClick={handleRerender}>
 					<RefreshCw size={16} />
 					Перегенерировать
 				</Button>
 				<div className={styles.rightActions}>
-					<Button variant="outline" onClick={handleDownload}>
+					<Button variant="primary" onClick={handleDownload}>
 						<Download size={16} />
 						Скачать
 					</Button>
-					<Button variant="primary" onClick={handleFinish}>
+					<Button variant="outline" onClick={handleFinish}>
+						<Check size={16} />
 						Завершить
 					</Button>
 				</div>

src/features/project/CaptionSettingsStep/PresetCard.module.scss

@@ -0,0 +1,150 @@
+.presetCard {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background: variables.$bg-default;
+	border: 1.5px solid variables.$border-subtle;
+	border-radius: variables.$radius-md;
+	overflow: hidden;
+	cursor: pointer;
+	box-shadow: variables.$shadow-sm;
+	transition: border-color var(--duration-normal) var(--ease-out);
+
+	&:hover {
+		border-color: variables.$color-secondary;
+	}
+}
+
+.selected {
+	border-color: variables.$color-primary;
+	box-shadow: variables.$shadow-sm, 0 0 0 1px variables.$color-primary;
+
+	&:hover {
+		border-color: variables.$color-primary;
+	}
+}
+
+.previewArea {
+	position: relative;
+	background: #0c0a1a;
+	overflow: hidden;
+}
+
+.selectedIndicator {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	width: 22px;
+	height: 22px;
+	background: variables.$color-primary;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 2;
+	color: white;
+
+	svg {
+		width: 12px;
+		height: 12px;
+	}
+}
+
+.cardFooter {
+	padding: 10px 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+}
+
+.presetName {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 13px;
+	font-weight: 600;
+	color: variables.$text-primary;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.systemBadge {
+	flex-shrink: 0;
+	display: inline-flex;
+	align-items: center;
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1;
+	color: variables.$color-primary;
+	background: variables.$purple-100;
+	padding: 3px 8px;
+	border-radius: variables.$radius-sm;
+}
+
+.styleChars {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	font-size: 11px;
+	color: variables.$text-tertiary;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.colorDot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	flex-shrink: 0;
+	border: 1px solid rgba(128, 128, 128, 0.15);
+}
+
+.divider {
+	color: variables.$border-default;
+	font-size: 10px;
+}
+
+.cardActions {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	display: flex;
+	gap: 4px;
+	opacity: 0;
+	transition: opacity var(--duration-fast);
+	z-index: 3;
+
+	.presetCard:hover & {
+		opacity: 1;
+	}
+
+	.selected & {
+		display: none;
+	}
+}
+
+.iconButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 26px;
+	height: 26px;
+	border: none;
+	border-radius: 6px;
+	background: variables.$bg-surface;
+	color: variables.$text-secondary;
+	cursor: pointer;
+	transition: background var(--duration-fast), color var(--duration-fast);
+
+	&:hover {
+		background: variables.$bg-hover;
+		color: variables.$text-primary;
+	}
+}
+
+@include breakpoints.respond-to(breakpoints.$mobileMax) {
+	.styleChars {
+		display: none;
+	}
+}

src/features/project/CaptionSettingsStep/PresetCard.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import type { components } from "@shared/api/__generated__/openapi.types"
+import type { JSX } from "react"
+
+import { Pencil, Trash2 } from "lucide-react"
+import { FunctionComponent } from "react"
+
+import cs from "classnames"
+
+import { StylePreview } from "./StylePreview"
+import styles from "./PresetCard.module.scss"
+
+type CaptionPresetRead = components["schemas"]["CaptionPresetRead"]
+type CaptionStyleConfig = components["schemas"]["CaptionStyleConfig"]
+
+interface IPresetCardProps {
+	preset: CaptionPresetRead
+	isSelected: boolean
+	aspectRatio?: number
+	onSelect: () => void
+	onEdit: () => void
+	onDelete: () => void
+}
+
+// Helper to extract style characteristics
+function getStyleCharacteristics(config: CaptionStyleConfig | undefined): {
+	fontFamily: string
+	accentColor: string | null
+	accentName: string | null
+} {
+	const style = config
+	const fontFamily = style?.text?.font_family ?? "Inter"
+
+	const highlightColor = style?.text?.highlight_color
+	const textColor = style?.text?.text_color
+
+	const colorMap: Record<string, string> = {
+		"#FFD700": "Золотой",
+		"#00ffff": "Неоновый",
+		"#ffffff": "Белый",
+		"#ff006e": "Розовый",
+		"#cba6f7": "Пурпурный",
+		"#f38ba8": "Розовый",
+		"#a6e3a1": "Зеленый",
+		"#f9e2af": "Желтый",
+		"#89dceb": "Голубой",
+	}
+
+	const accentColor = highlightColor || textColor || null
+	const accentName = accentColor ? (colorMap[accentColor] ?? null) : null
+
+	return {
+		fontFamily,
+		accentColor,
+		accentName,
+	}
+}
+
+export const PresetCard: FunctionComponent<IPresetCardProps> = ({
+	preset,
+	isSelected,
+	aspectRatio = 16 / 9,
+	onSelect,
+	onEdit,
+	onDelete,
+}): JSX.Element => {
+	const { fontFamily, accentColor, accentName } = getStyleCharacteristics(
+		preset.style_config,
+	)
+
+	return (
+		<div
+			className={cs(styles.presetCard, { [styles.selected]: isSelected })}
+			onClick={onSelect}
+			role="button"
+			tabIndex={0}
+		>
+			<div className={styles.previewArea}>
+				<StylePreview
+					config={preset.style_config}
+					size="small"
+					aspectRatio={aspectRatio}
+				/>
+				{isSelected && (
+					<div className={styles.selectedIndicator}>
+						<svg
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="3"
+						>
+							<polyline points="20 6 9 17 4 12" />
+						</svg>
+					</div>
+				)}
+			</div>
+			<div className={styles.cardFooter}>
+				<div className={styles.presetName}>
+					{preset.name}
+					{preset.is_system && (
+						<span className={styles.systemBadge}>Системный</span>
+					)}
+				</div>
+				<div className={styles.styleChars}>
+					{fontFamily}
+					{accentColor && accentName && (
+						<>
+							<span className={styles.divider}>·</span>
+							<span
+								className={styles.colorDot}
+								style={{ background: accentColor }}
+							/>
+							<span style={{ color: accentColor }}>{accentName}</span>
+						</>
+					)}
+				</div>
+			</div>
+			{!preset.is_system && (
+				<div className={styles.cardActions}>
+					<button
+						className={styles.iconButton}
+						onClick={(e) => {
+							e.stopPropagation()
+							onEdit()
+						}}
+						title="Редактировать"
+					>
+						<Pencil size={14} />
+					</button>
+					<button
+						className={styles.iconButton}
+						onClick={(e) => {
+							e.stopPropagation()
+							onDelete()
+						}}
+						title="Удалить"
+					>
+						<Trash2 size={14} />
+					</button>
+				</div>
+			)}
+		</div>
+	)
+}

src/features/project/CaptionSettingsStep/PresetGrid.module.scss

@@ -1,122 +1,46 @@
 .grid {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-content: flex-start;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 	gap: 16px;
 }
 
-.card {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	height: 100cqh;
-	box-sizing: border-box;
-	border: 2px solid var(--gray-6);
-	border-radius: 12px;
-	overflow: hidden;
-	cursor: pointer;
-	transition: border-color 0.15s ease;
-	background: var(--gray-2);
-
-	&:hover {
-		border-color: var(--gray-8);
-	}
-}
-
-.selected {
-	border-color: var(--accent-9);
-
-	&:hover {
-		border-color: var(--accent-10);
-	}
-}
-
-.cardFooter {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 8px 12px;
-}
-
-.cardName {
-	font-size: 13px;
-	font-weight: 500;
-	color: var(--gray-12);
-}
-
-.systemBadge {
-	font-size: 10px;
-	font-weight: 500;
-	color: var(--accent-11);
-	background: var(--accent-3);
-	padding: 2px 6px;
-	border-radius: 4px;
-}
-
-.cardActions {
-	position: absolute;
-	top: 8px;
-	right: 8px;
-	display: flex;
-	gap: 4px;
-	opacity: 0;
-	transition: opacity 0.15s ease;
-
-	.card:hover & {
-		opacity: 1;
-	}
-}
-
-.iconButton {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 28px;
-	height: 28px;
-	border: none;
-	border-radius: 6px;
-	background: var(--gray-3);
-	color: var(--gray-11);
-	cursor: pointer;
-	transition: background 0.1s ease;
-
-	&:hover {
-		background: var(--gray-5);
-		color: var(--gray-12);
-	}
-}
-
 .createCard {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	gap: 8px;
-	height: 100cqh;
-	box-sizing: border-box;
-	aspect-ratio: 9 / 16;
-	border-style: dashed;
-	border-color: var(--gray-7);
+	background: variables.$bg-default;
+	border: 1.5px dashed variables.$border-default;
+	border-radius: variables.$radius-md;
+	cursor: pointer;
+	transition: border-color var(--duration-normal) var(--ease-out);
 
 	&:hover {
-		border-color: var(--accent-8);
+		border-color: variables.$color-secondary;
 	}
 }
 
+.createPreview {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .createIcon {
-	color: var(--gray-9);
+	color: variables.$text-tertiary;
 }
 
 .createLabel {
 	font-size: 13px;
-	color: var(--gray-9);
+	color: variables.$text-tertiary;
 }
 
 .loading {
 	padding: 48px;
 	text-align: center;
-	color: var(--gray-9);
+	color: variables.$text-tertiary;
 }
 
 .deleteActions {
@@ -125,3 +49,16 @@
 	gap: 8px;
 	margin-top: 16px;
 }
+
+@include breakpoints.respond-to(breakpoints.$tabletMax) {
+	.grid {
+		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+		gap: 12px;
+	}
+}
+
+@include breakpoints.respond-to(breakpoints.$mobileMax) {
+	.grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}

src/features/project/CaptionSettingsStep/PresetGrid.tsx

@@ -3,19 +3,22 @@
 import type { components } from "@shared/api/__generated__/openapi.types"
 import type { JSX } from "react"
 
-import cs from "classnames"
-import { Pencil, Plus, Trash2 } from "lucide-react"
+import { Plus } from "lucide-react"
 import { FunctionComponent, useState } from "react"
 
+import { useWizard } from "@shared/context/WizardContext"
 import { Button, Modal } from "@shared/ui"
 
-import { StylePreview } from "./StylePreview"
+import { PresetCard } from "./PresetCard"
+import { PresetCardSkeleton } from "./PresetCardSkeleton"
 import { useDeletePreset, usePresetsQuery } from "./useCaptionPresets"
-
+import { useVideoMetadata } from "./useVideoMetadata"
 import styles from "./PresetGrid.module.scss"
 
 type CaptionPresetRead = components["schemas"]["CaptionPresetRead"]
 
+const SKELETON_COUNT = 5
+
 interface IPresetGridProps {
 	selectedPresetId: string | null
 	onSelect: (presetId: string) => void
@@ -23,65 +26,23 @@ interface IPresetGridProps {
 	onCreateNew: () => void
 }
 
-const PresetCard: FunctionComponent<{
-	preset: CaptionPresetRead
-	isSelected: boolean
-	onSelect: () => void
-	onEdit: () => void
-	onDelete: () => void
-}> = ({ preset, isSelected, onSelect, onEdit, onDelete }) => (
-	<div
-		className={cs(styles.card, { [styles.selected]: isSelected })}
-		onClick={onSelect}
-		role="button"
-		tabIndex={0}
-	>
-		<StylePreview config={preset.style_config} size="small" />
-		<div className={styles.cardFooter}>
-			<span className={styles.cardName}>{preset.name}</span>
-			{preset.is_system && (
-				<span className={styles.systemBadge}>Системный</span>
-			)}
-		</div>
-		{!preset.is_system && (
-			<div className={styles.cardActions}>
-				<button
-					className={styles.iconButton}
-					onClick={(e) => {
-						e.stopPropagation()
-						onEdit()
-					}}
-					title="Редактировать"
-				>
-					<Pencil size={14} />
-				</button>
-				<button
-					className={styles.iconButton}
-					onClick={(e) => {
-						e.stopPropagation()
-						onDelete()
-					}}
-					title="Удалить"
-				>
-					<Trash2 size={14} />
-				</button>
-			</div>
-		)}
-	</div>
-)
-
 export const PresetGrid: FunctionComponent<IPresetGridProps> = ({
 	selectedPresetId,
 	onSelect,
 	onEdit,
 	onCreateNew,
 }): JSX.Element => {
-	const { data: presets, isLoading } = usePresetsQuery()
+	const { primaryFileId } = useWizard()
+	const { aspectRatio, isLoading: isMetadataLoading } =
+		useVideoMetadata(primaryFileId)
+	const { data: presets, isLoading: isPresetsLoading } = usePresetsQuery()
 	const deletePreset = useDeletePreset()
 	const [deleteTarget, setDeleteTarget] = useState<CaptionPresetRead | null>(
 		null,
 	)
 
+	const isLoading = isPresetsLoading
+
 	const handleConfirmDelete = () => {
 		if (!deleteTarget) return
 		deletePreset.mutate(
@@ -91,29 +52,39 @@ export const PresetGrid: FunctionComponent<IPresetGridProps> = ({
 	}
 
 	if (isLoading) {
-		return <div className={styles.loading}>Загрузка пресетов...</div>
+		return (
+			<div className={styles.grid} data-testid="PresetGrid">
+				{Array.from({ length: SKELETON_COUNT }, (_, i) => (
+					<PresetCardSkeleton key={i} aspectRatio={aspectRatio} />
+				))}
+			</div>
+		)
 	}
 
 	return (
 		<>
-			<div className={styles.grid}>
+			<div className={styles.grid} data-testid="PresetGrid">
 				{presets?.map((preset) => (
 					<PresetCard
 						key={preset.id}
 						preset={preset}
 						isSelected={selectedPresetId === preset.id}
+						aspectRatio={aspectRatio}
 						onSelect={() => onSelect(preset.id)}
 						onEdit={() => onEdit(preset)}
 						onDelete={() => setDeleteTarget(preset)}
 					/>
 				))}
 				<div
-					className={cs(styles.card, styles.createCard)}
+					className={styles.createCard}
 					onClick={onCreateNew}
 					role="button"
 					tabIndex={0}
+					data-testid="PresetGrid-CreateCard"
 				>
-					<Plus size={32} className={styles.createIcon} />
+					<div className={styles.createPreview} style={{ aspectRatio }}>
+						<Plus size={32} className={styles.createIcon} />
+					</div>
 					<span className={styles.createLabel}>Создать пресет</span>
 				</div>
 			</div>
@@ -125,14 +96,11 @@ export const PresetGrid: FunctionComponent<IPresetGridProps> = ({
 					title="Удаление пресета"
 				>
 					<p>
-						Удалить пресет &laquo;{deleteTarget.name}&raquo;? Это
-						действие нельзя отменить.
+						Удалить пресет &laquo;{deleteTarget.name}&raquo;? Это действие
+						нельзя отменить.
 					</p>
 					<div className={styles.deleteActions}>
-						<Button
-							variant="outline"
-							onClick={() => setDeleteTarget(null)}
-						>
+						<Button variant="outline" onClick={() => setDeleteTarget(null)}>
 							Отмена
 						</Button>
 						<Button

src/features/project/CaptionSettingsStep/StylePreview.module.scss

@@ -8,9 +8,7 @@
 }
 
 .small {
-	--preview-h: calc(100cqh - 38px);
-	height: var(--preview-h);
-	width: calc(var(--preview-h) * 9 / 16);
+	width: 100%;
 }
 
 .large {

src/features/project/CaptionSettingsStep/StylePreview.tsx

@@ -18,7 +18,7 @@ interface IStylePreviewProps {
 	aspectRatio?: number
 }
 
-const SMALL_SCALE = 0.65
+const SMALL_SCALE = 0.45
 
 const buildContainerStyles = (
 	config: CaptionStyleConfig,
@@ -107,7 +107,7 @@ export const StylePreview: FunctionComponent<IStylePreviewProps> = ({
 			<div
 				style={{
 					...buildContainerStyles(safeConfig, scale),
-					maxWidth: "100%",
+					maxWidth: `${safeConfig.layout?.max_width_pct ?? 90}%`,
 					boxSizing: "border-box",
 				}}
 			>

src/features/project/CaptionSettingsStep/useVideoMetadata.ts

@@ -10,8 +10,14 @@ interface UseVideoMetadataResult {
 
 const DEFAULT_ASPECT_RATIO = 16 / 9
 
-export function useVideoMetadata(fileId: string | null): UseVideoMetadataResult {
-	const { data: mediaFile, isLoading, isError } = api.useQuery(
+export function useVideoMetadata(
+	fileId: string | null,
+): UseVideoMetadataResult {
+	const {
+		data: mediaFile,
+		isLoading,
+		isError,
+	} = api.useQuery(
 		"get",
 		"/api/media/mediafiles/{media_file_id}/",
 		{
@@ -23,7 +29,8 @@ export function useVideoMetadata(fileId: string | null): UseVideoMetadataResult
 		},
 		{
 			enabled: !!fileId,
-		}
+			retry: false,
+		},
 	)
 
 	const aspectRatio = useMemo(() => {

src/features/project/ConvertMediaView/ConvertMediaView.tsx

@@ -4,10 +4,10 @@ import type { IConvertMediaViewProps } from "./ConvertMediaView.d"
 import type { JSX } from "react"
 
 import { CheckCircle, FileVideo } from "lucide-react"
-import { FunctionComponent, useCallback, useState } from "react"
+import { FunctionComponent, useCallback, useEffect, useState } from "react"
 
 import api from "@shared/api"
-import { useAppSelector } from "@shared/hooks/useAppSelector"
+import { useTaskProgressState } from "@shared/hooks/useTaskProgressState"
 import { Button } from "@shared/ui"
 
 import styles from "./ConvertMediaView.module.scss"
@@ -37,24 +37,25 @@ export const ConvertMediaView: FunctionComponent<
 	const [jobId, setJobId] = useState<string | null>(null)
 	const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
-	const notification = useAppSelector((state) =>
-		jobId
-			? state.notifications.items.find((n) => n.job_id === jobId)
-			: null,
-	)
+	const resolvedProgress = useTaskProgressState({
+		jobId,
+		enabled: !!jobId && status === STATUS_CONVERTING,
+		defaultMessage: "Конвертация...",
+	})
 
-	const progressPct = notification?.progress_pct ?? 0
-	const notifStatus = notification?.status
-	const notifMessage = notification?.message
+	useEffect(() => {
+		if (status !== STATUS_CONVERTING) return
 
-	// Update status from notification
-	if (status === STATUS_CONVERTING && notifStatus === "DONE") {
-		setStatus(STATUS_DONE)
-	}
-	if (status === STATUS_CONVERTING && notifStatus === "FAILED") {
-		setStatus(STATUS_FAILED)
-		setErrorMessage(notifMessage ?? ERROR_CONVERT_FAILED)
-	}
+		if (resolvedProgress.status === "DONE") {
+			setStatus(STATUS_DONE)
+			return
+		}
+
+		if (resolvedProgress.status === "FAILED") {
+			setStatus(STATUS_FAILED)
+			setErrorMessage(resolvedProgress.errorMessage ?? ERROR_CONVERT_FAILED)
+		}
+	}, [resolvedProgress.errorMessage, resolvedProgress.status, status])
 
 	const { mutate, isPending } = api.useMutation(
 		"post",
@@ -103,16 +104,16 @@ export const ConvertMediaView: FunctionComponent<
 			<div className={styles.root} data-testid="ConvertMediaView">
 				<div className={styles.content}>
 					<FileVideo size={48} className={styles.icon} />
-					<p className={styles.message}>
-						{notifMessage ?? "Конвертация..."}
-					</p>
+					<p className={styles.message}>{resolvedProgress.message}</p>
 					<div className={styles.progressTrack}>
 						<div
 							className={styles.progressBar}
-							style={{ width: `${progressPct}%` }}
+							style={{ width: `${resolvedProgress.progressPct}%` }}
 						/>
 					</div>
-					<p className={styles.progressLabel}>{Math.round(progressPct)}%</p>
+					<p className={styles.progressLabel}>
+						{Math.round(resolvedProgress.progressPct)}%
+					</p>
 				</div>
 			</div>
 		)

src/features/project/FragmentsStep/FragmentsStep.tsx

@@ -72,6 +72,7 @@ export const FragmentsStep: FunctionComponent<IFragmentsStepProps> = ({
 	const {
 		projectId,
 		silenceJobId,
+		primaryFileId,
 		primaryFileKey,
 		startProcessingJob,
 		goBack,
@@ -106,9 +107,9 @@ export const FragmentsStep: FunctionComponent<IFragmentsStepProps> = ({
 
 	const { data: fileInfo } = api.useQuery(
 		"get",
-		"/api/files/get_file/",
-		{ params: { query: { file_path: fileKey } } },
-		{ enabled: !!fileKey },
+		"/api/files/files/{file_id}/resolve/",
+		{ params: { path: { file_id: primaryFileId ?? "" } } },
+		{ enabled: !!primaryFileId },
 	)
 
 	const videoUrl = fileInfo?.file_url ?? null

src/features/project/ProcessingStep/ProcessingStep.tsx

@@ -8,7 +8,7 @@ import { Info } from "lucide-react"
 import { FunctionComponent } from "react"
 
 import { useWizard } from "@shared/context/WizardContext"
-import { useAppSelector } from "@shared/hooks/useAppSelector"
+import { useTaskProgressState } from "@shared/hooks/useTaskProgressState"
 import { Button, CircularProgress } from "@shared/ui"
 
 import {
@@ -51,20 +51,18 @@ export const ProcessingStep: FunctionComponent<IProcessingStepProps> = ({
 		goBack()
 	}
 
-	const notification = useAppSelector((state) =>
-		activeJobId
-			? state.notifications.items.find(
-					(n) => n.job_id === activeJobId,
-				)
-			: null,
-	)
+	const taskProgress = useTaskProgressState({
+		jobId: activeJobId,
+		enabled: !!activeJobId,
+		defaultMessage: "Подождите, идёт обработка...",
+	})
 
-	const progressPct = notification?.progress_pct ?? 0
+	const progressPct = taskProgress.progressPct
 	const statusLabel = activeJobType
 		? (JOB_TYPE_LABELS[activeJobType] ?? "ОБРАБОТКА")
 		: "ОБРАБОТКА"
-	const statusMessage = notification?.message ?? "Подождите, идёт обработка..."
-	const isFailed = notification?.status === "FAILED"
+	const statusMessage = taskProgress.message
+	const isFailed = taskProgress.status === "FAILED"
 
 	const handleCancel = () => {
 		if (!activeJobId || isCancelling) return
@@ -118,9 +116,10 @@ export const ProcessingStep: FunctionComponent<IProcessingStepProps> = ({
 					})}
 				>
 					{isFailed
-						? (notification?.message ?? "Произошла ошибка при обработке")
+						? (taskProgress.errorMessage ??
+							"Произошла ошибка при обработке")
 						: statusMessage}
-				</p>
+					</p>
 
 				<div className={styles.infoCard}>
 					<Info size={16} className={styles.infoIcon} />

src/features/project/SegmentEditModal/SegmentEditModal.module.scss

@@ -89,7 +89,7 @@
 	top: 0;
 	left: 0;
 	height: 100%;
-	background: variables.$purple-400;
+	background: variables.$color-primary;
 	border-radius: 2px;
 	pointer-events: none;
 }
@@ -100,7 +100,7 @@
 	width: 12px;
 	height: 12px;
 	border-radius: 50%;
-	background: variables.$purple-400;
+	background: variables.$color-primary;
 	transform: translate(-50%, -50%);
 	pointer-events: none;
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
@@ -121,8 +121,8 @@
 
 	&:focus {
 		outline: none;
-		border-color: variables.$purple-400;
-		box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
+		border-color: variables.$color-primary;
+		box-shadow: var(--focus-ring);
 	}
 }
 

src/features/project/SilenceResultModal/SilenceResultModal.tsx

@@ -95,11 +95,22 @@ export const SilenceResultModal: FunctionComponent<ISilenceResultModalProps> = (
 	const outputData = taskStatus?.output_data as Record<string, unknown> | null
 	const fileKey = (outputData?.file_key as string) ?? ""
 
+	const { data: project } = api.useQuery(
+		"get",
+		"/api/projects/{project_id}/",
+		{ params: { path: { project_id: projectId } } },
+		{ enabled: open },
+	)
+
+	const primaryFileId =
+		(project?.workspace_state as { wizard?: { primary_file_id?: string | null } } | null)
+			?.wizard?.primary_file_id ?? null
+
 	const { data: fileInfo } = api.useQuery(
 		"get",
-		"/api/files/get_file/",
-		{ params: { query: { file_path: fileKey } } },
-		{ enabled: open && !!fileKey },
+		"/api/files/files/{file_id}/resolve/",
+		{ params: { path: { file_id: primaryFileId ?? "" } } },
+		{ enabled: open && !!primaryFileId },
 	)
 
 	const videoUrl = fileInfo?.file_url ?? null

src/features/project/SubtitleRevisionStep/SubtitleRevisionStep.module.scss

@@ -3,38 +3,118 @@
 	flex-direction: column;
 	flex: 1;
 	overflow: hidden;
+	min-height: 0;
 }
 
 .mediaPlayer {
 	display: flex !important;
 	flex-direction: column !important;
 	flex: 1;
+	width: 100%;
+	max-width: 100%;
+	height: auto;
 	min-height: 0;
+	min-width: 0;
 	overflow: hidden;
 
 	// Reset vidstack player defaults
 	aspect-ratio: unset !important;
-	width: 100% !important;
-	height: auto !important;
+}
+
+.workspaceShell {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	width: 100%;
+	max-width: 100%;
+	min-height: 0;
+	min-width: 0;
+	border: 1px solid variables.$border-default;
+	border-radius: 10px;
+	background: variables.$bg-default;
+	overflow: hidden;
 }
 
 .mainGrid {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
 	gap: 16px;
 	flex: 1;
-	padding: 16px 24px;
+	width: 100%;
+	max-width: 100%;
+	padding: 16px;
 	overflow: hidden;
 	min-height: 0;
+	min-width: 0;
 	align-self: stretch;
+
+	@media (max-width: 1120px) {
+		grid-template-columns: 1fr;
+		align-content: start;
+		overflow-y: auto;
+	}
+}
+
+.panel {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	max-width: 100%;
+	min-height: 0;
+	min-width: 0;
+	border: 1px solid variables.$border-default;
+	border-radius: 8px;
+	background: variables.$bg-default;
+	overflow: hidden;
+
+	@media (max-width: 1120px) {
+		min-height: auto;
+	}
+}
+
+.panelHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 14px 16px;
+	border-bottom: 1px solid variables.$border-default;
+	flex-shrink: 0;
+	background: variables.$bg-default;
+}
+
+.panelTitle {
+	margin: 0;
+	color: variables.$text-primary;
+	@include typography.font-body-16(600);
+}
+
+.editorPanel {
+	min-height: 0;
+
+	@media (max-width: 1120px) {
+		min-height: 420px;
+	}
+}
+
+.playerPanel {
+	min-height: 0;
+
+	@media (max-width: 1120px) {
+		min-height: 260px;
+	}
 }
 
 .playerColumn {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
 	position: relative;
-	border-radius: variables.$radius-md;
+	width: 100%;
+	max-width: 100%;
 	overflow: hidden;
 	background: #000;
-	min-height: 0;
+	min-height: 280px;
+	min-width: 0;
 
 	:global([data-media-player]) {
 		width: 100% !important;
@@ -55,11 +135,15 @@
 }
 
 .editorColumn {
-	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	width: 100%;
+	max-width: 100%;
+	overflow: hidden;
 	min-height: 0;
-	border: 1px solid variables.$border-subtle;
-	border-radius: variables.$radius-md;
-	background: variables.$bg-surface;
+	min-width: 0;
+	background: variables.$bg-default;
 }
 
 .placeholder {
@@ -67,28 +151,41 @@
 	align-items: center;
 	justify-content: center;
 	height: 100%;
+	padding: 24px;
 	color: variables.$text-tertiary;
 	@include typography.font-body-14(500);
 }
 
 .timelineWrapper {
-	border-top: 1px solid variables.$border-subtle;
-	padding: 0 24px;
+	width: 100%;
+	max-width: 100%;
+	min-width: 0;
+	padding: 0 16px 16px;
 	align-self: stretch;
 	overflow: hidden;
 }
 
 .timeline {
 	width: 100%;
+	max-width: 100%;
+	min-width: 0;
 }
 
 .footer {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 16px 24px;
-	border-top: 1px solid variables.$border-subtle;
-	background: variables.$bg-surface;
+	width: 100%;
+	max-width: 100%;
+	padding: 0 16px 16px;
+	background: transparent;
 	align-self: stretch;
 	flex-shrink: 0;
+	min-width: 0;
+
+	@media (max-width: 720px) {
+		flex-direction: column-reverse;
+		align-items: stretch;
+		gap: 10px;
+	}
 }

src/features/project/SubtitleRevisionStep/SubtitleRevisionStep.tsx

@@ -3,7 +3,11 @@
 import type { ISubtitleRevisionStepProps } from "./SubtitleRevisionStep.d"
 import type { JSX } from "react"
 
-import { MediaPlayer, MediaProvider } from "@vidstack/react"
+import {
+	MediaPlayer,
+	MediaProvider,
+	type MediaPlayerInstance,
+} from "@vidstack/react"
 import {
 	DefaultVideoLayout,
 	defaultLayoutIcons,
@@ -90,7 +94,7 @@ const SubtitleRevisionContent: FunctionComponent<{
 		markStepCompleted,
 	} = useWizard()
 
-	const { data: artifacts } = api.useQuery(
+	const { data: artifacts, isLoading: isArtifactsLoading } = api.useQuery(
 		"get",
 		"/api/media/artifacts/",
 		{},
@@ -108,6 +112,10 @@ const SubtitleRevisionContent: FunctionComponent<{
 		)
 		return match?.id ?? null
 	}, [contextArtifactId, artifacts, projectId])
+	const isArtifactResolving = !contextArtifactId && isArtifactsLoading
+	const isTranscriptionReady = Boolean(transcriptionArtifactId)
+	const isTranscriptionUnavailable =
+		!isTranscriptionReady && !isArtifactResolving
 
 	useEffect(() => {
 		if (
@@ -130,6 +138,7 @@ const SubtitleRevisionContent: FunctionComponent<{
 		"/api/tasks/frame-extract/",
 	)
 	const extractTriggeredRef = useRef(false)
+	const playerRef = useRef<MediaPlayerInstance | null>(null)
 
 	useEffect(() => {
 		if (!primaryFileKey || !projectId || extractTriggeredRef.current) return
@@ -144,6 +153,8 @@ const SubtitleRevisionContent: FunctionComponent<{
 	}, [primaryFileKey, projectId]) // eslint-disable-line react-hooks/exhaustive-deps
 
 	const handleFinish = () => {
+		if (!isTranscriptionReady) return
+
 		markStepCompleted("subtitle-revision")
 		goToStep("caption-settings")
 	}
@@ -158,89 +169,110 @@ const SubtitleRevisionContent: FunctionComponent<{
 				transcriptionArtifactId={transcriptionArtifactId}
 			/>
 
-			<MediaPlayer
-				src={videoUrl ?? ""}
-				crossOrigin=""
-				playsInline
-				className={styles.mediaPlayer}
-				style={{
-					display: "flex",
-					flexDirection: "column",
-					flex: 1,
-					aspectRatio: "unset",
-					width: "100%",
-					height: "auto",
-					minHeight: 0,
-					overflow: "hidden",
-				}}
-			>
-				{/* Main content: video + editor */}
+			<div className={styles.workspaceShell}>
 				<div className={styles.mainGrid}>
-					{/* Left column: video player */}
-					<div className={styles.playerColumn}>
-						{videoUrl ? (
-							<>
-								<MediaProvider />
-								<DefaultVideoLayout
-									icons={defaultLayoutIcons}
-									disableTimeSlider
-									slots={{
-										timeSlider: null,
-										currentTime: null,
-										timeDivider: null,
-										endTime: null,
-										startDuration: null,
-										seekBackwardButton: null,
-										seekForwardButton: null,
-										captionButton: null,
-										settingsMenu: null,
-										pipButton: null,
-										airPlayButton: null,
-										googleCastButton: null,
-										downloadButton: null,
-									}}
-								/>
-							</>
-						) : (
-							<div className={styles.placeholder}>
-								Видео недоступно
-							</div>
-						)}
-					</div>
+					<section className={cs(styles.panel, styles.editorPanel)}>
+						<div className={styles.panelHeader}>
+							<h2 className={styles.panelTitle}>Текст</h2>
+						</div>
+						<div
+							className={styles.editorColumn}
+							aria-busy={isArtifactResolving}
+						>
+							{isArtifactResolving ? (
+								<div
+									className={styles.placeholder}
+									role="status"
+									aria-live="polite"
+									aria-atomic="true"
+								>
+									Загружаем субтитры...
+								</div>
+							) : transcriptionArtifactId ? (
+								<TranscriptionEditor artifactId={transcriptionArtifactId} />
+							) : (
+								<div
+									className={styles.placeholder}
+									role="status"
+									aria-live="polite"
+									aria-atomic="true"
+								>
+									Транскрипция не найдена
+								</div>
+							)}
+						</div>
+					</section>
 
-					{/* Right column: transcription editor */}
-					<div className={styles.editorColumn}>
-						{transcriptionArtifactId ? (
-							<TranscriptionEditor
-								artifactId={transcriptionArtifactId}
-							/>
-						) : (
-							<div className={styles.placeholder}>
-								Транскрипция не найдена
-							</div>
-						)}
-					</div>
+					<section className={cs(styles.panel, styles.playerPanel)}>
+						<div className={styles.panelHeader}>
+							<h2 className={styles.panelTitle}>Видео</h2>
+						</div>
+						<div className={styles.playerColumn}>
+							{videoUrl ? (
+								<MediaPlayer
+									ref={playerRef}
+									src={videoUrl}
+									crossOrigin=""
+									playsInline
+									className={styles.mediaPlayer}
+								>
+									<MediaProvider />
+									<DefaultVideoLayout
+										icons={defaultLayoutIcons}
+										disableTimeSlider
+										slots={{
+											timeSlider: null,
+											currentTime: null,
+											timeDivider: null,
+											endTime: null,
+											startDuration: null,
+											seekBackwardButton: null,
+											seekForwardButton: null,
+											captionButton: null,
+											settingsMenu: null,
+											pipButton: null,
+											airPlayButton: null,
+											googleCastButton: null,
+											downloadButton: null,
+										}}
+									/>
+								</MediaPlayer>
+							) : (
+								<div className={styles.placeholder}>
+									Видео недоступно
+								</div>
+							)}
+						</div>
+					</section>
 				</div>
 
-				{/* Bottom: timeline */}
 				<div className={styles.timelineWrapper}>
 					<TimelinePanel
 						projectId={projectId}
 						audioUrl={videoUrl}
 						className={styles.timeline}
+						playerRef={playerRef}
 					/>
 				</div>
 
-				{/* Footer */}
 				<div className={styles.footer}>
 					<Button variant="outline" onClick={goBack}>
 						Отмена
 					</Button>
-					<Button variant="primary" onClick={handleFinish}>
-						Далее
+					<Button
+						variant="primary"
+						onClick={handleFinish}
+						loading={isArtifactResolving}
+						disabled={!isTranscriptionReady}
+					>
+						{isArtifactResolving
+							? "Проверяем..."
+							: isTranscriptionUnavailable
+								? "Субтитры не найдены"
+								: "Далее"}
 					</Button>
 				</div>
-			</MediaPlayer>
+			</div>
 		</div>
 	)
 }

src/features/project/SubtitlesTrack/SubtitlesTrack.module.scss

@@ -8,8 +8,8 @@
 	top: 4px;
 	bottom: 4px;
 	border-radius: variables.$radius-sm;
-	background: rgba(139, 92, 246, 0.3);
-	border: 1px solid rgba(139, 92, 246, 0.7);
+	background: color-mix(in srgb, variables.$color-primary 28%, transparent);
+	border: 1px solid color-mix(in srgb, variables.$color-primary 62%, transparent);
 	cursor: pointer;
 	user-select: none;
 	display: flex;
@@ -18,7 +18,7 @@
 	transition: background 0.1s;
 
 	&:hover {
-		background: rgba(139, 92, 246, 0.45);
+		background: color-mix(in srgb, variables.$color-primary 42%, transparent);
 	}
 
 }
@@ -40,15 +40,15 @@
 }
 
 .active {
-	background: rgba(139, 92, 246, 0.6);
+	background: color-mix(in srgb, variables.$color-primary 56%, transparent);
 
 	&:hover {
-		background: rgba(139, 92, 246, 0.65);
+		background: color-mix(in srgb, variables.$color-primary 62%, transparent);
 	}
 }
 
 .resizing {
-	background: rgba(139, 92, 246, 0.5);
+	background: color-mix(in srgb, variables.$color-primary 48%, transparent);
 	z-index: 2;
 }
 
@@ -75,7 +75,7 @@
 	z-index: 3;
 
 	&:hover {
-		background: rgba(139, 92, 246, 0.5);
+		background: color-mix(in srgb, variables.$color-primary 48%, transparent);
 	}
 }
 

src/features/project/TranscriptionEditor/TranscriptionEditor.module.scss

@@ -2,7 +2,9 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	min-height: 0;
 	overflow: hidden;
+	background: transparent;
 }
 
 .loader {
@@ -10,12 +12,27 @@
 	align-items: center;
 	justify-content: center;
 	flex: 1;
+	gap: 8px;
+	color: variables.$text-tertiary;
+	@include typography.font-caption-m;
 }
 
 .spinner {
 	animation: spin 1s linear infinite;
 }
 
+.srOnly {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
 @keyframes spin {
 	from { transform: rotate(0deg); }
 	to { transform: rotate(360deg); }
@@ -28,126 +45,168 @@
 	font-size: 14px;
 }
 
-.header {
+.toolbar {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 12px 16px;
+	gap: 16px;
+	padding: 16px 18px 14px;
 	border-bottom: 1px solid variables.$border-default;
+	background: variables.$bg-default;
 	flex-shrink: 0;
+
+	@media (max-width: 720px) {
+		flex-direction: column;
+		align-items: stretch;
+	}
 }
 
-.title {
-	font-size: 14px;
-	font-weight: 600;
-	color: variables.$text-primary;
+.toolbarMeta {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+
+.toolbarTitle {
 	margin: 0;
+	color: variables.$text-primary;
+	@include typography.font-body-16(600);
 }
 
-.saveButton {
-	display: inline-flex;
+.toolbarSummary {
+	display: flex;
 	align-items: center;
-	gap: 6px;
-	padding: 6px 12px;
-	border-radius: variables.$radius-sm;
-	border: none;
-	background: variables.$color-primary;
-	color: variables.$color-white;
-	font-size: 13px;
-	font-weight: 500;
-	cursor: pointer;
-	transition: opacity 0.15s;
+	flex-wrap: wrap;
+	gap: 10px;
+}
 
-	&:hover {
-		opacity: 0.9;
-	}
+.segmentCount {
+	color: variables.$text-secondary;
+	@include typography.font-body-14(500);
+}
 
-	&.disabled {
-		background: variables.$border-default;
-		color: variables.$text-tertiary;
-		cursor: default;
-		pointer-events: none;
-	}
+.headerStatus {
+	margin: 0;
+	color: variables.$text-tertiary;
+	@include typography.font-caption-m;
 }
 
 .segmentsList {
 	flex: 1;
 	overflow-y: auto;
-	padding: 12px 16px;
+	padding: 14px 18px 18px;
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: 10px;
 }
 
 .segment {
-	border: 1px solid variables.$border-subtle;
-	border-radius: variables.$radius-md;
-	padding: 12px 16px;
-	background: variables.$bg-surface;
-	transition: all 0.3s ease;
+	display: grid;
+	grid-template-columns: 44px minmax(0, 1fr);
+	gap: 12px;
+	border: 1px solid variables.$border-default;
+	border-radius: 10px;
+	padding: 12px;
+	background: variables.$bg-default;
+	transition: border-color 0.15s ease, background 0.15s ease,
+		box-shadow 0.15s ease;
 
 	&:hover {
 		border-color: variables.$border-default;
-		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
+		background: variables.$bg-surface;
 	}
 
 	&.highlight {
 		border-color: variables.$color-primary;
-		box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
+		box-shadow: var(--focus-ring);
+	}
+
+	@media (max-width: 720px) {
+		grid-template-columns: 1fr;
 	}
 }
 
-.segmentTimes {
+.segmentNumber {
+	display: inline-flex;
+	align-items: flex-start;
+	justify-content: center;
+	padding-top: 7px;
+	color: variables.$text-tertiary;
+	@include typography.font-caption-m;
+	@include typography.font-numeric;
+}
+
+.segmentMain {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	min-width: 0;
+}
+
+.segmentMetaRow {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	margin-bottom: 12px;
+	gap: 12px;
+	flex-wrap: wrap;
 }
 
 .timesGroup {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	gap: 16px;
+	gap: 8px;
+	flex: 1;
+	min-width: 0;
 }
 
 .actionsGroup {
 	display: flex;
 	align-items: center;
 	gap: 6px;
+	flex-shrink: 0;
 }
 
-.timeLabel {
+.timeField {
 	display: flex;
-	align-items: center;
-	gap: 8px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 4px;
+	padding: 8px 10px;
+	border-radius: 8px;
+	background: variables.$bg-surface;
+	border: 1px solid variables.$border-default;
+	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+
+	&:focus-within {
+		background: variables.$bg-default;
+		border-color: variables.$color-primary;
+		box-shadow: var(--focus-ring);
+	}
 }
 
 .timeLabelText {
-	font-size: 11px;
-	color: variables.$text-tertiary;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
+	color: variables.$text-secondary;
+	white-space: nowrap;
+	@include typography.font-caption-m;
 }
 
 .timeInput {
-	width: 84px;
-	padding: 4px 8px;
-	border: 1px solid transparent;
-	border-radius: variables.$radius-sm;
-	font-size: 12px;
+	width: 96px;
+	padding: 0;
+	border: none;
+	border-radius: 0;
 	font-family: monospace;
-	color: variables.$text-secondary;
-	background: variables.$bg-hover;
-	transition: all 0.2s ease;
-	text-align: center;
+	color: variables.$text-primary;
+	background: transparent;
+	transition: color 0.2s ease;
+	text-align: left;
+	@include typography.font-caption-m;
+	@include typography.font-numeric;
 
 	&:focus {
 		outline: none;
-		background: variables.$bg-surface;
-		border-color: variables.$color-primary;
-		color: variables.$text-primary;
-		box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
 	}
 }
 
@@ -155,19 +214,23 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	padding: 6px;
-	border: none;
-	background: transparent;
+	width: 32px;
+	height: 32px;
+	padding: 0;
+	border: 1px solid variables.$border-default;
+	background: variables.$bg-default;
 	color: variables.$text-tertiary;
 	cursor: pointer;
-	border-radius: variables.$radius-sm;
-	transition: all 0.2s ease;
+	border-radius: 8px;
+	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
+		box-shadow 0.2s ease;
 }
 
 .splitButton {
 	&:hover:not(:disabled) {
 		color: variables.$color-primary;
-		background: variables.$bg-hover;
+		background: variables.$bg-surface;
+		border-color: variables.$border-default;
 	}
 
 	&:disabled {
@@ -179,22 +242,23 @@
 .removeButton {
 	&:hover {
 		color: variables.$color-danger;
-		background: rgba(239, 68, 68, 0.1);
+		background: variables.$bg-surface;
+		border-color: variables.$border-default;
 	}
 }
 
 .textArea {
 	width: 100%;
-	padding: 10px 12px;
-	border: 1px solid transparent;
-	border-radius: variables.$radius-sm;
-	font-size: 14px;
-	line-height: 1.5;
+	min-height: 96px;
+	padding: 12px 14px;
+	border: 1px solid variables.$border-default;
+	border-radius: 8px;
 	color: variables.$text-primary;
-	background: variables.$bg-hover;
+	background: variables.$bg-surface;
 	resize: vertical;
 	font-family: inherit;
-	transition: all 0.2s ease;
+	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+	@include typography.font-body-14(400);
 
 	&:hover {
 		background: variables.$bg-hover;
@@ -202,29 +266,41 @@
 
 	&:focus {
 		outline: none;
-		background: variables.$bg-surface;
+		background: variables.$bg-default;
 		border-color: variables.$color-primary;
-		box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+		box-shadow: var(--focus-ring);
+	}
+
+	&::placeholder {
+		color: variables.$text-tertiary;
 	}
 }
 
 .addButton {
 	display: inline-flex;
 	align-items: center;
-	gap: 6px;
-	padding: 8px 16px;
-	margin: 0 16px 12px;
-	border: 1px dashed variables.$border-default;
-	border-radius: variables.$radius-md;
-	background: none;
+	gap: 8px;
+	justify-content: center;
+	padding: 10px 12px;
+	border: 1px solid variables.$border-default;
+	border-radius: 8px;
+	background: variables.$bg-default;
 	color: variables.$text-secondary;
-	font-size: 13px;
+	@include typography.font-body-14(500);
 	cursor: pointer;
 	flex-shrink: 0;
+	white-space: nowrap;
+	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
+		box-shadow 0.2s ease;
 
 	&:hover {
-		background: variables.$bg-hover;
-		border-color: variables.$color-primary;
+		background: variables.$bg-surface;
+		border-color: variables.$border-default;
 		color: variables.$color-primary;
+		box-shadow: var(--shadow-sm);
+	}
+
+	@media (max-width: 720px) {
+		width: 100%;
 	}
 }

src/features/project/TranscriptionEditor/TranscriptionEditor.tsx

@@ -10,6 +10,7 @@ import { FunctionComponent, useCallback, useEffect, useRef, useState } from "rea
 import api from "@shared/api"
 import { fetchClient } from "@shared/api"
 import { useWorkspaceFiles } from "@shared/context/WorkspaceContext"
+import { declOfNum } from "@shared/lib/russianNoun"
 import {
 	type EditorSegment,
 	documentToSegments,
@@ -23,12 +24,18 @@ import styles from "./TranscriptionEditor.module.scss"
 /*  Component                                                          */
 /* ------------------------------------------------------------------ */
 
+type SegmentRow = {
+	id: string
+	segment: EditorSegment
+}
+
 export const TranscriptionEditor: FunctionComponent<
 	ITranscriptionEditorProps
 > = ({ artifactId }): JSX.Element => {
 	const queryClient = useQueryClient()
 	const { selectedFile, setSelectedFile } = useWorkspaceFiles()
 	const segmentsListRef = useRef<HTMLDivElement>(null)
+	const rowIdRef = useRef(0)
 
 	const { data: transcription, isLoading } = api.useQuery(
 		"get",
@@ -36,22 +43,41 @@ export const TranscriptionEditor: FunctionComponent<
 		{ params: { path: { artifact_id: artifactId } } },
 	)
 
-	const [segments, setSegments] = useState<EditorSegment[]>([])
+	const [segmentRows, setSegmentRows] = useState<SegmentRow[]>([])
 	const [saving, setSaving] = useState(false)
 	const [dirty, setDirty] = useState(false)
-	const [splittingIdx, setSplittingIdx] = useState<number | null>(null)
+	const [splittingRowId, setSplittingRowId] = useState<string | null>(null)
+	const visibleStatus = saving
+		? "Сохраняем изменения"
+		: dirty
+			? "Изменения будут сохранены автоматически"
+			: null
+
+	const createSegmentRow = useCallback(
+		(segment: EditorSegment): SegmentRow => ({
+			id: `segment-row-${rowIdRef.current++}`,
+			segment,
+		}),
+		[],
+	)
 
 	useEffect(() => {
 		if (transcription?.document) {
-			setSegments(documentToSegments(transcription.document))
+			rowIdRef.current = 0
+			setSegmentRows(
+				documentToSegments(transcription.document).map((segment) =>
+					createSegmentRow(segment),
+				),
+			)
 			setDirty(false)
+			setSplittingRowId(null)
 		}
-	}, [transcription])
+	}, [transcription, createSegmentRow])
 
 	// Scroll to segment when navigated from SubtitlesTrack
 	useEffect(() => {
 		if (!selectedFile || selectedFile.scrollToSegmentIndex == null) return
-		if (segments.length === 0) return
+		if (segmentRows.length === 0) return
 
 		const targetIdx = selectedFile.scrollToSegmentIndex
 		const container = segmentsListRef.current
@@ -76,16 +102,16 @@ export const TranscriptionEditor: FunctionComponent<
 			source: selectedFile.source,
 			artifactType: selectedFile.artifactType,
 		})
-	}, [selectedFile?.scrollToSegmentIndex, segments.length])
+	}, [selectedFile?.scrollToSegmentIndex, segmentRows.length, setSelectedFile])
 
 	const updateSegment = useCallback(
-		(idx: number, field: keyof EditorSegment, value: string) => {
-			setSegments((prev) =>
-				prev.map((seg, i) => {
-					if (i !== idx) return seg
-					const updated = { ...seg, [field]: value }
+		(rowId: string, field: keyof EditorSegment, value: string) => {
+			setSegmentRows((prev) =>
+				prev.map((row) => {
+					if (row.id !== rowId) return row
+					const updated = { ...row.segment, [field]: value }
 					if (field === "text") updated.words = undefined
-					return updated
+					return { ...row, segment: updated }
 				}),
 			)
 			setDirty(true)
@@ -94,30 +120,38 @@ export const TranscriptionEditor: FunctionComponent<
 	)
 
 	const handleSplit = useCallback(
-		(idx: number, newSegments: EditorSegment[]) => {
-			setSegments((prev) => [
-				...prev.slice(0, idx),
-				...newSegments,
-				...prev.slice(idx + 1),
-			])
-			setSplittingIdx(null)
+		(rowId: string, newSegments: EditorSegment[]) => {
+			setSegmentRows((prev) => {
+				const targetIndex = prev.findIndex((row) => row.id === rowId)
+				if (targetIndex === -1) return prev
+				const nextRows = newSegments.map((segment) => createSegmentRow(segment))
+				return [
+					...prev.slice(0, targetIndex),
+					...nextRows,
+					...prev.slice(targetIndex + 1),
+				]
+			})
+			setSplittingRowId(null)
 			setDirty(true)
 		},
-		[],
+		[createSegmentRow],
 	)
 
 	const addSegment = useCallback(() => {
-		const lastEnd =
-			segments.length > 0 ? segments[segments.length - 1].endTime : "00:00.000"
-		setSegments((prev) => [
-			...prev,
-			{ startTime: lastEnd, endTime: lastEnd, text: "" },
-		])
+		setSegmentRows((prev) => {
+			const lastEnd =
+				prev.length > 0 ? prev[prev.length - 1].segment.endTime : "00:00.000"
+			return [
+				...prev,
+				createSegmentRow({ startTime: lastEnd, endTime: lastEnd, text: "" }),
+			]
+		})
 		setDirty(true)
-	}, [segments])
+	}, [createSegmentRow])
 
-	const removeSegment = useCallback((idx: number) => {
-		setSegments((prev) => prev.filter((_, i) => i !== idx))
+	const removeSegment = useCallback((rowId: string) => {
+		setSegmentRows((prev) => prev.filter((row) => row.id !== rowId))
+		setSplittingRowId((prev) => (prev === rowId ? null : prev))
 		setDirty(true)
 	}, [])
 
@@ -129,7 +163,11 @@ export const TranscriptionEditor: FunctionComponent<
 				"/api/transcribe/transcriptions/{transcription_id}/",
 				{
 					params: { path: { transcription_id: transcription.id } },
-					body: { document: segmentsToDocument(segments) },
+					body: {
+						document: segmentsToDocument(
+							segmentRows.map((row) => row.segment),
+						),
+					},
 				},
 			)
 			setDirty(false)
@@ -143,7 +181,7 @@ export const TranscriptionEditor: FunctionComponent<
 		} finally {
 			setSaving(false)
 		}
-	}, [transcription, segments, artifactId, queryClient])
+	}, [transcription, segmentRows, artifactId, queryClient])
 
 	// Auto-save when dirty (debounced)
 	useEffect(() => {
@@ -157,9 +195,14 @@ export const TranscriptionEditor: FunctionComponent<
 	/* Loading */
 	if (isLoading) {
 		return (
-			<div className={styles.root} data-testid="TranscriptionEditor">
-				<div className={styles.loader}>
+			<div
+				className={styles.root}
+				data-testid="TranscriptionEditor"
+				aria-busy="true"
+			>
+				<div className={styles.loader} role="status" aria-live="polite">
 					<LoaderCircle size={24} className={styles.spinner} />
+					<span className={styles.srOnly}>Загружаем транскрипцию</span>
 				</div>
 			</div>
 		)
@@ -175,89 +218,138 @@ export const TranscriptionEditor: FunctionComponent<
 	}
 
 	return (
-		<div className={styles.root} data-testid="TranscriptionEditor">
-			{/* Header */}
-			<div className={styles.header}>
-				<h3 className={styles.title}>Редактор транскрипции</h3>
+		<div
+			className={styles.root}
+			data-testid="TranscriptionEditor"
+			aria-busy={saving ? "true" : "false"}
+		>
+			<div className={styles.toolbar}>
+				<div className={styles.toolbarMeta}>
+					<p className={styles.toolbarTitle}>Сегменты</p>
+					<div className={styles.toolbarSummary}>
+						<span className={styles.segmentCount}>
+							{segmentRows.length}{" "}
+							{declOfNum(segmentRows.length, [
+								"сегмент",
+								"сегмента",
+								"сегментов",
+							])}
+						</span>
+						{visibleStatus ? (
+							<p className={styles.headerStatus}>{visibleStatus}</p>
+						) : null}
+					</div>
+				</div>
+				<button className={styles.addButton} onClick={addSegment} type="button">
+					<Plus size={16} />
+					<span>Добавить сегмент</span>
+				</button>
+				<span
+					className={styles.srOnly}
+					role="status"
+					aria-live="polite"
+					aria-atomic="true"
+				>
+					{visibleStatus ?? ""}
+				</span>
 			</div>
 
-			{/* Segments list */}
 			<div className={styles.segmentsList} ref={segmentsListRef}>
-				{segments.map((seg, idx) => (
-					<div key={idx} className={styles.segment} data-segment-index={idx}>
-						<div className={styles.segmentTimes}>
-							<div className={styles.timesGroup}>
-								<label className={styles.timeLabel}>
-									<span className={styles.timeLabelText}>Начало</span>
-									<input
-										className={styles.timeInput}
-										type="text"
-										value={seg.startTime}
-										onChange={(e) =>
-											updateSegment(idx, "startTime", e.target.value)
-										}
-										placeholder="00:00.000"
-									/>
-								</label>
-								<label className={styles.timeLabel}>
-									<span className={styles.timeLabelText}>Конец</span>
-									<input
-										className={styles.timeInput}
-										type="text"
-										value={seg.endTime}
-										onChange={(e) =>
-											updateSegment(idx, "endTime", e.target.value)
-										}
-										placeholder="00:00.000"
-									/>
-								</label>
+				{segmentRows.map((row, idx) => {
+					const textareaId = `${row.id}-text`
+					const splitDisabled = !row.segment.words || row.segment.words.length < 2
+
+					return (
+						<div
+							key={row.id}
+							className={styles.segment}
+							data-segment-index={idx}
+						>
+							<div className={styles.segmentNumber} aria-hidden="true">
+								{String(idx + 1).padStart(2, "0")}
 							</div>
-							<div className={styles.actionsGroup}>
-								<button
-									className={styles.splitButton}
-									onClick={() => setSplittingIdx(idx)}
-									title={
-										!seg.words || seg.words.length < 2
-											? "Нет данных о словах для разделения"
-											: "Разделить сегмент"
-									}
-									disabled={!seg.words || seg.words.length < 2}
-								>
-									<Scissors size={14} />
-								</button>
-								<button
-									className={styles.removeButton}
-									onClick={() => removeSegment(idx)}
-									title="Удалить сегмент"
-								>
-									<Trash2 size={14} />
-								</button>
+							<div className={styles.segmentMain}>
+								<div className={styles.segmentMetaRow}>
+									<div className={styles.timesGroup}>
+										<label className={styles.timeField}>
+											<span className={styles.timeLabelText}>Начало</span>
+											<input
+												className={styles.timeInput}
+												type="text"
+												value={row.segment.startTime}
+												onChange={(e) =>
+													updateSegment(row.id, "startTime", e.target.value)
+												}
+												placeholder="00:00.000"
+											/>
+										</label>
+										<label className={styles.timeField}>
+											<span className={styles.timeLabelText}>Конец</span>
+											<input
+												className={styles.timeInput}
+												type="text"
+												value={row.segment.endTime}
+												onChange={(e) =>
+													updateSegment(row.id, "endTime", e.target.value)
+												}
+												placeholder="00:00.000"
+											/>
+										</label>
+									</div>
+									<div className={styles.actionsGroup}>
+										<button
+											className={styles.splitButton}
+											onClick={() => setSplittingRowId(row.id)}
+											aria-label={
+												splitDisabled
+													? `Разделить сегмент ${idx + 1}: недоступно без разбивки по словам`
+													: `Разделить сегмент ${idx + 1}`
+											}
+											title={
+												splitDisabled
+													? "Нет данных о словах для разделения"
+													: "Разделить сегмент"
+											}
+											disabled={splitDisabled}
+											type="button"
+										>
+											<Scissors size={14} />
+										</button>
+										<button
+											className={styles.removeButton}
+											onClick={() => removeSegment(row.id)}
+											aria-label={`Удалить сегмент ${idx + 1}`}
+											title="Удалить сегмент"
+											type="button"
+										>
+											<Trash2 size={14} />
+										</button>
+									</div>
+								</div>
+								<label className={styles.srOnly} htmlFor={textareaId}>
+									Текст сегмента {idx + 1}
+								</label>
+								{splittingRowId === row.id ? (
+									<SegmentSplitter
+										segment={row.segment}
+										onSplit={(newSegs) => handleSplit(row.id, newSegs)}
+										onCancel={() => setSplittingRowId(null)}
+									/>
+								) : (
+									<textarea
+										id={textareaId}
+										className={styles.textArea}
+										value={row.segment.text}
+										onChange={(e) => updateSegment(row.id, "text", e.target.value)}
+										rows={2}
+										placeholder="Текст сегмента..."
+									/>
+								)}
 							</div>
 						</div>
-						{splittingIdx === idx ? (
-							<SegmentSplitter
-								segment={seg}
-								onSplit={(newSegs) => handleSplit(idx, newSegs)}
-								onCancel={() => setSplittingIdx(null)}
-							/>
-						) : (
-							<textarea
-								className={styles.textArea}
-								value={seg.text}
-								onChange={(e) => updateSegment(idx, "text", e.target.value)}
-								rows={2}
-								placeholder="Текст сегмента..."
-							/>
-						)}
-					</div>
-				))}
+					)
+				})}
 			</div>
-
-			{/* Add segment */}
-			<button className={styles.addButton} onClick={addSegment}>
-				<Plus size={16} />
-				<span>Добавить сегмент</span>
-			</button>
 		</div>
 	)
 }

src/features/project/UploadStep/UploadStep.module.scss

@@ -32,7 +32,7 @@
 
 .dropZoneActive {
 	border-color: variables.$color-primary;
-	background: rgba(var(--iris-a3), 0.08);
+	background: color-mix(in srgb, variables.$color-primary 10%, variables.$bg-surface);
 }
 
 .dropZoneUploading {

src/features/project/UploadStep/UploadStep.tsx

@@ -39,7 +39,7 @@ export const UploadStep: FunctionComponent<IUploadStepProps> = ({
 					`projects/${projectId}`,
 					setProgress,
 				)
-				setFileKey(result.file_path, result.file_url, result.filename ?? null)
+				setFileKey(result.file_path, result.file_id, result.filename ?? null)
 				markStepCompleted("upload")
 				goNext()
 			} catch {

src/features/project/VerifyStep/VerifyStep.tsx

@@ -34,7 +34,7 @@ import cs from "classnames"
 
 import api, { fetchClient } from "@shared/api"
 import { useWizard } from "@shared/context/WizardContext"
-import { useAppSelector } from "@shared/hooks/useAppSelector"
+import { useTaskProgressState } from "@shared/hooks/useTaskProgressState"
 import { Badge, Button, CircularProgress } from "@shared/ui"
 import { StaticLoader } from "@shared/ui/Loader"
 
@@ -135,28 +135,30 @@ export const VerifyStep: FunctionComponent<IVerifyStepProps> = ({
 		})
 	}, [convertMutation, primaryFileKey, projectId])
 
-	const convertNotification = useAppSelector((state) =>
-		convertJobId
-			? state.notifications.items.find((n) => n.job_id === convertJobId)
-			: null,
-	)
-
-	const convertProgressPct = convertNotification?.progress_pct ?? 0
-	const convertMessage = convertNotification?.message ?? "Конвертация видео..."
+	const {
+		progressPct: convertProgressPct,
+		message: convertMessage,
+		status: convertTaskStatus,
+		errorMessage: convertErrorMessage,
+	} = useTaskProgressState({
+		jobId: convertJobId,
+		enabled: !!convertJobId && convertStatus === "converting",
+		defaultMessage: "Конвертация видео...",
+	})
 
 	useEffect(() => {
 		if (!convertJobId || convertStatus !== "converting") return
 
-		if (convertNotification?.status === "DONE") {
+		if (convertTaskStatus === "DONE") {
 			fetchConvertedFileFromJob(convertJobId)
 		}
 
-		if (convertNotification?.status === "FAILED") {
+		if (convertTaskStatus === "FAILED") {
 			setActiveJob(null)
-			setConvertError(convertNotification?.message ?? "Ошибка конвертации")
+			setConvertError(convertErrorMessage ?? "Ошибка конвертации")
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [convertNotification, convertJobId, convertStatus])
+	}, [convertErrorMessage, convertJobId, convertStatus, convertTaskStatus])
 
 	const fetchConvertedFileFromJob = useCallback(
 		async (jobId: string) => {
@@ -165,13 +167,13 @@ export const VerifyStep: FunctionComponent<IVerifyStepProps> = ({
 				{ params: { path: { job_id: jobId } } },
 			)
 			const outputData = taskStatus?.output_data as {
+				file_id?: string
 				file_path?: string
-				file_url?: string
 			} | null
 
-			if (outputData?.file_path && outputData?.file_url) {
+			if (outputData?.file_id && outputData?.file_path) {
 				const convertedName = outputData.file_path.split("/").pop() ?? null
-				setFileKey(outputData.file_path, outputData.file_url, convertedName)
+				setFileKey(outputData.file_path, outputData.file_id, convertedName)
 				setActiveJob(null)
 			}
 		},
@@ -181,7 +183,7 @@ export const VerifyStep: FunctionComponent<IVerifyStepProps> = ({
 	/* ---- Handlers ---- */
 
 	const handleReplace = () => {
-		setFileKey("", "", null)
+		setFileKey(null, null, null)
 		goToStep("upload")
 	}
 

src/pages/ProjectWizardPage/ProjectWizardPage.module.scss

@@ -1,4 +1,12 @@
 .root {
+	display: flex;
 	width: 100%;
-	height: 100%;
+	height: calc(100vh - var(--header-height));
+	min-height: calc(100vh - var(--header-height));
+	overflow: hidden;
+
+	@include breakpoints.respond-to(breakpoints.$mobileMax) {
+		height: calc(100svh - var(--header-height));
+		min-height: calc(100svh - var(--header-height));
+	}
 }

src/pages/ProjectWizardPage/ProjectWizardPage.tsx

@@ -4,7 +4,7 @@ import type { IProjectWizardPageProps } from "./ProjectWizardPage.d"
 import type { JSX } from "react"
 
 import { useParams } from "next/navigation"
-import { FunctionComponent } from "react"
+import { FunctionComponent, useEffect } from "react"
 
 import api from "@shared/api"
 import { useBreadcrumbs } from "@shared/context/BreadcrumbsContext"
@@ -33,6 +33,14 @@ export const ProjectWizardPage: FunctionComponent<
 		{ label: project?.name ?? "..." },
 	])
 
+	useEffect(() => {
+		document.body.dataset.projectWizardLayout = "true"
+
+		return () => {
+			delete document.body.dataset.projectWizardLayout
+		}
+	}, [])
+
 	return (
 		<WorkspaceProvider projectId={projectId}>
 			<WizardProvider projectId={projectId}>

src/shared/api/__generated__/openapi.types.ts

@@ -21,6 +21,26 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/health/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Health
+         * @description Health check for Docker/K8s probes. Verifies DB connectivity.
+         */
+        get: operations["health_api_health__get"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/auth/register": {
         parameters: {
             query?: never;
@@ -268,6 +288,23 @@ export interface paths {
         patch: operations["patch_file_entry_api_files_files__file_id___patch"];
         trace?: never;
     };
+    "/api/files/files/{file_id}/resolve/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Resolve File Entry */
+        get: operations["resolve_file_entry_api_files_files__file_id__resolve__get"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/media/get_meta/": {
         parameters: {
             query?: never;
@@ -501,6 +538,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/transcribe/salute-speech/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Salute Speech Transcribe */
+        post: operations["salute_speech_transcribe_api_transcribe_salute_speech__post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/captions/get_video/": {
         parameters: {
             query?: never;
@@ -997,6 +1051,8 @@ export interface components {
              * @default
              */
             folder: string;
+            /** Project Id */
+            project_id?: string | null;
         };
         /** CaptionAnimationStyle */
         CaptionAnimationStyle: {
@@ -1277,6 +1333,11 @@ export interface components {
         };
         /** FileInfoResponse */
         FileInfoResponse: {
+            /**
+             * File Id
+             * Format: uuid
+             */
+            file_id: string;
             /** File Path */
             file_path: string;
             /** File Url */
@@ -1882,6 +1943,18 @@ export interface components {
                 [key: string]: unknown;
             } | null;
         };
+        /** SaluteSpeechParams */
+        SaluteSpeechParams: {
+            /** File Path */
+            file_path: string;
+            /** Language */
+            language?: string | null;
+            /**
+             * Model
+             * @default general
+             */
+            model: string;
+        };
         /** SegmentNode */
         "SegmentNode-Input": {
             /** Text */
@@ -2161,7 +2234,7 @@ export interface components {
              * @default LOCAL_WHISPER
              * @enum {string}
              */
-            engine: "LOCAL_WHISPER" | "GOOGLE_SPEECH_CLOUD";
+            engine: "LOCAL_WHISPER" | "GOOGLE_SPEECH_CLOUD" | "SALUTE_SPEECH";
             /** Language */
             language?: string | null;
             /** Document */
@@ -2227,7 +2300,7 @@ export interface components {
              * Engine
              * @enum {string}
              */
-            engine: "LOCAL_WHISPER" | "GOOGLE_SPEECH_CLOUD";
+            engine: "LOCAL_WHISPER" | "GOOGLE_SPEECH_CLOUD" | "SALUTE_SPEECH";
             /** Language */
             language: string | null;
             /** Document */
@@ -2500,6 +2573,28 @@ export interface operations {
             };
         };
     };
+    health_api_health__get: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        [key: string]: string;
+                    };
+                };
+            };
+        };
+    };
     register_auth_register_post: {
         parameters: {
             query?: never;
@@ -3203,6 +3298,37 @@ export interface operations {
             };
         };
     };
+    resolve_file_entry_api_files_files__file_id__resolve__get: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                file_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["FileInfoResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     get_meta_api_media_get_meta__get: {
         parameters: {
             query: {
@@ -3877,6 +4003,39 @@ export interface operations {
             };
         };
     };
+    salute_speech_transcribe_api_transcribe_salute_speech__post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["SaluteSpeechParams"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Document-Output"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     get_video_api_captions_get_video__post: {
         parameters: {
             query?: never;

src/shared/context/AppProviders.tsx

@@ -26,8 +26,8 @@ export const AppProviders = ({
 					<ThemeSync />
 					<BreadcrumbsProvider>
 						<Theme
-							accentColor="violet"
-							grayColor="sand"
+							accentColor="plum"
+							grayColor="mauve"
 							radius="medium"
 							scaling="100%"
 							appearance="inherit"

src/shared/context/WizardContext.tsx

@@ -21,18 +21,78 @@ import { useDebounce } from "@shared/hooks/useDebounce"
 /* ------------------------------------------------------------------ */
 
 export const WIZARD_STEPS = [
-	{ key: "upload", label: "Загрузка" },
-	{ key: "verify", label: "Проверка" },
-	{ key: "silence-settings", label: "Настройка удаления тишины" },
-	{ key: "processing", label: "Обработка" },
-	{ key: "fragments", label: "Редактирование фрагментов" },
-	{ key: "silence-apply-processing", label: "Обработка" },
-	{ key: "transcription-settings", label: "Настройка транскрибации" },
-	{ key: "transcription-processing", label: "Обработка" },
-	{ key: "subtitle-revision", label: "Редактирование транскрибации" },
-	{ key: "caption-settings", label: "Настройка субтитров" },
-	{ key: "caption-processing", label: "Обработка" },
-	{ key: "caption-result", label: "Результат" },
+	{
+		key: "upload",
+		label: "Загрузка",
+		shortLabel: "Загрузка",
+		phaseLabel: "Загрузка файла",
+	},
+	{
+		key: "verify",
+		label: "Проверка",
+		shortLabel: "Проверка",
+		phaseLabel: "Загрузка файла",
+	},
+	{
+		key: "silence-settings",
+		label: "Настройка",
+		shortLabel: "Настройка",
+		phaseLabel: "Удаление тишины",
+	},
+	{
+		key: "processing",
+		label: "Обработка",
+		shortLabel: "Обработка",
+		phaseLabel: "Удаление тишины",
+	},
+	{
+		key: "fragments",
+		label: "Настройка вырезок",
+		shortLabel: "Вырезки",
+		phaseLabel: "Удаление тишины",
+	},
+	{
+		key: "silence-apply-processing",
+		label: "Применение вырезок",
+		shortLabel: "Применение",
+		phaseLabel: "Удаление тишины",
+	},
+	{
+		key: "transcription-settings",
+		label: "Настройка",
+		shortLabel: "Настройка",
+		phaseLabel: "Транскрибация",
+	},
+	{
+		key: "transcription-processing",
+		label: "Обработка",
+		shortLabel: "Обработка",
+		phaseLabel: "Транскрибация",
+	},
+	{
+		key: "subtitle-revision",
+		label: "Правка текста",
+		shortLabel: "Правка",
+		phaseLabel: "Транскрибация",
+	},
+	{
+		key: "caption-settings",
+		label: "Выбор стиля субтитров",
+		shortLabel: "Стиль",
+		phaseLabel: "Рендер",
+	},
+	{
+		key: "caption-processing",
+		label: "Рендер",
+		shortLabel: "Рендер",
+		phaseLabel: "Рендер",
+	},
+	{
+		key: "caption-result",
+		label: "Результат",
+		shortLabel: "Результат",
+		phaseLabel: "Рендер",
+	},
 ] as const
 
 export type WizardStepKey = (typeof WIZARD_STEPS)[number]["key"]
@@ -97,6 +157,7 @@ interface WizardContextValue {
 	currentStep: WizardStepKey
 	stepIndex: number
 	completedSteps: WizardStepKey[]
+	primaryFileId: string | null
 	primaryFileKey: string | null
 	videoUrl: string | null
 	originalFileName: string | null
@@ -113,8 +174,8 @@ interface WizardContextValue {
 	goNext: () => void
 	goBack: () => void
 	setFileKey: (
-		key: string,
-		url: string,
+		key: string | null,
+		fileId: string | null,
 		originalFileName?: string | null,
 	) => void
 	setSilenceSettings: (settings: SilenceSettings) => void
@@ -143,8 +204,8 @@ const WizardContext = createContext<WizardContextValue | null>(null)
 interface PersistedWizardState {
 	current_step: WizardStepKey
 	completed_steps: WizardStepKey[]
+	primary_file_id: string | null
 	primary_file_key: string | null
-	video_url: string | null
 	original_file_name: string | null
 	silence_settings: SilenceSettings
 	active_job_id: string | null
@@ -175,8 +236,8 @@ export const WizardProvider: FunctionComponent<{
 }> = ({ projectId, children }) => {
 	const [currentStep, setCurrentStep] = useState<WizardStepKey>("upload")
 	const [completedSteps, setCompletedSteps] = useState<WizardStepKey[]>([])
+	const [primaryFileId, setPrimaryFileId] = useState<string | null>(null)
 	const [primaryFileKey, setPrimaryFileKey] = useState<string | null>(null)
-	const [videoUrl, setVideoUrl] = useState<string | null>(null)
 	const [originalFileName, setOriginalFileName] = useState<string | null>(null)
 	const [silenceSettings, setSilenceSettingsState] = useState<SilenceSettings>(
 		DEFAULT_SILENCE_SETTINGS,
@@ -231,8 +292,8 @@ export const WizardProvider: FunctionComponent<{
 				),
 			)
 			setCompletedSteps(wizard.completed_steps ?? [])
+			setPrimaryFileId(wizard.primary_file_id ?? null)
 			setPrimaryFileKey(wizard.primary_file_key ?? null)
-			setVideoUrl(wizard.video_url ?? null)
 			setOriginalFileName(wizard.original_file_name ?? null)
 			setSilenceSettingsState(
 				wizard.silence_settings ?? DEFAULT_SILENCE_SETTINGS,
@@ -251,14 +312,23 @@ export const WizardProvider: FunctionComponent<{
 		isInitializedRef.current = true
 	}, [isSuccess, project])
 
+	const { data: primaryFileInfo } = api.useQuery(
+		"get",
+		"/api/files/files/{file_id}/resolve/",
+		{ params: { path: { file_id: primaryFileId ?? "" } } },
+		{ enabled: !!primaryFileId },
+	)
+
+	const videoUrl = primaryFileInfo?.file_url ?? null
+
 	/* ---- Save to server (debounced) ---- */
 
 	const stateToSave = useMemo<PersistedWizardState>(
 		() => ({
 			current_step: currentStep,
 			completed_steps: completedSteps,
+			primary_file_id: primaryFileId,
 			primary_file_key: primaryFileKey,
-			video_url: videoUrl,
 			original_file_name: originalFileName,
 			silence_settings: silenceSettings,
 			active_job_id: activeJobId,
@@ -273,8 +343,8 @@ export const WizardProvider: FunctionComponent<{
 		[
 			currentStep,
 			completedSteps,
+			primaryFileId,
 			primaryFileKey,
-			videoUrl,
 			originalFileName,
 			silenceSettings,
 			activeJobId,
@@ -296,8 +366,8 @@ export const WizardProvider: FunctionComponent<{
 		(overrides: Partial<PersistedWizardState> = {}): PersistedWizardState => ({
 			current_step: overrides.current_step ?? currentStep,
 			completed_steps: overrides.completed_steps ?? completedSteps,
+			primary_file_id: overrides.primary_file_id ?? primaryFileId,
 			primary_file_key: overrides.primary_file_key ?? primaryFileKey,
-			video_url: overrides.video_url ?? videoUrl,
 			original_file_name: overrides.original_file_name ?? originalFileName,
 			silence_settings: overrides.silence_settings ?? silenceSettings,
 			active_job_id: overrides.active_job_id ?? activeJobId,
@@ -323,11 +393,11 @@ export const WizardProvider: FunctionComponent<{
 			completedSteps,
 			currentStep,
 			originalFileName,
+			primaryFileId,
 			primaryFileKey,
 			silenceJobId,
 			silenceSettings,
 			transcriptionArtifactId,
-			videoUrl,
 		],
 	)
 
@@ -422,16 +492,20 @@ export const WizardProvider: FunctionComponent<{
 			setCurrentStep("fragments")
 		} else if (activeJobType === "SILENCE_APPLY") {
 			const outputData = taskStatus?.output_data as
-				| { file_path?: string; file_url?: string }
+				| { file_id?: string; file_path?: string }
 				| null
 				| undefined
 
-			if (taskStatus?.status !== "DONE" || !outputData?.file_path || !outputData?.file_url) {
+			if (
+				taskStatus?.status !== "DONE" ||
+				!outputData?.file_id ||
+				!outputData?.file_path
+			) {
 				return
 			}
 
+			setPrimaryFileId(outputData.file_id)
 			setPrimaryFileKey(outputData.file_path)
-			setVideoUrl(outputData.file_url)
 			setOriginalFileName(outputData.file_path.split("/").pop() ?? null)
 			setSilenceJobIdState(null)
 			setActiveJobId(null)
@@ -499,9 +573,9 @@ export const WizardProvider: FunctionComponent<{
 	}, [currentStep])
 
 	const setFileKey = useCallback(
-		(key: string, url: string, fileName?: string | null) => {
+		(key: string | null, fileId: string | null, fileName?: string | null) => {
+			setPrimaryFileId(fileId)
 			setPrimaryFileKey(key)
-			setVideoUrl(url)
 			if (fileName !== undefined) {
 				setOriginalFileName(fileName)
 			}
@@ -589,6 +663,7 @@ export const WizardProvider: FunctionComponent<{
 			currentStep,
 			stepIndex,
 			completedSteps,
+			primaryFileId,
 			primaryFileKey,
 			videoUrl,
 			originalFileName,
@@ -621,6 +696,7 @@ export const WizardProvider: FunctionComponent<{
 			currentStep,
 			stepIndex,
 			completedSteps,
+			primaryFileId,
 			primaryFileKey,
 			videoUrl,
 			originalFileName,

src/shared/hooks/useTaskProgressState.ts

@@ -0,0 +1,52 @@
+import api from "@shared/api"
+import { useAppSelector } from "@shared/hooks/useAppSelector"
+import { resolveTaskProgressState } from "@shared/lib/taskProgress"
+
+interface UseTaskProgressStateArgs {
+	jobId: string | null
+	enabled: boolean
+	defaultMessage: string
+}
+
+export function useTaskProgressState({
+	jobId,
+	enabled,
+	defaultMessage,
+}: UseTaskProgressStateArgs): {
+	progressPct: number
+	message: string
+	status: string | null
+	errorMessage: string | null
+} {
+	const notification = useAppSelector((state) =>
+		jobId
+			? state.notifications.items.find((n) => n.job_id === jobId)
+			: null,
+	)
+
+	const { data: taskStatus } = api.useQuery(
+		"get",
+		"/api/tasks/status/{job_id}/",
+		{ params: { path: { job_id: jobId ?? "" } } },
+		{
+			enabled,
+			refetchInterval: 2000,
+		},
+	)
+
+	const resolvedState = resolveTaskProgressState({
+		notificationMessage: notification?.message,
+		notificationProgressPct: notification?.progress_pct,
+		taskMessage: taskStatus?.current_message,
+		taskProgressPct: taskStatus?.progress_pct,
+		defaultMessage,
+	})
+
+	return {
+		progressPct: resolvedState.progressPct,
+		message: resolvedState.message,
+		status: notification?.status ?? taskStatus?.status ?? null,
+		errorMessage:
+			notification?.message ?? taskStatus?.error_message ?? null,
+	}
+}

src/shared/lib/dates.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test"
+
+import { formatNotificationRelativeTime } from "./dates"
+
+describe("formatNotificationRelativeTime", () => {
+	test("returns 'только что' for less than a minute", () => {
+		expect(
+			formatNotificationRelativeTime("2026-04-05T11:59:31.000Z", {
+				now: new Date("2026-04-05T12:00:00.000Z"),
+			}),
+		).toBe("только что")
+	})
+
+	test("returns minutes without suffix", () => {
+		expect(
+			formatNotificationRelativeTime("2026-04-05T11:48:00.000Z", {
+				now: new Date("2026-04-05T12:00:00.000Z"),
+			}),
+		).toBe("12мин")
+	})
+
+	test("returns hours without suffix", () => {
+		expect(
+			formatNotificationRelativeTime("2026-04-05T08:00:00.000Z", {
+				now: new Date("2026-04-05T12:00:00.000Z"),
+			}),
+		).toBe("4ч")
+	})
+
+	test("returns days without suffix", () => {
+		expect(
+			formatNotificationRelativeTime("2026-04-02T12:00:00.000Z", {
+				now: new Date("2026-04-05T12:00:00.000Z"),
+			}),
+		).toBe("3д")
+	})
+
+	test("returns weeks without suffix", () => {
+		expect(
+			formatNotificationRelativeTime("2026-03-22T12:00:00.000Z", {
+				now: new Date("2026-04-05T12:00:00.000Z"),
+			}),
+		).toBe("2нед")
+	})
+})

src/shared/lib/dates.ts

@@ -9,3 +9,33 @@ export function formatRelativeTime(date: string | Date | null): string {
 	if (!date) return ""
 	return formatDistanceToNow(new Date(date), { addSuffix: true, locale: ru })
 }
+
+interface NotificationRelativeTimeOptions {
+	now?: Date
+}
+
+export function formatNotificationRelativeTime(
+	date: string | Date | null,
+	options: NotificationRelativeTimeOptions = {},
+): string {
+	if (!date) return ""
+
+	const targetDate = new Date(date)
+
+	if (Number.isNaN(targetDate.getTime())) return ""
+
+	const now = options.now ?? new Date()
+	const diffMs = Math.max(0, now.getTime() - targetDate.getTime())
+	const diffMinutes = Math.floor(diffMs / (1000 * 60))
+
+	if (diffMinutes < 1) return "только что"
+	if (diffMinutes < 60) return `${diffMinutes}мин`
+
+	const diffHours = Math.floor(diffMinutes / 60)
+	if (diffHours < 24) return `${diffHours}ч`
+
+	const diffDays = Math.floor(diffHours / 24)
+	if (diffDays < 7) return `${diffDays}д`
+
+	return `${Math.floor(diffDays / 7)}нед`
+}

src/shared/lib/russianNoun.ts

@@ -0,0 +1,12 @@
+export function declOfNum(
+	number: number,
+	titles: [string, string, string],
+): string {
+	const cases = [2, 0, 1, 1, 1, 2]
+
+	return titles[
+		number % 100 > 4 && number % 100 < 20
+			? 2
+			: cases[number % 10 < 5 ? number % 10 : 5]
+	]
+}

src/shared/lib/taskProgress.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, test } from "bun:test"
+
+import { resolveTaskProgressState } from "./taskProgress"
+
+describe("resolveTaskProgressState", () => {
+	test("prefers the polled task status when it is ahead of notifications", () => {
+		expect(
+			resolveTaskProgressState({
+				notificationMessage: "Конвертация видео",
+				notificationProgressPct: 24,
+				taskMessage: "Загрузка результата",
+				taskProgressPct: 95,
+				defaultMessage: "Конвертация видео...",
+			}),
+		).toEqual({
+			progressPct: 95,
+			message: "Загрузка результата",
+		})
+	})
+
+	test("falls back to notification state when it is the freshest source", () => {
+		expect(
+			resolveTaskProgressState({
+				notificationMessage: "Применение вырезок",
+				notificationProgressPct: 52.5,
+				taskMessage: "Применение вырезок",
+				taskProgressPct: 10,
+				defaultMessage: "Применение вырезок...",
+			}),
+		).toEqual({
+			progressPct: 52.5,
+			message: "Применение вырезок",
+		})
+	})
+
+	test("uses the default message when no progress source is available", () => {
+		expect(
+			resolveTaskProgressState({
+				notificationMessage: null,
+				notificationProgressPct: null,
+				taskMessage: null,
+				taskProgressPct: null,
+				defaultMessage: "Подождите, идёт обработка...",
+			}),
+		).toEqual({
+			progressPct: 0,
+			message: "Подождите, идёт обработка...",
+		})
+	})
+})

src/shared/lib/taskProgress.ts

@@ -0,0 +1,54 @@
+interface ResolveTaskProgressStateArgs {
+	notificationMessage: string | null | undefined
+	notificationProgressPct: number | null | undefined
+	taskMessage: string | null | undefined
+	taskProgressPct: number | null | undefined
+	defaultMessage: string
+}
+
+export function resolveTaskProgressState({
+	notificationMessage,
+	notificationProgressPct,
+	taskMessage,
+	taskProgressPct,
+	defaultMessage,
+}: ResolveTaskProgressStateArgs): {
+	progressPct: number
+	message: string
+} {
+	const notificationPct = notificationProgressPct ?? null
+	const statusPct = taskProgressPct ?? null
+
+	if (notificationPct !== null && statusPct !== null) {
+		if (statusPct > notificationPct) {
+			return {
+				progressPct: statusPct,
+				message: taskMessage ?? notificationMessage ?? defaultMessage,
+			}
+		}
+
+		return {
+			progressPct: notificationPct,
+			message: notificationMessage ?? taskMessage ?? defaultMessage,
+		}
+	}
+
+	if (notificationPct !== null) {
+		return {
+			progressPct: notificationPct,
+			message: notificationMessage ?? taskMessage ?? defaultMessage,
+		}
+	}
+
+	if (statusPct !== null) {
+		return {
+			progressPct: statusPct,
+			message: taskMessage ?? notificationMessage ?? defaultMessage,
+		}
+	}
+
+	return {
+		progressPct: 0,
+		message: notificationMessage ?? taskMessage ?? defaultMessage,
+	}
+}

src/shared/styles/_variables.scss

@@ -28,6 +28,11 @@ $color-primary: var(--color-primary);
 $color-secondary: var(--color-secondary);
 $color-white: var(--color-white);
 $color-black: var(--color-black);
+$accent-solid-start: var(--accent-solid-start);
+$accent-solid-end: var(--accent-solid-end);
+$accent-foreground: var(--accent-foreground);
+$accent-shadow: var(--accent-shadow);
+$accent-shadow-hover: var(--accent-shadow-hover);
 
 $header-height: var(--header-height);
 $text-primary: var(--text-primary);

src/shared/styles/global.scss

@@ -13,16 +13,51 @@
 	font-variation-settings: "opsz" 10;
 }
 
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--border-default) transparent;
+}
+
+*::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+*::-webkit-scrollbar-thumb {
+	background: var(--border-default);
+	border-radius: 999px;
+}
+
+*::-webkit-scrollbar-track {
+	background: transparent;
+}
+
 body {
 	background-color: var(--bg-canvas);
-	background-image: radial-gradient(circle at 50% 0%, rgba(110, 94, 219, 0.05) 0%, transparent 60%);
-	background-attachment: fixed;
-  color: var(--text-primary);
+	color: var(--text-primary);
+}
+
+body::before {
+	content: "";
+	position: fixed;
+	inset: 0;
+	background-image: var(--page-glow);
+	pointer-events: none;
+	z-index: -1;
+}
+
+body[data-project-wizard-layout="true"] {
+	overflow: hidden;
+}
+
+body[data-project-wizard-layout="true"] #app-root {
+	height: 100vh;
+	overflow: hidden;
 }
 
 ::selection {
-	background-color: hsl(262, 68%, 52%, 0.15);
-	color: var(--text-primary);
+	background-color: var(--selection-bg);
+	color: var(--selection-text);
 }
 
 a {
@@ -34,61 +69,69 @@ button {
 }
 
 :root {
-	  /* Rich Violet Palette */
-  --purple-50:  hsl(262, 60%, 97%);
-  --purple-100: hsl(262, 50%, 90%);
-  --purple-200: hsl(262, 48%, 80%);
-  --purple-300: hsl(262, 55%, 68%);
-  --purple-400: hsl(262, 70%, 54%);
-  --purple-500: hsl(262, 75%, 48%);
-  --purple-600: hsl(262, 78%, 42%);
-  --purple-700: hsl(262, 80%, 36%);
-  --purple-800: hsl(262, 85%, 28%);
-  --purple-900: hsl(262, 90%, 20%);
+	/* Catppuccin Latte */
+	--purple-50: #f7efff;
+	--purple-100: #eedfff;
+	--purple-200: #dfc8ff;
+	--purple-300: #c8abff;
+	--purple-400: #a777f2;
+	--purple-500: #8839ef;
+	--purple-600: #7430ca;
+	--purple-700: #5f27a5;
+	--purple-800: #4a1f80;
+	--purple-900: #35175c;
 
-  /* Muted Sage Green Palette */
-  --green-50:  hsl(150, 30%, 94%);
-  --green-100: hsl(150, 28%, 85%);
-  --green-200: hsl(150, 26%, 74%);
-  --green-300: hsl(150, 28%, 62%);
-  --green-400: hsl(150, 32%, 52%);
-  --green-500: hsl(150, 40%, 42%);
-  --green-600: hsl(152, 44%, 36%);
-  --green-700: hsl(154, 50%, 30%);
-  --green-800: hsl(156, 56%, 24%);
-  --green-900: hsl(158, 64%, 18%);
+	--green-50: #eff8ea;
+	--green-100: #dcefd2;
+	--green-200: #c7e5b9;
+	--green-300: #afd89d;
+	--green-400: #7fc16c;
+	--green-500: #40a02b;
+	--green-600: #348222;
+	--green-700: #28651a;
+	--green-800: #1d4912;
+	--green-900: #122d0a;
 
-  --color-success: #16a34a;
-  --color-danger: #dc2626;
-  --color-warning: #d97706;
+	--color-success: #40a02b;
+	--color-danger: #d20f39;
+	--color-warning: #df8e1d;
 
 	--color-primary: var(--purple-500);
 	--color-secondary: var(--purple-400);
 	--color-white: #ffffff;
 	--color-black: #000000;
-  --text-primary: #18181b;
-  --text-secondary: #71717a;
-  --text-tertiary: #a1a1aa;
+	--text-primary: #4c4f69;
+	--text-secondary: #5c5f77;
+	--text-tertiary: #8c8fa1;
 
-  --bg-canvas: #fafafa;
-  --bg-default: #ffffff;
-  --bg-surface: #f4f4f5;
-  --bg-hover: #e4e4e7;
-  --bg-default-invert: #18181b;
+	--bg-canvas: #e6e9ef;
+	--bg-default: #eff1f5;
+	--bg-surface: #dce0e8;
+	--bg-hover: #ccd0da;
+	--bg-default-invert: #1e1e2e;
 
-  --border-default: #e8e8ec;
-  --border-subtle: #f4f4f5;
+	--border-default: #bcc0cc;
+	--border-subtle: #dce0e8;
 
-  --waveform-wave: var(--purple-400);
-  --waveform-progress: var(--purple-600);
+	--waveform-wave: #7287fd;
+	--waveform-progress: #8839ef;
+	--accent-solid-start: #a777f2;
+	--accent-solid-end: #7430ca;
+	--accent-foreground: #ffffff;
+	--accent-shadow: rgba(136, 57, 239, 0.28);
+	--accent-shadow-hover: rgba(136, 57, 239, 0.38);
 
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.02);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 24px 48px -12px rgba(0, 0, 0, 0.05);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 40px 80px -20px rgba(0, 0, 0, 0.08);
+	--page-glow: radial-gradient(circle at 50% 0%, rgba(136, 57, 239, 0.08) 0%, transparent 62%);
+	--selection-bg: rgba(136, 57, 239, 0.18);
+	--selection-text: #4c4f69;
 
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 16px;
+	--shadow-sm: 0 1px 2px rgba(76, 79, 105, 0.06), 0 2px 8px rgba(76, 79, 105, 0.04);
+	--shadow-md: 0 4px 6px -1px rgba(76, 79, 105, 0.08), 0 24px 48px -12px rgba(76, 79, 105, 0.1);
+	--shadow-lg: 0 10px 15px -3px rgba(76, 79, 105, 0.08), 0 40px 80px -20px rgba(76, 79, 105, 0.12);
+
+	--radius-sm: 8px;
+	--radius-md: 12px;
+	--radius-lg: 16px;
 
 	--header-height: 56px;
 
@@ -99,51 +142,96 @@ button {
 	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 
-	/* Focus ring */
-	--focus-ring: 0 0 0 2px var(--bg-default), 0 0 0 4px hsla(262, 75%, 48%, 0.3);
+	--alert-info-bg: rgba(4, 165, 229, 0.12);
+	--alert-info-text: #1e66f5;
+	--alert-info-border: rgba(4, 165, 229, 0.28);
+	--alert-success-bg: rgba(64, 160, 43, 0.12);
+	--alert-success-text: #28651a;
+	--alert-success-border: rgba(64, 160, 43, 0.26);
+	--alert-warning-bg: rgba(223, 142, 29, 0.14);
+	--alert-warning-text: #b06a12;
+	--alert-warning-border: rgba(223, 142, 29, 0.28);
+	--alert-danger-bg: rgba(210, 15, 57, 0.12);
+	--alert-danger-text: #b10f34;
+	--alert-danger-border: rgba(210, 15, 57, 0.24);
+
+	--focus-ring: 0 0 0 2px var(--bg-default), 0 0 0 4px rgba(136, 57, 239, 0.24);
 }
 
 [data-theme="dark"] {
+	/* Catppuccin Mocha */
+	--purple-50: #2b253b;
+	--purple-100: #362f4c;
+	--purple-200: #4b4168;
+	--purple-300: #6a5a93;
+	--purple-400: #cba6f7;
+	--purple-500: #d9bcfa;
+	--purple-600: #e4cffc;
+	--purple-700: #eddfff;
+	--purple-800: #f3ebff;
+	--purple-900: #faf6ff;
+
+	--green-50: #1d2b1d;
+	--green-100: #243524;
+	--green-200: #314a31;
+	--green-300: #426542;
+	--green-400: #679d64;
+	--green-500: #8ccf86;
+	--green-600: #a6e3a1;
+	--green-700: #b9ebae;
+	--green-800: #cdf2c8;
+	--green-900: #e0f8e1;
+
+	--color-success: #a6e3a1;
+	--color-danger: #f38ba8;
+	--color-warning: #f9e2af;
+
 	--color-primary: var(--purple-400);
 	--color-secondary: var(--purple-300);
 
-	--text-primary: #fdfdfd;
-	--text-secondary: #a1a1aa;
-	--text-tertiary: #71717a;
+	--text-primary: #cdd6f4;
+	--text-secondary: #bac2de;
+	--text-tertiary: #9399b2;
 
-	--bg-canvas: #050505;
-	--bg-default: #0a0a0a;
-	--bg-surface: #141414;
-	--bg-hover: #1f1f23;
-	--bg-default-invert: #fafafa;
+	--bg-canvas: #11111b;
+	--bg-default: #1e1e2e;
+	--bg-surface: #313244;
+	--bg-hover: #45475a;
+	--bg-default-invert: #eff1f5;
 
-	--border-default: #27272a;
-	--border-subtle: #18181b;
+	--border-default: #45475a;
+	--border-subtle: #313244;
 
-	--waveform-wave: #e4e4e7;
-	--waveform-progress: #a1a1aa;
+	--waveform-wave: #6c7086;
+	--waveform-progress: #cba6f7;
+	--accent-solid-start: #6a5a93;
+	--accent-solid-end: #362f4c;
+	--accent-foreground: #f5e0dc;
+	--accent-shadow: rgba(203, 166, 247, 0.22);
+	--accent-shadow-hover: rgba(203, 166, 247, 0.3);
 
-	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 24px 48px -12px rgba(0, 0, 0, 0.4);
-	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 40px 80px -20px rgba(0, 0, 0, 0.6);
+	--page-glow: radial-gradient(circle at 50% 0%, rgba(203, 166, 247, 0.12) 0%, transparent 55%);
+	--selection-bg: rgba(203, 166, 247, 0.2);
+	--selection-text: #f5e0dc;
 
-	/* Alert dark mode overrides */
-	--alert-info-bg: hsl(204, 50%, 18%);
-	--alert-info-text: hsl(204, 70%, 72%);
-	--alert-info-border: hsl(204, 50%, 28%);
-	--alert-success-bg: hsl(144, 40%, 16%);
-	--alert-success-text: hsl(142, 55%, 68%);
-	--alert-success-border: hsl(142, 40%, 26%);
-	--alert-warning-bg: hsl(45, 50%, 16%);
-	--alert-warning-text: hsl(48, 70%, 68%);
-	--alert-warning-border: hsl(48, 50%, 28%);
-	--alert-danger-bg: hsl(0, 50%, 18%);
-	--alert-danger-text: hsl(0, 60%, 72%);
-	--alert-danger-border: hsl(0, 40%, 30%);
-}
+	--shadow-sm: 0 1px 2px rgba(17, 17, 27, 0.5);
+	--shadow-md: 0 4px 6px -1px rgba(17, 17, 27, 0.58), 0 24px 48px -12px rgba(17, 17, 27, 0.52);
+	--shadow-lg: 0 10px 15px -3px rgba(17, 17, 27, 0.6), 0 40px 80px -20px rgba(17, 17, 27, 0.7);
 
-[data-theme="dark"] body {
-	background-image: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
+	--alert-info-bg: rgba(137, 220, 235, 0.14);
+	--alert-info-text: #89dceb;
+	--alert-info-border: rgba(137, 220, 235, 0.28);
+	--alert-success-bg: rgba(166, 227, 161, 0.14);
+	--alert-success-text: #a6e3a1;
+	--alert-success-border: rgba(166, 227, 161, 0.3);
+	--alert-warning-bg: rgba(249, 226, 175, 0.14);
+	--alert-warning-text: #f9e2af;
+	--alert-warning-border: rgba(249, 226, 175, 0.28);
+	--alert-danger-bg: rgba(243, 139, 168, 0.16);
+	--alert-danger-text: #f38ba8;
+	--alert-danger-border: rgba(243, 139, 168, 0.3);
+
+	--focus-ring: 0 0 0 2px var(--bg-default), 0 0 0 4px rgba(203, 166, 247, 0.3);
 }
 
 @media (prefers-reduced-motion: reduce) {

src/shared/ui/Badge/Badge.tsx

@@ -7,7 +7,7 @@ import { Badge as RadixBadge } from "@radix-ui/themes"
 import { forwardRef } from "react"
 
 const variantMap = {
-	primary: "violet",
+	primary: "plum",
 	secondary: "gray",
 	success: "green",
 	danger: "red",

src/shared/ui/Button/Button.module.scss

@@ -14,7 +14,7 @@
 
         &:hover:not(:disabled) {
             filter: brightness(1.08);
-            box-shadow: inset 0 1px 1px hsla(0,0%,100%,0.2), 0 4px 14px hsla(262, 75%, 48%, 0.35);
+            box-shadow: inset 0 1px 1px hsla(0,0%,100%,0.2), 0 4px 14px var(--accent-shadow-hover);
         }
 
         &:active:not(:disabled) {

src/shared/ui/Button/Button.tsx

@@ -21,8 +21,8 @@ const sizeMap = {
 } as const
 
 const variantMap = {
-	primary: { variant: "solid", color: "violet" },
-	secondary: { variant: "soft", color: "violet" },
+	primary: { variant: "solid", color: "plum" },
+	secondary: { variant: "soft", color: "plum" },
 	outline: { variant: "outline", color: "gray" },
 	ghost: { variant: "ghost", color: "gray" },
 	danger: { variant: "solid", color: "ruby" },

src/shared/ui/Card/Card.module.scss

@@ -1,12 +1,11 @@
 .card {
-	background-color: hsla(0, 0%, 100%, 0.8);
-	backdrop-filter: blur(16px) saturate(180%);
+	background-color: color-mix(in srgb, var(--bg-default) 92%, transparent);
 	border-radius: var(--radius-lg);
 	box-shadow: var(--shadow-sm);
 	padding: 1.5rem;
-    border: 1px solid var(--border-subtle);
+	border: 1px solid var(--border-subtle);
 
-    [data-theme="dark"] & {
-        background-color: hsla(240, 2%, 10%, 0.5);
-    }
-}
+	[data-theme="dark"] & {
+		background-color: color-mix(in srgb, var(--bg-default) 85%, transparent);
+	}
+}

src/shared/ui/Modal/Modal.tsx

@@ -43,7 +43,7 @@ export const Modal = ({
 		className={CONTENT_CLASS}
 		style={maxWidth ? { content: { maxWidth } } : undefined}
 	>
-		<Theme accentColor="iris" grayColor="slate" appearance="inherit">
+		<Theme accentColor="plum" grayColor="mauve" appearance="inherit">
 			{title && <h2 className={styles.title}>{title}</h2>}
 			{description && (
 				<p className={styles.description}>{description}</p>

src/shared/ui/Stepper/Stepper.d.ts

@@ -1,6 +1,8 @@
 export interface StepDefinition {
 	key: string
 	label: string
+	shortLabel?: string
+	phaseLabel?: string
 }
 
 export interface IStepperProps {

src/shared/ui/Stepper/Stepper.module.scss

@@ -1,6 +1,10 @@
+/* ------------------------------------------------------------------ */
+/*  Root & scroll chrome                                                */
+/* ------------------------------------------------------------------ */
+
 .root {
 	position: relative;
-	background: variables.$bg-surface;
+	background: variables.$bg-default;
 	border-bottom: 1px solid variables.$border-subtle;
 }
 
@@ -11,25 +15,22 @@
 	bottom: 0;
 	width: 48px;
 	pointer-events: none;
-	z-index: 1;
+	z-index: 2;
 }
 
 .fadeLeft {
 	left: 0;
-	background: linear-gradient(to right, variables.$bg-surface, transparent);
+	background: linear-gradient(to right, variables.$bg-default, transparent);
 }
 
 .fadeRight {
 	right: 0;
-	background: linear-gradient(to left, variables.$bg-surface, transparent);
+	background: linear-gradient(to left, variables.$bg-default, transparent);
 }
 
 .scrollContainer {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	padding: 16px 48px;
 	overflow-x: auto;
+	padding: 12px 20px;
 	scrollbar-width: none;
 
 	&::-webkit-scrollbar {
@@ -37,94 +38,176 @@
 	}
 }
 
-.stepContainer {
+/* ------------------------------------------------------------------ */
+/*  Phase row                                                           */
+/* ------------------------------------------------------------------ */
+
+.phases {
 	display: flex;
 	align-items: center;
-	gap: 6px;
-	flex-shrink: 0;
+	min-width: max-content;
+	justify-content: center;
 }
 
-.step {
+/* ------------------------------------------------------------------ */
+/*  Phase (shared)                                                      */
+/* ------------------------------------------------------------------ */
+
+.phase {
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	padding: 6px 16px 6px 6px;
-	border-radius: 32px;
-	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	border: 1px solid transparent;
+	flex-shrink: 0;
+	padding: 4px 4px;
+	border-radius: variables.$radius-sm;
+	white-space: nowrap;
+	transition: background-color var(--duration-normal) var(--ease-out);
 }
 
-.stepActive {
-	background: variables.$color-primary;
-	border-color: variables.$color-primary;
-	box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
+/* ------------------------------------------------------------------ */
+/*  Indicator circle                                                    */
+/* ------------------------------------------------------------------ */
 
-	.number {
-		background: rgba(255, 255, 255, 0.25);
-		color: #fff;
-	}
-
-	.label {
-		color: #fff;
-		font-weight: 600;
-	}
-}
-
-.stepCompleted {
-	background: variables.$bg-hover;
-	border-color: variables.$border-default;
-
-	.number {
-		background: variables.$color-success;
-		color: #fff;
-	}
-
-	.label {
-		color: variables.$text-primary;
-		font-weight: 500;
-	}
-}
-
-.stepUpcoming {
-	background: transparent;
-
-	.number {
-		background: variables.$bg-default;
-		border: 1px solid variables.$border-default;
-		color: variables.$text-secondary;
-	}
-
-	.label {
-		color: variables.$text-tertiary;
-		font-weight: 500;
-	}
-}
-
-.number {
+.indicator {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 26px;
-	height: 26px;
+	width: 28px;
+	height: 28px;
 	border-radius: 50%;
-	font-size: 13px;
-	font-weight: 600;
+	font-size: 12px;
+	font-weight: 700;
+	line-height: 1;
 	flex-shrink: 0;
-	transition: all 0.3s ease;
+	transition: all var(--duration-normal) var(--ease-out);
 }
 
-.label {
-	font-size: 13px;
-	transition: all 0.3s ease;
+.indicatorCompleted {
+	background: color-mix(in srgb, variables.$color-success 10%, variables.$bg-default);
+	border: 1.5px solid color-mix(in srgb, variables.$color-success 25%, variables.$border-default);
+	color: variables.$color-success;
+}
+
+.indicatorActive {
+	background: variables.$color-secondary;
+	color: variables.$color-white;
+	border: none;
+}
+
+.indicatorUpcoming {
+	background: variables.$bg-default;
+	border: 1.5px solid variables.$border-default;
+	color: variables.$text-tertiary;
+	font-weight: 600;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Phase label                                                         */
+/* ------------------------------------------------------------------ */
+
+.phaseLabel {
+	@include typography.font-caption-m;
 	white-space: nowrap;
 }
 
-.separator {
+.phaseCompleted .phaseLabel {
+	color: variables.$text-secondary;
+}
+
+.phaseActive .phaseLabel {
+	@include typography.font-body-14(600);
+	color: variables.$text-primary;
+}
+
+.phaseUpcoming .phaseLabel {
+	color: variables.$text-tertiary;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Active phase pill background                                        */
+/* ------------------------------------------------------------------ */
+
+.phaseActive {
+	background: color-mix(in srgb, variables.$color-secondary 4%, transparent);
+	padding: 6px 12px 6px 6px;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Substep dots (inline, active phase only)                            */
+/* ------------------------------------------------------------------ */
+
+.substepDots {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	color: variables.$text-tertiary;
-	opacity: 0.6;
-	margin: 0 4px;
-	padding: 0 4px;
+	gap: 4px;
+	margin-left: 2px;
+}
+
+.dot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	flex-shrink: 0;
+	transition: all var(--duration-normal) var(--ease-out);
+}
+
+.dotCompleted {
+	background: variables.$color-success;
+}
+
+.dotActive {
+	background: variables.$color-secondary;
+	box-shadow: 0 0 0 2.5px color-mix(in srgb, variables.$color-secondary 18%, transparent);
+}
+
+.dotUpcoming {
+	background: transparent;
+	border: 1.5px solid variables.$border-default;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Connectors                                                          */
+/* ------------------------------------------------------------------ */
+
+.connector {
+	width: 24px;
+	height: 1.5px;
+	flex-shrink: 0;
+}
+
+.connectorCompleted {
+	background: color-mix(in srgb, variables.$color-success 40%, variables.$border-default);
+}
+
+.connectorActive {
+	background: linear-gradient(
+		90deg,
+		color-mix(in srgb, variables.$color-success 40%, variables.$border-default),
+		color-mix(in srgb, variables.$color-secondary 40%, variables.$border-default)
+	);
+}
+
+.connectorUpcoming {
+	background: none;
+	border-top: 1.5px dashed variables.$border-default;
+	height: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mobile overrides                                                    */
+/* ------------------------------------------------------------------ */
+
+@include breakpoints.respond-to(breakpoints.$mobileMax) {
+	.fadeLeft,
+	.fadeRight {
+		width: 28px;
+	}
+
+	.scrollContainer {
+		padding: 10px 12px;
+	}
+
+	.connector {
+		width: 16px;
+	}
 }

src/shared/ui/Stepper/Stepper.tsx

@@ -1,39 +1,97 @@
-import type { IStepperProps } from "./Stepper.d"
+import type { IStepperProps, StepDefinition } from "./Stepper.d"
 import type { JSX } from "react"
 
 import { Check } from "lucide-react"
-import {
-	FunctionComponent,
-	useEffect,
-	useRef,
-} from "react"
-import {
-	motion,
-	useScroll,
-	useTransform,
-	animate,
-} from "framer-motion"
+import { Fragment, FunctionComponent, useEffect, useMemo, useRef } from "react"
 
 import cs from "classnames"
+import { animate, motion, useScroll, useTransform } from "framer-motion"
 
 import styles from "./Stepper.module.scss"
 
-const ChevronSeparator = () => (
-	<div className={styles.separator}>
-		<svg
-			width="16"
-			height="16"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		>
-			<path d="m9 18 6-6-6-6" />
-		</svg>
-	</div>
-)
+/* ------------------------------------------------------------------ */
+/*  Phase grouping                                                      */
+/* ------------------------------------------------------------------ */
+
+interface Phase {
+	label: string
+	steps: StepDefinition[]
+	phaseIndex: number
+	isCompleted: boolean
+	isActive: boolean
+	isUpcoming: boolean
+}
+
+function groupStepsIntoPhases(
+	steps: StepDefinition[],
+	currentStep: string,
+	completedSteps: string[],
+): Phase[] {
+	const phases: Phase[] = []
+
+	for (const step of steps) {
+		const label = step.phaseLabel ?? step.label
+		const lastPhase = phases[phases.length - 1]
+
+		if (lastPhase && lastPhase.label === label) {
+			lastPhase.steps.push(step)
+		} else {
+			phases.push({
+				label,
+				steps: [step],
+				phaseIndex: phases.length,
+				isCompleted: false,
+				isActive: false,
+				isUpcoming: false,
+			})
+		}
+	}
+
+	for (const phase of phases) {
+		const allCompleted = phase.steps.every((s) =>
+			completedSteps.includes(s.key),
+		)
+		const hasActive = phase.steps.some((s) => s.key === currentStep)
+
+		phase.isCompleted = allCompleted && !hasActive
+		phase.isActive = hasActive
+		phase.isUpcoming = !allCompleted && !hasActive
+	}
+
+	return phases
+}
+
+/* ------------------------------------------------------------------ */
+/*  Connector between phases                                            */
+/* ------------------------------------------------------------------ */
+
+function getConnectorVariant(leftPhase: Phase, rightPhase: Phase): string {
+	if (leftPhase.isCompleted && rightPhase.isCompleted)
+		return styles.connectorCompleted
+	if (leftPhase.isCompleted && rightPhase.isActive)
+		return styles.connectorActive
+	return styles.connectorUpcoming
+}
+
+/* ------------------------------------------------------------------ */
+/*  Substep status                                                      */
+/* ------------------------------------------------------------------ */
+
+type SubstepStatus = "completed" | "active" | "upcoming"
+
+function getSubstepStatus(
+	stepKey: string,
+	currentStep: string,
+	completedSteps: string[],
+): SubstepStatus {
+	if (stepKey === currentStep) return "active"
+	if (completedSteps.includes(stepKey)) return "completed"
+	return "upcoming"
+}
+
+/* ------------------------------------------------------------------ */
+/*  Component                                                           */
+/* ------------------------------------------------------------------ */
 
 export const Stepper: FunctionComponent<IStepperProps> = ({
 	steps,
@@ -52,15 +110,19 @@ export const Stepper: FunctionComponent<IStepperProps> = ({
 	const fadeLeftOpacity = useTransform(scrollXProgress, [0, 0.03], [0, 1])
 	const fadeRightOpacity = useTransform(scrollXProgress, [0.97, 1], [1, 0])
 
-	// Scroll active step into view
+	const phases = useMemo(
+		() => groupStepsIntoPhases(steps, currentStep, completedSteps),
+		[steps, currentStep, completedSteps],
+	)
+
+	// Scroll active phase into view
 	useEffect(() => {
 		const container = scrollContainerRef.current
 		if (!container) return
 
 		const scrollToActive = () => {
-			const activeEl = container.querySelector<HTMLElement>(
-				"[data-step-active]",
-			)
+			const activeEl =
+				container.querySelector<HTMLElement>("[data-step-active]")
 			if (!activeEl) return
 
 			const containerRect = container.getBoundingClientRect()
@@ -95,57 +157,83 @@ export const Stepper: FunctionComponent<IStepperProps> = ({
 			return () => controls.stop()
 		}
 
-		// Delay to ensure layout is complete after hydration
 		const frame = requestAnimationFrame(scrollToActive)
 		return () => cancelAnimationFrame(frame)
 	}, [currentStep])
 
 	return (
-		<div
-			className={cs(styles.root, className)}
-			data-testid="Stepper"
-		>
+		<div className={cs(styles.root, className)} data-testid="Stepper">
 			<motion.div
 				className={styles.fadeLeft}
 				style={{ opacity: fadeLeftOpacity }}
 			/>
 
-			<div
-				ref={scrollContainerRef}
-				className={styles.scrollContainer}
-			>
-				{steps.map((step, index) => {
-					const isCompleted = completedSteps.includes(step.key)
-					const isActive = step.key === currentStep
-					const isLast = index === steps.length - 1
+			<div ref={scrollContainerRef} className={styles.scrollContainer}>
+				<div className={styles.phases}>
+					{phases.map((phase, idx) => {
+						const isLast = idx === phases.length - 1
+						const connectorClass = !isLast
+							? getConnectorVariant(phase, phases[idx + 1])
+							: null
 
-					return (
-						<div
-							key={step.key}
-							className={styles.stepContainer}
-							data-step-container
-						>
-							<div
-								className={cs(styles.step, {
-									[styles.stepCompleted]: isCompleted,
-									[styles.stepActive]: isActive,
-									[styles.stepUpcoming]: !isActive && !isCompleted,
-								})}
-								{...(isActive ? { "data-step-active": true } : {})}
-							>
-								<span className={styles.number}>
-									{isCompleted ? (
-										<Check size={14} strokeWidth={3} />
-									) : (
-										index + 1
+						return (
+							<Fragment key={phase.label}>
+								<div
+									className={cs(styles.phase, {
+										[styles.phaseCompleted]: phase.isCompleted,
+										[styles.phaseActive]: phase.isActive,
+										[styles.phaseUpcoming]: phase.isUpcoming,
+									})}
+									aria-current={phase.isActive ? "step" : undefined}
+									{...(phase.isActive ? { "data-step-active": true } : {})}
+								>
+									<span
+										className={cs(styles.indicator, {
+											[styles.indicatorCompleted]: phase.isCompleted,
+											[styles.indicatorActive]: phase.isActive,
+											[styles.indicatorUpcoming]: phase.isUpcoming,
+										})}
+									>
+										{phase.isCompleted ? (
+											<Check size={12} strokeWidth={2.5} />
+										) : (
+											phase.phaseIndex + 1
+										)}
+									</span>
+
+									<span className={styles.phaseLabel}>{phase.label}</span>
+
+									{phase.isActive && (
+										<div className={styles.substepDots}>
+											{phase.steps.map((step) => {
+												const status = getSubstepStatus(
+													step.key,
+													currentStep,
+													completedSteps,
+												)
+												return (
+													<span
+														key={step.key}
+														className={cs(styles.dot, {
+															[styles.dotCompleted]: status === "completed",
+															[styles.dotActive]: status === "active",
+															[styles.dotUpcoming]: status === "upcoming",
+														})}
+														title={step.label}
+													/>
+												)
+											})}
+										</div>
 									)}
-								</span>
-								<span className={styles.label}>{step.label}</span>
-							</div>
-							{!isLast && <ChevronSeparator />}
-						</div>
-					)
-				})}
+								</div>
+
+								{connectorClass && (
+									<div className={cs(styles.connector, connectorClass)} />
+								)}
+							</Fragment>
+						)
+					})}
+				</div>
 			</div>
 
 			<motion.div

src/shared/ui/TextField/TextField.module.scss

@@ -31,8 +31,8 @@
 
 	&:focus {
 		outline: none;
-		border-color: var(--purple-400);
-		box-shadow: 0 0 0 4px hsla(262, 75%, 48%, 0.15);
+		border-color: var(--color-primary);
+		box-shadow: var(--focus-ring);
 	}
 
 	&:disabled {

src/widgets/Header/Header.module.scss

@@ -10,6 +10,7 @@
   position: sticky;
   top: 0;
   z-index: 50;
+  will-change: transform;
 
   [data-theme="dark"] & {
     background-color: rgba(5, 5, 5, 0.65);

src/widgets/ProjectWizard/ProjectWizard.module.scss

@@ -1,18 +1,34 @@
 .root {
 	display: flex;
 	flex-direction: column;
+	flex: 1 1 auto;
+	width: 100%;
+	min-width: 0;
 	height: calc(100vh - var(--header-height));
 	overflow: hidden;
+	background: variables.$bg-canvas;
+
+	@include breakpoints.respond-to(breakpoints.$mobileMax) {
+		height: calc(100svh - var(--header-height));
+	}
 }
 
 .stepper {
 	flex-shrink: 0;
+	width: 100%;
 }
 
 .content {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	overflow-y: auto;
+	overflow: hidden;
 	min-height: 0;
+	padding: 16px 20px 20px;
+	background: variables.$bg-canvas;
+	border-top: 1px solid variables.$border-subtle;
+
+	@include breakpoints.respond-to(breakpoints.$mobileMax) {
+		padding: 12px;
+	}
 }

src/widgets/TimelinePanel/TimelinePanel.d.ts

@@ -1,5 +1,9 @@
+import type { MediaPlayerInstance } from "@vidstack/react"
+import type { RefObject } from "react"
+
 export interface ITimelinePanelProps {
 	className?: string
 	projectId: string
 	audioUrl: string | null
+	playerRef?: RefObject<MediaPlayerInstance | null>
 }

src/widgets/TimelinePanel/TimelinePanel.module.scss

@@ -5,7 +5,8 @@
 	height: 100%;
 	min-width: 0;
 	overflow: hidden;
-	background: variables.$bg-surface;
+	background: linear-gradient(180deg, variables.$bg-default 0%, variables.$bg-surface 100%);
+	border-top: 1px solid variables.$border-subtle;
 	flex-shrink: 0;
 	user-select: none;
 }
@@ -27,9 +28,10 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	height: 32px;
-	padding: 0 12px;
+	height: 40px;
+	padding: 0 14px;
 	border-bottom: 1px solid variables.$border-subtle;
+	background: transparent;
 	flex-shrink: 0;
 }
 
@@ -43,30 +45,43 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 24px;
-	height: 24px;
+	width: 28px;
+	height: 28px;
 	padding: 0;
-	border: 1px solid variables.$border-subtle;
-	border-radius: variables.$radius-sm;
+	border: 1px solid transparent;
+	border-radius: 999px;
 	background: transparent;
 	color: variables.$text-secondary;
 	cursor: pointer;
+	transition:
+		background-color 0.15s ease,
+		border-color 0.15s ease,
+		color 0.15s ease;
+
+	&:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
 
 	&:hover {
 		background: variables.$bg-hover;
+		border-color: variables.$border-subtle;
+		color: variables.$text-primary;
 	}
 }
 
 .zoomLabel {
 	font-size: 12px;
-	color: variables.$text-tertiary;
+	color: variables.$text-secondary;
+	font-weight: 500;
 	min-width: 32px;
 	text-align: center;
 }
 
 .timeDisplay {
 	font-size: 12px;
-	color: variables.$text-tertiary;
+	color: variables.$text-secondary;
+	font-weight: 500;
 	font-variant-numeric: tabular-nums;
 }
 
@@ -82,9 +97,10 @@
 	display: flex;
 	flex-direction: column;
 	flex-shrink: 0;
-	width: 56px;
+	width: 68px;
+	background: transparent;
 	border-right: 1px solid variables.$border-subtle;
-	overflow-y: auto;
+	overflow: hidden;
 }
 
 .labelCell {
@@ -94,6 +110,7 @@
 	gap: 4px;
 	font-size: 11px;
 	color: variables.$text-tertiary;
+	background: transparent;
 	border-bottom: 1px solid variables.$border-subtle;
 	flex-shrink: 0;
 }
@@ -111,6 +128,11 @@
 	color: variables.$text-tertiary;
 	cursor: pointer;
 
+	&:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
+
 	&:hover:not(:disabled) {
 		background: variables.$bg-hover;
 		color: variables.$text-secondary;

src/widgets/TimelinePanel/TimelinePanel.tsx

@@ -75,13 +75,13 @@ function formatTime(seconds: number): string {
 
 export const TimelinePanel: FunctionComponent<
 	ITimelinePanelProps
-> = ({ className, projectId, audioUrl }): JSX.Element => {
+> = ({ className, projectId, audioUrl, playerRef }): JSX.Element => {
 	const { selectedFile, setSelectedFile, usedFiles } = useWorkspaceFiles()
 
-	const currentTime = useMediaState("currentTime")
-	const duration = useMediaState("duration")
-	const isPlaying = useMediaState("playing")
-	const remote = useMediaRemote()
+	const currentTime = useMediaState("currentTime", playerRef)
+	const duration = useMediaState("duration", playerRef)
+	const isPlaying = useMediaState("playing", playerRef)
+	const remote = useMediaRemote(playerRef)
 
 	const tracks = useTimelineTracks(usedFiles, selectedFile)
 	const transcriptionArtifactId =

tests/e2e/specs/project/silence-apply.spec.ts

@@ -5,6 +5,8 @@ const PROJECT_ID = "75df675b-013b-4b1f-ab2d-075dadbcd0d9"
 const DETECT_JOB_ID = "00000000-0000-0000-0000-000000000050"
 const APPLY_JOB_ID = "00000000-0000-0000-0000-000000000051"
 const TRANSCRIPTION_JOB_ID = "00000000-0000-0000-0000-000000000052"
+const ORIGINAL_FILE_ID = "00000000-0000-0000-0000-000000000060"
+const CUT_FILE_ID = "00000000-0000-0000-0000-000000000061"
 const ORIGINAL_FILE_KEY = "projects/test/original-video.mp4"
 const ORIGINAL_FILE_URL = "http://localhost:4444/files/original-video.mp4"
 const CUT_FILE_KEY = "projects/test/cut-video.mp4"
@@ -52,8 +54,8 @@ test.describe("Silence Apply Flow", () => {
 						"silence-settings",
 						"processing",
 					],
+					primary_file_id: ORIGINAL_FILE_ID,
 					primary_file_key: ORIGINAL_FILE_KEY,
-					video_url: ORIGINAL_FILE_URL,
 					original_file_name: "original-video.mp4",
 					silence_settings: {
 						min_silence_duration_ms: 200,
@@ -133,19 +135,17 @@ test.describe("Silence Apply Flow", () => {
 			await route.fallback()
 		})
 
-		await page.route("**/api/files/get_file/**", async (route) => {
-			const url = new URL(route.request().url())
-			const filePath = url.searchParams.get("file_path")
-
-			const fileUrl =
-				filePath === CUT_FILE_KEY ? CUT_FILE_URL : ORIGINAL_FILE_URL
+		await page.route("**/api/files/files/*/resolve/", async (route) => {
+			const fileId = route.request().url().split("/files/")[1]?.split("/")[0]
+			const isCutFile = fileId === CUT_FILE_ID
 
 			await route.fulfill({
 				status: 200,
 				contentType: "application/json",
 				body: JSON.stringify({
-					file_url: fileUrl,
-					file_path: filePath,
+					file_id: isCutFile ? CUT_FILE_ID : ORIGINAL_FILE_ID,
+					file_url: isCutFile ? CUT_FILE_URL : ORIGINAL_FILE_URL,
+					file_path: isCutFile ? CUT_FILE_KEY : ORIGINAL_FILE_KEY,
 				}),
 			})
 		})
@@ -181,8 +181,8 @@ test.describe("Silence Apply Flow", () => {
 						output_data:
 							applyStatus === "DONE"
 								? {
+										file_id: CUT_FILE_ID,
 										file_path: CUT_FILE_KEY,
-										file_url: CUT_FILE_URL,
 									}
 								: null,
 					}),

tests/e2e/specs/silence/silence-fragments.integration.spec.ts

@@ -463,8 +463,8 @@ test.describe("Fragments Step (Integration)", () => {
 							job_type: "SILENCE_APPLY",
 							progress_pct: 100,
 							output_data: {
+								file_id: "00000000-0000-0000-0000-000000000071",
 								file_path: processedFilePath,
-								file_url: processedFileUrl,
 							},
 						}),
 					})

tests/e2e/specs/upload/file-upload.integration.spec.ts

@@ -243,6 +243,7 @@ test.describe("File Upload (Integration)", () => {
 					status: 200,
 					contentType: "application/json",
 					body: JSON.stringify({
+						file_id: "00000000-0000-0000-0000-000000000101",
 						file_path: "projects/test/video.mp4",
 						file_url: "http://localhost:9000/projects/test/video.mp4",
 					}),
@@ -254,6 +255,7 @@ test.describe("File Upload (Integration)", () => {
 					status: 200,
 					contentType: "application/json",
 					body: JSON.stringify({
+						file_id: "00000000-0000-0000-0000-000000000101",
 						file_path: "projects/test/video.mp4",
 						file_url: "http://localhost:9000/projects/test/video.mp4",
 					}),