refactor(ui): streamline header, settings layout

packages/ui/src/components/layout/Header.tsx

@@ -26,7 +26,7 @@ import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
 import { useDeviceInfo } from '@/lib/device';
-import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
+import { cn, hasModifier } from '@/lib/utils';
 import { useDiffFileCount } from '@/components/views/DiffView';
 import { McpDropdown, McpDropdownContent } from '@/components/mcp/McpDropdown';
 import { ProviderLogo } from '@/components/ui/ProviderLogo';
@@ -52,6 +52,7 @@ import type { GitHubAuthStatus } from '@/lib/api/types';
 import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
 import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
 import { isDesktopShell } from '@/lib/desktop';
+import { desktopHostsGet } from '@/lib/desktopHosts';
 
 const formatTime = (timestamp: number | null) => {
   if (!timestamp) return '-';
@@ -112,7 +113,6 @@ export const Header: React.FC = () => {
   const toggleBottomTerminal = useUIStore((state) => state.toggleBottomTerminal);
   const toggleRightSidebar = useUIStore((state) => state.toggleRightSidebar);
   const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
-  const toggleCommandPalette = useUIStore((state) => state.toggleCommandPalette);
   const activeMainTab = useUIStore((state) => state.activeMainTab);
   const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
 
@@ -201,6 +201,7 @@ export const Header: React.FC = () => {
   const [isMobileRateLimitsOpen, setIsMobileRateLimitsOpen] = React.useState(false);
   const [isDesktopServicesOpen, setIsDesktopServicesOpen] = React.useState(false);
   const [isUsageRefreshSpinning, setIsUsageRefreshSpinning] = React.useState(false);
+  const [currentInstanceLabel, setCurrentInstanceLabel] = React.useState('Local');
   const [desktopServicesTab, setDesktopServicesTab] = React.useState<'instance' | 'usage' | 'mcp'>(
     isDesktopApp ? 'instance' : 'usage'
   );
@@ -209,6 +210,65 @@ export const Header: React.FC = () => {
       setDesktopServicesTab('usage');
     }
   }, [desktopServicesTab, isDesktopApp]);
+
+  const refreshCurrentInstanceLabel = React.useCallback(async () => {
+    if (typeof window === 'undefined' || !isDesktopApp) {
+      return;
+    }
+
+    const normalizeHostUrl = (raw: string): string | null => {
+      const trimmed = raw.trim();
+      if (!trimmed) return null;
+      try {
+        const url = new URL(trimmed);
+        if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+          return null;
+        }
+        return url.origin;
+      } catch {
+        try {
+          const url = new URL(trimmed.endsWith('/') ? trimmed : `${trimmed}/`);
+          if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+            return null;
+          }
+          return url.origin;
+        } catch {
+          return null;
+        }
+      }
+    };
+
+    try {
+      const cfg = await desktopHostsGet();
+      const currentOrigin = window.location.origin;
+      const localOrigin = window.__OPENCHAMBER_LOCAL_ORIGIN__ || currentOrigin;
+      const normalizedCurrent = normalizeHostUrl(currentOrigin) || currentOrigin;
+      const normalizedLocal = normalizeHostUrl(localOrigin) || localOrigin;
+
+      if (normalizedCurrent && normalizedLocal && normalizedCurrent === normalizedLocal) {
+        setCurrentInstanceLabel('Local');
+        return;
+      }
+
+      const match = cfg.hosts.find((host) => {
+        const normalized = normalizeHostUrl(host.url);
+        return normalized && normalized === normalizedCurrent;
+      });
+
+      if (match?.label?.trim()) {
+        setCurrentInstanceLabel(match.label.trim());
+        return;
+      }
+
+      setCurrentInstanceLabel('Instance');
+    } catch {
+      setCurrentInstanceLabel('Local');
+    }
+  }, [isDesktopApp]);
+
+  useEffect(() => {
+    void refreshCurrentInstanceLabel();
+  }, [refreshCurrentInstanceLabel]);
   useQuotaAutoRefresh();
   const selectedModels = useQuotaStore((state) => state.selectedModels);
   const expandedFamilies = useQuotaStore((state) => state.expandedFamilies);
@@ -809,8 +869,11 @@ export const Header: React.FC = () => {
             open={isDesktopServicesOpen}
             onOpenChange={(open) => {
               setIsDesktopServicesOpen(open);
-              if (open && desktopServicesTab === 'usage' && quotaResults.length === 0) {
+              if (open) {
-                fetchAllQuotas();
+                void refreshCurrentInstanceLabel();
+                if (desktopServicesTab === 'usage' && quotaResults.length === 0) {
+                  fetchAllQuotas();
+                }
               }
             }}
           >
@@ -819,15 +882,19 @@ export const Header: React.FC = () => {
                 <DropdownMenuTrigger asChild>
                   <button
                     type="button"
-                    aria-label="Open instance, usage and MCP"
+                    aria-label={`Open instance, usage and MCP (current: ${currentInstanceLabel})`}
-                    className={headerIconButtonClass}
+                    className={cn(
+                      headerIconButtonClass,
+                      'w-auto max-w-[14rem] justify-start gap-1.5 px-2.5'
+                    )}
                   >
                     <RiStackLine className="h-5 w-5" />
+                    <span className="truncate text-base font-normal">{currentInstanceLabel}</span>
                   </button>
                 </DropdownMenuTrigger>
               </TooltipTrigger>
               <TooltipContent>
-                <p>Instance / Usage / MCP</p>
+                <p>Current instance: {currentInstanceLabel}</p>
               </TooltipContent>
             </Tooltip>
             <DropdownMenuContent
@@ -1045,22 +1112,6 @@ export const Header: React.FC = () => {
               )}
             </DropdownMenuContent>
           </DropdownMenu>
-        <Tooltip delayDuration={500}>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              onClick={toggleCommandPalette}
-              aria-label="Open command palette"
-              className={headerIconButtonClass}
-            >
-              <RiCommandLine className="h-5 w-5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Command Palette ({getModifierLabel()}+K)</p>
-          </TooltipContent>
-        </Tooltip>
-
         <Tooltip delayDuration={500}>
           <TooltipTrigger asChild>
             <button

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { RiDiscordFill, RiDownloadLine, RiGithubFill, RiLoaderLine, RiRestartLine, RiTwitterXFill } from '@remixicon/react';
+import { RiDiscordFill, RiDownloadLine, RiGithubFill, RiLoaderLine, RiTwitterXFill } from '@remixicon/react';
 import { useUpdateStore } from '@/stores/useUpdateStore';
 import { UpdateDialog } from '@/components/ui/UpdateDialog';
 import { useDeviceInfo } from '@/lib/device';
 import { toast } from '@/components/ui';
 import { cn } from '@/lib/utils';
-import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
 
 const GITHUB_URL = 'https://github.com/btriapitsyn/openchamber';
 
@@ -46,15 +45,6 @@ export const AboutSettings: React.FC = () => {
   if (isMobile) {
     return (
       <div className="w-full space-y-2">
-        {/* Reload OpenCode Configuration */}
-        <button
-          onClick={() => reloadOpenCodeConfiguration()}
-          className="flex items-center gap-1.5 typography-meta text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <RiRestartLine className="h-3.5 w-3.5" />
-          <span>Reload OpenCode Configuration</span>
-        </button>
-
         {/* Version row with update status */}
         <div className="flex items-center justify-between">
           <span className="typography-meta text-muted-foreground">

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

@@ -1,8 +1,11 @@
 import React from 'react';
+import { RiRestartLine } from '@remixicon/react';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useDeviceInfo } from '@/lib/device';
 import { isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
 import { AboutSettings } from './AboutSettings';
+import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
 import { cn } from '@/lib/utils';
 
 export type OpenChamberSection = 'visual' | 'chat' | 'sessions' | 'git' | 'github' | 'notifications' | 'voice';
@@ -68,9 +71,20 @@ export const OpenChamberSidebar: React.FC<OpenChamberSidebarProps> = ({
 }) => {
   const { isMobile } = useDeviceInfo();
   const showAbout = isMobile && isWebRuntime();
+  const [isReloadingConfig, setIsReloadingConfig] = React.useState(false);
 
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
   const isWeb = React.useMemo(() => isWebRuntime(), []);
+  const showReload = !isVSCode;
+
+  const handleReloadConfiguration = React.useCallback(async () => {
+    setIsReloadingConfig(true);
+    try {
+      await reloadOpenCodeConfiguration({ message: 'Restarting OpenCode…', mode: 'projects', scopes: ['all'] });
+    } finally {
+      setIsReloadingConfig(false);
+    }
+  }, []);
 
   const visibleSections = React.useMemo(() => {
     return OPENCHAMBER_SECTION_GROUPS.filter((group) => {
@@ -86,45 +100,105 @@ export const OpenChamberSidebar: React.FC<OpenChamberSidebarProps> = ({
   const bgClass = isVSCode ? 'bg-background' : 'bg-sidebar';
 
   return (
-    <div className={cn('flex h-full flex-col', bgClass)}>
+    <div className={cn('grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]', bgClass)}>
-      <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">
+      <div className="min-h-0">
-        {visibleSections.map((group) => {
+        <ScrollableOverlay outerClassName="h-full" className="space-y-1 px-3 py-2 overflow-x-hidden">
-          const isSelected = selectedSection === group.id;
+          {visibleSections.map((group) => {
-          return (
+            const isSelected = selectedSection === group.id;
-            <div
+            return (
-              key={group.id}
+              <div
-              className={cn(
+                key={group.id}
-                'group relative rounded-md px-1.5 py-1 transition-all duration-200',
+                className={cn(
-                isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
+                  'group relative rounded-md px-1.5 py-1 transition-all duration-200',
-              )}
+                  isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
-            >
+                )}
-              <button
-                onClick={() => onSelectSection(group.id)}
-                className="w-full text-left flex flex-col gap-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
               >
-                <div className="flex items-center gap-2">
+                <button
-                  <span className="typography-ui-label font-normal text-foreground">
+                  onClick={() => onSelectSection(group.id)}
-                    {group.label}
+                  className="w-full text-left flex flex-col gap-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                  </span>
+                >
-                  {group.badge && (
+                  <div className="flex items-center gap-2">
-                    <span className="text-[10px] leading-none uppercase font-bold tracking-tight bg-[var(--status-warning-background)] text-[var(--status-warning)] border border-[var(--status-warning-border)] px-1.5 py-0.5 rounded">
+                    <span className="typography-ui-label font-normal text-foreground">
-                      {group.badge}
+                      {group.label}
                     </span>
-                  )}
+                    {group.badge && (
-                </div>
+                      <span className="text-[10px] leading-none uppercase font-bold tracking-tight bg-[var(--status-warning-background)] text-[var(--status-warning)] border border-[var(--status-warning-border)] px-1.5 py-0.5 rounded">
-                <div className="typography-micro text-muted-foreground/60 leading-tight">
+                        {group.badge}
-                  {group.items.join(' · ')}
+                      </span>
-                </div>
+                    )}
-              </button>
+                  </div>
-            </div>
+                  <div className="typography-micro text-muted-foreground/60 leading-tight">
-          );
+                    {group.items.join(' · ')}
-        })}
+                  </div>
-      </ScrollableOverlay>
+                </button>
+              </div>
+            );
+          })}
+        </ScrollableOverlay>
+      </div>
 
-      {/* Mobile footer: About section */}
+      {(showReload || showAbout) && (
-      {showAbout && (
+        <div className={cn(
-        <div className="border-t px-3 py-4">
+          'border-t border-border bg-sidebar',
-          <AboutSettings />
+          showAbout ? 'px-3 py-3 space-y-3' : 'flex-shrink-0 h-12 px-2'
+        )}>
+          {showAbout ? (
+            <>
+              {showReload && (
+                <Tooltip delayDuration={300}>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className={cn(
+                        'flex h-8 w-full items-center gap-2 rounded-md px-2',
+                        'text-sm font-semibold text-sidebar-foreground/90',
+                        'hover:text-sidebar-foreground hover:bg-interactive-hover',
+                        'transition-all duration-200',
+                        'disabled:pointer-events-none disabled:opacity-50'
+                      )}
+                      onClick={() => void handleReloadConfiguration()}
+                      disabled={isReloadingConfig}
+                    >
+                      <RiRestartLine className="h-4 w-4" />
+                      {isReloadingConfig ? 'Reloading OpenCode…' : 'Reload OpenCode'}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Restart OpenCode and reload its configuration (agents, commands, skills, providers).
+                  </TooltipContent>
+                </Tooltip>
+              )}
+              <AboutSettings />
+            </>
+          ) : (
+            <div className="flex h-full items-center justify-between gap-2">
+              {showReload && (
+                <Tooltip delayDuration={300}>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className={cn(
+                        'flex h-8 items-center gap-2 rounded-md px-2',
+                        'text-sm font-semibold text-sidebar-foreground/90',
+                        'hover:text-sidebar-foreground hover:bg-interactive-hover',
+                        'transition-all duration-200',
+                        'disabled:pointer-events-none disabled:opacity-50'
+                      )}
+                      onClick={() => void handleReloadConfiguration()}
+                      disabled={isReloadingConfig}
+                    >
+                      <RiRestartLine className="h-4 w-4" />
+                      {isReloadingConfig ? 'Reloading OpenCode…' : 'Reload OpenCode'}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Restart OpenCode and reload its configuration (agents, commands, skills, providers).
+                  </TooltipContent>
+                </Tooltip>
+              )}
+              <div />
+            </div>
+          )}
         </div>
       )}
 

packages/ui/src/components/ui/CommandPalette.tsx

@@ -15,8 +15,7 @@ import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useThemeSystem } from '@/contexts/useThemeSystem';
 import { useDeviceInfo } from '@/lib/device';
-import { RiAddLine, RiChatAi3Line, RiCheckLine, RiCodeLine, RiComputerLine, RiGitBranchLine, RiLayoutLeftLine, RiMoonLine, RiQuestionLine, RiRestartLine, RiSettings3Line, RiSunLine, RiTerminalBoxLine, RiTimeLine } from '@remixicon/react';
+import { RiAddLine, RiChatAi3Line, RiCheckLine, RiCodeLine, RiComputerLine, RiGitBranchLine, RiLayoutLeftLine, RiMoonLine, RiQuestionLine, RiSettings3Line, RiSunLine, RiTerminalBoxLine, RiTimeLine } from '@remixicon/react';
-import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
 import { getModifierLabel } from '@/lib/utils';
 import { createWorktreeSession } from '@/lib/worktreeSessionCreator';
 
@@ -106,11 +105,6 @@ export const CommandPalette: React.FC = () => {
     handleClose();
   };
 
-  const handleReloadConfiguration = () => {
-    reloadOpenCodeConfiguration();
-    handleClose();
-  };
-
   const handleOpenTimeline = () => {
     setTimelineDialogOpen(true);
     handleClose();
@@ -177,10 +171,6 @@ export const CommandPalette: React.FC = () => {
             <span>Open Settings</span>
             <CommandShortcut>{getModifierLabel()} + ,</CommandShortcut>
           </CommandItem>
-          <CommandItem onSelect={handleReloadConfiguration}>
-            <RiRestartLine className="mr-2 h-4 w-4" />
-            <span>Reload OpenCode Configuration</span>
-          </CommandItem>
         </CommandGroup>
 
         <CommandSeparator />

packages/ui/src/components/ui/HelpDialog.tsx

@@ -17,13 +17,11 @@ import {
   RiCloseCircleLine,
   RiCodeLine,
   RiCommandLine,
-  RiFolder6Line,
   RiGitBranchLine,
   RiLayoutLeftLine,
   RiPaletteLine,
   RiQuestionLine,
   RiSettings3Line,
-  RiTerminalBoxLine,
   RiText,
   RiTimeLine,
   RiWindowLine,
@@ -166,21 +164,6 @@ export const HelpDialog: React.FC = () => {
           description: "Open Diff Panel",
           icon: RiCodeLine,
         },
-        {
-          keys: [`${mod} + 3`],
-          description: "Open Files",
-          icon: RiFolder6Line,
-        },
-        {
-          keys: [`${mod} + 4`],
-          description: "Open Terminal",
-          icon: RiTerminalBoxLine,
-        },
-        {
-          keys: [`${mod} + 5`],
-          description: "Open Git Panel",
-          icon: RiGitBranchLine,
-        },
         {
           keys: [`${mod} + T`],
           description: "Open Timeline",

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

@@ -290,13 +290,15 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
     switch (activeTab) {
       case 'settings':
         return (
-          <OpenChamberSidebar
+          <div className="h-full">
-            selectedSection={selectedOpenChamberSection}
+            <OpenChamberSidebar
-            onSelectSection={(section) => {
+              selectedSection={selectedOpenChamberSection}
-              setSelectedOpenChamberSection(section);
+              onSelectSection={(section) => {
-              handleMobileSidebarClick();
+                setSelectedOpenChamberSection(section);
-            }}
+                handleMobileSidebarClick();
-          />
+              }}
+            />
+          </div>
         );
       case 'agents':
         return <AgentsSidebar onItemSelect={handleMobileSidebarClick} />;
@@ -354,7 +356,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
 
 
   return (
-    <div ref={containerRef} className={cn('flex h-full flex-col overflow-hidden bg-background')}>
+    <div ref={containerRef} data-settings-view="true" className={cn('flex h-full flex-col overflow-hidden bg-background')}>
       {/* Header with tabs and close button */}
       <div
         onMouseDown={!isMobile ? handleDragStart : undefined}
@@ -521,7 +523,9 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
             </div>
           ) : (
             <div className={cn('flex-1 overflow-hidden', isVSCode ? 'bg-background' : 'bg-sidebar')}>
-              <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+              <div className="flex h-full min-h-0 flex-col">
+                <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+              </div>
             </div>
           )
         ) : (
@@ -530,7 +534,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
             {hasSidebar && (
               <div
                 className={cn(
-                  'relative overflow-hidden border-r',
+                  'relative flex h-full min-h-0 flex-col overflow-hidden border-r',
                   isDesktopApp
                     ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
                     : isVSCode
@@ -555,7 +559,9 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
                   aria-orientation="vertical"
                   aria-label="Resize settings sidebar"
                 />
-                <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+                <div className="flex h-full min-h-0 flex-col">
+                  <ErrorBoundary>{renderSidebarContent()}</ErrorBoundary>
+                </div>
               </div>
             )}
 

packages/ui/src/hooks/useKeyboardShortcuts.ts

@@ -192,6 +192,15 @@ export const useKeyboardShortcuts = () => {
       }
 
       if (e.key === 'Escape') {
+        const target = e.target as Element | null;
+        const isInsideDialog = Boolean(target?.closest('[role="dialog"]'));
+        const isSettingsMounted = Boolean(document.querySelector('[data-settings-view="true"]'));
+
+        if (isInsideDialog || isSettingsMounted) {
+          resetAbortPriming();
+          return;
+        }
+
         const {
           isSettingsDialogOpen,
           isCommandPaletteOpen,