From 0c85ba6e4bc92614946440182e99853452aaf512 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Thu, 23 Apr 2026 15:49:20 +0530
Subject: [PATCH 1/5] fix(ccb): make toolbar undo/redo work when an external
 surface owns focus in design mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In design mode the active document can sit behind a surface that owns
DOM focus instead of a CodeMirror editor — e.g. the markdown viewer's
iframe when it's in edit mode. EditorManager.getFocusedEditor() returns
null in that case, so the CCB undo/redo buttons (and anything else
routing through EDIT_UNDO / EDIT_REDO) silently no-op'd even though the
underlying Phoenix document had perfectly good history.

When design mode is active and no editor is focused, fall back to
EditorManager.getCurrentFullEditor() so toolbar undo/redo drives the
active document. External surfaces that sync their edits back to that
document (like the md viewer) will re-render to reflect the rolled-back
text. Outside design mode the pre-existing no-op behavior is preserved.
---
 src/editor/EditorCommandHandlers.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

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();

From 64ac885e59e4e0e6921143caba7460eb661e0d09 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Thu, 23 Apr 2026 18:57:54 +0530
Subject: [PATCH 2/5] feat(ccb): reinstate active-file label with dirty
 indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restores the vertical file-name + dirty-dot label that was removed in
22b219168 (replaced with a show-in-tree button at the time). The label
hangs below the save group, reads the file name bottom-up, and shows
a small amber dot at the top when the active document is dirty.

Two improvements over the original:

- Source the file from MainViewManager.getCurrentlyViewedFile(ACTIVE_PANE)
  instead of DocumentManager.getCurrentDocument(). getCurrentDocument()
  is CodeMirror-only, so the old label went blank whenever the active
  pane was an image or other non-CM view. Dirty state still goes
  through DocumentManager.getOpenDocumentForPath(fullPath), which is
  null for non-editable views — they correctly stay un-dirty.

- Anti-pixelation for linux electron: swap
  `writing-mode: vertical-rl; transform: rotate(180deg)` for
  `writing-mode: sideways-lr`, which lets Chromium take its fast
  vertical-text path instead of rasterizing through a rotated
  transform. Pair it with translateZ(0), backface-visibility,
  -webkit-font-smoothing: antialiased, and
  text-rendering: geometricPrecision so the glyphs stay crisp even
  if a system falls back to the slow text path.

Click still dispatches NAVIGATE_SHOW_IN_FILE_TREE (mirrors the
binoculars affordance the label replaced).

Tests: adds a 2b. #ccbFileLabel describe to CentralControlBar-integ-test
covering render/placement, the name-shown / cleared-on-FILE_CLOSE_ALL
cycle, the .is-dirty toggle via setText + refreshText, the click →
NAVIGATE_SHOW_IN_FILE_TREE dispatch, and the label updating when the
active file switches.
---
 src/index.html                            |  7 ++
 src/styles/CentralControlBar.less         | 63 +++++++++++++++
 src/view/CentralControlBar.js             | 44 ++++++++++
 test/spec/CentralControlBar-integ-test.js | 98 ++++++++++++++++++++++-
 4 files changed, 211 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index f44dc52308..1da43dfafb 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"></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/styles/CentralControlBar.less b/src/styles/CentralControlBar.less
index 0728086540..065f07b894 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,61 @@
         }
     }
 
+    /* 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;
+        }
+    }
+
 }
 
 /* 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..ea01e5f02f 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,102 @@ 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 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 () {

From db412a1a1fcf307f895acb3068d638d0468282b4 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Thu, 23 Apr 2026 19:41:58 +0530
Subject: [PATCH 3/5] feat(ccb): only show the file label in design mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In code mode the active file is already obvious from the tab bar and
working-files list, so the vertical CCB label is redundant chrome that
just steals vertical space. In design mode the editor collapses and
those affordances aren't visible — that's the only place the label
earns its spot.

Tag the divider preceding the file group with .ccb-file-divider so the
divider + group can be hidden as a pair, and wrap both in a
`body:not(.ccb-editor-collapsed)` rule. No JS toggle needed; the body
class is already flipped by CentralControlBar when design mode changes.

Adds a "should only be visible in design mode" integ test that
checks :visible on both the label and the leading divider through
enter/exit design-mode transitions.
---
 src/index.html                            |  2 +-
 src/styles/CentralControlBar.less         |  9 +++++++++
 test/spec/CentralControlBar-integ-test.js | 16 ++++++++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 1da43dfafb..04627123b5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -969,7 +969,7 @@
                 <i class="fa-solid fa-floppy-disk"></i>
             </a>
         </div>
-        <div class="ccb-divider"></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>
diff --git a/src/styles/CentralControlBar.less b/src/styles/CentralControlBar.less
index 065f07b894..2c8d992c44 100644
--- a/src/styles/CentralControlBar.less
+++ b/src/styles/CentralControlBar.less
@@ -181,6 +181,15 @@
 
 }
 
+/* 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 */
 .ccb-editor-collapsed .content {
     overflow: hidden;
diff --git a/test/spec/CentralControlBar-integ-test.js b/test/spec/CentralControlBar-integ-test.js
index ea01e5f02f..e2a10643de 100644
--- a/test/spec/CentralControlBar-integ-test.js
+++ b/test/spec/CentralControlBar-integ-test.js
@@ -316,6 +316,22 @@ define(function (require, exports, module) {
                 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"]),

From f5244eb2dc603ce0dfd440ed31dfcaf819be7967 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Thu, 23 Apr 2026 20:32:37 +0530
Subject: [PATCH 4/5] feat(lp): pencil toggle for edit mode with pro upsell for
 free users
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Turn the live-preview toolbar's play button into an edit-mode toggle:

- Icon: fa-play → fa-pencil; title "Toggle Preview Mode (F8)" →
  "Toggle Edit Mode (F8)" via new LIVE_PREVIEW_MODE_TOGGLE_EDIT string.
- Invert the .selected semantics — the button now lights amber when
  LiveDevelopment.getCurrentMode() === LIVE_EDIT_MODE (not when in
  preview). _initializeMode reconciles .selected against the real mode
  on every livePreviewMode pref change, so state and visuals stay
  synchronized.
- Click handler routes through LiveDevelopment.setMode(LIVE_EDIT_MODE)
  instead of PreferencesManager.set, so we pick up the entitlement
  gate for free: setMode returns false for users without the live-edit
  entitlement, and we then invoke
  KernalModeTrust.ProDialogs.showProUpsellDialog(UPSELL_TYPE_LIVE_EDIT)
  — the same dialog the mode dropdown's "Edit Mode" item opens
  (main.js:459-466). Pro users in edit drop back to preview; pro users
  not in edit enter edit.
- F8 keybinding routes through the same click handler, so it gets the
  same behavior and upsell for free.

No existing tests are affected — the two suites that touch
#previewModeLivePreviewButton only assert its visibility, never the
icon, the .selected class, or the click path.
---
 .../Phoenix-live-preview/main.js              | 40 ++++++++++++-------
 .../Phoenix-live-preview/panel.html           |  4 +-
 src/nls/root/strings.js                       |  1 +
 3 files changed, 29 insertions(+), 16 deletions(-)

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/nls/root/strings.js b/src/nls/root/strings.js
index 482fec812a..43f4073bd0 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",

From 8ea615e0a210439ffbb8a3aa0d907a7028039cf1 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Thu, 23 Apr 2026 20:51:30 +0530
Subject: [PATCH 5/5] chore(strings): point the mode-switch hint at the new
 pencil toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Onboarding section 6's mode-switch hint used to embed the playButton.svg
with alt="Play". The live-preview toolbar now surfaces a single pencil
edit toggle instead of the play-styled preview button, so update
DEMO_MODE_SWITCH_HINT to inline <i class="fa-solid fa-pencil"> inside
the existing .play-button-hint chip, and change "buttons" to "button"
since there's only one toggle now.

Only root/strings.js is edited — other locales auto-translate via CI.
---
 src/nls/root/strings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 43f4073bd0..0bc4d69f2b 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -2358,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",