82a600b512
* feat(canvas): draw agents' cursors as outlined sparkles Editor state's remoteCursors becomes presenceCursors with a kind, since the list now includes local agents. People keep the filled arrow; an agent is a sparkle outlined in its owner's color, with an outlined name pill, so whose agent it is reads from the outline. Cursor drawing moves out of the pen overlay into canvas/overlays/presence.ts. * feat(app): publish AI agent presence to collaborators The built-in chat now appears as an agent with a callsign while it replies, at the nodes its tools touch on the run's page, and goes idle (off the canvas) when the reply ends. Agents live in a per-document presence registry and are published in their owner's awareness state, so collaborators see each other's agents in the owner's color; the payload is metadata only. Peer awareness was cast without checks. It is now validated with Valibot, invalid fields are dropped rather than the peer, and names, selections, and agent counts are bounded. * feat(app): follow agents and list them in the share panel Following lived in collab and only knew people. It moves into the presence registry with a person-or-agent target, so you can follow anyone's agent, including your own outside a room: the view goes to the agent's page and keeps its cursor centered, stays attached while it idles between replies, and lets go when it leaves. A new editor action, centerOn, replaces reading the canvas size from the DOM. Peer cursors keep their zoom so following a person still matches it. The share panel lists everyone in the room with their agents, each with its status, page, and a follow toggle, and your own agents can be renamed inline. CollabPanel moves to collab-panel, and the two-browser relay helpers move out of the collab spec into tests/helpers/collab. * docs(collaboration): list the agent model among shared presence * test(vue): a canvas story for presence cursors Storybook now serves CanvasKit, so a story can render the real canvas: people's arrows and agents' outlined sparkles, with controls for names, colors, and zoom. * feat(canvas): mark agents with a sparkle label instead of a sparkle cursor A sparkle on its own did not read as a pointer. Agents now point with the same filled arrow as people, in their owner's color, and their outlined label starts with a sparkle. * refactor(app): split the collaboration theme by component One 18-slot theme served five components that each used a few slots, with variants that applied to one slot. Avatars, the share button, the presence list, page markers, and the mobile presence popover now have their own themes, exported as tv() like the rest of src/theme. * fix(app): truncate an agent's status before its name in the presence list In a narrow share panel the status kept its width and the callsign shrank to its first letter. * feat(app): show presence and following on the toolbar avatars The share popover held who was online, the Share button turned into a Connected status, and following gave no feedback. Collaborators' avatars now count their agents and list them on hover, your avatar holds your agents and Leave room, and +N collects the rest. A frame and bar in the followed color show whom you follow; your own input or Escape stops it. The share popover keeps the room link, and Share keeps its label. * fix(app): address review of following from the avatars Escape stops following from the follow frame, once and not while typing or after another control handled it. The frame shows the agent sparkle as an icon. A test pins that following survives the target changing pages mid-switch, and the test relay tolerates frames that are not JSON. * fix(app): follow until you leave, wait for silent peers, reach agents by keyboard Following records the page it put you on, so any other page change ends it, even of a resting agent that would otherwise pull you back later. A present peer without a cursor yet is waited for instead of dropped. The room list button is always there, so keyboard users reach agents that hover cards only show to the mouse. centerOn ignores points too far away to represent, and the docs describe following from the avatars. * fix(app): stop following on any zoom of yours, and keep follow switches from restarting Keyboard and menu zoom changed the view without the pointer or wheel input the frame listens for, so following kept going and later undid the zoom; any viewport change following did not make now ends it. Cursor updates no longer restart a switch already heading to the same page, which could keep a slow page from committing. The room's connected store is reactive, and agent rename starts on a single click. * fix(app): never loop on a followed cursor's unknown page, and stop on zoom mid-switch A peer's cursor could name a page this document lacks; following then retried a switch that never moved, forever. Following now waits on such cursors and only re-syncs after a switch that landed. A page switch restores its viewport without viewport:changed, so your zoom during a follow switch now stops following too. * fix(app): cancel a loading follow switch when following stops Stopping following, by Escape, your own input, or zoom, left a follow page switch loading, which then took you to their page anyway. Stopping now overtakes it with a switch to the page you are on.
2.4 KiB
2.4 KiB
| title | description |
|---|---|
| Collaboration | Real-time collaborative editing via P2P WebRTC — no server, no account. |
Collaboration
Edit designs together in real time. Peers connect directly — no server relays your data, no account required.
Sharing a Room
- Click the share button in the top-right corner
- Copy the generated link (
app.openpencil.dev/share/<room-id>) - Send it to your collaborators
Anyone with the link can join. The room stays active as long as at least one participant has the page open.
What Syncs
- Document changes — every edit (shapes, text, properties, layout) syncs instantly
- Cursors — see where each collaborator is pointing, with their name and color
- Selections — highlighted selections are visible to everyone
- Agents — the built-in AI chat appears as a cursor at the layers it is editing, its outlined label showing a sparkle and a callsign such as Fern. The cursor and outline have the color of the person running it, so you can tell whose agent it is. Only its name, kind, model, status, page, position, and edited layers are shared, never prompts or replies.
Follow Mode
Click a collaborator's avatar in the top bar to follow their viewport. Your canvas pans and zooms to match their view, and a frame in their color with a “Following …” bar shows whom you follow. Click the avatar again, press Esc, or click, scroll, zoom, or switch pages yourself to stop.
An avatar counts the agents that person runs. Hover over it to see each agent, what it is doing, and on which page, and click Follow next to an agent to keep the page and layers it is editing in view; following continues between its replies and stops when it leaves. The button after the avatars lists everyone in the room with their agents, and works from the keyboard. Your own avatar lists your agents — click one to rename it — and has Leave room.
How It Works
Peers connect directly via WebRTC — your design data goes straight from browser to browser, never through a central server. The document state uses a CRDT (conflict-free replicated data type), so concurrent edits merge automatically without conflicts.
The room persists locally — if you refresh the page, you rejoin with the same state.
Tips
- Works in the browser and the desktop app
- Room IDs are cryptographically random — only people with the link can join
- Stale cursors are cleaned up automatically when someone disconnects