Основной•10–16 часов

Production-интерфейс AI-ассистента

Создайте production-ready frontend для AI-ассистента со streaming, citations, approvals, cancellation, error states и accessibility.

streaming UIstate managementapprovalsaccessibilitysafe rendering

Сценарий

Задача

Пользователь работает с AI-ассистентом, который стримит ответ, показывает источники и может предложить рискованное действие. Интерфейс должен объяснять состояние, поддерживать отмену и требовать явного подтверждения.

Пошаговое выполнение

1. Спроектируйте модель состояний

Результат: UI имеет явные idle/loading/streaming/error/approval states.

Задачи

→Опишите state machine
→Добавьте cancellation
→Отделите content от commands

Проверки

✓Нет скрытых переходных состояний
✓Повторный submit не дублирует запрос

2. Реализуйте streaming и citations

Результат: Ответ обновляется стабильно и показывает evidence.

Задачи

→Обработайте chunks
→Добавьте source cards
→Добавьте abstention state

Проверки

✓Out-of-order chunks не ломают UI
✓Unknown citation не отображается как валидная

3. Добавьте approval UX

Результат: Рискованные действия не выполняются без согласия.

Задачи

→Покажите последствия
→Добавьте confirm/deny
→Добавьте audit summary

Проверки

✓Нет auto-confirm
✓Пользователь видит точное действие до выполнения

4. Проверьте accessibility и failures

Результат: Интерфейс доступен и восстанавливается после ошибок.

Задачи

→Проведите keyboard test
→Проверьте screen-reader status
→Симулируйте network failure

Проверки

✓Focus не теряется
✓Ошибка имеет retry или безопасный exit

Критерии приёмки

Streaming можно отменить
Citations валидируются
Risky action требует approval
UI проходит keyboard flow
Есть evidence для failure states

Рубрика оценки

Как оценивается результат

Проходной балл: 72/100 · Отличие: 90/100

Модель состояний UI

Состояния streaming, error, cancellation и approval описаны явно.

25 баллов

Недостаточно

Состояния смешаны или остаются race conditions.

Компетентно

Основные состояния явные и протестированы.

Сильно

Реализованы deterministic replay, concurrency tests и recovery paths.

Необходимые доказательства

✓ Ссылка на артефакт или код
✓ README с решениями и компромиссами
✓ Evidence выполненных проверок
✓ State diagram или transition table

Citations и безопасный рендеринг

Источники валидируются, а недоверенный контент не может стать командой.

25 баллов

Недостаточно

Неизвестный источник показывается как валидный.

Компетентно

Citations валидируются и имеют fallback.

Сильно

Реализованы provenance, schema validation и security tests.

Необходимые доказательства

✓ Ссылка на артефакт или код
✓ README с решениями и компромиссами
✓ Evidence выполненных проверок
✓ Пример валидной и невалидной citation

Approval UX

Рискованные действия показывают контекст, confirm/deny и audit evidence.

25 баллов

Недостаточно

Действие может выполниться без явного согласия.

Компетентно

Approval блокирует выполнение и показывает последствия.

Сильно

Реализованы undo, delegated approval и устойчивый audit trail.

Необходимые доказательства

✓ Ссылка на артефакт или код
✓ README с решениями и компромиссами
✓ Evidence выполненных проверок
✓ Запись approval flow

Accessibility и восстановление после ошибок

Keyboard, focus, announcements и retry работают надёжно.

25 баллов

Недостаточно

Focus теряется или streaming updates не объявляются.

Компетентно

Основной flow доступен и recoverable.

Сильно

Есть automated accessibility tests и progressive disclosure.

Необходимые доказательства

✓ Ссылка на артефакт или код
✓ README с решениями и компромиссами
✓ Evidence выполненных проверок
✓ Keyboard/screen-reader checklist