feat(browser): replace the preview proxy with a real browser panel and an agent web tool (#2883)
The preview panel worked by proxying a dev server through OpenChamber's own origin and rewriting the HTML that came back. Anything the rewriter did not anticipate broke, and pages that refuse to be embedded never loaded at all. This deletes the proxy (-1604 lines and its tests) and merges the preview and browser panels into one surface backed by a real Chromium view. What the panel is now - A `<webview>` in its own session partition: logins and cookies persist, hot reload works because nothing is rewritten, DevTools are one click away. - Annotation: pick one element, drag a region, or draw freehand, write a note, and it reaches chat with a screenshot of the visible page with the marks on it. - Toolbar: hard reload, page zoom, device sizes, a light/dark switch that applies to the page rather than the app, and cookie/cache clearing scoped to the panel alone. - Several pages at once, each tab showing the page's own favicon, and an address bar that suggests pages already visited in this project. - Dev servers are listed from what is actually listening on the machine, checked against what a project announced, so a server is offered no matter how it was started. One that is still starting is waited for instead of failing. Remote dev servers The desktop app binds a local port and pipes raw bytes to the OpenChamber host over the existing authenticated connection, so the page keeps its own origin at the root of its own host. The reachable set is exactly what discovery reports and is re-checked per connection, so an authenticated client cannot dial arbitrary local services on the host. Links and redirects to another loopback port stay on the machine that served the page. A tunnel that cannot be opened is reported; it is never replaced by the plain loopback URL, which would answer from the user's own machine under a remote address. Agent control Browser actions are a separate `openchamber_web` tool: open, snapshot, click, type, scroll, inspect computed styles, resize between mobile/tablet/desktop, and capture a screenshot into `.openchamber/screenshots/` in the project. The existing `openchamber` tool keeps sessions, worktrees and scheduled tasks. Each has its own setting in the new Settings -> General -> OpenChamber Tools section, and the plugin is not injected at all when both are off. Capability belongs to the connected client, not to configuration: a client declares on its event stream that it can drive a page, which only a Chromium host does. Exactly one client performs each request — it claims the request before acting, and the first claim wins — because deciding by whose result arrives first would be too late for a click that already happened. No client listening is answered immediately with an explanation rather than a timeout. Runtime boundaries Web tabs get a plain iframe that can display a page but not inspect one. The VS Code extension no longer offers the surface at all, since nothing that makes the panel worth having works there. Mobile is unaffected. Native boundary Camera, microphone, location and device-picker requests from panel pages are denied — Electron grants them by default when no handler is set, and the panel loads whatever address the user types. Page capture, appearance emulation and storage clearing verify that their target belongs to the panel's own session instead of trusting a web-contents id from the renderer. Persisted state Stored `preview` tabs migrate to `browser` (v13 -> v14). Context panel tab limits are now per surface, so filling one surface no longer evicts another's tabs. Address history is stored per project and per runtime. Documentation `preview.mdx` and `desktop-browser.mdx` rewritten across all locales, the agent tool settings path corrected, new `DOCUMENTATION.md` for the browser-control broker and the dev tunnel, and the `ui-api-decoupling` skill updated where it still described the deleted proxy.
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
50613bb170
commit
a5aa32446d
@@ -28,7 +28,7 @@ description: Дозвольте агенту керувати сесіями, wo
|
||||
|
||||
## Увімкнення та вимкнення
|
||||
|
||||
Відкрийте **Налаштування → Загальні → OpenCode CLI**, змініть **Інструмент керування для агентів**, потім виберіть **Save + Reload**. Налаштування застосовується після перезапуску керованого сервера OpenCode.
|
||||
Відкрийте **Налаштування → Загальні → Інструменти OpenChamber** і змініть **Інструмент керування для агентів**. Налаштування застосовується після перезапуску керованого сервера OpenCode, який OpenChamber запропонує як **Apply & Restart**.
|
||||
|
||||
Інструмент недоступний, коли OpenChamber підключається до зовнішнього сервера OpenCode через `OPENCODE_HOST` чи skip-start, а також у розширенні VS Code. Десктопні та вебінсталяції з керованим OpenChamber сервером OpenCode підтримують його автоматично.
|
||||
|
||||
@@ -37,3 +37,4 @@ description: Дозвольте агенту керувати сесіями, wo
|
||||
- [Заплановані задачі](/uk/scheduled-tasks/)
|
||||
- [Сесії worktree](/uk/worktrees/)
|
||||
- [Цілі сесії](/uk/session-goals/)
|
||||
- [Панель браузера](/uk/desktop-browser/) — інструмент OpenChamber Web — дивитися на сторінку й керувати нею
|
||||
|
||||
@@ -1,22 +1,64 @@
|
||||
---
|
||||
title: Десктопний браузер
|
||||
description: Переглядайте будь-яку сторінку всередині десктопного застосунку, з інспекцією та перехопленням консолі.
|
||||
title: Панель браузера
|
||||
description: Переглядайте будь-яку сторінку в застосунку, анотуйте її та дозвольте агенту нею керувати.
|
||||
---
|
||||
|
||||
# Десктопний браузер
|
||||
# Панель браузера
|
||||
|
||||
Десктопний застосунок має вбудований браузер, тож ви можете відкрити будь-яку сторінку просто поруч із чатом, вказувати на елементи, щоб запитати про них, і перехоплювати консоль сторінки. Відкрийте його з кнопки глобуса в заголовку застосунку.
|
||||
Панель браузера відкриває будь-яку сторінку просто поруч із чатом. Відкрийте її кнопкою глобуса в заголовку застосунку.
|
||||
|
||||
> Десктопний браузер — це функція **лише для десктопа**. У вебі панель [перегляду](/uk/preview/) пропонує ті самі інструменти інспекції та консолі для вашого локального dev-сервера.
|
||||
У десктопному застосунку це справжній браузер: ваші входи зберігаються, гаряче перезавантаження працює, а інструменти розробника — за один клік. У вкладці веббраузера панель теж покаже сторінку, але не зможе зазирнути всередину — інструменти анотацій нижче доступні лише на десктопі.
|
||||
|
||||
## Інспекція та анотування
|
||||
Сторінки, відкриті тут, не можуть скористатися вашою камерою, мікрофоном чи місцем перебування: такі запити відхиляються.
|
||||
|
||||
Увімкніть **inspect** і клікніть будь-який елемент на сторінці. OpenChamber перехоплює нотатку про нього — що це, його стилі, де він розташований, і знімок екрана — і прикріплює її до вашого повідомлення в чаті. Це найшвидший спосіб сказати агентові «ось цей елемент, прямо тут».
|
||||
## Панель інструментів
|
||||
|
||||
## Перехоплення консолі
|
||||
Адресний рядок памʼятає сторінки, які ви відкривали в цьому проєкті, і пропонує їх під час набору, звіряючись із частиною адреси або назвою сторінки. Стрілки рухають списком, Enter відкриває підсвічений запис, а кнопка в рядку прибирає його зі списку.
|
||||
|
||||
Браузер збирає вивід консолі сторінки — помилки, попередження та логи — щоб ви могли фільтрувати й читати його, не відкриваючи інструменти розробника.
|
||||
Поруч — **перезавантаження**, а також **жорстке перезавантаження**, яке ігнорує кеш, коли зміна вперто не показується, і керування масштабом, що змінює лише сторінку.
|
||||
|
||||
## Пов'язане
|
||||
**Очистити куки** та **Очистити кеш** стосуються тільки цієї панелі. Вашої сесії OpenChamber та інших вікон це не торкається.
|
||||
|
||||
- [Перегляд і dev-сервери](/uk/preview/) — ті самі інструменти для вашого локального dev-сервера
|
||||
## Анотувати сторінку
|
||||
|
||||
Натисніть **Анотувати** — над сторінкою зʼявиться панель із трьома інструментами:
|
||||
|
||||
- **Елемент** — клікніть на елемент. Клік по іншому переносить вибір, повторний клік по тому самому — знімає його.
|
||||
- **Область** — обведіть ділянку рамкою, коли йдеться більш ніж про один елемент.
|
||||
- **Малювання** — малюйте від руки поверх сторінки.
|
||||
|
||||
Опишіть бажане в полі, що зʼявляється поруч із позначкою, і натисніть **Додати** — або просто Enter. У повідомленні чату зʼявиться картка з усім, що ви позначили, з вашою нотаткою і зі знімком видимої сторінки, на якому намальовано твої позначки — тож можна сказати «оця кнопка, трохи круглішу», а не описувати, де вона.
|
||||
|
||||
Сама сторінка при цьому не змінюється — анотація лише позначає те, що є. `Esc` скасовує й закриває панель.
|
||||
|
||||
## Дозволити агенту керувати
|
||||
|
||||
Агент може сам користуватися панеллю браузера — відкривати сторінку, читати, що на ній, клікати, вводити текст, прокручувати й перемикатися між мобільним, планшетним і десктопним розкладами — щоб перевіряти власну роботу, а не просити про це вас. Ви бачитимете це в панелі.
|
||||
|
||||
Агент не може виконувати довільний код на сторінці. Браузер зберігає ваші справжні входи, тож агент обмежений переліченими діями.
|
||||
|
||||
Він також може зберегти знімок того, що бачить, у `.openchamber/screenshots/` вашого проєкту й показати його у відповіді. Саме це робить можливим «до і після», а файл лишається на місці, щоб потім прикріпити його до pull request.
|
||||
|
||||
Дії з браузером — це **інструмент OpenChamber Web**, який вмикається й вимикається окремо в **Налаштування → Загальні → Інструменти OpenChamber**.
|
||||
|
||||
Для цього потрібен десктопний застосунок: сторінкою у вкладці веббраузера керувати не вийде.
|
||||
|
||||
## Розмір і оформлення
|
||||
|
||||
Натисніть кнопку телефона, щоб відкрити панель пристроїв. Оберіть пресет або
|
||||
введіть ширину й висоту — сторінка буде викладена саме в цьому розмірі, а якщо
|
||||
не вміщається в панель, її буде зменшено візуально. Сама сторінка при цьому
|
||||
вимірює себе в тому розмірі, який ви задали.
|
||||
|
||||
Там же можна змусити сторінку показатися світлою чи темною, не змінюючи нічого
|
||||
на своїй машині. З DevTools вони не поєднуються: у сторінки може бути лише один
|
||||
приєднаний зневаджувач, тож DevTools доведеться спершу закрити.
|
||||
|
||||
## Інструменти розробника
|
||||
|
||||
Натисніть кнопку термінала на панелі, щоб відкрити власні інструменти розробника Chromium для сторінки — консоль, мережу, елементи, усе як зазвичай.
|
||||
|
||||
## Повʼязане
|
||||
|
||||
- [Перегляд і dev-сервери](/preview/) — як відкрити запущений застосунок, зокрема на віддаленій машині
|
||||
- [Інструмент керування для агентів](/uk/agent-control-tool/) — сесії, worktree й заплановані задачі просто з чату
|
||||
|
||||
@@ -5,28 +5,31 @@ description: Відкрийте запущений dev-сервер усеред
|
||||
|
||||
# Перегляд і dev-сервери
|
||||
|
||||
Коли ви запускаєте dev-сервер, OpenChamber може відкрити його просто всередині застосунку замість окремої вкладки браузера — щоб ви могли бачити свій сайт поруч із чатом, перехоплювати його консоль і вказувати на елементи, щоб запитати про них.
|
||||
Коли ви запускаєте dev-сервер, OpenChamber може відкрити його просто всередині застосунку замість окремої вкладки браузера — щоб ви бачили свій сайт поруч із чатом і могли вказувати на елементи, щоб запитати про них.
|
||||
|
||||
## Відкриття перегляду
|
||||
## Відкрити dev-сервер
|
||||
|
||||
OpenChamber слідкує за виводом терміналу на предмет локальної адреси (рядок `Local:`, який друкують інструменти на кшталт Vite, Next.js чи Astro). Коли він її помічає:
|
||||
Відкрийте панель браузера кнопкою глобуса в заголовку застосунку. Якщо dev-сервер уже запущено, він буде у списку — один клік, і він відкриється. OpenChamber знаходить його за тим, що насправді слухає порти на вашій машині, тож це працює незалежно від того, як саме ви його запустили.
|
||||
|
||||
- у терміналі з'являється кнопка **Open preview**
|
||||
- [дія проєкту](/uk/project-actions/) з увімкненим автовідкриттям відкриває її за вас
|
||||
- локальне посилання в повідомленні чату теж може її відкрити
|
||||
Dev-сервер також відкривається автоматично, коли:
|
||||
|
||||
Сайт завантажується в бічній панелі. Переглянути можна лише локальні адреси (на вашій власній машині).
|
||||
- ви натискаєте **Відкрити перегляд** на локальній адресі в терміналі
|
||||
- [дія проєкту](/project-actions/) з увімкненим автовідкриттям запускає його
|
||||
- ви переходите за локальним посиланням у повідомленні чату
|
||||
|
||||
## Консоль та інспекція
|
||||
Адресу завжди можна ввести вручну. Простий `localhost:5173` трактується як `http://`, тож схему писати не обовʼязково.
|
||||
|
||||
У панелі перегляду ви можете:
|
||||
## Робота з віддаленим OpenChamber
|
||||
|
||||
- спостерігати за **консоллю** сторінки — помилки, попередження та логи, відфільтровані як вам зручно
|
||||
- увімкнути **inspect**, клікнути будь-який елемент і надіслати нотатку про нього — селектор, стилі, позицію та знімок екрана — прямо в чат
|
||||
Коли OpenChamber працює на іншій машині, його dev-сервер теж на *тій* машині — `localhost` на вашому ноутбуці веде зовсім не туди. Десктопний застосунок робить це за вас: відкриває локальний порт, який проводить зʼєднання до віддаленого dev-сервера, тож сторінка вантажиться як звичайно, з робочим гарячим перезавантаженням і інструментами розробника. Ви й далі вводите очікувану адресу; технічні деталі вам не заважають.
|
||||
|
||||
Це найшвидший спосіб сказати агентові «ось ця кнопка, тут», не описуючи її.
|
||||
Для цього потрібен десктопний застосунок. У вкладці браузера можна відкрити лише dev-сервери на вашій власній машині.
|
||||
|
||||
## Пов'язане
|
||||
## Анотації на сторінці
|
||||
|
||||
- [Дії проєкту](/uk/project-actions/) — автоматично відкривайте сервер при запуску
|
||||
- [Десктопний браузер](/uk/desktop-browser/) — ті самі інструменти для будь-якої сторінки на десктопі
|
||||
Про те, як вказувати на елементи, малювати на сторінці й надсилати все це в чат, читайте в розділі [Панель браузера](/desktop-browser/).
|
||||
|
||||
## Повʼязане
|
||||
|
||||
- [Дії проєкту](/project-actions/) — автовідкриття сервера після запуску
|
||||
- [Панель браузера](/desktop-browser/) — анотації сторінок і керування агентом
|
||||
|
||||
Reference in New Issue
Block a user