690c1247e4
* 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>
62 lines
6.1 KiB
Markdown
62 lines
6.1 KiB
Markdown
---
|
||
title: Zusammenarbeit
|
||
description: Gemeinsame Bearbeitung in Echtzeit direkt über WebRTC, ohne zentralen Server.
|
||
---
|
||
|
||
# Zusammenarbeit
|
||
|
||
Mehrere Personen können dasselbe Dokument gleichzeitig bearbeiten. Die Teilnehmer verbinden sich direkt über WebRTC; ein Konto ist nicht erforderlich.
|
||
|
||
## Raum teilen
|
||
|
||
1. Schaltfläche „Teilen“ oben rechts öffnen.
|
||
2. **Diese Datei teilen** wählen – der Link `app.openpencil.dev/share/<room-id>` wird kopiert.
|
||
3. Link an die anderen Teilnehmer senden.
|
||
|
||
Nur „Teilen“ bringt ein Dokument in einen Raum: Der Tab, aus dem Sie teilen, wird zum Tab des Raums und bleibt mit seiner Datei verbunden. Jede Person mit dem Link kann beitreten.
|
||
|
||
## Raum beitreten
|
||
|
||
Öffnen Sie den Link oder fügen Sie ihn (oder nur die Raumkennung) unter **Beitreten** im Teilen-Panel oder unter **Raum beitreten…** auf der Startseite ein. Der Raum öffnet sich in einem eigenen Tab, sodass bereits geöffnete Dokumente unverändert bleiben. Auf einem Computer bietet der Browser außerdem **In der Desktop-App öffnen** an; der Raum öffnet sich dann über einen `openpencil://join`-Link in OpenPencil.
|
||
|
||
Sie treten sofort unter einem erzeugten Namen wie *Teal Fox* bei. Ihren eigenen Namen legen Sie im Teilen-Panel oder in den Einstellungen fest; er gilt in jedem Raum.
|
||
|
||
Räume werden nicht auf einem Server gespeichert: Die Datei liegt auf den Geräten der Personen, die im Raum waren, daher öffnet ein Raum-Tab sein Dokument nur, solange eine von ihnen online ist. Bis dahin zeigt er an, dass er wartet, erklärt den Grund und öffnet die Datei, sobald jemand beitritt, der sie hat. Ein Raum, in dem Sie schon waren, öffnet sich sofort aus der Kopie auf diesem Gerät und synchronisiert Ihre Änderungen, sobald andere zurückkehren.
|
||
|
||
**Raum verlassen** im Teilen-Panel beendet Ihre Teilnahme am Raum. Ein Tab, der sein Dokument geteilt hat, wird wieder zu diesem Dokument; ein beigetretener Tab behält die Datei des Raums als lokale, ungespeicherte Kopie, die Sie speichern können. Jeder Raum-Tab hat eine eigene Verbindung, sodass Sie in mehreren Räumen gleichzeitig sein können.
|
||
|
||
## Synchronisierte Daten
|
||
|
||
- **Dokument:** Änderungen an Formen, Text, Eigenschaften und Anordnung;
|
||
- **Zeiger:** Position, Name und Farbe jedes Teilnehmers;
|
||
- **Auswahl:** ausgewählte Objekte der anderen Teilnehmer;
|
||
- **Agenten:** Der integrierte AI-Chat, ACP- und Pi-Harness-Chats und jeder verbundene MCP-Client erscheinen als Zeiger an den Ebenen, die sie lesen oder bearbeiten; ihre umrandete Beschriftung zeigt ein Funkelsymbol und einen Rufnamen wie *Fern*. Während der Chat JSX streamt, wandert sein Zeiger durch die Elemente, sobald sie erscheinen, und umrandet sie. Zeiger und Umrandung haben die Farbe der Person, die den Agenten ausführt, sodass erkennbar ist, wem er gehört. Geteilt werden nur Name, Art, Modell, Status, Seite, Position und bearbeitete Ebenen, niemals Prompts oder Antworten.
|
||
|
||
## Ansichtsverfolgung
|
||
|
||
Ein Klick auf einen Avatar folgt der Ansicht dieses Teilnehmers. Position und Zoom werden angepasst, und ein Rahmen in dessen Farbe mit einer Leiste „Du folgst …“ zeigt, wem Sie folgen. Zum Beenden klicken Sie erneut auf den Avatar, drücken <kbd>Esc</kbd> oder klicken, scrollen, zoomen oder wechseln selbst die Seite.
|
||
|
||
Deinen eigenen Agenten, dem AI-Chat und MCP-Clients wie Claude Code oder Cursor, folgt die Ansicht automatisch, während sie arbeiten, sodass im Blick bleibt, was sie bearbeiten. Abschalten lässt sich das mit dem Fadenkreuz-Symbol oben im AI-Panel. Beendest du das Folgen, während ein Agent arbeitet, bleibt er bis zum Ende seiner Arbeit unbeachtet und wird beim nächsten Durchlauf wieder verfolgt.
|
||
|
||
Ein Avatar zählt die Agenten, die die Person ausführt. Beim Daraufzeigen erscheinen alle Agenten, ihre Tätigkeit und die jeweilige Seite; mit **Folgen** neben einem Agenten bleiben die Seite und die Ebenen, die er bearbeitet, im Blick. Die Verfolgung läuft zwischen seinen Antworten weiter und endet, wenn er den Raum verlässt. Die Schaltfläche nach den Avataren listet alle Personen im Raum mit ihren Agenten auf und ist per Tastatur bedienbar. Ihr eigener Avatar listet Ihre Agenten auf – ein Klick benennt einen Agenten um – und enthält **Raum verlassen**.
|
||
|
||
Das Teilen-Panel listet alle Personen im Raum mit den Agenten auf, die sie ausführen, mit ihrer Tätigkeit und der jeweiligen Seite. Einem Agenten folgen Sie auf dieselbe Weise, um die Seite und die Ebenen, die er bearbeitet, im Blick zu behalten; die Verfolgung läuft zwischen seinen Antworten weiter und endet, wenn er den Raum verlässt. Mit einem Doppelklick auf einen eigenen Agenten benennen Sie ihn um.
|
||
|
||
## Technische Grundlage
|
||
|
||
WebRTC überträgt die Designdaten direkt zwischen den Teilnehmern. Ein zentraler Anwendungsserver leitet die Änderungen nicht weiter.
|
||
|
||
Yjs synchronisiert den Dokumentzustand als CRDT und führt gleichzeitige Änderungen automatisch zusammen.
|
||
|
||
Auch das Verschieben und Umordnen von Ebenen wird zusammengeführt. Jede Ebene merkt sich jedes Elternelement, in das sie verschoben wurde, und ihre Position unter ihren Geschwistern; jeder Teilnehmer leitet daraus denselben Ebenenbaum ab ([Evan Wallaces Baum-CRDT](https://madebyevan.com/algos/crdt-mutable-tree-hierarchy/)). Verschiebungen, Umordnungen und neue Ebenen verschiedener Personen werden alle übernommen; verschieben zwei Personen gleichzeitig dieselbe Ebene, setzt sich bei allen dieselbe Verschiebung durch. Würden gleichzeitige Verschiebungen zwei Ebenen ineinander legen, wird die spätere rückgängig gemacht, und eine Ebene, deren neues Elternelement inzwischen gelöscht wurde, kehrt an ihren vorherigen Platz zurück.
|
||
|
||
Alle Teilnehmer eines Raums brauchen eine OpenPencil-Version, die den Ebenenbaum auf dieselbe Weise speichert; Versionen, die ihn anders speichern, sehen die Räume der jeweils anderen nicht.
|
||
|
||
IndexedDB speichert den lokalen Stand: Beim Neuladen der Seite treten Sie dem Raum automatisch mit demselben Stand wieder bei.
|
||
|
||
## Hinweise
|
||
|
||
- Zusammenarbeit funktioniert im Browser und in der Desktop-App.
|
||
- Raumkennungen werden mit kryptografisch sicheren Zufallswerten erzeugt.
|
||
- Zeiger und Anwesenheitseinträge getrennter Teilnehmer werden automatisch entfernt.
|