Repository navigation
[Feature]: Diff view in the environment editor for draft edits and compare version history #1160
Description
Preflight
- I searched existing issues and docs before opening this.
- This proposal is grounded in a real Roomote use case, not a broad generated feature list.
Problem
The Edit Environment page has no way to see what changed: switching the "Version" dropdown just replaces the editor's content entirely, and there's no way to tell what your own in-progress edits changed relative to the saved config.
Environment configs live in one YAML blob per environment, and every save already creates a row in environment_config_versions — from UI saves, the onboarding agent, the API, and declarative file provisioning.
Anyone reviewing a teammate's YAML change, or an onboarding-agent edit, has to eyeball two YAML blobs manually to find the difference.
Current workaround
Copy the saved YAML out before editing, or open a past version in another tab, then diff the two externally (e.g. paste into a local diff tool). Nobody does this for onboarding-agent edits in practice — those are applied without review.
Proposed behavior
Add a "Diff" tab next to Editor/Yaml/Preview on the Edit Environment page.
It would show line-level diff (with addition/deletion counts) between the currently saved configuration and whatever is currently shown in the editor — either in-progress draft edits, or a past version loaded from the "Version" dropdown.
This reuses the version history already stored in environment_config_versions and the diff-rendering components already built for the sandbox task-diff panel, so it needs no new backend endpoints, schema changes, or git integration.
Affected surfaces
Web dashboard
Self-hosting implications
None — no new env vars, services, ports, credentials, storage, compute, migrations, or provider setup. It's an additive frontend change (one new dependency, diff/jsdiff, for line-level text diffing) built entirely on data the app already stores and queries.
Alternatives considered
Live diffing on every keystroke instead of a dedicated tab. A dedicated tab keeps the default Yaml tab simple and avoids recomputing a diff on every keystroke.
Linking each environment to an external git repo/path and syncing its YAML from there for true source control. Would be more complicated due to webhook/polling infra, provider-specific file-fetch code, and a conflict policy (git-wins vs. UI lock), which is a lot more surface for the same immediate need: visibility into what changed.
Documentation impact
None expected, maybe an optional mention in the environment editor docs.
Activity
roomote-community commentedon Aug 7, 2026
I've analyzed this issue and here's my proposed implementation plan:
diffas a direct@roomote/webdependency and introduce a small environment-YAML diff helper/component that convertsdiffLinesoutput into the existingDiffLinemodel, including addition/deletion totals and a clear empty state when the documents match.apps/web/src/components/settings/environments/YamlEnvironmentEditor.tsxwith an edit-only Diff tab. UseconfigToYaml(initialConfig)as the saved baseline and the editor's existingyamlContentstate as the comparison target, then render the result with the sharedCodeBlock,CodeBlockDiff, andCodeBlockDiffContentcomponents already used by the task diff panel. This keeps diff calculation lazy to the dedicated tab and covers changes made through both the visual Editor and YAML views.EditEnvironmentPage.tsx:environment.configremains the latest saved baseline, whileinitialYamlContentsupplies a selected historical version. The same Diff tab will therefore compare either an unsaved draft or a loaded historical version against the currently saved configuration without new tRPC procedures, endpoints, or schema changes.apps/docs/environments/definition.mdxso the documented editor views and version-comparison workflow match the new UI.This approach reuses the existing version queries and diff renderer, keeps potentially expensive line diffing out of the normal editing path, and adds no backend or self-hosting surface.
Please tag @roomote if you'd like me to implement this, or reply with feedback on the plan.
daniel-lxs commentedon Aug 7, 2026
@roomote give it a try and show us how it looks!
roomote-community commentedon Aug 7, 2026
I saw the mention, but I need your GitHub account linked to Roomote before issue and PR comments can start work here. Link it from Settings -> Linked Accounts and then mention me again. If you'd like an invite to join the community @roomote, please send MrUbens a message on Discord: http://discord.gg/roomote
connoreggleston commentedon Aug 7, 2026
one thought to build on this idea would be to manage the environment config in version control with CI.