I'm building Breatic, a React/TypeScript creative workspace. Its shared projects combine document briefs, a React Flow canvas and an agent that can propose edits. I wanted to share the implementation of the proposal UI and get feedback from people building collaborative editors.

Repository: https://github.com/orime-org/breatic

The document proposal card receives a structured proposal. For rewrites, it parses the proposed body using the document schema and computes a word-level diff against the proposal's original text. The person reviewing it sees the additions and removals instead of just an instruction to replace the paragraph.

The card provides separate actions to locate the target, add an eligible proposal as a comment, and apply a rewrite or insertion. It re-reads displayed state when the document version or card state changes.

The component is here: https://github.com/orime-org/breatic/blob/8eaa0da9888cc6a1a8967b98faaa3e8b80f4e91d/packages/web/src/pages/project/chat/DocumentProposalCard.tsx

Collaboration uses Yjs and self-hosted Hocuspocus. The important distinction for me is that synchronizing a document and deciding to accept an agent's edit are different operations. A convergent shared document doesn't automatically mean an old suggestion is still appropriate.

This isn't a claim that every stale-proposal or concurrent-edit edge case has been solved. I'd welcome feedback on the UI boundary: how do you make it clear which document state a proposal refers to while collaborators keep working?

The repo includes usage and development guides. Its custom source-available license permits internal/private deployment and restricts public-facing platform hosting; storage and model services need separate configuration.