749d7baec9
* 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. * 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.
1.8 KiB
1.8 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. Click again to stop following.
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