[Feature]: Diff view in the environment editor for draft edits and compare version history

[a8trejo]

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.

[roomote-community]

I've analyzed this issue and here's my proposed implementation plan:

1. Add diff as a direct @roomote/web dependency and introduce a small environment-YAML diff helper/component that converts diffLines output into the existing DiffLine model, including addition/deletion totals and a clear empty state when the documents match.
2. Extend apps/web/src/components/settings/environments/YamlEnvironmentEditor.tsx with an edit-only Diff tab. Use configToYaml(initialConfig) as the saved baseline and the editor's existing yamlContent state as the comparison target, then render the result with the shared CodeBlock, CodeBlockDiff, and CodeBlockDiffContent components 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.
3. Preserve the current version-loading flow in EditEnvironmentPage.tsx: environment.config remains the latest saved baseline, while initialYamlContent supplies 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.
4. Add focused tests in the environment editor suite for YAML edits, visual-editor edits, unchanged content, addition/deletion counts, and historical-version selection/reset behavior. Update apps/docs/environments/definition.mdx so 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]

@roomote give it a try and show us how it looks!

[roomote-community]

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]

one thought to build on this idea would be to manage the environment config in version control with CI.