7.4.0-rc.1 [release]

Due to the rewrite of the plugin's core sync loop and the change for the
Notify backend on MacOS, along with all the other changes in 7.4.0, it
makes sense for us to use a release candidate before actually cutting a
proper `7.4.0` release.

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# stylua formatting
+0f8e1625d572a5fe0f7b5c08653ff92cc837d346

.github/FUNDING.yml

@@ -1 +0,0 @@
-patreon: lpghatguy

.github/workflows/changelog.yml

@@ -0,0 +1,23 @@
+name: Changelog Check
+
+on:
+  pull_request:
+    types: [assigned, opened, synchronize, reopened, labeled, unlabeled]
+    branches:
+      - master
+
+jobs:
+  build:
+    name: Check Actions
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    
+    - name: Changelog check
+      uses: Zomzog/changelog-checker@v1.3.0
+      with:
+        fileName: CHANGELOG.md 
+        noChangelogLabel: skip changelog
+        checkNotification: Simple
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -16,10 +16,12 @@ jobs:
 
     strategy:
       matrix:
-        rust_version: [stable, 1.69.0]
+        rust_version: [stable, 1.70.0]
 
     steps:
     - uses: actions/checkout@v3
+      with:
+        submodules: true
 
     - name: Install Rust
       uses: actions-rs/toolchain@v1
@@ -33,12 +35,6 @@ jobs:
       with:
         version: 'v0.2.7'
 
-    - name: Install packages
-      run: |
-        cd plugin
-        wally install
-        cd ..
-
     - name: Build
       run: cargo build --locked --verbose
 
@@ -46,11 +42,13 @@ jobs:
       run: cargo test --locked --verbose
 
   lint:
-    name: Rustfmt and Clippy
+    name: Rustfmt, Clippy, & Stylua
     runs-on: ubuntu-latest
 
     steps:
     - uses: actions/checkout@v3
+      with:
+        submodules: true
 
     - name: Install Rust
       uses: actions-rs/toolchain@v1
@@ -64,14 +62,12 @@ jobs:
       with:
         version: 'v0.2.7'
 
-    - name: Install packages
-      run: |
-        cd plugin
-        wally install
-        cd ..
+    - name: Stylua
+      run: stylua --check plugin/src
 
     - name: Rustfmt
       run: cargo fmt -- --check
 
     - name: Clippy
-      run: cargo clippy
+      run: cargo clippy
+

.github/workflows/release.yml

@@ -28,6 +28,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          submodules: true
 
       - name: Setup Aftman
         uses: ok-nick/setup-aftman@v0.1.0
@@ -36,12 +38,6 @@ jobs:
           trust-check: false
           version: 'v0.2.6'
 
-      - name: Install packages
-        run: |
-          cd plugin
-          wally install
-          cd ..
-
       - name: Build Plugin
         run: rojo build plugin --output Rojo.rbxm
 
@@ -94,6 +90,8 @@ jobs:
       BIN: rojo
     steps:
       - uses: actions/checkout@v3
+        with:
+          submodules: true
 
       - name: Get Version from Tag
         shell: bash
@@ -117,15 +115,8 @@ jobs:
           trust-check: false
           version: 'v0.2.6'
 
-      - name: Install packages
-        run: |
-          cd plugin
-          wally install
-          cd ..
-        shell: bash
-
       - name: Build Release
-        run: cargo build --release --locked --verbose
+        run: cargo build --release --locked --verbose --target ${{ matrix.target }}
         env:
           # Build into a known directory so we can find our build artifact more
           # easily.
@@ -141,11 +132,11 @@ jobs:
           mkdir staging
 
           if [ "${{ matrix.host }}" = "windows" ]; then
-            cp "output/release/$BIN.exe" staging/
+            cp "output/${{ matrix.target }}/release/$BIN.exe" staging/
             cd staging
             7z a ../release.zip *
           else
-            cp "output/release/$BIN" staging/
+            cp "output/${{ matrix.target }}/release/$BIN" staging/
             cd staging
             zip ../release.zip *
           fi

.gitignore

@@ -13,9 +13,6 @@
 # Test places for the Roblox Studio Plugin
 /plugin/*.rbxlx
 
-# Packages for the Roblox Studio Plugin
-/plugin/*Packages
-
 # Roblox Studio holds 'lock' files on places
 *.rbxl.lock
 *.rbxlx.lock

.gitmodules

@@ -0,0 +1,18 @@
+[submodule "plugin/Packages/Roact"]
+	path = plugin/Packages/Roact
+	url = https://github.com/roblox/roact.git
+[submodule "plugin/Packages/Flipper"]
+	path = plugin/Packages/Flipper
+	url = https://github.com/reselim/flipper.git
+[submodule "plugin/Packages/Promise"]
+	path = plugin/Packages/Promise
+	url = https://github.com/evaera/roblox-lua-promise.git
+[submodule "plugin/Packages/t"]
+	path = plugin/Packages/t
+	url = https://github.com/osyrisrblx/t.git
+[submodule "plugin/Packages/TestEZ"]
+	path = plugin/Packages/TestEZ
+	url = https://github.com/roblox/testez.git
+[submodule "plugin/Packages/Highlighter"]
+	path = plugin/Packages/Highlighter
+	url = https://github.com/boatbomber/highlighter.git

CHANGELOG.md

@@ -2,6 +2,160 @@
 
 ## Unreleased Changes
 
+## [7.4.0-rc1] - October 3, 2023
+### Additions
+#### Project format
+* Added support for `.toml` files to `$path` ([#633])
+* Added support for `Font` and `CFrame` attributes ([rbx-dom#299], [rbx-dom#296])
+* Added the `emitLegacyScripts` field to the project format ([#765]). The behavior is outlined below:
+
+	| `emitLegacyScripts` Value | Action Taken by Rojo                                                                                             |
+	|---------------------------|------------------------------------------------------------------------------------------------------------------|
+	| false                     | Rojo emits Scripts with the appropriate `RunContext` for `*.client.lua` and `*.server.lua` files in the project. |
+	| true   (default)          | Rojo emits LocalScripts and Scripts with legacy `RunContext` (same behavior as previously).                      |
+
+
+	It can be used like this:
+	```json
+	{
+		"emitLegacyScripts": false,
+		"name": "MyCoolRunContextProject",
+		"tree": {
+			"$path": "src"
+		}
+	}
+	```
+
+* Added `Terrain` classname inference, similar to services ([#771])
+
+	`Terrain` may now be defined in projects without using `$className`:
+	```json
+	"Workspace": {
+		"Terrain": {
+			"$path": "path/to/terrain.rbxm"
+		}
+	}
+	```
+
+* Added support for `Terrain.MaterialColors` ([#770])
+
+	`Terrain.MaterialColors` is now represented in projects in a human readable format:
+	```json
+	"Workspace": {
+		"Terrain": {
+			"$path": "path/to/terrain.rbxm"
+			"$properties": {
+				"MaterialColors": {
+					"Grass": [10, 20, 30],
+					"Asphalt": [40, 50, 60],
+					"LeafyGrass": [255, 155, 55]
+				}
+			}
+		}
+	}
+	```
+
+* Added better support for `Font` properties ([#731])
+
+	`FontFace` properties may now be defined using implicit property syntax:
+	```json
+	"TextBox": {
+		"$className": "TextBox",
+		"$properties": {
+			"FontFace": {
+				"family": "rbxasset://fonts/families/RobotoMono.json",
+				"weight": "Thin",
+				"style": "Normal"
+			}
+		}
+	}
+	```
+
+#### Patch visualizer and notifications
+* Added a setting to control patch confirmation behavior ([#774])
+
+	This is a new setting for controlling when the Rojo plugin prompts for confirmation before syncing. It has four options:
+    * Initial (default): prompts only once for a project in a given Studio session
+    * Always: always prompts for confirmation
+    * Large Changes: only prompts when there are more than X changed instances. The number of instances is configurable - an additional setting for the number of instances becomes available when this option is chosen
+    * Unlisted PlaceId: only prompts if the place ID is not present in servePlaceIds
+
+* Added the ability to select Instances in patch visualizer ([#709])
+
+	Double-clicking an instance in the patch visualizer sets Roblox Studio's selection to the instance.
+
+* Added a sync reminder notification. ([#689])
+
+	Rojo detects if you have previously synced to a place, and displays a notification reminding you to sync again:
+
+	![Rojo reminds you to sync a place that you've synced previously](https://user-images.githubusercontent.com/40185666/242397435-ccdfddf2-a63f-420c-bc18-a6e3d6455bba.png)
+
+* Added rich Source diffs in patch visualizer ([#748])
+
+	A "View Diff" button for script sources is now present in the patch visualizer. Clicking it displays a side-by-side diff of the script changes:
+
+	![The patch visualizer contains a "view diff" button](https://user-images.githubusercontent.com/40185666/256065992-3f03558f-84b0-45a1-80eb-901f348cf067.png)
+
+	![The "View Diff" button opens a widget that displays a diff](https://user-images.githubusercontent.com/40185666/256066084-1d9d8fe8-7dad-4ee7-a542-b4aee35a5644.png)
+
+* Patch visualizer now indicates what changes failed to apply. ([#717])
+
+	A clickable warning label is displayed when the Rojo plugin is unable to apply changes. Clicking the label displays precise information about which changes failed:
+
+	![Patch visualizer displays a clickable warning label when changes fail to apply](https://user-images.githubusercontent.com/40185666/252063660-f08399ef-1e16-4f1c-bed8-552821f98cef.png)
+
+
+#### Miscellaneous
+* Added `plugin` flag to the `build` command that outputs to the local plugins folder ([#735])
+
+	This is a flag that builds a Rojo project into Roblox Studio's plugins directory. This allows you to build a Rojo project and load it into Studio as a plugin without having to type the full path to the plugins directory. It can be used like this: `rojo build <PATH-TO-PROJECT> --plugin <FILE-NAME>`
+
+* Added new plugin template to the `init` command ([#738])
+
+	This is a new template geared towards plugins. It is similar to the model template, but creates a `Script` instead of a `ModuleScript` in the `src` directory. It can be used like this: `rojo init --kind plugin`
+
+* Added protection against syncing non-place projects as a place. ([#691])
+* Add buttons for navigation on the Connected page ([#722])
+
+### Fixes
+* Significantly improved performance of `rojo serve` and `rojo build` on macOS. [#783]
+* Significantly improved performance of `rojo sourcemap` ([#668])
+* Fixed the diff visualizer of connected sessions. ([#674])
+* Fixed disconnected session activity. ([#675])
+* Skip confirming patches that contain only a datamodel name change. ([#688])
+* Fix Rojo breaking when users undo/redo in Studio ([#708])
+* Improve tooltip behavior ([#723])
+* Better settings controls ([#725])
+* Rework patch visualizer with many fixes and improvements ([#713], [#726], [#755])
+
+[#668]: https://github.com/rojo-rbx/rojo/pull/668
+[#674]: https://github.com/rojo-rbx/rojo/pull/674
+[#675]: https://github.com/rojo-rbx/rojo/pull/675
+[#688]: https://github.com/rojo-rbx/rojo/pull/688
+[#689]: https://github.com/rojo-rbx/rojo/pull/689
+[#691]: https://github.com/rojo-rbx/rojo/pull/691
+[#709]: https://github.com/rojo-rbx/rojo/pull/709
+[#708]: https://github.com/rojo-rbx/rojo/pull/708
+[#713]: https://github.com/rojo-rbx/rojo/pull/713
+[#717]: https://github.com/rojo-rbx/rojo/pull/717
+[#722]: https://github.com/rojo-rbx/rojo/pull/722
+[#723]: https://github.com/rojo-rbx/rojo/pull/723
+[#725]: https://github.com/rojo-rbx/rojo/pull/725
+[#726]: https://github.com/rojo-rbx/rojo/pull/726
+[#633]: https://github.com/rojo-rbx/rojo/pull/633
+[#735]: https://github.com/rojo-rbx/rojo/pull/735
+[#731]: https://github.com/rojo-rbx/rojo/pull/731
+[#738]: https://github.com/rojo-rbx/rojo/pull/738
+[#748]: https://github.com/rojo-rbx/rojo/pull/748
+[#755]: https://github.com/rojo-rbx/rojo/pull/755
+[#765]: https://github.com/rojo-rbx/rojo/pull/765
+[#770]: https://github.com/rojo-rbx/rojo/pull/770
+[#771]: https://github.com/rojo-rbx/rojo/pull/771
+[#774]: https://github.com/rojo-rbx/rojo/pull/774
+[#783]: https://github.com/rojo-rbx/rojo/pull/783
+[rbx-dom#299]: https://github.com/rojo-rbx/rbx-dom/pull/299
+[rbx-dom#296]: https://github.com/rojo-rbx/rbx-dom/pull/296
+
 ## [7.3.0] - April 22, 2023
 * Added `$attributes` to project format. ([#574])
 * Added `--watch` flag to `rojo sourcemap`. ([#602])
@@ -566,4 +720,4 @@ This is a general maintenance release for the Rojo 0.5.x release series.
 * More robust syncing with a new reconciler
 
 ## [0.1.0](https://github.com/rojo-rbx/rojo/releases/tag/v0.1.0) (November 29, 2017)
-* Initial release, functionally very similar to [rbxfs](https://github.com/LPGhatguy/rbxfs)
+* Initial release, functionally very similar to [rbxfs](https://github.com/LPGhatguy/rbxfs)

Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "rojo"
-version = "7.3.0"
-rust-version = "1.68.2"
+version = "7.4.0-rc1"
+rust-version = "1.70.0"
 authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 description = "Enables professional-grade development tools for Roblox developers"
 license = "MPL-2.0"
@@ -12,9 +12,7 @@ readme = "README.md"
 edition = "2021"
 build = "build.rs"
 
-exclude = [
-    "/test-projects/**",
-]
+exclude = ["/test-projects/**"]
 
 [profile.dev]
 panic = "abort"
@@ -51,11 +49,11 @@ memofs = { version = "0.2.0", path = "crates/memofs" }
 # rbx_reflection_database = { path = "../rbx-dom/rbx_reflection_database" }
 # rbx_xml = { path = "../rbx-dom/rbx_xml" }
 
-rbx_binary = "0.7.0"
-rbx_dom_weak = "2.4.0"
-rbx_reflection = "4.2.0"
-rbx_reflection_database = "0.2.6"
-rbx_xml = "0.13.0"
+rbx_binary = "0.7.2"
+rbx_dom_weak = "2.6.0"
+rbx_reflection = "4.4.0"
+rbx_reflection_database = "0.2.8"
+rbx_xml = "0.13.2"
 
 anyhow = "1.0.44"
 backtrace = "0.3.61"
@@ -72,12 +70,19 @@ jod-thread = "0.1.2"
 log = "0.4.14"
 maplit = "1.0.2"
 notify = "4.0.17"
+num_cpus = "1.15.0"
 opener = "0.5.0"
-reqwest = { version = "0.11.10", features = ["blocking", "json", "native-tls-vendored"] }
+rayon = "1.7.0"
+reqwest = { version = "0.11.10", features = [
+    "blocking",
+    "json",
+    "native-tls-vendored",
+] }
 ritz = "0.1.0"
 roblox_install = "1.0.0"
 serde = { version = "1.0.130", features = ["derive", "rc"] }
 serde_json = "1.0.68"
+toml = "0.5.9"
 termcolor = "1.1.2"
 thiserror = "1.0.30"
 tokio = { version = "1.12.0", features = ["rt", "rt-multi-thread"] }
@@ -97,6 +102,7 @@ anyhow = "1.0.44"
 bincode = "1.3.3"
 fs-err = "2.6.0"
 maplit = "1.0.2"
+semver = "1.0.19"
 
 [dev-dependencies]
 rojo-insta-ext = { path = "crates/rojo-insta-ext" }

README.md

@@ -8,7 +8,6 @@
     <a href="https://github.com/rojo-rbx/rojo/actions"><img src="https://github.com/rojo-rbx/rojo/workflows/CI/badge.svg" alt="Actions status" /></a>
     <a href="https://crates.io/crates/rojo"><img src="https://img.shields.io/crates/v/rojo.svg?label=latest%20release" alt="Latest server version" /></a>
     <a href="https://rojo.space/docs"><img src="https://img.shields.io/badge/docs-website-brightgreen.svg" alt="Rojo Documentation" /></a>
-    <a href="https://www.patreon.com/lpghatguy"><img src="https://img.shields.io/badge/sponsor-patreon-red" alt="Patreon" /></a>
 </div>
 
 <hr />
@@ -41,7 +40,7 @@ Check out our [contribution guide](CONTRIBUTING.md) for detailed instructions fo
 
 Pull requests are welcome!
 
-Rojo supports Rust 1.58.1 and newer. The minimum supported version of Rust is based on the latest versions of the dependencies that Rojo has.
+Rojo supports Rust 1.70.0 and newer. The minimum supported version of Rust is based on the latest versions of the dependencies that Rojo has.
 
 ## License
 Rojo is available under the terms of the Mozilla Public License, Version 2.0. See [LICENSE.txt](LICENSE.txt) for details.

aftman.toml

@@ -1,5 +1,5 @@
 [tools]
-wally = "UpliftGames/wally@0.3.1"
-rojo = "rojo-rbx/rojo@7.2.1"
-selene = "Kampfkarren/selene@0.20.0"
+rojo = "rojo-rbx/rojo@7.3.0"
+selene = "Kampfkarren/selene@0.25.0"
+stylua = "JohnnyMorganz/stylua@0.18.2"
 run-in-roblox = "rojo-rbx/run-in-roblox@0.3.0"

assets/default-model-project/README.md

@@ -2,7 +2,7 @@
 Generated by [Rojo](https://github.com/rojo-rbx/rojo) {rojo_version}.
 
 ## Getting Started
-To build this library or plugin, use:
+To build this library, use:
 
 ```bash
 rojo build -o "{project_name}.rbxmx"

assets/default-plugin-project/README.md

@@ -0,0 +1,17 @@
+# {project_name}
+Generated by [Rojo](https://github.com/rojo-rbx/rojo) {rojo_version}.
+
+## Getting Started
+To build this plugin to your local plugins folder, use:
+
+```bash
+rojo build -p "{project_name}.rbxm"
+```
+
+You can include the `watch` flag to re-build it on save:
+
+```bash
+rojo build -p "{project_name}.rbxm" --watch
+```
+
+For more help, check out [the Rojo documentation](https://rojo.space/docs).

assets/default-plugin-project/default.project.json

@@ -0,0 +1,6 @@
+{
+  "name": "{project_name}",
+  "tree": {
+    "$path": "src"
+  }
+}

assets/default-plugin-project/gitignore.txt

@@ -0,0 +1,3 @@
+# Plugin model files
+/{project_name}.rbxmx
+/{project_name}.rbxm

benches/build.rs

@@ -31,11 +31,12 @@ fn bench_build_place(c: &mut Criterion, name: &str, path: &str) {
 fn place_setup<P: AsRef<Path>>(input_path: P) -> (TempDir, BuildCommand) {
     let dir = tempdir().unwrap();
     let input = input_path.as_ref().to_path_buf();
-    let output = dir.path().join("output.rbxlx");
+    let output = Some(dir.path().join("output.rbxlx"));
 
     let options = BuildCommand {
         project: input,
         watch: false,
+        plugin: None,
         output,
     };
 

build.rs

@@ -7,6 +7,7 @@ use fs_err as fs;
 use fs_err::File;
 use maplit::hashmap;
 use memofs::VfsSnapshot;
+use semver::Version;
 
 fn snapshot_from_fs_path(path: &Path) -> io::Result<VfsSnapshot> {
     println!("cargo:rerun-if-changed={}", path.display());
@@ -43,6 +44,19 @@ fn main() -> Result<(), anyhow::Error> {
     let root_dir = env::var_os("CARGO_MANIFEST_DIR").unwrap();
     let plugin_root = PathBuf::from(root_dir).join("plugin");
 
+    let our_version = Version::parse(env::var_os("CARGO_PKG_VERSION").unwrap().to_str().unwrap())?;
+    let plugin_version =
+        Version::parse(fs::read_to_string(&plugin_root.join("Version.txt"))?.trim())?;
+
+    assert!(
+        our_version.major == plugin_version.major,
+        "plugin version does not match Cargo version"
+    );
+    assert!(
+        our_version.minor == plugin_version.minor,
+        "plugin version does not match Cargo version"
+    );
+
     let snapshot = VfsSnapshot::dir(hashmap! {
         "default.project.json" => snapshot_from_fs_path(&plugin_root.join("default.project.json"))?,
         "fmt" => snapshot_from_fs_path(&plugin_root.join("fmt"))?,
@@ -51,10 +65,11 @@ fn main() -> Result<(), anyhow::Error> {
         "rbx_dom_lua" => snapshot_from_fs_path(&plugin_root.join("rbx_dom_lua"))?,
         "src" => snapshot_from_fs_path(&plugin_root.join("src"))?,
         "Packages" => snapshot_from_fs_path(&plugin_root.join("Packages"))?,
+        "Version.txt" => snapshot_from_fs_path(&plugin_root.join("Version.txt"))?,
     });
 
     let out_path = Path::new(&out_dir).join("plugin.bincode");
-    let out_file = File::create(&out_path)?;
+    let out_file = File::create(out_path)?;
 
     bincode::serialize_into(out_file, &snapshot)?;
 

crates/memofs/CHANGELOG.md

@@ -1,6 +1,7 @@
 # memofs Changelog
 
 ## Unreleased Changes
+* Changed the `StdBackend` file watcher to use `PollWatcher` on macOS.
 
 ## 0.2.0 (2021-08-23)
 * Updated to `crossbeam-channel` 0.5.1.
@@ -15,4 +16,4 @@
 * Improved error messages using the [fs-err](https://crates.io/crates/fs-err) crate.
 
 ## 0.1.0 (2020-03-10)
-* Initial release
+* Initial release

crates/memofs/src/in_memory_fs.rs

@@ -50,6 +50,12 @@ impl InMemoryFs {
     }
 }
 
+impl Default for InMemoryFs {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
 #[derive(Debug)]
 struct InMemoryFsInner {
     entries: HashMap<PathBuf, Entry>,

crates/memofs/src/lib.rs

@@ -194,11 +194,8 @@ impl VfsInner {
     }
 
     fn commit_event(&mut self, event: &VfsEvent) -> io::Result<()> {
-        match event {
-            VfsEvent::Remove(path) => {
-                let _ = self.backend.unwatch(&path);
-            }
-            _ => {}
+        if let VfsEvent::Remove(path) = event {
+            let _ = self.backend.unwatch(path);
         }
 
         Ok(())

crates/memofs/src/noop_backend.rs

@@ -74,3 +74,9 @@ impl VfsBackend for NoopBackend {
         ))
     }
 }
+
+impl Default for NoopBackend {
+    fn default() -> Self {
+        Self::new()
+    }
+}

crates/memofs/src/std_backend.rs

@@ -5,19 +5,34 @@ use std::thread;
 use std::time::Duration;
 
 use crossbeam_channel::Receiver;
-use notify::{watcher, DebouncedEvent, RecommendedWatcher, RecursiveMode, Watcher};
+use notify::{DebouncedEvent, RecursiveMode, Watcher};
+
+#[cfg(target_os = "macos")]
+use notify::PollWatcher;
+#[cfg(not(target_os = "macos"))]
+use notify::{watcher, RecommendedWatcher};
 
 use crate::{DirEntry, Metadata, ReadDir, VfsBackend, VfsEvent};
 
 /// `VfsBackend` that uses `std::fs` and the `notify` crate.
 pub struct StdBackend {
+    // We use PollWatcher on macos because using the KQueue watcher
+    // can cause some gnarly performance problems.
+    #[cfg(target_os = "macos")]
+    watcher: PollWatcher,
+    #[cfg(not(target_os = "macos"))]
     watcher: RecommendedWatcher,
+
     watcher_receiver: Receiver<VfsEvent>,
 }
 
 impl StdBackend {
     pub fn new() -> StdBackend {
         let (notify_tx, notify_rx) = mpsc::channel();
+
+        #[cfg(target_os = "macos")]
+        let watcher = PollWatcher::new(notify_tx, Duration::from_millis(50)).unwrap();
+        #[cfg(not(target_os = "macos"))]
         let watcher = watcher(notify_tx, Duration::from_millis(50)).unwrap();
 
         let (tx, rx) = crossbeam_channel::unbounded();
@@ -108,3 +123,9 @@ impl VfsBackend for StdBackend {
             .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
     }
 }
+
+impl Default for StdBackend {
+    fn default() -> Self {
+        Self::new()
+    }
+}

plugin/Version.txt

@@ -0,0 +1 @@
+7.4.0-rc1

plugin/default.project.json

@@ -1,25 +1,27 @@
 {
-	"name": "Rojo",
-	"tree": {
-		"$className": "Folder",
-		"Plugin": {
-			"$path": "src"
-		},
-		"Packages": {
-			"$path": "Packages",
-
-			"Log": {
-				"$path": "log"
-			},
-			"Http": {
-				"$path": "http"
-			},
-			"Fmt": {
-				"$path": "fmt"
-			},
-			"RbxDom": {
-				"$path": "rbx_dom_lua"
-			}
-		}
-	}
-}
+  "name": "Rojo",
+  "tree": {
+    "$className": "Folder",
+    "Plugin": {
+      "$path": "src"
+    },
+    "Packages": {
+      "$path": "Packages",
+      "Log": {
+        "$path": "log"
+      },
+      "Http": {
+        "$path": "http"
+      },
+      "Fmt": {
+        "$path": "fmt"
+      },
+      "RbxDom": {
+        "$path": "rbx_dom_lua"
+      }
+    },
+    "Version": {
+      "$path": "Version.txt"
+    }
+  }
+}

plugin/rbx_dom_lua/EncodedValue.lua

@@ -20,8 +20,8 @@ local function serializeFloat(value)
 	return value
 end
 
-local ALL_AXES = {"X", "Y", "Z"}
-local ALL_FACES = {"Right", "Top", "Back", "Left", "Bottom", "Front"}
+local ALL_AXES = { "X", "Y", "Z" }
+local ALL_FACES = { "Right", "Top", "Back", "Left", "Bottom", "Front" }
 
 local EncodedValue = {}
 
@@ -37,7 +37,10 @@ types = {
 				if ok then
 					output[key] = result
 				else
-					local warning = ("Could not decode attribute value of type %q: %s"):format(typeof(value), tostring(result))
+					local warning = ("Could not decode attribute value of type %q: %s"):format(
+						typeof(value),
+						tostring(result)
+					)
 					warn(warning)
 				end
 			end
@@ -53,7 +56,10 @@ types = {
 				if ok then
 					output[key] = result
 				else
-					local warning = ("Could not encode attribute value of type %q: %s"):format(typeof(value), tostring(result))
+					local warning = ("Could not encode attribute value of type %q: %s"):format(
+						typeof(value),
+						tostring(result)
+					)
 					warn(warning)
 				end
 			end
@@ -111,6 +117,7 @@ types = {
 			local pos = pod.position
 			local orient = pod.orientation
 
+			--stylua: ignore
 			return CFrame.new(
 				pos[1], pos[2], pos[3],
 				orient[1][1], orient[1][2], orient[1][3],
@@ -120,17 +127,14 @@ types = {
 		end,
 
 		toPod = function(roblox)
-			local x, y, z,
-				r00, r01, r02,
-				r10, r11, r12,
-				r20, r21, r22 = roblox:GetComponents()
+			local x, y, z, r00, r01, r02, r10, r11, r12, r20, r21, r22 = roblox:GetComponents()
 
 			return {
-				position = {x, y, z},
+				position = { x, y, z },
 				orientation = {
-					{r00, r01, r02},
-					{r10, r11, r12},
-					{r20, r21, r22},
+					{ r00, r01, r02 },
+					{ r10, r11, r12 },
+					{ r20, r21, r22 },
 				},
 			}
 		end,
@@ -140,7 +144,7 @@ types = {
 		fromPod = unpackDecoder(Color3.new),
 
 		toPod = function(roblox)
-			return {roblox.r, roblox.g, roblox.b}
+			return { roblox.r, roblox.g, roblox.b }
 		end,
 	},
 
@@ -161,10 +165,7 @@ types = {
 			local keypoints = {}
 
 			for index, keypoint in ipairs(pod.keypoints) do
-				keypoints[index] = ColorSequenceKeypoint.new(
-					keypoint.time,
-					types.Color3.fromPod(keypoint.color)
-				)
+				keypoints[index] = ColorSequenceKeypoint.new(keypoint.time, types.Color3.fromPod(keypoint.color))
 			end
 
 			return ColorSequence.new(keypoints)
@@ -265,11 +266,32 @@ types = {
 		toPod = identity,
 	},
 
+	MaterialColors = {
+		fromPod = function(pod: { [string]: { number } })
+			local real = {}
+			for name, color in pod do
+				real[Enum.Material[name]] = Color3.fromRGB(color[1], color[2], color[3])
+			end
+			return real
+		end,
+		toPod = function(roblox: { [Enum.Material]: Color3 })
+			local pod = {}
+			for material, color in roblox do
+				pod[material.Name] = {
+					math.round(math.clamp(color.R, 0, 1) * 255),
+					math.round(math.clamp(color.G, 0, 1) * 255),
+					math.round(math.clamp(color.B, 0, 1) * 255),
+				}
+			end
+			return pod
+		end,
+	},
+
 	NumberRange = {
 		fromPod = unpackDecoder(NumberRange.new),
 
 		toPod = function(roblox)
-			return {roblox.Min, roblox.Max}
+			return { roblox.Min, roblox.Max }
 		end,
 	},
 
@@ -278,11 +300,7 @@ types = {
 			local keypoints = {}
 
 			for index, keypoint in ipairs(pod.keypoints) do
-				keypoints[index] = NumberSequenceKeypoint.new(
-					keypoint.time,
-					keypoint.value,
-					keypoint.envelope
-				)
+				keypoints[index] = NumberSequenceKeypoint.new(keypoint.time, keypoint.value, keypoint.envelope)
 			end
 
 			return NumberSequence.new(keypoints)
@@ -337,10 +355,7 @@ types = {
 
 	Ray = {
 		fromPod = function(pod)
-			return Ray.new(
-				types.Vector3.fromPod(pod.origin),
-				types.Vector3.fromPod(pod.direction)
-			)
+			return Ray.new(types.Vector3.fromPod(pod.origin), types.Vector3.fromPod(pod.direction))
 		end,
 
 		toPod = function(roblox)
@@ -353,10 +368,7 @@ types = {
 
 	Rect = {
 		fromPod = function(pod)
-			return Rect.new(
-				types.Vector2.fromPod(pod[1]),
-				types.Vector2.fromPod(pod[2])
-			)
+			return Rect.new(types.Vector2.fromPod(pod[1]), types.Vector2.fromPod(pod[2]))
 		end,
 
 		toPod = function(roblox)
@@ -368,31 +380,28 @@ types = {
 	},
 
 	Ref = {
-		fromPod = function(_pod)
+		fromPod = function(_)
 			error("Ref cannot be decoded on its own")
 		end,
 
-		toPod = function(_roblox)
+		toPod = function(_)
 			error("Ref can not be encoded on its own")
 		end,
 	},
 
 	Region3 = {
-		fromPod = function(pod)
+		fromPod = function(_)
 			error("Region3 is not implemented")
 		end,
 
-		toPod = function(roblox)
+		toPod = function(_)
 			error("Region3 is not implemented")
 		end,
 	},
 
 	Region3int16 = {
 		fromPod = function(pod)
-			return Region3int16.new(
-				types.Vector3int16.fromPod(pod[1]),
-				types.Vector3int16.fromPod(pod[2])
-			)
+			return Region3int16.new(types.Vector3int16.fromPod(pod[1]), types.Vector3int16.fromPod(pod[2]))
 		end,
 
 		toPod = function(roblox)
@@ -403,12 +412,21 @@ types = {
 		end,
 	},
 
+	SecurityCapabilities = {
+		fromPod = function(_pod)
+			error("SecurityCapabilities is not implemented")
+		end,
+		toPod = function(_roblox)
+			error("SecurityCapabilities is not implemented")
+		end,
+	},
+
 	SharedString = {
-		fromPod = function(pod)
+		fromPod = function(_pod)
 			error("SharedString is not supported")
 		end,
 
-		toPod = function(roblox)
+		toPod = function(_roblox)
 			error("SharedString is not supported")
 		end,
 	},
@@ -422,16 +440,13 @@ types = {
 		fromPod = unpackDecoder(UDim.new),
 
 		toPod = function(roblox)
-			return {roblox.Scale, roblox.Offset}
+			return { roblox.Scale, roblox.Offset }
 		end,
 	},
 
 	UDim2 = {
 		fromPod = function(pod)
-			return UDim2.new(
-				types.UDim.fromPod(pod[1]),
-				types.UDim.fromPod(pod[2])
-			)
+			return UDim2.new(types.UDim.fromPod(pod[1]), types.UDim.fromPod(pod[2]))
 		end,
 
 		toPod = function(roblox)
@@ -462,7 +477,7 @@ types = {
 		fromPod = unpackDecoder(Vector2int16.new),
 
 		toPod = function(roblox)
-			return {roblox.X, roblox.Y}
+			return { roblox.X, roblox.Y }
 		end,
 	},
 
@@ -482,7 +497,7 @@ types = {
 		fromPod = unpackDecoder(Vector3int16.new),
 
 		toPod = function(roblox)
-			return {roblox.X, roblox.Y, roblox.Z}
+			return { roblox.X, roblox.Y, roblox.Z }
 		end,
 	},
 }

plugin/rbx_dom_lua/EncodedValue.spec.lua

@@ -1,72 +0,0 @@
-return function()
-	local HttpService = game:GetService("HttpService")
-	
-	local EncodedValue = require(script.Parent.EncodedValue)
-	local allValues = require(script.Parent.allValues)
-
-	local function deepEq(a, b)
-		if typeof(a) ~= typeof(b) then
-			return false
-		end
-
-		local ty = typeof(a)
-
-		if ty == "table" then
-			local visited = {}
-			
-			for key, valueA in pairs(a) do
-				visited[key] = true
-				
-				if not deepEq(valueA, b[key]) then
-					return false
-				end
-			end
-
-			for key, valueB in pairs(b) do
-				if visited[key] then
-					continue
-				end
-
-				if not deepEq(valueB, a[key]) then
-					return false
-				end
-			end
-
-			return true
-		else
-			return a == b
-		end
-	end
-
-	local extraAssertions = {
-		CFrame = function(value)
-			expect(value).to.equal(CFrame.new(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12))
-		end,
-	}
-
-	for testName, testEntry in pairs(allValues) do
-		it("round trip " .. testName, function()
-			local ok, decoded = EncodedValue.decode(testEntry.value)
-			assert(ok, decoded)
-
-			if extraAssertions[testName] ~= nil then
-				extraAssertions[testName](decoded)
-			end
-
-			local ok, encoded = EncodedValue.encode(decoded, testEntry.ty)
-			assert(ok, encoded)
-
-			if not deepEq(encoded, testEntry.value) then
-				local expected = HttpService:JSONEncode(testEntry.value)
-				local actual = HttpService:JSONEncode(encoded)
-
-				local message = string.format(
-					"Round-trip results did not match.\nExpected:\n%s\nActual:\n%s",
-					expected, actual
-				)
-
-				error(message)
-			end
-		end)
-	end
-end

plugin/rbx_dom_lua/Error.lua

@@ -25,4 +25,4 @@ function Error:__tostring()
 	return ("Error(%s: %s)"):format(self.kind, tostring(self.extra))
 end
 
-return Error
+return Error

plugin/rbx_dom_lua/allValues.json

@@ -230,6 +230,118 @@
     },
     "ty": "Int64"
   },
+  "MaterialColors": {
+    "value": {
+      "MaterialColors": {
+        "Grass": [
+          106,
+          127,
+          63
+        ],
+        "Slate": [
+          63,
+          127,
+          107
+        ],
+        "Concrete": [
+          127,
+          102,
+          63
+        ],
+        "Brick": [
+          138,
+          86,
+          62
+        ],
+        "Sand": [
+          143,
+          126,
+          95
+        ],
+        "WoodPlanks": [
+          139,
+          109,
+          79
+        ],
+        "Rock": [
+          102,
+          108,
+          111
+        ],
+        "Glacier": [
+          101,
+          176,
+          234
+        ],
+        "Snow": [
+          195,
+          199,
+          218
+        ],
+        "Sandstone": [
+          137,
+          90,
+          71
+        ],
+        "Mud": [
+          58,
+          46,
+          36
+        ],
+        "Basalt": [
+          30,
+          30,
+          37
+        ],
+        "Ground": [
+          102,
+          92,
+          59
+        ],
+        "CrackedLava": [
+          232,
+          156,
+          74
+        ],
+        "Asphalt": [
+          115,
+          123,
+          107
+        ],
+        "Cobblestone": [
+          132,
+          123,
+          90
+        ],
+        "Ice": [
+          129,
+          194,
+          224
+        ],
+        "LeafyGrass": [
+          115,
+          132,
+          74
+        ],
+        "Salt": [
+          198,
+          189,
+          181
+        ],
+        "Limestone": [
+          206,
+          173,
+          148
+        ],
+        "Pavement": [
+          148,
+          148,
+          140
+        ]
+      }
+    },
+    "ty": "MaterialColors"
+  },
   "NumberRange": {
     "value": {
       "NumberRange": [

plugin/rbx_dom_lua/base64.lua

@@ -136,4 +136,4 @@ end
 return {
 	decode = decodeBase64,
 	encode = encodeBase64,
-}
+}

plugin/rbx_dom_lua/base64.spec.lua

@@ -1,29 +0,0 @@
-return function()
-	local base64 = require(script.Parent.base64)
-
-	it("should encode and decode", function()
-		local function try(str, expected)
-			local encoded = base64.encode(str)
-			expect(encoded).to.equal(expected)
-			expect(base64.decode(encoded)).to.equal(str)
-		end
-
-		try("Man", "TWFu")
-		try("Ma", "TWE=")
-		try("M", "TQ==")
-		try("ManM", "TWFuTQ==")
-		try(
-			[[Man is distinguished, not only by his reason, but by this ]]..
-			[[singular passion from other animals, which is a lust of the ]]..
-			[[mind, that by a perseverance of delight in the continued and ]]..
-			[[indefatigable generation of knowledge, exceeds the short ]]..
-			[[vehemence of any carnal pleasure.]],
-			[[TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sI]]..
-			[[GJ1dCBieSB0aGlzIHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYW]]..
-			[[xzLCB3aGljaCBpcyBhIGx1c3Qgb2YgdGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJ]]..
-			[[zZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGludWVkIGFuZCBpbmRl]]..
-			[[ZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRoZ]]..
-			[[SBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=]]
-		)
-	end)
-end

plugin/rbx_dom_lua/customProperties.lua

@@ -1,5 +1,30 @@
 local CollectionService = game:GetService("CollectionService")
 
+--- A list of `Enum.Material` values that are used for Terrain.MaterialColors
+local TERRAIN_MATERIAL_COLORS = {
+	Enum.Material.Grass,
+	Enum.Material.Slate,
+	Enum.Material.Concrete,
+	Enum.Material.Brick,
+	Enum.Material.Sand,
+	Enum.Material.WoodPlanks,
+	Enum.Material.Rock,
+	Enum.Material.Glacier,
+	Enum.Material.Snow,
+	Enum.Material.Sandstone,
+	Enum.Material.Mud,
+	Enum.Material.Basalt,
+	Enum.Material.Ground,
+	Enum.Material.CrackedLava,
+	Enum.Material.Asphalt,
+	Enum.Material.Cobblestone,
+	Enum.Material.Ice,
+	Enum.Material.LeafyGrass,
+	Enum.Material.Salt,
+	Enum.Material.Limestone,
+	Enum.Material.Pavement,
+}
+
 -- Defines how to read and write properties that aren't directly scriptable.
 --
 -- The reflection database refers to these as having scriptability = "Custom"
@@ -52,10 +77,10 @@ return {
 	},
 	LocalizationTable = {
 		Contents = {
-			read = function(instance, key)
+			read = function(instance, _)
 				return true, instance:GetContents()
 			end,
-			write = function(instance, key, value)
+			write = function(instance, _, value)
 				instance:SetContents(value)
 				return true
 			end,
@@ -71,4 +96,24 @@ return {
 			end,
 		},
 	},
+	Terrain = {
+		MaterialColors = {
+			read = function(instance: Terrain)
+				-- There's no way to get a list of every color, so we have to
+				-- make one.
+				local colors = {}
+				for _, material in TERRAIN_MATERIAL_COLORS do
+					colors[material] = instance:GetMaterialColor(material)
+				end
+
+				return true, colors
+			end,
+			write = function(instance: Terrain, _, value: { [Enum.Material]: Color3 })
+				for material, color in value do
+					instance:SetMaterialColor(material, color)
+				end
+				return true
+			end,
+		},
+	},
 }

plugin/rbx_dom_lua/init.lua

@@ -24,7 +24,8 @@ local function findCanonicalPropertyDescriptor(className, propertyName)
 				return PropertyDescriptor.fromRaw(
 					currentClass.Properties[aliasData.AliasFor],
 					currentClassName,
-					aliasData.AliasFor)
+					aliasData.AliasFor
+				)
 			end
 
 			return nil

plugin/rbx_dom_lua/init.spec.lua

@@ -1,7 +0,0 @@
-return function()
-	local RbxDom = require(script.Parent)
-
-	it("should load", function()
-		expect(RbxDom).to.be.ok()
-	end)
-end

plugin/src/ApiContext.lua

@@ -11,13 +11,6 @@ local validateApiInfo = Types.ifEnabled(Types.ApiInfoResponse)
 local validateApiRead = Types.ifEnabled(Types.ApiReadResponse)
 local validateApiSubscribe = Types.ifEnabled(Types.ApiSubscribeResponse)
 
---[[
-	Returns a promise that will never resolve nor reject.
-]]
-local function hangingPromise()
-	return Promise.new(function() end)
-end
-
 local function rejectFailedRequests(response)
 	if response.code >= 400 then
 		local message = string.format("HTTP %s:\n%s", tostring(response.code), response.body)
@@ -31,15 +24,17 @@ end
 local function rejectWrongProtocolVersion(infoResponseBody)
 	if infoResponseBody.protocolVersion ~= Config.protocolVersion then
 		local message = (
-			"Found a Rojo dev server, but it's using a different protocol version, and is incompatible." ..
-			"\nMake sure you have matching versions of both the Rojo plugin and server!" ..
-			"\n\nYour client is version %s, with protocol version %s. It expects server version %s." ..
-			"\nYour server is version %s, with protocol version %s." ..
-			"\n\nGo to https://github.com/rojo-rbx/rojo for more details."
+			"Found a Rojo dev server, but it's using a different protocol version, and is incompatible."
+			.. "\nMake sure you have matching versions of both the Rojo plugin and server!"
+			.. "\n\nYour client is version %s, with protocol version %s. It expects server version %s."
+			.. "\nYour server is version %s, with protocol version %s."
+			.. "\n\nGo to https://github.com/rojo-rbx/rojo for more details."
 		):format(
-			Version.display(Config.version), Config.protocolVersion,
+			Version.display(Config.version),
+			Config.protocolVersion,
 			Config.expectedServerVersionString,
-			infoResponseBody.serverVersion, infoResponseBody.protocolVersion
+			infoResponseBody.serverVersion,
+			infoResponseBody.protocolVersion
 		)
 
 		return Promise.reject(message)
@@ -66,14 +61,11 @@ local function rejectWrongPlaceId(infoResponseBody)
 			end
 
 			local message = (
-				"Found a Rojo server, but its project is set to only be used with a specific list of places." ..
-				"\nYour place ID is %s, but needs to be one of these:" ..
-				"\n%s" ..
-				"\n\nTo change this list, edit 'servePlaceIds' in your .project.json file."
-			):format(
-				tostring(game.PlaceId),
-				table.concat(idList, "\n")
-			)
+				"Found a Rojo server, but its project is set to only be used with a specific list of places."
+				.. "\nYour place ID is %s, but needs to be one of these:"
+				.. "\n%s"
+				.. "\n\nTo change this list, edit 'servePlaceIds' in your .project.json file."
+			):format(tostring(game.PlaceId), table.concat(idList, "\n"))
 
 			return Promise.reject(message)
 		end
@@ -93,6 +85,7 @@ function ApiContext.new(baseUrl)
 		__sessionId = nil,
 		__messageCursor = -1,
 		__connected = true,
+		__activeRequests = {},
 	}
 
 	return setmetatable(self, ApiContext)
@@ -113,6 +106,11 @@ end
 
 function ApiContext:disconnect()
 	self.__connected = false
+	for request in self.__activeRequests do
+		Log.trace("Cancelling request {}", request)
+		request:cancel()
+	end
+	self.__activeRequests = {}
 end
 
 function ApiContext:setMessageCursor(index)
@@ -142,18 +140,15 @@ end
 function ApiContext:read(ids)
 	local url = ("%s/api/read/%s"):format(self.__baseUrl, table.concat(ids, ","))
 
-	return Http.get(url)
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.json)
-		:andThen(function(body)
-			if body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
-			end
+	return Http.get(url):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
+		if body.sessionId ~= self.__sessionId then
+			return Promise.reject("Server changed ID")
+		end
 
-			assert(validateApiRead(body))
+		assert(validateApiRead(body))
 
-			return body
-		end)
+		return body
+	end)
 end
 
 function ApiContext:write(patch)
@@ -190,63 +185,58 @@ function ApiContext:write(patch)
 
 	body = Http.jsonEncode(body)
 
-	return Http.post(url, body)
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.json)
-		:andThen(function(body)
-			Log.info("Write response: {:?}", body)
+	return Http.post(url, body):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
+		Log.info("Write response: {:?}", body)
 
-			return body
-		end)
+		return body
+	end)
 end
 
 function ApiContext:retrieveMessages()
 	local url = ("%s/api/subscribe/%s"):format(self.__baseUrl, self.__messageCursor)
 
 	local function sendRequest()
-		return Http.get(url)
-			:catch(function(err)
-				if err.type == Http.Error.Kind.Timeout then
-					if self.__connected then
-						return sendRequest()
-					else
-						return hangingPromise()
-					end
-				end
-
-				return Promise.reject(err)
-			end)
-	end
-
-	return sendRequest()
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.json)
-		:andThen(function(body)
-			if body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
+		local request = Http.get(url):catch(function(err)
+			if err.type == Http.Error.Kind.Timeout and self.__connected then
+				return sendRequest()
 			end
 
-			assert(validateApiSubscribe(body))
-
-			self:setMessageCursor(body.messageCursor)
-
-			return body.messages
+			return Promise.reject(err)
 		end)
+
+		Log.trace("Tracking request {}", request)
+		self.__activeRequests[request] = true
+
+		return request:finally(function(...)
+			Log.trace("Cleaning up request {}", request)
+			self.__activeRequests[request] = nil
+			return ...
+		end)
+	end
+
+	return sendRequest():andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
+		if body.sessionId ~= self.__sessionId then
+			return Promise.reject("Server changed ID")
+		end
+
+		assert(validateApiSubscribe(body))
+
+		self:setMessageCursor(body.messageCursor)
+
+		return body.messages
+	end)
 end
 
 function ApiContext:open(id)
 	local url = ("%s/api/open/%s"):format(self.__baseUrl, id)
 
-	return Http.post(url, "")
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.json)
-		:andThen(function(body)
-			if body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
-			end
+	return Http.post(url, ""):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
+		if body.sessionId ~= self.__sessionId then
+			return Promise.reject("Server changed ID")
+		end
 
-			return nil
-		end)
+		return nil
+	end)
 end
 
 return ApiContext

plugin/src/App/Components/Checkbox.lua

@@ -23,12 +23,10 @@ end
 
 function Checkbox:didUpdate(lastProps)
 	if lastProps.active ~= self.props.active then
-		self.motor:setGoal(
-			Flipper.Spring.new(self.props.active and 1 or 0, {
-				frequency = 6,
-				dampingRatio = 1.1,
-			})
-		)
+		self.motor:setGoal(Flipper.Spring.new(self.props.active and 1 or 0, {
+			frequency = 6,
+			dampingRatio = 1.1,
+		}))
 	end
 end
 
@@ -51,10 +49,16 @@ function Checkbox:render()
 			ZIndex = self.props.zIndex,
 			BackgroundTransparency = 1,
 
-			[Roact.Event.Activated] = self.props.onClick,
+			[Roact.Event.Activated] = function()
+				if self.props.locked then
+					return
+				end
+				self.props.onClick()
+			end,
 		}, {
 			StateTip = e(Tooltip.Trigger, {
-				text = if self.props.active then "Enabled" else "Disabled",
+				text = (if self.props.locked then "[LOCKED] " else "")
+					.. (if self.props.active then "Enabled" else "Disabled"),
 			}),
 
 			Active = e(SlicedImage, {
@@ -65,7 +69,7 @@ function Checkbox:render()
 				zIndex = 2,
 			}, {
 				Icon = e("ImageLabel", {
-					Image = Assets.Images.Checkbox.Active,
+					Image = if self.props.locked then Assets.Images.Checkbox.Locked else Assets.Images.Checkbox.Active,
 					ImageColor3 = theme.Active.IconColor,
 					ImageTransparency = activeTransparency,
 
@@ -84,7 +88,9 @@ function Checkbox:render()
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				Icon = e("ImageLabel", {
-					Image = Assets.Images.Checkbox.Inactive,
+					Image = if self.props.locked
+						then Assets.Images.Checkbox.Locked
+						else Assets.Images.Checkbox.Inactive,
 					ImageColor3 = theme.Inactive.IconColor,
 					ImageTransparency = self.props.transparency,
 

plugin/src/App/Components/CodeLabel.lua

@@ -0,0 +1,61 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Highlighter = require(Packages.Highlighter)
+Highlighter.matchStudioSettings()
+
+local e = Roact.createElement
+
+local CodeLabel = Roact.PureComponent:extend("CodeLabel")
+
+function CodeLabel:init()
+	self.labelRef = Roact.createRef()
+	self.highlightsRef = Roact.createRef()
+end
+
+function CodeLabel:didMount()
+	Highlighter.highlight({
+		textObject = self.labelRef:getValue(),
+	})
+	self:updateHighlights()
+end
+
+function CodeLabel:didUpdate()
+	self:updateHighlights()
+end
+
+function CodeLabel:updateHighlights()
+	local highlights = self.highlightsRef:getValue()
+	if not highlights then
+		return
+	end
+
+	for _, lineLabel in highlights:GetChildren() do
+		local lineNum = tonumber(string.match(lineLabel.Name, "%d+") or "0")
+		lineLabel.BackgroundColor3 = self.props.lineBackground
+		lineLabel.BorderSizePixel = 0
+		lineLabel.BackgroundTransparency = if self.props.markedLines[lineNum] then 0.25 else 1
+	end
+end
+
+function CodeLabel:render()
+	return e("TextLabel", {
+		Size = self.props.size,
+		Position = self.props.position,
+		Text = self.props.text,
+		BackgroundTransparency = 1,
+		Font = Enum.Font.RobotoMono,
+		TextSize = 16,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextYAlignment = Enum.TextYAlignment.Top,
+		TextColor3 = Color3.fromRGB(255, 255, 255),
+		[Roact.Ref] = self.labelRef,
+	}, {
+		SyntaxHighlights = e("Folder", {
+			[Roact.Ref] = self.highlightsRef,
+		}),
+	})
+end
+
+return CodeLabel

plugin/src/App/Components/Dropdown.lua

@@ -29,13 +29,17 @@ function Dropdown:init()
 	})
 end
 
-function Dropdown:didUpdate()
-	self.openMotor:setGoal(
-		Flipper.Spring.new(self.state.open and 1 or 0, {
-			frequency = 6,
-			dampingRatio = 1.1,
+function Dropdown:didUpdate(prevProps)
+	if self.props.locked and not prevProps.locked then
+		self:setState({
+			open = false,
 		})
-	)
+	end
+
+	self.openMotor:setGoal(Flipper.Spring.new(self.state.open and 1 or 0, {
+		frequency = 6,
+		dampingRatio = 1.1,
+	}))
 end
 
 function Dropdown:render()
@@ -46,10 +50,7 @@ function Dropdown:render()
 		local width = -1
 		for i, option in self.props.options do
 			local text = tostring(option or "")
-			local textSize = TextService:GetTextSize(
-				text, 15, Enum.Font.GothamMedium,
-				Vector2.new(math.huge, 20)
-			)
+			local textSize = TextService:GetTextSize(text, 15, Enum.Font.GothamMedium, Vector2.new(math.huge, 20))
 			if textSize.X > width then
 				width = textSize.X
 			end
@@ -68,6 +69,9 @@ function Dropdown:render()
 				Font = Enum.Font.GothamMedium,
 
 				[Roact.Event.Activated] = function()
+					if self.props.locked then
+						return
+					end
 					self:setState({
 						open = false,
 					})
@@ -81,7 +85,7 @@ function Dropdown:render()
 		end
 
 		return e("ImageButton", {
-			Size = UDim2.new(0, width+50, 0, 28),
+			Size = UDim2.new(0, width + 50, 0, 28),
 			Position = self.props.position,
 			AnchorPoint = self.props.anchorPoint,
 			LayoutOrder = self.props.layoutOrder,
@@ -89,6 +93,9 @@ function Dropdown:render()
 			BackgroundTransparency = 1,
 
 			[Roact.Event.Activated] = function()
+				if self.props.locked then
+					return
+				end
 				self:setState({
 					open = not self.state.open,
 				})
@@ -101,7 +108,7 @@ function Dropdown:render()
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				DropArrow = e("ImageLabel", {
-					Image = Assets.Images.Dropdown.Arrow,
+					Image = if self.props.locked then Assets.Images.Dropdown.Locked else Assets.Images.Dropdown.Arrow,
 					ImageColor3 = self.openBinding:map(function(a)
 						return theme.Closed.IconColor:Lerp(theme.Open.IconColor, a)
 					end),
@@ -128,40 +135,42 @@ function Dropdown:render()
 					TextTransparency = self.props.transparency,
 				}),
 			}),
-			Options = if self.state.open then e(SlicedImage, {
-				slice = Assets.Slices.RoundedBackground,
-				color = theme.BackgroundColor,
-				position = UDim2.new(1, 0, 1, 3),
-				size = self.openBinding:map(function(a)
-					return UDim2.new(1, 0, a*math.min(3, #self.props.options), 0)
-				end),
-				anchorPoint = Vector2.new(1, 0),
-			}, {
-				Border = e(SlicedImage, {
-					slice = Assets.Slices.RoundedBorder,
-					color = theme.BorderColor,
-					transparency = self.props.transparency,
-					size = UDim2.new(1, 0, 1, 0),
-				}),
-				ScrollingFrame = e(ScrollingFrame, {
-					size = UDim2.new(1, -4, 1, -4),
-					position = UDim2.new(0, 2, 0, 2),
-					transparency = self.props.transparency,
-					contentSize = self.contentSize,
+			Options = if self.state.open
+				then e(SlicedImage, {
+					slice = Assets.Slices.RoundedBackground,
+					color = theme.BackgroundColor,
+					position = UDim2.new(1, 0, 1, 3),
+					size = self.openBinding:map(function(a)
+						return UDim2.new(1, 0, a * math.min(3, #self.props.options), 0)
+					end),
+					anchorPoint = Vector2.new(1, 0),
 				}, {
-					Layout = e("UIListLayout", {
-						VerticalAlignment = Enum.VerticalAlignment.Top,
-						FillDirection = Enum.FillDirection.Vertical,
-						SortOrder = Enum.SortOrder.LayoutOrder,
-						Padding = UDim.new(0, 0),
-
-						[Roact.Change.AbsoluteContentSize] = function(object)
-							self.setContentSize(object.AbsoluteContentSize)
-						end,
+					Border = e(SlicedImage, {
+						slice = Assets.Slices.RoundedBorder,
+						color = theme.BorderColor,
+						transparency = self.props.transparency,
+						size = UDim2.new(1, 0, 1, 0),
 					}),
-					Roact.createFragment(optionButtons),
-				}),
-			}) else nil,
+					ScrollingFrame = e(ScrollingFrame, {
+						size = UDim2.new(1, -4, 1, -4),
+						position = UDim2.new(0, 2, 0, 2),
+						transparency = self.props.transparency,
+						contentSize = self.contentSize,
+					}, {
+						Layout = e("UIListLayout", {
+							VerticalAlignment = Enum.VerticalAlignment.Top,
+							FillDirection = Enum.FillDirection.Vertical,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 0),
+
+							[Roact.Change.AbsoluteContentSize] = function(object)
+								self.setContentSize(object.AbsoluteContentSize)
+							end,
+						}),
+						Roact.createFragment(optionButtons),
+					}),
+				})
+				else nil,
 		})
 	end)
 end

plugin/src/App/Components/IconButton.lua

@@ -38,15 +38,11 @@ function IconButton:render()
 		[Roact.Event.Activated] = self.props.onClick,
 
 		[Roact.Event.MouseEnter] = function()
-			self.motor:setGoal(
-				Flipper.Spring.new(1, HOVER_SPRING_PROPS)
-			)
+			self.motor:setGoal(Flipper.Spring.new(1, HOVER_SPRING_PROPS))
 		end,
 
 		[Roact.Event.MouseLeave] = function()
-			self.motor:setGoal(
-				Flipper.Spring.new(0, HOVER_SPRING_PROPS)
-			)
+			self.motor:setGoal(Flipper.Spring.new(0, HOVER_SPRING_PROPS))
 		end,
 	}, {
 		Icon = e("ImageLabel", {

plugin/src/App/Components/PatchVisualizer/ChangeList.lua

@@ -4,10 +4,14 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
+local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local DisplayValue = require(script.Parent.DisplayValue)
 
+local EMPTY_TABLE = {}
+
 local e = Roact.createElement
 
 local ChangeList = Roact.Component:extend("ChangeList")
@@ -26,8 +30,6 @@ function ChangeList:render()
 			return 0.93 + (0.07 * t)
 		end)
 
-		local columnVisibility = props.columnVisibility
-
 		local rows = {}
 		local pad = {
 			PaddingLeft = UDim.new(0, 5),
@@ -48,7 +50,6 @@ function ChangeList:render()
 				VerticalAlignment = Enum.VerticalAlignment.Center,
 			}),
 			A = e("TextLabel", {
-				Visible = columnVisibility[1],
 				Text = tostring(changes[1][1]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -61,7 +62,6 @@ function ChangeList:render()
 				LayoutOrder = 1,
 			}),
 			B = e("TextLabel", {
-				Visible = columnVisibility[2],
 				Text = tostring(changes[1][2]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -74,7 +74,6 @@ function ChangeList:render()
 				LayoutOrder = 2,
 			}),
 			C = e("TextLabel", {
-				Visible = columnVisibility[3],
 				Text = tostring(changes[1][3]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -93,6 +92,92 @@ function ChangeList:render()
 				continue -- Skip headers, already handled above
 			end
 
+			local metadata = values[4] or EMPTY_TABLE
+			local isWarning = metadata.isWarning
+
+			-- Special case for .Source updates
+			-- because we want to display a syntax highlighted diff for better UX
+			if self.props.showSourceDiff and tostring(values[1]) == "Source" then
+				rows[row] = e("Frame", {
+					Size = UDim2.new(1, 0, 0, 30),
+					BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
+					BackgroundColor3 = theme.Diff.Row,
+					BorderSizePixel = 0,
+					LayoutOrder = row,
+				}, {
+					Padding = e("UIPadding", pad),
+					Layout = e("UIListLayout", {
+						FillDirection = Enum.FillDirection.Horizontal,
+						SortOrder = Enum.SortOrder.LayoutOrder,
+						HorizontalAlignment = Enum.HorizontalAlignment.Left,
+						VerticalAlignment = Enum.VerticalAlignment.Center,
+					}),
+					A = e("TextLabel", {
+						Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
+						BackgroundTransparency = 1,
+						Font = Enum.Font.GothamMedium,
+						TextSize = 14,
+						TextColor3 = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextTransparency = props.transparency,
+						TextTruncate = Enum.TextTruncate.AtEnd,
+						Size = UDim2.new(0.3, 0, 1, 0),
+						LayoutOrder = 1,
+					}),
+					Button = e("TextButton", {
+						Text = "",
+						Size = UDim2.new(0.7, 0, 1, -4),
+						LayoutOrder = 2,
+						BackgroundTransparency = 1,
+						[Roact.Event.Activated] = function()
+							if props.showSourceDiff then
+								props.showSourceDiff(tostring(values[2]), tostring(values[3]))
+							end
+						end,
+					}, {
+						e(BorderedContainer, {
+							size = UDim2.new(1, 0, 1, 0),
+							transparency = self.props.transparency:map(function(t)
+								return 0.5 + (0.5 * t)
+							end),
+						}, {
+							Layout = e("UIListLayout", {
+								FillDirection = Enum.FillDirection.Horizontal,
+								SortOrder = Enum.SortOrder.LayoutOrder,
+								HorizontalAlignment = Enum.HorizontalAlignment.Center,
+								VerticalAlignment = Enum.VerticalAlignment.Center,
+								Padding = UDim.new(0, 5),
+							}),
+							Label = e("TextLabel", {
+								Text = "View Diff",
+								BackgroundTransparency = 1,
+								Font = Enum.Font.GothamMedium,
+								TextSize = 14,
+								TextColor3 = theme.Settings.Setting.DescriptionColor,
+								TextXAlignment = Enum.TextXAlignment.Left,
+								TextTransparency = props.transparency,
+								TextTruncate = Enum.TextTruncate.AtEnd,
+								Size = UDim2.new(0, 65, 1, 0),
+								LayoutOrder = 1,
+							}),
+							Icon = e("ImageLabel", {
+								Image = Assets.Images.Icons.Expand,
+								ImageColor3 = theme.Settings.Setting.DescriptionColor,
+								ImageTransparency = self.props.transparency,
+
+								Size = UDim2.new(0, 16, 0, 16),
+								Position = UDim2.new(0.5, 0, 0.5, 0),
+								AnchorPoint = Vector2.new(0.5, 0.5),
+
+								BackgroundTransparency = 1,
+								LayoutOrder = 2,
+							}),
+						}),
+					}),
+				})
+				continue
+			end
+
 			rows[row] = e("Frame", {
 				Size = UDim2.new(1, 0, 0, 30),
 				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
@@ -108,12 +193,11 @@ function ChangeList:render()
 					VerticalAlignment = Enum.VerticalAlignment.Center,
 				}),
 				A = e("TextLabel", {
-					Visible = columnVisibility[1],
-					Text = tostring(values[1]),
+					Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
 					BackgroundTransparency = 1,
 					Font = Enum.Font.GothamMedium,
 					TextSize = 14,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextColor3 = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
 					TextTruncate = Enum.TextTruncate.AtEnd,
@@ -123,7 +207,6 @@ function ChangeList:render()
 				B = e(
 					"Frame",
 					{
-						Visible = columnVisibility[2],
 						BackgroundTransparency = 1,
 						Size = UDim2.new(0.35, 0, 1, 0),
 						LayoutOrder = 2,
@@ -131,12 +214,12 @@ function ChangeList:render()
 					e(DisplayValue, {
 						value = values[2],
 						transparency = props.transparency,
+						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					})
 				),
 				C = e(
 					"Frame",
 					{
-						Visible = columnVisibility[3],
 						BackgroundTransparency = 1,
 						Size = UDim2.new(0.35, 0, 1, 0),
 						LayoutOrder = 3,
@@ -144,6 +227,7 @@ function ChangeList:render()
 					e(DisplayValue, {
 						value = values[3],
 						transparency = props.transparency,
+						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					})
 				),
 			})

plugin/src/App/Components/PatchVisualizer/DisplayValue.lua

@@ -34,7 +34,7 @@ local function DisplayValue(props)
 					BackgroundTransparency = 1,
 					Font = Enum.Font.GothamMedium,
 					TextSize = 14,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextColor3 = props.textColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
 					TextTruncate = Enum.TextTruncate.AtEnd,
@@ -42,7 +42,6 @@ local function DisplayValue(props)
 					Position = UDim2.new(0, 25, 0, 0),
 				}),
 			})
-
 		elseif t == "table" then
 			-- Showing a memory address for tables is useless, so we want to show the best we can
 			local textRepresentation = nil
@@ -62,10 +61,10 @@ local function DisplayValue(props)
 
 					-- Wrap strings in quotes
 					if type(k) == "string" then
-						k = "\"" .. k .. "\""
+						k = '"' .. k .. '"'
 					end
 					if type(v) == "string" then
-						v = "\"" .. v .. "\""
+						v = '"' .. v .. '"'
 					end
 
 					out[i] = string.format("[%s] = %s", tostring(k), tostring(v))
@@ -78,7 +77,7 @@ local function DisplayValue(props)
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamMedium,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = props.textColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
@@ -95,7 +94,7 @@ local function DisplayValue(props)
 			BackgroundTransparency = 1,
 			Font = Enum.Font.GothamMedium,
 			TextSize = 14,
-			TextColor3 = theme.Settings.Setting.DescriptionColor,
+			TextColor3 = props.textColor,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTransparency = props.transparency,
 			TextTruncate = Enum.TextTruncate.AtEnd,

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -1,3 +1,4 @@
+local SelectionService = game:GetService("Selection")
 local StudioService = game:GetService("StudioService")
 
 local Rojo = script:FindFirstAncestor("Rojo")
@@ -14,6 +15,7 @@ local bindingUtil = require(Plugin.App.bindingUtil)
 local e = Roact.createElement
 
 local ChangeList = require(script.Parent.ChangeList)
+local Tooltip = require(script.Parent.Parent.Tooltip)
 
 local Expansion = Roact.Component:extend("Expansion")
 
@@ -32,7 +34,7 @@ function Expansion:render()
 		ChangeList = e(ChangeList, {
 			changes = props.changeList,
 			transparency = props.transparency,
-			columnVisibility = props.columnVisibility,
+			showSourceDiff = props.showSourceDiff,
 		}),
 	})
 end
@@ -40,11 +42,6 @@ end
 local DomLabel = Roact.Component:extend("DomLabel")
 
 function DomLabel:init()
-	self.maxElementHeight = 0
-	if self.props.changeList then
-		self.maxElementHeight = math.clamp(#self.props.changeList * 30, 30, 30 * 6)
-	end
-
 	local initHeight = self.props.elementHeight:getValue()
 	self.expanded = initHeight > 30
 
@@ -74,6 +71,22 @@ function DomLabel:init()
 	end)
 end
 
+function DomLabel:didUpdate(prevProps)
+	if
+		prevProps.instance ~= self.props.instance
+		or prevProps.patchType ~= self.props.patchType
+		or prevProps.name ~= self.props.name
+		or prevProps.changeList ~= self.props.changeList
+	then
+		-- Close the expansion when the domlabel is changed to a different thing
+		self.expanded = false
+		self.motor:setGoal(Flipper.Spring.new(30, {
+			frequency = 5,
+			dampingRatio = 1,
+		}))
+	end
+end
+
 function DomLabel:render()
 	local props = self.props
 
@@ -111,27 +124,54 @@ function DomLabel:render()
 				PaddingLeft = UDim.new(0, 10),
 				PaddingRight = UDim.new(0, 10),
 			}),
-			ExpandButton = if props.changeList
-				then e("TextButton", {
-					BackgroundTransparency = 1,
-					Text = "",
-					Size = UDim2.new(1, 0, 1, 0),
-					[Roact.Event.Activated] = function()
-						self.expanded = not self.expanded
-						self.motor:setGoal(Flipper.Spring.new((self.expanded and self.maxElementHeight or 0) + 30, {
-							frequency = 5,
-							dampingRatio = 1,
-						}))
-					end,
-				})
-				else nil,
+			Button = e("TextButton", {
+				BackgroundTransparency = 1,
+				Text = "",
+				Size = UDim2.new(1, 0, 1, 0),
+				[Roact.Event.Activated] = function(_rbx: Instance, _input: InputObject, clickCount: number)
+					if clickCount == 1 then
+						-- Double click opens the instance in explorer
+						self.lastDoubleClickTime = os.clock()
+						if props.instance then
+							SelectionService:Set({ props.instance })
+						end
+					elseif clickCount == 0 then
+						-- Single click expands the changes
+						task.wait(0.25)
+						if os.clock() - (self.lastDoubleClickTime or 0) <= 0.25 then
+							-- This is a double click, so don't expand
+							return
+						end
+
+						if props.changeList then
+							self.expanded = not self.expanded
+							local goalHeight = 30
+								+ (if self.expanded then math.clamp(#props.changeList * 30, 30, 30 * 6) else 0)
+							self.motor:setGoal(Flipper.Spring.new(goalHeight, {
+								frequency = 5,
+								dampingRatio = 1,
+							}))
+						end
+					end
+				end,
+			}, {
+				StateTip = if (props.instance or props.changeList)
+					then e(Tooltip.Trigger, {
+						text = (if props.changeList
+							then "Click to " .. (if self.expanded then "hide" else "view") .. " changes"
+							else "") .. (if props.instance
+							then (if props.changeList then " & d" else "D") .. "ouble click to open in Explorer"
+							else ""),
+					})
+					else nil,
+			}),
 			Expansion = if props.changeList
 				then e(Expansion, {
 					rendered = self.state.renderExpansion,
 					indent = indent,
 					transparency = props.transparency,
 					changeList = props.changeList,
-					columnVisibility = props.columnVisibility,
+					showSourceDiff = props.showSourceDiff,
 				})
 				else nil,
 			DiffIcon = if props.patchType
@@ -156,7 +196,7 @@ function DomLabel:render()
 				AnchorPoint = Vector2.new(0, 0.5),
 			}),
 			InstanceName = e("TextLabel", {
-				Text = props.name .. (props.hint and string.format(
+				Text = (if props.isWarning then "⚠ " else "") .. props.name .. (props.hint and string.format(
 					'  <font color="#%s">%s</font>',
 					theme.AddressEntry.PlaceholderColor:ToHex(),
 					props.hint
@@ -165,7 +205,7 @@ function DomLabel:render()
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamMedium,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = if props.isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,

plugin/src/App/Components/PatchVisualizer/init.lua

@@ -1,143 +1,18 @@
-local HttpService = game:GetService("HttpService")
-
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
-local Log = require(Packages.Log)
 
+local PatchTree = require(Plugin.PatchTree)
 local PatchSet = require(Plugin.PatchSet)
-local decodeValue = require(Plugin.Reconciler.decodeValue)
-local getProperty = require(Plugin.Reconciler.getProperty)
 
+local Theme = require(Plugin.App.Theme)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local VirtualScroller = require(Plugin.App.Components.VirtualScroller)
 
 local e = Roact.createElement
 
-local function alphabeticalNext(t, state)
-	-- Equivalent of the next function, but returns the keys in the alphabetic
-	-- order of node names. We use a temporary ordered key table that is stored in the
-	-- table being iterated.
-
-	local key = nil
-	if state == nil then
-		-- First iteration, generate the index
-		local orderedIndex, i = table.create(5), 0
-		for k in t do
-			i += 1
-			orderedIndex[i] = k
-		end
-		table.sort(orderedIndex, function(a, b)
-			local nodeA, nodeB = t[a], t[b]
-			return (nodeA.name or "") < (nodeB.name or "")
-		end)
-
-		t.__orderedIndex = orderedIndex
-		key = orderedIndex[1]
-	else
-		-- Fetch the next value
-		for i, orderedState in t.__orderedIndex do
-			if orderedState == state then
-				key = t.__orderedIndex[i + 1]
-				break
-			end
-		end
-	end
-
-	if key then
-		return key, t[key]
-	end
-
-	-- No more value to return, cleanup
-	t.__orderedIndex = nil
-	return
-end
-
-local function alphabeticalPairs(t)
-	-- Equivalent of the pairs() iterator, but sorted
-	return alphabeticalNext, t, nil
-end
-
-local function Tree()
-	local tree = {
-		idToNode = {},
-		ROOT = {
-			className = "DataModel",
-			name = "ROOT",
-			children = {},
-		},
-	}
-	-- Add ROOT to idToNode or it won't be found by getNode since that searches *within* ROOT
-	tree.idToNode["ROOT"] = tree.ROOT
-
-	function tree:getNode(id, target)
-		if self.idToNode[id] then
-			return self.idToNode[id]
-		end
-
-		for nodeId, node in target or tree.ROOT.children do
-			if nodeId == id then
-				self.idToNode[id] = node
-				return node
-			end
-			local descendant = self:getNode(id, node.children)
-			if descendant then
-				return descendant
-			end
-		end
-
-		return nil
-	end
-
-	function tree:addNode(parent, props)
-		parent = parent or "ROOT"
-
-		local node = self:getNode(props.id)
-		if node then
-			for k, v in props do
-				node[k] = v
-			end
-			return node
-		end
-
-		node = table.clone(props)
-		node.children = {}
-
-		local parentNode = self:getNode(parent)
-		if not parentNode then
-			Log.warn("Failed to create node since parent doesnt exist: {}, {}", parent, props)
-			return
-		end
-
-		parentNode.children[node.id] = node
-		self.idToNode[node.id] = node
-
-		return node
-	end
-
-	function tree:buildAncestryNodes(ancestry, patch, instanceMap)
-		-- Build nodes for ancestry by going up the tree
-		local previousId = "ROOT"
-		for _, ancestorId in ancestry do
-			local value = instanceMap.fromIds[ancestorId] or patch.added[ancestorId]
-			if not value then
-				Log.warn("Failed to find ancestor object for " .. ancestorId)
-				continue
-			end
-			self:addNode(previousId, {
-				id = ancestorId,
-				className = value.ClassName,
-				name = value.Name,
-			})
-			previousId = ancestorId
-		end
-	end
-
-	return tree
-end
-
 local DomLabel = require(script.DomLabel)
 
 local PatchVisualizer = Roact.Component:extend("PatchVisualizer")
@@ -153,250 +28,96 @@ function PatchVisualizer:willUnmount()
 end
 
 function PatchVisualizer:shouldUpdate(nextProps)
+	if self.props.patchTree ~= nextProps.patchTree then
+		return true
+	end
+
 	local currentPatch, nextPatch = self.props.patch, nextProps.patch
-
-	return not PatchSet.isEqual(currentPatch, nextPatch)
-end
-
-function PatchVisualizer:buildTree(patch, instanceMap)
-	local tree = Tree()
-
-	for _, change in patch.updated do
-		local instance = instanceMap.fromIds[change.id]
-		if not instance then
-			continue
-		end
-
-		-- Gather ancestors from existing DOM
-		local ancestry = {}
-		local parentObject = instance.Parent
-		local parentId = instanceMap.fromInstances[parentObject]
-		while parentObject do
-			table.insert(ancestry, 1, parentId)
-			parentObject = parentObject.Parent
-			parentId = instanceMap.fromInstances[parentObject]
-		end
-
-		tree:buildAncestryNodes(ancestry, patch, instanceMap)
-
-		-- Gather detail text
-		local changeList, hint = nil, nil
-		if next(change.changedProperties) or change.changedName then
-			changeList = {}
-
-			local hintBuffer, i = {}, 0
-			local function addProp(prop: string, current: any?, incoming: any?)
-				i += 1
-				hintBuffer[i] = prop
-				changeList[i] = { prop, current, incoming }
-			end
-
-			-- Gather the changes
-
-			if change.changedName then
-				addProp("Name", instance.Name, change.changedName)
-			end
-
-			for prop, incoming in change.changedProperties do
-				local incomingSuccess, incomingValue = decodeValue(incoming, instanceMap)
-				local currentSuccess, currentValue = getProperty(instance, prop)
-
-				addProp(
-					prop,
-					if currentSuccess then currentValue else "[Error]",
-					if incomingSuccess then incomingValue else next(incoming)
-				)
-			end
-
-			-- Finalize detail values
-
-			-- Trim hint to top 3
-			table.sort(hintBuffer)
-			if #hintBuffer > 3 then
-				hintBuffer = {
-					hintBuffer[1],
-					hintBuffer[2],
-					hintBuffer[3],
-					i - 3 .. " more",
-				}
-			end
-			hint = table.concat(hintBuffer, ", ")
-
-			-- Sort changes and add header
-			table.sort(changeList, function(a, b)
-				return a[1] < b[1]
-			end)
-			table.insert(changeList, 1, { "Property", "Current", "Incoming" })
-		end
-
-		-- Add this node to tree
-		tree:addNode(instanceMap.fromInstances[instance.Parent], {
-			id = change.id,
-			patchType = "Edit",
-			className = instance.ClassName,
-			name = instance.Name,
-			hint = hint,
-			changeList = changeList,
-		})
+	if currentPatch ~= nil or nextPatch ~= nil then
+		return not PatchSet.isEqual(currentPatch, nextPatch)
 	end
 
-	for _, instance in patch.removed do
-		-- Gather ancestors from existing DOM
-		-- (note that they may have no ID if they're being removed as unknown)
-		local ancestry = {}
-		local parentObject = instance.Parent
-		local parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
-		while parentObject do
-			instanceMap:insert(parentId, parentObject)
-			table.insert(ancestry, 1, parentId)
-			parentObject = parentObject.Parent
-			parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
-		end
-
-		tree:buildAncestryNodes(ancestry, patch, instanceMap)
-
-		-- Add this node to tree
-		local nodeId = instanceMap.fromInstances[instance] or HttpService:GenerateGUID(false)
-		instanceMap:insert(nodeId, instance)
-		tree:addNode(instanceMap.fromInstances[instance.Parent], {
-			id = nodeId,
-			patchType = "Remove",
-			className = instance.ClassName,
-			name = instance.Name,
-		})
-	end
-
-	for _, change in patch.added do
-		-- Gather ancestors from existing DOM or future additions
-		local ancestry = {}
-		local parentId = change.Parent
-		local parentData = patch.added[parentId]
-		local parentObject = instanceMap.fromIds[parentId]
-		while parentId do
-			table.insert(ancestry, 1, parentId)
-			parentId = nil
-
-			if parentData then
-				parentId = parentData.Parent
-				parentData = patch.added[parentId]
-				parentObject = instanceMap.fromIds[parentId]
-			elseif parentObject then
-				parentObject = parentObject.Parent
-				parentId = instanceMap.fromInstances[parentObject]
-				parentData = patch.added[parentId]
-			end
-		end
-
-		tree:buildAncestryNodes(ancestry, patch, instanceMap)
-
-		-- Gather detail text
-		local changeList, hint = nil, nil
-		if next(change.Properties) then
-			changeList = {}
-
-			local hintBuffer, i = {}, 0
-			for prop, incoming in change.Properties do
-				i += 1
-				hintBuffer[i] = prop
-
-				local success, incomingValue = decodeValue(incoming, instanceMap)
-				if success then
-					table.insert(changeList, { prop, "N/A", incomingValue })
-				else
-					table.insert(changeList, { prop, "N/A", next(incoming) })
-				end
-			end
-
-			-- Finalize detail values
-
-			-- Trim hint to top 3
-			table.sort(hintBuffer)
-			if #hintBuffer > 3 then
-				hintBuffer = {
-					hintBuffer[1],
-					hintBuffer[2],
-					hintBuffer[3],
-					i - 3 .. " more",
-				}
-			end
-			hint = table.concat(hintBuffer, ", ")
-
-			-- Sort changes and add header
-			table.sort(changeList, function(a, b)
-				return a[1] < b[1]
-			end)
-			table.insert(changeList, 1, { "Property", "Current", "Incoming" })
-		end
-
-		-- Add this node to tree
-		tree:addNode(change.Parent, {
-			id = change.Id,
-			patchType = "Add",
-			className = change.ClassName,
-			name = change.Name,
-			hint = hint,
-			changeList = changeList,
-		})
-	end
-
-	return tree
+	return false
 end
 
 function PatchVisualizer:render()
-	local patch = self.props.patch
-	local instanceMap = self.props.instanceMap
-
-	local tree = self:buildTree(patch, instanceMap)
+	local patchTree = self.props.patchTree
+	if patchTree == nil and self.props.patch ~= nil then
+		patchTree = PatchTree.build(
+			self.props.patch,
+			self.props.instanceMap,
+			self.props.changeListHeaders or { "Property", "Current", "Incoming" }
+		)
+		if self.props.unappliedPatch then
+			patchTree =
+				PatchTree.updateMetadata(patchTree, self.props.patch, self.props.instanceMap, self.props.unappliedPatch)
+		end
+	end
 
 	-- Recusively draw tree
 	local scrollElements, elementHeights = {}, {}
-	local function drawNode(node, depth)
-		local elementHeight, setElementHeight = Roact.createBinding(30)
-		table.insert(elementHeights, elementHeight)
-		table.insert(
-			scrollElements,
-			e(DomLabel, {
-				columnVisibility = self.props.columnVisibility,
-				updateEvent = self.updateEvent,
-				elementHeight = elementHeight,
-				setElementHeight = setElementHeight,
-				patchType = node.patchType,
-				className = node.className,
-				name = node.name,
-				hint = node.hint,
-				changeList = node.changeList,
-				depth = depth,
-				transparency = self.props.transparency,
-			})
-		)
 
-		for _, childNode in alphabeticalPairs(node.children) do
-			drawNode(childNode, depth + 1)
+	if patchTree then
+		local function drawNode(node, depth)
+			local elementHeight, setElementHeight = Roact.createBinding(30)
+			table.insert(elementHeights, elementHeight)
+			table.insert(
+				scrollElements,
+				e(DomLabel, {
+					updateEvent = self.updateEvent,
+					elementHeight = elementHeight,
+					setElementHeight = setElementHeight,
+					patchType = node.patchType,
+					className = node.className,
+					isWarning = node.isWarning,
+					instance = node.instance,
+					name = node.name,
+					hint = node.hint,
+					changeList = node.changeList,
+					depth = depth,
+					transparency = self.props.transparency,
+					showSourceDiff = self.props.showSourceDiff,
+				})
+			)
 		end
-	end
-	for _, node in alphabeticalPairs(tree.ROOT.children) do
-		drawNode(node, 0)
+
+		patchTree:forEach(function(node, depth)
+			drawNode(node, depth)
+		end)
 	end
 
-	return e(BorderedContainer, {
-		transparency = self.props.transparency,
-		size = self.props.size,
-		position = self.props.position,
-		layoutOrder = self.props.layoutOrder,
-	}, {
-		VirtualScroller = e(VirtualScroller, {
-			size = UDim2.new(1, 0, 1, 0),
+	return Theme.with(function(theme)
+		return e(BorderedContainer, {
 			transparency = self.props.transparency,
-			count = #scrollElements,
-			updateEvent = self.updateEvent.Event,
-			render = function(i)
-				return scrollElements[i]
-			end,
-			getHeightBinding = function(i)
-				return elementHeights[i]
-			end,
-		}),
-	})
+			size = self.props.size,
+			position = self.props.position,
+			layoutOrder = self.props.layoutOrder,
+		}, {
+			CleanMerge = e("TextLabel", {
+				Visible = #scrollElements == 0,
+				Text = "No changes to sync, project is up to date.",
+				Font = Enum.Font.GothamMedium,
+				TextSize = 15,
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextWrapped = true,
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1,
+			}),
+
+			VirtualScroller = e(VirtualScroller, {
+				size = UDim2.new(1, 0, 1, 0),
+				transparency = self.props.transparency,
+				count = #scrollElements,
+				updateEvent = self.updateEvent.Event,
+				render = function(i)
+					return scrollElements[i]
+				end,
+				getHeightBinding = function(i)
+					return elementHeights[i]
+				end,
+			}),
+		})
+	end)
 end
 
 return PatchVisualizer

plugin/src/App/Components/ScrollingFrame.lua

@@ -23,19 +23,26 @@ local function ScrollingFrame(props)
 			BottomImage = Assets.Images.ScrollBar.Bottom,
 
 			ElasticBehavior = Enum.ElasticBehavior.Always,
-			ScrollingDirection = Enum.ScrollingDirection.Y,
+			ScrollingDirection = props.scrollingDirection or Enum.ScrollingDirection.Y,
 
 			Size = props.size,
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,
 			CanvasSize = props.contentSize:map(function(value)
-				return UDim2.new(0, 0, 0, value.Y)
+				return UDim2.new(
+					0,
+					if (props.scrollingDirection and props.scrollingDirection ~= Enum.ScrollingDirection.Y)
+						then value.X
+						else 0,
+					0,
+					value.Y
+				)
 			end),
 
 			BorderSizePixel = 0,
 			BackgroundTransparency = 1,
 
-			[Roact.Change.AbsoluteSize] = props[Roact.Change.AbsoluteSize]
+			[Roact.Change.AbsoluteSize] = props[Roact.Change.AbsoluteSize],
 		}, props[Roact.Children])
 	end)
 end

plugin/src/App/Components/StringDiffVisualizer/StringDiff.lua

@@ -0,0 +1,441 @@
+--[[
+    Based on DiffMatchPatch by Neil Fraser.
+    https://github.com/google/diff-match-patch
+]]
+
+export type DiffAction = number
+export type Diff = { actionType: DiffAction, value: string }
+export type Diffs = { Diff }
+
+local StringDiff = {
+	ActionTypes = table.freeze({
+		Equal = 0,
+		Delete = 1,
+		Insert = 2,
+	}),
+}
+
+function StringDiff.findDiffs(text1: string, text2: string): Diffs
+	-- Validate inputs
+	if type(text1) ~= "string" or type(text2) ~= "string" then
+		error(
+			string.format(
+				"Invalid inputs to StringDiff.findDiffs, expected strings and got (%s, %s)",
+				type(text1),
+				type(text2)
+			),
+			2
+		)
+	end
+
+	-- Shortcut if the texts are identical
+	if text1 == text2 then
+		return { { actionType = StringDiff.ActionTypes.Equal, value = text1 } }
+	end
+
+	-- Trim off any shared prefix and suffix
+	-- These are easy to detect and can be dealt with quickly without needing a complex diff
+	-- and later we simply add them as Equal to the start and end of the diff
+	local sharedPrefix, sharedSuffix
+	local prefixLength = StringDiff._sharedPrefix(text1, text2)
+	if prefixLength > 0 then
+		-- Store the prefix
+		sharedPrefix = string.sub(text1, 1, prefixLength)
+		-- Now trim it off
+		text1 = string.sub(text1, prefixLength + 1)
+		text2 = string.sub(text2, prefixLength + 1)
+	end
+
+	local suffixLength = StringDiff._sharedSuffix(text1, text2)
+	if suffixLength > 0 then
+		-- Store the suffix
+		sharedSuffix = string.sub(text1, -suffixLength)
+		-- Now trim it off
+		text1 = string.sub(text1, 1, -suffixLength - 1)
+		text2 = string.sub(text2, 1, -suffixLength - 1)
+	end
+
+	-- Compute the diff on the middle block where the changes lie
+	local diffs = StringDiff._computeDiff(text1, text2)
+
+	-- Restore the prefix and suffix
+	if sharedPrefix then
+		table.insert(diffs, 1, { actionType = StringDiff.ActionTypes.Equal, value = sharedPrefix })
+	end
+	if sharedSuffix then
+		table.insert(diffs, { actionType = StringDiff.ActionTypes.Equal, value = sharedSuffix })
+	end
+
+	-- Cleanup the diff
+	diffs = StringDiff._reorderAndMerge(diffs)
+
+	return diffs
+end
+
+function StringDiff._sharedPrefix(text1: string, text2: string): number
+	-- Uses a binary search to find the largest common prefix between the two strings
+	-- Performance analysis: http://neil.fraser.name/news/2007/10/09/
+
+	-- Shortcut common cases
+	if (#text1 == 0) or (#text2 == 0) or (string.byte(text1, 1) ~= string.byte(text2, 1)) then
+		return 0
+	end
+
+	local pointerMin = 1
+	local pointerMax = math.min(#text1, #text2)
+	local pointerMid = pointerMax
+	local pointerStart = 1
+	while pointerMin < pointerMid do
+		if string.sub(text1, pointerStart, pointerMid) == string.sub(text2, pointerStart, pointerMid) then
+			pointerMin = pointerMid
+			pointerStart = pointerMin
+		else
+			pointerMax = pointerMid
+		end
+		pointerMid = math.floor(pointerMin + (pointerMax - pointerMin) / 2)
+	end
+
+	return pointerMid
+end
+
+function StringDiff._sharedSuffix(text1: string, text2: string): number
+	-- Uses a binary search to find the largest common suffix between the two strings
+	-- Performance analysis: http://neil.fraser.name/news/2007/10/09/
+
+	-- Shortcut common cases
+	if (#text1 == 0) or (#text2 == 0) or (string.byte(text1, -1) ~= string.byte(text2, -1)) then
+		return 0
+	end
+
+	local pointerMin = 1
+	local pointerMax = math.min(#text1, #text2)
+	local pointerMid = pointerMax
+	local pointerEnd = 1
+	while pointerMin < pointerMid do
+		if string.sub(text1, -pointerMid, -pointerEnd) == string.sub(text2, -pointerMid, -pointerEnd) then
+			pointerMin = pointerMid
+			pointerEnd = pointerMin
+		else
+			pointerMax = pointerMid
+		end
+		pointerMid = math.floor(pointerMin + (pointerMax - pointerMin) / 2)
+	end
+
+	return pointerMid
+end
+
+function StringDiff._computeDiff(text1: string, text2: string): Diffs
+	-- Assumes that the prefix and suffix have already been trimmed off
+	-- and shortcut returns have been made so these texts must be different
+
+	local text1Length, text2Length = #text1, #text2
+
+	if text1Length == 0 then
+		-- It's simply inserting all of text2 into text1
+		return { { actionType = StringDiff.ActionTypes.Insert, value = text2 } }
+	end
+
+	if text2Length == 0 then
+		-- It's simply deleting all of text1
+		return { { actionType = StringDiff.ActionTypes.Delete, value = text1 } }
+	end
+
+	local longText = if text1Length > text2Length then text1 else text2
+	local shortText = if text1Length > text2Length then text2 else text1
+	local shortTextLength = #shortText
+
+	-- Shortcut if the shorter string exists entirely inside the longer one
+	local indexOf = if shortTextLength == 0 then nil else string.find(longText, shortText, 1, true)
+	if indexOf ~= nil then
+		local diffs = {
+			{ actionType = StringDiff.ActionTypes.Insert, value = string.sub(longText, 1, indexOf - 1) },
+			{ actionType = StringDiff.ActionTypes.Equal, value = shortText },
+			{ actionType = StringDiff.ActionTypes.Insert, value = string.sub(longText, indexOf + shortTextLength) },
+		}
+		-- Swap insertions for deletions if diff is reversed
+		if text1Length > text2Length then
+			diffs[1].actionType, diffs[3].actionType = StringDiff.ActionTypes.Delete, StringDiff.ActionTypes.Delete
+		end
+		return diffs
+	end
+
+	if shortTextLength == 1 then
+		-- Single character string
+		-- After the previous shortcut, the character can't be an equality
+		return {
+			{ actionType = StringDiff.ActionTypes.Delete, value = text1 },
+			{ actionType = StringDiff.ActionTypes.Insert, value = text2 },
+		}
+	end
+
+	return StringDiff._bisect(text1, text2)
+end
+
+function StringDiff._bisect(text1: string, text2: string): Diffs
+	-- Find the 'middle snake' of a diff, split the problem in two
+	-- and return the recursively constructed diff
+	-- See Myers 1986 paper: An O(ND) Difference Algorithm and Its Variations
+
+	-- Cache the text lengths to prevent multiple calls
+	local text1Length = #text1
+	local text2Length = #text2
+
+	local _sub, _element
+	local maxD = math.ceil((text1Length + text2Length) / 2)
+	local vOffset = maxD
+	local vLength = 2 * maxD
+	local v1 = table.create(vLength)
+	local v2 = table.create(vLength)
+
+	-- Setting all elements to -1 is faster in Lua than mixing integers and nil
+	for x = 0, vLength - 1 do
+		v1[x] = -1
+		v2[x] = -1
+	end
+	v1[vOffset + 1] = 0
+	v2[vOffset + 1] = 0
+	local delta = text1Length - text2Length
+
+	-- If the total number of characters is odd, then
+	-- the front path will collide with the reverse path
+	local front = (delta % 2 ~= 0)
+
+	-- Offsets for start and end of k loop
+	-- Prevents mapping of space beyond the grid
+	local k1Start = 0
+	local k1End = 0
+	local k2Start = 0
+	local k2End = 0
+	for d = 0, maxD - 1 do
+		-- Walk the front path one step
+		for k1 = -d + k1Start, d - k1End, 2 do
+			local k1_offset = vOffset + k1
+			local x1
+			if (k1 == -d) or ((k1 ~= d) and (v1[k1_offset - 1] < v1[k1_offset + 1])) then
+				x1 = v1[k1_offset + 1]
+			else
+				x1 = v1[k1_offset - 1] + 1
+			end
+			local y1 = x1 - k1
+			while
+				(x1 <= text1Length)
+				and (y1 <= text2Length)
+				and (string.sub(text1, x1, x1) == string.sub(text2, y1, y1))
+			do
+				x1 = x1 + 1
+				y1 = y1 + 1
+			end
+			v1[k1_offset] = x1
+			if x1 > text1Length + 1 then
+				-- Ran off the right of the graph
+				k1End = k1End + 2
+			elseif y1 > text2Length + 1 then
+				-- Ran off the bottom of the graph
+				k1Start = k1Start + 2
+			elseif front then
+				local k2_offset = vOffset + delta - k1
+				if k2_offset >= 0 and k2_offset < vLength and v2[k2_offset] ~= -1 then
+					-- Mirror x2 onto top-left coordinate system
+					local x2 = text1Length - v2[k2_offset] + 1
+					if x1 > x2 then
+						-- Overlap detected
+						return StringDiff._bisectSplit(text1, text2, x1, y1)
+					end
+				end
+			end
+		end
+
+		-- Walk the reverse path one step
+		for k2 = -d + k2Start, d - k2End, 2 do
+			local k2_offset = vOffset + k2
+			local x2
+			if (k2 == -d) or ((k2 ~= d) and (v2[k2_offset - 1] < v2[k2_offset + 1])) then
+				x2 = v2[k2_offset + 1]
+			else
+				x2 = v2[k2_offset - 1] + 1
+			end
+			local y2 = x2 - k2
+			while
+				(x2 <= text1Length)
+				and (y2 <= text2Length)
+				and (string.sub(text1, -x2, -x2) == string.sub(text2, -y2, -y2))
+			do
+				x2 = x2 + 1
+				y2 = y2 + 1
+			end
+			v2[k2_offset] = x2
+			if x2 > text1Length + 1 then
+				-- Ran off the left of the graph
+				k2End = k2End + 2
+			elseif y2 > text2Length + 1 then
+				-- Ran off the top of the graph
+				k2Start = k2Start + 2
+			elseif not front then
+				local k1_offset = vOffset + delta - k2
+				if k1_offset >= 0 and k1_offset < vLength and v1[k1_offset] ~= -1 then
+					local x1 = v1[k1_offset]
+					local y1 = vOffset + x1 - k1_offset
+					-- Mirror x2 onto top-left coordinate system
+					x2 = text1Length - x2 + 1
+					if x1 > x2 then
+						-- Overlap detected
+						return StringDiff._bisectSplit(text1, text2, x1, y1)
+					end
+				end
+			end
+		end
+	end
+
+	-- Number of diffs equals number of characters, no commonality at all
+	return {
+		{ actionType = StringDiff.ActionTypes.Delete, value = text1 },
+		{ actionType = StringDiff.ActionTypes.Insert, value = text2 },
+	}
+end
+
+function StringDiff._bisectSplit(text1: string, text2: string, x: number, y: number): Diffs
+	-- Given the location of the 'middle snake',
+	-- split the diff in two parts and recurse
+
+	local text1a = string.sub(text1, 1, x - 1)
+	local text2a = string.sub(text2, 1, y - 1)
+	local text1b = string.sub(text1, x)
+	local text2b = string.sub(text2, y)
+
+	-- Compute both diffs serially
+	local diffs = StringDiff.findDiffs(text1a, text2a)
+	local diffsB = StringDiff.findDiffs(text1b, text2b)
+
+	-- Merge diffs
+	table.move(diffsB, 1, #diffsB, #diffs + 1, diffs)
+	return diffs
+end
+
+function StringDiff._reorderAndMerge(diffs: Diffs): Diffs
+	-- Reorder and merge like edit sections and merge equalities
+	-- Any edit section can move as long as it doesn't cross an equality
+
+	-- Add a dummy entry at the end
+	table.insert(diffs, { actionType = StringDiff.ActionTypes.Equal, value = "" })
+
+	local pointer = 1
+	local countDelete, countInsert = 0, 0
+	local textDelete, textInsert = "", ""
+	local commonLength
+	while diffs[pointer] do
+		local actionType = diffs[pointer].actionType
+		if actionType == StringDiff.ActionTypes.Insert then
+			countInsert = countInsert + 1
+			textInsert = textInsert .. diffs[pointer].value
+			pointer = pointer + 1
+		elseif actionType == StringDiff.ActionTypes.Delete then
+			countDelete = countDelete + 1
+			textDelete = textDelete .. diffs[pointer].value
+			pointer = pointer + 1
+		elseif actionType == StringDiff.ActionTypes.Equal then
+			-- Upon reaching an equality, check for prior redundancies
+			if countDelete + countInsert > 1 then
+				if (countDelete > 0) and (countInsert > 0) then
+					-- Factor out any common prefixies
+					commonLength = StringDiff._sharedPrefix(textInsert, textDelete)
+					if commonLength > 0 then
+						local back_pointer = pointer - countDelete - countInsert
+						if
+							(back_pointer > 1) and (diffs[back_pointer - 1].actionType == StringDiff.ActionTypes.Equal)
+						then
+							diffs[back_pointer - 1].value = diffs[back_pointer - 1].value
+								.. string.sub(textInsert, 1, commonLength)
+						else
+							table.insert(diffs, 1, {
+								actionType = StringDiff.ActionTypes.Equal,
+								value = string.sub(textInsert, 1, commonLength),
+							})
+							pointer = pointer + 1
+						end
+						textInsert = string.sub(textInsert, commonLength + 1)
+						textDelete = string.sub(textDelete, commonLength + 1)
+					end
+					-- Factor out any common suffixies
+					commonLength = StringDiff._sharedSuffix(textInsert, textDelete)
+					if commonLength ~= 0 then
+						diffs[pointer].value = string.sub(textInsert, -commonLength) .. diffs[pointer].value
+						textInsert = string.sub(textInsert, 1, -commonLength - 1)
+						textDelete = string.sub(textDelete, 1, -commonLength - 1)
+					end
+				end
+				-- Delete the offending records and add the merged ones
+				pointer = pointer - countDelete - countInsert
+				for _ = 1, countDelete + countInsert do
+					table.remove(diffs, pointer)
+				end
+				if #textDelete > 0 then
+					table.insert(diffs, pointer, { actionType = StringDiff.ActionTypes.Delete, value = textDelete })
+					pointer = pointer + 1
+				end
+				if #textInsert > 0 then
+					table.insert(diffs, pointer, { actionType = StringDiff.ActionTypes.Insert, value = textInsert })
+					pointer = pointer + 1
+				end
+				pointer = pointer + 1
+			elseif (pointer > 1) and (diffs[pointer - 1].actionType == StringDiff.ActionTypes.Equal) then
+				-- Merge this equality with the previous one
+				diffs[pointer - 1].value = diffs[pointer - 1].value .. diffs[pointer].value
+				table.remove(diffs, pointer)
+			else
+				pointer = pointer + 1
+			end
+			countInsert, countDelete = 0, 0
+			textDelete, textInsert = "", ""
+		end
+	end
+	if diffs[#diffs].value == "" then
+		-- Remove the dummy entry at the end
+		diffs[#diffs] = nil
+	end
+
+	-- Second pass: look for single edits surrounded on both sides by equalities
+	-- which can be shifted sideways to eliminate an equality
+	-- e.g: A<ins>BA</ins>C -> <ins>AB</ins>AC
+	local changes = false
+	pointer = 2
+	-- Intentionally ignore the first and last element (don't need checking)
+	while pointer < #diffs do
+		local prevDiff, nextDiff = diffs[pointer - 1], diffs[pointer + 1]
+		if
+			(prevDiff.actionType == StringDiff.ActionTypes.Equal)
+			and (nextDiff.actionType == StringDiff.ActionTypes.Equal)
+		then
+			-- This is a single edit surrounded by equalities
+			local currentDiff = diffs[pointer]
+			local currentText = currentDiff.value
+			local prevText = prevDiff.value
+			local nextText = nextDiff.value
+			if #prevText == 0 then
+				table.remove(diffs, pointer - 1)
+				changes = true
+			elseif string.sub(currentText, -#prevText) == prevText then
+				-- Shift the edit over the previous equality
+				currentDiff.value = prevText .. string.sub(currentText, 1, -#prevText - 1)
+				nextDiff.value = prevText .. nextDiff.value
+				table.remove(diffs, pointer - 1)
+				changes = true
+			elseif string.sub(currentText, 1, #nextText) == nextText then
+				-- Shift the edit over the next equality
+				prevDiff.value = prevText .. nextText
+				currentDiff.value = string.sub(currentText, #nextText + 1) .. nextText
+				table.remove(diffs, pointer + 1)
+				changes = true
+			end
+		end
+		pointer = pointer + 1
+	end
+
+	-- If shifts were made, the diffs need reordering and another shift sweep
+	if changes then
+		return StringDiff._reorderAndMerge(diffs)
+	end
+
+	return diffs
+end
+
+return StringDiff

plugin/src/App/Components/StringDiffVisualizer/init.lua

@@ -0,0 +1,202 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Log = require(Packages.Log)
+local Highlighter = require(Packages.Highlighter)
+local StringDiff = require(script:FindFirstChild("StringDiff"))
+
+local Theme = require(Plugin.App.Theme)
+
+local CodeLabel = require(Plugin.App.Components.CodeLabel)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+
+local e = Roact.createElement
+
+local StringDiffVisualizer = Roact.Component:extend("StringDiffVisualizer")
+
+function StringDiffVisualizer:init()
+	self.scriptBackground, self.setScriptBackground = Roact.createBinding(Color3.fromRGB(0, 0, 0))
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+
+	-- Ensure that the script background is up to date with the current theme
+	self.themeChangedConnection = settings().Studio.ThemeChanged:Connect(function()
+		task.defer(function()
+			-- Defer to allow Highlighter to process the theme change first
+			self:updateScriptBackground()
+		end)
+	end)
+
+	self:calculateContentSize()
+	self:updateScriptBackground()
+
+	self:setState({
+		add = {},
+		remove = {},
+	})
+end
+
+function StringDiffVisualizer:willUnmount()
+	self.themeChangedConnection:Disconnect()
+end
+
+function StringDiffVisualizer:updateScriptBackground()
+	local backgroundColor = Highlighter.getTokenColor("background")
+	if backgroundColor ~= self.scriptBackground:getValue() then
+		self.setScriptBackground(backgroundColor)
+	end
+end
+
+function StringDiffVisualizer:didUpdate(previousProps)
+	if previousProps.oldText ~= self.props.oldText or previousProps.newText ~= self.props.newText then
+		self:calculateContentSize()
+		local add, remove = self:calculateDiffLines()
+		self:setState({
+			add = add,
+			remove = remove,
+		})
+	end
+end
+
+function StringDiffVisualizer:calculateContentSize()
+	local oldText, newText = self.props.oldText, self.props.newText
+
+	local oldTextBounds = TextService:GetTextSize(oldText, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+	local newTextBounds = TextService:GetTextSize(newText, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+
+	self.setContentSize(
+		Vector2.new(math.max(oldTextBounds.X, newTextBounds.X), math.max(oldTextBounds.Y, newTextBounds.Y))
+	)
+end
+
+function StringDiffVisualizer:calculateDiffLines()
+	local oldText, newText = self.props.oldText, self.props.newText
+
+	-- Diff the two texts
+	local startClock = os.clock()
+	local diffs = StringDiff.findDiffs(oldText, newText)
+	local stopClock = os.clock()
+
+	Log.trace(
+		"Diffing {} byte and {} byte strings took {} microseconds and found {} diff sections",
+		#oldText,
+		#newText,
+		math.round((stopClock - startClock) * 1000 * 1000),
+		#diffs
+	)
+
+	-- Determine which lines to highlight
+	local add, remove = {}, {}
+
+	local oldLineNum, newLineNum = 1, 1
+	for _, diff in diffs do
+		local actionType, text = diff.actionType, diff.value
+		local lines = select(2, string.gsub(text, "\n", "\n"))
+
+		if actionType == StringDiff.ActionTypes.Equal then
+			oldLineNum += lines
+			newLineNum += lines
+		elseif actionType == StringDiff.ActionTypes.Insert then
+			if lines > 0 then
+				local textLines = string.split(text, "\n")
+				for i, textLine in textLines do
+					if string.match(textLine, "%S") then
+						add[newLineNum + i - 1] = true
+					end
+				end
+			else
+				if string.match(text, "%S") then
+					add[newLineNum] = true
+				end
+			end
+			newLineNum += lines
+		elseif actionType == StringDiff.ActionTypes.Delete then
+			if lines > 0 then
+				local textLines = string.split(text, "\n")
+				for i, textLine in textLines do
+					if string.match(textLine, "%S") then
+						remove[oldLineNum + i - 1] = true
+					end
+				end
+			else
+				if string.match(text, "%S") then
+					remove[oldLineNum] = true
+				end
+			end
+			oldLineNum += lines
+		else
+			Log.warn("Unknown diff action: {} {}", actionType, text)
+		end
+	end
+
+	return add, remove
+end
+
+function StringDiffVisualizer:render()
+	local oldText, newText = self.props.oldText, self.props.newText
+
+	return Theme.with(function(theme)
+		return e(BorderedContainer, {
+			size = self.props.size,
+			position = self.props.position,
+			anchorPoint = self.props.anchorPoint,
+			transparency = self.props.transparency,
+		}, {
+			Background = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				Position = UDim2.new(0, 0, 0, 0),
+				BorderSizePixel = 0,
+				BackgroundColor3 = self.scriptBackground,
+				ZIndex = -10,
+			}, {
+				UICorner = e("UICorner", {
+					CornerRadius = UDim.new(0, 5),
+				}),
+			}),
+			Separator = e("Frame", {
+				Size = UDim2.new(0, 2, 1, 0),
+				Position = UDim2.new(0.5, 0, 0, 0),
+				AnchorPoint = Vector2.new(0.5, 0),
+				BorderSizePixel = 0,
+				BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				BackgroundTransparency = 0.5,
+			}),
+			Old = e(ScrollingFrame, {
+				position = UDim2.new(0, 2, 0, 2),
+				size = UDim2.new(0.5, -7, 1, -4),
+				scrollingDirection = Enum.ScrollingDirection.XY,
+				transparency = self.props.transparency,
+				contentSize = self.contentSize,
+			}, {
+				Source = e(CodeLabel, {
+					size = UDim2.new(1, 0, 1, 0),
+					position = UDim2.new(0, 0, 0, 0),
+					text = oldText,
+					lineBackground = theme.Diff.Remove,
+					markedLines = self.state.remove,
+				}),
+			}),
+			New = e(ScrollingFrame, {
+				position = UDim2.new(0.5, 5, 0, 2),
+				size = UDim2.new(0.5, -7, 1, -4),
+				scrollingDirection = Enum.ScrollingDirection.XY,
+				transparency = self.props.transparency,
+				contentSize = self.contentSize,
+			}, {
+				Source = e(CodeLabel, {
+					size = UDim2.new(1, 0, 1, 0),
+					position = UDim2.new(0, 0, 0, 0),
+					text = newText,
+					lineBackground = theme.Diff.Add,
+					markedLines = self.state.add,
+				}),
+			}),
+		})
+	end)
+end
+
+return StringDiffVisualizer

plugin/src/App/Components/Studio/StudioPluginAction.lua

@@ -10,11 +10,15 @@ local StudioPluginContext = require(script.Parent.StudioPluginContext)
 
 local e = Roact.createElement
 
-local StudioPluginAction  = Roact.Component:extend("StudioPluginAction")
+local StudioPluginAction = Roact.Component:extend("StudioPluginAction")
 
 function StudioPluginAction:init()
 	self.pluginAction = self.props.plugin:CreatePluginAction(
-		self.props.name, self.props.title, self.props.description, self.props.icon, self.props.bindable
+		self.props.name,
+		self.props.title,
+		self.props.description,
+		self.props.icon,
+		self.props.bindable
 	)
 
 	self.pluginAction.Triggered:Connect(self.props.onTriggered)
@@ -31,9 +35,12 @@ end
 local function StudioPluginActionWrapper(props)
 	return e(StudioPluginContext.Consumer, {
 		render = function(plugin)
-			return e(StudioPluginAction, Dictionary.merge(props, {
-				plugin = plugin,
-			}))
+			return e(
+				StudioPluginAction,
+				Dictionary.merge(props, {
+					plugin = plugin,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/Studio/StudioPluginGui.lua

@@ -1,3 +1,5 @@
+local HttpService = game:GetService("HttpService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -36,7 +38,10 @@ function StudioPluginGui:init()
 		minimumSize.Y
 	)
 
-	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(self.props.id, dockWidgetPluginGuiInfo)
+	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(
+		if self.props.isEphemeral then HttpService:GenerateGUID(false) else self.props.id,
+		dockWidgetPluginGuiInfo
+	)
 
 	pluginGui.Name = self.props.id
 	pluginGui.Title = self.props.title
@@ -76,6 +81,12 @@ function StudioPluginGui:didUpdate(lastProps)
 	if self.props.active ~= lastProps.active then
 		-- This is intentionally in didUpdate to make sure the initial active state
 		-- (if the PluginGui is open initially) is preserved.
+
+		-- Studio widgets are very unreliable and sometimes need to be flickered
+		-- in order to force them to render correctly
+		-- This happens within a single frame so it doesn't flicker visibly
+		self.pluginGui.Enabled = self.props.active
+		self.pluginGui.Enabled = not self.props.active
 		self.pluginGui.Enabled = self.props.active
 	end
 end

plugin/src/App/Components/Studio/StudioToggleButton.lua

@@ -18,12 +18,8 @@ StudioToggleButton.defaultProps = {
 }
 
 function StudioToggleButton:init()
-	local button = self.props.toolbar:CreateButton(
-		self.props.name,
-		self.props.tooltip,
-		self.props.icon,
-		self.props.text
-	)
+	local button =
+		self.props.toolbar:CreateButton(self.props.name, self.props.tooltip, self.props.icon, self.props.text)
 
 	button.Click:Connect(function()
 		if self.props.onClick then
@@ -61,9 +57,12 @@ end
 local function StudioToggleButtonWrapper(props)
 	return e(StudioToolbarContext.Consumer, {
 		render = function(toolbar)
-			return e(StudioToggleButton, Dictionary.merge(props, {
-				toolbar = toolbar,
-			}))
+			return e(
+				StudioToggleButton,
+				Dictionary.merge(props, {
+					toolbar = toolbar,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/Studio/StudioToolbar.lua

@@ -36,9 +36,12 @@ end
 local function StudioToolbarWrapper(props)
 	return e(StudioPluginContext.Consumer, {
 		render = function(plugin)
-			return e(StudioToolbar, Dictionary.merge(props, {
-				plugin = plugin,
-			}))
+			return e(
+				StudioToolbar,
+				Dictionary.merge(props, {
+					plugin = plugin,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/TextButton.lua

@@ -41,10 +41,8 @@ end
 
 function TextButton:render()
 	return Theme.with(function(theme)
-		local textSize = TextService:GetTextSize(
-			self.props.text, 18, Enum.Font.GothamSemibold,
-			Vector2.new(math.huge, math.huge)
-		)
+		local textSize =
+			TextService:GetTextSize(self.props.text, 18, Enum.Font.GothamSemibold, Vector2.new(math.huge, math.huge))
 
 		local style = self.props.style
 
@@ -124,7 +122,11 @@ function TextButton:render()
 
 			Background = style == "Solid" and e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BackgroundColor, theme.Disabled.BackgroundColor),
+				color = bindingUtil.mapLerp(
+					bindingEnabled,
+					theme.Enabled.BackgroundColor,
+					theme.Disabled.BackgroundColor
+				),
 				transparency = self.props.transparency,
 
 				size = UDim2.new(1, 0, 1, 0),

plugin/src/App/Components/TextInput.lua

@@ -0,0 +1,107 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Flipper = require(Packages.Flipper)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local SlicedImage = require(script.Parent.SlicedImage)
+
+local SPRING_PROPS = {
+	frequency = 5,
+	dampingRatio = 1,
+}
+
+local e = Roact.createElement
+
+local TextInput = Roact.Component:extend("TextInput")
+
+function TextInput:init()
+	self.motor = Flipper.GroupMotor.new({
+		hover = 0,
+		enabled = self.props.enabled and 1 or 0,
+	})
+	self.binding = bindingUtil.fromMotor(self.motor)
+end
+
+function TextInput:didUpdate(lastProps)
+	if lastProps.enabled ~= self.props.enabled then
+		self.motor:setGoal({
+			enabled = Flipper.Spring.new(self.props.enabled and 1 or 0),
+		})
+	end
+end
+
+function TextInput:render()
+	return Theme.with(function(theme)
+		theme = theme.TextInput
+
+		local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
+		local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")
+
+		return e(SlicedImage, {
+			slice = Assets.Slices.RoundedBorder,
+			color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
+			transparency = self.props.transparency,
+
+			size = self.props.size or UDim2.new(1, 0, 1, 0),
+			position = self.props.position,
+			layoutOrder = self.props.layoutOrder,
+			anchorPoint = self.props.anchorPoint,
+		}, {
+			HoverOverlay = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBackground,
+				color = theme.ActionFillColor,
+				transparency = Roact.joinBindings({
+					hover = bindingHover:map(function(value)
+						return 1 - value
+					end),
+					transparency = self.props.transparency,
+				}):map(function(values)
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, values.hover, values.transparency })
+				end),
+				size = UDim2.new(1, 0, 1, 0),
+				zIndex = -1,
+			}),
+			Input = e("TextBox", {
+				BackgroundTransparency = 1,
+				Size = UDim2.fromScale(1, 1),
+				Text = self.props.text,
+				PlaceholderText = self.props.placeholder,
+				Font = Enum.Font.GothamMedium,
+				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.TextColor, theme.Enabled.TextColor),
+				PlaceholderColor3 = bindingUtil.mapLerp(
+					bindingEnabled,
+					theme.Disabled.PlaceholderColor,
+					theme.Enabled.PlaceholderColor
+				),
+				TextSize = 18,
+				TextEditable = self.props.enabled,
+				ClearTextOnFocus = self.props.clearTextOnFocus,
+
+				[Roact.Event.MouseEnter] = function()
+					self.motor:setGoal({
+						hover = Flipper.Spring.new(1, SPRING_PROPS),
+					})
+				end,
+
+				[Roact.Event.MouseLeave] = function()
+					self.motor:setGoal({
+						hover = Flipper.Spring.new(0, SPRING_PROPS),
+					})
+				end,
+
+				[Roact.Event.FocusLost] = function(rbx)
+					self.props.onEntered(rbx.Text)
+				end,
+			}),
+			Children = Roact.createFragment(self.props[Roact.Children]),
+		})
+	end)
+end
+
+return TextInput

plugin/src/App/Components/Tooltip.lua

@@ -22,12 +22,16 @@ local TooltipContext = Roact.createContext({})
 
 local function Popup(props)
 	local textSize = TextService:GetTextSize(
-		props.Text, 16, Enum.Font.GothamMedium, Vector2.new(math.min(props.parentSize.X, 160), math.huge)
+		props.Text,
+		16,
+		Enum.Font.GothamMedium,
+		Vector2.new(math.min(props.parentSize.X, 160), math.huge)
 	) + TEXT_PADDING + (Vector2.one * 2)
 
 	local trigger = props.Trigger:getValue()
 
-	local spaceBelow = props.parentSize.Y - (trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y - Y_OVERLAP + TAIL_SIZE)
+	local spaceBelow = props.parentSize.Y
+		- (trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y - Y_OVERLAP + TAIL_SIZE)
 	local spaceAbove = trigger.AbsolutePosition.Y + Y_OVERLAP - TAIL_SIZE
 
 	-- If there's not enough space below, and there's more space above, then show the tooltip above the trigger
@@ -39,7 +43,10 @@ local function Popup(props)
 	if displayAbove then
 		Y = math.max(trigger.AbsolutePosition.Y - TAIL_SIZE - textSize.Y + Y_OVERLAP, 0)
 	else
-		Y = math.min(trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y + TAIL_SIZE - Y_OVERLAP, props.parentSize.Y - textSize.Y)
+		Y = math.min(
+			trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y + TAIL_SIZE - Y_OVERLAP,
+			props.parentSize.Y - textSize.Y
+		)
 	end
 
 	return Theme.with(function(theme)
@@ -64,17 +71,9 @@ local function Popup(props)
 
 			Tail = e("ImageLabel", {
 				ZIndex = 100,
-				Position =
-					if displayAbove then
-						UDim2.new(
-							0, math.clamp(props.Position.X - X, 6, textSize.X-6),
-							1, -1
-						)
-					else
-						UDim2.new(
-							0, math.clamp(props.Position.X - X, 6, textSize.X-6),
-							0, -TAIL_SIZE+1
-						),
+				Position = if displayAbove
+					then UDim2.new(0, math.clamp(props.Position.X - X, 6, textSize.X - 6), 1, -1)
+					else UDim2.new(0, math.clamp(props.Position.X - X, 6, textSize.X - 6), 0, -TAIL_SIZE + 1),
 				Size = UDim2.fromOffset(TAIL_SIZE, TAIL_SIZE),
 				AnchorPoint = Vector2.new(0.5, 0),
 				Rotation = if displayAbove then 180 else 0,
@@ -90,7 +89,7 @@ local function Popup(props)
 					ImageColor3 = theme.BorderedContainer.BorderColor,
 					ImageTransparency = props.transparency,
 				}),
-			})
+			}),
 		})
 	end)
 end
@@ -165,46 +164,97 @@ function Trigger:init()
 	self.id = HttpService:GenerateGUID(false)
 	self.ref = Roact.createRef()
 	self.mousePos = Vector2.zero
+	self.showingPopup = false
 
 	self.destroy = function()
 		self.props.context.removeTip(self.id)
+		self.showingPopup = false
 	end
 end
 
 function Trigger:willUnmount()
 	if self.showDelayThread then
-		task.cancel(self.showDelayThread)
+		pcall(task.cancel, self.showDelayThread)
 	end
 	if self.destroy then
 		self.destroy()
 	end
 end
 
+function Trigger:didUpdate(prevProps)
+	if prevProps.text ~= self.props.text then
+		-- Any existing popup is now invalid
+		self.props.context.removeTip(self.id)
+		self.showingPopup = false
+
+		-- Let the new text propagate
+		self:managePopup()
+	end
+end
+
+function Trigger:isHovering()
+	local rbx = self.ref.current
+	if rbx then
+		local pos = rbx.AbsolutePosition
+		local size = rbx.AbsoluteSize
+		local mousePos = self.mousePos
+
+		return mousePos.X >= pos.X
+			and mousePos.X <= pos.X + size.X
+			and mousePos.Y >= pos.Y
+			and mousePos.Y <= pos.Y + size.Y
+	end
+	return false
+end
+
+function Trigger:managePopup()
+	if self:isHovering() then
+		if self.showingPopup or self.showDelayThread then
+			-- Don't duplicate popups
+			return
+		end
+
+		self.showDelayThread = task.delay(DELAY, function()
+			self.props.context.addTip(self.id, {
+				Text = self.props.text,
+				Position = self.mousePos,
+				Trigger = self.ref,
+			})
+			self.showDelayThread = nil
+			self.showingPopup = true
+		end)
+	else
+		if self.showDelayThread then
+			pcall(task.cancel, self.showDelayThread)
+			self.showDelayThread = nil
+		end
+		self.props.context.removeTip(self.id)
+		self.showingPopup = false
+	end
+end
+
 function Trigger:render()
+	local function recalculate(rbx)
+		local widget = rbx:FindFirstAncestorOfClass("DockWidgetPluginGui")
+		if not widget then
+			return
+		end
+		self.mousePos = widget:GetRelativeMousePosition()
+
+		self:managePopup()
+	end
+
 	return e("Frame", {
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = 1,
 		ZIndex = self.props.zIndex or 100,
 		[Roact.Ref] = self.ref,
 
-		[Roact.Event.MouseMoved] = function(_rbx, x, y)
-			self.mousePos = Vector2.new(x, y)
-		end,
-		[Roact.Event.MouseEnter] = function()
-			self.showDelayThread = task.delay(DELAY, function()
-				self.props.context.addTip(self.id, {
-					Text = self.props.text,
-					Position = self.mousePos,
-					Trigger = self.ref,
-				})
-			end)
-		end,
-		[Roact.Event.MouseLeave] = function()
-			if self.showDelayThread then
-				task.cancel(self.showDelayThread)
-			end
-			self.props.context.removeTip(self.id)
-		end,
+		[Roact.Change.AbsolutePosition] = recalculate,
+		[Roact.Change.AbsoluteSize] = recalculate,
+		[Roact.Event.MouseMoved] = recalculate,
+		[Roact.Event.MouseLeave] = recalculate,
+		[Roact.Event.MouseEnter] = recalculate,
 	})
 end
 

plugin/src/App/Components/TouchRipple.lua

@@ -24,9 +24,7 @@ function TouchRipple:init()
 	})
 	self.binding = bindingUtil.fromMotor(self.motor)
 
-	self.position, self.setPosition = Roact.createBinding(
-		Vector2.new(0, 0)
-	)
+	self.position, self.setPosition = Roact.createBinding(Vector2.new(0, 0))
 end
 
 function TouchRipple:reset()
@@ -43,10 +41,7 @@ function TouchRipple:calculateRadius(position)
 	local container = self.ref.current
 
 	if container then
-		local corner = Vector2.new(
-			math.floor((1 - position.X) + 0.5),
-			math.floor((1 - position.Y) + 0.5)
-		)
+		local corner = Vector2.new(math.floor((1 - position.X) + 0.5), math.floor((1 - position.Y) + 0.5))
 
 		local size = container.AbsoluteSize
 		local ratio = size / math.min(size.X, size.Y)
@@ -93,10 +88,7 @@ function TouchRipple:render()
 				input:GetPropertyChangedSignal("UserInputState"):Connect(function()
 					local userInputState = input.UserInputState
 
-					if
-						userInputState == Enum.UserInputState.Cancel
-						or userInputState == Enum.UserInputState.End
-					then
+					if userInputState == Enum.UserInputState.Cancel or userInputState == Enum.UserInputState.End then
 						self.motor:setGoal({
 							opacity = Flipper.Spring.new(0, {
 								frequency = 5,
@@ -127,8 +119,10 @@ function TouchRipple:render()
 					local containerAspect = containerSize.X / containerSize.Y
 
 					return UDim2.new(
-						currentSize / math.max(containerAspect, 1), 0,
-						currentSize * math.min(containerAspect, 1), 0
+						currentSize / math.max(containerAspect, 1),
+						0,
+						currentSize * math.min(containerAspect, 1),
+						0
 					)
 				end
 			end),

plugin/src/App/Components/VirtualScroller.lua

@@ -99,18 +99,30 @@ function VirtualScroller:refresh()
 	})
 end
 
+function VirtualScroller:didUpdate(previousProps)
+	if self.props.count ~= previousProps.count then
+		-- Items have changed, so we need to refresh
+		self:refresh()
+	end
+end
+
 function VirtualScroller:render()
 	local props, state = self.props, self.state
 
 	local items = {}
 	for i = state.Start, state.End do
+		local content = props.render(i)
+		if content == nil then
+			continue
+		end
+
 		items["Item" .. i] = e("Frame", {
 			LayoutOrder = i,
 			Size = props.getHeightBinding(i):map(function(height)
 				return UDim2.new(1, 0, 0, height)
 			end),
 			BackgroundTransparency = 1,
-		}, props.render(i))
+		}, content)
 	end
 
 	return Theme.with(function(theme)

plugin/src/App/Notifications.lua

@@ -7,6 +7,7 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 local Flipper = require(Packages.Flipper)
+local Log = require(Packages.Log)
 
 local bindingUtil = require(script.Parent.bindingUtil)
 
@@ -14,6 +15,7 @@ local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local TextButton = require(Plugin.App.Components.TextButton)
 
 local baseClock = DateTime.now().UnixTimestampMillis
 
@@ -28,37 +30,31 @@ function Notification:init()
 	self.lifetime = self.props.timeout
 
 	self.motor:onStep(function(value)
-		if value <= 0 then
-			if self.props.onClose then
-				self.props.onClose()
-			end
+		if value <= 0 and self.props.onClose then
+			self.props.onClose()
 		end
 	end)
 end
 
 function Notification:dismiss()
-	self.motor:setGoal(
-		Flipper.Spring.new(0, {
-			frequency = 5,
-			dampingRatio = 1,
-		})
-	)
+	self.motor:setGoal(Flipper.Spring.new(0, {
+		frequency = 5,
+		dampingRatio = 1,
+	}))
 end
 
 function Notification:didMount()
-	self.motor:setGoal(
-		Flipper.Spring.new(1, {
-			frequency = 3,
-			dampingRatio = 1,
-		})
-	)
+	self.motor:setGoal(Flipper.Spring.new(1, {
+		frequency = 3,
+		dampingRatio = 1,
+	}))
 
 	self.props.soundPlayer:play(Assets.Sounds.Notification)
 
 	self.timeout = task.spawn(function()
 		local clock = os.clock()
 		local seen = false
-		while task.wait(1/10) do
+		while task.wait(1 / 10) do
 			local now = os.clock()
 			local dt = now - clock
 			clock = now
@@ -86,23 +82,51 @@ function Notification:willUnmount()
 end
 
 function Notification:render()
-	local time = DateTime.fromUnixTimestampMillis(self.props.timestamp)
-
-	local textBounds = TextService:GetTextSize(
-		self.props.text,
-		15,
-		Enum.Font.GothamSemibold,
-		Vector2.new(350, 700)
-	)
-
 	local transparency = self.binding:map(function(value)
 		return 1 - value
 	end)
 
+	local textBounds = TextService:GetTextSize(self.props.text, 15, Enum.Font.GothamMedium, Vector2.new(350, 700))
+
+	local actionButtons = {}
+	local buttonsX = 0
+	if self.props.actions then
+		local count = 0
+		for key, action in self.props.actions do
+			actionButtons[key] = e(TextButton, {
+				text = action.text,
+				style = action.style,
+				onClick = function()
+					local success, err = pcall(action.onClick, self)
+					if not success then
+						Log.warn("Error in notification action: " .. tostring(err))
+					end
+				end,
+				layoutOrder = -action.layoutOrder,
+				transparency = transparency,
+			})
+
+			buttonsX += TextService:GetTextSize(
+				action.text,
+				18,
+				Enum.Font.GothamMedium,
+				Vector2.new(math.huge, math.huge)
+			).X + 30
+
+			count += 1
+		end
+
+		buttonsX += (count - 1) * 5
+	end
+
+	local paddingY, logoSize = 20, 32
+	local actionsY = if self.props.actions then 35 else 0
+	local contentX = math.max(textBounds.X, buttonsX)
+
 	local size = self.binding:map(function(value)
 		return UDim2.fromOffset(
-			(35+40+textBounds.X)*value,
-			math.max(14+20+textBounds.Y, 32+20)
+			(35 + 40 + contentX) * value,
+			5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
 		)
 	end)
 
@@ -122,22 +146,22 @@ function Notification:render()
 				transparency = transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
-				TextContainer = e("Frame", {
-					Size = UDim2.new(0, 35+textBounds.X, 1, -20),
-					Position = UDim2.new(0, 0, 0, 10),
-					BackgroundTransparency = 1
+				Contents = e("Frame", {
+					Size = UDim2.new(0, 35 + contentX, 1, -paddingY),
+					Position = UDim2.new(0, 0, 0, paddingY / 2),
+					BackgroundTransparency = 1,
 				}, {
 					Logo = e("ImageLabel", {
 						ImageTransparency = transparency,
 						Image = Assets.Images.PluginButton,
 						BackgroundTransparency = 1,
-						Size = UDim2.new(0, 32, 0, 32),
-						Position = UDim2.new(0, 0, 0.5, 0),
-						AnchorPoint = Vector2.new(0, 0.5),
+						Size = UDim2.new(0, logoSize, 0, logoSize),
+						Position = UDim2.new(0, 0, 0, 0),
+						AnchorPoint = Vector2.new(0, 0),
 					}),
 					Info = e("TextLabel", {
 						Text = self.props.text,
-						Font = Enum.Font.GothamSemibold,
+						Font = Enum.Font.GothamMedium,
 						TextSize = 15,
 						TextColor3 = theme.Notification.InfoColor,
 						TextTransparency = transparency,
@@ -150,27 +174,30 @@ function Notification:render()
 						LayoutOrder = 1,
 						BackgroundTransparency = 1,
 					}),
-					Time = e("TextLabel", {
-						Text = time:FormatLocalTime("LTS", "en-us"),
-						Font = Enum.Font.Code,
-						TextSize = 12,
-						TextColor3 = theme.Notification.InfoColor,
-						TextTransparency = transparency,
-						TextXAlignment = Enum.TextXAlignment.Left,
-
-						Size = UDim2.new(1, -35, 0, 14),
-						Position = UDim2.new(0, 35, 1, -14),
-
-						LayoutOrder = 1,
-						BackgroundTransparency = 1,
-					}),
+					Actions = if self.props.actions
+						then e("Frame", {
+							Size = UDim2.new(1, -40, 0, 35),
+							Position = UDim2.new(1, 0, 1, 0),
+							AnchorPoint = Vector2.new(1, 1),
+							BackgroundTransparency = 1,
+						}, {
+							Layout = e("UIListLayout", {
+								FillDirection = Enum.FillDirection.Horizontal,
+								HorizontalAlignment = Enum.HorizontalAlignment.Right,
+								VerticalAlignment = Enum.VerticalAlignment.Center,
+								SortOrder = Enum.SortOrder.LayoutOrder,
+								Padding = UDim.new(0, 5),
+							}),
+							Buttons = Roact.createFragment(actionButtons),
+						})
+						else nil,
 				}),
 
 				Padding = e("UIPadding", {
 					PaddingLeft = UDim.new(0, 17),
 					PaddingRight = UDim.new(0, 15),
 				}),
-			})
+			}),
 		})
 	end)
 end
@@ -180,15 +207,16 @@ local Notifications = Roact.Component:extend("Notifications")
 function Notifications:render()
 	local notifs = {}
 
-	for index, notif in ipairs(self.props.notifications) do
-		notifs[notif] = e(Notification, {
+	for id, notif in self.props.notifications do
+		notifs["NotifID_" .. id] = e(Notification, {
 			soundPlayer = self.props.soundPlayer,
 			text = notif.text,
 			timestamp = notif.timestamp,
 			timeout = notif.timeout,
+			actions = notif.actions,
 			layoutOrder = (notif.timestamp - baseClock),
 			onClose = function()
-				self.props.onClose(index)
+				self.props.onClose(id)
 			end,
 		})
 	end

plugin/src/App/Page.lua

@@ -15,7 +15,7 @@ local Page = Roact.Component:extend("Page")
 
 function Page:init()
 	self:setState({
-		rendered = self.props.active
+		rendered = self.props.active,
 	})
 
 	self.motor = Flipper.SingleMotor.new(self.props.active and 1 or 0)
@@ -51,20 +51,21 @@ function Page:render()
 		Size = UDim2.new(1, 0, 1, 0),
 		BackgroundTransparency = 1,
 	}, {
-		Component = e(self.props.component, Dictionary.merge(self.props, {
-			transparency = transparency,
-		}))
+		Component = e(
+			self.props.component,
+			Dictionary.merge(self.props, {
+				transparency = transparency,
+			})
+		),
 	})
 end
 
 function Page:didUpdate(lastProps)
 	if self.props.active ~= lastProps.active then
-		self.motor:setGoal(
-			Flipper.Spring.new(self.props.active and 1 or 0, {
-				frequency = 6,
-				dampingRatio = 1,
-			})
-		)
+		self.motor:setGoal(Flipper.Spring.new(self.props.active and 1 or 0, {
+			frequency = 6,
+			dampingRatio = 1,
+		}))
 	end
 end
 

plugin/src/App/StatusPages/Confirming.lua

@@ -13,6 +13,7 @@ local Header = require(Plugin.App.Components.Header)
 local StudioPluginGui = require(Plugin.App.Components.Studio.StudioPluginGui)
 local Tooltip = require(Plugin.App.Components.Tooltip)
 local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
+local StringDiffVisualizer = require(Plugin.App.Components.StringDiffVisualizer)
 
 local e = Roact.createElement
 
@@ -21,6 +22,12 @@ local ConfirmingPage = Roact.Component:extend("ConfirmingPage")
 function ConfirmingPage:init()
 	self.contentSize, self.setContentSize = Roact.createBinding(0)
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+
+	self:setState({
+		showingSourceDiff = false,
+		oldSource = "",
+		newSource = "",
+	})
 end
 
 function ConfirmingPage:render()
@@ -52,9 +59,17 @@ function ConfirmingPage:render()
 				transparency = self.props.transparency,
 				layoutOrder = 3,
 
-				columnVisibility = {true, true, true},
+				changeListHeaders = { "Property", "Current", "Incoming" },
 				patch = self.props.confirmData.patch,
 				instanceMap = self.props.confirmData.instanceMap,
+
+				showSourceDiff = function(oldSource: string, newSource: string)
+					self:setState({
+						showingSourceDiff = true,
+						oldSource = oldSource,
+						newSource = newSource,
+					})
+				end,
 			}),
 
 			Buttons = e("Frame", {
@@ -70,7 +85,7 @@ function ConfirmingPage:render()
 					onClick = self.props.onAbort,
 				}, {
 					Tip = e(Tooltip.Trigger, {
-						text = "Stop the connection process"
+						text = "Stop the connection process",
 					}),
 				}),
 
@@ -83,7 +98,7 @@ function ConfirmingPage:render()
 						onClick = self.props.onReject,
 					}, {
 						Tip = e(Tooltip.Trigger, {
-							text = "Push Studio changes to the Rojo server"
+							text = "Push Studio changes to the Rojo server",
 						}),
 					})
 					else nil,
@@ -96,7 +111,7 @@ function ConfirmingPage:render()
 					onClick = self.props.onAccept,
 				}, {
 					Tip = e(Tooltip.Trigger, {
-						text = "Pull Rojo server changes to Studio"
+						text = "Pull Rojo server changes to Studio",
 					}),
 				}),
 
@@ -120,6 +135,44 @@ function ConfirmingPage:render()
 				PaddingLeft = UDim.new(0, 20),
 				PaddingRight = UDim.new(0, 20),
 			}),
+
+			SourceDiff = e(StudioPluginGui, {
+				id = "Rojo_ConfirmingSourceDiff",
+				title = "Source diff",
+				active = self.state.showingSourceDiff,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = true,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						showingSourceDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(StringDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldText = self.state.oldSource,
+							newText = self.state.newSource,
+						}),
+					}),
+				}),
+			}),
 		})
 
 		if self.props.createPopup then
@@ -130,10 +183,10 @@ function ConfirmingPage:render()
 					self.props.confirmData.serverInfo.projectName or "UNKNOWN"
 				),
 				active = true,
+				isEphemeral = true,
 
 				initDockState = Enum.InitialDockState.Float,
-				initEnabled = true,
-				overridePreviousState = true,
+				overridePreviousState = false,
 				floatingSize = Vector2.new(500, 350),
 				minimumSize = Vector2.new(400, 250),
 

plugin/src/App/StatusPages/Connected.lua

@@ -10,15 +10,28 @@ local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 local PatchSet = require(Plugin.PatchSet)
 
+local StudioPluginGui = require(Plugin.App.Components.Studio.StudioPluginGui)
 local Header = require(Plugin.App.Components.Header)
 local IconButton = require(Plugin.App.Components.IconButton)
+local TextButton = require(Plugin.App.Components.TextButton)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local Tooltip = require(Plugin.App.Components.Tooltip)
 local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
+local StringDiffVisualizer = require(Plugin.App.Components.StringDiffVisualizer)
 
 local e = Roact.createElement
 
-local AGE_UNITS = { {31556909, "year"}, {2629743, "month"}, {604800, "week"}, {86400, "day"}, {3600, "hour"}, {60, "minute"}, }
+local AGE_UNITS = {
+	{ 31556909, "year" },
+	{ 2629743, "month" },
+	{ 604800, "week" },
+	{ 86400, "day" },
+	{ 3600, "hour" },
+	{
+		60,
+		"minute",
+	},
+}
 function timeSinceText(elapsed: number): string
 	if elapsed < 3 then
 		return "just now"
@@ -26,11 +39,11 @@ function timeSinceText(elapsed: number): string
 
 	local ageText = string.format("%d seconds ago", elapsed)
 
-	for _,UnitData in ipairs(AGE_UNITS) do
+	for _, UnitData in ipairs(AGE_UNITS) do
 		local UnitSeconds, UnitName = UnitData[1], UnitData[2]
 		if elapsed > UnitSeconds then
-			local c = math.floor(elapsed/UnitSeconds)
-			ageText = string.format("%d %s%s ago", c, UnitName, c>1 and "s" or "")
+			local c = math.floor(elapsed / UnitSeconds)
+			ageText = string.format("%d %s%s ago", c, UnitName, c > 1 and "s" or "")
 			break
 		end
 	end
@@ -38,45 +51,53 @@ function timeSinceText(elapsed: number): string
 	return ageText
 end
 
-local function ChangesDrawer(props)
-	if props.rendered == false then
+local ChangesDrawer = Roact.Component:extend("ChangesDrawer")
+
+function ChangesDrawer:init()
+	-- Hold onto the serve session during the lifecycle of this component
+	-- so that it can still render during the fade out after disconnecting
+	self.serveSession = self.props.serveSession
+end
+
+function ChangesDrawer:render()
+	if self.props.rendered == false or self.serveSession == nil then
 		return nil
 	end
 
 	return Theme.with(function(theme)
 		return e(BorderedContainer, {
-			transparency = props.transparency,
-			size = props.height:map(function(y)
-				return UDim2.new(1, 0, y, -180 * y)
+			transparency = self.props.transparency,
+			size = self.props.height:map(function(y)
+				return UDim2.new(1, 0, y, -220 * y)
 			end),
 			position = UDim2.new(0, 0, 1, 0),
 			anchorPoint = Vector2.new(0, 1),
-			layoutOrder = props.layoutOrder,
+			layoutOrder = self.props.layoutOrder,
 		}, {
 			Close = e(IconButton, {
 				icon = Assets.Images.Icons.Close,
 				iconSize = 24,
 				color = theme.ConnectionDetails.DisconnectColor,
-				transparency = props.transparency,
+				transparency = self.props.transparency,
 
 				position = UDim2.new(1, 0, 0, 0),
 				anchorPoint = Vector2.new(1, 0),
 
-				onClick = props.onClose,
+				onClick = self.props.onClose,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "Close the patch visualizer"
+					text = "Close the patch visualizer",
 				}),
 			}),
 
 			PatchVisualizer = e(PatchVisualizer, {
 				size = UDim2.new(1, 0, 1, 0),
-				transparency = props.transparency,
+				transparency = self.props.transparency,
 				layoutOrder = 3,
 
-				columnVisibility = {true, false, true},
-				patch = props.patchInfo:getValue().patch,
-				instanceMap = props.serveSession.__instanceMap,
+				patchTree = self.props.patchTree,
+
+				showSourceDiff = self.props.showSourceDiff,
 			}),
 		})
 	end)
@@ -91,7 +112,7 @@ local function ConnectionDetails(props)
 		}, {
 			TextContainer = e("Frame", {
 				Size = UDim2.new(1, 0, 1, 0),
-				BackgroundTransparency = 1
+				BackgroundTransparency = 1,
 			}, {
 				ProjectName = e("TextLabel", {
 					Text = props.projectName,
@@ -129,22 +150,6 @@ local function ConnectionDetails(props)
 				}),
 			}),
 
-			Disconnect = e(IconButton, {
-				icon = Assets.Images.Icons.Close,
-				iconSize = 24,
-				color = theme.ConnectionDetails.DisconnectColor,
-				transparency = props.transparency,
-
-				position = UDim2.new(1, 0, 0.5, 0),
-				anchorPoint = Vector2.new(1, 0.5),
-
-				onClick = props.onDisconnect,
-			}, {
-				Tip = e(Tooltip.Trigger, {
-					text = "Disconnect from the Rojo sync server"
-				}),
-			}),
-
 			Padding = e("UIPadding", {
 				PaddingLeft = UDim.new(0, 17),
 				PaddingRight = UDim.new(0, 15),
@@ -155,6 +160,64 @@ end
 
 local ConnectedPage = Roact.Component:extend("ConnectedPage")
 
+function ConnectedPage:getChangeInfoText()
+	local patchData = self.props.patchData
+	if patchData == nil then
+		return ""
+	end
+
+	local elapsed = os.time() - patchData.timestamp
+	local unapplied = PatchSet.countChanges(patchData.unapplied)
+
+	return "<i>Synced "
+		.. timeSinceText(elapsed)
+		.. (if unapplied > 0
+			then string.format(
+				', <font color="#FF8E3C">but %d change%s failed to apply</font>',
+				unapplied,
+				unapplied == 1 and "" or "s"
+			)
+			else "")
+		.. "</i>"
+end
+
+function ConnectedPage:startChangeInfoTextUpdater()
+	-- Cancel any existing updater
+	self:stopChangeInfoTextUpdater()
+
+	-- Start a new updater
+	self.changeInfoTextUpdater = task.defer(function()
+		while true do
+			if self.state.hoveringChangeInfo then
+				self.setChangeInfoText("<u>" .. self:getChangeInfoText() .. "</u>")
+			else
+				self.setChangeInfoText(self:getChangeInfoText())
+			end
+
+			local elapsed = os.time() - self.props.patchData.timestamp
+			local updateInterval = 1
+
+			-- Update timestamp text as frequently as currently needed
+			for _, UnitData in ipairs(AGE_UNITS) do
+				local UnitSeconds = UnitData[1]
+				if elapsed > UnitSeconds then
+					updateInterval = UnitSeconds
+					break
+				end
+			end
+
+			task.wait(updateInterval)
+		end
+	end)
+end
+
+function ConnectedPage:stopChangeInfoTextUpdater()
+	if self.changeInfoTextUpdater then
+		task.cancel(self.changeInfoTextUpdater)
+		self.changeInfoTextUpdater = nil
+	end
+end
+
 function ConnectedPage:init()
 	self.changeDrawerMotor = Flipper.SingleMotor.new(0)
 	self.changeDrawerHeight = bindingUtil.fromMotor(self.changeDrawerMotor)
@@ -175,7 +238,29 @@ function ConnectedPage:init()
 
 	self:setState({
 		renderChanges = false,
+		hoveringChangeInfo = false,
+		showingSourceDiff = false,
+		oldSource = "",
+		newSource = "",
 	})
+
+	self.changeInfoText, self.setChangeInfoText = Roact.createBinding("")
+
+	self:startChangeInfoTextUpdater()
+end
+
+function ConnectedPage:willUnmount()
+	self:stopChangeInfoTextUpdater()
+end
+
+function ConnectedPage:didUpdate(previousProps)
+	if self.props.patchData.timestamp ~= previousProps.patchData.timestamp then
+		-- New patch recieved
+		self:startChangeInfoTextUpdater()
+		self:setState({
+			showingSourceDiff = false,
+		})
+	end
 end
 
 function ConnectedPage:render()
@@ -207,16 +292,46 @@ function ConnectedPage:render()
 				onDisconnect = self.props.onDisconnect,
 			}),
 
+			Buttons = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 34),
+				LayoutOrder = 3,
+				BackgroundTransparency = 1,
+				ZIndex = 2,
+			}, {
+				Settings = e(TextButton, {
+					text = "Settings",
+					style = "Bordered",
+					transparency = self.props.transparency,
+					layoutOrder = 1,
+					onClick = self.props.onNavigateSettings,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "View and modify plugin settings",
+					}),
+				}),
+
+				Disconnect = e(TextButton, {
+					text = "Disconnect",
+					style = "Solid",
+					transparency = self.props.transparency,
+					layoutOrder = 2,
+					onClick = self.props.onDisconnect,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "Disconnect from the Rojo sync server",
+					}),
+				}),
+
+				Layout = e("UIListLayout", {
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 10),
+				}),
+			}),
+
 			ChangeInfo = e("TextButton", {
-				Text = self.props.patchInfo:map(function(info)
-					local changes = PatchSet.countChanges(info.patch)
-					return string.format(
-						"<i>Synced %d change%s %s</i>",
-						changes,
-						changes == 1 and "" or "s",
-						timeSinceText(os.time() - info.timestamp)
-					)
-				end),
+				Text = self.changeInfoText,
 				Font = Enum.Font.Gotham,
 				TextSize = 14,
 				TextWrapped = true,
@@ -228,9 +343,23 @@ function ConnectedPage:render()
 
 				Size = UDim2.new(1, 0, 0, 28),
 
-				LayoutOrder = 3,
+				LayoutOrder = 4,
 				BackgroundTransparency = 1,
 
+				[Roact.Event.MouseEnter] = function()
+					self:setState({
+						hoveringChangeInfo = true,
+					})
+					self.setChangeInfoText("<u>" .. self:getChangeInfoText() .. "</u>")
+				end,
+
+				[Roact.Event.MouseLeave] = function()
+					self:setState({
+						hoveringChangeInfo = false,
+					})
+					self.setChangeInfoText(self:getChangeInfoText())
+				end,
+
 				[Roact.Event.Activated] = function()
 					if self.state.renderChanges then
 						self.changeDrawerMotor:setGoal(Flipper.Spring.new(0, {
@@ -244,15 +373,27 @@ function ConnectedPage:render()
 						}))
 					end
 				end,
+			}, {
+				Tooltip = e(Tooltip.Trigger, {
+					text = if self.state.renderChanges then "Hide the changes" else "View the changes",
+				}),
 			}),
 
 			ChangesDrawer = e(ChangesDrawer, {
 				rendered = self.state.renderChanges,
 				transparency = self.props.transparency,
-				patchInfo = self.props.patchInfo,
+				patchTree = self.props.patchTree,
 				serveSession = self.props.serveSession,
 				height = self.changeDrawerHeight,
-				layoutOrder = 4,
+				layoutOrder = 5,
+
+				showSourceDiff = function(oldSource: string, newSource: string)
+					self:setState({
+						showingSourceDiff = true,
+						oldSource = oldSource,
+						newSource = newSource,
+					})
+				end,
 
 				onClose = function()
 					self.changeDrawerMotor:setGoal(Flipper.Spring.new(0, {
@@ -261,6 +402,44 @@ function ConnectedPage:render()
 					}))
 				end,
 			}),
+
+			SourceDiff = e(StudioPluginGui, {
+				id = "Rojo_ConnectedSourceDiff",
+				title = "Source diff",
+				active = self.state.showingSourceDiff,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = false,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						showingSourceDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(StringDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldText = self.state.oldSource,
+							newText = self.state.newSource,
+						}),
+					}),
+				}),
+			}),
 		})
 	end)
 end

plugin/src/App/StatusPages/Error.lua

@@ -50,7 +50,9 @@ function Error:render()
 				local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
 
 				local textBounds = TextService:GetTextSize(
-					self.props.errorMessage, 16, Enum.Font.Code,
+					self.props.errorMessage,
+					16,
+					Enum.Font.Code,
 					Vector2.new(containerSize.X, math.huge)
 				)
 
@@ -60,12 +62,13 @@ function Error:render()
 			ErrorMessage = Theme.with(function(theme)
 				return e("TextBox", {
 					[Roact.Event.InputBegan] = function(rbx, input)
-						if input.UserInputType ~= Enum.UserInputType.MouseButton1 then return end
+						if input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+							return
+						end
 						rbx.SelectionStart = 0
-						rbx.CursorPosition = #rbx.Text+1
+						rbx.CursorPosition = #rbx.Text + 1
 					end,
 
-
 					Text = self.props.errorMessage,
 					TextEditable = false,
 					Font = Enum.Font.Code,
@@ -126,7 +129,7 @@ function ErrorPage:render()
 				onClick = self.props.onClose,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "Dismiss message"
+					text = "Dismiss message",
 				}),
 			}),
 

plugin/src/App/StatusPages/NotConnected.lua

@@ -46,7 +46,7 @@ local function AddressEntry(props)
 					if props.onHostChange ~= nil then
 						props.onHostChange(object.Text)
 					end
-				end
+				end,
 			}),
 
 			Port = e("TextBox", {
@@ -120,7 +120,7 @@ function NotConnectedPage:render()
 				onClick = self.props.onNavigateSettings,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "View and modify plugin settings"
+					text = "View and modify plugin settings",
 				}),
 			}),
 
@@ -132,7 +132,7 @@ function NotConnectedPage:render()
 				onClick = self.props.onConnect,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "Connect to a Rojo sync server"
+					text = "Connect to a Rojo sync server",
 				}),
 			}),
 

plugin/src/App/StatusPages/Settings/Setting.lua

@@ -32,6 +32,7 @@ local Setting = Roact.Component:extend("Setting")
 function Setting:init()
 	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+	self.inputSize, self.setInputSize = Roact.createBinding(Vector2.new(0, 0))
 
 	self:setState({
 		setting = Settings:get(self.props.id),
@@ -59,58 +60,75 @@ function Setting:render()
 			LayoutOrder = self.props.layoutOrder,
 			ZIndex = -self.props.layoutOrder,
 			BackgroundTransparency = 1,
+			Visible = self.props.visible,
 
 			[Roact.Change.AbsoluteSize] = function(object)
 				self.setContainerSize(object.AbsoluteSize)
 			end,
 		}, {
-			Input = if self.props.options ~= nil then
-				e(Dropdown, {
-					options = self.props.options,
-					active = self.state.setting,
-					transparency = self.props.transparency,
-					position = UDim2.new(1, 0, 0.5, 0),
-					anchorPoint = Vector2.new(1, 0.5),
-					onClick = function(option)
-						Settings:set(self.props.id, option)
-					end,
-				})
-			else
-				e(Checkbox, {
-					active = self.state.setting,
-					transparency = self.props.transparency,
-					position = UDim2.new(1, 0, 0.5, 0),
-					anchorPoint = Vector2.new(1, 0.5),
-					onClick = function()
-						local currentValue = Settings:get(self.props.id)
-						Settings:set(self.props.id, not currentValue)
+			RightAligned = Roact.createElement("Frame", {
+				BackgroundTransparency = 1,
+				Size = UDim2.new(1, 0, 1, 0),
+			}, {
+				Layout = e("UIListLayout", {
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 2),
+					[Roact.Change.AbsoluteContentSize] = function(rbx)
+						self.setInputSize(rbx.AbsoluteContentSize)
 					end,
 				}),
 
-			Reset = if self.props.onReset then e(IconButton, {
-				icon = Assets.Images.Icons.Reset,
-				iconSize = 24,
-				color = theme.BackButtonColor,
-				transparency = self.props.transparency,
-				visible = self.props.showReset,
+				Input = if self.props.input ~= nil
+					then self.props.input
+					elseif self.props.options ~= nil then e(Dropdown, {
+						locked = self.props.locked,
+						options = self.props.options,
+						active = self.state.setting,
+						transparency = self.props.transparency,
+						onClick = function(option)
+							Settings:set(self.props.id, option)
+						end,
+					})
+					else e(Checkbox, {
+						locked = self.props.locked,
+						active = self.state.setting,
+						transparency = self.props.transparency,
+						onClick = function()
+							local currentValue = Settings:get(self.props.id)
+							Settings:set(self.props.id, not currentValue)
+						end,
+					}),
 
-				position = UDim2.new(1, -32 - (self.props.options ~= nil and 120 or 40), 0.5, 0),
-				anchorPoint = Vector2.new(0, 0.5),
+				Reset = if self.props.onReset
+					then e(IconButton, {
+						icon = Assets.Images.Icons.Reset,
+						iconSize = 24,
+						color = theme.BackButtonColor,
+						transparency = self.props.transparency,
+						visible = self.props.showReset,
+						layoutOrder = -1,
 
-				onClick = self.props.onReset,
-			}) else nil,
+						onClick = self.props.onReset,
+					})
+					else nil,
+			}),
 
 			Text = e("Frame", {
 				Size = UDim2.new(1, 0, 1, 0),
 				BackgroundTransparency = 1,
 			}, {
 				Name = e("TextLabel", {
-					Text = self.props.name,
+					Text = (if self.props.experimental then '<font color="#FF8E3C">⚠ </font>' else "")
+						.. self.props.name,
 					Font = Enum.Font.GothamBold,
 					TextSize = 17,
 					TextColor3 = theme.Setting.NameColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
+					RichText = true,
 
 					Size = UDim2.new(1, 0, 0, 17),
 
@@ -119,7 +137,8 @@ function Setting:render()
 				}),
 
 				Description = e("TextLabel", {
-					Text = self.props.description,
+					Text = (if self.props.experimental then '<font color="#FF8E3C">[Experimental] </font>' else "")
+						.. self.props.description,
 					Font = Enum.Font.Gotham,
 					LineHeight = 1.2,
 					TextSize = 14,
@@ -127,12 +146,21 @@ function Setting:render()
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 					TextWrapped = true,
+					RichText = true,
 
-					Size = self.containerSize:map(function(value)
-						local offset = (self.props.onReset and 34 or 0) + (self.props.options ~= nil and 120 or 40)
+					Size = Roact.joinBindings({
+						containerSize = self.containerSize,
+						inputSize = self.inputSize,
+					}):map(function(values)
+						local desc = (if self.props.experimental then "[Experimental] " else "")
+							.. self.props.description
+						local offset = values.inputSize.X + 5
 						local textBounds = getTextBounds(
-							self.props.description, 14, Enum.Font.Gotham, 1.2,
-							Vector2.new(value.X - offset, math.huge)
+							desc,
+							14,
+							Enum.Font.Gotham,
+							1.2,
+							Vector2.new(values.containerSize.X - offset, math.huge)
 						)
 						return UDim2.new(1, -offset, 0, textBounds.Y)
 					end),

plugin/src/App/StatusPages/Settings/init.lua

@@ -12,6 +12,7 @@ local Theme = require(Plugin.App.Theme)
 local IconButton = require(Plugin.App.Components.IconButton)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
 local Tooltip = require(Plugin.App.Components.Tooltip)
+local TextInput = require(Plugin.App.Components.TextInput)
 local Setting = require(script.Setting)
 
 local e = Roact.createElement
@@ -25,6 +26,7 @@ local function invertTbl(tbl)
 end
 
 local invertedLevels = invertTbl(Log.Level)
+local confirmationBehaviors = { "Initial", "Always", "Large Changes", "Unlisted PlaceId" }
 
 local function Navbar(props)
 	return Theme.with(function(theme)
@@ -47,7 +49,7 @@ local function Navbar(props)
 				onClick = props.onBack,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "Back"
+					text = "Back",
 				}),
 			}),
 
@@ -61,7 +63,7 @@ local function Navbar(props)
 				Size = UDim2.new(1, 0, 1, 0),
 
 				BackgroundTransparency = 1,
-			})
+			}),
 		})
 	end)
 end
@@ -87,36 +89,90 @@ function SettingsPage:render()
 				layoutOrder = 0,
 			}),
 
-			OpenScriptsExternally = e(Setting, {
-				id = "openScriptsExternally",
-				name = "Open Scripts Externally",
-				description = "Attempt to open scripts in an external editor",
-				transparency = self.props.transparency,
-				layoutOrder = 1,
-			}),
-
 			ShowNotifications = e(Setting, {
 				id = "showNotifications",
 				name = "Show Notifications",
 				description = "Popup notifications in viewport",
 				transparency = self.props.transparency,
+				layoutOrder = 1,
+			}),
+
+			SyncReminder = e(Setting, {
+				id = "syncReminder",
+				name = "Sync Reminder",
+				description = "Notify to sync when opening a place that has previously been synced",
+				transparency = self.props.transparency,
+				visible = Settings:getBinding("showNotifications"),
 				layoutOrder = 2,
 			}),
 
+			ConfirmationBehavior = e(Setting, {
+				id = "confirmationBehavior",
+				name = "Confirmation Behavior",
+				description = "When to prompt for confirmation before syncing",
+				transparency = self.props.transparency,
+				layoutOrder = 3,
+
+				options = confirmationBehaviors,
+			}),
+
+			LargeChangesConfirmationThreshold = e(Setting, {
+				id = "largeChangesConfirmationThreshold",
+				name = "Confirmation Threshold",
+				description = "How many modified instances to be considered a large change",
+				transparency = self.props.transparency,
+				layoutOrder = 4,
+				visible = Settings:getBinding("confirmationBehavior"):map(function(value)
+					return value == "Large Changes"
+				end),
+				input = e(TextInput, {
+					size = UDim2.new(0, 40, 0, 28),
+					text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
+						return tostring(value)
+					end),
+					transparency = self.props.transparency,
+					enabled = true,
+					onEntered = function(text)
+						local number = tonumber(string.match(text, "%d+"))
+						if number then
+							Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
+						else
+							-- Force text back to last valid value
+							Settings:set(
+								"largeChangesConfirmationThreshold",
+								Settings:get("largeChangesConfirmationThreshold")
+							)
+						end
+					end,
+				}),
+			}),
+
 			PlaySounds = e(Setting, {
 				id = "playSounds",
 				name = "Play Sounds",
 				description = "Toggle sound effects",
 				transparency = self.props.transparency,
-				layoutOrder = 3,
+				layoutOrder = 5,
+			}),
+
+			OpenScriptsExternally = e(Setting, {
+				id = "openScriptsExternally",
+				name = "Open Scripts Externally",
+				description = "Attempt to open scripts in an external editor",
+				locked = self.props.syncActive,
+				experimental = true,
+				transparency = self.props.transparency,
+				layoutOrder = 6,
 			}),
 
 			TwoWaySync = e(Setting, {
 				id = "twoWaySync",
 				name = "Two-Way Sync",
-				description = "EXPERIMENTAL! Editing files in Studio will sync them into the filesystem",
+				description = "Editing files in Studio will sync them into the filesystem",
+				locked = self.props.syncActive,
+				experimental = true,
 				transparency = self.props.transparency,
-				layoutOrder = 4,
+				layoutOrder = 7,
 			}),
 
 			LogLevel = e(Setting, {
@@ -124,7 +180,7 @@ function SettingsPage:render()
 				name = "Log Level",
 				description = "Plugin output verbosity level",
 				transparency = self.props.transparency,
-				layoutOrder = 5,
+				layoutOrder = 100,
 
 				options = invertedLevels,
 				showReset = Settings:getBinding("logLevel"):map(function(value)
@@ -140,7 +196,7 @@ function SettingsPage:render()
 				name = "Typechecking",
 				description = "Toggle typechecking on the API surface",
 				transparency = self.props.transparency,
-				layoutOrder = 6,
+				layoutOrder = 101,
 			}),
 
 			Layout = e("UIListLayout", {

plugin/src/App/Theme.lua

@@ -23,205 +23,226 @@ local Log = require(Packages.Log)
 
 local strict = require(script.Parent.Parent.strict)
 
--- Copying hex colors back and forth from design programs is faster
-local function hexColor(decimal)
-	local red = bit32.band(bit32.rshift(decimal, 16), 2^8 - 1)
-	local green = bit32.band(bit32.rshift(decimal, 8), 2^8 - 1)
-	local blue = bit32.band(decimal, 2^8 - 1)
-
-	return Color3.fromRGB(red, green, blue)
-end
-
-local BRAND_COLOR = hexColor(0xE13835)
+local BRAND_COLOR = Color3.fromHex("E13835")
 
 local lightTheme = strict("LightTheme", {
-	BackgroundColor = hexColor(0xFFFFFF),
+	BackgroundColor = Color3.fromHex("FFFFFF"),
 	Button = {
 		Solid = {
-			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillColor = Color3.fromHex("FFFFFF"),
 			ActionFillTransparency = 0.8,
 			Enabled = {
-				TextColor = hexColor(0xFFFFFF),
+				TextColor = Color3.fromHex("FFFFFF"),
 				BackgroundColor = BRAND_COLOR,
 			},
 			Disabled = {
-				TextColor = hexColor(0xFFFFFF),
+				TextColor = Color3.fromHex("FFFFFF"),
 				BackgroundColor = BRAND_COLOR,
 			},
 		},
 		Bordered = {
-			ActionFillColor = hexColor(0x000000),
+			ActionFillColor = Color3.fromHex("000000"),
 			ActionFillTransparency = 0.9,
 			Enabled = {
-				TextColor = hexColor(0x393939),
-				BorderColor = hexColor(0xACACAC),
+				TextColor = Color3.fromHex("393939"),
+				BorderColor = Color3.fromHex("ACACAC"),
 			},
 			Disabled = {
-				TextColor = hexColor(0x393939),
-				BorderColor = hexColor(0xACACAC),
+				TextColor = Color3.fromHex("393939"),
+				BorderColor = Color3.fromHex("ACACAC"),
 			},
 		},
 	},
 	Checkbox = {
 		Active = {
-			IconColor = hexColor(0xFFFFFF),
+			IconColor = Color3.fromHex("FFFFFF"),
 			BackgroundColor = BRAND_COLOR,
 		},
 		Inactive = {
-			IconColor = hexColor(0xEEEEEE),
-			BorderColor = hexColor(0xAFAFAF),
+			IconColor = Color3.fromHex("EEEEEE"),
+			BorderColor = Color3.fromHex("AFAFAF"),
 		},
 	},
 	Dropdown = {
-		TextColor = hexColor(0x00000),
-		BorderColor = hexColor(0xAFAFAF),
-		BackgroundColor = hexColor(0xEEEEEE),
+		TextColor = Color3.fromHex("000000"),
+		BorderColor = Color3.fromHex("AFAFAF"),
+		BackgroundColor = Color3.fromHex("EEEEEE"),
 		Open = {
 			IconColor = BRAND_COLOR,
 		},
 		Closed = {
-			IconColor = hexColor(0xEEEEEE),
+			IconColor = Color3.fromHex("EEEEEE"),
 		},
 	},
+	TextInput = {
+		Enabled = {
+			TextColor = Color3.fromHex("000000"),
+			PlaceholderColor = Color3.fromHex("8C8C8C"),
+			BorderColor = Color3.fromHex("ACACAC"),
+		},
+		Disabled = {
+			TextColor = Color3.fromHex("393939"),
+			PlaceholderColor = Color3.fromHex("8C8C8C"),
+			BorderColor = Color3.fromHex("AFAFAF"),
+		},
+		ActionFillColor = Color3.fromHex("000000"),
+		ActionFillTransparency = 0.9,
+	},
 	AddressEntry = {
-		TextColor = hexColor(0x000000),
-		PlaceholderColor = hexColor(0x8C8C8C)
+		TextColor = Color3.fromHex("000000"),
+		PlaceholderColor = Color3.fromHex("8C8C8C"),
 	},
 	BorderedContainer = {
-		BorderColor = hexColor(0xCBCBCB),
-		BackgroundColor = hexColor(0xEEEEEE),
+		BorderColor = Color3.fromHex("CBCBCB"),
+		BackgroundColor = Color3.fromHex("EEEEEE"),
 	},
 	Spinner = {
 		ForegroundColor = BRAND_COLOR,
-		BackgroundColor = hexColor(0xEEEEEE),
+		BackgroundColor = Color3.fromHex("EEEEEE"),
 	},
 	Diff = {
-		Add = hexColor(0xbaffbd),
-		Remove = hexColor(0xffbdba),
-		Edit = hexColor(0xbacdff),
-		Row = hexColor(0x000000),
+		Add = Color3.fromHex("baffbd"),
+		Remove = Color3.fromHex("ffbdba"),
+		Edit = Color3.fromHex("bacdff"),
+		Row = Color3.fromHex("000000"),
+		Warning = Color3.fromHex("FF8E3C"),
 	},
 	ConnectionDetails = {
-		ProjectNameColor = hexColor(0x00000),
-		AddressColor = hexColor(0x00000),
+		ProjectNameColor = Color3.fromHex("000000"),
+		AddressColor = Color3.fromHex("000000"),
 		DisconnectColor = BRAND_COLOR,
 	},
 	Settings = {
-		DividerColor = hexColor(0xCBCBCB),
+		DividerColor = Color3.fromHex("CBCBCB"),
 		Navbar = {
-			BackButtonColor = hexColor(0x000000),
-			TextColor = hexColor(0x000000),
+			BackButtonColor = Color3.fromHex("000000"),
+			TextColor = Color3.fromHex("000000"),
 		},
 		Setting = {
-			NameColor = hexColor(0x000000),
-			DescriptionColor = hexColor(0x5F5F5F),
+			NameColor = Color3.fromHex("000000"),
+			DescriptionColor = Color3.fromHex("5F5F5F"),
 		},
 	},
 	Header = {
 		LogoColor = BRAND_COLOR,
-		VersionColor = hexColor(0x727272),
+		VersionColor = Color3.fromHex("727272"),
 	},
 	Notification = {
-		InfoColor = hexColor(0x00000),
+		InfoColor = Color3.fromHex("000000"),
 		CloseColor = BRAND_COLOR,
 	},
-	ErrorColor = hexColor(0x000000),
-	ScrollBarColor = hexColor(0x000000),
+	ErrorColor = Color3.fromHex("000000"),
+	ScrollBarColor = Color3.fromHex("000000"),
 })
 
 local darkTheme = strict("DarkTheme", {
-	BackgroundColor = hexColor(0x2E2E2E),
+	BackgroundColor = Color3.fromHex("2E2E2E"),
 	Button = {
 		Solid = {
-			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillColor = Color3.fromHex("FFFFFF"),
 			ActionFillTransparency = 0.8,
 			Enabled = {
-				TextColor = hexColor(0xFFFFFF),
+				TextColor = Color3.fromHex("FFFFFF"),
 				BackgroundColor = BRAND_COLOR,
 			},
 			Disabled = {
-				TextColor = hexColor(0xFFFFFF),
+				TextColor = Color3.fromHex("FFFFFF"),
 				BackgroundColor = BRAND_COLOR,
 			},
 		},
 		Bordered = {
-			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillColor = Color3.fromHex("FFFFFF"),
 			ActionFillTransparency = 0.9,
 			Enabled = {
-				TextColor = hexColor(0xDBDBDB),
-				BorderColor = hexColor(0x535353),
+				TextColor = Color3.fromHex("DBDBDB"),
+				BorderColor = Color3.fromHex("535353"),
 			},
 			Disabled = {
-				TextColor = hexColor(0xDBDBDB),
-				BorderColor = hexColor(0x535353),
+				TextColor = Color3.fromHex("DBDBDB"),
+				BorderColor = Color3.fromHex("535353"),
 			},
 		},
 	},
 	Checkbox = {
 		Active = {
-			IconColor = hexColor(0xFFFFFF),
+			IconColor = Color3.fromHex("FFFFFF"),
 			BackgroundColor = BRAND_COLOR,
 		},
 		Inactive = {
-			IconColor = hexColor(0x484848),
-			BorderColor = hexColor(0x5A5A5A),
+			IconColor = Color3.fromHex("484848"),
+			BorderColor = Color3.fromHex("5A5A5A"),
 		},
 	},
 	Dropdown = {
-		TextColor = hexColor(0xFFFFFF),
-		BorderColor = hexColor(0x5A5A5A),
-		BackgroundColor = hexColor(0x2B2B2B),
+		TextColor = Color3.fromHex("FFFFFF"),
+		BorderColor = Color3.fromHex("5A5A5A"),
+		BackgroundColor = Color3.fromHex("2B2B2B"),
 		Open = {
 			IconColor = BRAND_COLOR,
 		},
 		Closed = {
-			IconColor = hexColor(0x484848),
+			IconColor = Color3.fromHex("484848"),
 		},
 	},
+	TextInput = {
+		Enabled = {
+			TextColor = Color3.fromHex("FFFFFF"),
+			PlaceholderColor = Color3.fromHex("8B8B8B"),
+			BorderColor = Color3.fromHex("535353"),
+		},
+		Disabled = {
+			TextColor = Color3.fromHex("484848"),
+			PlaceholderColor = Color3.fromHex("8B8B8B"),
+			BorderColor = Color3.fromHex("5A5A5A"),
+		},
+		ActionFillColor = Color3.fromHex("FFFFFF"),
+		ActionFillTransparency = 0.9,
+	},
 	AddressEntry = {
-		TextColor = hexColor(0xFFFFFF),
-		PlaceholderColor = hexColor(0x8B8B8B)
+		TextColor = Color3.fromHex("FFFFFF"),
+		PlaceholderColor = Color3.fromHex("8B8B8B"),
 	},
 	BorderedContainer = {
-		BorderColor = hexColor(0x535353),
-		BackgroundColor = hexColor(0x2B2B2B),
+		BorderColor = Color3.fromHex("535353"),
+		BackgroundColor = Color3.fromHex("2B2B2B"),
 	},
 	Spinner = {
 		ForegroundColor = BRAND_COLOR,
-		BackgroundColor = hexColor(0x2B2B2B),
+		BackgroundColor = Color3.fromHex("2B2B2B"),
 	},
 	Diff = {
-		Add = hexColor(0x273732),
-		Remove = hexColor(0x3F2D32),
-		Edit = hexColor(0x193345),
-		Row = hexColor(0xFFFFFF),
+		Add = Color3.fromHex("273732"),
+		Remove = Color3.fromHex("3F2D32"),
+		Edit = Color3.fromHex("193345"),
+		Row = Color3.fromHex("FFFFFF"),
+		Warning = Color3.fromHex("FF8E3C"),
 	},
 	ConnectionDetails = {
-		ProjectNameColor = hexColor(0xFFFFFF),
-		AddressColor = hexColor(0xFFFFFF),
-		DisconnectColor = hexColor(0xFFFFFF),
+		ProjectNameColor = Color3.fromHex("FFFFFF"),
+		AddressColor = Color3.fromHex("FFFFFF"),
+		DisconnectColor = Color3.fromHex("FFFFFF"),
 	},
 	Settings = {
-		DividerColor = hexColor(0x535353),
+		DividerColor = Color3.fromHex("535353"),
 		Navbar = {
-			BackButtonColor = hexColor(0xFFFFFF),
-			TextColor = hexColor(0xFFFFFF),
+			BackButtonColor = Color3.fromHex("FFFFFF"),
+			TextColor = Color3.fromHex("FFFFFF"),
 		},
 		Setting = {
-			NameColor = hexColor(0xFFFFFF),
-			DescriptionColor = hexColor(0xD3D3D3),
+			NameColor = Color3.fromHex("FFFFFF"),
+			DescriptionColor = Color3.fromHex("D3D3D3"),
 		},
 	},
 	Header = {
 		LogoColor = BRAND_COLOR,
-		VersionColor = hexColor(0xD3D3D3)
+		VersionColor = Color3.fromHex("D3D3D3"),
 	},
 	Notification = {
-		InfoColor = hexColor(0xFFFFFF),
-		CloseColor = hexColor(0xFFFFFF),
+		InfoColor = Color3.fromHex("FFFFFF"),
+		CloseColor = Color3.fromHex("FFFFFF"),
 	},
-	ErrorColor = hexColor(0xFFFFFF),
-	ScrollBarColor = hexColor(0xFFFFFF),
+	ErrorColor = Color3.fromHex("FFFFFF"),
+	ScrollBarColor = Color3.fromHex("FFFFFF"),
 })
 
 local Context = Roact.createContext(lightTheme)

plugin/src/App/init.lua

@@ -1,5 +1,7 @@
+local ChangeHistoryService = game:GetService("ChangeHistoryService")
 local Players = game:GetService("Players")
 local ServerStorage = game:GetService("ServerStorage")
+local RunService = game:GetService("RunService")
 
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
@@ -17,8 +19,10 @@ local Dictionary = require(Plugin.Dictionary)
 local ServeSession = require(Plugin.ServeSession)
 local ApiContext = require(Plugin.ApiContext)
 local PatchSet = require(Plugin.PatchSet)
+local PatchTree = require(Plugin.PatchTree)
 local preloadAssets = require(Plugin.preloadAssets)
 local soundPlayer = require(Plugin.soundPlayer)
+local ignorePlaceIds = require(Plugin.ignorePlaceIds)
 local Theme = require(script.Theme)
 
 local Page = require(script.Page)
@@ -51,42 +55,151 @@ function App:init()
 	self.host, self.setHost = Roact.createBinding(priorHost or "")
 	self.port, self.setPort = Roact.createBinding(priorPort or "")
 
-	self.patchInfo, self.setPatchInfo = Roact.createBinding({
-		patch = PatchSet.newEmpty(),
-		timestamp = os.time(),
-	})
 	self.confirmationBindable = Instance.new("BindableEvent")
 	self.confirmationEvent = self.confirmationBindable.Event
+	self.knownProjects = {}
+	self.notifId = 0
+
+	self.waypointConnection = ChangeHistoryService.OnUndo:Connect(function(action: string)
+		if not string.find(action, "^Rojo: Patch") then
+			return
+		end
+
+		local undoConnection, redoConnection = nil, nil
+		local function cleanup()
+			undoConnection:Disconnect()
+			redoConnection:Disconnect()
+		end
+
+		Log.warn(
+			string.format(
+				"You've undone '%s'.\nIf this was not intended, please Redo in the topbar or with Ctrl/⌘+Y.",
+				action
+			)
+		)
+		local dismissNotif = self:addNotification(
+			string.format("You've undone '%s'.\nIf this was not intended, please restore.", action),
+			10,
+			{
+				Restore = {
+					text = "Restore",
+					style = "Solid",
+					layoutOrder = 1,
+					onClick = function(notification)
+						cleanup()
+						notification:dismiss()
+						ChangeHistoryService:Redo()
+					end,
+				},
+				Dismiss = {
+					text = "Dismiss",
+					style = "Bordered",
+					layoutOrder = 2,
+					onClick = function(notification)
+						cleanup()
+						notification:dismiss()
+					end,
+				},
+			}
+		)
+
+		undoConnection = ChangeHistoryService.OnUndo:Once(function()
+			-- Our notif is now out of date- redoing will not restore the patch
+			-- since we've undone even further. Dismiss the notif.
+			cleanup()
+			dismissNotif()
+		end)
+		redoConnection = ChangeHistoryService.OnRedo:Once(function(redoneAction: string)
+			if redoneAction == action then
+				-- The user has restored the patch, so we can dismiss the notif
+				cleanup()
+				dismissNotif()
+			end
+		end)
+	end)
 
 	self:setState({
 		appStatus = AppStatus.NotConnected,
 		guiEnabled = false,
 		confirmData = {},
+		patchData = {
+			patch = PatchSet.newEmpty(),
+			unapplied = PatchSet.newEmpty(),
+			timestamp = os.time(),
+		},
 		notifications = {},
 		toolbarIcon = Assets.Images.PluginButton,
 	})
+
+	if
+		RunService:IsEdit()
+		and self.serveSession == nil
+		and Settings:get("syncReminder")
+		and self:getLastSyncTimestamp()
+	then
+		self:addNotification("You've previously synced this place. Would you like to reconnect?", 300, {
+			Connect = {
+				text = "Connect",
+				style = "Solid",
+				layoutOrder = 1,
+				onClick = function(notification)
+					notification:dismiss()
+					self:startSession()
+				end,
+			},
+			Dismiss = {
+				text = "Dismiss",
+				style = "Bordered",
+				layoutOrder = 2,
+				onClick = function(notification)
+					notification:dismiss()
+				end,
+			},
+		})
+	end
 end
 
-function App:addNotification(text: string, timeout: number?)
+function App:willUnmount()
+	self.waypointConnection:Disconnect()
+	self.confirmationBindable:Destroy()
+end
+
+function App:addNotification(
+	text: string,
+	timeout: number?,
+	actions: { [string]: { text: string, style: string, layoutOrder: number, onClick: (any) -> () } }?
+)
 	if not Settings:get("showNotifications") then
 		return
 	end
 
+	self.notifId += 1
+	local id = self.notifId
+
 	local notifications = table.clone(self.state.notifications)
-	table.insert(notifications, {
+	notifications[id] = {
 		text = text,
 		timestamp = DateTime.now().UnixTimestampMillis,
 		timeout = timeout or 3,
-	})
+		actions = actions,
+	}
 
 	self:setState({
 		notifications = notifications,
 	})
+
+	return function()
+		self:closeNotification(id)
+	end
 end
 
-function App:closeNotification(index: number)
+function App:closeNotification(id: number)
+	if not self.state.notifications[id] then
+		return
+	end
+
 	local notifications = table.clone(self.state.notifications)
-	table.remove(notifications, index)
+	notifications[id] = nil
 
 	self:setState({
 		notifications = notifications,
@@ -95,14 +208,42 @@ end
 
 function App:getPriorEndpoint()
 	local priorEndpoints = Settings:get("priorEndpoints")
-	if not priorEndpoints then return end
+	if not priorEndpoints then
+		return
+	end
 
-	local place = priorEndpoints[tostring(game.PlaceId)]
-	if not place then return end
+	local id = tostring(game.PlaceId)
+	if ignorePlaceIds[id] then
+		return
+	end
+
+	local place = priorEndpoints[id]
+	if not place then
+		return
+	end
 
 	return place.host, place.port
 end
 
+function App:getLastSyncTimestamp()
+	local priorEndpoints = Settings:get("priorEndpoints")
+	if not priorEndpoints then
+		return
+	end
+
+	local id = tostring(game.PlaceId)
+	if ignorePlaceIds[id] then
+		return
+	end
+
+	local place = priorEndpoints[id]
+	if not place then
+		return
+	end
+
+	return place.timestamp
+end
+
 function App:setPriorEndpoint(host: string, port: string)
 	local priorEndpoints = Settings:get("priorEndpoints")
 	if not priorEndpoints then
@@ -117,18 +258,18 @@ function App:setPriorEndpoint(host: string, port: string)
 		end
 	end
 
-	if host == Config.defaultHost and port == Config.defaultPort then
-		-- Don't save default
-		priorEndpoints[tostring(game.PlaceId)] = nil
-	else
-		priorEndpoints[tostring(game.PlaceId)] = {
-			host = host ~= Config.defaultHost and host or nil,
-			port = port ~= Config.defaultPort and port or nil,
-			timestamp = os.time(),
-		}
-		Log.trace("Saved last used endpoint for {}", game.PlaceId)
+	local id = tostring(game.PlaceId)
+	if ignorePlaceIds[id] then
+		return
 	end
 
+	priorEndpoints[id] = {
+		host = if host ~= Config.defaultHost then host else nil,
+		port = if port ~= Config.defaultPort then port else nil,
+		timestamp = os.time(),
+	}
+	Log.trace("Saved last used endpoint for {}", game.PlaceId)
+
 	Settings:set("priorEndpoints", priorEndpoints)
 end
 
@@ -219,31 +360,51 @@ function App:startSession()
 		twoWaySync = sessionOptions.twoWaySync,
 	})
 
-	serveSession:onPatchApplied(function(patch, _unapplied)
+	self.cleanupPrecommit = serveSession.__reconciler:hookPrecommit(function(patch, instanceMap)
+		-- Build new tree for patch
+		self:setState({
+			patchTree = PatchTree.build(patch, instanceMap, { "Property", "Old", "New" }),
+		})
+	end)
+	self.cleanupPostcommit = serveSession.__reconciler:hookPostcommit(function(patch, instanceMap, unappliedPatch)
+		-- Update tree with unapplied metadata
+		self:setState(function(prevState)
+			return {
+				patchTree = PatchTree.updateMetadata(prevState.patchTree, patch, instanceMap, unappliedPatch),
+			}
+		end)
+	end)
+
+	serveSession:hookPostcommit(function(patch, _instanceMap, unapplied)
+		local now = os.time()
+		local old = self.state.patchData
+
 		if PatchSet.isEmpty(patch) then
-			-- Ignore empty patches
+			-- Ignore empty patch, but update timestamp
+			self:setState({
+				patchData = {
+					patch = old.patch,
+					unapplied = old.unapplied,
+					timestamp = now,
+				},
+			})
 			return
 		end
 
-		local now = os.time()
-
-		local old = self.patchInfo:getValue()
 		if now - old.timestamp < 2 then
 			-- Patches that apply in the same second are
 			-- considered to be part of the same change for human clarity
-			local merged = PatchSet.newEmpty()
-			PatchSet.assign(merged, old.patch, patch)
-
-			self.setPatchInfo({
-				patch = merged,
-				timestamp = now,
-			})
-		else
-			self.setPatchInfo({
-				patch = patch,
-				timestamp = now,
-			})
+			patch = PatchSet.assign(PatchSet.newEmpty(), old.patch, patch)
+			unapplied = PatchSet.assign(PatchSet.newEmpty(), old.unapplied, unapplied)
 		end
+
+		self:setState({
+			patchData = {
+				patch = patch,
+				unapplied = unapplied,
+				timestamp = now,
+			},
+		})
 	end)
 
 	serveSession:onStatusChanged(function(status, details)
@@ -256,6 +417,8 @@ function App:startSession()
 			})
 			self:addNotification("Connecting to session...")
 		elseif status == ServeSession.Status.Connected then
+			self.knownProjects[details] = true
+
 			local address = ("%s:%s"):format(host, port)
 			self:setState({
 				appStatus = AppStatus.Connected,
@@ -267,6 +430,13 @@ function App:startSession()
 		elseif status == ServeSession.Status.Disconnected then
 			self.serveSession = nil
 			self:releaseSyncLock()
+			self:setState({
+				patchData = {
+					patch = PatchSet.newEmpty(),
+					unapplied = PatchSet.newEmpty(),
+					timestamp = os.time(),
+				},
+			})
 
 			-- Details being present indicates that this
 			-- disconnection was from an error.
@@ -291,9 +461,58 @@ function App:startSession()
 
 	serveSession:setConfirmCallback(function(instanceMap, patch, serverInfo)
 		if PatchSet.isEmpty(patch) then
+			Log.trace("Accepting patch without confirmation because it is empty")
 			return "Accept"
 		end
 
+		local confirmationBehavior = Settings:get("confirmationBehavior")
+		if confirmationBehavior == "Initial" then
+			-- Only confirm if we haven't synced this project yet this session
+			if self.knownProjects[serverInfo.projectName] then
+				Log.trace(
+					"Accepting patch without confirmation because project has already been connected and behavior is set to Initial"
+				)
+				return "Accept"
+			end
+		elseif confirmationBehavior == "Large Changes" then
+			-- Only confirm if the patch impacts many instances
+			if PatchSet.countInstances(patch) < Settings:get("largeChangesConfirmationThreshold") then
+				Log.trace(
+					"Accepting patch without confirmation because patch is small and behavior is set to Large Changes"
+				)
+				return "Accept"
+			end
+		elseif confirmationBehavior == "Unlisted PlaceId" then
+			-- Only confirm if the current placeId is not in the servePlaceIds allowlist
+			if serverInfo.expectedPlaceIds then
+				local isListed = table.find(serverInfo.expectedPlaceIds, game.PlaceId) ~= nil
+				if isListed then
+					Log.trace(
+						"Accepting patch without confirmation because placeId is listed and behavior is set to Unlisted PlaceId"
+					)
+					return "Accept"
+				end
+			end
+		end
+
+		-- The datamodel name gets overwritten by Studio, making confirmation of it intrusive
+		-- and unnecessary. This special case allows it to be accepted without confirmation.
+		if
+			PatchSet.hasAdditions(patch) == false
+			and PatchSet.hasRemoves(patch) == false
+			and PatchSet.containsOnlyInstance(patch, instanceMap, game)
+		then
+			local datamodelUpdates = PatchSet.getUpdateForInstance(patch, instanceMap, game)
+			if
+				datamodelUpdates ~= nil
+				and next(datamodelUpdates.changedProperties) == nil
+				and datamodelUpdates.changedClassName == nil
+			then
+				Log.trace("Accepting patch without confirmation because it only contains a datamodel name change")
+				return "Accept"
+			end
+		end
+
 		self:setState({
 			appStatus = AppStatus.Confirming,
 			confirmData = {
@@ -318,16 +537,6 @@ function App:startSession()
 	serveSession:start()
 
 	self.serveSession = serveSession
-
-	task.defer(function()
-		while self.serveSession == serveSession do
-			-- Trigger rerender to update timestamp text
-			local patchInfo = table.clone(self.patchInfo:getValue())
-			self.setPatchInfo(patchInfo)
-			local elapsed = os.time() - patchInfo.timestamp
-			task.wait(elapsed < 60 and 1 or elapsed / 5)
-		end
-	end)
 end
 
 function App:endSession()
@@ -343,6 +552,13 @@ function App:endSession()
 		appStatus = AppStatus.NotConnected,
 	})
 
+	if self.cleanupPrecommit ~= nil then
+		self.cleanupPrecommit()
+	end
+	if self.cleanupPostcommit ~= nil then
+		self.cleanupPostcommit()
+	end
+
 	Log.trace("Session terminated by user")
 end
 
@@ -369,12 +585,12 @@ function App:render()
 					id = pluginName,
 					title = pluginName,
 					active = self.state.guiEnabled,
+					isEphemeral = false,
 
 					initDockState = Enum.InitialDockState.Right,
-					initEnabled = false,
 					overridePreviousState = false,
-					floatingSize = Vector2.new(300, 200),
-					minimumSize = Vector2.new(300, 120),
+					floatingSize = Vector2.new(320, 210),
+					minimumSize = Vector2.new(300, 210),
 
 					zIndexBehavior = Enum.ZIndexBehavior.Sibling,
 
@@ -403,6 +619,7 @@ function App:render()
 						end,
 
 						onNavigateSettings = function()
+							self.backPage = AppStatus.NotConnected
 							self:setState({
 								appStatus = AppStatus.Settings,
 							})
@@ -429,18 +646,29 @@ function App:render()
 					Connected = createPageElement(AppStatus.Connected, {
 						projectName = self.state.projectName,
 						address = self.state.address,
-						patchInfo = self.patchInfo,
+						patchTree = self.state.patchTree,
+						patchData = self.state.patchData,
 						serveSession = self.serveSession,
 
 						onDisconnect = function()
 							self:endSession()
 						end,
+
+						onNavigateSettings = function()
+							self.backPage = AppStatus.Connected
+							self:setState({
+								appStatus = AppStatus.Settings,
+							})
+						end,
 					}),
 
 					Settings = createPageElement(AppStatus.Settings, {
+						syncActive = self.serveSession ~= nil
+							and self.serveSession:getStatus() == ServeSession.Status.Connected,
+
 						onBack = function()
 							self:setState({
-								appStatus = AppStatus.NotConnected,
+								appStatus = self.backPage or AppStatus.NotConnected,
 							})
 						end,
 					}),
@@ -457,7 +685,11 @@ function App:render()
 					}),
 				}),
 
-				RojoNotifications = e("ScreenGui", {}, {
+				RojoNotifications = e("ScreenGui", {
+					ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
+					ResetOnSpawn = false,
+					DisplayOrder = 100,
+				}, {
 					layout = e("UIListLayout", {
 						SortOrder = Enum.SortOrder.LayoutOrder,
 						HorizontalAlignment = Enum.HorizontalAlignment.Right,
@@ -473,8 +705,8 @@ function App:render()
 					notifs = e(Notifications, {
 						soundPlayer = self.props.soundPlayer,
 						notifications = self.state.notifications,
-						onClose = function(index)
-							self:closeNotification(index)
+						onClose = function(id)
+							self:closeNotification(id)
 						end,
 					}),
 				}),

plugin/src/Assets.lua

@@ -24,6 +24,7 @@ local Assets = {
 			Close = "rbxassetid://6012985953",
 			Back = "rbxassetid://6017213752",
 			Reset = "rbxassetid://10142422327",
+			Expand = "rbxassetid://12045401097",
 		},
 		Diff = {
 			Add = "rbxassetid://10434145835",
@@ -33,9 +34,11 @@ local Assets = {
 		Checkbox = {
 			Active = "rbxassetid://6016251644",
 			Inactive = "rbxassetid://6016251963",
+			Locked = "rbxassetid://14011257320",
 		},
 		Dropdown = {
 			Arrow = "rbxassetid://10131770538",
+			Locked = "rbxassetid://14011257320",
 		},
 		Spinner = {
 			Foreground = "rbxassetid://3222731032",
@@ -51,7 +54,7 @@ local Assets = {
 			[32] = "rbxassetid://3088713341",
 			[64] = "rbxassetid://4918677124",
 			[128] = "rbxassetid://2600845734",
-			[500] = "rbxassetid://2609138523"
+			[500] = "rbxassetid://2609138523",
 		},
 	},
 	Sounds = {

plugin/src/Config.lua

@@ -2,11 +2,23 @@ local strict = require(script.Parent.strict)
 
 local isDevBuild = script.Parent.Parent:FindFirstChild("ROJO_DEV_BUILD") ~= nil
 
+local Version = script.Parent.Parent.Version
+local realVersion = Version.Value:split(".")
+
+for i = 1, 3 do
+	local num = tonumber(realVersion[i])
+	if num then
+		realVersion[i] = num
+	else
+		error(("invalid version `%s` (field %d)"):format(realVersion[i], i))
+	end
+end
+
 return strict("Config", {
 	isDevBuild = isDevBuild,
 	codename = "Epiphany",
-	version = {7, 2, 1},
-	expectedServerVersionString = "7.2 or newer",
+	version = realVersion,
+	expectedServerVersionString = ("%d.%d or newer"):format(realVersion[1], realVersion[2]),
 	protocolVersion = 4,
 	defaultHost = "localhost",
 	defaultPort = "34872",

plugin/src/Dictionary.lua

@@ -30,4 +30,4 @@ end
 return {
 	None = None,
 	merge = merge,
-}
+}

plugin/src/InstanceMap.lua

@@ -66,7 +66,7 @@ function InstanceMap:__fmtDebug(output)
 	for id, instance in pairs(self.fromIds) do
 		local label = string.format("%s (%s)", instance:GetFullName(), instance.ClassName)
 
-		table.insert(entries, {id, label})
+		table.insert(entries, { id, label })
 	end
 
 	table.sort(entries, function(a, b)

plugin/src/PatchSet.lua

@@ -26,7 +26,9 @@ local function deepEqual(a: any, b: any): boolean
 		end
 
 		for key, value in b do
-			if checkedKeys[key] then continue end
+			if checkedKeys[key] then
+				continue
+			end
 			if deepEqual(value, a[key]) == false then
 				return false
 			end
@@ -65,9 +67,7 @@ end
 	Tells whether the given PatchSet is empty.
 ]]
 function PatchSet.isEmpty(patchSet)
-	return next(patchSet.removed) == nil and
-		next(patchSet.added) == nil and
-		next(patchSet.updated) == nil
+	return next(patchSet.removed) == nil and next(patchSet.added) == nil and next(patchSet.updated) == nil
 end
 
 --[[
@@ -91,6 +91,113 @@ function PatchSet.hasUpdates(patchSet)
 	return next(patchSet.updated) ~= nil
 end
 
+--[[
+	Tells whether the given PatchSet contains changes to the given instance id
+]]
+function PatchSet.containsId(patchSet, instanceMap, id)
+	if patchSet.added[id] ~= nil then
+		return true
+	end
+
+	for _, idOrInstance in patchSet.removed do
+		local removedId = if Types.RbxId(idOrInstance) then idOrInstance else instanceMap.fromInstances[idOrInstance]
+		if removedId == id then
+			return true
+		end
+	end
+
+	for _, update in patchSet.updated do
+		if update.id == id then
+			return true
+		end
+	end
+
+	return false
+end
+
+--[[
+	Tells whether the given PatchSet contains changes to the given instance.
+	If the given InstanceMap does not contain the instance, this function always returns false.
+]]
+function PatchSet.containsInstance(patchSet, instanceMap, instance)
+	local id = instanceMap.fromInstances[instance]
+	if id == nil then
+		return false
+	end
+
+	return PatchSet.containsId(patchSet, instanceMap, id)
+end
+
+--[[
+	Tells whether the given PatchSet contains changes to nothing but the given instance id
+]]
+function PatchSet.containsOnlyId(patchSet, instanceMap, id)
+	if not PatchSet.containsId(patchSet, instanceMap, id) then
+		-- Patch doesn't contain the id at all
+		return false
+	end
+
+	for addedId in patchSet.added do
+		if addedId ~= id then
+			return false
+		end
+	end
+
+	for _, idOrInstance in patchSet.removed do
+		local removedId = if Types.RbxId(idOrInstance) then idOrInstance else instanceMap.fromInstances[idOrInstance]
+		if removedId ~= id then
+			return false
+		end
+	end
+
+	for _, update in patchSet.updated do
+		if update.id ~= id then
+			return false
+		end
+	end
+
+	return true
+end
+
+--[[
+	Tells whether the given PatchSet contains changes to nothing but the given instance.
+	If the given InstanceMap does not contain the instance, this function always returns false.
+]]
+function PatchSet.containsOnlyInstance(patchSet, instanceMap, instance)
+	local id = instanceMap.fromInstances[instance]
+	if id == nil then
+		return false
+	end
+
+	return PatchSet.containsOnlyId(patchSet, instanceMap, id)
+end
+
+--[[
+	Returns the update to the given instance id, or nil if there aren't any
+]]
+function PatchSet.getUpdateForId(patchSet, id)
+	for _, update in patchSet.updated do
+		if update.id == id then
+			return update
+		end
+	end
+
+	return nil
+end
+
+--[[
+	Returns the update to the given instance, or nil if there aren't any.
+	If the given InstanceMap does not contain the instance, this function always returns nil.
+]]
+function PatchSet.getUpdateForInstance(patchSet, instanceMap, instance)
+	local id = instanceMap.fromInstances[instance]
+	if id == nil then
+		return nil
+	end
+
+	return PatchSet.getUpdateForId(patchSet, id)
+end
+
 --[[
 	Tells whether the given PatchSets are equal.
 ]]
@@ -105,11 +212,44 @@ function PatchSet.countChanges(patch)
 	local count = 0
 
 	for _ in patch.added do
+		-- Adding an instance is 1 change
 		count += 1
 	end
 	for _ in patch.removed do
+		-- Removing an instance is 1 change
 		count += 1
 	end
+	for _, update in patch.updated do
+		-- Updating an instance is 1 change per property updated
+		for _ in update.changedProperties do
+			count += 1
+		end
+		if update.changedName ~= nil then
+			count += 1
+		end
+		if update.changedClassName ~= nil then
+			count += 1
+		end
+	end
+
+	return count
+end
+
+--[[
+	Count the number of instances affected by the given PatchSet.
+]]
+function PatchSet.countInstances(patch)
+	local count = 0
+
+	-- Added instances
+	for _ in patch.added do
+		count += 1
+	end
+	-- Removed instances
+	for _ in patch.removed do
+		count += 1
+	end
+	-- Updated instances
 	for _ in patch.updated do
 		count += 1
 	end
@@ -150,7 +290,7 @@ function PatchSet.humanSummary(instanceMap, patchSet)
 	for _, idOrInstance in ipairs(patchSet.removed) do
 		local instance, id
 
-		if type(idOrInstance) == "string" then
+		if Types.RbxId(idOrInstance) then
 			id = idOrInstance
 			instance = instanceMap.fromIds[id]
 		else
@@ -202,9 +342,15 @@ function PatchSet.humanSummary(instanceMap, patchSet)
 			end
 		end
 
-		table.insert(statements, string.format(
-			"- Add instance %q (ClassName %q) to %s",
-			virtualInstance.Name, virtualInstance.ClassName, parentDisplayName))
+		table.insert(
+			statements,
+			string.format(
+				"- Add instance %q (ClassName %q) to %s",
+				virtualInstance.Name,
+				virtualInstance.ClassName,
+				parentDisplayName
+			)
+		)
 	end
 
 	for _, update in ipairs(patchSet.updated) do
@@ -234,9 +380,10 @@ function PatchSet.humanSummary(instanceMap, patchSet)
 			displayName = "[unknown instance]"
 		end
 
-		table.insert(statements, string.format(
-			"- Update properties on %s: %s",
-			displayName, table.concat(updatedProperties, ",")))
+		table.insert(
+			statements,
+			string.format("- Update properties on %s: %s", displayName, table.concat(updatedProperties, ","))
+		)
 	end
 
 	return table.concat(statements, "\n")

plugin/src/PatchTree.lua

@@ -0,0 +1,467 @@
+--[[
+	Methods to turn PatchSets into trees matching the DataModel containing
+	the changes and metadata for use in the PatchVisualizer component.
+]]
+
+local HttpService = game:GetService("HttpService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Log = require(Packages.Log)
+
+local Types = require(Plugin.Types)
+local decodeValue = require(Plugin.Reconciler.decodeValue)
+local getProperty = require(Plugin.Reconciler.getProperty)
+
+local function alphabeticalNext(t, state)
+	-- Equivalent of the next function, but returns the keys in the alphabetic
+	-- order of node names. We use a temporary ordered key table that is stored in the
+	-- table being iterated.
+
+	local key = nil
+	if state == nil then
+		-- First iteration, generate the index
+		local orderedIndex, i = table.create(5), 0
+		for k in t do
+			i += 1
+			orderedIndex[i] = k
+		end
+		table.sort(orderedIndex, function(a, b)
+			local nodeA, nodeB = t[a], t[b]
+			return (nodeA.name or "") < (nodeB.name or "")
+		end)
+
+		t.__orderedIndex = orderedIndex
+		key = orderedIndex[1]
+	else
+		-- Fetch the next value
+		for i, orderedState in t.__orderedIndex do
+			if orderedState == state then
+				key = t.__orderedIndex[i + 1]
+				break
+			end
+		end
+	end
+
+	if key then
+		return key, t[key]
+	end
+
+	-- No more value to return, cleanup
+	t.__orderedIndex = nil
+
+	return
+end
+
+local function alphabeticalPairs(t)
+	-- Equivalent of the pairs() iterator, but sorted
+	return alphabeticalNext, t, nil
+end
+
+local Tree = {}
+Tree.__index = Tree
+
+function Tree.new()
+	local tree = {
+		idToNode = {},
+		ROOT = {
+			className = "DataModel",
+			name = "ROOT",
+			children = {},
+		},
+	}
+	-- Add ROOT to idToNode or it won't be found by getNode since that searches *within* ROOT
+	tree.idToNode["ROOT"] = tree.ROOT
+
+	return setmetatable(tree, Tree)
+end
+
+-- Iterates over all sub-nodes, depth first
+-- node is where to start from, defaults to root
+-- depth is used for recursion but can be used to set the starting depth
+function Tree:forEach(callback, node, depth)
+	depth = depth or 1
+	for _, child in alphabeticalPairs(if node then node.children else self.ROOT.children) do
+		callback(child, depth)
+		if type(child.children) == "table" then
+			self:forEach(callback, child, depth + 1)
+		end
+	end
+end
+
+-- Finds a node by id, depth first
+-- searchNode is the node to start the search within, defaults to root
+function Tree:getNode(id, searchNode)
+	if self.idToNode[id] then
+		return self.idToNode[id]
+	end
+
+	local searchChildren = (searchNode or self.ROOT).children
+	for nodeId, node in searchChildren do
+		if nodeId == id then
+			self.idToNode[id] = node
+			return node
+		end
+		local descendant = self:getNode(id, node)
+		if descendant then
+			return descendant
+		end
+	end
+
+	return nil
+end
+
+function Tree:doesNodeExist(id)
+	return self.idToNode[id] ~= nil
+end
+
+-- Adds a node to the tree as a child of the node with id == parent
+-- If parent is nil, it defaults to root
+-- props must contain id, and cannot contain children or parentId
+-- other than those three, it can hold anything
+function Tree:addNode(parent, props)
+	assert(props.id, "props must contain id")
+
+	parent = parent or "ROOT"
+
+	if self:doesNodeExist(props.id) then
+		-- Update existing node
+		local node = self:getNode(props.id)
+		for k, v in props do
+			node[k] = v
+		end
+		return node
+	end
+
+	local node = table.clone(props)
+	node.children = {}
+	node.parentId = parent
+
+	local parentNode = self:getNode(parent)
+	if not parentNode then
+		Log.warn("Failed to create node since parent doesnt exist: {}, {}", parent, props)
+		return
+	end
+
+	parentNode.children[node.id] = node
+	self.idToNode[node.id] = node
+
+	return node
+end
+
+-- Given a list of ancestor ids in descending order, builds the nodes for them
+-- using the patch and instanceMap info
+function Tree:buildAncestryNodes(previousId: string?, ancestryIds: { string }, patch, instanceMap)
+	-- Build nodes for ancestry by going up the tree
+	previousId = previousId or "ROOT"
+
+	for _, ancestorId in ancestryIds do
+		local value = instanceMap.fromIds[ancestorId] or patch.added[ancestorId]
+		if not value then
+			Log.warn("Failed to find ancestor object for " .. ancestorId)
+			continue
+		end
+		self:addNode(previousId, {
+			id = ancestorId,
+			className = value.ClassName,
+			name = value.Name,
+			instance = if typeof(value) == "Instance" then value else nil,
+		})
+		previousId = ancestorId
+	end
+end
+
+local PatchTree = {}
+
+-- Builds a new tree from a patch and instanceMap
+-- uses changeListHeaders in node.changeList
+function PatchTree.build(patch, instanceMap, changeListHeaders)
+	local tree = Tree.new()
+
+	local knownAncestors = {}
+
+	for _, change in patch.updated do
+		local instance = instanceMap.fromIds[change.id]
+		if not instance then
+			continue
+		end
+
+		-- Gather ancestors from existing DOM
+		local ancestryIds = {}
+		local parentObject = instance.Parent
+		local parentId = instanceMap.fromInstances[parentObject]
+		local previousId = nil
+		while parentObject do
+			if knownAncestors[parentId] then
+				-- We've already added this ancestor
+				previousId = parentId
+				break
+			end
+
+			table.insert(ancestryIds, 1, parentId)
+			knownAncestors[parentId] = true
+			parentObject = parentObject.Parent
+			parentId = instanceMap.fromInstances[parentObject]
+		end
+
+		tree:buildAncestryNodes(previousId, ancestryIds, patch, instanceMap)
+
+		-- Gather detail text
+		local changeList, hint = nil, nil
+		if next(change.changedProperties) or change.changedName then
+			changeList = {}
+
+			local hintBuffer, i = {}, 0
+			local function addProp(prop: string, current: any?, incoming: any?, metadata: any?)
+				i += 1
+				hintBuffer[i] = prop
+				changeList[i] = { prop, current, incoming, metadata }
+			end
+
+			-- Gather the changes
+
+			if change.changedName then
+				addProp("Name", instance.Name, change.changedName)
+			end
+
+			for prop, incoming in change.changedProperties do
+				local incomingSuccess, incomingValue = decodeValue(incoming, instanceMap)
+				local currentSuccess, currentValue = getProperty(instance, prop)
+
+				addProp(
+					prop,
+					if currentSuccess then currentValue else "[Error]",
+					if incomingSuccess then incomingValue else next(incoming)
+				)
+			end
+
+			-- Finalize detail values
+
+			-- Trim hint to top 3
+			table.sort(hintBuffer)
+			if #hintBuffer > 3 then
+				hintBuffer = {
+					hintBuffer[1],
+					hintBuffer[2],
+					hintBuffer[3],
+					i - 3 .. " more",
+				}
+			end
+			hint = table.concat(hintBuffer, ", ")
+
+			-- Sort changes and add header
+			table.sort(changeList, function(a, b)
+				return a[1] < b[1]
+			end)
+			table.insert(changeList, 1, changeListHeaders)
+		end
+
+		-- Add this node to tree
+		tree:addNode(instanceMap.fromInstances[instance.Parent], {
+			id = change.id,
+			patchType = "Edit",
+			className = instance.ClassName,
+			name = instance.Name,
+			instance = instance,
+			hint = hint,
+			changeList = changeList,
+		})
+	end
+
+	for _, idOrInstance in patch.removed do
+		local instance = if Types.RbxId(idOrInstance) then instanceMap.fromIds[idOrInstance] else idOrInstance
+		if not instance then
+			-- If we're viewing a past patch, the instance is already removed
+			-- and we therefore cannot get the tree for it anymore
+			continue
+		end
+
+		-- Gather ancestors from existing DOM
+		-- (note that they may have no ID if they're being removed as unknown)
+		local ancestryIds = {}
+		local parentObject = instance.Parent
+		local parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
+		local previousId = nil
+		while parentObject do
+			if knownAncestors[parentId] then
+				-- We've already added this ancestor
+				previousId = parentId
+				break
+			end
+
+			instanceMap:insert(parentId, parentObject) -- This ensures we can find the parent later
+			table.insert(ancestryIds, 1, parentId)
+			knownAncestors[parentId] = true
+			parentObject = parentObject.Parent
+			parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
+		end
+
+		tree:buildAncestryNodes(previousId, ancestryIds, patch, instanceMap)
+
+		-- Add this node to tree
+		local nodeId = instanceMap.fromInstances[instance] or HttpService:GenerateGUID(false)
+		instanceMap:insert(nodeId, instance)
+		tree:addNode(instanceMap.fromInstances[instance.Parent], {
+			id = nodeId,
+			patchType = "Remove",
+			className = instance.ClassName,
+			name = instance.Name,
+			instance = instance,
+		})
+	end
+
+	for id, change in patch.added do
+		-- Gather ancestors from existing DOM or future additions
+		local ancestryIds = {}
+		local parentId = change.Parent
+		local parentData = patch.added[parentId]
+		local parentObject = instanceMap.fromIds[parentId]
+		local previousId = nil
+		while parentId do
+			if knownAncestors[parentId] then
+				-- We've already added this ancestor
+				previousId = parentId
+				break
+			end
+
+			table.insert(ancestryIds, 1, parentId)
+			knownAncestors[parentId] = true
+			parentId = nil
+
+			if parentData then
+				-- object is parented to an instance that does not exist yet
+				parentId = parentData.Parent
+				parentData = patch.added[parentId]
+				parentObject = instanceMap.fromIds[parentId]
+			elseif parentObject then
+				-- object is parented to an instance that exists
+				parentObject = parentObject.Parent
+				parentId = instanceMap.fromInstances[parentObject]
+				parentData = patch.added[parentId]
+			end
+		end
+
+		tree:buildAncestryNodes(previousId, ancestryIds, patch, instanceMap)
+
+		-- Gather detail text
+		local changeList, hint = nil, nil
+		if next(change.Properties) then
+			changeList = {}
+
+			local hintBuffer, i = {}, 0
+			for prop, incoming in change.Properties do
+				i += 1
+				hintBuffer[i] = prop
+
+				local success, incomingValue = decodeValue(incoming, instanceMap)
+				if success then
+					table.insert(changeList, { prop, "N/A", incomingValue })
+				else
+					table.insert(changeList, { prop, "N/A", next(incoming) })
+				end
+			end
+
+			-- Finalize detail values
+
+			-- Trim hint to top 3
+			table.sort(hintBuffer)
+			if #hintBuffer > 3 then
+				hintBuffer = {
+					hintBuffer[1],
+					hintBuffer[2],
+					hintBuffer[3],
+					i - 3 .. " more",
+				}
+			end
+			hint = table.concat(hintBuffer, ", ")
+
+			-- Sort changes and add header
+			table.sort(changeList, function(a, b)
+				return a[1] < b[1]
+			end)
+			table.insert(changeList, 1, changeListHeaders)
+		end
+
+		-- Add this node to tree
+		tree:addNode(change.Parent, {
+			id = change.Id,
+			patchType = "Add",
+			className = change.ClassName,
+			name = change.Name,
+			hint = hint,
+			changeList = changeList,
+			instance = instanceMap.fromIds[id],
+		})
+	end
+
+	return tree
+end
+
+-- Creates a deep copy of a tree for immutability purposes in Roact
+function PatchTree.clone(tree)
+	if not tree then
+		return
+	end
+
+	local newTree = Tree.new()
+	tree:forEach(function(node)
+		newTree:addNode(node.parentId, table.clone(node))
+	end)
+
+	return newTree
+end
+
+-- Updates the metadata of a tree with the unapplied patch and currently existing instances
+-- Builds a new tree from the data if one isn't provided
+-- Always returns a new tree for immutability purposes in Roact
+function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
+	if tree then
+		tree = PatchTree.clone(tree)
+	else
+		tree = PatchTree.build(patch, instanceMap)
+	end
+
+	-- Update isWarning metadata
+	for _, failedChange in unappliedPatch.updated do
+		local node = tree:getNode(failedChange.id)
+		if node then
+			node.isWarning = true
+			Log.trace("Marked node as warning: {} {}", node.id, node.name)
+
+			if node.changeList then
+				for _, change in node.changeList do
+					if failedChange.changedProperties[change[1]] then
+						Log.trace("  Marked property as warning: {}", change[1])
+						if change[4] == nil then
+							change[4] = {}
+						end
+						change[4].isWarning = true
+					end
+				end
+			end
+		end
+	end
+
+	-- Update if instances exist
+	tree:forEach(function(node)
+		if node.instance then
+			if node.instance.Parent == nil and node.instance ~= game then
+				-- This instance has been removed
+				Log.trace("Removed instance from node: {} {}", node.id, node.name)
+				node.instance = nil
+			end
+		else
+			-- This instance may have been added
+			node.instance = instanceMap.fromIds[node.id]
+			if node.instance then
+				Log.trace("Added instance to node: {} {}", node.id, node.name)
+			end
+		end
+	end)
+
+	return tree
+end
+
+return PatchTree

plugin/src/Reconciler/applyPatch.lua

@@ -5,6 +5,8 @@
 	Patches can come from the server or be generated by the client.
 ]]
 
+local ChangeHistoryService = game:GetService("ChangeHistoryService")
+
 local Packages = script.Parent.Parent.Parent.Packages
 local Log = require(Packages.Log)
 
@@ -17,6 +19,8 @@ local reify = require(script.Parent.reify)
 local setProperty = require(script.Parent.setProperty)
 
 local function applyPatch(instanceMap, patch)
+	local patchTimestamp = DateTime.now():FormatLocalTime("LTS", "en-us")
+
 	-- Tracks any portions of the patch that could not be applied to the DOM.
 	local unappliedPatch = PatchSet.newEmpty()
 
@@ -199,6 +203,8 @@ local function applyPatch(instanceMap, patch)
 		end
 	end
 
+	ChangeHistoryService:SetWaypoint("Rojo: Patch " .. patchTimestamp)
+
 	return unappliedPatch
 end
 

plugin/src/Reconciler/applyPatch.spec.lua

@@ -83,11 +83,11 @@ return function()
 			ClassName = "Model",
 			Name = "Child",
 			Parent = "ROOT",
-			Children = {"GRANDCHILD"},
+			Children = { "GRANDCHILD" },
 			Properties = {},
 		}
 
-		patch.added["GRANDCHILD"]  = {
+		patch.added["GRANDCHILD"] = {
 			Id = "GRANDCHILD",
 			ClassName = "Part",
 			Name = "Grandchild",
@@ -193,4 +193,4 @@ return function()
 		assert(newChild ~= nil, "expected child to be present")
 		assert(newChild == child, "expected child to be preserved")
 	end)
-end
+end

plugin/src/Reconciler/decodeValue.lua

@@ -30,10 +30,11 @@ local function decodeValue(encodedValue, instanceMap)
 	local ok, decodedValue = RbxDom.EncodedValue.decode(encodedValue)
 
 	if not ok then
-		return false, Error.new(Error.CannotDecodeValue, {
-			encodedValue = encodedValue,
-			innerError = decodedValue,
-		})
+		return false,
+			Error.new(Error.CannotDecodeValue, {
+				encodedValue = encodedValue,
+				innerError = decodedValue,
+			})
 	end
 
 	return true, decodedValue

plugin/src/Reconciler/diff.lua

@@ -37,7 +37,9 @@ local function trueEquals(a, b): boolean
 			end
 		end
 		for key, value in pairs(b) do
-			if checkedKeys[key] then continue end
+			if checkedKeys[key] then
+				continue
+			end
 			if not trueEquals(value, a[key]) then
 				return false
 			end
@@ -62,7 +64,7 @@ local function trueEquals(a, b): boolean
 
 	-- For CFrames, compare to components with epsilon of 0.0001 to avoid floating point inequality
 	elseif typeA == "CFrame" and typeB == "CFrame" then
-		local aComponents, bComponents = {a:GetComponents()}, {b:GetComponents()}
+		local aComponents, bComponents = { a:GetComponents() }, { b:GetComponents() }
 		for i, aComponent in aComponents do
 			if not fuzzyEq(aComponent, bComponents[i], 0.0001) then
 				return false
@@ -72,7 +74,7 @@ local function trueEquals(a, b): boolean
 
 	-- For Vector3s, compare to components with epsilon of 0.0001 to avoid floating point inequality
 	elseif typeA == "Vector3" and typeB == "Vector3" then
-		local aComponents, bComponents = {a.X, a.Y, a.Z}, {b.X, b.Y, b.Z}
+		local aComponents, bComponents = { a.X, a.Y, a.Z }, { b.X, b.Y, b.Z }
 		for i, aComponent in aComponents do
 			if not fuzzyEq(aComponent, bComponents[i], 0.0001) then
 				return false
@@ -82,14 +84,13 @@ local function trueEquals(a, b): boolean
 
 	-- For Vector2s, compare to components with epsilon of 0.0001 to avoid floating point inequality
 	elseif typeA == "Vector2" and typeB == "Vector2" then
-		local aComponents, bComponents = {a.X, a.Y}, {b.X, b.Y}
+		local aComponents, bComponents = { a.X, a.Y }, { b.X, b.Y }
 		for i, aComponent in aComponents do
 			if not fuzzyEq(aComponent, bComponents[i], 0.0001) then
 				return false
 			end
 		end
 		return true
-
 	end
 
 	return false
@@ -154,7 +155,13 @@ local function diff(instanceMap, virtualInstances, rootId)
 
 				if ok then
 					if not trueEquals(existingValue, decodedValue) then
-						Log.debug("{}.{} changed from '{}' to '{}'", instance:GetFullName(), propertyName, existingValue, decodedValue)
+						Log.debug(
+							"{}.{} changed from '{}' to '{}'",
+							instance:GetFullName(),
+							propertyName,
+							existingValue,
+							decodedValue
+						)
 						changedProperties[propertyName] = virtualValue
 					end
 				else

plugin/src/Reconciler/diff.spec.lua

@@ -264,7 +264,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Folder",
 				Properties = {},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {

plugin/src/Reconciler/getProperty.lua

@@ -14,17 +14,19 @@ local function getProperty(instance, propertyName)
 	-- A good example of a property like this is `Model.ModelInPrimary`, which
 	-- is serialized but not reflected to Lua.
 	if descriptor == nil then
-		return false, Error.new(Error.UnknownProperty, {
-			className = instance.ClassName,
-			propertyName = propertyName,
-		})
+		return false,
+			Error.new(Error.UnknownProperty, {
+				className = instance.ClassName,
+				propertyName = propertyName,
+			})
 	end
 
 	if descriptor.scriptability == "None" or descriptor.scriptability == "Write" then
-		return false, Error.new(Error.UnreadableProperty, {
-			className = instance.ClassName,
-			propertyName = propertyName,
-		})
+		return false,
+			Error.new(Error.UnreadableProperty, {
+				className = instance.ClassName,
+				propertyName = propertyName,
+			})
 	end
 
 	local success, valueOrErr = descriptor:read(instance)
@@ -35,23 +37,26 @@ local function getProperty(instance, propertyName)
 		-- If we don't have permission to read a property, we can chalk that up
 		-- to our database being out of date and the engine being right.
 		if err.kind == RbxDom.Error.Kind.Roblox and err.extra:find("lacking permission") then
-			return false, Error.new(Error.LackingPropertyPermissions, {
-				className = instance.ClassName,
-				propertyName = propertyName,
-			})
+			return false,
+				Error.new(Error.LackingPropertyPermissions, {
+					className = instance.ClassName,
+					propertyName = propertyName,
+				})
 		end
 
 		if err.kind == RbxDom.Error.Kind.Roblox and err.extra:find("is not a valid member of") then
-			return false, Error.new(Error.UnknownProperty, {
+			return false,
+				Error.new(Error.UnknownProperty, {
+					className = instance.ClassName,
+					propertyName = propertyName,
+				})
+		end
+
+		return false,
+			Error.new(Error.OtherPropertyError, {
 				className = instance.ClassName,
 				propertyName = propertyName,
 			})
-		end
-
-		return false, Error.new(Error.OtherPropertyError, {
-			className = instance.ClassName,
-			propertyName = propertyName,
-		})
 	end
 
 	return true, valueOrErr

plugin/src/Reconciler/hydrate.lua

@@ -47,4 +47,4 @@ local function hydrate(instanceMap, virtualInstances, rootId, rootInstance)
 	end
 end
 
-return hydrate
+return hydrate

plugin/src/Reconciler/hydrate.spec.lua

@@ -91,7 +91,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Root",
 				Properties = {},
-				Children = {"CHILD1", "CHILD2"},
+				Children = { "CHILD1", "CHILD2" },
 			},
 
 			CHILD1 = {
@@ -126,4 +126,4 @@ return function()
 		expect(knownInstances.fromIds["CHILD1"]).to.equal(child1)
 		expect(knownInstances.fromIds["CHILD2"]).to.equal(child2)
 	end)
-end
+end

plugin/src/Reconciler/init.lua

@@ -3,6 +3,9 @@
 	and mutating the Roblox DOM.
 ]]
 
+local Packages = script.Parent.Parent.Packages
+local Log = require(Packages.Log)
+
 local applyPatch = require(script.applyPatch)
 local hydrate = require(script.hydrate)
 local diff = require(script.diff)
@@ -14,13 +17,63 @@ function Reconciler.new(instanceMap)
 	local self = {
 		-- Tracks all of the instances known by the reconciler by ID.
 		__instanceMap = instanceMap,
+		__precommitCallbacks = {},
+		__postcommitCallbacks = {},
 	}
 
 	return setmetatable(self, Reconciler)
 end
 
+function Reconciler:hookPrecommit(callback: (patch: any, instanceMap: any) -> ()): () -> ()
+	table.insert(self.__precommitCallbacks, callback)
+	Log.trace("Added precommit callback: {}", callback)
+
+	return function()
+		-- Remove the callback from the list
+		for i, cb in self.__precommitCallbacks do
+			if cb == callback then
+				table.remove(self.__precommitCallbacks, i)
+				Log.trace("Removed precommit callback: {}", callback)
+				break
+			end
+		end
+	end
+end
+
+function Reconciler:hookPostcommit(callback: (patch: any, instanceMap: any, unappliedPatch: any) -> ()): () -> ()
+	table.insert(self.__postcommitCallbacks, callback)
+	Log.trace("Added postcommit callback: {}", callback)
+
+	return function()
+		-- Remove the callback from the list
+		for i, cb in self.__postcommitCallbacks do
+			if cb == callback then
+				table.remove(self.__postcommitCallbacks, i)
+				Log.trace("Removed postcommit callback: {}", callback)
+				break
+			end
+		end
+	end
+end
+
 function Reconciler:applyPatch(patch)
-	return applyPatch(self.__instanceMap, patch)
+	for _, callback in self.__precommitCallbacks do
+		local success, err = pcall(callback, patch, self.__instanceMap)
+		if not success then
+			Log.warn("Precommit hook errored: {}", err)
+		end
+	end
+
+	local unappliedPatch = applyPatch(self.__instanceMap, patch)
+
+	for _, callback in self.__postcommitCallbacks do
+		local success, err = pcall(callback, patch, self.__instanceMap, unappliedPatch)
+		if not success then
+			Log.warn("Postcommit hook errored: {}", err)
+		end
+	end
+
+	return unappliedPatch
 end
 
 function Reconciler:hydrate(virtualInstances, rootId, rootInstance)
@@ -31,4 +84,4 @@ function Reconciler:diff(virtualInstances, rootId)
 	return diff(self.__instanceMap, virtualInstances, rootId)
 end
 
-return Reconciler
+return Reconciler

plugin/src/Reconciler/reify.spec.lua

@@ -80,7 +80,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Parent",
 				Properties = {},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {
@@ -112,7 +112,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Parent",
 				Properties = {},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {
@@ -147,7 +147,7 @@ return function()
 				Properties = {
 					Value = {
 						Type = "Vector3",
-						Value = {1, 2, 3},
+						Value = { 1, 2, 3 },
 					},
 				},
 				Children = {},
@@ -182,7 +182,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Root",
 				Properties = {},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {
@@ -247,7 +247,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Root",
 				Properties = {},
-				Children = {"CHILD_A", "CHILD_B"},
+				Children = { "CHILD_A", "CHILD_B" },
 			},
 
 			CHILD_A = {
@@ -297,7 +297,7 @@ return function()
 						Ref = "CHILD",
 					},
 				},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {

plugin/src/Reconciler/setProperty.lua

@@ -21,26 +21,29 @@ local function setProperty(instance, propertyName, value)
 	end
 
 	if descriptor.scriptability == "None" or descriptor.scriptability == "Read" then
-		return false, Error.new(Error.UnwritableProperty, {
-			className = instance.ClassName,
-			propertyName = propertyName,
-		})
+		return false,
+			Error.new(Error.UnwritableProperty, {
+				className = instance.ClassName,
+				propertyName = propertyName,
+			})
 	end
 
 	local ok, err = descriptor:write(instance, value)
 
 	if not ok then
 		if err.kind == RbxDom.Error.Kind.Roblox and err.extra:find("lacking permission") then
-			return false, Error.new(Error.LackingPropertyPermissions, {
+			return false,
+				Error.new(Error.LackingPropertyPermissions, {
+					className = instance.ClassName,
+					propertyName = propertyName,
+				})
+		end
+
+		return false,
+			Error.new(Error.OtherPropertyError, {
 				className = instance.ClassName,
 				propertyName = propertyName,
 			})
-		end
-
-		return false, Error.new(Error.OtherPropertyError, {
-			className = instance.ClassName,
-			propertyName = propertyName,
-		})
 	end
 
 	return true

plugin/src/ServeSession.lua

@@ -77,15 +77,13 @@ function ServeSession.new(options)
 
 	local connections = {}
 
-	local connection = StudioService
-		:GetPropertyChangedSignal("ActiveScript")
-		:Connect(function()
-			local activeScript = StudioService.ActiveScript
+	local connection = StudioService:GetPropertyChangedSignal("ActiveScript"):Connect(function()
+		local activeScript = StudioService.ActiveScript
 
-			if activeScript ~= nil then
-				self:__onActiveScriptChanged(activeScript)
-			end
-		end)
+		if activeScript ~= nil then
+			self:__onActiveScriptChanged(activeScript)
+		end
+	end)
 	table.insert(connections, connection)
 
 	self = {
@@ -97,7 +95,6 @@ function ServeSession.new(options)
 		__instanceMap = instanceMap,
 		__changeBatcher = changeBatcher,
 		__statusChangedCallback = nil,
-		__patchAppliedCallback = nil,
 		__connections = connections,
 	}
 
@@ -129,23 +126,27 @@ function ServeSession:setConfirmCallback(callback)
 	self.__userConfirmCallback = callback
 end
 
-function ServeSession:onPatchApplied(callback)
-	self.__patchAppliedCallback = callback
+function ServeSession:hookPrecommit(callback)
+	return self.__reconciler:hookPrecommit(callback)
+end
+
+function ServeSession:hookPostcommit(callback)
+	return self.__reconciler:hookPostcommit(callback)
 end
 
 function ServeSession:start()
 	self:__setStatus(Status.Connecting)
 
-	self.__apiContext:connect()
+	self.__apiContext
+		:connect()
 		:andThen(function(serverInfo)
 			self:__applyGameAndPlaceId(serverInfo)
 
-			return self:__initialSync(serverInfo)
-				:andThen(function()
-					self:__setStatus(Status.Connected, serverInfo.projectName)
+			return self:__initialSync(serverInfo):andThen(function()
+				self:__setStatus(Status.Connected, serverInfo.projectName)
 
-					return self:__mainSyncLoop()
-				end)
+				return self:__mainSyncLoop()
+			end)
 		end)
 		:catch(function(err)
 			if self.__status ~= Status.Disconnected then
@@ -208,100 +209,127 @@ function ServeSession:__onActiveScriptChanged(activeScript)
 end
 
 function ServeSession:__initialSync(serverInfo)
-	return self.__apiContext:read({ serverInfo.rootInstanceId })
-		:andThen(function(readResponseBody)
-			-- Tell the API Context that we're up-to-date with the version of
-			-- the tree defined in this response.
-			self.__apiContext:setMessageCursor(readResponseBody.messageCursor)
+	return self.__apiContext:read({ serverInfo.rootInstanceId }):andThen(function(readResponseBody)
+		-- Tell the API Context that we're up-to-date with the version of
+		-- the tree defined in this response.
+		self.__apiContext:setMessageCursor(readResponseBody.messageCursor)
 
-			-- For any instances that line up with the Rojo server's view, start
-			-- tracking them in the reconciler.
-			Log.trace("Matching existing Roblox instances to Rojo IDs")
-			self.__reconciler:hydrate(readResponseBody.instances, serverInfo.rootInstanceId, game)
+		-- For any instances that line up with the Rojo server's view, start
+		-- tracking them in the reconciler.
+		Log.trace("Matching existing Roblox instances to Rojo IDs")
+		self.__reconciler:hydrate(readResponseBody.instances, serverInfo.rootInstanceId, game)
 
-			-- Calculate the initial patch to apply to the DataModel to catch us
-			-- up to what Rojo thinks the place should look like.
-			Log.trace("Computing changes that plugin needs to make to catch up to server...")
-			local success, catchUpPatch = self.__reconciler:diff(
-				readResponseBody.instances,
-				serverInfo.rootInstanceId,
-				game
-			)
+		-- Calculate the initial patch to apply to the DataModel to catch us
+		-- up to what Rojo thinks the place should look like.
+		Log.trace("Computing changes that plugin needs to make to catch up to server...")
+		local success, catchUpPatch =
+			self.__reconciler:diff(readResponseBody.instances, serverInfo.rootInstanceId, game)
 
-			if not success then
-				Log.error("Could not compute a diff to catch up to the Rojo server: {:#?}", catchUpPatch)
+		if not success then
+			Log.error("Could not compute a diff to catch up to the Rojo server: {:#?}", catchUpPatch)
+		end
+
+		for _, update in catchUpPatch.updated do
+			if update.id == self.__instanceMap.fromInstances[game] and update.changedClassName ~= nil then
+				-- Non-place projects will try to update the classname of game from DataModel to
+				-- something like Folder, ModuleScript, etc. This would fail, so we exit with a clear
+				-- message instead of crashing.
+				return Promise.reject(
+					"Cannot sync a model as a place."
+						.. "\nEnsure Rojo is serving a project file that has a DataModel at the root of its tree and try again."
+						.. "\nSee project file docs: https://rojo.space/docs/v7/project-format/"
+				)
+			end
+		end
+
+		Log.trace("Computed hydration patch: {:#?}", debugPatch(catchUpPatch))
+
+		local userDecision = "Accept"
+		if self.__userConfirmCallback ~= nil then
+			userDecision = self.__userConfirmCallback(self.__instanceMap, catchUpPatch, serverInfo)
+		end
+
+		if userDecision == "Abort" then
+			return Promise.reject("Aborted Rojo sync operation")
+		elseif userDecision == "Reject" and self.__twoWaySync then
+			-- The user wants their studio DOM to write back to their Rojo DOM
+			-- so we will reverse the patch and send it back
+
+			local inversePatch = PatchSet.newEmpty()
+
+			-- Send back the current properties
+			for _, change in catchUpPatch.updated do
+				local instance = self.__instanceMap.fromIds[change.id]
+				if not instance then
+					continue
+				end
+
+				local update = encodePatchUpdate(instance, change.id, change.changedProperties)
+				table.insert(inversePatch.updated, update)
+			end
+			-- Add the removed instances back to Rojo
+			-- selene:allow(empty_if, unused_variable)
+			for _, instance in catchUpPatch.removed do
+				-- TODO: Generate ID for our instance and add it to inversePatch.added
+			end
+			-- Remove the additions we've rejected
+			for id, _change in catchUpPatch.added do
+				table.insert(inversePatch.removed, id)
 			end
 
-			Log.trace("Computed hydration patch: {:#?}", debugPatch(catchUpPatch))
+			self.__apiContext:write(inversePatch)
+		elseif userDecision == "Accept" then
+			local unappliedPatch = self.__reconciler:applyPatch(catchUpPatch)
 
-			local userDecision = "Accept"
-			if self.__userConfirmCallback ~= nil then
-				userDecision = self.__userConfirmCallback(self.__instanceMap, catchUpPatch, serverInfo)
+			if not PatchSet.isEmpty(unappliedPatch) then
+				Log.warn(
+					"Could not apply all changes requested by the Rojo server:\n{}",
+					PatchSet.humanSummary(self.__instanceMap, unappliedPatch)
+				)
 			end
-
-			if userDecision == "Abort" then
-				return Promise.reject("Aborted Rojo sync operation")
-
-			elseif userDecision == "Reject" and self.__twoWaySync then
-				-- The user wants their studio DOM to write back to their Rojo DOM
-				-- so we will reverse the patch and send it back
-
-				local inversePatch = PatchSet.newEmpty()
-
-				-- Send back the current properties
-				for _, change in catchUpPatch.updated do
-					local instance = self.__instanceMap.fromIds[change.id]
-					if not instance then continue end
-
-					local update = encodePatchUpdate(instance, change.id, change.changedProperties)
-					table.insert(inversePatch.updated, update)
-				end
-				-- Add the removed instances back to Rojo
-				-- selene:allow(empty_if, unused_variable)
-				for _, instance in catchUpPatch.removed do
-					-- TODO: Generate ID for our instance and add it to inversePatch.added
-				end
-				-- Remove the additions we've rejected
-				for id, _change in catchUpPatch.added do
-					table.insert(inversePatch.removed, id)
-				end
-
-				self.__apiContext:write(inversePatch)
-
-			elseif userDecision == "Accept" then
-				local unappliedPatch = self.__reconciler:applyPatch(catchUpPatch)
-
-				if not PatchSet.isEmpty(unappliedPatch) then
-					Log.warn("Could not apply all changes requested by the Rojo server:\n{}",
-						PatchSet.humanSummary(self.__instanceMap, unappliedPatch))
-				end
-				if self.__patchAppliedCallback then
-					pcall(self.__patchAppliedCallback, catchUpPatch, unappliedPatch)
-				end
-			end
-		end)
+		end
+	end)
 end
 
 function ServeSession:__mainSyncLoop()
-	return self.__apiContext:retrieveMessages()
-		:andThen(function(messages)
-			for _, message in ipairs(messages) do
-				local unappliedPatch = self.__reconciler:applyPatch(message)
+	return Promise.new(function(resolve, reject)
+		while self.__status == Status.Connected do
+			local success, result = self.__apiContext
+				:retrieveMessages()
+				:andThen(function(messages)
+					if self.__status == Status.Disconnected then
+						-- In the time it took to retrieve messages, we disconnected
+						-- so we just resolve immediately without patching anything
+						return
+					end
 
-				if not PatchSet.isEmpty(unappliedPatch) then
-					Log.warn("Could not apply all changes requested by the Rojo server:\n{}",
-						PatchSet.humanSummary(self.__instanceMap, unappliedPatch))
-				end
+					Log.trace("Serve session {} retrieved {} messages", tostring(self), #messages)
 
-				if self.__patchAppliedCallback then
-					pcall(self.__patchAppliedCallback, message, unappliedPatch)
-				end
+					for _, message in messages do
+						local unappliedPatch = self.__reconciler:applyPatch(message)
+
+						if not PatchSet.isEmpty(unappliedPatch) then
+							Log.warn(
+								"Could not apply all changes requested by the Rojo server:\n{}",
+								PatchSet.humanSummary(self.__instanceMap, unappliedPatch)
+							)
+						end
+					end
+				end)
+				:await()
+
+			if self.__status == Status.Disconnected then
+				-- If we are no longer connected after applying, we stop silently
+				-- without checking for errors as they are no longer relevant
+				break
+			elseif success == false then
+				reject(result)
 			end
+		end
 
-			if self.__status ~= Status.Disconnected then
-				return self:__mainSyncLoop()
-			end
-		end)
+		-- We are no longer connected, so we resolve the promise
+		resolve()
+	end)
 end
 
 function ServeSession:__stopInternal(err)

plugin/src/Settings.lua

@@ -13,6 +13,9 @@ local defaultSettings = {
 	openScriptsExternally = false,
 	twoWaySync = false,
 	showNotifications = true,
+	syncReminder = true,
+	confirmationBehavior = "Initial",
+	largeChangesConfirmationThreshold = 5,
 	playSounds = true,
 	typecheckingEnabled = false,
 	logLevel = "Info",

plugin/src/Types.lua

@@ -56,11 +56,7 @@ local ApiSubscribeResponse = t.interface({
 })
 
 local ApiError = t.interface({
-	kind = t.union(
-		t.literal("NotFound"),
-		t.literal("BadRequest"),
-		t.literal("InternalError")
-	),
+	kind = t.union(t.literal("NotFound"), t.literal("BadRequest"), t.literal("InternalError")),
 	details = t.string,
 })
 

plugin/src/Version.lua

@@ -43,4 +43,4 @@ function Version.display(version)
 	return output
 end
 
-return Version
+return Version

plugin/src/Version.spec.lua

@@ -2,27 +2,27 @@ return function()
 	local Version = require(script.Parent.Version)
 
 	it("should compare equal versions", function()
-		expect(Version.compare({1, 2, 3}, {1, 2, 3})).to.equal(0)
-		expect(Version.compare({0, 4, 0}, {0, 4})).to.equal(0)
-		expect(Version.compare({0, 0, 123}, {0, 0, 123})).to.equal(0)
-		expect(Version.compare({26}, {26})).to.equal(0)
-		expect(Version.compare({26, 42}, {26, 42})).to.equal(0)
-		expect(Version.compare({1, 0, 0}, {1})).to.equal(0)
+		expect(Version.compare({ 1, 2, 3 }, { 1, 2, 3 })).to.equal(0)
+		expect(Version.compare({ 0, 4, 0 }, { 0, 4 })).to.equal(0)
+		expect(Version.compare({ 0, 0, 123 }, { 0, 0, 123 })).to.equal(0)
+		expect(Version.compare({ 26 }, { 26 })).to.equal(0)
+		expect(Version.compare({ 26, 42 }, { 26, 42 })).to.equal(0)
+		expect(Version.compare({ 1, 0, 0 }, { 1 })).to.equal(0)
 	end)
 
 	it("should compare newer, older versions", function()
-		expect(Version.compare({1}, {0})).to.equal(1)
-		expect(Version.compare({1, 1}, {1, 0})).to.equal(1)
+		expect(Version.compare({ 1 }, { 0 })).to.equal(1)
+		expect(Version.compare({ 1, 1 }, { 1, 0 })).to.equal(1)
 	end)
 
 	it("should compare different major versions", function()
-		expect(Version.compare({1, 3, 2}, {2, 2, 1})).to.equal(-1)
-		expect(Version.compare({1, 2}, {2, 1})).to.equal(-1)
-		expect(Version.compare({1}, {2})).to.equal(-1)
+		expect(Version.compare({ 1, 3, 2 }, { 2, 2, 1 })).to.equal(-1)
+		expect(Version.compare({ 1, 2 }, { 2, 1 })).to.equal(-1)
+		expect(Version.compare({ 1 }, { 2 })).to.equal(-1)
 	end)
 
 	it("should compare different minor versions", function()
-		expect(Version.compare({1, 2, 3}, {1, 3, 2})).to.equal(-1)
-		expect(Version.compare({50, 1}, {50, 2})).to.equal(-1)
+		expect(Version.compare({ 1, 2, 3 }, { 1, 3, 2 })).to.equal(-1)
+		expect(Version.compare({ 50, 1 }, { 50, 2 })).to.equal(-1)
 	end)
 end

plugin/src/createSignal.lua

@@ -50,4 +50,4 @@ local function createSignal()
 	}
 end
 
-return createSignal
+return createSignal

plugin/src/ignorePlaceIds.lua

@@ -0,0 +1,27 @@
+--[[
+    These are place ids that will not have metadata saved for them,
+    such as last sync address or time. This is because they are not unique
+    so storing metadata for them does not make sense as these ids are reused.
+--]]
+
+return {
+	["0"] = true, -- Local file
+	["95206881"] = true, -- Baseplate
+	["6560363541"] = true, -- Classic Baseplate
+	["95206192"] = true, -- Flat Terrain
+	["13165709401"] = true, -- Modern City
+	["520390648"] = true, -- Village
+	["203810088"] = true, -- Castle
+	["366130569"] = true, -- Suburban
+	["215383192"] = true, -- Racing
+	["264719325"] = true, -- Pirate Island
+	["203812057"] = true, -- Obby
+	["379736082"] = true, -- Starting Place
+	["301530843"] = true, -- Line Runner
+	["92721754"] = true, -- Capture The Flag
+	["301529772"] = true, -- Team/FFA Arena
+	["203885589"] = true, -- Combat
+	["10275826693"] = true, -- Concert
+	["5353920686"] = true, -- Move It Simulator
+	["6936227200"] = true, -- Mansion Of Wonder
+}

plugin/src/init.server.lua

@@ -17,7 +17,7 @@ Log.setLogLevelThunk(function()
 end)
 
 local app = Roact.createElement(App, {
-	plugin = plugin
+	plugin = plugin,
 })
 local tree = Roact.mount(app, game:GetService("CoreGui"), "Rojo UI")
 

plugin/src/invariant.lua

@@ -1,4 +1,3 @@
-
 local Packages = script.Parent.Parent.Packages
 local Fmt = require(Packages.Fmt)
 
@@ -17,10 +16,10 @@ else
 		message = Fmt.fmt(message, ...)
 
 		local fullMessage = string.format(
-			"Rojo detected an invariant violation within itself:\n" ..
-			"%s\n\n" ..
-			"This is a bug in Rojo. Please file an issue:\n" ..
-			"https://github.com/rojo-rbx/rojo/issues",
+			"Rojo detected an invariant violation within itself:\n"
+				.. "%s\n\n"
+				.. "This is a bug in Rojo. Please file an issue:\n"
+				.. "https://github.com/rojo-rbx/rojo/issues",
 			message
 		)
 

plugin/src/soundPlayer.lua

@@ -2,12 +2,10 @@
 local plugin = plugin or script:FindFirstAncestorWhichIsA("Plugin")
 local widget = nil
 if plugin then
-	widget = plugin:CreateDockWidgetPluginGui("Rojo_soundPlayer", DockWidgetPluginGuiInfo.new(
-		Enum.InitialDockState.Float,
-		false, true,
-		10, 10,
-		10, 10
-	))
+	widget = plugin:CreateDockWidgetPluginGui(
+		"Rojo_soundPlayer",
+		DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, false, true, 10, 10, 10, 10)
+	)
 	widget.Name = "Rojo_soundPlayer"
 	widget.Title = "Rojo Sound Player"
 end
@@ -22,7 +20,9 @@ function SoundPlayer.new(settings)
 end
 
 function SoundPlayer:play(soundId)
-	if self.settings and self.settings:get("playSounds") == false then return end
+	if self.settings and self.settings:get("playSounds") == false then
+		return
+	end
 
 	local sound = Instance.new("Sound")
 	sound.SoundId = soundId

plugin/src/strict.lua

@@ -21,4 +21,4 @@ return function(nameOrTarget, target)
 	else
 		return strictInner("<unnamed table>", target)
 	end
-end
+end