@nextclaw/ui 0.14.1 → 0.14.2

package/src/features/chat/pages/ncp-chat-page.tsx

@@ -11,41 +11,14 @@ import {
 } from "@/features/chat/components/layout/chat-page-shell";
 import { parseSessionKeyFromRoute } from "@/features/chat/features/session/utils/chat-session-route.utils";
 import { ChatPresenter } from "@/features/chat/presenters/chat.presenter";
-import {
-  isNcpAgentStartupUnavailableErrorMessage,
-  useNcpSessionConversation,
-} from "@/features/chat/features/ncp/hooks/use-ncp-session-conversation";
-import {
-  useNcpChatSelectedSession,
-} from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { useChatQueryStoreSync } from "@/features/chat/features/ncp/hooks/use-ncp-chat-query-store-sync";
 import {
   ChatPresenterProvider,
   usePresenter,
 } from "@/features/chat/components/providers/chat-presenter.provider";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
-import { useSystemStatus } from "@/features/system-status";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
-import { isNcpChatRuntimeBlocked, resolveNcpChatSendErrorMessage } from "@/features/chat/features/runtime/utils/ncp-chat-runtime-availability.utils";
 import { useUiShowContentEvent } from "@/features/chat/features/ncp/hooks/use-ui-show-content-event";
-import { readNcpContextWindowValue } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
-
-function useChatDraftIntentConsumer() {
-  const appPresenter = useAppPresenter();
-  const presenter = usePresenter();
-  useEffect(() => {
-    const applyIntent = (intent: { id: number; prompt: string }) => {
-      presenter.startAgentCreationDraft(intent.prompt);
-      appPresenter.chatDraftIntentManager.markConsumed(intent.id);
-    };
-    const unsubscribe = appPresenter.chatDraftIntentManager.subscribe(applyIntent);
-    const pendingIntent = appPresenter.chatDraftIntentManager.consumePending();
-    if (pendingIntent) {
-      applyIntent(pendingIntent);
-    }
-    return unsubscribe;
-  }, [appPresenter, presenter]);
-}
 
 function useNcpChatRouteSelection() {
   const { sessionId: routeSessionIdParam } = useParams<{ sessionId?: string }>();
@@ -59,31 +32,6 @@ function useNcpChatRouteSelection() {
   };
 }
 
-type NcpChatConversation = ReturnType<typeof useNcpSessionConversation>;
-
-function useChatRunRuntimeConnection(params: {
-  agent: NcpChatConversation;
-  sessionKey: string | undefined;
-}) {
-  const presenter = usePresenter();
-  const { agent, sessionKey } = params;
-  useEffect(() => {
-    presenter.chatRunManager.setActiveRuntime({
-      sessionKey: sessionKey ?? null,
-      sendEnvelope: (envelope) => agent.send(envelope),
-      abortCurrentRun: () => agent.abort(),
-      resumeCurrentSessionRun: () => agent.streamRun(),
-    });
-    return () => {
-      presenter.chatRunManager.setActiveRuntime(null);
-    };
-  }, [
-    agent,
-    presenter,
-    sessionKey,
-  ]);
-}
-
 function useNcpChatUiBindings() {
   const presenter = usePresenter();
   const { confirm, ConfirmDialog } = useConfirmDialog();
@@ -101,42 +49,6 @@ function useNcpChatUiBindings() {
   return <ConfirmDialog />;
 }
 
-function useChatRunSnapshotSync(params: {
-  agent: NcpChatConversation;
-  isSending: boolean;
-  isRunning: boolean;
-  lastSendError: string | null;
-  routeSessionKey: string | null;
-}) {
-  const presenter = usePresenter();
-  const { agent, isRunning, isSending, lastSendError, routeSessionKey } = params;
-  useEffect(() => {
-    presenter.chatRunManager.applyRunSnapshot({
-      routeSessionKey,
-      isHydrating: agent.isHydrating,
-      isSending,
-      isRunning,
-      visibleMessages: agent.visibleMessages,
-      contextWindow: readNcpContextWindowValue(agent.snapshot.contextWindow),
-      sendErrorMessage: lastSendError,
-      materializedSessionKey:
-        agent.snapshot.activeRun?.sessionId ??
-        agent.visibleMessages.find((message) => message.sessionId.trim())?.sessionId ??
-        null,
-    });
-  }, [
-    agent.isHydrating,
-    agent.snapshot.activeRun?.sessionId,
-    agent.snapshot.contextWindow,
-    agent.visibleMessages,
-    isRunning,
-    isSending,
-    lastSendError,
-    presenter,
-    routeSessionKey,
-  ]);
-}
-
 export function NcpChatPage({ view }: ChatPageProps) {
   const appPresenter = useAppPresenter();
   const [presenter] = useState(() => new ChatPresenter(appPresenter));
@@ -149,52 +61,18 @@ export function NcpChatPage({ view }: ChatPageProps) {
 
 function NcpChatPageContent({ view }: ChatPageProps) {
   const presenter = usePresenter();
-  const systemStatus = useSystemStatus();
-  const isRuntimeBlocked = isNcpChatRuntimeBlocked(systemStatus);
   const confirmDialog = useNcpChatUiBindings();
   const routeSelection = useNcpChatRouteSelection();
   const { routeSessionKey, sessionKey } = routeSelection;
   useChatQueryStoreSync({
     sessionKey: sessionKey ?? null,
   });
-  const selectedSession = useNcpChatSelectedSession(sessionKey ?? null);
-  const agent = useNcpSessionConversation(sessionKey);
-  const rawLastSendError =
-    agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
-  const filteredLastSendError =
-    systemStatus.phase === "ready" &&
-    isNcpAgentStartupUnavailableErrorMessage(rawLastSendError)
-      ? null
-      : rawLastSendError;
-  const currentSessionRunning = agent.isRunning || selectedSession?.status === "running";
-  const isSending = agent.isSending || currentSessionRunning;
-  const lastSendError =
-    isRuntimeBlocked
-      ? null
-      : systemStatus.phase === "ready"
-      ? filteredLastSendError
-      : resolveNcpChatSendErrorMessage({
-          message: filteredLastSendError,
-          status: systemStatus,
-        });
-  useChatRunRuntimeConnection({
-    agent,
-    sessionKey,
-  });
   useChatSessionSync({
     view,
     routeSessionKey,
     syncRouteSessionSelection:
       presenter.chatSessionListManager.syncRouteSessionSelection,
   });
-  useChatDraftIntentConsumer();
   useUiShowContentEvent();
-  useChatRunSnapshotSync({
-    agent,
-    isRunning: currentSessionRunning,
-    routeSessionKey,
-    lastSendError,
-    isSending,
-  });
   return <ChatPageLayout view={view} confirmDialog={confirmDialog} />;
 }

package/src/features/chat/presenters/chat.presenter.ts

@@ -1,39 +1,22 @@
 import { ChatSessionListManager } from '@/features/chat/managers/chat-session-list.manager';
-import { ChatRunManager } from '@/features/chat/managers/chat-run.manager';
 import { ChatUiManager } from '@/features/chat/managers/chat-ui.manager';
-import { ChatInputManager } from '@/features/chat/managers/chat-input.manager';
 import { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
 import type { AppPresenter } from '@/app/presenters/app.presenter';
 
 export class ChatPresenter {
   readonly chatUiManager: ChatUiManager;
-  readonly chatRunManager: ChatRunManager;
   readonly chatSessionListManager: ChatSessionListManager;
-  readonly chatInputManager: ChatInputManager;
   readonly chatQueryManager: ChatQueryManager;
   readonly chatThreadManager: ChatThreadManager;
 
   constructor(appPresenter: AppPresenter) {
     this.chatUiManager = new ChatUiManager(appPresenter.docBrowserManager);
-    this.chatRunManager = new ChatRunManager(this.chatUiManager);
-    this.chatSessionListManager = new ChatSessionListManager(this.chatUiManager, this.chatRunManager);
+    this.chatSessionListManager = new ChatSessionListManager(this.chatUiManager);
     this.chatQueryManager = new ChatQueryManager();
-    this.chatInputManager = new ChatInputManager(
-      this.chatRunManager,
-      this.chatSessionListManager
-    );
     this.chatThreadManager = new ChatThreadManager(
       this.chatUiManager,
-      this.chatSessionListManager,
-      this.chatRunManager
+      this.chatSessionListManager
     );
   }
-
-  startAgentCreationDraft = (prompt: string) => {
-    this.chatSessionListManager.createSession();
-    this.chatSessionListManager.setSelectedAgentId('main');
-    this.chatInputManager.setDraft(prompt);
-    this.chatInputManager.requestComposerFocusAtEnd();
-  };
 }

package/src/features/chat/stores/__tests__/chat-thread.store.test.ts

@@ -22,6 +22,7 @@ function resetChatThreadStore() {
       activeWorkspacePanelKind: null,
       childSessionTabs: [],
       activeChildSessionKey: null,
+      activeSideChatDraft: null,
       workspaceFileTabs: [],
       activeWorkspaceFileKey: null,
       workspaceNavigationHistory: [],
@@ -85,6 +86,36 @@ describe('chat thread workspace panel persistence', () => {
     expect(persisted.state.snapshot.workspaceFileTabs[0].fullLines).toBeUndefined();
   });
 
+  it('does not persist an unmaterialized side chat draft', () => {
+    useChatThreadStore.getState().setSnapshot({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: 'side-chat-draft',
+      activeSideChatDraft: {
+        draftKey: 'draft-1',
+        parentSessionKey: 'session-1',
+      },
+      workspaceNavigationHistory: [
+        { kind: 'child-session', key: 'child-session-1' },
+        { kind: 'side-chat-draft', key: 'draft-1' },
+      ],
+      workspaceNavigationHistoryIndex: 1,
+    });
+
+    const persisted = JSON.parse(
+      window.localStorage.getItem(chatThreadWorkspaceStorageKey) ?? '{}',
+    );
+
+    expect(persisted.state.snapshot).toMatchObject({
+      workspacePanelParentKey: 'session-1',
+      activeWorkspacePanelKind: null,
+      workspaceNavigationHistory: [
+        { kind: 'child-session', key: 'child-session-1' },
+      ],
+      workspaceNavigationHistoryIndex: 0,
+    });
+    expect(persisted.state.snapshot.activeSideChatDraft).toBeUndefined();
+  });
+
   it('hydrates the workspace panel state and repairs stale active file keys', async () => {
     window.localStorage.setItem(
       chatThreadWorkspaceStorageKey,

package/src/features/chat/stores/chat-thread.store.ts

@@ -14,6 +14,11 @@ export type ChatChildSessionTab = {
   agentId?: string | null;
 };
 
+export type ChatWorkspaceSideChatDraft = {
+  draftKey: string;
+  parentSessionKey: string;
+};
+
 export type ChatWorkspaceFileTab = {
   key: string;
   parentSessionKey: string | null;
@@ -32,17 +37,10 @@ export type ChatWorkspaceFileTab = {
 };
 
 export type ChatWorkspaceNavigationEntry =
-  | {
-      kind: 'child-session';
-      key: string;
-    }
-  | {
-      kind: 'file';
-      key: string;
-    }
-  | {
-      kind: 'cron';
-    };
+  | { kind: 'child-session'; key: string }
+  | { kind: 'side-chat-draft'; key: string }
+  | { kind: 'file'; key: string }
+  | { kind: 'cron' };
 
 export type ChatThreadSnapshot = {
   sessionTypeLabel?: string | null;
@@ -63,9 +61,10 @@ export type ChatThreadSnapshot = {
   parentSessionKey?: string | null;
   parentSessionLabel?: string | null;
   workspacePanelParentKey?: string | null;
-  activeWorkspacePanelKind?: "child-session" | "file" | "cron" | null;
+  activeWorkspacePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
   childSessionTabs: ChatChildSessionTab[];
   activeChildSessionKey?: string | null;
+  activeSideChatDraft?: ChatWorkspaceSideChatDraft | null;
   workspaceFileTabs: ChatWorkspaceFileTab[];
   activeWorkspaceFileKey?: string | null;
   workspaceNavigationHistory: ChatWorkspaceNavigationEntry[];
@@ -105,6 +104,8 @@ type PersistedChatWorkspaceSnapshot = Pick<
   | 'workspaceNavigationHistoryIndex'
 >;
 
+type PersistedWorkspacePanelKind = 'child-session' | 'file' | 'cron';
+
 const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeLabel: null,
   sessionTypeIcon: null,
@@ -127,6 +128,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   activeWorkspacePanelKind: null,
   childSessionTabs: [],
   activeChildSessionKey: null,
+  activeSideChatDraft: null,
   workspaceFileTabs: [],
   activeWorkspaceFileKey: null,
   workspaceNavigationHistory: [],
@@ -158,7 +160,7 @@ function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
 
 function isWorkspacePanelKind(
   value: unknown,
-): value is NonNullable<ChatThreadSnapshot['activeWorkspacePanelKind']> {
+): value is PersistedWorkspacePanelKind {
   return value === 'child-session' || value === 'file' || value === 'cron';
 }
 
@@ -344,19 +346,33 @@ export const useChatThreadStore = create<ChatThreadStore>()(
       name: CHAT_THREAD_WORKSPACE_STORAGE_KEY,
       version: CHAT_THREAD_WORKSPACE_STORAGE_VERSION,
       storage: createJSONStorage(() => window.localStorage),
-      partialize: (state): PersistedChatThreadStore => ({
-        snapshot: {
-          workspacePanelParentKey: state.snapshot.workspacePanelParentKey,
-          activeWorkspacePanelKind: state.snapshot.activeWorkspacePanelKind,
-          activeChildSessionKey: state.snapshot.activeChildSessionKey,
-          workspaceFileTabs: state.snapshot.workspaceFileTabs
-            .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
-            .map(toPersistedWorkspaceFileTab),
-          activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
-          workspaceNavigationHistory: state.snapshot.workspaceNavigationHistory,
-          workspaceNavigationHistoryIndex: state.snapshot.workspaceNavigationHistoryIndex,
-        }
-      }),
+      partialize: (state): PersistedChatThreadStore => {
+        const workspaceNavigationHistory = state.snapshot.workspaceNavigationHistory
+          .filter((entry) => entry.kind !== 'side-chat-draft');
+        const workspaceNavigationHistoryIndex =
+          workspaceNavigationHistory.length > 0
+            ? Math.min(
+              state.snapshot.workspaceNavigationHistoryIndex,
+              workspaceNavigationHistory.length - 1,
+            )
+            : 0;
+        return {
+          snapshot: {
+            workspacePanelParentKey: state.snapshot.workspacePanelParentKey,
+            activeWorkspacePanelKind:
+              state.snapshot.activeWorkspacePanelKind === 'side-chat-draft'
+                ? null
+                : state.snapshot.activeWorkspacePanelKind,
+            activeChildSessionKey: state.snapshot.activeChildSessionKey,
+            workspaceFileTabs: state.snapshot.workspaceFileTabs
+              .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+              .map(toPersistedWorkspaceFileTab),
+            activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
+            workspaceNavigationHistory,
+            workspaceNavigationHistoryIndex,
+          }
+        };
+      },
       merge: (persistedState, currentState) => {
         const persistedSnapshot = isRecord(persistedState)
           ? persistedState.snapshot

package/src/features/panel-apps/hooks/use-panel-apps.ts

@@ -4,10 +4,11 @@ import type { PanelAppPreferencesUpdateView } from '@/shared/lib/api';
 
 const PANEL_APPS_QUERY_KEY = ['panel-apps'] as const;
 
-export function usePanelApps() {
+export function usePanelApps(options: { enabled?: boolean } = {}) {
   return useQuery({
     queryKey: PANEL_APPS_QUERY_KEY,
     queryFn: () => nextclawClient.panelApps.listPanelApps(),
+    enabled: options.enabled ?? true,
     staleTime: 0,
   });
 }

package/src/platforms/desktop/components/__tests__/desktop-app-shell.test.tsx

@@ -1,8 +1,9 @@
 import { act, render, screen } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter } from "react-router-dom";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { DesktopAppShell } from "@/platforms/desktop/components/desktop-app-shell";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 
 vi.mock("@/app/components/layout/sidebar", () => ({
   Sidebar: () => <aside data-testid="settings-sidebar">Settings Sidebar</aside>,
@@ -16,7 +17,10 @@ type WindowStateListener = (snapshot: { isMaximized: boolean }) => void;
 
 let windowStateListener: WindowStateListener | null = null;
 
-function setDesktopPlatform(platform: string | null, isMaximized = false): void {
+function setDesktopPlatform(
+  platform: string | null,
+  isMaximized = false,
+): void {
   windowStateListener = null;
   window.nextclawDesktop = platform
     ? ({
@@ -59,6 +63,11 @@ function renderDesktopShell(platform: string | null, isMobileLayout = false) {
 }
 
 describe("DesktopAppShell", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    viewportLayoutManager.resetForTests();
+  });
+
   afterEach(() => {
     setDesktopPlatform(null);
   });
@@ -68,29 +77,58 @@ describe("DesktopAppShell", () => {
 
     const chrome = screen.getByTestId("desktop-window-chrome");
     const sidebarChrome = screen.getByTestId("desktop-window-chrome-sidebar");
-    const resizeStrip = screen.getByTestId("desktop-window-chrome-resize-strip");
+    const resizeStrip = screen.getByTestId(
+      "desktop-window-chrome-resize-strip",
+    );
     const controls = screen.getByTestId("desktop-window-controls");
 
     expect(chrome).toBeTruthy();
-    expect(chrome.parentElement?.style.getPropertyValue("--desktop-titlebar-height")).toBe("40px");
+    expect(
+      chrome.parentElement?.style.getPropertyValue("--desktop-titlebar-height"),
+    ).toBe("40px");
     expect(chrome.className).toContain("bg-secondary");
     expect(chrome.className).not.toContain(" shrink-0 border-b ");
-    expect(chrome.className).toContain("after:left-[var(--desktop-sidebar-width)]");
+    expect(chrome.className).toContain(
+      "after:left-[var(--desktop-sidebar-width)]",
+    );
     expect(chrome.className).toContain("after:border-b");
     expect(chrome.className).toContain("desktop-window-drag");
-    expect(sidebarChrome.className).toContain("w-[var(--desktop-sidebar-width)]");
+    expect(sidebarChrome.className).toContain(
+      "w-[var(--desktop-sidebar-width)]",
+    );
     expect(sidebarChrome.className).not.toContain("border-b");
     expect(sidebarChrome.className).toContain("desktop-window-drag");
     expect(resizeStrip.className).toContain("desktop-window-no-drag");
     expect(resizeStrip.className).toContain("top-0");
     expect(resizeStrip.className).toContain("h-1");
     expect(controls.className).toContain("desktop-window-no-drag");
-    expect(screen.getByLabelText("Minimize").className).toContain("desktop-window-no-drag");
-    expect(screen.getByLabelText("Maximize").className).toContain("desktop-window-no-drag");
-    expect(screen.getByLabelText("Close").className).toContain("desktop-window-no-drag");
+    expect(screen.getByLabelText("Minimize").className).toContain(
+      "desktop-window-no-drag",
+    );
+    expect(screen.getByLabelText("Maximize").className).toContain(
+      "desktop-window-no-drag",
+    );
+    expect(screen.getByLabelText("Close").className).toContain(
+      "desktop-window-no-drag",
+    );
     expect(screen.getByTestId("app-content")).toBeTruthy();
   });
 
+  it("uses the collapsed sidebar width in Windows chrome from the shared layout store", () => {
+    viewportLayoutManager.setSidebarCollapsed(true);
+
+    renderDesktopShell("win32");
+
+    const chromeRoot = screen.getByTestId(
+      "desktop-window-chrome",
+    ).parentElement;
+
+    expect(chromeRoot?.style.getPropertyValue("--desktop-sidebar-width")).toBe(
+      "56px",
+    );
+    expect(screen.getByAltText("NextClaw")).toBeTruthy();
+  });
+
   it("switches the Windows maximize button to restore while maximized", async () => {
     renderDesktopShell("win32");
 
@@ -100,7 +138,9 @@ describe("DesktopAppShell", () => {
       windowStateListener?.({ isMaximized: true });
     });
 
-    expect(screen.getByLabelText("Restore").className).toContain("desktop-window-no-drag");
+    expect(screen.getByLabelText("Restore").className).toContain(
+      "desktop-window-no-drag",
+    );
     expect(screen.queryByLabelText("Maximize")).toBeNull();
   });
 

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -11,9 +11,12 @@ import { MobileBottomNav } from "@/platforms/mobile";
 import type { DocBrowserCustomTabRenderers } from "@/shared/components/doc-browser/doc-browser-renderer.types";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
 import { cn } from "@/shared/lib/utils";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styles";
 
 const DocBrowser = lazy(async () => ({
-  default: (await import("@/shared/components/doc-browser/doc-browser")).DocBrowser,
+  default: (await import("@/shared/components/doc-browser/doc-browser"))
+    .DocBrowser,
 }));
 
 type DesktopAppShellProps = {
@@ -38,8 +41,17 @@ export function DesktopAppShell({
   children,
 }: DesktopAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
-  const showMobileBottomNav = isMobileLayout && !isChatSessionDetailRoute(pathname);
+  const isSidebarCollapsed = useViewportLayoutStore(
+    (state) => state.isSidebarCollapsed,
+  );
+  const showMobileBottomNav =
+    isMobileLayout && !isChatSessionDetailRoute(pathname);
   const shouldUseWindowsChrome = isWindowsDesktopHost();
+  const desktopSidebarWidth = isSidebarCollapsed
+    ? `${SIDEBAR_RAIL_WIDTH_PX}px`
+    : isMainRoute
+      ? "280px"
+      : "240px";
 
   return (
     <div
@@ -47,13 +59,19 @@ export function DesktopAppShell({
         "h-screen flex flex-col overflow-hidden bg-background font-sans text-foreground",
         shouldUseWindowsChrome ? "rounded-[10px]" : null,
       )}
-      style={shouldUseWindowsChrome ? ({
-        "--desktop-titlebar-height": "40px",
-        "--desktop-caption-safe-right": "140px",
-        "--desktop-sidebar-width": isMainRoute ? "280px" : "240px",
-      } as CSSProperties) : undefined}
+      style={
+        shouldUseWindowsChrome
+          ? ({
+              "--desktop-titlebar-height": "40px",
+              "--desktop-caption-safe-right": "140px",
+              "--desktop-sidebar-width": desktopSidebarWidth,
+            } as CSSProperties)
+          : undefined
+      }
     >
-      {shouldUseWindowsChrome ? <DesktopWindowChrome /> : null}
+      {shouldUseWindowsChrome ? (
+        <DesktopWindowChrome sidebarCollapsed={isSidebarCollapsed} />
+      ) : null}
       <div className="flex min-h-0 flex-1 overflow-hidden">
         {!isMainRoute && <Sidebar mode="settings" />}
         <div className="flex-1 flex min-w-0 overflow-hidden relative">
@@ -70,7 +88,10 @@ export function DesktopAppShell({
           </div>
           {isDocBrowserOpen && docBrowserMode === "docked" ? (
             <Suspense fallback={null}>
-              <DocBrowser customTabRenderers={docBrowserRenderers} dockControls={docBrowserDockControls} />
+              <DocBrowser
+                customTabRenderers={docBrowserRenderers}
+                dockControls={docBrowserDockControls}
+              />
             </Suspense>
           ) : null}
           {sideDock}
@@ -79,7 +100,10 @@ export function DesktopAppShell({
       {showMobileBottomNav ? <MobileBottomNav /> : null}
       {isDocBrowserOpen && docBrowserMode === "floating" ? (
         <Suspense fallback={null}>
-          <DocBrowser customTabRenderers={docBrowserRenderers} dockControls={docBrowserDockControls} />
+          <DocBrowser
+            customTabRenderers={docBrowserRenderers}
+            dockControls={docBrowserDockControls}
+          />
         </Suspense>
       ) : null}
     </div>

package/src/platforms/desktop/components/desktop-window-chrome.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Copy, Minus, Square, X } from "lucide-react";
 import { BrandHeader } from "@/shared/components/common/brand-header";
+import { cn } from "@/shared/lib/utils";
 import type { DesktopWindowStateSnapshot } from "@/platforms/desktop/types/desktop-update.types";
 
 type DesktopWindowControlAction = "minimize" | "toggle-maximize" | "close";
@@ -17,7 +18,11 @@ const windowControls: WindowControlDefinition[] = [
   { action: "close", label: "Close", icon: X, variant: "danger" },
 ];
 
-export function DesktopWindowChrome() {
+export function DesktopWindowChrome({
+  sidebarCollapsed = false,
+}: {
+  sidebarCollapsed?: boolean;
+}) {
   const isMaximized = useDesktopWindowMaximizedState();
   const maximizeControl: WindowControlDefinition = isMaximized
     ? { action: "toggle-maximize", label: "Restore", icon: Copy }
@@ -33,21 +38,37 @@ export function DesktopWindowChrome() {
         data-testid="desktop-window-chrome-resize-strip"
       />
       <div
-        className="desktop-window-drag relative z-10 flex h-full w-[var(--desktop-sidebar-width)] shrink-0 items-center bg-secondary pl-4 pr-3 text-secondary-foreground"
+        className={cn(
+          "desktop-window-drag relative z-10 flex h-full w-[var(--desktop-sidebar-width)] shrink-0 items-center bg-secondary text-secondary-foreground",
+          sidebarCollapsed ? "justify-center px-0" : "pl-4 pr-3",
+        )}
         data-testid="desktop-window-chrome-sidebar"
       >
-        <BrandHeader
-          className="flex min-w-0 shrink-0 items-center gap-2.5"
-          density="chrome"
-        />
+        {sidebarCollapsed ? (
+          <img
+            src="/logo.svg"
+            alt="NextClaw"
+            className="h-6 w-6 shrink-0 object-contain"
+          />
+        ) : (
+          <BrandHeader
+            className="flex min-w-0 shrink-0 items-center gap-2.5"
+            density="chrome"
+          />
+        )}
       </div>
       <div
         className="desktop-window-no-drag absolute right-0 top-0 z-20 flex h-full w-[var(--desktop-caption-safe-right)] items-start justify-end"
         data-testid="desktop-window-controls"
       >
-        {[windowControls[0], maximizeControl, windowControls[1]].map((control) => (
-          <DesktopWindowControlButton key={control.action} control={control} />
-        ))}
+        {[windowControls[0], maximizeControl, windowControls[1]].map(
+          (control) => (
+            <DesktopWindowControlButton
+              key={control.action}
+              control={control}
+            />
+          ),
+        )}
       </div>
     </header>
   );
@@ -86,14 +107,18 @@ function useDesktopWindowMaximizedState(): boolean {
     let isSubscribed = true;
     const desktopApi = window.nextclawDesktop;
 
-    void desktopApi?.getWindowState?.().then((snapshot: DesktopWindowStateSnapshot) => {
-      if (isSubscribed) {
+    void desktopApi
+      ?.getWindowState?.()
+      .then((snapshot: DesktopWindowStateSnapshot) => {
+        if (isSubscribed) {
+          setIsMaximized(snapshot.isMaximized);
+        }
+      });
+    const unsubscribe = desktopApi?.onWindowStateChanged?.(
+      (snapshot: DesktopWindowStateSnapshot) => {
         setIsMaximized(snapshot.isMaximized);
-      }
-    });
-    const unsubscribe = desktopApi?.onWindowStateChanged?.((snapshot: DesktopWindowStateSnapshot) => {
-      setIsMaximized(snapshot.isMaximized);
-    });
+      },
+    );
 
     return () => {
       isSubscribed = false;