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>
6.1 KiB
| title | description |
|---|---|
| Współpraca | Jednoczesna edycja bezpośrednio między uczestnikami przez WebRTC, bez osobnego serwera i konta. |
Współpraca
Kilka osób może jednocześnie edytować jeden dokument. Uczestnicy łączą się bezpośrednio, dlatego centralny serwer nie przekazuje danych, a konto nie jest wymagane.
Udostępnianie pokoju
- Kliknij przycisk „Udostępnij” w prawym górnym rogu.
- Kliknij Udostępnij ten plik — odnośnik
app.openpencil.dev/share/<room-id>zostanie skopiowany. - Wyślij go innym uczestnikom.
Tylko udostępnienie umieszcza dokument w pokoju: karta, z której udostępniasz, staje się kartą pokoju i pozostaje powiązana ze swoim plikiem. Dołączyć może każda osoba znająca odnośnik.
Dołączanie do pokoju
Otwórz odnośnik albo wklej go (lub sam identyfikator pokoju) w polu Dołącz w panelu udostępniania lub w Dołącz do pokoju… na ekranie startowym. Pokój otwiera się we własnej karcie, więc dokumenty, które masz już otwarte, się nie zmieniają. Na komputerze przeglądarka oferuje też Otwórz w aplikacji na komputer, co otwiera pokój w OpenPencil przez odnośnik openpencil://join.
Dołączasz od razu pod wygenerowaną nazwą, na przykład Teal Fox. Własną nazwę ustawisz w panelu udostępniania lub w ustawieniach; będzie używana w każdym pokoju.
Pokoje nie są przechowywane na serwerze: plik znajduje się na urządzeniach osób, które były w pokoju, więc karta pokoju otwiera dokument tylko wtedy, gdy któraś z nich jest online. Do tego czasu karta informuje, że czeka, wyjaśnia, dlaczego i otwiera plik, gdy tylko dołączy ktoś, kto go ma. Pokój, w którym już byłeś, otwiera się od razu z kopii na tym urządzeniu, a Twoje zmiany synchronizują się, gdy inni wrócą.
Opuść pokój w panelu udostępniania kończy Twój udział w pokoju. Karta, która udostępniła swój dokument, znów staje się tym dokumentem; karta, która dołączyła, zachowuje plik pokoju jako lokalną, niezapisaną kopię, którą możesz zapisać. Każda karta pokoju ma własne połączenie, więc możesz być w kilku pokojach jednocześnie.
Synchronizowane dane
- Dokument: figury, tekst, właściwości i układ są aktualizowane po każdej zmianie.
- Kursory: widoczne są położenie, nazwa i kolor każdego uczestnika.
- Zaznaczenie: obiekty wybrane przez innych są widoczne dla wszystkich.
- Agenci: wbudowany czat AI, czaty ACP i Pi harness oraz każdy połączony klient MCP pojawiają się jako kursory przy warstwach, które czytają lub edytują, a ich obrysowana etykieta zawiera iskrę i kryptonim, na przykład Fern. Gdy czat strumieniuje JSX, jego kursor przechodzi przez elementy w miarę ich pojawiania się i je obrysowuje. Kursor i obrys mają kolor osoby, która uruchomiła agenta, więc widać, czyj to agent. Udostępniane są tylko nazwa, rodzaj, model, stan, strona, położenie i edytowane warstwy agenta, nigdy prompty ani odpowiedzi.
Tryb śledzenia
Kliknij awatar uczestnika na górnym pasku, aby śledzić jego widok. Położenie i skala obszaru roboczego będą odpowiadać jego widokowi, a ramka w kolorze uczestnika z paskiem „Obserwujesz: …” pokazuje, kogo śledzisz. Aby przestać, kliknij awatar ponownie, naciśnij Esc albo sam kliknij, przewiń, zmień powiększenie lub przełącz stronę.
Twoi agenci, czat AI i klienci MCP, tacy jak Claude Code czy Cursor, są śledzeni automatycznie podczas pracy, więc to, co edytują, pozostaje w widoku. Wyłączysz to przyciskiem z celownikiem u góry panelu AI. Jeśli przestaniesz śledzić agenta w trakcie jego pracy, nie będzie śledzony do jej końca, a przy następnym uruchomieniu znów będzie.
Awatar pokazuje liczbę agentów uruchomionych przez daną osobę. Najedź na niego, aby zobaczyć każdego agenta, jego bieżące działanie i stronę, a następnie kliknij Obserwuj przy agencie, aby mieć w widoku stronę i warstwy, które edytuje; śledzenie trwa między jego odpowiedziami i kończy się, gdy agent odejdzie. Przycisk za awatarami wyświetla wszystkich uczestników pokoju wraz z ich agentami i działa z klawiatury. Twój awatar wyświetla Twoich agentów — kliknij jednego, aby zmienić jego nazwę — i zawiera polecenie Opuść pokój.
Panel udostępniania wyświetla wszystkich uczestników pokoju wraz z ich agentami, tym, co każdy z nich robi, i stroną, na której pracuje. Agenta śledzisz tak samo: strona i warstwy, które edytuje, pozostają w widoku; śledzenie trwa między jego odpowiedziami i kończy się, gdy agent odejdzie. Kliknij dwukrotnie własnego agenta, aby zmienić jego nazwę.
Jak to działa
Uczestnicy łączą się bezpośrednio przez WebRTC, dlatego dane dokumentu są przesyłane między przeglądarkami bez centralnego serwera.
Stan dokumentu jest synchronizowany przez Yjs CRDT, który automatycznie łączy równoczesne zmiany.
Przenoszenie i zmiana kolejności warstw również się scalają. Każda warstwa pamięta każdego rodzica, do którego została przeniesiona, i swoje miejsce wśród rodzeństwa, a każdy uczestnik wyznacza z tej historii to samo drzewo warstw (CRDT drzewa Evana Wallace’a). Przeniesienia, zmiany kolejności i nowe warstwy od różnych osób są stosowane; jeśli dwie osoby jednocześnie przeniosą tę samą warstwę, u wszystkich wygrywa to samo przeniesienie. Gdy równoczesne przeniesienia umieściłyby dwie warstwy jedna w drugiej, późniejsze przeniesienie jest cofane, a warstwa, której nowy rodzic został w międzyczasie usunięty, wraca na swoje miejsce.
Wszyscy w pokoju potrzebują wersji OpenPencil, która zapisuje drzewo warstw w ten sam sposób; wersje zapisujące je inaczej nie widzą nawzajem swoich pokojów.
IndexedDB przechowuje stan lokalny: po odświeżeniu strony automatycznie wracasz do pokoju z tym samym stanem.
Wskazówki
- Współpraca działa w przeglądarce i aplikacji komputerowej.
- Identyfikatory pokojów są tworzone z kryptograficznie bezpiecznych wartości losowych.
- Kursory i informacje o obecności rozłączonych uczestników są automatycznie usuwane.