Превью приложения

Превью показывает веб-приложения, запущенные внутри рабочего пространства. Здесь можно переключаться между портами, проверять разные размеры экрана и видеть сообщения консоли до публикации.

Чем Превью отличается от Облачного браузера

	Превью	Облачный браузер
Главная задача	Проверить локальную версию приложения до публикации	Работать с внешними сайтами и опубликованными приложениями
Что открывает	Dev-сервер текущего рабочего стола по порту 3000–9999, кроме 8000	Обычные https://-адреса в общей Chromium-сессии
Авторизация	Не предназначено для хранения общего профиля со входами	Может сохранять профиль, cookies и выполненные пользователем входы
Основные функции	Выбор порта и устройства, обновление, Console, проверка адаптивности	Несколько вкладок, переходы по сайтам, формы, логи и передача управления
Инструмент основного агента	promto_preview	promto_browser
Команда в профессиональном терминале	promto preview screenshot --current --port <порт>	promto browser ...

Кнопка Открыть отдельно в Превью открывает тот же preview-адрес в новой вкладке. Она не переносит приложение в Облачный браузер и не подключает к нему сохранённый профиль Браузера.

Сырой адрес localhost, 127.0.0.1 или 0.0.0.0 из рабочего пространства не нужно открывать в Облачном браузере. Для него используется Превью и фактический порт приложения.

Иногда нужны оба инструмента: например, Облачный браузер показывает сайт-референс или внешнюю админ-панель, а Превью — локальную реализацию, которую вы сравниваете с ним. Это две отдельные вкладки и два разных контекста проверки.

Если приложение ещё не запущено

1. Нажмите Запустить превью.
2. Promto откроет новую вкладку чата и попросит агента запустить dev-сервер.
3. Агент выберет свободный порт в диапазоне 3000–9999, запустит приложение и проверит его.
4. После обнаружения сервера превью откроется автоматически.

Кнопка Проверить запущенные приложения повторно ищет уже работающие серверы без запуска нового процесса.

Панель превью

• Индикатор и номер порта — выбор активного сервера и управление найденными портами.
• Обновить — перезагрузка текущего превью.
• Адресная строка — переход к пути внутри приложения.
• Открыть отдельно — открытие текущего URL в новой вкладке.
• Консоль — сообщения, предупреждения и JavaScript-ошибки приложения.
• Выбор устройства — проверка адаптивной ширины.

На мобильном интерфейсе дополнительные команды находятся в меню Все действия.

Как проверить изменение

1. Выберите правильный порт.
2. Обновите страницу.
3. Пройдите основной пользовательский сценарий.
4. Проверьте пустое состояние, загрузку и ошибку.
5. Переключитесь на мобильный размер.
6. Откройте консоль и убедитесь, что новых ошибок нет.

Значения индикатора порта

• Зелёный — сервер отвечает.
• Серый — сервер загружается или проверяется.
• Красный — порт недоступен.

Недоступный порт можно остановить через список портов, если процесс больше не нужен.

Порт 8000 зарезервирован для VS Code и не используется для пользовательского превью.

Инструкции и CLI для агента

Для превью главный агент загружает:

• Promto Runtime Rules — topic runtime;
• Promto Dev Server And Preview Rules — topic dev_servers;
• Promto UI Markers And User-Facing Paths — topic ui_markers перед итоговой ссылкой Preview;

Инструкции вызываются встроенным get_instruction({ topic: "dev_servers" }). Это не shell-команда. Свободный порт, владельца порта и остановку процесса главный агент обрабатывает инструментом promto_port, а снимок текущего превью вместе с консолью получает через promto_preview.

Файл *_design.html — отдельный тип артефакта. Его нельзя запускать через dev-сервер, promto_port, promto_preview или marker Preview:. Для него агент загружает Promto Design Instructions — topic design, проверяет файл встроенным tool promto_design_validate и возвращает marker OpenDesign: по правилам topic ui_markers.

В терминале используются реальные CLI-команды:

promto port free 3000
promto port owner <порт>
promto port list
promto preview screenshot --current --port <порт>

Их standalone-эквиваленты — promto-port ... и promto-preview screenshot --current --port <порт>. Перед работой терминальный агент может загрузить общий контракт через promto instructions; terminal-команды get_instruction для dev_servers нет.

Готовый промпт для агента

Сначала вызови get_instruction по темам dev_servers и runtime. Найди реальную команду запуска приложения, выбери свободный порт через promto_port, запусти сервер на 0.0.0.0 и дождись ответа нужного маршрута. Проверь основной сценарий и консоль через promto_preview; не подменяй локальное Превью инструментом promto_browser. Перед финальным ответом загрузи ui_markers и верни Preview для фактического порта. Не считай один только запущенный процесс подтверждением рабочего интерфейса. Если результат — файл *_design.html, не запускай Preview: перейди на инструкции design, promto_design_validate и OpenDesign.

Если превью не открывается

1. Проверьте журнал запуска в чате или терминале.
2. Убедитесь, что приложение слушает 0.0.0.0, а не только localhost.
3. Проверьте, что выбран фактический порт приложения.
4. Исправьте ошибку сборки или запуска.
5. Нажмите Обновить либо повторите поиск запущенных приложений.

Если консоль обнаружит первую JavaScript-ошибку, панель диагностики откроется автоматически. Из неё можно передать агенту запрос на исправление или перезапуск недоступного сервера.