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.
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { expect, test, useEditorSetupWithClear } from '#tests/e2e/fixtures'
|
|
|
|
test.use({ viewport: { width: 900, height: 700 } })
|
|
|
|
const editor = useEditorSetupWithClear('/?test&no-chrome&no-rulers')
|
|
|
|
test('collaborator cursor names are shaped and long names end with an ellipsis', async () => {
|
|
await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const red = { r: 0.92, g: 0.34, b: 0.29, a: 1 }
|
|
const blue = { r: 0.2, g: 0.55, b: 0.95, a: 1 }
|
|
store.state.panX = 0
|
|
store.state.panY = 0
|
|
store.state.zoom = 1
|
|
store.state.presenceCursors = [
|
|
{ kind: 'person', name: 'Orbit', color: blue, x: 80, y: 80 },
|
|
{ kind: 'person', name: 'Ava Yoder', color: red, x: 80, y: 160 },
|
|
{
|
|
kind: 'person',
|
|
name: 'A collaborator with a very long display name',
|
|
color: blue,
|
|
x: 80,
|
|
y: 240
|
|
}
|
|
]
|
|
store.requestRender()
|
|
})
|
|
await editor.canvas.waitForRender()
|
|
editor.canvas.assertNoErrors()
|
|
expect(await editor.canvas.screenshotCanvasRegion(400, 320)).toMatchSnapshot('cursor-labels.png')
|
|
})
|