fix(ui): move focus toggle to top bar

CHANGELOG.md

@@ -49,6 +49,7 @@
 - Cron: clamp timer delay to avoid TimeoutOverflowWarning. Thanks @emanuelst for PR #412.
 - Web UI: allow reconnect + password URL auth for the control UI and always scrub auth params from the URL. Thanks @oswalpalash for PR #414.
 - Web UI: add Connect button on Overview to apply connection changes. Thanks @wizaj for PR #385.
+- Web UI: keep Focus toggle on the top bar (swap with theme toggle) so it stays visible. (#440)
 - ClawdbotKit: fix SwiftPM resource bundling path for `tool-display.json`. Thanks @fcatuhe for PR #398.
 - Tools: add Telegram/WhatsApp reaction tools (with per-provider gating). Thanks @zats for PR #353.
 - Tools: flatten literal-union schemas for Claude on Vertex AI. Thanks @carlulsoe for PR #409.

ui/src/styles/layout.css

@@ -22,7 +22,7 @@
   --shell-pad: 8px;
   --shell-gap: 0px;
   --shell-nav-col: 0px;
-  --shell-topbar-row: 0px;
+  --shell-topbar-row: auto;
 }
 
 .shell--chat-focus .content {
@@ -54,15 +54,6 @@
   max-height: max(0px, var(--topbar-height, 92px));
 }
 
-.shell--chat-focus .topbar {
-  opacity: 0;
-  transform: translateY(-10px);
-  max-height: 0px;
-  padding: 0;
-  border-width: 0;
-  pointer-events: none;
-}
-
 .brand {
   display: grid;
   gap: 4px;

ui/src/ui/app-render.ts

@@ -208,6 +208,16 @@ export function renderApp(state: AppViewState) {
             <span>Health</span>
             <span class="mono">${state.connected ? "OK" : "Offline"}</span>
           </div>
+          ${isChat
+            ? renderChatFocusToggle(
+                state.settings.chatFocusMode,
+                () =>
+                  state.applySettings({
+                    ...state.settings,
+                    chatFocusMode: !state.settings.chatFocusMode,
+                  }),
+              )
+            : nothing}
           ${renderThemeToggle(state)}
         </div>
       </header>
@@ -416,16 +426,10 @@ export function renderApp(state: AppViewState) {
               disabledReason: chatDisabledReason,
               error: state.lastError,
               sessions: state.sessionsResult,
-              focusMode: state.settings.chatFocusMode,
               onRefresh: () => {
                 state.resetToolStream();
                 return loadChatHistory(state);
               },
-              onToggleFocusMode: () =>
-                state.applySettings({
-                  ...state.settings,
-                  chatFocusMode: !state.settings.chatFocusMode,
-                }),
               onDraftChange: (next) => (state.chatMessage = next),
               onSend: () => state.handleSendChat(),
             })
@@ -555,6 +559,19 @@ function renderThemeToggle(state: AppViewState) {
   `;
 }
 
+function renderChatFocusToggle(focusMode: boolean, onToggle: () => void) {
+  return html`
+    <button
+      class="btn ${focusMode ? "active" : ""}"
+      @click=${onToggle}
+      aria-pressed=${focusMode}
+      title="Toggle focus mode (hide sidebar + page header)"
+    >
+      Focus
+    </button>
+  `;
+}
+
 function renderSunIcon() {
   return html`
     <svg class="theme-icon" viewBox="0 0 24 24" aria-hidden="true">

ui/src/ui/views/chat.ts

@@ -22,9 +22,7 @@ export type ChatProps = {
   disabledReason: string | null;
   error: string | null;
   sessions: SessionsListResult | null;
-  focusMode: boolean;
   onRefresh: () => void;
-  onToggleFocusMode: () => void;
   onDraftChange: (next: string) => void;
   onSend: () => void;
 };
@@ -66,14 +64,6 @@ export function renderChat(props: ChatProps) {
         </div>
         <div class="chat-header__right">
           <div class="muted">Thinking: ${props.thinkingLevel ?? "inherit"}</div>
-          <button
-            class="btn ${props.focusMode ? "active" : ""}"
-            @click=${props.onToggleFocusMode}
-            aria-pressed=${props.focusMode}
-            title="Toggle focus mode (hide header + sidebar)"
-          >
-            Focus
-          </button>
         </div>
       </div>