8d132ce070
* fix(vue): keep the command palette open when a command opens a step CommandPaletteRoot emitted select for every item, including one that only opens its children, so a host that closes on select closed the palette instead of showing the step. useCommandPalette.select now reports whether a command ran, and the root emits only then. Disabled items were marked only with Reka's data-disabled; expose aria-disabled so assistive technology announces them. * feat(app): jump between pages from the command palette The palette had no way to reach a page. It now lists the pages visited recently in the tab, offers a Go to page step with every page, and finds any page by name. Recent pages are tracked per editor session from page changes and reset when the document is replaced. Palette items can be search-only, so pages beyond the recent ones appear only when the query matches them. The divider-page rule moves out of PageListRoot so the palette skips dividers the same way, and useCommandPalette is exported from the package root. * 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. * feat(app): show who works on each page Agents now publish the page they work on, set when a reply starts on its pinned page and moved by switch_page, so a page is marked before the agent's first edit. presenceByPage groups people and working agents by page. The Pages panel marks those pages with people's dots and agents' outlined sparkles in their owner colors, the command palette names who is on each page, and the chat says which page a reply is working on, with Go to page, while you view another one. * docs(collaboration): list the agent model among shared presence * test(app): stories for page presence markers and the chat's run location The run location notice reads app state, so it moves into useChatRunLocation and the component takes the agent and page as props. * 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): right-align page badges in a trailing area of the page row Presence markers followed the page name. The row now has a trailing area, right-aligned with its own spacing, where markers and later page badges go. * fix(app): key page markers by person or agent, not by name Two people with the same name on a page, such as two Anonymous peers, gave page markers duplicate keys. Entries now carry a stable id.
44 lines
2.7 KiB
Markdown
44 lines
2.7 KiB
Markdown
---
|
|
title: Collaboration
|
|
description: 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
|
|
|
|
1. Click the share button in the top-right corner
|
|
2. Copy the generated link (`app.openpencil.dev/share/<room-id>`)
|
|
3. 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 <kbd>Esc</kbd>, 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**.
|
|
|
|
The share panel lists everyone in the room with the agents they run, what each agent is doing, and on which page. Follow an agent the same way to keep the page and layers it is editing in view; following continues between its replies and stops when it leaves. Double-click one of your own agents to rename it.
|
|
|
|
## 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
|