feat: add opt-in docked editor toolbar (#1562)

* feat: add opt-in docked editor toolbar

* fix: align docked editor toolbar actions

* fix: move docked toolbar setting to navigation

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx

@@ -136,6 +136,7 @@ const VisualSectionContent: React.FC = () => {
         'fileEditorKeymap',
         'spacing',
         'inputBarOffset',
+        'expandedEditorToolbar',
         ...(!isVSCode ? ['terminalQuickKeys' as const] : []),
         'reportUsage',
     ]} />;

packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx

@@ -247,7 +247,7 @@ const normalizeUserMessageRenderingMode = (mode: unknown): 'markdown' | 'plain'
     return mode === 'markdown' ? 'markdown' : 'plain';
 };
 
-export type VisibleSetting = 'theme' | 'pwaInstallName' | 'pwaOrientation' | 'mobileKeyboardMode' | 'timeFormat' | 'weekStart' | 'fontSize' | 'terminalFontSize' | 'spacing' | 'inputBarOffset' | 'mermaidRendering' | 'userMessageRendering' | 'chatRenderMode' | 'messageTransport' | 'activityRenderMode' | 'collapsibleUserMessages' | 'stickyUserHeader' | 'wideChatLayout' | 'splitAssistantMessageActions' | 'diffLayout' | 'mobileStatusBar' | 'dotfiles' | 'fileViewerPreview' | 'reasoning' | 'showToolFileIcons' | 'showTurnChangedFiles' | 'expandedTools' | 'queueMode' | 'terminalQuickKeys' | 'fileEditorKeymap' | 'persistDraft' | 'inputSpellcheck' | 'reportUsage';
+export type VisibleSetting = 'theme' | 'pwaInstallName' | 'pwaOrientation' | 'mobileKeyboardMode' | 'timeFormat' | 'weekStart' | 'fontSize' | 'terminalFontSize' | 'spacing' | 'inputBarOffset' | 'mermaidRendering' | 'userMessageRendering' | 'chatRenderMode' | 'messageTransport' | 'activityRenderMode' | 'collapsibleUserMessages' | 'stickyUserHeader' | 'wideChatLayout' | 'splitAssistantMessageActions' | 'diffLayout' | 'mobileStatusBar' | 'dotfiles' | 'fileViewerPreview' | 'reasoning' | 'showToolFileIcons' | 'showTurnChangedFiles' | 'expandedTools' | 'queueMode' | 'terminalQuickKeys' | 'fileEditorKeymap' | 'persistDraft' | 'inputSpellcheck' | 'reportUsage' | 'expandedEditorToolbar';
 
 interface OpenChamberVisualSettingsProps {
     /** Which settings to show. If undefined, shows all. */
@@ -273,6 +273,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const setCollapsibleUserMessages = useUIStore(state => state.setCollapsibleUserMessages);
     const stickyUserHeader = useUIStore(state => state.stickyUserHeader);
     const setStickyUserHeader = useUIStore(state => state.setStickyUserHeader);
+    const expandedEditorToolbar = useUIStore(state => state.expandedEditorToolbar);
+    const setExpandedEditorToolbar = useUIStore(state => state.setExpandedEditorToolbar);
     const wideChatLayoutEnabled = useUIStore(state => state.wideChatLayoutEnabled);
     const setWideChatLayoutEnabled = useUIStore(state => state.setWideChatLayoutEnabled);
     const chatRenderMode = useUIStore(state => state.chatRenderMode);
@@ -415,6 +417,11 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
         void updateDesktopSettings({ stickyUserHeader: enabled });
     }, [setStickyUserHeader]);
 
+    const handleExpandedEditorToolbarChange = React.useCallback((enabled: boolean) => {
+        setExpandedEditorToolbar(enabled);
+        void updateDesktopSettings({ expandedEditorToolbar: enabled });
+    }, [setExpandedEditorToolbar]);
+
     const handleCollapsibleUserMessagesChange = React.useCallback((enabled: boolean) => {
         setCollapsibleUserMessages(enabled);
         void updateDesktopSettings({ collapsibleUserMessages: enabled });
@@ -533,7 +540,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
         ? hasLocalizationSettings
         : (shouldShow('theme') || showMobileLayoutSetting || shouldShow('pwaInstallName') || shouldShow('pwaOrientation') || shouldShow('timeFormat') || shouldShow('weekStart'));
     const hasLayoutSettings = shouldShow('fontSize') || shouldShow('terminalFontSize') || shouldShow('spacing') || shouldShow('inputBarOffset');
-    const hasNavigationSettings = (shouldShow('terminalQuickKeys') && !isMobile) || shouldShow('fileEditorKeymap');
+    const hasNavigationSettings = (shouldShow('terminalQuickKeys') && !isMobile) || shouldShow('fileEditorKeymap') || shouldShow('expandedEditorToolbar');
     const hasBehaviorSettings = shouldShow('mermaidRendering')
         || shouldShow('userMessageRendering')
         || shouldShow('chatRenderMode')
@@ -1320,6 +1327,29 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                     </div>
                                 </div>
                             )}
+                            {shouldShow('expandedEditorToolbar') && (
+                                <div
+                                    data-settings-item="appearance.expanded-editor-toolbar"
+                                    className="group flex cursor-pointer items-center gap-2 py-1.5"
+                                    role="button"
+                                    tabIndex={0}
+                                    aria-pressed={expandedEditorToolbar}
+                                    onClick={() => handleExpandedEditorToolbarChange(!expandedEditorToolbar)}
+                                    onKeyDown={(event) => {
+                                        if (event.key === ' ' || event.key === 'Enter') {
+                                            event.preventDefault();
+                                            handleExpandedEditorToolbarChange(!expandedEditorToolbar);
+                                        }
+                                    }}
+                                >
+                                    <Checkbox
+                                        checked={expandedEditorToolbar}
+                                        onChange={handleExpandedEditorToolbarChange}
+                                        ariaLabel={t('settings.openchamber.visual.field.expandedEditorToolbarAria')}
+                                    />
+                                    <span className="typography-ui-label text-foreground">{t('settings.openchamber.visual.field.expandedEditorToolbar')}</span>
+                                </div>
+                            )}
                             {shouldShow('terminalQuickKeys') && !isMobile && (
                                 <div
                                     data-settings-item="appearance.terminal-quick-keys"

packages/ui/src/components/views/FilesView.tsx

@@ -945,8 +945,9 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   const setPendingFileFocusPath = useUIStore((state) => state.setPendingFileFocusPath);
   const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
   const fileEditorKeymap = useUIStore((state) => state.fileEditorKeymap);
-  const settingsDefaultFileViewerPreview = useConfigStore((state) => state.settingsDefaultFileViewerPreview);
-  const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
+  const settingsDefaultFileViewerPreview = useConfigStore((state) => state.settingsDefaultFileViewerPreview);
+  const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
+  const settingsExpandedEditorToolbar = useUIStore((state) => state.expandedEditorToolbar);
 
   // Global mouseup to end drag selection
   React.useEffect(() => {
@@ -3005,11 +3006,19 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
     );
   }, [currentTheme.metadata.variant, pierreTheme, wrapLines]);
 
-  const renderFloatingFileControls = ({ exitFullscreenOnly = false }: { exitFullscreenOnly?: boolean } = {}) => {
+  const renderFloatingFileControls = ({
+    exitFullscreenOnly = false,
+    layout = 'floating',
+  }: { exitFullscreenOnly?: boolean; layout?: 'floating' | 'docked' } = {}) => {
     if (!selectedFile) {
       return null;
     }
 
+    const docked = layout === 'docked';
+    const wrapperCls = docked
+      ? 'pointer-events-auto flex flex-wrap items-center gap-1'
+      : 'pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-1 shadow-sm';
+
     const withTooltip = (label: React.ReactNode, trigger: React.ReactElement) => (
       <Tooltip>
         <TooltipTrigger asChild>
@@ -3022,7 +3031,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
     );
 
     return (
-      <div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-1 shadow-sm">
+      <div className={wrapperCls}>
         {canEdit && textViewMode === 'edit' && (
           <>
             {isSaving ? (
@@ -3560,10 +3569,27 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
         </div>
         ) : null}
 
+        {/* Row 2: Docked editor toolbar (expanded). Desktop-only opt-in. */}
+        {settingsExpandedEditorToolbar && !isMobile && selectedFile ? (
+          <div className="flex min-w-0 items-center gap-3 border-t border-border/40 bg-[var(--surface-subtle)] px-3 py-1">
+            {displaySelectedPath ? (
+              <span
+                className="min-w-0 flex-1 truncate typography-meta text-muted-foreground"
+                title={displaySelectedPath}
+              >
+                {displaySelectedPath}
+              </span>
+            ) : null}
+            <div className="ml-auto min-w-0 shrink-0 overflow-x-auto">
+              {renderFloatingFileControls({ layout: 'docked' })}
+            </div>
+          </div>
+        ) : null}
+
       </div>
 
       <div className="flex-1 min-h-0 min-w-0 relative">
-        {selectedFile && !isSearchOpen && (
+        {selectedFile && !isSearchOpen && !(settingsExpandedEditorToolbar && !isMobile) && (
           <div
             ref={floatingToolbarRef}
             className="absolute right-3 top-3 z-30"

packages/ui/src/lib/desktop.ts

@@ -145,6 +145,7 @@ export type DesktopSettings = {
   userMessageRenderingMode?: 'markdown' | 'plain';
   collapsibleUserMessages?: boolean;
   stickyUserHeader?: boolean;
+  expandedEditorToolbar?: boolean;
   wideChatLayoutEnabled?: boolean;
   showSplitAssistantMessageActions?: boolean;
   fontSize?: number;

packages/ui/src/lib/i18n/messages/en.settings.ts

@@ -1650,6 +1650,8 @@ export const settingsDict = {
   'settings.openchamber.visual.field.collapsibleUserMessages': 'Collapse Long User Messages',
   'settings.openchamber.visual.field.stickyUserHeaderAria': 'Sticky user header',
   'settings.openchamber.visual.field.stickyUserHeader': 'Sticky User Header',
+  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
+  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.wideChatLayoutAria': 'Wide chat layout',
   'settings.openchamber.visual.field.wideChatLayout': 'Wide Chat Layout',
   'settings.openchamber.visual.field.showSplitAssistantMessageActionsAria': 'Inline assistant actions',

packages/ui/src/lib/i18n/messages/es.settings.ts

@@ -1617,6 +1617,8 @@ export const settingsDict = {
   "settings.openchamber.visual.field.collapsibleUserMessages": "Contraer mensajes largos del usuario",
   "settings.openchamber.visual.field.stickyUserHeaderAria": "Encabezado del usuario fijo",
   "settings.openchamber.visual.field.stickyUserHeader": "Encabezado de usuario fijo",
+  "settings.openchamber.visual.field.expandedEditorToolbarAria": "Mostrar siempre la barra de herramientas del editor",
+  "settings.openchamber.visual.field.expandedEditorToolbar": "Mostrar siempre la barra de herramientas del editor (anclada bajo las pestañas)",
   "settings.openchamber.visual.field.wideChatLayoutAria": "Diseño de chat ancho",
   "settings.openchamber.visual.field.wideChatLayout": "Diseño de chat ancho",
   "settings.openchamber.visual.field.showSplitAssistantMessageActionsAria": "Acciones en línea del asistente",

packages/ui/src/lib/i18n/messages/fr.settings.ts

@@ -1593,6 +1593,8 @@ export const settingsDict = {
   'settings.openchamber.visual.field.collapsibleUserMessages': 'Réduire les longs messages utilisateur',
   'settings.openchamber.visual.field.stickyUserHeaderAria': 'En-tête utilisateur collant',
   'settings.openchamber.visual.field.stickyUserHeader': 'En-tête utilisateur collant',
+  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Toujours afficher la barre d’outils de l’éditeur',
+  'settings.openchamber.visual.field.expandedEditorToolbar': 'Toujours afficher la barre d’outils de l’éditeur (ancrée sous les onglets de fichiers)',
   'settings.openchamber.visual.field.wideChatLayoutAria': 'Large disposition de discussion',
   'settings.openchamber.visual.field.wideChatLayout': 'Disposition de discussion large',
   'settings.openchamber.visual.field.showSplitAssistantMessageActionsAria': 'Actions intégrées de l\'assistant',

packages/ui/src/lib/i18n/messages/ko.settings.ts

@@ -1617,6 +1617,8 @@ export const settingsDict = {
   'settings.openchamber.visual.field.collapsibleUserMessages': '긴 사용자 메시지 접기',
   'settings.openchamber.visual.field.stickyUserHeaderAria': '고정 사용자 헤더',
   'settings.openchamber.visual.field.stickyUserHeader': '고정 사용자 헤더',
+  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
+  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.wideChatLayoutAria': '넓은 채팅 레이아웃',
   'settings.openchamber.visual.field.wideChatLayout': '넓은 채팅 레이아웃',
   'settings.openchamber.visual.field.showSplitAssistantMessageActionsAria': '인라인 어시스턴트 작업',

packages/ui/src/lib/i18n/messages/pl.settings.ts

@@ -965,6 +965,8 @@ export const settingsDict = {
   'settings.openchamber.visual.field.spacingDensity': 'Gęstość odstępów',
   'settings.openchamber.visual.field.stickyUserHeader': 'Przyklejony nagłówek użytkownika',
   'settings.openchamber.visual.field.stickyUserHeaderAria': 'Przyklejony nagłówek użytkownika',
+  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
+  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.terminalFontSize': 'Rozmiar czcionki terminala',
   'settings.openchamber.visual.field.terminalQuickKeys': 'Szybkie klawisze terminala',
   'settings.openchamber.visual.field.terminalQuickKeysAria': 'Szybkie klawisze terminala',

packages/ui/src/lib/i18n/messages/pt-BR.settings.ts

@@ -1617,6 +1617,8 @@ export const settingsDict = {
   "settings.openchamber.visual.field.collapsibleUserMessages": "Recolher mensagens longas do usuário",
   "settings.openchamber.visual.field.stickyUserHeaderAria": "Cabeçalho do usuário fixo",
   "settings.openchamber.visual.field.stickyUserHeader": "Cabeçalho do usuário fixo",
+  "settings.openchamber.visual.field.expandedEditorToolbarAria": "Mostrar sempre a barra de ferramentas do editor",
+  "settings.openchamber.visual.field.expandedEditorToolbar": "Mostrar sempre a barra de ferramentas do editor (ancorada sob as abas)",
   "settings.openchamber.visual.field.wideChatLayoutAria": "Layout de chat amplo",
   "settings.openchamber.visual.field.wideChatLayout": "Layout de chat amplo",
   "settings.openchamber.visual.field.showSplitAssistantMessageActionsAria": "Ações inline do assistente",

packages/ui/src/lib/i18n/messages/uk.settings.ts

@@ -1617,6 +1617,8 @@ export const settingsDict = {
   "settings.openchamber.visual.field.collapsibleUserMessages": "Згортати довгі повідомлення користувача",
   "settings.openchamber.visual.field.stickyUserHeaderAria": "Закріплений заголовок користувача",
   "settings.openchamber.visual.field.stickyUserHeader": "Закріплений заголовок користувача",
+  "settings.openchamber.visual.field.expandedEditorToolbarAria": "Завжди показувати панель інструментів редактора",
+  "settings.openchamber.visual.field.expandedEditorToolbar": "Завжди показувати панель інструментів редактора (закріплена під вкладками)",
   "settings.openchamber.visual.field.wideChatLayoutAria": "Широкий макет чату",
   "settings.openchamber.visual.field.wideChatLayout": "Широкий макет чату",
   "settings.openchamber.visual.field.showSplitAssistantMessageActionsAria": "Вбудовані дії асистента",

packages/ui/src/lib/i18n/messages/zh-CN.settings.ts

@@ -1617,6 +1617,8 @@ export const settingsDict = {
   'settings.openchamber.visual.field.collapsibleUserMessages': '折叠较长的用户消息',
   'settings.openchamber.visual.field.stickyUserHeaderAria': '固定用户消息头',
   'settings.openchamber.visual.field.stickyUserHeader': '固定用户消息头',
+  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
+  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.wideChatLayoutAria': '宽聊天布局',
   'settings.openchamber.visual.field.wideChatLayout': '宽聊天布局',
   'settings.openchamber.visual.field.showSplitAssistantMessageActionsAria': '内联助手操作',

packages/ui/src/lib/i18n/messages/zh-TW.settings.ts

@@ -1538,6 +1538,8 @@
   'settings.openchamber.visual.field.collapsibleUserMessages': '收合較長的使用者訊息',
   'settings.openchamber.visual.field.stickyUserHeaderAria': '固定使用者訊息標頭',
   'settings.openchamber.visual.field.stickyUserHeader': '固定使用者訊息標頭',
+  'settings.openchamber.visual.field.expandedEditorToolbarAria': 'Always show editor toolbar',
+  'settings.openchamber.visual.field.expandedEditorToolbar': 'Always show editor toolbar (docked under the file tabs)',
   'settings.openchamber.visual.field.wideChatLayoutAria': '寬聊天佈局',
   'settings.openchamber.visual.field.wideChatLayout': '寬聊天佈局',
   'settings.openchamber.visual.field.showSplitAssistantMessageActionsAria': '行內助理操作',

packages/ui/src/lib/persistence.ts

@@ -519,6 +519,9 @@ const applyDesktopUiPreferences = (settings: DesktopSettings) => {
   if (typeof settings.stickyUserHeader === 'boolean' && settings.stickyUserHeader !== store.stickyUserHeader) {
     store.setStickyUserHeader(settings.stickyUserHeader);
   }
+  if (typeof settings.expandedEditorToolbar === 'boolean' && settings.expandedEditorToolbar !== store.expandedEditorToolbar) {
+    store.setExpandedEditorToolbar(settings.expandedEditorToolbar);
+  }
   if (typeof settings.wideChatLayoutEnabled === 'boolean' && settings.wideChatLayoutEnabled !== store.wideChatLayoutEnabled) {
     store.setWideChatLayoutEnabled(settings.wideChatLayoutEnabled);
   }

packages/ui/src/lib/settings/search.ts

@@ -115,6 +115,12 @@ export const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
     descriptionKey: 'settings.openchamber.visual.field.inputBarOffsetTooltip',
     keywords: ['input', 'home bar', 'offset'],
   },
+  {
+    id: 'appearance.expanded-editor-toolbar',
+    page: 'appearance',
+    titleKey: 'settings.openchamber.visual.field.expandedEditorToolbar',
+    keywords: ['editor', 'toolbar', 'tabs', 'docked', 'files'],
+  },
   {
     id: 'appearance.file-editor-keymap',
     page: 'appearance',

packages/ui/src/stores/useUIStore.ts

@@ -620,6 +620,7 @@ interface UIStore {
   userMessageRenderingMode: UserMessageRenderingMode;
   collapsibleUserMessages: boolean;
   stickyUserHeader: boolean;
+  expandedEditorToolbar: boolean;
   showSplitAssistantMessageActions: boolean;
   isMobileSessionStatusBarCollapsed: boolean;
   mobileSessionPanelOpen: boolean;
@@ -763,6 +764,7 @@ interface UIStore {
   setUserMessageRenderingMode: (value: UserMessageRenderingMode) => void;
   setCollapsibleUserMessages: (value: boolean) => void;
   setStickyUserHeader: (value: boolean) => void;
+  setExpandedEditorToolbar: (value: boolean) => void;
   setShowSplitAssistantMessageActions: (value: boolean) => void;
   setIsMobileSessionStatusBarCollapsed: (value: boolean) => void;
   setMobileSessionPanelOpen: (value: boolean) => void;
@@ -899,6 +901,7 @@ export const useUIStore = create<UIStore>()(
         userMessageRenderingMode: 'markdown',
         collapsibleUserMessages: true,
         stickyUserHeader: false,
+        expandedEditorToolbar: false,
         showSplitAssistantMessageActions: false,
         isMobileSessionStatusBarCollapsed: false,
         mobileSessionPanelOpen: false,
@@ -2010,6 +2013,9 @@ export const useUIStore = create<UIStore>()(
         setStickyUserHeader: (value) => {
           set({ stickyUserHeader: value });
         },
+        setExpandedEditorToolbar: (value: boolean) => {
+          set({ expandedEditorToolbar: value });
+        },
         setShowSplitAssistantMessageActions: (value) => {
           set({ showSplitAssistantMessageActions: value });
         },
@@ -2240,6 +2246,7 @@ export const useUIStore = create<UIStore>()(
           userMessageRenderingMode: state.userMessageRenderingMode,
           collapsibleUserMessages: state.collapsibleUserMessages,
           stickyUserHeader: state.stickyUserHeader,
+          expandedEditorToolbar: state.expandedEditorToolbar,
           showSplitAssistantMessageActions: state.showSplitAssistantMessageActions,
           isMobileSessionStatusBarCollapsed: state.isMobileSessionStatusBarCollapsed,
           mobileSessionFilterProjectId: state.mobileSessionFilterProjectId,

packages/web/server/lib/opencode/settings-helpers.js

@@ -438,6 +438,9 @@ export const createSettingsHelpers = (dependencies) => {
     if (typeof candidate.stickyUserHeader === 'boolean') {
       result.stickyUserHeader = candidate.stickyUserHeader;
     }
+    if (typeof candidate.expandedEditorToolbar === 'boolean') {
+      result.expandedEditorToolbar = candidate.expandedEditorToolbar;
+    }
     if (typeof candidate.showSplitAssistantMessageActions === 'boolean') {
       result.showSplitAssistantMessageActions = candidate.showSplitAssistantMessageActions;
     }