* feat(chat): attach images by dropping them on the chat
Images could be attached with the attach button or by pasting, but a
drop on the chat did nothing: the window's document drop handler left
images to the canvas, so they were dropped silently.
Images dropped anywhere on the chat panel now attach, through the same
path as the attach button and paste, with the same limits and errors.
While images are dragged over the panel, an outline over the composer
says where they go, or why they cannot be attached while a reply runs or
four images are already attached. SVG images are drawn as PNGs, since
vision models take raster images. A drag without images, such as a
.fig, is left to the window, which opens documents.
The canvas and the chat share AppDropOverlay, a typed feedback component
with a light tint over surfaces and a cover over fields.
* fix(chat): style tables, menus, and link prompts in AI replies
vue-stream-markdown drew tables with semibold, filled rows at 14px, with
copy, download, and fullscreen buttons above each; its tooltips doubled
with the browser's, and the link confirmation it teleports out of the
message had no app colors, since the token mapping sat on the message
element only.
The token mapping now lives in markdown.css on the renderer's
.stream-markdown elements, so teleported dialogs and menus use app
colors. Tables use regular weight, a light header, and the chat density's
size, with copy as their only action; task items show their checkbox in
place of the bullet; the copy menu and link prompt follow the app's
menus and dialogs. Hover labels use the app's tooltip, while click menus
keep the renderer's. Links no longer request each site's favicon.
* fix(chat): keep an SVG drawn after sending out of the next message
Drawing a dropped SVG as PNG takes a moment. A message sent or cleared
meanwhile no longer gets the image added to the following draft: each
draft has a generation that sending and clearing advance, and an image
finished for an earlier one is dropped.
* feat(MCP): follow agent activity in canvas
* feat(collab): show MCP, ACP, and harness sessions as agents
MCP clients worked on the document unseen: only the built-in chat had a
presence, and following agent activity meant a separate setting that
moved the viewport after every MCP tool. Each MCP session now shows as
an agent with a callsign in its owner's color, like the chat: the MCP
server forwards the session and the client's name with each tool call,
the app's own ACP and Pi harness chats mark their sessions with a
header, and the agent points at the layers each call reads or changes
on their page. It rests after a quiet spell, leaves when its session
ends or the server disconnects, and collaborators see it through
awareness. Following it works like following anyone else, from the
avatars, so the default-on follow setting and its viewport fitting go.
Co-authored-by: Victor Wads <victor@wads.dev>
* feat(ai): move the chat's agent through JSX as it streams
While the built-in chat streamed a render call, its preview grew on the
canvas but the agent stood still until the tool finished. The preview
now reports, after each update, the element that appeared last and the
bounds of what the JSX builds; the agent's cursor follows that element
and its outline traces the preview, for collaborators too, until the
tool runs and the agent outlines the real layers. Peers' outlines are
validated and capped like their selections.
Co-authored-by: Victor Wads <victor@wads.dev>
* feat(collab): glide cursors and the followed view instead of jumping
People's and agents' cursors jumped to each new point, which with
throttled awareness and an agent streaming JSX made them stutter, and
following re-centered the view in one jump on every update. Cursors now
ease to each new point from wherever they are drawn, and following pans
and zooms the view there the same way, stopping in place when you take
over. With animations off or reduced motion, both move at once. Each
cursor carries an id so it keeps its glide between updates.
Co-authored-by: Victor Wads <victor@wads.dev>
* test(collab): cover MCP agents and the streaming agent in the browser
Test runs send MCP requests through the bridge's own command handler, so
a browser test can show an MCP session as an agent to the editor and to
a collaborator without a separate server. The streaming JSX test checks
that the chat's agent cursor and outline follow the newest element.
Co-authored-by: Victor Wads <victor@wads.dev>
* docs: describe agent sessions, streaming cursors, and gliding follow
Co-authored-by: Victor Wads <victor@wads.dev>
* fix(ai): keep the streaming agent's name off the text it writes
The chat's agent sat at the newest streamed element's top-left corner,
so its name label covered the text being written. It now sits at the
element's trailing corner, where content grows.
Co-authored-by: Victor Wads <victor@wads.dev>
* fix(collab): end only a closed connection's own MCP sessions
When the app's connection to the MCP server closed, every MCP session's
agent left, including sessions that never came over that connection,
such as a second editor's. The bridge now remembers the sessions each
connection carried and ends only those.
Co-authored-by: Victor Wads <victor@wads.dev>
* feat(ai): follow your agents automatically while they work
Agents spun up from the chat or an MCP client worked out of sight and
then went idle, so people had to find what changed, and the agent skill
told agents to move the user's view and selection after every edit. A
Follow agents toggle in the AI panel's header, on by default, now has
the view follow our agents from the start of each run: whichever starts
first, then the next one at work once the followed agent rests. Leaving
the page, moving the view, Escape, or Stop following leaves that agent
alone until it rests; people are never followed this way. The skill no
longer asks agents to select and zoom to their work.
Co-authored-by: Victor Wads <victor@wads.dev>
* fix(collab): keep an MCP agent when a restarted bridge carries its session
Restarting MCP disconnects the old bridge and opens a new one at once,
but the browser reports the old socket's close only after its close
handshake. A tool call that reached the new connection in between was
undone by that close, which ended the session and removed its agent.
Sessions now record every connection their calls came over, across
bridges, and end only when the last of them closes.
The docs no longer say that following an agent keeps it from editing
out of sight: following moves your view, and the stale variables and
follow bullets the changelog's union merge brought back are removed.
Co-authored-by: Victor Wads <victor@wads.dev>
* test(collab): record what the bridge sends instead of an empty fake method
Co-authored-by: Victor Wads <victor@wads.dev>
---------
Co-authored-by: Danila Poyarkov <dev@dannote.net>
* fix(ai): confirm deleting a conversation in the standard dialog
Deleting a conversation asked inside the chat panel's header, unlike every other destructive confirmation, which uses AppConfirmationDialog. It now opens that dialog, which names the conversation; Cancel keeps it and Delete removes it.
* feat(ai): dim a reverted reply's content
A reverted reply still showed its tool cards with their success marks and its text as if the edits were there; only the line below said otherwise. Its content is now dimmed, while the Changes reverted or Restore changes line and the other actions stay at full strength.
* ci: typecheck the test suites in Code quality
bun run check runs check:test-types, but PR CI did not, so tests that no longer type-checked could merge and break bun run check on master, as the grid fixtures from #866 did. It runs as a step of Code quality, which already builds the package declarations it needs; the check takes about two seconds, less than a separate job's setup.
* test(ai): time the reasoning auto-close with the fake clock
The test slept 1200 ms of real time past the 1000 ms auto-close to show that a manually opened block stays open, which was timing-dependent under load. It now advances Playwright's clock past the timer. With manual opening ignored, it fails.
* test(ai): skip file identity on Playwright's bundled Chromium on macOS
There, reading a FileSystemFileHandle back from IndexedDB closes the page before any app code runs, so the test always failed locally on a Mac. Installed Google Chrome on the same machine reads and compares the handle correctly, and the app's resolveFile returns one ID for twelve concurrent calls there. The skip is limited to the bundled build on macOS.
* fix(settings): keep a model picker open while the editor slides in
The models panel focused the editor's first field after its enter transition, even when focus had already moved into the editor, closing a picker opened during the animation. It now leaves focus alone once it has moved since the editor opened.
* test: serve a fixed model catalog and wait for the editor before Settings shortcuts
Chat tests fetched the live models.dev catalog, so the model list changed under them; they now get a small fixed one. The credentials test pressed the Settings shortcut before the editor was ready.
* fix(settings): move drill-in focus with Reka's FocusScope
The drill-in focused the detail's first field after its slide-in ended, found by querying the DOM, and restored focus by hand, so a picker opened during the slide closed. FocusScope now focuses the detail as it mounts and returns focus to what opened it. A caller can prevent open-auto-focus to focus its own field, which the models panel does for the profile name through the editor's exposed focus().
* test(ai): answer the Vision model's request in chat tests
A message with images is analyzed by the Vision model, which calls OpenRouter directly rather than the mocked chat transport. With the test key the request failed, and since #916 a failure before dispatch takes the message back, so the WebKit history test never got a reply. The chat fixture now answers that request with fixed findings.
* test(ai): check that deletion persists and reverted replies dim
The delete test passed even if the conversation stayed in storage, since the panel clears its messages before the store removes it; it now reloads and checks the history. The revert test checked only data-reverted; it now checks the rendered opacity too.
* feat(core): add visual diff and patch apply tools
diff_visual renders two nodes at one scale through the existing raster export, compares them with pixelmatch, and returns the diff PNG with the changed ratio and region in source-node coordinates. It takes export_image's scale and maxEdge inputs. FigmaAPI gains a CanvasKit-backed raster codec and a pageId export option, so the app and headless CLI decode pixels and render nodes off the current page.
diff_apply applies diff_create and diff_show patches through the Figma API, validates every node before changing any, and supports dryRun and force. diff_show now simulates changes on a detached copy with the same property code. One serializer and parser back all three. diffDocuments compares two documents page by page by name path.
Image tool results now reach models as media with their metadata as text, for any tool rather than export_image alone. diff_create, diff_jsx, and diff_visual join the default AI tool set, and the diff tools are no longer hidden from WebMCP.
* feat(ai): show what each AI edit changed in its tool call
Reviewing an AI run meant reading tool output or undoing steps to see
what moved. Each document-changing call now rebuilds its page before
and after from snapshots taken around it, and diffs each top-level
layer's JSX with jsdiff, the same patch diff_jsx returns, to find the
layers it changed. After the call returns, the changed region renders
in both states at one size and pixelmatch highlights the difference.
The tool card opens on a Changes view with a before/after slider, the
pixel highlight, and a CodeMirror merge view of the JSX. Records are
saved with the conversation next to attachments.
Calls snapshot their page individually instead of through one shared
variable, so concurrent calls in a step no longer overwrite each
other's undo state. Core gains graphFromPageSnapshot for rebuilding a
past page state, diffPageLayersJSX and jsxPatch (now shared with
diff_jsx), renderRegionToImage for rendering two states of one region
pixel for pixel, and comparePNGs on the raster codec. Settings > Chat >
Change previews sets the stored image size or turns images off.
* feat(cli): add diff commands and agent diff guidance
openpencil diff create, jsx, show, apply, and visual run the Core diff tools on a file or the running app; apply writes back with --write or --output like eval. diff files compares two documents page by page and exits 1 when they differ.
The chat prompt asks the agent to edit in place and to verify risky edits against a reference copy with diff_jsx, diff_create, and diff_visual. The skill, CLI reference, MCP tool table, and a new Comparing Designs page document the commands and tools.
* feat(ai): render tool calls as summarized, highlighted cards
Every tool call showed only a status and its output as a JSON string,
so render calls hid their JSX, export_image dumped base64, and long
runs filled the transcript with identical rows.
A call now shows a one-line summary read from its input and chips that
select and zoom to the layers it touched, switching to the run's page
when needed. Expanded, it shows the JSX or script it wrote and its
JSON input and output in a read-only CodeMirror view, and exported
images inline. Render calls can be expanded while their input streams,
so the JSX appears alongside the canvas preview. Consecutive calls
beyond three fold into one row that keeps the latest call visible.
CodeMirror loads with the first expanded call. The code theme gains a
monospace fallback because the editor font variable is not always
emitted.
* feat(ai): let the chat AI diff its run against the starting state
The diff tools compare two nodes, so checking an edit meant cloning a
reference first, which the agent rarely did. diff_changes compares the
current page, or one node under it, with the page as it was before the
run first edited it, in diff_create's patch format. The app keeps that
page snapshot per run and exposes it through FigmaAPI.changeBaseline;
MCP and WebMCP have no run, so the tool is offered only to the AI chat,
where it is enabled by default and the prompt asks for it before
reporting.
* feat(ai): revert, regenerate, and edit chat turns
A reply that went wrong could only be undone step by step from the Edit
menu, and asking again meant typing a new message on top of the old
edits. Each run now keeps the undo entries its document edits push, and
the reply offers Revert changes while those entries are still the
newest on the undo stack, so it never undoes an edit made since. The
last reply can be regenerated, and the last message without
attachments edited and sent again; both undo the replaced reply's edits
first when they can.
UndoManager gains peekUndo so a caller can tell whether its entries
are still on top, and turn state follows the store's history:changed
event. The submission's chat dependency narrows to the members it uses.
* feat(core): diff and patch node trees as JSX attributes
diff_create, diff_show, diff_apply, and diffDocuments used a hand-rolled
`key: value` property format that covered about fifteen properties,
matched children by name path, and could not see moves.
Nodes are now projected to the attributes the JSX export prints, and
jsondiffpatch matches children (by ID or by name path) and detects
moves. Patches list `-`/`+` attribute lines per node plus moved, added,
and removed children. diff_apply checks every hunk first, applies
attribute changes through the renderer's prop handling, and changes only
the fields an attribute moves, so IDs, instance links, and other state
survive. diff_show takes JSX attributes instead of a JSON props object.
design-jsx gains sceneNodeAttributes, parseJSXAttributes, and
jsxNodeFields for this, and the export round-trip property table is
shared so every case is also diffed and applied. `diff files` loads its
documents in order so node IDs, and so its patches, are deterministic.
* feat(ai): report diff_changes as a patch diff_apply can replay
diff_changes printed a unified diff of the JSX, which agents could read
but not apply. It now diffs the run's baseline against the live page
with the patch engine, matching nodes by ID, so a rename is a changed
name and the output replays on the starting state with diff_apply. The
chat's Changes view keeps the JSX line diff, which is for people.
* chore: format the merged AI tool exports
* fix(core): keep diff_apply atomic and diff files honest about differences
- Added nodes render before anything else changes; if one fails, for
example on a missing component, the rendered ones are deleted and
nothing else is committed.
- A hunk with an attribute the renderer ignores fails instead of
reporting "unchanged".
- diffDocuments reports `changed` from page statuses, and a page only
one document has gets its status but no patch, since patches do not
add or remove pages. diff files uses it, so an added empty page no
longer reads as a match.
- diff files rejects a --page neither document has and a --depth that
is not a non-negative integer, exiting 2; diff_create's depth is
validated the same way.
* refactor(ai): drop the unused tool JSON slot and place the JSX summary comment
* refactor(ai): find a tool change's clipping region with jsdiff
clipChangedJSX scanned both JSX sources character by character for their common start and end. diffLines gives the unchanged lines before the first change and after the last; the app now declares the diff dependency Core already uses.
* fix(ai): keep a turn revertable when it ends with a view change
Every mutating AI tool pushes an undo entry, but a turn recorded only those of tools that change the document. A run that closed with viewport_zoom_to_fit left that entry on top of the undo stack, outside the turn, so Revert changes never appeared and Regenerate did not undo the reply. The turn now records every entry its run pushes.
* test(ai): give the fake chat Chat's sendMessage signature
The test type check added in #896 rejects a fake whose sendMessage requires text; Chat's takes an optional message, and the fake reads only its ID.
* feat(ai): keep reverted replies marked and tell the model about them
Reverting a reply undid its edits and hid the button, so the chat still read as if the edits were there, and the model's next request still carried the tool calls and results that made them, so it could build on nodes that no longer existed. A reverted reply is now marked in its message metadata, which conversations store, and shows Changes reverted. The next request carries a hidden note, in the way referenced nodes are passed, for each revert no request in the history has reported; a resent message reports again what the message it replaces reported. Edit > Redo bringing the edits back removes the mark. The revert bookkeeping lives in submission/reverts.ts, and ChatInstance moves to submission/types.ts beside ChatSubmission.
* fix(ai): keep reverted replies cloneable so the chat still saves
Marking a reply copied the chat's reactive message, so the copy carried proxied parts and saving the conversation failed with DataCloneError on the revert and on every save after it. The message is unwrapped before it is copied. The unit test's chat now keeps messages in a deep ref like @ai-sdk/vue's Chat and saves them synchronously like the history does, which reproduces the error. A new browser test drives the app's own tool loop with a scripted model: it reverts a real render, checks the mark, the note in the next request, that the chat saves without errors, and that the mark is still there after reopening the conversation.
* feat(ai): restore a reverted reply's changes from the chat
A reverted reply only said Changes reverted, so bringing its edits back meant Edit > Redo. While nothing has been edited since the revert, the reply now offers Restore changes, which redoes exactly its edits; the existing Redo listener then removes the mark. Once other edits close Redo, the reply stays marked. UndoManager.peekRedo mirrors peekUndo, so a turn can tell its entries are the next Redo applies.
* build: typecheck the test suites
Tests were in no TypeScript program: no tsconfig included tests/** or
packages/*/tests/**, and bun strips types without checking them, so a
fixture could drop a required field and keep passing until something
read it.
@types/bun moves to the root because it was installed per package only,
and #cli-tests/* joins the paths the root config already carries.
* test: fix the type errors the test suites were hiding
Typechecking the tests turned up 1123 errors. Most were ordinary
strictness, but some were real: `NodeChange` bound to Figma's plugin
typings rather than the Kiwi codec in thirteen .fig tests,
materializeInstance was called with six arguments against five so the
blobs and source children were dropped, CanvasKit pixels were written
to a plain object that never reached WASM, and assertions were made
through accessors that do not exist, so they asserted nothing.
Fixtures that had quietly lost a required field now carry it, nullable
results are narrowed through the existing expectDefined helper rather
than assumed, and stand-ins for CanvasKit and the editor go through one
named helper instead of an unexplained cast at each site.
No test was deleted, skipped, or weakened, and no `any`, non-null
assertion, or ts-expect-error was introduced.
* docs: record what typechecking the tests established
Pins the app program's global types with an assertion rather than a
note, since an unpinned types list lets any root @types package decide
which platform src/** is judged against.
The two environment faults that look like code regressions — Vite's
dependency pre-bundle outliving a package rebuild, and heavy .fig
suites failing under load — go to the development docs, where an
explanation belongs.
* fix: align @types/bun and keep node types resolvable when extended
The root manifest declared a newer @types/bun than every package, which
check:monorepo rejects, and pinning the app program's types left them
unresolvable from a config that extends this one out of tree.
* fix: fail the test typecheck when the compiler itself fails
The gate matched diagnostics by substring, so a compiler or config
failure that named no test file printed a pass while having checked
nothing. Diagnostics are now split by whether they name a file: an
unscoped one is the run failing and stops the gate, a test file's is a
finding, and a source file's stays out by design.
Also drops the parameter planComponentConstruction never read, and
makes the inner-shadow verification script exit non-zero when it
renders no image instead of logging and succeeding.
* chore: merge master into tests-typecheck
Reasoning effort was a free-text profile field that only reached OpenAI
and OpenRouter, so Anthropic, Google, and DeepSeek models never thought
in direct chat. AI SDK 7 standardizes a `reasoning` call option that
those providers map to their own thinking settings, so profiles now
store one typed thinking level, shared with Pi, and requests pass it
through that option. OpenRouter's provider ignores the standard option
and receives its own reasoning option instead.
The composer offers the level next to the Design profile and reads it
per request, so a change applies to the next message without
rebuilding the transport. Saved profiles migrate from the Pi level or
the old effort string. Finished reasoning shows how long the model
thought while the block streamed.
* feat: preview streamed JSX on the canvas
Project incomplete JSX into isolated scene graphs and disposable pictures without mutating the document or adding intermediate undo entries. Share placement with final rendering and cover lifecycle and placement parity with AI SDK mocks and visual tests.
* test: require partial input for unfinished coordinates
Assert the complete partial object so rejecting the entire input cannot satisfy the truncated-exponent regression test. Addresses CodeRabbit's review finding on #692.
* feat(ai): keep a chat run on its page across page switches
Page switches go through the editor's preparation flow, and the chat panel treated every preparation as a document change: it dropped its Chat and reloaded history, detaching the panel from a reply still in progress. The panel now keeps the live chat unless the tab or the conversation changes.
AI tools also followed the page on screen, so a user browsing mid-run sent the next edits elsewhere, and the agent's own switch_page affected only one call. A run now pins the page where the message started; switch_page moves the run and the user's view, and streamed previews stay attached to the run's page, which the renderer draws only while that page is on screen.
Page snapshots now restore the page they were taken of, so undoing an AI edit works while another page is visible.
* refactor(core): share picture recording and export preparation with previews
Preview recording reimplemented three pieces Core already had: world-bounds picture recording (also duplicated by render chunks and the retained backing), font and layout preparation (prepareForExport), and page subgraph extraction. Extract recordWorldPicture and withWorldViewport for all three recorders, reuse prepareForExport, and add extractPageContext and findPageChildId next to the other subgraph helpers instead of editing a cloned graph's nodes.
prepareForExport also kept the shared layout text measurer overridden across an await, so a concurrent layout could measure with the export renderer. withTextMeasurer scopes the override to the synchronous layout.
* fix(design-jsx): inline nested fragments in streamed previews
The streaming projection kept a nested fragment as an empty-type node, which rendered trees inline, so a preview of <Frame><>…</></Frame> failed with 'Unknown element: <>'.
* refactor(ai): schedule previews and gate test streams with VueUse
The preview controller hand-rolled a trailing timer and abort-listener cleanup, and the test stream gate a promise resolver and listener set. Use useDebounceFn with maxWait (a lone delta still flushes, unlike useThrottleFn with leading off), useEventListener, and until(). Share the mock token usage between chat tests.
* fix(ai): keep previews alive through document edits and slow builds
Document edits finished every preview call, and onInputStart never restarts one, so a render call committing while a second was still streaming ended the second call's preview for good. Edits now invalidate: drop the shown artifact and rebuild on the new document.
A build that finished after another delta arrived was discarded, so a steady stream that outpaced staging and recording never showed a preview. Show it, then render the newer revision.
* docs(changelog): separate the Fixed heading from its entries
Add the blank line markdownlint (MD022) expects after the heading, and drop the one that split the Fixed list in two.
* feat: persist AI conversations and add chat history
Store transcripts and attachment previews in IndexedDB, separate conversation history from transport lifetime, and add document-aware switching with shared Storybook coverage. Preserve interrupted activity and guard stale writes and async switches.
* test: group chat history tests by domain
* feat: simplify chat history navigation and diagnostics
Use a compact header with searchable document-scoped history and a correctly anchored conversation menu. Move diagnostic copying into the menu with copy-result feedback, and separate Storybook fixtures from composition.
* fix: address chat history review findings
* test: cover harness shutdown and restored chat scrolling
* fix: preserve Portless proxy port in MCP routes
* docs: clarify UI animation conventions
* feat: configure reasoning display and animate disclosure
* fix: separate transcript following from reasoning disclosure
* fix: restore selected chat after document recovery
* refactor: separate chat history persistence and sessions
* style: format reasoning story imports
- Classify authentication, access, model, rate-limit, network, and credit errors\n- Preserve the original provider error across the no-output stream consequence\n- Add optional toast actions for opening model settings\n- Consume handled chat send rejections to avoid global unhandled errors\n- Localize provider failure guidance and cover the authentication flow
- Replace the shared serial page with isolated configured-chat fixtures\n- Split composer, attachment, Markdown, profile, navigation, and response behavior\n- Use Playwright's structured @real-llm tag with a credential-gated config\n- Keep mock stream construction and page operations in focused helpers
- Keep deterministic chat tests permanently bound to the mock transport\n- Add an explicit @real-llm Playwright project and package script\n- Skip the paid OpenRouter smoke test clearly when its credential is absent
- Move chat app setup and shared locators into the test helper domain\n- Move mock AI stream construction out of the panel specification\n- Keep the panel behavior suite focused on user-facing assertions
Danila Poyarkov