diff --git a/web-common/src/components/editor/YAMLEditor.spec.ts b/web-common/src/components/editor/YAMLEditor.spec.ts
index 4f79688d15e..ca203002147 100644
--- a/web-common/src/components/editor/YAMLEditor.spec.ts
+++ b/web-common/src/components/editor/YAMLEditor.spec.ts
@@ -38,7 +38,7 @@ describe("YAMLEditor.svelte", () => {
     expect(getLines(container)).toHaveLength(1);
 
     const onUpdate = vi.fn();
-    component?.$on("update", onUpdate);
+    component?.$on("save", onUpdate);
 
     const content = "foo: 10\nbar: 20\nfoo: 10\nbar: 20";
 
diff --git a/web-common/src/components/editor/__stories__/YAMLEditor.stories.svelte b/web-common/src/components/editor/__stories__/YAMLEditor.stories.svelte
index 648890685f0..ee7baec93ae 100644
--- a/web-common/src/components/editor/__stories__/YAMLEditor.stories.svelte
+++ b/web-common/src/components/editor/__stories__/YAMLEditor.stories.svelte
@@ -2,9 +2,9 @@
   import type { EditorView } from "@codemirror/view";
   import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
   import Button from "../../button/Button.svelte";
+  import YAMLEditor from "../YAMLEditor.svelte";
   import { setLineStatuses } from "../line-status";
   import type { LineStatus } from "../line-status/state";
-  import YAMLEditor from "../YAMLEditor.svelte";
 
   let content = `name: this is the name
 values:
@@ -52,7 +52,7 @@ values:
       key="key"
       {content}
       bind:view
-      on:update={(event) => {
+      on:save={(event) => {
         // Often, you want to debounce the update to parent content.
         // Here, we have no such requirement.
         content = event.detail;
diff --git a/web-common/src/components/editor/dispatch-events/index.ts b/web-common/src/components/editor/dispatch-events/index.ts
index 97b1d81170b..029587accfd 100644
--- a/web-common/src/components/editor/dispatch-events/index.ts
+++ b/web-common/src/components/editor/dispatch-events/index.ts
@@ -21,7 +21,7 @@ export function bindEditorEventsToDispatcher(
        * The viewUpdate can be used to look at transactions at the parent component level.
        */
       if (whenFocused && !viewUpdate.view.hasFocus) return;
-      dispatch("update", {
+      dispatch("save", {
         content: viewUpdate.view.state.doc.toString(),
         viewUpdate,
       } as UpdateDetails);
diff --git a/web-common/src/features/charts/editor/ChartsEditor.svelte b/web-common/src/features/charts/editor/ChartsEditor.svelte
index 67bdb3c3751..767e468c49c 100644
--- a/web-common/src/features/charts/editor/ChartsEditor.svelte
+++ b/web-common/src/features/charts/editor/ChartsEditor.svelte
@@ -59,6 +59,6 @@
     content={yaml}
     extensions={[customYAMLwithJSONandSQL]}
     key={filePath}
-    on:update={(e) => debounceUpdateChartContent(e.detail.content)}
+    on:save={(e) => debounceUpdateChartContent(e.detail.content)}
   />
 </ChartsEditorContainer>
diff --git a/web-common/src/features/custom-dashboards/CustomDashboardEditor.svelte b/web-common/src/features/custom-dashboards/CustomDashboardEditor.svelte
index 7e96d427f7d..c4cc4003851 100644
--- a/web-common/src/features/custom-dashboards/CustomDashboardEditor.svelte
+++ b/web-common/src/features/custom-dashboards/CustomDashboardEditor.svelte
@@ -2,9 +2,9 @@
   import type { EditorView } from "@codemirror/view";
   import YAMLEditor from "@rilldata/web-common/components/editor/YAMLEditor.svelte";
   import { debounce } from "@rilldata/web-common/lib/create-debouncer";
+  import { V1ParseError } from "@rilldata/web-common/runtime-client";
   import { createEventDispatcher } from "svelte";
   import ChartsEditorContainer from "../charts/editor/ChartsEditorContainer.svelte";
-  import { V1ParseError } from "@rilldata/web-common/runtime-client";
 
   const dispatch = createEventDispatcher();
 
@@ -30,6 +30,6 @@
     content={yaml}
     key={filePath}
     whenFocused
-    on:update={(e) => debounceUpdateChartContent(e.detail.content)}
+    on:save={(e) => debounceUpdateChartContent(e.detail.content)}
   />
 </ChartsEditorContainer>
diff --git a/web-common/src/features/editor/Editor.svelte b/web-common/src/features/editor/Editor.svelte
index a3c4f45ed6e..99f5ba60e9c 100644
--- a/web-common/src/features/editor/Editor.svelte
+++ b/web-common/src/features/editor/Editor.svelte
@@ -2,20 +2,32 @@
   import type { Extension } from "@codemirror/state";
   import { EditorState } from "@codemirror/state";
   import { EditorView } from "@codemirror/view";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import Label from "@rilldata/web-common/components/forms/Label.svelte";
+  import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
+  import Check from "@rilldata/web-common/components/icons/Check.svelte";
+  import UndoIcon from "@rilldata/web-common/components/icons/UndoIcon.svelte";
   import { createEventDispatcher, onMount } from "svelte";
   import { bindEditorEventsToDispatcher } from "../../components/editor/dispatch-events";
   import { base } from "../../components/editor/presets/base";
+  import { debounce } from "../../lib/create-debouncer";
+  import { FILE_SAVE_DEBOUNCE_TIME } from "./config";
 
   const dispatch = createEventDispatcher();
 
   export let blob: string;
   export let latest: string;
   export let extensions: Extension[] = [];
+  export let autoSave: boolean;
+  export let disableAutoSave: boolean;
+  export let hasUnsavedChanges: boolean;
 
   let editor: EditorView;
   let container: HTMLElement;
 
   $: latest = blob;
+  $: updateEditorContents(latest);
+  $: if (editor) updateEditorExtensions(extensions);
 
   onMount(() => {
     editor = new EditorView({
@@ -34,6 +46,30 @@
     });
   });
 
+  function updateEditorExtensions(newExtensions: Extension[]) {
+    editor.setState(
+      EditorState.create({
+        doc: blob,
+        extensions: [
+          // establish a basic editor
+          base(),
+          // any extensions passed as props
+          ...newExtensions,
+          EditorView.updateListener.of((v) => {
+            if (v.focusChanged && v.view.hasFocus) {
+              dispatch("receive-focus");
+            }
+            if (v.docChanged) {
+              latest = v.state.doc.toString();
+
+              if (!disableAutoSave && autoSave) debounceSave();
+            }
+          }),
+        ],
+      }),
+    );
+  }
+
   function updateEditorContents(newContent: string) {
     if (editor && !editor.hasFocus) {
       // NOTE: when changing files, we still want to update the editor
@@ -50,26 +86,82 @@
     }
   }
 
-  function updateEditorExtensions(newExtensions: Extension[]) {
-    editor.setState(
-      EditorState.create({
-        doc: blob,
-        extensions: [
-          // any extensions passed as props
-          ...newExtensions,
-          // establish a basic editor
-          base(),
-          // this will catch certain events and dispatch them to the parent
-          bindEditorEventsToDispatcher(dispatch),
-        ],
-      }),
-    );
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      save();
+    }
   }
 
-  // reactive statements to dynamically update the editor when inputs change
-  $: updateEditorContents(latest);
+  function save() {
+    dispatch("save");
+  }
 
-  $: if (editor) updateEditorExtensions(extensions);
+  const debounceSave = debounce(save, FILE_SAVE_DEBOUNCE_TIME);
+
+  function revertContent() {
+    dispatch("revert");
+  }
 </script>
 
-<div bind:this={container} class="contents" />
+<svelte:window on:keydown={handleKeydown} />
+
+<section>
+  <div class="editor-container">
+    <div
+      bind:this={container}
+      class="size-full"
+      on:click={() => {
+        /** give the editor focus no matter where we click */
+        if (!editor.hasFocus) editor.focus();
+      }}
+      on:keydown={() => {
+        /** no op for now */
+      }}
+      role="textbox"
+      tabindex="0"
+    />
+  </div>
+
+  <footer>
+    <div class="flex gap-x-3">
+      {#if !autoSave || disableAutoSave}
+        <Button disabled={!hasUnsavedChanges} on:click={save}>
+          <Check size="14px" />
+          Save
+        </Button>
+
+        <Button
+          type="text"
+          disabled={!hasUnsavedChanges}
+          on:click={revertContent}
+        >
+          <UndoIcon size="14px" />
+          Revert changes
+        </Button>
+      {/if}
+    </div>
+    <div
+      class="flex gap-x-1 items-center h-full bg-white rounded-full"
+      class:hidden={disableAutoSave}
+    >
+      <Switch bind:checked={autoSave} id="auto-save" small />
+      <Label class="font-normal text-xs" for="auto-save">Auto-save</Label>
+    </div>
+  </footer>
+</section>
+
+<style lang="postcss">
+  .editor-container {
+    @apply size-full overflow-auto p-2 pb-0 flex flex-col;
+  }
+
+  footer {
+    @apply justify-between items-center flex flex-none;
+    @apply h-10 p-2 w-full rounded-b-sm border-t bg-white;
+  }
+
+  section {
+    @apply size-full flex-col rounded-sm bg-white flex overflow-hidden relative;
+  }
+</style>
diff --git a/web-common/src/features/editor/FileWorkspaceHeader.svelte b/web-common/src/features/editor/FileWorkspaceHeader.svelte
index d5444338f71..6313b229d85 100644
--- a/web-common/src/features/editor/FileWorkspaceHeader.svelte
+++ b/web-common/src/features/editor/FileWorkspaceHeader.svelte
@@ -8,6 +8,7 @@
   import { PROTECTED_FILES } from "../file-explorer/protected-paths";
 
   export let filePath: string;
+  export let hasUnsavedChanges: boolean;
 
   let fileName: string;
   let folder: string;
@@ -39,6 +40,7 @@
 <WorkspaceHeader
   editable={!isProtectedFile}
   on:change={onChangeCallback}
+  {hasUnsavedChanges}
   showInspectorToggle={false}
   titleInput={fileName}
 />
diff --git a/web-common/src/features/editor/config.ts b/web-common/src/features/editor/config.ts
new file mode 100644
index 00000000000..506588c4d44
--- /dev/null
+++ b/web-common/src/features/editor/config.ts
@@ -0,0 +1,3 @@
+export const FILES_WITHOUT_AUTOSAVE = ["/rill.yaml", "/.env"];
+
+export const FILE_SAVE_DEBOUNCE_TIME = 400;
diff --git a/web-common/src/features/editor/getExtensionsForFile.ts b/web-common/src/features/editor/getExtensionsForFile.ts
index 718fcd5a3b0..aa794babd6c 100644
--- a/web-common/src/features/editor/getExtensionsForFile.ts
+++ b/web-common/src/features/editor/getExtensionsForFile.ts
@@ -1,5 +1,5 @@
-import { yaml } from "@rilldata/web-common/components/editor/presets/yaml";
 import { markdown } from "@codemirror/lang-markdown";
+import { yaml } from "@rilldata/web-common/components/editor/presets/yaml";
 import { extractFileExtension } from "@rilldata/web-common/features/sources/extract-file-name";
 
 export const FileExtensionToEditorExtension = {
@@ -8,7 +8,7 @@ export const FileExtensionToEditorExtension = {
   ".md": [markdown()],
 };
 
-export function getExtensionsForFiles(filePath: string) {
+export function getExtensionsForFile(filePath: string) {
   const extension = extractFileExtension(filePath);
   return FileExtensionToEditorExtension[extension] ?? [];
 }
diff --git a/web-common/src/features/generic-yaml-editor/YamlWorkspaceBody.svelte b/web-common/src/features/generic-yaml-editor/YamlWorkspaceBody.svelte
index d94631b8850..adfcbb2103b 100644
--- a/web-common/src/features/generic-yaml-editor/YamlWorkspaceBody.svelte
+++ b/web-common/src/features/generic-yaml-editor/YamlWorkspaceBody.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { EditorView } from "@codemirror/view";
+  import { debounce } from "@rilldata/web-common/lib/create-debouncer";
   import { parse } from "yaml";
   import YAMLEditor from "../../components/editor/YAMLEditor.svelte";
   import {
@@ -8,7 +9,6 @@
   } from "../../runtime-client";
   import { runtime } from "../../runtime-client/runtime-store";
   import ErrorPane from "./ErrorPane.svelte";
-  import { debounce } from "@rilldata/web-common/lib/create-debouncer";
 
   export let filePath: string;
 
@@ -70,7 +70,7 @@
         bind:view
         {content}
         key={filePath}
-        on:update={debouncedUpdate}
+        on:save={debouncedUpdate}
         whenFocused
       />
     </div>
diff --git a/web-common/src/features/metrics-views/workspace/editor/MetricsEditor.svelte b/web-common/src/features/metrics-views/workspace/editor/MetricsEditor.svelte
index 7f185e614af..411b7085cd4 100644
--- a/web-common/src/features/metrics-views/workspace/editor/MetricsEditor.svelte
+++ b/web-common/src/features/metrics-views/workspace/editor/MetricsEditor.svelte
@@ -46,6 +46,6 @@
     content={yaml}
     extensions={[placeholderElements.extension, yamlSchema(metricsJsonSchema)]}
     whenFocused
-    on:update={updateMetrics}
+    on:save={updateMetrics}
   />
 </MetricsEditorContainer>
diff --git a/web-common/src/features/models/workspace/Editor.svelte b/web-common/src/features/models/workspace/ModelEditor.svelte
similarity index 99%
rename from web-common/src/features/models/workspace/Editor.svelte
rename to web-common/src/features/models/workspace/ModelEditor.svelte
index 405d0688f38..9e453f4fe1e 100644
--- a/web-common/src/features/models/workspace/Editor.svelte
+++ b/web-common/src/features/models/workspace/ModelEditor.svelte
@@ -47,18 +47,18 @@
     lineNumbers,
     rectangularSelection,
   } from "@codemirror/view";
-  import { createEventDispatcher, onMount } from "svelte";
-  import { DuckDBSQL } from "../../../components/editor/presets/duckDBDialect";
-  import { editorTheme } from "../../../components/editor/theme";
-  import { runtime } from "../../../runtime-client/runtime-store";
-  import { useAllSourceColumns } from "../../sources/selectors";
-  import { useAllModelColumns } from "../selectors";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import Label from "@rilldata/web-common/components/forms/Label.svelte";
   import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
   import Check from "@rilldata/web-common/components/icons/Check.svelte";
   import UndoIcon from "@rilldata/web-common/components/icons/UndoIcon.svelte";
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import { createEventDispatcher, onMount } from "svelte";
+  import { DuckDBSQL } from "../../../components/editor/presets/duckDBDialect";
+  import { editorTheme } from "../../../components/editor/theme";
+  import { runtime } from "../../../runtime-client/runtime-store";
+  import { useAllSourceColumns } from "../../sources/selectors";
+  import { useAllModelColumns } from "../selectors";
 
   const dispatch = createEventDispatcher();
   const schema: { [table: string]: string[] } = {};
@@ -66,7 +66,6 @@
   export let blob: string;
   export let latest: string;
   export let selections: SelectionRange[] = [];
-  export let focusOnMount = false;
   export let autoSave = true;
   export let hasUnsavedChanges: boolean;
 
@@ -230,7 +229,6 @@
       }),
       parent: editorContainerComponent,
     });
-    if (focusOnMount) editor.focus();
   });
 
   // REACTIVE FUNCTIONS
diff --git a/web-common/src/features/sources/editor/SourceEditor.svelte b/web-common/src/features/sources/editor/SourceEditor.svelte
index eb78f1dcfea..4e3536633cb 100644
--- a/web-common/src/features/sources/editor/SourceEditor.svelte
+++ b/web-common/src/features/sources/editor/SourceEditor.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import type { EditorView } from "@codemirror/view";
   import YAMLEditor from "@rilldata/web-common/components/editor/YAMLEditor.svelte";
+  import type { V1ParseError } from "@rilldata/web-common/runtime-client";
+  import { createEventDispatcher } from "svelte";
   import { setLineStatuses } from "../../../components/editor/line-status";
   import { mapParseErrorsToLines } from "../../metrics-views/errors";
-  import { createEventDispatcher } from "svelte";
-  import type { EditorView } from "@codemirror/view";
-  import type { V1ParseError } from "@rilldata/web-common/runtime-client";
 
   const dispatch = createEventDispatcher();
 
@@ -46,7 +46,7 @@
     <YAMLEditor
       content={latest}
       bind:view
-      on:update={handleUpdate}
+      on:save={handleUpdate}
       key={filePath}
     />
   </div>
diff --git a/web-common/src/layout/workspace/workspace-stores.ts b/web-common/src/layout/workspace/workspace-stores.ts
index 74754c4452b..90b9bb50bfd 100644
--- a/web-common/src/layout/workspace/workspace-stores.ts
+++ b/web-common/src/layout/workspace/workspace-stores.ts
@@ -1,10 +1,9 @@
-import { writable } from "svelte/store";
+import { debounce } from "@rilldata/web-common/lib/create-debouncer";
+import { derived, writable } from "svelte/store";
 import {
   DEFAULT_INSPECTOR_WIDTH,
   DEFAULT_PREVIEW_TABLE_HEIGHT,
 } from "../config";
-import { derived } from "svelte/store";
-import { debounce } from "@rilldata/web-common/lib/create-debouncer";
 
 type WorkspaceLayout = {
   inspector: {
diff --git a/web-local/src/routes/(application)/[type=workspace]/[name]/+page.svelte b/web-local/src/routes/(application)/[type=workspace]/[name]/+page.svelte
index 7445b10d173..c955cefef91 100644
--- a/web-local/src/routes/(application)/[type=workspace]/[name]/+page.svelte
+++ b/web-local/src/routes/(application)/[type=workspace]/[name]/+page.svelte
@@ -17,7 +17,7 @@
   import { handleEntityRename } from "@rilldata/web-common/features/entity-management/ui-actions";
   import { featureFlags } from "@rilldata/web-common/features/feature-flags";
   import type { QueryHighlightState } from "@rilldata/web-common/features/models/query-highlight-store";
-  import Editor from "@rilldata/web-common/features/models/workspace/Editor.svelte";
+  import ModelEditor from "@rilldata/web-common/features/models/workspace/ModelEditor.svelte";
   import ModelWorkspaceCtAs from "@rilldata/web-common/features/models/workspace/ModelWorkspaceCTAs.svelte";
   import { createModelFromSource } from "@rilldata/web-common/features/sources/createModel";
   import SourceEditor from "@rilldata/web-common/features/sources/editor/SourceEditor.svelte";
@@ -96,7 +96,6 @@
   const { readOnly } = featureFlags;
 
   let interceptedUrl: string | null = null;
-  let focusOnMount = false;
   let fileNotFound = false;
 
   onMount(async () => {
@@ -339,10 +338,9 @@
               on:save={debounceSave}
             />
           {:else}
-            <Editor
+            <ModelEditor
               {blob}
               {selections}
-              {focusOnMount}
               {hasUnsavedChanges}
               bind:latest
               bind:autoSave={$autoSave}
diff --git a/web-local/src/routes/(application)/files/[...file]/+page.svelte b/web-local/src/routes/(application)/files/[...file]/+page.svelte
index 379d6d812be..4030d8e9d00 100644
--- a/web-local/src/routes/(application)/files/[...file]/+page.svelte
+++ b/web-local/src/routes/(application)/files/[...file]/+page.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
-  import { afterNavigate } from "$app/navigation";
+  import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
   import { page } from "$app/stores";
   import WorkspaceError from "@rilldata/web-common/components/WorkspaceError.svelte";
   import Editor from "@rilldata/web-common/features/editor/Editor.svelte";
   import FileWorkspaceHeader from "@rilldata/web-common/features/editor/FileWorkspaceHeader.svelte";
-  import { getExtensionsForFiles } from "@rilldata/web-common/features/editor/getExtensionsForFile";
+  import { FILES_WITHOUT_AUTOSAVE } from "@rilldata/web-common/features/editor/config";
+  import { getExtensionsForFile } from "@rilldata/web-common/features/editor/getExtensionsForFile";
   import { addLeadingSlash } from "@rilldata/web-common/features/entity-management/entity-mappers";
   import { fileArtifacts } from "@rilldata/web-common/features/entity-management/file-artifacts";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { directoryState } from "@rilldata/web-common/features/file-explorer/directory-store";
+  import UnsavedSourceDialog from "@rilldata/web-common/features/sources/editor/UnsavedSourceDialog.svelte";
   import { extractFileExtension } from "@rilldata/web-common/features/sources/extract-file-name";
   import WorkspaceContainer from "@rilldata/web-common/layout/workspace/WorkspaceContainer.svelte";
-  import { debounce } from "@rilldata/web-common/lib/create-debouncer";
+  import WorkspaceEditorContainer from "@rilldata/web-common/layout/workspace/WorkspaceEditorContainer.svelte";
+  import { workspaces } from "@rilldata/web-common/layout/workspace/workspace-stores";
   import {
     createRuntimeServiceGetFile,
     createRuntimeServicePutFile,
@@ -24,7 +27,10 @@
   import DashboardPage from "../../dashboard/[name]/edit/+page.svelte";
 
   const UNSUPPORTED_EXTENSIONS = [".parquet", ".db", ".db.wal"];
-  const FILE_SAVE_DEBOUNCE_TIME = 400;
+
+  let interceptedUrl: string | null = null;
+
+  const putFile = createRuntimeServicePutFile(); // TODO: optimistically update the Get File cache
 
   $: filePath = addLeadingSlash($page.params.file);
   $: fileExtension = extractFileExtension(filePath);
@@ -53,9 +59,6 @@
   $: isOther =
     !isSource && !isModel && !isDashboard && !isChart && !isCustomDashboard;
 
-  // TODO: optimistically update the get file cache
-  const putFile = createRuntimeServicePutFile();
-
   onMount(() => {
     expandDirectory(filePath);
 
@@ -68,29 +71,60 @@
     // TODO: Focus on the code editor
   });
 
-  const debounceSave = debounce(save, FILE_SAVE_DEBOUNCE_TIME);
+  beforeNavigate((e) => {
+    if (!hasUnsavedChanges || interceptedUrl) return;
+
+    e.cancel();
+
+    if (e.to) interceptedUrl = e.to.url.href;
+  });
+
   let blob = "";
   $: blob = $fileQuery.data?.blob ?? blob;
 
   $: latest = blob;
+  $: hasUnsavedChanges = latest !== blob;
+
+  $: pathname = $page.url.pathname;
+  $: workspace = workspaces.get(pathname);
+  $: autoSave = workspace.editor.autoSave;
+  $: disableAutoSave = FILES_WITHOUT_AUTOSAVE.includes(filePath);
+
+  async function save() {
+    if (!hasUnsavedChanges) return;
 
-  function save(content: string) {
-    if ($fileQuery.data?.blob === content) return;
-    return $putFile.mutateAsync({
+    await $putFile.mutateAsync({
       instanceId: $runtime.instanceId,
       data: {
         path: filePath,
-        blob: content,
+        blob: latest,
       },
     });
   }
 
+  function revert() {
+    latest = blob;
+  }
+
   // TODO: move this logic into the DirectoryState
   // TODO: expand all directories in the path, not just the last one
   function expandDirectory(filePath: string) {
     const directory = filePath.split("/").slice(0, -1).join("/");
     directoryState.expand(directory);
   }
+
+  function handleConfirm() {
+    if (!interceptedUrl) return;
+    const url = interceptedUrl;
+    latest = blob;
+    hasUnsavedChanges = false;
+    interceptedUrl = null;
+    goto(url).catch(console.error);
+  }
+
+  function handleCancel() {
+    interceptedUrl = null;
+  }
 </script>
 
 {#if fileTypeUnsupported}
@@ -109,18 +143,35 @@
   <CustomDashboardPage data={{ fileArtifact }} />
 {:else if isOther}
   <WorkspaceContainer inspector={false}>
-    <FileWorkspaceHeader filePath={$page.params.file} slot="header" />
-    <div class="editor-pane size-full" slot="body">
-      <div class="editor flex flex-col h-full">
-        <div class="grow flex bg-white overflow-y-auto">
-          <Editor
-            {blob}
-            bind:latest
-            extensions={getExtensionsForFiles(filePath)}
-            on:update={({ detail: { content } }) => debounceSave(content)}
-          />
-        </div>
-      </div>
+    <FileWorkspaceHeader
+      filePath={$page.params.file}
+      {hasUnsavedChanges}
+      slot="header"
+    />
+    <div
+      slot="body"
+      class="editor-pane size-full overflow-hidden flex flex-col"
+    >
+      <WorkspaceEditorContainer>
+        <Editor
+          {blob}
+          {hasUnsavedChanges}
+          extensions={getExtensionsForFile(filePath)}
+          {disableAutoSave}
+          bind:latest
+          bind:autoSave={$autoSave}
+          on:save={save}
+          on:revert={revert}
+        />
+      </WorkspaceEditorContainer>
     </div>
   </WorkspaceContainer>
 {/if}
+
+{#if interceptedUrl}
+  <UnsavedSourceDialog
+    context="file"
+    on:confirm={handleConfirm}
+    on:cancel={handleCancel}
+  />
+{/if}