diff --git a/src-mdviewer/src/bridge.js b/src-mdviewer/src/bridge.js
index a998a76ea0..f1c80d56ee 100644
--- a/src-mdviewer/src/bridge.js
+++ b/src-mdviewer/src/bridge.js
@@ -20,6 +20,35 @@ let _baseURL = "";
 let _cursorPosBeforeEdit = null; // cursor position before current edit batch
 let _cursorPosDirty = false; // true after content changes, reset when emitted
 let _pendingReloadScroll = null; // { filePath, scrollSourceLine } for scroll restore after reload
+// Key strings ("Ctrl-Shift-O", "Ctrl-Shift-F", …) for shortcuts Phoenix
+// handles by opening a UI that needs focus — we must not auto-refocus our
+// own editor after forwarding those. Populated from the parent via the
+// MDVIEWR_SKIP_REFOCUS_KEYS message; starts empty so bugs in the parent
+// can't break the default refocus behavior.
+let _skipRefocusKeys = new Set();
+const _isMacForKey = /Mac|iPhone|iPad/.test(navigator.platform);
+
+/**
+ * Mirror Phoenix's KeyBindingManager _buildKeyDescriptor to produce the
+ * same canonical key string from a KeyboardEvent so we can look it up in
+ * _skipRefocusKeys. Non-mac: "Ctrl-Shift-O"; mac: "Shift-Cmd-O".
+ */
+function _eventToKeyString(e) {
+    const parts = [];
+    if (_isMacForKey && e.ctrlKey) { parts.push("Ctrl"); }
+    if (e.altKey) { parts.push("Alt"); }
+    if (e.shiftKey) { parts.push("Shift"); }
+    if (!_isMacForKey && e.ctrlKey) { parts.unshift("Ctrl"); }
+    if (_isMacForKey && e.metaKey) { parts.push("Cmd"); }
+    let key = e.key || "";
+    if (key.length === 1) { key = key.toUpperCase(); }
+    parts.push(key);
+    return parts.join("-");
+}
+
+function _isSkipRefocusShortcut(e) {
+    return _skipRefocusKeys.has(_eventToKeyString(e));
+}
 
 /**
  * Check if a URL is absolute (not relative to the document).
@@ -317,6 +346,14 @@ export function initBridge() {
                 window.getSelection().removeAllRanges();
                 document.body.click();
                 break;
+            case "MDVIEWR_SKIP_REFOCUS_KEYS":
+                // Phoenix tells us which forwarded shortcuts should NOT
+                // trigger our auto-refocus (e.g. Quick Open, Find in Files
+                // — shortcuts that open parent-side UI which needs focus).
+                if (Array.isArray(data.keys)) {
+                    _skipRefocusKeys = new Set(data.keys);
+                }
+                break;
         }
     });
 
@@ -416,13 +453,18 @@ export function initBridge() {
                     altKey: e.altKey
                 });
                 // Refocus md editor after Phoenix handles the shortcut
-                // (some commands like Save focus the CM editor)
-                setTimeout(() => {
-                    const content = document.getElementById("viewer-content");
-                    if (content && getState().editMode) {
-                        content.focus({ preventScroll: true });
-                    }
-                }, 100);
+                // (e.g. Save focuses the CM editor). Phoenix sends us the
+                // list of shortcuts for which focus should stay with the
+                // parent (Quick Open, Find in Files …) via
+                // MDVIEWR_SKIP_REFOCUS_KEYS. Don't refocus for those.
+                if (!_isSkipRefocusShortcut(e)) {
+                    setTimeout(() => {
+                        const content = document.getElementById("viewer-content");
+                        if (content && getState().editMode) {
+                            content.focus({ preventScroll: true });
+                        }
+                    }, 100);
+                }
             }
         }
     }, true);
diff --git a/src/base-config/keyboard.json b/src/base-config/keyboard.json
index 488573c9a4..5f9f685721 100644
--- a/src/base-config/keyboard.json
+++ b/src/base-config/keyboard.json
@@ -23,6 +23,9 @@
     "file.liveFilePreview":  [
         "Ctrl-Alt-L"
     ],
+    "view.toggleDesignMode": [
+        "Ctrl-F11"
+    ],
     "file.reloadLivePreview": [
         {
             "key": "Ctrl-Shift-R"
diff --git a/src/brackets.js b/src/brackets.js
index 3a3e08c739..4c53bb9c83 100644
--- a/src/brackets.js
+++ b/src/brackets.js
@@ -127,6 +127,7 @@ define(function (require, exports, module) {
     require("file/FileUtils");
     require("project/SidebarView");
     require("view/SidebarTabs");
+    require("view/CentralControlBar");
     require("utils/Resizer");
     require("LiveDevelopment/main");
     require("utils/NodeConnection");
diff --git a/src/command/Commands.js b/src/command/Commands.js
index 30403d1cbe..caa7c4bd14 100644
--- a/src/command/Commands.js
+++ b/src/command/Commands.js
@@ -257,6 +257,9 @@ define(function (require, exports, module) {
     /** Toggles sidebar visibility */
     exports.VIEW_HIDE_SIDEBAR           = "view.toggleSidebar";         // SidebarView.js               toggle()
 
+    /** Toggles the design (full live-preview) mode — collapses/expands the editor */
+    exports.VIEW_TOGGLE_DESIGN_MODE     = "view.toggleDesignMode";      // view/CentralControlBar.js    _setEditorCollapsed()
+
     /** Toggles tabbar visibility */
     exports.TOGGLE_TABBAR            = "view.toggleTabbar";
     // extensionsIntegrated/TabBar/main.js
diff --git a/src/command/Menus.js b/src/command/Menus.js
index 18fb38ea21..c9a21f8a7c 100644
--- a/src/command/Menus.js
+++ b/src/command/Menus.js
@@ -1778,35 +1778,6 @@ define(function (require, exports, module) {
         const $hamburgerToggle = $hamburger.find(".hamburger-toggle");
         let _activeSubmenuId = null;
 
-        // Sidebar collapse/expand toggle button before the File menu
-        const $sidebarToggle = $(`<li class="sidebar-toggle-btn" id="sidebar-toggle-btn">
-            <a href="#">
-                <i class="fa-solid fa-angles-left"></i>
-            </a>
-        </li>`);
-        $menubar.prepend($sidebarToggle);
-        const $sidebarIcon = $sidebarToggle.find("a");
-
-        function _updateSidebarToggleIcon() {
-            const isVisible = $("#sidebar").is(":visible");
-            if (isVisible) {
-                $sidebarIcon.html('<i class="fa-solid fa-angles-left"></i>');
-                $sidebarIcon.attr("title", Strings.CMD_HIDE_SIDEBAR);
-            } else {
-                $sidebarIcon.html('<i class="fa-solid fa-angles-right"></i>');
-                $sidebarIcon.attr("title", Strings.CMD_SHOW_SIDEBAR);
-            }
-        }
-
-        $sidebarIcon.on("click", function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            CommandManager.execute(Commands.VIEW_HIDE_SIDEBAR);
-        });
-
-        $("#sidebar").on("panelCollapsed panelExpanded", _updateSidebarToggleIcon);
-        _updateSidebarToggleIcon();
-
         function _resetMenuItemStyles($menuItem) {
             const menu = menuMap[$menuItem.attr("id")];
             if (menu) {
diff --git a/src/document/DocumentCommandHandlers.js b/src/document/DocumentCommandHandlers.js
index 2c35042527..7292015592 100644
--- a/src/document/DocumentCommandHandlers.js
+++ b/src/document/DocumentCommandHandlers.js
@@ -1953,6 +1953,9 @@ define(function (require, exports, module) {
     function handleShowInTree() {
         let activeFile = MainViewManager.getCurrentlyViewedFile(MainViewManager.ACTIVE_PANE);
         if(activeFile){
+            if (!$("#sidebar").is(":visible")) {
+                CommandManager.execute(Commands.VIEW_HIDE_SIDEBAR);
+            }
             SidebarTabs.setActiveTab(SidebarTabs.SIDEBAR_TAB_FILES);
             ProjectManager.showInTree(activeFile);
         }
diff --git a/src/extensions/default/Git/src/Main.js b/src/extensions/default/Git/src/Main.js
index 89f94df33a..49a9723912 100644
--- a/src/extensions/default/Git/src/Main.js
+++ b/src/extensions/default/Git/src/Main.js
@@ -49,7 +49,20 @@ define(function (require, exports) {
         Branch.init();
         CloseNotModified.init();
         // Attach events
-        $icon.on("click", Panel.toggle);
+        $icon.on("click", function () {
+            // Design mode collapses the editor and stretches live preview,
+            // which leaves no room for the git bottom panel. Exit design mode
+            // first so the panel has somewhere to render.
+            // TODO: make git panel float/overlay live preview so users can
+            // peek at git status without leaving design mode.
+            const WorkspaceManager = brackets.getModule("view/WorkspaceManager");
+            const CommandManager = brackets.getModule("command/CommandManager");
+            const Commands = brackets.getModule("command/Commands");
+            if (WorkspaceManager.isInDesignMode()) {
+                CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+            }
+            Panel.toggle();
+        });
     }
 
     function _addRemoveItemInGitignore(selectedEntry, method) {
diff --git a/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js b/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js
index 304dfe6795..ba12210795 100644
--- a/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js
+++ b/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js
@@ -745,12 +745,11 @@ define(function (require, exports, module) {
     }
 
     function _setupNavigationButtons() {
-        let $mainNavBarRight = $("#mainNavBarRight");
         let $mainNavBarLeft = $("#mainNavBarLeft");
-        $showInTree = $mainNavBarRight.find("#showInfileTree");
-        $navback = $mainNavBarRight.find("#navBackButton");
-        $navForward = $mainNavBarRight.find("#navForwardButton");
-        $searchNav = $mainNavBarRight.find("#searchNav");
+        $showInTree = $("#showInfileTree");
+        $navback = $("#navBackButton");
+        $navForward = $("#navForwardButton");
+        $searchNav = $("#searchNav");
 
         $newProject = $mainNavBarLeft.find("#newProject");
         updateTooltips();
diff --git a/src/extensionsIntegrated/NoDistractions/main.js b/src/extensionsIntegrated/NoDistractions/main.js
index 55f8d27a94..4337b689dc 100644
--- a/src/extensionsIntegrated/NoDistractions/main.js
+++ b/src/extensionsIntegrated/NoDistractions/main.js
@@ -168,14 +168,27 @@ define(function (require, exports, module) {
         KeyBindingManager.addBinding(CMD_TOGGLE_PANELS, [ {key: togglePanelsKey_EN}, {key: togglePanelsKeyMac_EN, platform: "mac"} ]);
 
         PreferencesManager.on("change", PREFS_PURE_CODE, function () {
+            const inDesignMode = WorkspaceManager.isInDesignMode &&
+                WorkspaceManager.isInDesignMode();
             if (PreferencesManager.get(PREFS_PURE_CODE)) {
-                ViewUtils.hideMainToolBar();
-                CommandManager.execute(Commands.HIDE_SIDEBAR);
-                _hidePanelsIfRequired();
+                if (inDesignMode) {
+                    // In design mode the live preview already fills the editor
+                    // area and the main toolbar is the visible surface; just
+                    // collapse the sidebar so LP can stretch to the full width.
+                    CommandManager.execute(Commands.HIDE_SIDEBAR);
+                } else {
+                    ViewUtils.hideMainToolBar();
+                    CommandManager.execute(Commands.HIDE_SIDEBAR);
+                    _hidePanelsIfRequired();
+                }
             } else {
-                ViewUtils.showMainToolBar();
-                CommandManager.execute(Commands.SHOW_SIDEBAR);
-                _showPanelsIfRequired();
+                if (inDesignMode) {
+                    CommandManager.execute(Commands.SHOW_SIDEBAR);
+                } else {
+                    ViewUtils.showMainToolBar();
+                    CommandManager.execute(Commands.SHOW_SIDEBAR);
+                    _showPanelsIfRequired();
+                }
             }
             _updateCheckedState();
         });
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js b/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js
index 4bfdeee5f7..e899bc281d 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js
+++ b/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js
@@ -25,8 +25,23 @@ define(function (require, exports, module) {
     const ThemeManager = require("view/ThemeManager"),
         NativeApp = require("utils/NativeApp"),
         EditorManager = require("editor/EditorManager"),
+        AppInit = require("utils/AppInit"),
+        CommandManager = require("command/CommandManager"),
+        Commands = require("command/Commands"),
+        KeyBindingManager = require("command/KeyBindingManager"),
         utils = require("./utils");
 
+    // Commands whose shortcuts, when forwarded from the md viewer iframe,
+    // open a parent-side UI that needs to keep keyboard focus. The iframe's
+    // 100ms auto-refocus must skip these shortcuts — otherwise it yanks
+    // focus out of the picker immediately after it opens. We send the raw
+    // key strings (resolved at runtime from KeyBindingManager) so the
+    // iframe stays theme/rebind-agnostic.
+    const SKIP_REFOCUS_COMMANDS = [
+        Commands.NAVIGATE_QUICK_OPEN,
+        Commands.CMD_FIND_IN_FILES
+    ];
+
     let _active = false;
     let _doc = null;
     let _$iframe = null;
@@ -348,16 +363,52 @@ define(function (require, exports, module) {
 
     // --- iframe ready ---
 
+    /**
+     * Collect the current `key` strings bound to each SKIP_REFOCUS_COMMANDS
+     * command and send them to the iframe so its keyboard-shortcut forward
+     * path can skip its own 100ms auto-refocus for these shortcuts.
+     */
+    function _sendSkipRefocusShortcuts() {
+        const iframeWindow = _getIframeWindow();
+        if (!iframeWindow) { return; }
+        const keys = [];
+        SKIP_REFOCUS_COMMANDS.forEach(function (cmdID) {
+            const bindings = KeyBindingManager.getKeyBindings(cmdID) || [];
+            bindings.forEach(function (b) {
+                if (b && b.key) { keys.push(b.key); }
+            });
+        });
+        iframeWindow.postMessage({
+            type: "MDVIEWR_SKIP_REFOCUS_KEYS",
+            keys: keys
+        }, "*");
+    }
+
     function _onIframeReady() {
         _iframeReady = true;
         _sendContent();
         _sendTheme();
         _sendLocale();
+        _sendSkipRefocusShortcuts();
         if (_onIframeReadyCallback) {
             _onIframeReadyCallback();
         }
     }
 
+    // Re-send shortcuts if the user rebinds Quick Open / Find in Files.
+    // Deferred to appReady so the commands have been registered before we
+    // try to hook their key-binding-change events.
+    AppInit.appReady(function () {
+        SKIP_REFOCUS_COMMANDS.forEach(function (cmdID) {
+            const cmd = CommandManager.get(cmdID);
+            if (cmd && cmd.on) {
+                cmd.on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, function () {
+                    if (_iframeReady) { _sendSkipRefocusShortcuts(); }
+                });
+            }
+        });
+    });
+
     // --- Phoenix → iframe ---
 
     /**
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
index 3129acb45e..b08e322798 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/main.js
+++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -1451,6 +1451,14 @@ define(function (require, exports, module) {
             Menus.AFTER, Commands.FILE_LIVE_FILE_PREVIEW);
         fileMenu.addMenuItem(Commands.FILE_LIVE_FILE_PREVIEW_SETTINGS, "",
             Menus.AFTER, Commands.CMD_RELOAD_LIVE_PREVIEW);
+        // Design-mode toggle is registered by view/CentralControlBar at module load
+        // so the command exists by now. Insert it last with `AFTER Live Preview` so
+        // it lands directly below the Live Preview item (above Reload / Settings
+        // which were inserted earlier into the same AFTER slot).
+        if (CommandManager.get(Commands.VIEW_TOGGLE_DESIGN_MODE)) {
+            fileMenu.addMenuItem(Commands.VIEW_TOGGLE_DESIGN_MODE, "",
+                Menus.AFTER, Commands.FILE_LIVE_FILE_PREVIEW);
+        }
         fileMenu.addMenuDivider(Menus.BEFORE, Commands.FILE_LIVE_FILE_PREVIEW);
 
         _registerHandlers();
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/utils.js b/src/extensionsIntegrated/Phoenix-live-preview/utils.js
index 0697bac805..db7c4c45a1 100644
--- a/src/extensionsIntegrated/Phoenix-live-preview/utils.js
+++ b/src/extensionsIntegrated/Phoenix-live-preview/utils.js
@@ -39,60 +39,10 @@ define(function (require, exports, module) {
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const MDVIEWR_IFRAME_ID = "panel-md-preview-frame";
     const EditorManager      = require("editor/EditorManager");
-    function getExtension(filePath) {
-        filePath = filePath || '';
-        let pathSplit = filePath.split('.');
-        return pathSplit && pathSplit.length>1 ? pathSplit[pathSplit.length-1] : '';
-    }
-
-    function isPreviewableFile(filePath) {
-        // only svg images should appear in the live preview as it needs text editor.
-        // All other image types should appear in the image previewer
-        return isSVG(filePath) || isMarkdownFile(filePath) || isHTMLFile(filePath) || isPDF(filePath);
-    }
-
-    function isPDF(filePath) {
-        let extension = getExtension(filePath);
-        return extension === "pdf";
-    }
-
-    function isSVG(filePath) {
-        let extension = getExtension(filePath);
-        return extension === "svg";
-    }
-
-    function isImage(filePath) {
-        let extension = getExtension(filePath);
-        return ["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp", "ico", "avif"]
-            .includes(extension.toLowerCase());
-    }
-
-    function isMarkdownFile(filePath) {
-        let extension = getExtension(filePath);
-        return ['md', 'markdown', 'mdx'].includes(extension.toLowerCase());
-    }
-
-    function isHTMLFile(filePath) {
-        let extension = getExtension(filePath);
-        return ['html', 'htm', 'xhtml'].includes(extension.toLowerCase());
-    }
-
-    function isServerRenderedFile(filePath) {
-        let extension = getExtension(filePath);
-        return [
-            "shtml",
-            "asp",
-            "aspx",
-            "php",
-            "jsp",
-            "jspx",
-            "cfm",
-            "cfc", // ColdFusion Component
-            "rb", // Ruby file, used in Ruby on Rails for views with ERB
-            "erb", // Embedded Ruby, used in Ruby on Rails views
-            "py" // Python file, used in web frameworks like Django or Flask for views
-        ].includes(extension.toLowerCase());
-    }
+    // File-type classification helpers live in a shared utility module so
+    // non-live-preview code (e.g. Quick Open in design mode) can use them
+    // without depending on this extension.
+    const FileTypeUtils      = require("utils/FileTypeUtils");
 
     function focusActiveEditorIfFocusInLivePreview() {
         const editor  = EditorManager.getActiveEditor();
@@ -105,15 +55,14 @@ define(function (require, exports, module) {
         }
     }
 
-    exports.getExtension = getExtension;
-    exports.isPreviewableFile = isPreviewableFile;
-    exports.isImage = isImage;
-    exports.isPDF = isPDF;
-    exports.isSVG = isSVG;
-    exports.isHTMLFile = isHTMLFile;
-    exports.isServerRenderedFile = isServerRenderedFile;
-    exports.isMarkdownFile = isMarkdownFile;
+    // Re-export the shared helpers so existing callers keep working.
+    exports.getExtension                      = FileTypeUtils.getExtension;
+    exports.isPreviewableFile                 = FileTypeUtils.isPreviewableFile;
+    exports.isImage                           = FileTypeUtils.isImage;
+    exports.isPDF                             = FileTypeUtils.isPDF;
+    exports.isSVG                             = FileTypeUtils.isSVG;
+    exports.isHTMLFile                        = FileTypeUtils.isHTMLFile;
+    exports.isServerRenderedFile              = FileTypeUtils.isServerRenderedFile;
+    exports.isMarkdownFile                    = FileTypeUtils.isMarkdownFile;
     exports.focusActiveEditorIfFocusInLivePreview = focusActiveEditorIfFocusInLivePreview;
 });
-
-
diff --git a/src/index.html b/src/index.html
index ac7e396d5b..547b96dfdc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -905,7 +905,7 @@
 <div class="main-view forced-hidden">
     <div id="notificationUIDefaultAnchor" href="#">
     </div>
-    <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-maxsize="80%" data-forceleft=".content">
+    <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="30" data-maxsize="80%" data-forceleft=".content">
         <div id="mainNavBar">
             <div id="mainNavBarLeft">
                 <div id="newProject" class="new-project-btn btn-alt-quiet"></div>
@@ -914,10 +914,6 @@
                 <a id="phcode-io-main-nav" href="https://phcode.io" target="_blank" rel="noopener">phcode.io</a>
             </div>
             <div id="mainNavBarRight">
-                <div id="navBackButton" class="nav-back-btn btn-alt-quiet"></div>
-                <div id="navForwardButton" class="nav-forward-btn btn-alt-quiet"></div>
-                <div id="showInfileTree" class="show-in-file-tree-btn btn-alt-quiet"></div>
-                <div id="searchNav" class="search-nav-btn btn-alt-quiet"></div>
                 <div class="working-set-splitview-btn btn-alt-quiet"></div>
             </div>
         </div>
@@ -937,6 +933,46 @@
         </div>
     </div>
 
+    <!-- Vertical control bar between sidebar and editor content -->
+    <div id="centralControlBar" class="no-focus">
+        <div class="ccb-group ccb-group-top">
+            <a href="#" id="ccbCollapseEditorBtn" class="ccb-btn" title="Switch to Design Mode">
+                <i class="fa-solid fa-feather"></i>
+            </a>
+            <a href="#" id="ccbSidebarToggleBtn" class="ccb-btn" title="Toggle sidebar">
+                <i class="fa-solid fa-angles-left"></i>
+            </a>
+        </div>
+        <div class="ccb-divider"></div>
+        <div class="ccb-group ccb-group-edit">
+            <a href="#" id="ccbUndoBtn" class="ccb-btn" title="Undo">
+                <i class="fa-solid fa-rotate-left"></i>
+            </a>
+            <a href="#" id="ccbRedoBtn" class="ccb-btn" title="Redo">
+                <i class="fa-solid fa-rotate-right"></i>
+            </a>
+        </div>
+        <div class="ccb-divider"></div>
+        <div class="ccb-group ccb-group-save">
+            <a href="#" id="ccbSaveBtn" class="ccb-btn" title="Save">
+                <i class="fa-solid fa-floppy-disk"></i>
+            </a>
+        </div>
+        <div class="ccb-divider"></div>
+        <div class="ccb-group ccb-group-nav">
+            <a href="#" id="searchNav" class="ccb-btn"><i class="fa-solid fa-magnifying-glass"></i></a>
+            <a href="#" id="navBackButton" class="ccb-btn"><i class="fa-solid fa-arrow-left"></i></a>
+            <a href="#" id="navForwardButton" class="ccb-btn"><i class="fa-solid fa-arrow-right"></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>
+
     <!--
         Vertical stack of titlebar (in-browser), editor, bottom panels, status bar
             (status bar is injected later - see StatusBar.init()).
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 3c6b44f115..7350fda57a 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -929,6 +929,9 @@ define({
     "CMD_HIDE_SIDEBAR": "Hide Sidebar",
     "CMD_SHOW_SIDEBAR": "Show Sidebar",
     "CMD_TOGGLE_SIDEBAR": "Toggle Sidebar",
+    "CMD_TOGGLE_DESIGN_MODE": "Toggle Design Mode",
+    "CCB_SWITCH_TO_DESIGN_MODE": "Switch to Design Mode",
+    "CCB_SWITCH_TO_CODE_EDITOR": "Switch to Code Editor",
     "CMD_TOGGLE_TABBAR": "File Tab Bar",
     "CMD_TOGGLE_PANELS": "Toggle Panels",
     "CMD_TOGGLE_PURE_CODE": "No Distractions",
diff --git a/src/search/FindInFilesUI.js b/src/search/FindInFilesUI.js
index 8ce87f25a4..8ebfde521e 100644
--- a/src/search/FindInFilesUI.js
+++ b/src/search/FindInFilesUI.js
@@ -191,6 +191,13 @@ define(function (require, exports, module) {
      */
     function _showFindBar(scope, showReplace) {
         FindUtils.notifySearchScopeChanged();
+        // Design mode hides the editor area where the find bar and results
+        // panel mount. Exit design mode first so the UI has somewhere to show.
+        // TODO: make Find in Files overlay the live preview cleanly so users
+        // can search without leaving design mode.
+        if (WorkspaceManager.isInDesignMode()) {
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+        }
         // If the scope is a file with a custom viewer, then we
         // don't show find in files dialog.
         if (scope && !EditorManager.canOpenPath(scope.fullPath)) {
diff --git a/src/search/QuickOpen.js b/src/search/QuickOpen.js
index 207a3dc279..66b11bd947 100644
--- a/src/search/QuickOpen.js
+++ b/src/search/QuickOpen.js
@@ -43,6 +43,8 @@ define(function (require, exports, module) {
         ProjectManager = require("project/ProjectManager"),
         LanguageManager = require("language/LanguageManager"),
         FileSystemError = require("filesystem/FileSystemError"),
+        WorkspaceManager = require("view/WorkspaceManager"),
+        FileTypeUtils = require("utils/FileTypeUtils"),
         ModalBar = require("widgets/ModalBar").ModalBar,
         QuickSearchField = require("search/QuickSearchField").QuickSearchField,
         StringMatch = require("utils/StringMatch"),
@@ -51,6 +53,129 @@ define(function (require, exports, module) {
     var _providerRegistrationHandler = new ProviderRegistrationHandler(),
         _registerQuickOpenProvider = _providerRegistrationHandler.registerProvider.bind(_providerRegistrationHandler);
 
+    /**
+     * Build a ModalBar-compatible stub that renders a Spotlight-style floating
+     * picker on top of the viewport (used while in design mode, since the
+     * standard ModalBar mounts into #editor-holder which is collapsed).
+     * Implements the small subset of the ModalBar API that QuickOpen relies on:
+     * `on("close", fn)`, `close()`, `prepareClose()`, and `getRoot()`.
+     * @private
+     */
+    function _createFloatingQuickOpenBar(templateHTML) {
+        const $overlay = $("<div class='quick-open-floating-overlay'/>");
+        const $bar = $("<div class='quick-open-floating-bar'/>").html(templateHTML);
+        $overlay.append($bar).appendTo("body");
+        const closeHandlers = [];
+        let closed = false;
+        function close() {
+            if (closed) { return closePromise; }
+            closed = true;
+            // QuickNavigateDialog.close() returns this.closePromise, which is
+            // the 3rd arg of the ModalBar "close" event payload. Pass a
+            // resolved jQuery Deferred so callers can chain .done() safely.
+            closePromise = $.Deferred().resolve().promise();
+            closeHandlers.forEach(function (fn) {
+                try {
+                    // Match ModalBar's trigger signature: event, reason, promise
+                    fn({}, undefined, closePromise);
+                } catch (e) { /* swallow */ }
+            });
+            $overlay.remove();
+            window.document.body.removeEventListener("focusin", onFocusIn, true);
+            return closePromise;
+        }
+        let closePromise = null;
+        function isInPicker(node) {
+            if (!node) { return false; }
+            if ($overlay[0].contains(node)) { return true; }
+            if (node.closest && node.closest(".quick-search-container")) { return true; }
+            return false;
+        }
+        function onFocusIn(e) {
+            // Close when focus moves outside both the bar and the results
+            // dropdown (which QuickSearchField appends to <body>, not into
+            // our overlay).
+            if (isInPicker(e.target)) { return; }
+            close();
+        }
+        // The overlay itself uses `pointer-events: none` so the UI behind it
+        // stays interactive (users can still click into the sidebar / live
+        // preview). Clicking somewhere does not always move focus (e.g. live
+        // preview iframes keep their own focus), so we also watch mousedown
+        // on the document and dismiss whenever the click lands outside the
+        // bar + dropdown.
+        function onMousedown(e) {
+            if (isInPicker(e.target)) { return; }
+            close();
+        }
+        // Defer attaching the dismiss listeners by a tick so any transient
+        // focus / blur events fired while the picker is opening (common when
+        // the shortcut was forwarded from an iframe like the md viewer —
+        // focus transfers between iframe and parent input can fire spurious
+        // window.blur) don't close the picker before it's ready.
+        let dismissArmed = false;
+        function onWindowBlur() {
+            if (!dismissArmed) { return; }
+            window.setTimeout(function () {
+                if (closed) { return; }
+                const active = window.document.activeElement;
+                if (active && isInPicker(active)) { return; }
+                close();
+            }, 0);
+        }
+        const armTimer = window.setTimeout(function () {
+            if (closed) { return; }
+            dismissArmed = true;
+            window.document.addEventListener("mousedown", onMousedown, true);
+            window.addEventListener("blur", onWindowBlur);
+        }, 120);
+        closeHandlers.push(function () {
+            window.clearTimeout(armTimer);
+            window.document.removeEventListener("mousedown", onMousedown, true);
+            window.removeEventListener("blur", onWindowBlur);
+        });
+        const bar = {
+            on: function (evt, fn) {
+                if (evt === "close" && typeof fn === "function") {
+                    closeHandlers.push(fn);
+                }
+            },
+            prepareClose: function () { /* no-op — floating bar doesn't reserve editor space */ },
+            close: close,
+            getRoot: function () { return $bar; }
+        };
+        // Close the whole picker on the FIRST Escape rather than just the
+        // dropdown. Use capture so we run before QuickSearchField's keydown
+        // handler (which does internal dropdown dismiss handling) can
+        // consume the event.
+        function onEscape(e) {
+            if (e.key === "Escape" || e.keyCode === 27) {
+                close();
+                e.preventDefault();
+                e.stopPropagation();
+                if (e.stopImmediatePropagation) { e.stopImmediatePropagation(); }
+            }
+        }
+        $overlay[0].addEventListener("keydown", onEscape, true);
+        // Global safety net: while overlay is up, first Escape anywhere closes it.
+        window.document.addEventListener("keydown", onEscape, true);
+        closeHandlers.push(function () {
+            window.document.removeEventListener("keydown", onEscape, true);
+        });
+        $overlay.on("mousedown", function (e) {
+            if (e.target === $overlay[0]) {
+                close();
+            }
+        });
+        window.document.body.addEventListener("focusin", onFocusIn, true);
+        // Move focus into the input once the overlay is in the DOM.
+        window.setTimeout(function () {
+            const $input = $bar.find("input").first();
+            if ($input.length) { $input.focus(); }
+        }, 0);
+        return bar;
+    }
+
     /**
      * Represents the symbol kind
      * @type {Object}
@@ -636,6 +761,14 @@ define(function (require, exports, module) {
         initialString = initialString || "";
         initialString = prefix + initialString;
 
+        // If the underlying search field was already torn down (e.g. the bar
+        // was closed via focus-loss but the isOpen flag wasn't updated in
+        // time), fall back to closing cleanly so the caller reopens fresh.
+        if (!this.searchField || !this.searchField.$input || !this.$searchField || !this.$searchField[0]) {
+            this.isOpen = false;
+            return;
+        }
+
         this.searchField.setText(initialString);
 
         // Select just the text after the prefix
@@ -706,25 +839,59 @@ define(function (require, exports, module) {
             placeholder='${Strings.CMD_QUICK_OPEN}\u2026' style='width: 30em'>
             <span class='find-dialog-label'></span>
         </div>`;
-        this.modalBar = new ModalBar(searchBarHTML, true);
+        // In design mode the editor area is collapsed and the normal ModalBar
+        // (which slides in before #editor-holder) has no room to render. Use a
+        // Spotlight-style floating overlay instead so the picker stays usable.
+        if (WorkspaceManager.isInDesignMode()) {
+            this.modalBar = _createFloatingQuickOpenBar(searchBarHTML);
+        } else {
+            this.modalBar = new ModalBar(searchBarHTML, true);
+        }
 
         this.modalBar.on("close", this._handleCloseBar);
 
         this.$searchField = $("input#quickOpenSearch");
         this.$indexingSpinner = $("#indexing-spinner");
 
+        const _floating = WorkspaceManager.isInDesignMode();
+        let _verticalAdjust = this.modalBar.getRoot().outerHeight();
+        if (_floating) {
+            // QuickSearchField computes dropdownTop as
+            //   input.offset().top + input.height + verticalAdjust
+            // For the standard ModalBar that lands flush with the bar's bottom
+            // because the input sits at the bar's bottom edge. In the floating
+            // bar the input is vertically centered inside, so `bar.height` as
+            // verticalAdjust overshoots and the dropdown floats detached. Use
+            // (bar.bottom - input.bottom) instead so the dropdown starts right
+            // below the bar.
+            const $root = this.modalBar.getRoot();
+            const barBottom = $root.offset().top + $root.outerHeight();
+            const inputBottom = this.$searchField.offset().top + this.$searchField.outerHeight();
+            _verticalAdjust = Math.max(0, barBottom - inputBottom);
+        }
         this.searchField = new QuickSearchField(this.$searchField, {
             maxResults: 20,
             firstHighlightIndex: 0,
-            verticalAdjust: this.modalBar.getRoot().outerHeight(),
+            verticalAdjust: _verticalAdjust,
+            // In design mode the floating bar is the visible container for the
+            // picker; align the results dropdown to that element instead of the
+            // bare <input> so the two edges match.
+            $positionEl: _floating ? this.modalBar.getRoot() : undefined,
             resultProvider: this._filterCallback,
             formatter: this._resultsFormatterCallback,
             onCommit: this._handleItemSelect,
             onHighlight: this._handleItemHighlight
         });
 
-        // Return files that are non-binary, or binary files that have a custom viewer
+        // Return files that are non-binary, or binary files that have a custom viewer.
+        // In design mode narrow to files that actually make sense to open into the
+        // live preview (HTML/MD/SVG/PDF) or server-rendered sources — everything
+        // else would just collapse design mode.
         function _filter(file) {
+            if (_floating) {
+                return FileTypeUtils.isPreviewableFile(file.fullPath) ||
+                    FileTypeUtils.isServerRenderedFile(file.fullPath);
+            }
             return !LanguageManager.getLanguageForPath(file.fullPath).isBinary() ||
                 MainViewFactory.findSuitableFactoryForPath(file.fullPath);
         }
diff --git a/src/styles/CentralControlBar.less b/src/styles/CentralControlBar.less
new file mode 100644
index 0000000000..ce01989769
--- /dev/null
+++ b/src/styles/CentralControlBar.less
@@ -0,0 +1,203 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+/* Central vertical control bar between sidebar and editor content */
+
+@central-control-bar-width: 30px;
+
+#centralControlBar {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: @central-control-bar-width;
+    left: @sidebar-width; /* updated dynamically when sidebar resizes */
+    z-index: @z-index-brackets-main-content + 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 4px 0;
+    box-sizing: border-box;
+    user-select: none;
+    /* Phoenix's sidebar uses a fixed dark panel color (#252525) in both
+       light and dark themes. Use a slightly darker fixed tone here so the
+       control bar reads as a distinct surface next to the sidebar while
+       still staying on-theme in light mode. */
+    background-color: #222;
+    border-right: 1px solid rgba(0, 0, 0, 0.45);
+
+    .ccb-group {
+        display: flex;
+        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 {
+        height: 1px;
+        margin: 4px 6px;
+        background-color: rgba(255, 255, 255, 0.06);
+    }
+
+    /* New-style buttons (icons with FA) */
+    .ccb-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 28px;
+        margin: 0 3px;
+        color: @project-panel-text-2;
+        font-size: 15px;
+        border-radius: 4px;
+        cursor: pointer;
+        text-decoration: none;
+        transition: color 0.15s ease, background-color 0.15s ease;
+
+        i {
+            pointer-events: none;
+        }
+
+        &:hover {
+            color: @project-panel-text-1;
+            background-color: rgba(255, 255, 255, 0.08);
+            text-decoration: none;
+        }
+
+        &:active {
+            background-color: rgba(255, 255, 255, 0.12);
+        }
+
+        &.disabled,
+        &[aria-disabled="true"] {
+            opacity: 0.4;
+            pointer-events: none;
+        }
+    }
+
+    /* Nudge the collapse-editor icon up so it visually aligns with titlebar icons */
+    #ccbCollapseEditorBtn {
+        margin-top: -2px;
+    }
+
+    /* Nav buttons: suppress legacy sprite styles (NavigationProvider toggles enabled/disabled class) */
+    #searchNav,
+    #navBackButton,
+    #navForwardButton {
+        background: transparent !important;
+        top: auto !important;
+        padding: 0 !important;
+        width: auto !important;
+        height: 28px !important;
+        content: normal !important;
+        opacity: 1;
+    }
+
+    #navBackButton.nav-back-btn-disabled,
+    #navForwardButton.nav-forward-btn-disabled {
+        opacity: 0.35;
+        pointer-events: none;
+    }
+
+    /* Vertical filename label — clicking reveals the current file in the
+       file tree, mirroring the old binoculars button. */
+    .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;
+            writing-mode: vertical-rl;
+            transform: rotate(180deg);
+            text-orientation: mixed;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: @project-panel-text-1;
+            font-size: 13px;
+            font-weight: 500;
+        }
+
+        &:hover .ccb-file-name {
+            text-decoration: underline;
+        }
+    }
+}
+
+/* Editor collapse: actual layout handled in JS via .content width/visibility */
+.ccb-editor-collapsed .content {
+    overflow: hidden;
+}
+
+/* Visually move the sidebar's right-resizer to the right edge of the central
+   control bar, so the drag handle sits between the control bar and the editor
+   / live-preview area. The Resizer keeps the handle at `left: sidebar.width`
+   internally (and keeps bumping it back after reposition), so a transform is
+   used here instead of overriding `left`. Hit-testing follows the transform.
+   When the sidebar is hidden the Resizer moves the handle out to become a
+   sibling of #sidebar inside .main-view — apply the same shift there. */
+#sidebar > .horz-resizer,
+.main-view > .horz-resizer {
+    transform: translateX(@central-control-bar-width);
+}
+
+/* In design mode the sidebar resizer doubles as the sidebar↔live-preview
+   splitter — hide the main-toolbar's own left-resizer so there aren't two
+   overlapping handles in the same region. */
+.ccb-editor-collapsed #main-toolbar > .horz-resizer {
+    display: none;
+}
+
+/* Cap the sidebar in design mode so the live-preview panel always keeps at
+   least ~200px of its own. A percentage of the viewport (e.g. 70vw) became
+   too wide on large screens — the live preview would shrink to a useless
+   sliver. Enforcing this via CSS max-width stops the drag itself rather than
+   snapping back after the Resizer has already written a larger value, which
+   also avoids ResizeObserver loop warnings from rapid width writes. The
+   230px accounts for the 30px control bar plus a 200px LP minimum. */
+.ccb-editor-collapsed #sidebar {
+    max-width: ~"calc(100vw - 230px)";
+}
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index cbdc76edd9..38c48a97c9 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -49,6 +49,7 @@
 @import "Extn-SidebarTabs.less";
 @import "Extn-BottomPanelTabs.less";
 @import "Extn-AIChatPanel.less";
+@import "CentralControlBar.less";
 @import "Extn-Terminal.less";
 @import "UserProfile.less";
 @import "phoenix-pro.less";
@@ -265,7 +266,7 @@ a, img {
 
     .content {
         padding: 0;
-        left: @sidebar-width;  // changed dynamically via Resizer
+        left: (@sidebar-width + 30px);  // changed dynamically via Resizer + CentralControlBar
         right: @main-toolbar-width;
         z-index: @z-index-brackets-main-content;
         border-left: 2px solid rgba(255, 255, 255, 0.10);
@@ -2733,6 +2734,96 @@ textarea.exclusions-editor {
     }
 }
 
+// Spotlight-style floating Quick Open picker used while in design mode, where
+// the standard ModalBar has no editor space to mount into.
+// No backdrop dim/blur — file switching is frequent and UI-wide visual
+// changes feel jarring. The overlay only exists to host the centered bar
+// and catch outside-clicks for dismiss.
+.quick-open-floating-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: @z-index-brackets-context-menu-base + 50;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 12vh;
+    background: transparent;
+    pointer-events: none;  // passthrough; the bar re-enables pointer events below
+}
+.quick-open-floating-bar {
+    width: 640px;
+    max-width: 90vw;
+    padding: 0;
+    background-color: @bc-panel-bg;
+    border: 1px solid @bc-panel-border;
+    border-radius: 10px 10px 0 0;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
+    pointer-events: auto;  // re-enable inside the bar (overlay disables it for passthrough)
+    .dark & {
+        background-color: @dark-bc-panel-bg;
+        border-color: @dark-bc-panel-border;
+    }
+
+    // Input line
+    > div {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 4px 14px;
+    }
+    input[type="text"] {
+        flex: 1 1 auto;
+        width: auto !important;
+        min-width: 0;
+        box-sizing: border-box;
+        height: 48px !important;
+        font-size: 18px;
+        line-height: 1.4;
+        padding: 10px 4px !important;
+        margin: 0 !important;
+        border: 0 !important;
+        outline: none !important;
+        background: transparent !important;
+        box-shadow: none !important;
+        color: @bc-text;
+        .dark & {
+            color: @dark-bc-text;
+        }
+        &::placeholder {
+            color: @bc-text-quiet;
+            .dark & { color: @dark-bc-text-quiet; }
+        }
+    }
+    .indexing-group {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        flex: 0 0 auto;
+        order: -1;  // spinner before input
+    }
+    .find-dialog-label {
+        flex: 0 0 auto;
+        color: @bc-text-quiet;
+        font-size: 12px;
+        .dark & { color: @dark-bc-text-quiet; }
+    }
+}
+// While the floating Quick Open is up, anchor the results dropdown to the
+// floating bar (it's the one styled to contain it). The dropdown is appended
+// to <body> by QuickSearchField; constrain its max-height so it never
+// overflows the viewport, and lift its z-index above the overlay so the
+// overlay's backdrop-filter doesn't blur the dropdown too.
+body:has(.quick-open-floating-overlay) .quick-search-container {
+    z-index: @z-index-brackets-context-menu-base + 51;
+    max-height: 60vh;
+    overflow-y: auto;
+    border-radius: 0 0 10px 10px;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
+}
+
 .quick-search-container {
     border: 1px solid @bc-panel-border;
     box-sizing: border-box;  // lets QuickSearchField size the width more nicely
diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
index b1f19e0a26..764fd3dc3d 100644
--- a/src/styles/brackets_patterns_override.less
+++ b/src/styles/brackets_patterns_override.less
@@ -211,28 +211,6 @@ a:focus {
             animation: none;
         }
     }
-    .nav .sidebar-toggle-btn {
-        float: left;
-        a {
-            display: inline-block;
-            padding: @menubar-top-padding 6px @menubar-bottom-padding;
-            border: 1px solid transparent;
-            font-size: @menu-item-font-size;
-            color: fadeout(@bc-menu-text, 50%);
-            cursor: default;
-            outline: none;
-            .dark & {
-                color: fadeout(@dark-bc-menu-text, 50%);
-            }
-            &:hover {
-                color: @bc-menu-text;
-                .dark & {
-                    color: @dark-bc-menu-text;
-                }
-            }
-        }
-    }
-
     .nav .hamburger-menu {
         float: left;
         .hamburger-toggle, .hamburger-toggle:hover, .hamburger-toggle:focus {
diff --git a/src/utils/FileTypeUtils.js b/src/utils/FileTypeUtils.js
new file mode 100644
index 0000000000..00790c3939
--- /dev/null
+++ b/src/utils/FileTypeUtils.js
@@ -0,0 +1,98 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+/**
+ * File-type classification helpers shared by live preview, Quick Open in
+ * design mode, and anywhere else that needs a quick "is this an HTML /
+ * markdown / previewable / server-rendered file?" check based on extension.
+ */
+define(function (require, exports, module) {
+
+    function getExtension(filePath) {
+        filePath = filePath || '';
+        let pathSplit = filePath.split('.');
+        return pathSplit && pathSplit.length > 1 ? pathSplit[pathSplit.length - 1] : '';
+    }
+
+    function isPDF(filePath) {
+        return getExtension(filePath).toLowerCase() === "pdf";
+    }
+
+    function isSVG(filePath) {
+        return getExtension(filePath).toLowerCase() === "svg";
+    }
+
+    function isImage(filePath) {
+        const extension = getExtension(filePath).toLowerCase();
+        return ["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp", "ico", "avif"].includes(extension);
+    }
+
+    function isMarkdownFile(filePath) {
+        return ['md', 'markdown', 'mdx'].includes(getExtension(filePath).toLowerCase());
+    }
+
+    function isHTMLFile(filePath) {
+        return ['html', 'htm', 'xhtml'].includes(getExtension(filePath).toLowerCase());
+    }
+
+    /**
+     * True for file types that can be rendered directly in the live preview
+     * panel (HTML, SVG, PDF, Markdown).
+     * @param {string} filePath
+     * @return {boolean}
+     */
+    function isPreviewableFile(filePath) {
+        // Only SVG images are previewable via this path; other images go to
+        // the image previewer. Markdown / HTML / PDF also render.
+        return isSVG(filePath) || isMarkdownFile(filePath) || isHTMLFile(filePath) || isPDF(filePath);
+    }
+
+    /**
+     * True for source files typically processed by a server-side runtime
+     * (PHP, ASP, JSP, Ruby/ERB, Python, ColdFusion, etc.).
+     * @param {string} filePath
+     * @return {boolean}
+     */
+    function isServerRenderedFile(filePath) {
+        const extension = getExtension(filePath).toLowerCase();
+        return [
+            "shtml",
+            "asp",
+            "aspx",
+            "php",
+            "jsp",
+            "jspx",
+            "cfm",
+            "cfc", // ColdFusion Component
+            "rb",  // Ruby file, used in Ruby on Rails for views with ERB
+            "erb", // Embedded Ruby, used in Ruby on Rails views
+            "py"   // Python file, used in web frameworks like Django or Flask for views
+        ].includes(extension);
+    }
+
+    exports.getExtension         = getExtension;
+    exports.isPDF                = isPDF;
+    exports.isSVG                = isSVG;
+    exports.isImage              = isImage;
+    exports.isHTMLFile           = isHTMLFile;
+    exports.isMarkdownFile       = isMarkdownFile;
+    exports.isPreviewableFile    = isPreviewableFile;
+    exports.isServerRenderedFile = isServerRenderedFile;
+});
diff --git a/src/view/CentralControlBar.js b/src/view/CentralControlBar.js
new file mode 100644
index 0000000000..098a286991
--- /dev/null
+++ b/src/view/CentralControlBar.js
@@ -0,0 +1,437 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+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 BAR_WIDTH = 30;
+
+    let $bar;
+    let $sidebar;
+    let $content;
+    let $fileLabel;
+    let $fileName;
+    let editorCollapsed = false;
+    let savedToolbarWidth = null;
+    let livePreviewWasOpen = false;
+    let savedSidebarMaxSize = null;
+    let applyingCollapsedLayout = false;
+
+    function _getRenderedSidebarWidth() {
+        // Use offsetWidth (not jQuery's outerWidth) to force a synchronous reflow
+        // read — with the design-mode `max-width` cap on #sidebar, style.width
+        // and rendered width can diverge mid-drag, and outerWidth has returned the
+        // uncapped style value in some frames which left CCB / main-toolbar stuck
+        // at stale offsets.
+        if (!$sidebar || !$sidebar.is(":visible")) {
+            return 0;
+        }
+        return $sidebar[0].offsetWidth || 0;
+    }
+
+    function _syncLeftPositions() {
+        if (!$sidebar || !$bar || !$content) {
+            return;
+        }
+        const sidebarWidth = _getRenderedSidebarWidth();
+        $bar.css("left", sidebarWidth + "px");
+        if (!editorCollapsed) {
+            $content.css("left", (sidebarWidth + BAR_WIDTH) + "px");
+        } else {
+            const mainToolbar = document.getElementById("main-toolbar");
+            const fullToolbarWidth = Math.max(0, window.innerWidth - sidebarWidth - BAR_WIDTH);
+            if (mainToolbar) {
+                mainToolbar.style.setProperty("left", (sidebarWidth + BAR_WIDTH) + "px", "important");
+                mainToolbar.style.setProperty("right", "auto", "important");
+                mainToolbar.style.setProperty("width", fullToolbarWidth + "px", "important");
+            }
+        }
+    }
+
+    function _updateFileLabel() {
+        if (!$fileLabel) {
+            return;
+        }
+        const doc = DocumentManager.getCurrentDocument();
+        if (!doc) {
+            $fileLabel.removeClass("is-dirty");
+            $fileName.text("");
+            $fileLabel.attr("title", "");
+            return;
+        }
+        const name = doc.file && doc.file.name ? doc.file.name : "";
+        const fullPath = doc.file && doc.file.fullPath ? doc.file.fullPath : "";
+        const displayPath = fullPath && Phoenix && Phoenix.app && Phoenix.app.getDisplayPath
+            ? Phoenix.app.getDisplayPath(fullPath)
+            : fullPath || name;
+        $fileName.text(name);
+        $fileLabel.attr("title", displayPath);
+        $fileLabel.toggleClass("is-dirty", !!doc.isDirty);
+    }
+
+    function _executeCmd(id) {
+        CommandManager.execute(id);
+    }
+
+    function _isLivePreviewOpen() {
+        const panel = WorkspaceManager.getPanelForID && WorkspaceManager.getPanelForID("live-preview-panel");
+        return !!(panel && panel.isVisible());
+    }
+
+    function _applyCollapsedLayout() {
+        if (applyingCollapsedLayout) {
+            return;
+        }
+        applyingCollapsedLayout = true;
+        try {
+            const mainToolbar = document.getElementById("main-toolbar");
+            const sidebarWidth = _getRenderedSidebarWidth();
+            const fullToolbarWidth = Math.max(0, window.innerWidth - sidebarWidth - BAR_WIDTH);
+            // Keep .content in flow (display:block) but collapse it to zero width to avoid
+            // TabBar infinite-loop when its ancestor becomes :hidden. visibility:hidden keeps
+            // layout queries stable while the bar animates out.
+            $content.css({ width: 0, "min-width": 0, right: "auto", visibility: "hidden", "pointer-events": "none" });
+            // Use !important on the main-toolbar geometry so WorkspaceManager's clamping
+            // inside handleWindowResize can't fight our width during active window resizes
+            // (which produced a visible width flicker in full-preview mode).
+            if (mainToolbar) {
+                mainToolbar.style.setProperty("left", (sidebarWidth + BAR_WIDTH) + "px", "important");
+                mainToolbar.style.setProperty("right", "auto", "important");
+                mainToolbar.style.setProperty("width", fullToolbarWidth + "px", "important");
+            }
+            // Sidebar's data-maxsize is a percentage of _sideBarMaxSize() (main-view width
+            // minus all non-content siblings). In collapsed mode #main-toolbar is itself a
+            // huge sibling, so _sideBarMaxSize collapses to ~sidebarWidth, and every window
+            // resize clamps the sidebar a pixel smaller (Resizer.js updateResizeLimits) —
+            // producing a slow shrink a short moment after each resize. Raising the
+            // percentage well above 100% short-circuits the clamp in this mode while still
+            // coming from the same upstream code path. Numeric values are ignored by that
+            // code path, so we must use a percentage string.
+            if (savedSidebarMaxSize === null) {
+                savedSidebarMaxSize = $sidebar.data("maxsize");
+            }
+            $sidebar.data("maxsize", "1000%");
+            if (WorkspaceManager.recomputeLayout) {
+                WorkspaceManager.recomputeLayout(true);
+            }
+        } finally {
+            applyingCollapsedLayout = false;
+        }
+    }
+
+    function _restoreExpandedLayout(skipToolbarRestore) {
+        const $mainToolbar = $("#main-toolbar");
+        const mainToolbar = $mainToolbar[0];
+        if (mainToolbar) {
+            mainToolbar.style.removeProperty("left");
+            mainToolbar.style.removeProperty("right");
+            mainToolbar.style.removeProperty("width");
+        }
+        $mainToolbar.css({ left: "", right: "", width: "" });
+        $content.css({ width: "", "min-width": "", right: "", visibility: "", "pointer-events": "" });
+        savedToolbarWidth = null;
+        livePreviewWasOpen = false;
+        if (savedSidebarMaxSize !== null) {
+            $sidebar.data("maxsize", savedSidebarMaxSize);
+            savedSidebarMaxSize = null;
+        }
+        if (skipToolbarRestore) {
+            // Live preview panel was just hidden (e.g. user clicked toolbar-go-live
+            // while in design mode). WorkspaceManager._hidePluginSidePanel has
+            // already sized #main-toolbar correctly for the no-panel state, so we
+            // only need to clear our design-mode overrides and sync positions.
+            _syncLeftPositions();
+            if (WorkspaceManager.recomputeLayout) {
+                WorkspaceManager.recomputeLayout(true);
+            }
+            return;
+        }
+        // The <> button never closes live preview. If we have a saved width from
+        // before the collapse (LP was already open), restore it. If LP was opened
+        // by the collapse action, fall back to the default panel size so it stays
+        // visibly open at a reasonable width.
+        const defaultWidth = Math.floor(window.innerWidth / 2.5);
+        let targetWidth = (savedToolbarWidth && savedToolbarWidth > 50) ? savedToolbarWidth : defaultWidth;
+        // If the sidebar was resized larger while collapsed (e.g. to fill most of
+        // the screen), restoring the pre-collapse live-preview width would push
+        // main-toolbar back under the sidebar. Clamp so sidebar + CCB + a
+        // reasonable minimum editor width still fits in the window; if even the
+        // min doesn't fit, trim the sidebar so the live-preview panel keeps its
+        // own declared minWidth (below which the panel renders broken).
+        const MIN_EDITOR_WIDTH = 200;
+        const livePanel = WorkspaceManager.getPanelForID &&
+            WorkspaceManager.getPanelForID("live-preview-panel");
+        const panelIconsWidth = $("#plugin-icons-bar").outerWidth() || 30;
+        const minLPToolbarWidth = ((livePanel && livePanel.minWidth) || 0) + panelIconsWidth;
+        const sidebarWidth = _getRenderedSidebarWidth();
+        const availableForLP = window.innerWidth - sidebarWidth - BAR_WIDTH - MIN_EDITOR_WIDTH;
+        if (targetWidth > availableForLP) {
+            targetWidth = Math.max(minLPToolbarWidth, availableForLP);
+        }
+        if (targetWidth < minLPToolbarWidth) {
+            targetWidth = minLPToolbarWidth;
+        }
+        if (sidebarWidth + BAR_WIDTH + targetWidth + MIN_EDITOR_WIDTH > window.innerWidth) {
+            const trimmedSidebar = Math.max(30, window.innerWidth - BAR_WIDTH - targetWidth - MIN_EDITOR_WIDTH);
+            $sidebar.width(trimmedSidebar);
+            // jQuery .width() sidesteps Resizer — manually reposition its handle so
+            // the resizer doesn't stay stuck at the pre-trim position.
+            const resync = $sidebar.data("resyncSizer");
+            if (typeof resync === "function") {
+                resync();
+            }
+        }
+        $mainToolbar.width(targetWidth);
+        $content.css("right", targetWidth + "px");
+        _syncLeftPositions();
+        if (WorkspaceManager.recomputeLayout) {
+            WorkspaceManager.recomputeLayout(true);
+        }
+    }
+
+    function _setEditorCollapsed(collapsed, opts) {
+        const wantCollapsed = !!collapsed;
+        if (wantCollapsed === editorCollapsed) {
+            return;
+        }
+        const skipToolbarRestore = !!(opts && opts.skipToolbarRestore);
+        // Capture sidebar's currently rendered width BEFORE flipping the body
+        // class. In design mode the `max-width` cap can make the rendered
+        // width smaller than sidebar.style.width. Removing the class drops the
+        // cap and the sidebar would otherwise snap back to the stale style.width.
+        if (editorCollapsed && !wantCollapsed && $sidebar && $sidebar[0]) {
+            const rendered = _getRenderedSidebarWidth();
+            if (rendered > 0) {
+                $sidebar[0].style.width = rendered + "px";
+                const resync = $sidebar.data("resyncSizer");
+                if (typeof resync === "function") {
+                    resync();
+                }
+            }
+        }
+        editorCollapsed = wantCollapsed;
+        $("body").toggleClass("ccb-editor-collapsed", editorCollapsed);
+        const $collapseBtn = $("#ccbCollapseEditorBtn");
+        $collapseBtn.toggleClass("is-active", editorCollapsed)
+            .attr("title", editorCollapsed ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE);
+        $collapseBtn.find("i").attr("class", editorCollapsed ? "fa-solid fa-code" : "fa-solid fa-feather");
+        if (_toggleDesignModeCommand) {
+            _toggleDesignModeCommand.setChecked(editorCollapsed);
+        }
+        if (WorkspaceManager.setDesignMode) {
+            WorkspaceManager.setDesignMode(editorCollapsed);
+        }
+
+        if (editorCollapsed) {
+            livePreviewWasOpen = _isLivePreviewOpen();
+            savedToolbarWidth = livePreviewWasOpen ? ($("#main-toolbar").outerWidth() || null) : null;
+            if (!livePreviewWasOpen) {
+                // Open live preview first, then apply collapsed layout after the panel mounts.
+                CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW).always(function () {
+                    if (editorCollapsed) {
+                        _applyCollapsedLayout();
+                    }
+                });
+                return;
+            }
+            _applyCollapsedLayout();
+        } else {
+            _restoreExpandedLayout(skipToolbarRestore);
+        }
+    }
+
+    function _updateSidebarToggleIcon() {
+        const $btn = $("#ccbSidebarToggleBtn");
+        if (!$btn.length) {
+            return;
+        }
+        const isVisible = $("#sidebar").is(":visible");
+        $btn.find("i").attr("class", isVisible ? "fa-solid fa-angles-left" : "fa-solid fa-angles-right");
+    }
+
+    function _wireButtons() {
+        $("#ccbUndoBtn").on("click", function (e) { e.preventDefault(); _executeCmd(Commands.EDIT_UNDO); });
+        $("#ccbRedoBtn").on("click", function (e) { e.preventDefault(); _executeCmd(Commands.EDIT_REDO); });
+        $("#ccbSaveBtn").on("click", function (e) { e.preventDefault(); _executeCmd(Commands.FILE_SAVE); });
+        $("#ccbCollapseEditorBtn").on("click", function (e) {
+            e.preventDefault();
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+        });
+        $("#ccbSidebarToggleBtn").on("click", function (e) {
+            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,
+        Commands.VIEW_TOGGLE_DESIGN_MODE, function () {
+            _setEditorCollapsed(!editorCollapsed);
+        });
+
+    AppInit.htmlReady(function () {
+        $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
+        // strings; set the localized versions up front so the initial render
+        // reflects the user's locale. (searchNav / navBackButton /
+        // navForwardButton get their localized titles from NavigationProvider.)
+        $("#ccbCollapseEditorBtn").attr("title", Strings.CCB_SWITCH_TO_DESIGN_MODE);
+        $("#ccbSidebarToggleBtn").attr("title", Strings.CMD_TOGGLE_SIDEBAR);
+        $("#ccbUndoBtn").attr("title", Strings.CMD_UNDO);
+        $("#ccbRedoBtn").attr("title", Strings.CMD_REDO);
+        $("#ccbSaveBtn").attr("title", Strings.CMD_FILE_SAVE);
+        _syncLeftPositions();
+
+        // While the sidebar is being dragged we only reposition CCB / main-toolbar.
+        // Running the full collapsed-layout (with recomputeLayout) on every resize
+        // update fires cascading editor relayouts that can make the sidebar drag
+        // misbehave — the heavy work is done once at resize-end instead. The
+        // design-mode cap itself is enforced in CSS (`max-width: calc(100vw -
+        // 230px)`, i.e. CCB + LP minimum) so the
+        // browser refuses to render past it no matter what the Resizer writes.
+        // In design mode the sidebar's right-resizer doubles as the
+        // sidebar↔live-preview splitter (the main-toolbar's own left-resizer is
+        // hidden). Forward the sidebar's panel-resize events to #main-toolbar
+        // so listeners that watch main-toolbar (e.g. the live-preview resize
+        // ruler / media-query ruler in lpedit-helper) still react to the drag.
+        function _forwardResizeToMainToolbar(type) {
+            if (!editorCollapsed) {
+                return;
+            }
+            const mtWidth = $("#main-toolbar").outerWidth() || 0;
+            $("#main-toolbar").trigger(type, [mtWidth]);
+        }
+        $sidebar.on("panelResizeStart.ccb", function () {
+            _forwardResizeToMainToolbar("panelResizeStart");
+        });
+        $sidebar.on("panelResizeUpdate.ccb", function () {
+            _syncLeftPositions();
+            _forwardResizeToMainToolbar("panelResizeUpdate");
+        });
+        $sidebar.on("panelResizeEnd.ccb panelCollapsed.ccb panelExpanded.ccb", function (e) {
+            _syncLeftPositions();
+            if (editorCollapsed) {
+                _applyCollapsedLayout();
+            }
+            _updateSidebarToggleIcon();
+            if (e.type === "panelResizeEnd") {
+                _forwardResizeToMainToolbar("panelResizeEnd");
+            }
+        });
+        $(window).on("resize.ccb", function () {
+            _syncLeftPositions();
+            if (editorCollapsed) {
+                _applyCollapsedLayout();
+            }
+        });
+        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN + ".ccb", function () {
+            if (editorCollapsed) {
+                _applyCollapsedLayout();
+            }
+        });
+        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_HIDDEN + ".ccb", function (e, panelID) {
+            // Closing the live-preview panel (e.g. via the toolbar-go-live button)
+            // while in design mode leaves a blank area where live preview used to
+            // be — exit design mode so the editor comes back in its place. Skip
+            // our own toolbar-width restore: WorkspaceManager._hidePluginSidePanel
+            // has already shrunk #main-toolbar back to the icon-bar width, and
+            // restoring the pre-collapse live-preview width here would re-open
+            // a dead zone where LP used to be.
+            if (editorCollapsed && panelID === "live-preview-panel") {
+                _setEditorCollapsed(false, { skipToolbarRestore: true });
+                return;
+            }
+            if (editorCollapsed) {
+                _applyCollapsedLayout();
+            }
+        });
+        // WorkspaceManager's handleWindowResize runs _clampPluginPanelWidth on every
+        // window resize, which caps #main-toolbar at min(innerWidth * 0.75, innerWidth
+        // - sidebar - 100). That's tighter than what we want in collapsed mode (fill
+        // to innerWidth - sidebar - 30), leaving a blank gap on the right. Listen for
+        // the layout-update event that fires after the clamp and reassert our widths.
+        // The applyingCollapsedLayout guard breaks the recursion because our own
+        // recomputeLayout call would otherwise re-enter this handler.
+        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_UPDATE_LAYOUT + ".ccb", function () {
+            if (editorCollapsed) {
+                _applyCollapsedLayout();
+            }
+        });
+
+        // In design mode #main-toolbar's geometry is pinned with !important so
+        // external callers of WorkspaceManager.setPluginPanelWidth(w) can't
+        // actually size the live-preview panel. Wrap the API: while collapsed,
+        // translate the requested live-preview content width into a sidebar
+        // width so the sidebar drag/clamp/sync pipeline produces the equivalent
+        // layout. In normal mode we fall through to the original implementation.
+        const _origSetPluginPanelWidth = WorkspaceManager.setPluginPanelWidth;
+        if (typeof _origSetPluginPanelWidth === "function") {
+            WorkspaceManager.setPluginPanelWidth = function (width) {
+                if (!editorCollapsed) {
+                    return _origSetPluginPanelWidth.apply(this, arguments);
+                }
+                const iconsBarWidth = $("#plugin-icons-bar").outerWidth() || 30;
+                const requestedToolbar = width + iconsBarWidth;
+                let newSidebar = window.innerWidth - requestedToolbar - BAR_WIDTH;
+                if (newSidebar < 0) {
+                    newSidebar = 0;
+                }
+                if ($sidebar && $sidebar[0]) {
+                    $sidebar[0].style.width = newSidebar + "px";
+                    const resync = $sidebar.data("resyncSizer");
+                    if (typeof resync === "function") {
+                        resync();
+                    }
+                }
+                _syncLeftPositions();
+                if (WorkspaceManager.recomputeLayout) {
+                    WorkspaceManager.recomputeLayout(true);
+                }
+            };
+        }
+
+        MainViewManager.on("currentFileChange.ccb", _updateFileLabel);
+        DocumentManager.on("dirtyFlagChange.ccb", _updateFileLabel);
+        DocumentManager.on("pathDeleted.ccb fileNameChange.ccb", _updateFileLabel);
+
+        _updateFileLabel();
+        _updateSidebarToggleIcon();
+    });
+
+
+    exports.isEditorCollapsed = function () { return editorCollapsed; };
+    exports.setEditorCollapsed = _setEditorCollapsed;
+});
diff --git a/src/view/DefaultPanelView.js b/src/view/DefaultPanelView.js
index 03e3f9d3ed..07fc9d91b8 100644
--- a/src/view/DefaultPanelView.js
+++ b/src/view/DefaultPanelView.js
@@ -182,6 +182,15 @@ define(function (require, exports, module) {
             .attr("title", Strings.BOTTOM_PANEL_DEFAULT_TITLE);
 
         $drawerBtn.on("click", function () {
+            // Design mode collapses the editor and stretches live preview, which
+            // leaves no room for the bottom tools panel. Exit design mode first
+            // so the panel has somewhere to go.
+            // TODO: revisit once the tools panel can float / overlay the live
+            // preview without disrupting it, so users can peek at tools without
+            // leaving design mode.
+            if (WorkspaceManager.isInDesignMode()) {
+                CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+            }
             if (_panel.isVisible()) {
                 _panel.hide();
             } else {
diff --git a/src/view/WorkspaceManager.js b/src/view/WorkspaceManager.js
index 4581e8d60c..6cabd82c2b 100644
--- a/src/view/WorkspaceManager.js
+++ b/src/view/WorkspaceManager.js
@@ -74,6 +74,13 @@ define(function (require, exports, module) {
      */
     const EVENT_WORKSPACE_PANEL_HIDDEN = PanelView.EVENT_PANEL_HIDDEN;
 
+    /**
+     * Event triggered when design mode (editor collapsed, full live preview) is
+     * entered or exited. Payload: `(active: boolean)`.
+     * @const
+     */
+    const EVENT_WORKSPACE_DESIGN_MODE_CHANGE = "workspaceDesignModeChange";
+
     /**
      * Width of the main toolbar in pixels.
      * @const
@@ -619,6 +626,35 @@ define(function (require, exports, module) {
         recomputeLayout(true);
     }
 
+    // Design mode tracks whether the editor is fully collapsed to show only the
+    // live-preview panel. The flag is owned by view/CentralControlBar but mirrored
+    // here so other modules don't need to reach into the control bar.
+    let _isInDesignMode = false;
+
+    /**
+     * Returns true while the workspace is in design mode (editor collapsed and
+     * live preview expanded to fill the editor area).
+     * @returns {boolean}
+     */
+    function isInDesignMode() {
+        return _isInDesignMode;
+    }
+
+    /**
+     * Sets the design-mode flag and fires EVENT_WORKSPACE_DESIGN_MODE_CHANGE when
+     * the value actually changes. Intended to be called by the control bar; other
+     * callers should use the dedicated toggle command instead.
+     * @param {boolean} active
+     */
+    function setDesignMode(active) {
+        const next = !!active;
+        if (_isInDesignMode === next) {
+            return;
+        }
+        _isInDesignMode = next;
+        exports.trigger(EVENT_WORKSPACE_DESIGN_MODE_CHANGE, _isInDesignMode);
+    }
+
     // Escape key and toggle panel special handling
     let _escapeKeyConsumers = {};
 
@@ -776,6 +812,9 @@ define(function (require, exports, module) {
     exports.EVENT_WORKSPACE_UPDATE_LAYOUT   = EVENT_WORKSPACE_UPDATE_LAYOUT;
     exports.EVENT_WORKSPACE_PANEL_SHOWN     = EVENT_WORKSPACE_PANEL_SHOWN;
     exports.EVENT_WORKSPACE_PANEL_HIDDEN    = EVENT_WORKSPACE_PANEL_HIDDEN;
+    exports.EVENT_WORKSPACE_DESIGN_MODE_CHANGE = EVENT_WORKSPACE_DESIGN_MODE_CHANGE;
+    exports.isInDesignMode                  = isInDesignMode;
+    exports.setDesignMode                   = setDesignMode;
     exports.DEFAULT_PANEL_ID                = DEFAULT_PANEL_ID;
 
     /**
diff --git a/test/control-bar-tests-todo.md b/test/control-bar-tests-todo.md
new file mode 100644
index 0000000000..28cfaef60b
--- /dev/null
+++ b/test/control-bar-tests-todo.md
@@ -0,0 +1,232 @@
+# Central Control Bar & Design Mode — Tests TODO
+
+Planned as `mainview`-category integration tests (spawns full Phoenix iframe so
+sidebar, CCB, live-preview panel, and main-toolbar are all real). Single suite:
+
+```js
+describe("mainview: central control bar + design mode", function () { … });
+```
+
+Keep this file updated as we add coverage; remove lines as suites land.
+
+---
+
+## 1. Layout / DOM structure
+
+- [ ] `#centralControlBar` exists at boot, positioned between sidebar and
+      `.content`, 30px wide.
+- [ ] CCB groups render in order: collapse-editor, sidebar-toggle, undo/redo,
+      save, nav (search / back / forward), vertical filename label.
+- [ ] Sidebar's `data-minsize` is `30` (so drag can't auto-collapse below CCB).
+- [ ] Sidebar's resizer handle is shifted right of the CCB via CSS
+      `transform: translateX(30px)` — clicking at `sidebar.right + 30` lands
+      on the resizer element.
+- [ ] When the sidebar is hidden, the Resizer moves the handle to be a sibling
+      of `#sidebar` inside `.main-view`; the same shift still applies.
+
+## 2. CCB buttons
+
+- [ ] Undo / Redo / Save buttons fire `Commands.EDIT_UNDO`, `EDIT_REDO`,
+      `FILE_SAVE` respectively.
+- [ ] Search / Back / Forward / Show-in-Tree buttons still trigger the
+      `NavigationProvider` behaviors after being moved out of `#mainNavBarRight`.
+- [ ] `#ccbSidebarToggleBtn` executes `VIEW_HIDE_SIDEBAR` and the icon flips
+      `fa-angles-left` ↔ `fa-angles-right` on panelCollapsed/panelExpanded.
+- [ ] The old `#sidebar-toggle-btn` in the menubar is NOT in the DOM.
+- [ ] Clicking `#ccbFileLabel` executes `NAVIGATE_SHOW_IN_FILE_TREE` and (if
+      sidebar was hidden) re-opens the sidebar as part of that command.
+- [ ] File label shows the current doc's `file.name` and uses
+      `Phoenix.app.getDisplayPath` for its tooltip.
+- [ ] Dirty indicator dot toggles with `DocumentManager`'s `dirtyFlagChange`.
+
+## 3. Toggle Design Mode command
+
+- [ ] `Commands.VIEW_TOGGLE_DESIGN_MODE === "view.toggleDesignMode"` is
+      registered at module load, visible via `CommandManager.get`.
+- [ ] Default keybinding: `Ctrl-F11` (from `base-config/keyboard.json`).
+- [ ] File menu has "Toggle Design Mode" directly below "Live Preview" and
+      above "Reload Live Preview".
+- [ ] Command's checked state mirrors `WorkspaceManager.isInDesignMode()` on
+      both entry and exit.
+- [ ] Clicking `#ccbCollapseEditorBtn` routes through the command
+      (verify via a spy on `CommandManager.execute`).
+- [ ] Icon swap: `fa-feather` (expanded) ↔ `fa-code` (design mode). Title
+      swap: "Switch to Visual Edit" ↔ "Switch to Code Editor".
+
+## 4. Enter design mode
+
+- [ ] With live preview closed: executing the toggle first opens LP (verify a
+      single execution of `FILE_LIVE_FILE_PREVIEW`), then applies collapsed
+      layout on its `.always()`.
+- [ ] With live preview open: sidebar width is preserved, `.content` goes to
+      `width: 0`, `#main-toolbar` gets `left: sidebarW + 30`, `width:
+      innerWidth - sidebarW - 30` with `!important`, `right: auto`.
+- [ ] `savedToolbarWidth` captures pre-collapse `#main-toolbar.outerWidth` for
+      later restore (only when LP was already open).
+- [ ] `$sidebar.data("maxsize")` is stored and replaced with `"1000%"` so
+      `Resizer.updateResizeLimits` doesn't shrink the sidebar on subsequent
+      window resizes.
+- [ ] `#main-toolbar > .horz-resizer` gets `display: none` via CSS.
+- [ ] `document.body` gets class `ccb-editor-collapsed`.
+- [ ] `WorkspaceManager.isInDesignMode()` returns `true` and
+      `EVENT_WORKSPACE_DESIGN_MODE_CHANGE` fires with `true`.
+
+## 5. Exit design mode
+
+- [ ] Before flipping the body class, `sidebar.style.width` is pinned to the
+      currently rendered (max-width-capped) value so removing the cap
+      doesn't cause the sidebar to snap back to the stale uncapped width.
+- [ ] `Resizer.resyncSizer` runs after the pin so the handle follows.
+- [ ] Normal exit restores `#main-toolbar` to `savedToolbarWidth` (LP had
+      been open pre-collapse) or `innerWidth / 2.5` default (LP was opened by
+      the toggle itself). Never closes LP.
+- [ ] Exit clamps: sidebar + CCB + toolbar + 200 (min editor) ≤ window; if
+      the pre-collapse toolbar width would overflow, trim the sidebar first
+      and `data("resyncSizer")()` afterwards.
+- [ ] `livePanel.minWidth + iconsBar` lower bound is honored when picking
+      the restored toolbar width.
+- [ ] `$sidebar.data("maxsize")` is restored to its saved percentage.
+- [ ] `WorkspaceManager.isInDesignMode()` returns `false`, event fires with
+      `false`.
+
+## 6. Exit triggered by hiding live preview
+
+- [ ] Clicking `#toolbar-go-live` while in design mode:
+  - LP panel hides.
+  - `_restoreExpandedLayout` is called with `skipToolbarRestore: true`.
+  - `#main-toolbar` ends at the icon-bar-only width (WSM's
+    `_hidePluginSidePanel` width), not the pre-collapse LP size.
+  - `body.ccb-editor-collapsed` is removed.
+
+## 7. Sidebar drag in design mode
+
+- [ ] Dragging the sidebar resizer rightward grows the sidebar linearly
+      (1:1 with mouse delta) up to the CSS max-width cap.
+- [ ] CSS cap is `calc(100vw - 230px)`: on a 1500px viewport the rendered
+      sidebar never exceeds ~1270px even if style.width is much larger.
+- [ ] During a capped drag, `style.width` may exceed the render width (this
+      is expected); no ResizeObserver warnings land in `console.error`.
+- [ ] Dragging back left respects `data-minsize: 30` (no auto-collapse via
+      drag — only via the sidebar-toggle button).
+- [ ] During the drag, `panelResizeStart` / `panelResizeUpdate` /
+      `panelResizeEnd` are re-fired on `#main-toolbar` so
+      `lpedit-helper/resize-ruler-edit` activates the media-query ruler.
+
+## 8. Window resize while in design mode
+
+- [ ] After 20 synthetic `window.dispatchEvent(new Event("resize"))` bursts,
+      sidebar width is unchanged (`"1000%"` short-circuits the Resizer
+      shrink loop).
+- [ ] `#main-toolbar` stays flush with the window's right edge; the
+      `applyingCollapsedLayout` guard keeps our reassertion from recursing
+      through `EVENT_WORKSPACE_UPDATE_LAYOUT`.
+- [ ] With sidebar hidden, `main-toolbar` width tracks the full available
+      width (no ~70–300px gap from WSM clamping).
+
+## 9. Plugin toolbar resizer in design mode
+
+- [ ] `#main-toolbar > .horz-resizer` has `display: none` while collapsed —
+      user never sees / grabs it; sidebar resizer is the only splitter.
+- [ ] Normal mode: main-toolbar resizer is visible and draggable as usual.
+
+## 10. `WorkspaceManager.setPluginPanelWidth` in design mode
+
+- [ ] Setting width W while collapsed resizes the sidebar to
+      `window - W - pluginIcons - 30 (CCB)` (clamped to ≥ 0) and derives
+      main-toolbar width accordingly.
+- [ ] Setting width W in normal mode falls through to the original
+      implementation (which clamps against 75% window / `window - sidebar
+      - 100`).
+
+## 11. Cycle stability
+
+- [ ] Enter design → drag sidebar past cap → exit → re-enter: CCB,
+      main-toolbar, sidebar all end up aligned (`ccb.left === sidebar.right`,
+      `mainToolbar.left === sidebar.right + 30`).
+- [ ] After the cycle, `sidebar.style.width === sidebar.offsetWidth + "px"`
+      (pinned at the capped value, not the uncapped Resizer value).
+- [ ] Toggle back to normal mode preserves live preview (panel stays open
+      at `savedToolbarWidth` or the default).
+
+## 11b. Auto-exit design mode from conflicting surfaces
+
+Each of these invocations must exit design mode before running its
+own behavior. Verify `WorkspaceManager.isInDesignMode()` is `true`
+pre-action, then `false` post-action, and that the feature's UI
+renders on the normal editor chrome (not a blank / broken region).
+
+- [ ] Clicking `#app-drawer-button` while in design mode exits design
+      mode, then toggles the default (tools) bottom panel.
+- [ ] Running `Commands.CMD_FIND_IN_FILES` while in design mode exits
+      design mode before the find bar / results panel mount.
+- [ ] Running `Commands.NAVIGATE_QUICK_OPEN` while in design mode
+      exits design mode before Quick Open's modal bar is shown.
+- [ ] Clicking `#git-toolbar-icon` while in design mode exits design
+      mode, then `Panel.toggle()` opens/closes the git panel.
+- [ ] In the above four cases, when NOT in design mode the auto-exit
+      branch is skipped and the original behavior runs unchanged.
+
+Future follow-ups (no tests yet — track as TODOs alongside the site
+comments added in the source files):
+
+- [ ] Tools panel floats over live preview so users can peek without
+      leaving design mode.
+- [ ] Find in Files renders an overlay modal bar and a floating
+      results surface compatible with design mode.
+- [ ] Quick Open gets a spotlight-style floating picker usable in
+      design mode.
+- [ ] Git panel gains a floating variant for design mode.
+
+## 12. Integration with NoDistractions
+
+- [ ] Design mode + toggling `noDistractions` preference to `true`:
+  - sidebar hides,
+  - main-toolbar and bottom panels stay visible,
+  - `_hidePanelsIfRequired` is NOT invoked (spy).
+- [ ] Design mode + toggling `noDistractions` to `false`:
+  - sidebar shows,
+  - `_showPanelsIfRequired` is NOT invoked.
+- [ ] Normal mode + toggling `noDistractions`: original behavior —
+      `ViewUtils.hideMainToolBar()`, sidebar hide, panels hidden.
+
+## 13. Command / event surface
+
+- [ ] `WorkspaceManager.isInDesignMode` exists and returns the current state.
+- [ ] `WorkspaceManager.setDesignMode(true/false)` triggers
+      `EVENT_WORKSPACE_DESIGN_MODE_CHANGE` with the new boolean.
+- [ ] Repeat calls to `setDesignMode` with the same value do NOT fire the
+      event.
+- [ ] `exports.isEditorCollapsed()` / `setEditorCollapsed()` on CCB still
+      work (back-compat surface).
+
+## 14. Theming / colors
+
+- [ ] CCB background is `#222` regardless of theme (sanity check with a
+      forced light-theme and dark-theme load).
+- [ ] Icon color is `@project-panel-text-2`; hover transitions to
+      `@project-panel-text-1` + `rgba(255,255,255,0.08)` overlay.
+- [ ] File label has `cursor: pointer` and hover adds underline.
+
+## 15. Accessibility / titles
+
+- [ ] Each CCB button has a `title` attribute (collapse, sidebar toggle,
+      undo, redo, save, search, back, forward).
+- [ ] `ccbCollapseEditorBtn` title changes with state.
+- [ ] `ccbSidebarToggleBtn` title changes with sidebar visibility.
+
+---
+
+## Test harness notes
+
+- The suite is expected to run under the `mainview` category (embedded
+  Phoenix iframe). Use `SpecRunnerUtils.createWindowAndRun` or the existing
+  mainview bootstrap.
+- Never use `awaits(number)` — every "wait for X" must be `awaitsFor` on a
+  boolean condition.
+- Clean up between tests:
+  - `_setEditorCollapsed(false)` (if currently collapsed),
+  - close live preview via `FILE_LIVE_FILE_PREVIEW`,
+  - reset sidebar width via `$("#sidebar").width("")`.
+- Prefer `editor.*` / `WorkspaceManager.*` APIs over reading inline styles
+  directly; fall back to `offsetWidth` only where CSS `max-width` can make
+  `style.width` misleading.
diff --git a/test/spec/CodeInspection-fix-integ-test.js b/test/spec/CodeInspection-fix-integ-test.js
index a812d7c4c0..f368163b9d 100644
--- a/test/spec/CodeInspection-fix-integ-test.js
+++ b/test/spec/CodeInspection-fix-integ-test.js
@@ -19,7 +19,7 @@
  *
  */
 
-/*global describe, it, expect, beforeEach, beforeAll, afterEach, afterAll, waits, awaitsForDone, spyOn , awaits*/
+/*global describe, it, expect, beforeEach, beforeAll, afterEach, afterAll, waits, awaitsFor, awaitsForDone, spyOn , awaits*/
 
 define(function (require, exports, module) {
 
@@ -171,27 +171,34 @@ define(function (require, exports, module) {
         }
 
         it("should remember scroll positions", async function () {
-            if(Phoenix.isTestWindowGitHubActions && Phoenix.platform === "win" && Phoenix.isNativeApp){
-                // scroll test doesn't work in GitHub actions in windows desktop apps.
-                return;
-            }
-            await _openProjectFile("testFix.vbs");
+            // Test invariant: after switching away from a file and back, the
+            // problems table's scrollTop returns to whatever it was before
+            // the switch. This round-trip is the entire contract of the
+            // remember-scroll feature; it doesn't depend on the panel being
+            // tall enough to actually overflow (which is env-dependent and
+            // was the source of flakiness in headless / small-window runs).
 
+            await _openProjectFile("testFix.vbs");
             expect($("#problems-panel").is(":visible")).toBeTrue();
 
-            CodeInspection.scrollToProblem(40);
-            const line40ScrollTop = $(".table-container").scrollTop();
+            // Wait for row 40 to render so we know lint completed for testFix.
+            await awaitsFor(function () {
+                return fileLineProblem(40).length > 0;
+            }, "problem row for line 40 to render", 5000);
+
+            const $container = $(".table-container");
+            $container.scrollTop(200);
+            const savedScroll = $container.scrollTop();
             expect(fileLineProblem(40).is(":visible")).toBeTrue();
-            expect(line40ScrollTop).not.toBe(0);
 
+            // Switch away and back. The restore happens asynchronously after
+            // lint finishes on the re-opened file, so wait for the round-trip
+            // to land.
             await _openProjectFile("testNoFix.vbs");
-            // this has to be 0 as we have not scrolled this file yet
-            expect($(".table-container").scrollTop()).toBe(0);
-
-            // now switch back and verify if the old scroll position of the problem is restored.
             await _openProjectFile("testFix.vbs");
-            expect($(".table-container").scrollTop()).toBe(line40ScrollTop);
-            CodeInspection.scrollToProblem(40);
+            await awaitsFor(function () {
+                return $(".table-container").scrollTop() === savedScroll;
+            }, "table-container scrollTop to restore to saved position", 5000);
         });
 
         it("should show quick view over problem", async function () {
diff --git a/test/spec/SidebarTabs-integ-test.js b/test/spec/SidebarTabs-integ-test.js
index 0f664fadf1..6edd4b4262 100644
--- a/test/spec/SidebarTabs-integ-test.js
+++ b/test/spec/SidebarTabs-integ-test.js
@@ -527,7 +527,10 @@ define(function (require, exports, module) {
 
             it("should update the .content left offset", function () {
                 SidebarView.resize(350);
-                expect(parseInt(_$(".content").css("left"), 10)).toBe(350);
+                // The central control bar (#centralControlBar) sits between the
+                // sidebar and .content, so .content.left is offset by its width.
+                const ccbWidth = _$("#centralControlBar").outerWidth() || 0;
+                expect(parseInt(_$(".content").css("left"), 10)).toBe(350 + ccbWidth);
             });
 
             it("should persist the width in view state", function () {