Repository navigation
feat: Artifacts, Design mode, canvas and website clone - #229
Merged
Merged
Conversation
Pages, prototypes and canvases the agent makes are kept as folders in the project's dc_artifacts/ instead of getting lost in the conversation. - Artifacts: artifact.json manifest and ids, the artifact_written event, ArtifactCheck and ArtifactCopy tools, read-only foreign artifacts, worktree deletion that moves artifacts and their design systems to a global folder, the Artifacts page and full-screen viewer, thumbnails, and export to PDF, PNG or standalone HTML. - Design mode: the /design skill and Design page, the ChooseDesignTemplate and UseDesignSystem tools, and a bundled library of 60 templates and 156 design systems (converted from Open Design, Apache-2.0). - Canvas: boards on one surface with a zoom toolbar, written-back positions and an interaction mode so panning works with the mouse over a board. - Website clone: bundled clone scripts and a hidden background browser session that the user grants access to first. - The project protocol serves byte ranges so videos play and seek. - Docs, CHANGELOG entries and README screenshots.
…is retired on November 2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Pages, prototypes and canvases the agent makes now live as folders in the project (
dc_artifacts/) instead of getting lost in the conversation. This PR adds the Artifacts page, a Design mode with a bundled template and design system library, a canvas artifact made of boards, and a website clone flow. It builds on the browser tools from #207 and #219.There is no issue for this feature, so the PR does not close one. Windows verification overlaps with #188 and #221; this PR does not close them.
What changed
artifact.json(id, kindpageorcanvas, entry file) per artifact; anartifact_writtenevent when the agent writes one;ArtifactCheckandArtifactCopytools; artifacts outside the working directory are read-only and are copied in withArtifactCopy; deleting a worktree moves its artifacts, with the design systems they use, to a global folder. The Artifacts page lists artifacts of every project (cards or list, thumbnails, search, project filter), opens one full screen, continues it in a new chat, and exports a page as PDF, PNG or standalone HTML. The same list is a tab in each session's panel./designskill and the Design page: the agent interviews the user, offers templates with theChooseDesignTemplatetool (an inline card in the chat), and builds a page or app prototype, applying a design system withUseDesignSystem. The library ships with the app: 60 page and prototype templates and 156 design systems. The templates and 151 of the systems are converted from Open Design (Apache-2.0, seeTHIRD_PARTY_NOTICES.md); 5 starter systems are written for DreamCoder. Slides are left out on purpose and will come back with their own entry.artifactsanddesignskills tell the agent how to enter interaction mode./designcan clone a website: the agent opens it in a hidden browser session (the user grants access to the site first), reads its structure and styles with the bundled clone scripts, and rebuilds it as a page. The scripts are adapted copies of the Open Design ones (desktop/web-clone, license included).dreamcoder-project://protocol serves byte ranges (206 and 416) so videos play and seek. The Artifacts pages use their own header as the window title row (newuseTitleRowhook, shared with the session page). The Artifacts tab is restored after a restart.release.ymlandsmoke-test.ymlmove frommacos-14tomacos-15: GitHub retires themacos-14runner image on November 2 and was already failing its jobs on a schedule, so the macOS installer build of this PR could not run.macos-15is Apple Silicon likemacos-14.docs/artifacts-tech-design.mddescribes the design and lists every deviation from it. CHANGELOG entries, and the README with new screenshots in both languages.Reviewing this PR
The diff is large, but most of it is data: about 72k of the ~98k changed lines are the bundled design systems and templates (438 files), and ~3k lines are the vendored clone scripts. The hand-written parts are about 7.6k lines in
src, 9.8k indesktop, 4.2k in the generator scripts underscripts/, and the docs. There are two commits, and the PR is squash-merged anyway: the feature, and a two-line CI change. To read the feature, start withdocs/artifacts-tech-design.md(the intent and the deviations), thensrc(tools, skills, sidecar) anddesktop(renderer and Electron). The bundled data underdesktop/design-systemsanddesktop/design-templatesand the vendored scripts underdesktop/web-clonecan be skipped.No dependencies were added and the lockfiles are unchanged.
Decided and accepted for now: ten templates load the Tailwind CDN at runtime and a few load Google Fonts; two template thumbnails are not representative.
Known and not fixed (the ones worth knowing; the first review round also produced a few lower-confidence notes that were not acted on):
fetchhas no internal-address filter (the hidden browser path asks the user first).artifact_writtenevent bumps the write version, which can cause extra list reloads.knownWorkDirsstats the project folders one by one.resumeEmulationwas left as it is.Testing
bun test: 2246 pass, 0 fail. Desktopbun run test -- --run: 2602 pass, 4 skipped.bun run lintpasses.--randomize(bun) and--sequence.shufflewith seeds 1 and 2 (vitest), pass.windows-latestran the same tests onmainand on this branch. Both have the same failures: 6 server tests of ripgrep preparation and resolution (tarextraction on the runner) and 1 desktop test inelectron/browser.test.ts. The branch adds no failure. The author also checked on Windows with the dev app: a project in a path with spaces,/designwith such a path, the website clone (script quoting, no console window), video play and seek, deleting a worktree while keeping its artifacts and design systems, PDF, PNG and HTML export, thumbnails and template preview, canvas panning and interaction mode, restoring the Artifacts tab after a restart, and no console windows flashing. The packaged Windows app was not checked by hand; its installer is built in this PR throughrelease.yml.