Improve visual editing tools

[gustavohenrip]

Summary

This update expands Open Design's visual editing workflow and agent behavior so the app can work much closer to the Claude Design experience, with stronger direct manipulation tools, better HTML editing safety, clearer runtime feedback, and a more complete prompt/harness setup.

Claude Design prompt/harness alignment

• Updated the agent prompt/harness to follow the Claude Design workflow provided in the project reference.
• The Open Design harness now uses the same core instruction style and design workflow expectations from Claude Design, adapted to Open Design's runtime and tool environment.
• Removed irrelevant Claude-specific/XML-oriented behavior where it did not fit Open Design.
• Preserved the important behavioral rules: ask the right questions, inspect the active file/context, avoid unnecessary artifact creation, edit the intended target, and use tools in a structured way.
• Added stronger file-targeting instructions so revision/edit requests update the active design file instead of creating unrelated duplicate artifacts.

Edit mode

• Reworked the Edit button from a placeholder into a functional visual editing flow.
• Added element selection inside the HTML preview.
• Improved targeting so the user can select the intended element instead of accidentally selecting the whole page/background.
• Added a direct editing panel for common properties such as text, font, size, color, background, dimensions, movement, and animation details.
• Added direct-save support for simple changes that should be written straight to the HTML without involving the AI.
• Added queued/multi-edit behavior so users can adjust multiple elements and then send the full set of requested changes to the agent.
• Improved dragging behavior so the edit panel does not block placement while moving elements.
• Added safer selection locking so one edit target is handled at a time unless the user intentionally queues multiple edits.

Draw mode

• Expanded the Draw workflow so users can sketch or mark what they want changed directly on the preview.
• Added better prompt context for drawn annotations so the agent can interpret the user's visual intent and apply design changes more accurately.
• Improved the relationship between drawings, selected targets, and the active HTML file.
• Made Draw mode part of the same structured visual-feedback loop as Edit and Comment.

Tweaks mode

• Made the Tweaks button functional instead of a placeholder.
• Added direct tweak controls for colors, typography-adjacent values, spacing, borders, radius, and motion where available.
• Added quick presets such as Compact, Comfortable, Rounder, Sharper, and No Motion.
• Fixed unstable preset behavior by making presets deterministic and based on stable baseline values.
• Added fallback global tweak controls so presets still work even when a generated HTML file does not expose useful CSS variables.
• Fixed preview flickering by applying live tweak CSS through the preview bridge instead of reloading the iframe on every change.
• Added direct HTML persistence for tweak changes.

Preview and element-targeting improvements

• Improved the srcdoc preview bridge used by Comment, Edit, Draw, and Tweaks.
• Added safer element hit-testing to prioritize real interactive/text elements over large layout containers or page backgrounds.
• Added live preview messaging for tweak updates.
• Reduced cases where selecting a header, section, or background unintentionally replaces or removes unrelated content.

Artifact and file-update safety

• Added active file awareness to chat requests.
• Updated daemon/server-side context so the agent knows which design file is currently selected.
• Prevented revision prompts from creating new blank sibling HTML files when the user clearly intends to edit the active file.
• Added logic to detect artifact responses that only reference an existing filename and open/update the existing file instead of creating an empty artifact.
• Improved file naming and target resolution for edit/revision workflows.

Conversation compaction and status feedback

• Added conversation compaction support before sending large histories to providers.
• Added compaction handling for daemon, API proxy, and Anthropic provider flows.
• Added a visible agent status message when context is being compacted, so users understand what is happening instead of seeing silent delay.

Tooling and launch workflow

• Added a macOS .command launcher so the project can be started more easily from Finder.
• The launcher uses Corepack/pnpm without requiring global pnpm symlinks.
• Added startup cleanup for the local dev tools process.

User impact

• Users can edit designs more directly without needing the AI for every small change.
• Visual feedback is faster and more stable.
• The agent receives clearer context about the active file and selected visual target.
• The app is less likely to create duplicate blank artifacts during iterative edits.
• The overall workflow is closer to Claude Design's prompt and visual editing behavior while remaining adapted to Open Design's architecture.

[lefarcen]

Hi @gustavohenrip! 🎉
Thanks for the contribution — this looks like a comprehensive update to the visual editing workflow.
I will run a deep review and get back to you within 24h.

Thanks for making open-design better!
— open-design team

[lefarcen]

Hi @gustavohenrip! 👋

Thanks for this comprehensive PR. I've reviewed the visual editing tools, conversation compaction, and related changes. The features look very promising — functional edit/draw/tweak flows will significantly improve the design workflow. Here are my findings:

Code correctness (Lens A)

✅ Security: Good CSS sanitization — safeTweakValue properly blocks javascript:, expression(), @import, and dangerous characters. The inline style application through setInlineStyle is safe.

✅ Visual edit preview — The iframe message-based preview system correctly isolates edit drafts from the actual DOM until save.

✅ Conversation compaction — The logic preserves recent messages intact and only summarizes older content. The 32K trigger threshold and 8-message recent window are reasonable.

⚠️ Server.ts deletions (P2) — The PR removes several routes: /api/active, /api/mcp/install-info, /api/projects/:id/events, /api/projects/:id/search, /api/projects/:id/archive/batch. While the PR note says "Build and tests were not run locally," these deletions could break existing features. Recommendation: verify each removed route isn't used by the web UI or external integrations. If they're truly dead code, document why in the PR description.

⚠️ Memory management (P2) — FileViewer.tsx holds large state objects (editBatch, liveCommentTargets, tweakTokens). For PRs with 100+ elements, this could cause performance issues. Consider adding cleanup on unmount and state size limits.

Reasoning completeness (Lens B)

⚠️ Missing: Compaction edge cases (P2) — The conversation-compaction.ts logic assumes messages have content, attachments, events, etc. What happens if a message is malformed or has unexpected structure? Should there be error boundaries? The current code would silently skip parts or crash. Recommendation: add defensive checks or wrap in try/catch.

⚠️ Unclear: Why remove file-events SSE? (P2) — The old code had live-reload via subscribeFileEvents. The PR removes this entirely. Does the new flow rely on manual refresh? Or is live-reload now handled differently? The PR description doesn't explain this trade-off. If live-reload is intentionally dropped, that should be called out as a UX change.

⚠️ Tweak extraction limits (P3) — extractTweakTokens caps at 64 tokens and uses a simple regex. What happens with CSS variables defined in @media or nested selectors? They're skipped. For design systems with extensive theming, 64 might not be enough. Consider documenting this limitation or making it configurable.

⚠️ open-design.command portability (P3) — The macOS launcher uses bash + corepack. It checks for Node 24 but assumes corepack is available. On some Node installs (especially Homebrew), corepack might not be enabled. Consider adding corepack enable or a clearer error message.

Summary

This PR adds valuable features and the core implementation is solid. The main concerns are:

1. Verify removed server routes — ensure nothing breaks in production
2. Compaction error handling — add defensive checks for malformed messages
3. Document live-reload trade-off — clarify if file events are intentionally removed

Overall: Good work on the visual editing flows. The CSS sanitization is thorough, and the preview-before-save design is the right UX. Once the above points are clarified, this will be ready to ship.

— open-design team

[gustavohenrip]

Review follow-up

This update addresses the review feedback around API compatibility, compaction safety, memory management, and launcher portability.

Server routes and runtime compatibility

• Restored the existing daemon routes that were accidentally removed:
  • POST /api/active
  • GET /api/active
  • GET /api/mcp/install-info
  • GET /api/projects/:id/events
  • GET /api/projects/:id/search
  • POST /api/projects/:id/archive/batch
• Restored the file-events SSE route used for preview live reload.
• Restored project file search and batch archive support.
• Restored prompt budget checks before spawning local agents.
• Restored adapter environment passthrough through def.env.
• Kept the new preview inspection endpoint and included the missing visual-inspector.ts file.

Conversation compaction hardening

• Added defensive normalization for chat history before compaction.
• Avoid crashes when messages, events, attachments, produced files, or comment attachments are malformed or partially missing.
• Kept the recent-message window intact while safely summarizing older messages.
• Preserved the existing 32K trigger threshold and recent message behavior.

FileViewer memory/state safety

• Added caps for live preview target maps.
• Added caps for queued visual edit batches.
• Added cleanup for large refs on unmount.
• Kept the existing 64-token tweak extraction cap for predictable UI performance.

Tweaks limitation clarification

• The tweak extractor still intentionally limits controls to 64 CSS tokens for UI performance.
• Advanced nested CSS variables may not all appear as tweak controls.
• Global fallback controls remain available so presets still work even when the HTML does not expose rich design tokens.

Launcher portability

• Improved the macOS .command launcher when Corepack exists but pnpm is not prepared.
• Avoided corepack enable because it can fail with global symlink permission errors.
• Added a clearer fallback path using corepack prepare pnpm@10.33.2 --activate.