feat(collab): show MCP agents, follow streamed JSX, and follow your agents as they work (#725 )

* feat(MCP): follow agent activity in canvas

* feat(collab): show MCP, ACP, and harness sessions as agents

MCP clients worked on the document unseen: only the built-in chat had a
presence, and following agent activity meant a separate setting that
moved the viewport after every MCP tool. Each MCP session now shows as
an agent with a callsign in its owner's color, like the chat: the MCP
server forwards the session and the client's name with each tool call,
the app's own ACP and Pi harness chats mark their sessions with a
header, and the agent points at the layers each call reads or changes
on their page. It rests after a quiet spell, leaves when its session
ends or the server disconnects, and collaborators see it through
awareness. Following it works like following anyone else, from the
avatars, so the default-on follow setting and its viewport fitting go.

Co-authored-by: Victor Wads <victor@wads.dev>

* feat(ai): move the chat's agent through JSX as it streams

While the built-in chat streamed a render call, its preview grew on the
canvas but the agent stood still until the tool finished. The preview
now reports, after each update, the element that appeared last and the
bounds of what the JSX builds; the agent's cursor follows that element
and its outline traces the preview, for collaborators too, until the
tool runs and the agent outlines the real layers. Peers' outlines are
validated and capped like their selections.

Co-authored-by: Victor Wads <victor@wads.dev>

* feat(collab): glide cursors and the followed view instead of jumping

People's and agents' cursors jumped to each new point, which with
throttled awareness and an agent streaming JSX made them stutter, and
following re-centered the view in one jump on every update. Cursors now
ease to each new point from wherever they are drawn, and following pans
and zooms the view there the same way, stopping in place when you take
over. With animations off or reduced motion, both move at once. Each
cursor carries an id so it keeps its glide between updates.

Co-authored-by: Victor Wads <victor@wads.dev>

* test(collab): cover MCP agents and the streaming agent in the browser

Test runs send MCP requests through the bridge's own command handler, so
a browser test can show an MCP session as an agent to the editor and to
a collaborator without a separate server. The streaming JSX test checks
that the chat's agent cursor and outline follow the newest element.

Co-authored-by: Victor Wads <victor@wads.dev>

* docs: describe agent sessions, streaming cursors, and gliding follow

Co-authored-by: Victor Wads <victor@wads.dev>

* fix(ai): keep the streaming agent's name off the text it writes

The chat's agent sat at the newest streamed element's top-left corner,
so its name label covered the text being written. It now sits at the
element's trailing corner, where content grows.

Co-authored-by: Victor Wads <victor@wads.dev>

* fix(collab): end only a closed connection's own MCP sessions

When the app's connection to the MCP server closed, every MCP session's
agent left, including sessions that never came over that connection,
such as a second editor's. The bridge now remembers the sessions each
connection carried and ends only those.

Co-authored-by: Victor Wads <victor@wads.dev>

* feat(ai): follow your agents automatically while they work

Agents spun up from the chat or an MCP client worked out of sight and
then went idle, so people had to find what changed, and the agent skill
told agents to move the user's view and selection after every edit. A
Follow agents toggle in the AI panel's header, on by default, now has
the view follow our agents from the start of each run: whichever starts
first, then the next one at work once the followed agent rests. Leaving
the page, moving the view, Escape, or Stop following leaves that agent
alone until it rests; people are never followed this way. The skill no
longer asks agents to select and zoom to their work.

Co-authored-by: Victor Wads <victor@wads.dev>

* fix(collab): keep an MCP agent when a restarted bridge carries its session

Restarting MCP disconnects the old bridge and opens a new one at once,
but the browser reports the old socket's close only after its close
handshake. A tool call that reached the new connection in between was
undone by that close, which ended the session and removed its agent.
Sessions now record every connection their calls came over, across
bridges, and end only when the last of them closes.

The docs no longer say that following an agent keeps it from editing
out of sight: following moves your view, and the stale variables and
follow bullets the changelog's union merge brought back are removed.

Co-authored-by: Victor Wads <victor@wads.dev>

* test(collab): record what the bridge sends instead of an empty fake method

Co-authored-by: Victor Wads <victor@wads.dev>

---------

Co-authored-by: Danila Poyarkov <dev@dannote.net>

2026-10-07 10:04:58 +00:00

3.8 KiB

Raw Blame History

title	description
Colaboración	Edición P2P en tiempo real mediante WebRTC y Yjs, sin servidor central.

Colaboración

OpenPencil permite editar un documento entre varias personas en tiempo real. La conexión es P2P: los cambios viajan directamente entre participantes mediante WebRTC.

Iniciar una sesión

Abre el menú de colaboración, crea una sala y comparte el enlace. El identificador se genera con aleatoriedad criptográfica y no contiene datos del documento.

Quien abre el enlace entra en la misma sala. El documento inicial se sincroniza automáticamente.

Datos compartidos

Documento: cambios en formas, texto, propiedades y disposición;
Presencia: nombre, color, selección y página activa;
Cursores: posición de cada participante;
Vista: posibilidad de seguir el encuadre de otra persona;
Agentes: el chat con AI integrado, los chats de ACP y Pi harness y cada cliente MCP conectado aparecen como cursores sobre las capas que leen o editan, con una etiqueta con contorno que muestra una chispa y un nombre en clave como Fern. Mientras el chat transmite JSX, su cursor recorre los elementos a medida que aparecen y los contornea. El cursor y el contorno tienen el color de la persona que ejecuta el agente, para que se sepa de quién es. Solo se comparten su nombre, tipo, modelo, estado, página, posición y capas editadas, nunca los prompts ni las respuestas.

Modo seguimiento

Haz clic en el avatar de un participante en la barra superior para seguir su vista. Tu lienzo se desplaza y amplía para coincidir con la suya, y un marco de su color con una barra «Siguiendo a …» indica a quién sigues. Para dejar de seguir, vuelve a hacer clic en el avatar, pulsa Esc, o haz clic, desplázate, haz zoom o cambia de página por tu cuenta.

Tus propios agentes, el chat de IA y clientes MCP como Claude Code o Cursor, se siguen automáticamente mientras trabajan, para mantener a la vista lo que editan. Desactívalo con el botón de la mira en la parte superior del panel de IA. Si dejas de seguir a un agente mientras trabaja, no se vuelve a seguir hasta que termine; en su siguiente ejecución se sigue de nuevo.

Un avatar cuenta los agentes que ejecuta esa persona. Pasa el cursor por encima para ver cada agente, qué hace y en qué página, y haz clic en Seguir junto a un agente para mantener a la vista la página y las capas que edita; el seguimiento continúa entre sus respuestas y termina cuando se va. El botón situado después de los avatares enumera a todos los presentes en la sala con sus agentes y funciona con el teclado. Tu propio avatar enumera tus agentes —haz clic en uno para cambiarle el nombre— y ofrece Salir de la sala.

El panel para compartir enumera a todos los presentes en la sala con los agentes que ejecutan, qué hace cada uno y en qué página. Sigue a un agente del mismo modo para mantener a la vista la página y las capas que edita; el seguimiento continúa entre sus respuestas y termina cuando se va. Haz doble clic en uno de tus agentes para cambiarle el nombre.

Arquitectura

Yjs mantiene el estado compartido mediante CRDT. Trystero descubre participantes y establece las conexiones WebRTC. Un servidor de señalización ayuda a iniciar la conexión, pero no retransmite el documento.

No es necesario crear una cuenta ni desplegar una infraestructura propia. La calidad de conexión depende de la red y de la posibilidad de establecer WebRTC entre los participantes.

Privacidad

El contenido no se almacena en un servidor de OpenPencil. Cada participante conserva una copia local. Comparte el enlace solo con personas de confianza: quien conoce la sala puede intentar unirse mientras esté activa.

Finalizar

Al cerrar la sesión se eliminan los participantes remotos y sus cursores. Los cambios ya sincronizados permanecen en el documento local.

3.8 KiB Raw Blame History