Files
Burke HollandandCopilot App 44a37b59fa Add Draw canvas extension 🤖🤖🤖 (#3729)
* Add Draw canvas extension

Draw is a GitHub Copilot app canvas for simple diagrams: shapes, arrows
that stay attached, text and a freehand pen. The user and Copilot edit the
same drawing. Copilot can create, change, lay out and export it through
canvas actions, and the Ask Copilot button sends the drawing to the chat.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address Copilot review feedback

- Refuse changes that would take a drawing past 5,000 elements with a
  clear error instead of silently dropping elements, and stop the canvas
  from retrying a refused save.
- Keep collision suffixes within the 48-character id limit.
- Keep a drawing and report the error when deleting its file fails.
- Retry failed drawing writes, and report them in the canvas and in agent
  action results instead of only logging them.
- List pen strokes in the get_drawing outline.
- Let Space and Enter work normally on focused buttons.
- Only use Tab to add a step when a shape is selected, so Tab can move
  focus out of the canvas.
- Pick readable text colors for accent and danger backgrounds.
- Hide "Bring to front" and "Send to back" when only arrows are selected,
  since arrows always draw on top.
- Report theme save failures from /api/settings and set_theme.
- Keep the top bar buttons visible when the status text is long, and
  remove leftover theme debug logging.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address second Copilot review

- Add node:test suites for the loopback server (Host and token checks,
  static file allowlist and CSP, every API route, live events and save
  error reporting), the drawing store, layout label references and
  solid-fill text contrast. Run them with `node --test` in extensions/draw.
- Give every popover an accessible name. The delete confirmation is now an
  alertdialog described by its question.
- Build the id and label lookups in buildFromSpec once, instead of once per
  element or per edge.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address third Copilot review

- Switching drawings or asking Copilot no longer goes ahead when the edits
  on screen could not be saved first. Draw stays on the drawing and offers
  "Discard changes", and a switch started by the agent moves the server back
  to the drawing the panel still shows. Deleted drawings never hold the panel.
- Agent actions write the drawing before returning, so a disk problem is
  reported by the action that caused it.
- Count edge crossings with a Fenwick tree (O(E log V)) and typed arrays.
  The layout is unchanged; the worst case is about three times faster.
- Reconnecting brings back a save error that still applies.
- The selection keeps up to MAX_ELEMENTS ids instead of 1,000.
- Tests for the actions wrapper, the selection limit and crossing counts.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address fourth Copilot review

- Stop an old save from undoing the last one. Each change the page
  sends now has a number, and the server drops one older than a change
  it already applied (refused changes do not count). The save sent when
  the panel closes also sets every element the change still on its way
  touched to what the editor shows, so either arrival order ends with
  what is on screen.
- get_drawing reads a big drawing in parts of about 30,000 characters
  (start and nextStart), can list only some ids or the selection, cuts
  labels longer than 300 characters in the outline, and counts a huge
  selection instead of listing it.
- Ask sends at most about 16,000 characters of outline and says how
  to read the rest with get_drawing.
- After switching away from a drawing with "Discard changes" while a
  save was on its way, send edits made in the new drawing once it
  returns.
- Tests for all of the above.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address fifth Copilot review

- Exports stay with the drawing they came from. The agent's export
  request names the drawing, the page answers with the id it actually
  drew, and the server turns down a mismatch instead of saving the
  image under the wrong drawing. Save as PNG and Ask read the id right
  before rendering, and Ask keeps the question if another drawing
  opens while it is sending.
- When the server tidies up a save, for example by capping a size, it
  sends the stored drawing back and the page shows that instead of
  assuming it was stored as sent. The tidy-up is not an undo step, so
  undo cannot get stuck on it.
- Shapes are capped at 5000 wide or tall everywhere. Growing a shape
  for a longer label or a bigger text size caps the height before
  centering, so the shape no longer jumps.
- Rebuilding the style bar keeps keyboard focus on the same button,
  and hiding it moves focus to the canvas.
- Edits refresh the drawing list, batched so a burst of edits sends it
  once, and a copied drawing is listed with its real element count.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address sixth Copilot review

- Ask refuses (409) to send a question when the panel shows another
  drawing than the one it is about, and the page keeps the draft. The
  context it sends now includes the drawingId.
- Actions on the shown drawing take an optional drawingId. If the canvas
  shows a different drawing, they change nothing and say which one it
  shows.
- Temp file names for atomic writes include a counter, so two writes of
  one file in the same millisecond no longer share a temp file.
- The canvas works from the keyboard and with screen readers: the SVG is
  a focusable application with a description, N and Shift+N select
  elements, Enter adds shapes and text or connects shapes with the arrow
  tool, Ctrl+Shift+Arrow resizes, and a live region reads out the tool,
  the selection and each change. Tab now moves focus instead of adding a
  step, except while typing a label.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address seventh Copilot review

- Saving: a write that fails part way (a full disk, say) no longer leaves
  its temp file behind. Every retry picks a new temp name, so these used
  to pile up.
- Diagram specs: a node or text with only x or only y is now an error that
  names the item, instead of being laid out automatically and silently
  dropping the coordinate that was given. Non-numeric x or y is an error
  too.
- Switching drawings: while the panel waits to save the current drawing
  before showing another one, the server already sends the new drawing's
  changes, save status and selection. These are now kept and applied when
  the switch finishes, instead of being dropped.
- Showing the drawing that is already on screen (an agent calling
  open_drawing on it, or two switches to the same drawing) is now a normal
  update. It no longer reloads the editor, which wiped the undo history,
  the selection and the zoom, and it no longer warns about unsaved changes
  while a save is being refused. The server keeps the panel's selection in
  that case too.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address eighth Copilot review

- State file: writes of .state.json (which drawing each panel shows) now
  run one at a time, and each one takes the state as it is when its turn
  comes. An older write that is slow to finish (Windows can briefly lock
  a file) can no longer land after a newer one, and flush() now also
  waits for a state write that had already started.
- Placement: when every spot tried next to a shape is taken, a new shape
  now goes just past everything in that direction, in line with the
  shape, instead of on top of existing content. This covers both the
  editor's "add a connected step" command and add_elements.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address ninth Copilot review

Tab in the label editor now adds the next step only for shape labels.
For free text and arrow labels it keeps its normal job and moves focus
on, and the blur saves the edit. The README and the in-app shortcut list
now say "a shape's label".

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address tenth Copilot review

- Label wrapping searches for how many words or characters fit on a
  line instead of adding one at a time, so a long label with no spaces
  is no longer quadratic. The output is unchanged.
- Arrows attached to nothing follow their elbow or curve route too.
- A selection the agent makes while the user drags or edits a label is
  shown once they finish, unless they picked something else meanwhile.
- A drawing name more than one drawing has no longer opens the first
  one; the error lists their ids, and an exact id always picks one.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address eleventh Copilot review

- Pen strokes stay bounded while drawing: once a stroke holds 10,000
  points it is simplified and thinned to 5,000. A saved stroke keeps an
  even spread of its points with both ends, instead of losing its end
  past 5,000 points. Simplification runs in pieces of 512 points, so its
  time grows in step with the stroke rather than with its square.
- Live updates send the element-level ops that made a change, against
  the drawing one change earlier, instead of the whole drawing to every
  other panel. A panel that finds a change missing fetches the whole
  drawing again.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address twelfth Copilot review

- The save a page sends as it closes is marked keepalive whenever it fits
  the browser's 64 KiB limit. That limit covers all keepalive requests
  together, so splitting would not help; a bigger save goes as an
  ordinary request.
- Pen strokes keep at most 2,000 points, so even the biggest one fits in
  that save. A test checks the biggest stroke and labels against the limit.
- A rename goes to the drawing it was typed for. It is cancelled if the
  panel moves to another drawing, it does not undo a rename the agent made
  meanwhile, and its reply never moves the panel.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address thirteenth Copilot review

- Turn down a layout that would put a shape or text past the +/-1,000,000
  position limit (very long arrow labels spread the layers that far).
  Saving used to move such positions back to the limit, stacking shapes on
  top of each other while the action reported success. set_diagram and
  add_elements now fail with invalid_diagram, and layout with
  layout_too_big, and nothing is changed.
- Fetch the drawing each time the event stream connects, not only on
  reconnects. A change made after the page loaded the drawing but before
  the server registered the new connection was never delivered.
- List text size on shapes, arrows and text, and color on text, in the
  get_drawing outline, and say that styles left out are the defaults.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address fourteenth Copilot review

- open_drawing now waits for the canvas to take the drawing. The switch
  carries an id, and the page confirms it once it shows the drawing, or,
  when it has edits it cannot save yet, moves the panel back with the same
  id. A refusal becomes an unsaved_changes error, and no answer within 10
  seconds is reported as unconfirmed, with advice to pin drawingId.
- Pen hit testing no longer makes an object for every point on every
  pointer move. Stroke extents are cached per points array, strokes out of
  reach are skipped by their box, and the rest are measured straight from
  the stored pairs.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* Address fifteenth Copilot review

- Automatic layout counts the placeholders its long arrows need before
  making any, and turns down a drawing that needs more than 100,000. A
  long chain with many arrows across it could otherwise need millions,
  which kept the extension busy for most of a minute. layout fails with
  layout_too_big, and set_diagram and add_elements with invalid_diagram,
  and nothing is changed.
- relayout now returns { elements, error } like buildFromSpec, so the
  layout action gets this and the position range check from one place.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
2026-10-07 14:46:01 +11:00
..
2026-10-07 14:46:01 +11:00
2026-10-07 14:46:01 +11:00

Draw Plugin

Draw simple diagrams in a Copilot canvas: shapes, arrows that stay attached, text and a freehand pen. Copilot can read, create and edit the same drawing.

Installation

copilot plugin install draw@awesome-copilot

Source

This plugin is part of Awesome Copilot.

License

MIT