diff --git a/src/editor/EditorCommandHandlers.js b/src/editor/EditorCommandHandlers.js
index df76575eb6..7a8aa3669d 100644
--- a/src/editor/EditorCommandHandlers.js
+++ b/src/editor/EditorCommandHandlers.js
@@ -33,6 +33,7 @@ define(function (require, exports, module) {
         Editor = require("editor/Editor").Editor,
         CommandManager = require("command/CommandManager"),
         EditorManager = require("editor/EditorManager"),
+        WorkspaceManager = require("view/WorkspaceManager"),
         StringUtils = require("utils/StringUtils"),
         TokenUtils = require("utils/TokenUtils"),
         CodeMirror = require("thirdparty/CodeMirror/lib/codemirror"),
@@ -1185,6 +1186,16 @@ define(function (require, exports, module) {
         var editor = EditorManager.getFocusedEditor();
         var result = new $.Deferred();
 
+        // In design mode the active document often lives behind an external
+        // surface that owns DOM focus (e.g. the markdown viewer iframe in
+        // edit mode), so getFocusedEditor() returns null even though there
+        // is an underlying Phoenix editor whose doc captures the changes.
+        // Fall back to the active-pane full editor so toolbar undo/redo
+        // still drives the document's history in that state.
+        if (!editor && WorkspaceManager.isInDesignMode()) {
+            editor = EditorManager.getCurrentFullEditor();
+        }
+
         if (editor) {
             editor[operation]();
             result.resolve();
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
index dedef328dd..e83743ea01 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/main.js
+++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -369,8 +369,10 @@ define(function (require, exports, module) {
     function _initializeMode() {
         const currentMode = LiveDevelopment.getCurrentMode();
 
-        // when in preview mode, we need to give the play button a selected state
-        if (currentMode === LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE) {
+        // Pencil button lights up only when edit mode is active; preview /
+        // highlight modes leave it un-tinted. Click toggles between edit
+        // and preview.
+        if (currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE) {
             $previewBtn.addClass('selected');
         } else {
             $previewBtn.removeClass('selected');
@@ -744,19 +746,29 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Handle preview button click - toggles between preview mode and the user's default mode.
-     * PRO users toggle between preview and edit mode.
-     * community users toggle between preview and highlight mode.
+     * Toggles between edit mode and preview mode. The pencil button lights up
+     * (via .selected applied in _initializeMode) when edit mode is active;
+     * clicking it when already in edit drops back to preview. Clicking when
+     * NOT in edit tries to enter edit through LiveDevelopment.setMode, which
+     * returns false for users without the live-edit entitlement — in that
+     * case we show the same pro upsell dialog the mode dropdown uses,
+     * mirroring its "Edit Mode" item. _initializeMode reconciles the
+     * .selected class against the actual current mode after the pref
+     * change lands.
      */
     function _handlePreviewBtnClick() {
-        if($previewBtn.hasClass('selected')) {
-            $previewBtn.removeClass('selected');
-            const defaultMode = isProEditUser ? 'edit' : 'highlight';
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, defaultMode);
-        } else {
-            // Currently NOT in preview mode - switch to preview
-            $previewBtn.addClass('selected');
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview");
+        const currentMode = LiveDevelopment.getCurrentMode();
+        if (currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE) {
+            LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE);
+            return;
+        }
+        if (!LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE)) {
+            if (KernalModeTrust.ProDialogs) {
+                KernalModeTrust.ProDialogs.showProUpsellDialog(
+                    KernalModeTrust.ProDialogs.UPSELL_TYPE_LIVE_EDIT);
+            } else {
+                Metrics.countEvent(Metrics.EVENT_TYPE.PRO, "proUpsellDlg", "fail");
+            }
         }
     }
 
@@ -765,7 +777,7 @@ define(function (require, exports, module) {
             Strings: Strings,
             livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
             clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
-            clickToPreview: Strings.LIVE_PREVIEW_MODE_TOGGLE_PREVIEW,
+            clickToToggleEdit: Strings.LIVE_PREVIEW_MODE_TOGGLE_EDIT,
             switchToDesignMode: Strings.CCB_SWITCH_TO_DESIGN_MODE,
             livePreviewSettings: Strings.LIVE_DEV_SETTINGS,
             livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES,
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/panel.html b/src/extensionsIntegrated/Phoenix-live-preview/panel.html
index d5fd35a6fe..d62408e8f7 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/panel.html
+++ b/src/extensionsIntegrated/Phoenix-live-preview/panel.html
@@ -7,8 +7,8 @@
 	        <button id="designModeToggleLivePreviewButton" title="{{switchToDesignMode}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-expand"></i>
 	        </button>
-	        <button id="previewModeLivePreviewButton" title="{{clickToPreview}}" class="btn-alt-quiet toolbar-button">
-	            <i class="fa-solid fa-play"></i>
+	        <button id="previewModeLivePreviewButton" title="{{clickToToggleEdit}}" class="btn-alt-quiet toolbar-button">
+	            <i class="fa-solid fa-pencil"></i>
 	        </button>
             <button id="livePreviewModeBtn" title="{{livePreviewConfigureModes}}" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>
         </div>
diff --git a/src/index.html b/src/index.html
index f44dc52308..04627123b5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -969,6 +969,13 @@
                 <i class="fa-solid fa-floppy-disk"></i>
             </a>
         </div>
+        <div class="ccb-divider ccb-file-divider"></div>
+        <div class="ccb-group ccb-group-file">
+            <div id="ccbFileLabel" class="ccb-file-label">
+                <span class="ccb-file-dot">•</span>
+                <span class="ccb-file-name"></span>
+            </div>
+        </div>
     </div>
 
     <!--
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 482fec812a..0bc4d69f2b 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -544,6 +544,7 @@ define({
     "IMAGE_SEARCH_PRO_THROTTLE_MESSAGE": "Image search is temporarily unavailable due to high demand. This usually clears within an hour — please try again shortly.",
     "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
     "LIVE_PREVIEW_MODE_TOGGLE_PREVIEW": "Toggle Preview Mode (F8)",
+    "LIVE_PREVIEW_MODE_TOGGLE_EDIT": "Toggle Edit Mode (F8)",
     "LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",
     "LIVE_PREVIEW_MODE_HIGHLIGHT": "Highlight Mode",
     "LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
@@ -2357,7 +2358,7 @@ define({
     "DEMO_EDIT_MODE_DESCRIPTION": "Select and change things on the page",
     "DEMO_PREVIEW_MODE_LABEL": "Preview mode",
     "DEMO_PREVIEW_MODE_DESCRIPTION": "See your page as visitors will see it",
-    "DEMO_MODE_SWITCH_HINT": "Press <strong>F8</strong> or click the <span class=\"play-button-hint\"><img src=\"images/playButton.svg\" alt=\"Play\" class=\"play-hint-svg svg-gold\"></span> buttons to switch modes.",
+    "DEMO_MODE_SWITCH_HINT": "Press <strong>F8</strong> or click the <span class=\"play-button-hint\"><i class=\"fa-solid fa-pencil\"></i></span> button to switch modes.",
     "DEMO_TIPS_LABEL": "Tips:",
     "DEMO_SECTION6_TIP1": "Click any link to select it for editing",
     "DEMO_SECTION6_TIP2_NEWTAB": "Enable <strong>Open in new tab</strong> to open links on a separate page",
diff --git a/src/styles/CentralControlBar.less b/src/styles/CentralControlBar.less
index 0728086540..2c8d992c44 100644
--- a/src/styles/CentralControlBar.less
+++ b/src/styles/CentralControlBar.less
@@ -47,6 +47,14 @@
         flex-direction: column;
         align-items: stretch;
         gap: 2px;
+
+        &.ccb-group-file {
+            flex: 0 1 auto;
+            max-height: 220px;
+            overflow: hidden;
+            justify-content: flex-start;
+            padding: 4px 0;
+        }
     }
 
     .ccb-divider {
@@ -116,6 +124,70 @@
         }
     }
 
+    /* Vertical filename label — clicking reveals the current file in the
+       file tree (keeps the old binoculars-on-label affordance). */
+    .ccb-file-label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 0;
+        color: @project-panel-text-2;
+        height: 100%;
+        overflow: hidden;
+        cursor: pointer;
+
+        .ccb-file-dot {
+            flex: 0 0 auto;
+            line-height: 1;
+            color: #f1b84e;
+            visibility: hidden;
+            font-size: 1rem;
+        }
+
+        &.is-dirty .ccb-file-dot {
+            visibility: visible;
+        }
+
+        .ccb-file-name {
+            flex: 1 1 auto;
+            min-height: 0;
+            /* `sideways-lr` rotates each glyph 90° CCW so the text reads
+               bottom-up naturally. Using this instead of `vertical-rl` +
+               `transform: rotate(180deg)` avoids the blurry sub-pixel
+               rasterization that the transform path produced on linux
+               electron, because Chromium can take its fast vertical-text
+               path for glyph layout and skip the rotated bitmap upscale. */
+            writing-mode: sideways-lr;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: @project-panel-text-1;
+            font-size: 13px;
+            font-weight: 500;
+            /* Promote to its own compositing layer + force AA — keeps the
+               rotated glyphs crisp even when the system falls back to the
+               slow text path. */
+            transform: translateZ(0);
+            backface-visibility: hidden;
+            -webkit-font-smoothing: antialiased;
+            text-rendering: geometricPrecision;
+        }
+
+        &:hover .ccb-file-name {
+            text-decoration: underline;
+        }
+    }
+
+}
+
+/* The file label is only useful in design mode — in code mode the active
+   file is already obvious from the tab bar / working-files list, so the
+   vertical label (and its preceding divider) would be redundant chrome
+   that steals vertical space in the CCB. */
+body:not(.ccb-editor-collapsed) #centralControlBar .ccb-file-divider,
+body:not(.ccb-editor-collapsed) #centralControlBar .ccb-group-file {
+    display: none;
 }
 
 /* Editor collapse: actual layout handled in JS via .content width/visibility */
diff --git a/src/view/CentralControlBar.js b/src/view/CentralControlBar.js
index 165ea4c1e3..2d85c5c3f2 100644
--- a/src/view/CentralControlBar.js
+++ b/src/view/CentralControlBar.js
@@ -23,6 +23,8 @@ define(function (require, exports, module) {
     const AppInit           = require("utils/AppInit");
     const CommandManager    = require("command/CommandManager");
     const Commands          = require("command/Commands");
+    const DocumentManager   = require("document/DocumentManager");
+    const MainViewManager   = require("view/MainViewManager");
     const Strings           = require("strings");
     const WorkspaceManager  = require("view/WorkspaceManager");
     const SidebarView       = require("project/SidebarView");
@@ -32,6 +34,8 @@ define(function (require, exports, module) {
     let $bar;
     let $sidebar;
     let $content;
+    let $fileLabel;
+    let $fileName;
     let editorCollapsed = false;
     let savedToolbarWidth = null;
     let livePreviewWasOpen = false;
@@ -69,6 +73,35 @@ define(function (require, exports, module) {
         }
     }
 
+    function _updateFileLabel() {
+        if (!$fileLabel) {
+            return;
+        }
+        // Use MainViewManager instead of DocumentManager.getCurrentDocument()
+        // so non-editable views (images, custom viewers, etc.) still show up
+        // on the label. getCurrentDocument() is CodeMirror-backed only and
+        // would leave the label blank whenever the active pane is an image
+        // or other non-CM surface.
+        const file = MainViewManager.getCurrentlyViewedFile(MainViewManager.ACTIVE_PANE);
+        if (!file) {
+            $fileLabel.removeClass("is-dirty");
+            $fileName.text("");
+            $fileLabel.attr("title", "");
+            return;
+        }
+        const name = file.name || "";
+        const fullPath = file.fullPath || "";
+        const displayPath = fullPath && Phoenix && Phoenix.app && Phoenix.app.getDisplayPath
+            ? Phoenix.app.getDisplayPath(fullPath)
+            : fullPath || name;
+        $fileName.text(name);
+        $fileLabel.attr("title", displayPath);
+        // Dirty only makes sense for files with a document behind them; for
+        // non-editable views there's no doc, so the class simply stays off.
+        const doc = DocumentManager.getOpenDocumentForPath(fullPath);
+        $fileLabel.toggleClass("is-dirty", !!(doc && doc.isDirty));
+    }
+
     function _executeCmd(id) {
         CommandManager.execute(id);
     }
@@ -263,6 +296,10 @@ define(function (require, exports, module) {
             e.preventDefault();
             _executeCmd(Commands.VIEW_HIDE_SIDEBAR);
         });
+        $("#ccbFileLabel").on("click", function (e) {
+            e.preventDefault();
+            _executeCmd(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
+        });
     }
 
     const _toggleDesignModeCommand = CommandManager.register(Strings.CMD_TOGGLE_DESIGN_MODE,
@@ -274,6 +311,8 @@ define(function (require, exports, module) {
         $bar = $("#centralControlBar");
         $sidebar = $("#sidebar");
         $content = $(".content");
+        $fileLabel = $("#ccbFileLabel");
+        $fileName = $fileLabel.find(".ccb-file-name");
 
         _wireButtons();
         // The HTML titles on the control-bar buttons are fallback English
@@ -396,6 +435,11 @@ define(function (require, exports, module) {
         }
 
         _updateSidebarToggleIcon();
+
+        MainViewManager.on("currentFileChange.ccb", _updateFileLabel);
+        DocumentManager.on("dirtyFlagChange.ccb", _updateFileLabel);
+        DocumentManager.on("pathDeleted.ccb fileNameChange.ccb", _updateFileLabel);
+        _updateFileLabel();
     });
 
 
diff --git a/test/spec/CentralControlBar-integ-test.js b/test/spec/CentralControlBar-integ-test.js
index e02c842d37..e2a10643de 100644
--- a/test/spec/CentralControlBar-integ-test.js
+++ b/test/spec/CentralControlBar-integ-test.js
@@ -18,7 +18,7 @@
  *
  */
 
-/*global describe, it, expect, beforeAll, afterAll, beforeEach, afterEach, awaitsFor, awaits */
+/*global describe, it, expect, beforeAll, afterAll, beforeEach, afterEach, awaitsFor, awaitsForDone, awaits */
 
 define(function (require, exports, module) {
 
@@ -292,6 +292,118 @@ define(function (require, exports, module) {
             });
         });
 
+        describe("2b. #ccbFileLabel (active-file indicator)", function () {
+            let DocumentManager, MainViewManager;
+
+            beforeAll(function () {
+                DocumentManager = brackets.test.DocumentManager;
+                MainViewManager = brackets.test.MainViewManager;
+            });
+
+            afterAll(async function () {
+                // Leave the suite in the same "no file open" state we found it
+                // in so later describes don't pick up a stray document.
+                await awaitsForDone(
+                    CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
+                    "close files opened by ccbFileLabel tests");
+            });
+
+            it("should render #ccbFileLabel inside #centralControlBar", function () {
+                const $label = _$("#ccbFileLabel");
+                expect($label.length).toBe(1);
+                expect($label.closest("#centralControlBar").length).toBe(1);
+                expect($label.find(".ccb-file-name").length).toBe(1);
+                expect($label.find(".ccb-file-dot").length).toBe(1);
+            });
+
+            it("should only be visible in design mode (hidden in code mode)", async function () {
+                // The active file is already obvious from the tab bar / working
+                // files list in code mode, so the vertical label (and its
+                // leading divider) are hidden and only surface in design mode.
+                expect(_$("#ccbFileLabel").is(":visible")).toBe(false);
+                expect(_$("#centralControlBar .ccb-file-divider").is(":visible")).toBe(false);
+
+                await enterDesignMode();
+                expect(_$("#ccbFileLabel").is(":visible")).toBe(true);
+                expect(_$("#centralControlBar .ccb-file-divider").is(":visible")).toBe(true);
+
+                await exitDesignMode();
+                expect(_$("#ccbFileLabel").is(":visible")).toBe(false);
+                expect(_$("#centralControlBar .ccb-file-divider").is(":visible")).toBe(false);
+            });
+
+            it("should show the active file's name and clear it when no file is open", async function () {
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["somelines.html"]),
+                    "open somelines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "somelines.html";
+                }, "file label to show somelines.html", 2000);
+                expect(_$("#ccbFileLabel").attr("title")).toContain("somelines.html");
+
+                await awaitsForDone(
+                    CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
+                    "close all files");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "";
+                }, "file label to clear when no doc", 2000);
+            });
+
+            it("should toggle .is-dirty as the active document's dirty flag changes", async function () {
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["somelines.html"]),
+                    "open somelines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "somelines.html";
+                }, "file label primed", 2000);
+
+                expect(_$("#ccbFileLabel").hasClass("is-dirty")).toBe(false);
+
+                const doc = DocumentManager.getCurrentDocument();
+                const originalText = doc.getText();
+                doc.setText(originalText + "\n// ccb dirty probe");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel").hasClass("is-dirty");
+                }, ".is-dirty to appear after setText", 2000);
+
+                doc.refreshText(originalText, doc.diskTimestamp);
+                await awaitsFor(function () {
+                    return !_$("#ccbFileLabel").hasClass("is-dirty");
+                }, ".is-dirty to clear after refresh", 2000);
+            });
+
+            it("should dispatch NAVIGATE_SHOW_IN_FILE_TREE when clicked", async function () {
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["somelines.html"]),
+                    "open somelines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "somelines.html";
+                }, "file label primed", 2000);
+
+                const executed = recordCommands(function () {
+                    _$("#ccbFileLabel").trigger("click");
+                });
+                expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
+            });
+
+            it("should update when the active file switches", async function () {
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["somelines.html"]),
+                    "open somelines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "somelines.html";
+                }, "somelines.html label", 2000);
+
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["lotsOfLines.html"]),
+                    "open lotsOfLines.html");
+                await awaitsFor(function () {
+                    return _$("#ccbFileLabel .ccb-file-name").text() === "lotsOfLines.html";
+                }, "label to switch to lotsOfLines.html", 2000);
+                expect(_$("#ccbFileLabel").attr("title")).toContain("lotsOfLines.html");
+            });
+        });
+
         describe("3. Toggle Design Mode command", function () {
 
             it("should execute VIEW_TOGGLE_DESIGN_MODE and flip isInDesignMode() from false to true and back", async function () {