SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/package.json
Danila Poyarkov d2fd6db141
feat(ai): show what each AI edit changed in its tool call (#812) 
* 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(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.

* 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.
2026-10-03 23:32:37 +04:00

268 lines
13 KiB
JSON
Raw Blame History

{
"name": "open-pencil-app",
"version": "0.15.1",
"private": true,
"license": "MIT",
"workspaces": [
"packages/scene-graph",
"packages/pen",
"packages/kiwi",
"packages/fig",
"packages/core",
"packages/dom-css",
"packages/design-jsx",
"packages/codegen",
"packages/vue",
"packages/cli",
"packages/mcp",
"packages/harness",
"packages/docs",
"tools",
"tools/checks/architecture",
"tools/checks/docs",
"tools/checks/i18n",
"tools/checks/lint",
"tools/checks/package-quality",
"tools/checks/secret-scan",
"tools/checks/test-homes",
"tools/checks/type-shapes",
"tools/ci/images",
"tools/ci/policy",
"tools/ci/pr-review-guidance",
"tools/dev/dev-server",
"tools/dev/navigation-benchmark",
"tools/dev/unit-tests",
"tools/generate/authoring-reference",
"tools/generate/brand",
"tools/generate/tauri-menu",
"tools/generate/visual-oracles",
"tools/release/package-artifacts",
"tools/release/release-packages"
],
"type": "module",
"scripts": {
"dev": "vite",
"dev:portless": "portless run vite",
"build": "bun run build:packages && bun run lint && vite build",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"tauri": "tauri",
"build:native-test": "bun run generate:icons --target desktop && bun run build:packages && bun tauri build --debug --no-bundle --features native-test --config desktop/tauri.native-test.conf.json",
"benchmark:navigation": "bun tools/dev/navigation-benchmark/src/cli.ts run",
"test:native": "bun run build:native-test && wdio run wdio.conf.ts",
"lint": "bun run lint:structure && oxlint -c oxlint.json --type-aware --type-check src/ packages/scene-graph/src/ packages/core/src/ packages/vue/src/ packages/cli/src/ packages/mcp/src/ packages/harness/src/ packages/dom-css/src/ packages/pen/src/ packages/design-jsx/src/ packages/codegen/src/ packages/kiwi/src/ packages/fig/src/",
"lint:structure": "oxlint -c oxlint.json commitlint.config.ts vite.config.ts vite/ .storybook/ src/ packages/scene-graph/src/ packages/scene-graph/scripts/ packages/core/src/ packages/vue/src/ packages/cli/src/ packages/mcp/src/ packages/harness/src/ packages/harness/tests/ packages/dom-css/src/ packages/dom-css/tests/ packages/dom-css/scripts/ packages/pen/src/ packages/pen/scripts/ packages/design-jsx/src/ packages/design-jsx/tests/ packages/design-jsx/scripts/ packages/codegen/src/ packages/codegen/tests/ packages/codegen/scripts/ packages/kiwi/src/ packages/kiwi/tests/ packages/kiwi/scripts/ packages/fig/src/ packages/fig/tests/ packages/fig/scripts/ packages/core/tests/ packages/cli/tests/ packages/scene-graph/tests/ packages/vue/tests/ tests/ scripts/ tools/",
"format": "oxfmt --write .oxfmtrc.json commitlint.config.ts vite.config.ts vite/ .storybook/ src/ packages/scene-graph/src/ packages/scene-graph/scripts/ packages/core/src/ packages/cli/src/ packages/mcp/src/ packages/harness/src/ packages/harness/tests/ packages/vue/src/ packages/dom-css/src/ packages/dom-css/tests/ packages/dom-css/scripts/ packages/pen/src/ packages/pen/scripts/ packages/design-jsx/src/ packages/design-jsx/tests/ packages/design-jsx/scripts/ packages/codegen/src/ packages/codegen/tests/ packages/codegen/scripts/ packages/kiwi/src/ packages/kiwi/tests/ packages/kiwi/scripts/ packages/fig/src/ packages/fig/tests/ packages/fig/scripts/ tests scripts/ tools/",
"format:check": "bun run format && status=$(git status --porcelain -uall) && test -z \"$status\" || (echo \"$status\" && exit 1)",
"check": "bun run check:icons && bun run build:packages && bun run lint && tsgo --noEmit && bun run check:vue && bun run check:native-test && bun run check:i18n && bun run check:docs && bun run check:changelog && bun run check:packages && bun run check:deps && bun run check:audit && bun run check:secrets && bun run check:monorepo && bun run check:arch && bun run check:test-homes && bun run test:type-shapes && bun run check:tools && bun run test:tools && bun run test:dupes",
"check:commits": "commitlint",
"check:changelog": "bun tools/release/release-packages/src/check-changelog.ts",
"check:deps": "knip --include unlisted,unresolved,binaries",
"check:docs": "bun --filter @open-pencil/docs check && bun run check:authoring-reference",
"check:authoring-reference": "bun tools/generate/authoring-reference/src/check.ts",
"generate:authoring-reference": "bun tools/generate/authoring-reference/src/generate.ts",
"check:audit": "bun audit --audit-level=critical",
"check:secrets": "bun tools/checks/secret-scan/src/index.ts",
"check:monorepo": "sherif --ignore-rule root-package-dependencies",
"check:native-test": "tsc --noEmit -p tests/e2e/native/tsconfig.json",
"check:i18n": "bun tools/checks/i18n/src/check-locales.ts",
"check:packages": "bun tools/checks/package-quality/src/cli.ts check",
"check:arch": "steiger .",
"check:test-homes": "bun tools/checks/test-homes/src/index.ts",
"check:vue": "vue-tsc --noEmit -p tsconfig.json && vue-tsc --noEmit -p packages/vue/tsconfig.json",
"test": "OPENPENCIL_TEST_SERVER=app playwright test --project=openpencil --grep-invert @real-llm",
"test:storybook": "OPENPENCIL_TEST_SERVER=storybook playwright test --project=storybook-chromium",
"test:real-llm": "OPENPENCIL_TEST_SERVER=app playwright test --project=openpencil --grep @real-llm",
"test:update": "OPENPENCIL_TEST_SERVER=app playwright test --project=openpencil --update-snapshots",
"test:figma": "OPENPENCIL_TEST_SERVER=app playwright test --project=figma",
"figma:debug": "open -a Figma --args --remote-debugging-port=9222",
"typecheck": "tsgo --noEmit && bun run check:vue",
"test:unit": "bun tools/dev/unit-tests/src/run.ts all --include-heavy",
"test:unit:quick": "bun tools/dev/unit-tests/src/run.ts all -- --parallel",
"test:unit:isolated": "bun tools/dev/unit-tests/src/run.ts all -- --isolate",
"test:unit:heavy": "bun tools/dev/unit-tests/src/run.ts all --heavy-only -- --timeout 180000",
"test:coverage": "bun tools/dev/unit-tests/src/run.ts all --include-heavy -- --coverage",
"test:type-shapes": "bun tools/checks/type-shapes/src/index.ts",
"test:tools": "bun --filter '@open-pencil/*-tools' test && bun --filter @open-pencil/harness test",
"test:dupes": "jscpd packages/scene-graph/src packages/pen/src packages/design-jsx/src packages/codegen/src packages/core/src packages/cli/src packages/dom-css/src packages/fig/src src --min-lines 5 --min-tokens 50 --format typescript --threshold 0",
"test:packages": "bun tools/checks/package-quality/src/cli.ts verify",
"build:packages": "bun tools/release/package-artifacts/src/build.ts",
"open-pencil": "bun packages/cli/src/index.ts",
"docs:dev": "bun --filter @open-pencil/docs dev",
"docs:build": "bun --filter @open-pencil/docs build",
"docs:build:production": "bun --filter @open-pencil/docs build:production",
"docs:preview": "bun --filter @open-pencil/docs preview",
"generate:icons": "bun tools/generate/brand/src/cli.ts generate",
"check:icons": "bun tools/generate/brand/src/cli.ts check",
"generate:tauri-menu": "bun tools/generate/tauri-menu/src/generate.ts",
"check:tools": "tsgo --noEmit -p tools/tsconfig.json"
},
"dependencies": {
"@ai-sdk/anthropic": "^4.0.39",
"@ai-sdk/deepseek": "^3.0.28",
"@ai-sdk/google": "^4.0.44",
"@ai-sdk/openai": "^4.0.42",
"@ai-sdk/valibot": "^3.0.27",
"@ai-sdk/vue": "^4.0.66",
"@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
"@chenglou/pretext": "^0.0.7",
"@codemirror/autocomplete": "^6.20.3",
"@codemirror/commands": "^6.11.0",
"@codemirror/lang-html": "^6.4.12",
"@codemirror/lang-javascript": "^6.2.5",
"@codemirror/lang-json": "^6.0.2",
"@codemirror/language": "^6.12.4",
"@codemirror/lint": "^6.9.7",
"@codemirror/merge": "^6.12.2",
"@codemirror/search": "^6.7.1",
"@codemirror/state": "^6.7.1",
"@codemirror/view": "^6.43.9",
"@lezer/highlight": "^1.2.3",
"@nanostores/i18n": "^1.3.3",
"@nanostores/vue": "^1.1.0",
"@open-pencil/cli": "workspace:*",
"@open-pencil/core": "workspace:*",
"@open-pencil/design-jsx": "workspace:*",
"@open-pencil/dom-css": "workspace:*",
"@open-pencil/fig": "workspace:*",
"@open-pencil/harness": "workspace:*",
"@open-pencil/kiwi": "workspace:*",
"@open-pencil/pen": "workspace:*",
"@open-pencil/scene-graph": "workspace:*",
"@open-pencil/vue": "workspace:*",
"@openrouter/ai-sdk-provider": "^3.0.0",
"@stream-markdown/code": "2.0.0-beta.5",
"@tailwindcss/vite": "^4.3.3",
"@tanstack/vue-table": "^8.21.3",
"@tauri-apps/api": "^2.11.1",
"@tauri-apps/plugin-clipboard-manager": "^2.3.2",
"@tauri-apps/plugin-dialog": "^2.7.2",
"@tauri-apps/plugin-fs": "^2.5.1",
"@tauri-apps/plugin-opener": "^2.5.4",
"@tauri-apps/plugin-os": "^2.3.2",
"@tauri-apps/plugin-process": "^2.3.1",
"@tauri-apps/plugin-shell": "^2.3.5",
"@tauri-apps/plugin-updater": "^2.10.1",
"@unhead/vue": "^2.1.17",
"@valibot/to-json-schema": "^1.8.0",
"@vueuse/core": "^14.4.0",
"@xmldom/xmldom": "^0.9.11",
"ai": "^7.0.66",
"aws4fetch": "^1.0.20",
"canvaskit-wasm": "^0.41.1",
"copy-to-clipboard": "^4.0.2",
"culori": "^4.0.2",
"dedent": "^1.7.2",
"diff": "^8.0.4",
"es-toolkit": "^1.51.0",
"fflate": "^0.8.3",
"fuse.js": "^7.5.0",
"fzstd": "^0.1.1",
"hast-util-to-html": "^9.0.5",
"idb": "^8.0.3",
"js-base64": "^3.9.3",
"jspdf": "^4.2.1",
"lib0": "^0.2.117",
"motion-v": "^2.4.0",
"nanostores": "^1.5.0",
"opentype.js": "^2.0.0",
"partial-json": "^0.1.7",
"reka-ui": "^2.10.3",
"svg2pdf.js": "^2.7.0",
"tailwind-merge": "^3.6.0",
"tailwind-variants": "^3.3.1",
"tailwindcss": "^4.3.3",
"tinykeys": "^3.1.0",
"trystero": "^0.22.0",
"valibot": "^1.4.2",
"vee-validate": "5.0.0-beta.0",
"vue": "^3.5.41",
"vue-router": "^5.2.0",
"vue-stream-markdown": "2.0.0-beta.5",
"y-indexeddb": "^9.0.12",
"y-protocols": "^1.0.7",
"yjs": "^13.6.32",
"yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.3",
"zod": "^4.4.3"
},
"devDependencies": {
"@agentclientprotocol/sdk": "^0.14.1",
"@arethetypeswrong/cli": "0.18.4",
"@commitlint/cli": "^21.2.2",
"@commitlint/config-conventional": "^21.2.2",
"@commitlint/is-ignored": "^21.2.2",
"@commitlint/types": "^21.2.0",
"@feature-sliced/steiger-plugin": "^0.5.8",
"@figma/plugin-typings": "^1.134.0",
"@hono/node-server": "^1.19.17",
"@iconify-json/lucide": "^1.2.123",
"@modelcontextprotocol/client": "^2.0.0",
"@open-pencil/brand-tools": "workspace:*",
"@open-pencil/mcp": "workspace:*",
"@oxlint/plugins": "1.57.0",
"@playwright/test": "^1.62.1",
"@storybook/addon-a11y": "^10.5.8",
"@storybook/addon-docs": "^10.5.8",
"@storybook/addon-themes": "^10.5.8",
"@storybook/vue3-vite": "^10.5.8",
"@tauri-apps/cli": "2.11.4",
"@types/culori": "^4.0.1",
"@types/node": "^25.9.5",
"@types/opentype.js": "^1.3.10",
"@types/ws": "^8.18.1",
"@typescript-eslint/utils": "^8.67.0",
"@typescript/native-preview": "^7.0.0-dev.20260707.2",
"@vitejs/plugin-vue": "^6.0.8",
"@vue/compiler-core": "^3.5.41",
"@wdio/cli": "9.30.1",
"@wdio/globals": "9.29.1",
"@wdio/local-runner": "9.30.1",
"@wdio/mocha-framework": "9.30.1",
"@wdio/spec-reporter": "9.30.1",
"@wdio/tauri-service": "1.3.0",
"changelog-parser": "^4.1.0",
"cloudflare-redirect-parser": "^1.0.0",
"esbuild": "^0.27.7",
"eslint-plugin-compat": "^7.0.2",
"expect-webdriverio": "5.7.0",
"fake-indexeddb": "^6.2.5",
"franc": "^6.2.0",
"hono": "^4.13.2",
"jscpd": "^4.3.0",
"knip": "6.20.0",
"mdast": "^3.0.0",
"mdast-util-from-markdown": "^2.0.3",
"mitata": "^1.0.34",
"oxfmt": "^0.67.0",
"oxlint": "1.57.0",
"oxlint-tsgolint": "^0.16.0",
"portless": "0.15.5",
"publint": "0.3.20",
"sherif": "1.12.0",
"steiger": "^0.5.13",
"storybook": "^10.5.8",
"tsdown": "^0.22.14",
"tw-animate-css": "^1.4.0",
"typescript": "~5.8.3",
"unist-util-visit": "^5.1.0",
"unplugin-icons": "^23.0.1",
"unplugin-raw": "^0.7.0",
"unplugin-vue": "^7.2.0",
"unplugin-vue-components": "^31.1.0",
"vite": "8.1.4",
"vite-plugin-pwa": "^1.3.0",
"vue-tsc": "^3.3.10",
"webmcp-types": "^0.1.7",
"workbox-window": "^7.4.1",
"ws": "^8.21.3"
},
"overrides": {
"@codemirror/view": "6.43.9",
"protobufjs": "7.5.5",
"websocket-driver": "0.7.5"
},
"packageManager": "bun@1.4.2"
}
Reference in a new issue View git blame Copy permalink