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.

packages/docs/content/docs/es/agent-control-tool.mdx

@@ -28,7 +28,7 @@ La herramienta puede listar proyectos y preferencias de modelos, crear y continu
 
 ## Activar o desactivar la herramienta
 
-Abre **Ajustes → General → OpenCode CLI**, cambia **Herramienta de control para agentes** y selecciona **Save + Reload**. El ajuste se aplica cuando se reinicia el servidor OpenCode gestionado.
+Abre **Ajustes → General → Herramientas de OpenChamber** y cambia **Herramienta de control para agentes**. El ajuste se aplica cuando se reinicia el servidor OpenCode gestionado, que OpenChamber ofrece como **Apply & Restart**.
 
 La herramienta no está disponible cuando OpenChamber se conecta a un servidor OpenCode externo mediante `OPENCODE_HOST` o skip-start, ni dentro de la extensión de VS Code. Las instalaciones web y de escritorio que usan el servidor OpenCode gestionado por OpenChamber la admiten automáticamente.
 
@@ -37,3 +37,4 @@ La herramienta no está disponible cuando OpenChamber se conecta a un servidor O
 - [Tareas programadas](/es/scheduled-tasks/)
 - [Sesiones de worktree](/es/worktrees/)
 - [Objetivos de sesión](/es/session-goals/)
+- [Panel del navegador](/es/desktop-browser/) — la herramienta OpenChamber Web, para ver una página y manejarla

packages/docs/content/docs/es/desktop-browser.mdx

@@ -1,22 +1,53 @@
 ---
-title: Navegador de escritorio
-description: Navega cualquier página dentro de la app de escritorio, con inspección y captura de consola.
+title: Panel del navegador
+description: Navega cualquier página dentro de la aplicación, anótala y deja que el agente la maneje.
 ---
 
-# Navegador de escritorio
+# Panel del navegador
 
-La app de escritorio tiene un navegador integrado para que abras cualquier página justo al lado de tu chat, señales elementos para preguntar sobre ellos y captures la consola de la página. Ábrelo desde el botón del globo en el encabezado de la app.
+El panel del navegador abre cualquier página justo al lado del chat. Ábrelo con el botón del globo de la cabecera.
 
-> El navegador de escritorio es una función **solo de escritorio**. En la web, el panel de [vista previa](/es/preview/) ofrece las mismas herramientas de inspección y consola para tu servidor de desarrollo local.
+En la aplicación de escritorio es un navegador de verdad: tus sesiones se mantienen, la recarga en caliente funciona y las herramientas de desarrollo están a un clic. En una pestaña del navegador el panel puede mostrar una página, pero no mirar dentro de ella: las herramientas de anotación de abajo son solo de escritorio.
 
-## Inspecciona y anota
+Las páginas que abras aquí no pueden usar tu cámara, tu micrófono ni tu ubicación: esas peticiones se rechazan.
 
-Activa **inspect** y haz clic en cualquier elemento de la página. OpenChamber captura una nota sobre él —qué es, sus estilos, dónde se sitúa y una captura de pantalla— y la adjunta a tu mensaje del chat. Es la forma más rápida de decirle al agente "este elemento, justo aquí".
+## La barra de herramientas
 
-## Captura de consola
+La barra de direcciones recuerda las páginas que has abierto en este proyecto y las ofrece mientras escribes, buscando en parte de la dirección o del título de la página. Las flechas recorren la lista, Enter abre la entrada resaltada y el botón de una fila la quita.
 
-El navegador recopila la salida de la consola de la página —errores, advertencias y registros— para que puedas filtrarla y leerla sin abrir las herramientas de desarrollo.
+Al lado está **Recargar**, junto con una **recarga forzada** que ignora la caché cuando un cambio se niega a aparecer, y los controles de zoom, que escalan solo la página.
+
+**Borrar cookies** y **Borrar datos en caché** afectan únicamente a este panel. Tu sesión de OpenChamber y cualquier otra ventana quedan intactas.
+
+## Anotar una página
+
+Pulsa **Anotar** y aparecerá una barra sobre la página con tres herramientas:
+
+- **Elemento** — haz clic en un elemento. Hacer clic en otro mueve la selección; volver a hacer clic en el mismo la quita.
+- **Región** — arrastra un recuadro alrededor de una zona cuando te refieras a más de un elemento.
+- **Dibujar** — traza a mano alzada sobre la página.
+
+Escribe lo que quieres en el cuadro que aparece junto a tu marca y pulsa **Adjuntar**, o simplemente Enter. Tu mensaje recibe una tarjeta con todo lo que has marcado, tu nota y una captura de la página visible con tus marcas dibujadas encima — así puedes decir "este botón, un poco más redondeado" en vez de describir dónde está.
+
+La página en sí nunca se modifica: anotar solo marca lo que ya está ahí. `Esc` cancela y cierra la barra.
+
+## Dejar que el agente maneje
+
+El agente puede usar el panel del navegador por su cuenta — abrir una página, leer lo que hay en ella, hacer clic, escribir, desplazarse y alternar entre diseño móvil, de tableta y de escritorio — para comprobar su propio trabajo en lugar de pedírtelo a ti. Lo verás ocurrir en el panel.
+
+El agente no puede ejecutar código arbitrario en la página. El navegador conserva tus sesiones reales, así que se limita a las acciones anteriores.
+
+También puede guardar una imagen de lo que está viendo en `.openchamber/screenshots/` de tu proyecto y mostrártela en su respuesta. Eso es lo que hace posible un antes y después, y el archivo se queda ahí para adjuntarlo a un pull request.
+
+Las acciones del navegador son la **herramienta OpenChamber Web**, que se activa y desactiva por separado en **Ajustes → General → Herramientas de OpenChamber**.
+
+Esto necesita la aplicación de escritorio: una página mostrada en una pestaña del navegador no se puede controlar.
+
+## Herramientas de desarrollo
+
+Pulsa el botón de terminal de la barra para abrir las herramientas de desarrollo propias de Chromium — consola, red, elementos, todo lo habitual.
 
 ## Relacionado
 
-- [Vista previa y servidores de desarrollo](/es/preview/) — las mismas herramientas para tu servidor de desarrollo local
+- [Vista previa y servidores de desarrollo](/preview/) — abrir tu aplicación en marcha, también en una máquina remota
+- [Herramienta de control para agentes](/es/agent-control-tool/) — sesiones, worktrees y tareas programadas desde el chat

packages/docs/content/docs/es/preview.mdx

@@ -5,28 +5,31 @@ description: Abre un servidor de desarrollo en marcha dentro de OpenChamber.
 
 # Vista previa y servidores de desarrollo
 
-Cuando inicias un servidor de desarrollo, OpenChamber puede abrirlo dentro de la propia app en lugar de en una pestaña de navegador aparte, para que veas tu sitio junto al chat, captures su consola y señales elementos para preguntar sobre ellos.
+Cuando arrancas un servidor de desarrollo, OpenChamber puede abrirlo dentro de la propia aplicación en lugar de en una pestaña aparte — así ves tu sitio junto al chat y puedes señalar elementos para preguntar por ellos.
 
-## Abre una vista previa
+## Abrir un servidor de desarrollo
 
-OpenChamber observa la salida de la terminal en busca de una dirección local (la línea `Local:` que imprimen herramientas como Vite, Next.js o Astro). Cuando detecta una:
+Abre el panel del navegador con el botón del globo de la cabecera. Si ya hay un servidor en marcha, aparece en la lista y se abre con un clic: OpenChamber lo encuentra mirando qué está escuchando de verdad en tu máquina, así que funciona sin importar cómo lo hayas arrancado.
 
-- en la terminal aparece un botón **Open preview**
-- una [acción de proyecto](/es/project-actions/) con la apertura automática activada la abre por ti
-- un enlace local en un mensaje del chat también puede abrirla
+Un servidor de desarrollo también se abre solo cuando:
 
-El sitio se carga en el panel lateral. Solo se pueden previsualizar direcciones locales (en tu propia máquina).
+- pulsas **Abrir vista previa** sobre una dirección local en la terminal
+- una [acción de proyecto](/project-actions/) con apertura automática arranca uno
+- sigues un enlace local en un mensaje del chat
 
-## Consola e inspección
+Siempre puedes escribir la dirección a mano. Un simple `localhost:5173` se entiende como `http://`, así que no hace falta escribir el esquema.
 
-En el panel de vista previa puedes:
+## Trabajar con un OpenChamber remoto
 
-- ver la **consola** de la página —errores, advertencias y registros— filtrada como prefieras
-- activar **inspect**, hacer clic en cualquier elemento y enviar una nota sobre él —selector, estilos, posición y una captura de pantalla— directamente al chat
+Cuando OpenChamber corre en otra máquina, su servidor de desarrollo está en *esa* máquina — `localhost` en tu portátil apunta a otro sitio completamente distinto. La aplicación de escritorio se encarga: abre un puerto local que lleva la conexión hasta el servidor remoto, de modo que la página carga con normalidad, con recarga en caliente y herramientas de desarrollo funcionando. Tú sigues escribiendo la dirección que esperas; la fontanería no te estorba.
 
-Esta es la forma más rápida de decirle al agente "este botón, aquí" sin describirlo.
+Esto requiere la aplicación de escritorio. En una pestaña del navegador solo se pueden abrir servidores de tu propia máquina.
+
+## Anotar la página
+
+Consulta [Panel del navegador](/desktop-browser/) para señalar elementos, dibujar sobre la página y enviarlo todo al chat.
 
 ## Relacionado
 
-- [Acciones de proyecto](/es/project-actions/) — abre automáticamente un servidor al iniciarlo
-- [Navegador de escritorio](/es/desktop-browser/) — las mismas herramientas para cualquier página, en el escritorio
+- [Acciones de proyecto](/project-actions/) — abrir un servidor automáticamente al arrancarlo
+- [Panel del navegador](/desktop-browser/) — anotar páginas y dejar que el agente las maneje