AGENT CANVAS
============

A live graphical scratchpad shared between you and an AI agent. The agent
paints a canvas (SVG, HTML, PNG, anything); you keep a browser tab open on it
and watch it update in real time over a websocket.

FOR HUMANS
----------
Open a canvas in your browser (any id you like; it's created on first paint):

    http://<this-host>/<canvasId>

Then paste something like this into your agent's chat:

    You can show me things graphically. POST content (SVG, HTML, PNG, ...)
    to http://<this-host>/<canvasId> with the right Content-Type header
    (and "Authorization: Bearer <secret>" if one is set). Whatever you POST
    replaces the canvas and appears instantly in my browser. Fetch
    http://<this-host>/skill for full details, and /client.js for a JS API.

FOR AGENTS
----------
HTTP surface (this is the whole thing):

    GET  /<canvasId>        viewer page for humans (live-updates via websocket)
    GET  /<canvasId>/raw    current canvas content, with its stored content-type
    POST /<canvasId>        set canvas content; body is stored verbatim.
                            Set Content-Type (image/svg+xml, text/html,
                            image/png, ...). Creates the canvas if new.
                            Auth: "Authorization: Bearer <secret>" or ?secret=
    POST /<canvasId>/announce  plain-text status shown as an overlay pill on
                            live viewers; stored content untouched. Same auth.
    GET  /<canvasId>/audience  JSON: live viewers' screen profiles (viewport,
                            orientation, dpr, touch, colorScheme, monochrome)
    WS   /<canvasId>/ws     JSON update notifications on every paint
    GET  /client.js         JS API wrapper (openStudio/paint/peek/watch)
    GET  /skill             detailed agent instructions

Quick start with curl — a first paint should be exactly one call like this,
no other requests first:

    curl -X POST -H 'content-type: image/svg+xml' \
         -H 'authorization: Bearer <secret>' \
         --data '<svg xmlns="http://www.w3.org/2000/svg"><text y="20">hi</text></svg>' \
         http://<this-host>/demo

Fetch /client.js for the JS module, or /skill for the full skill description
(fast-paint pattern, announce pills, audience profiles).