@nextclaw/ui 0.14.1-beta.1 → 0.14.2

package/src/features/marketplace/components/marketplace-list-card.tsx

@@ -37,7 +37,6 @@ type MarketplaceListCardActionProps = {
   record?: MarketplaceInstalledRecord;
   state: {
     isInstalling: boolean;
-    isDisabled: boolean;
     canUpdate: boolean;
     canUninstall: boolean;
     busyAction?: MarketplaceManageAction;
@@ -52,17 +51,15 @@ type MarketplaceListCardActionProps = {
 function MarketplaceListCardMeta({
   title,
   spec,
-  summary,
 }: {
   title: string;
   spec: string;
-  summary: string;
 }) {
   return (
     <TooltipProvider delayDuration={400}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className="truncate text-[14px] font-semibold leading-tight text-gray-900">
+          <div className="truncate text-[14px] font-semibold leading-tight text-gray-950">
             {title}
           </div>
         </TooltipTrigger>
@@ -71,11 +68,11 @@ function MarketplaceListCardMeta({
         </TooltipContent>
       </Tooltip>
 
-      <div className="mb-1.5 mt-0.5 flex min-w-0 items-center gap-1.5">
+      <div className="mb-2 mt-1 flex min-w-0 items-center gap-1.5">
         {spec ? (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="max-w-full truncate text-[11px] font-mono text-gray-400">
+              <span className="max-w-full truncate text-[11px] font-mono leading-tight text-gray-400">
                 {spec}
               </span>
             </TooltipTrigger>
@@ -85,15 +82,11 @@ function MarketplaceListCardMeta({
           </Tooltip>
         ) : null}
       </div>
-
-      <p className="line-clamp-2 text-left text-[12px] leading-relaxed text-gray-500/90">
-        {summary}
-      </p>
     </TooltipProvider>
   );
 }
 
-function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
+function MarketplaceListCardActionButtons(props: MarketplaceListCardActionProps) {
   const {
     item,
     record,
@@ -103,96 +96,94 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
   } = props;
   const {
     isInstalling,
-    isDisabled,
     canUpdate,
     canUninstall,
     busyAction,
   } = state;
   const busyForRecord = Boolean(busyAction);
   const hasActions = Boolean((item && !record) || (record && (canUpdate || canUninstall)));
+  if (!hasActions) {
+    return null;
+  }
 
   return (
     <div
       className={cn(
-        "relative flex h-8 shrink-0 items-center justify-end",
-        record ? "md:w-5" : "md:w-0",
+        "flex shrink-0 items-center justify-end gap-1.5 opacity-100 transition-opacity duration-150",
+        "md:pointer-events-none md:opacity-0",
+        "md:group-hover:pointer-events-auto md:group-hover:opacity-100",
+        "md:group-focus-within:pointer-events-auto md:group-focus-within:opacity-100",
       )}
     >
-      <div
-        className={cn(
-          "hidden items-center justify-end transition-opacity duration-150 md:flex",
-          hasActions && "group-hover:opacity-0 group-focus-within:opacity-0",
-        )}
-      >
-        {record ? (
-          <MarketplaceInstalledStatusIcon disabled={isDisabled} />
-        ) : null}
-      </div>
+      {item && !record && (
+        <button
+          onClick={(event) => {
+            event.stopPropagation();
+            onInstall(item);
+          }}
+          disabled={isInstalling}
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md bg-primary px-2 text-[11px] font-medium text-white transition-colors hover:bg-primary-600 disabled:opacity-50"
+        >
+          <Download className="h-3 w-3" />
+          {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}
+        </button>
+      )}
 
-      <div
-        className={cn(
-          "flex w-max items-center justify-end gap-2 transition-opacity duration-150",
-          "opacity-100 md:pointer-events-none md:absolute md:right-0 md:opacity-0",
-          "md:group-hover:pointer-events-auto md:group-hover:opacity-100",
-          "md:group-focus-within:pointer-events-auto md:group-focus-within:opacity-100",
-        )}
-      >
-        {item && !record && (
-          <button
-            onClick={(event) => {
-              event.stopPropagation();
-              onInstall(item);
-            }}
-            disabled={isInstalling}
-            className="inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-xl bg-primary px-3 text-xs font-medium text-white transition-colors hover:bg-primary-600 disabled:opacity-50"
-          >
-            <Download className="h-3.5 w-3.5" />
-            {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}
-          </button>
-        )}
+      {record && canUpdate && (
+        <button
+          disabled={busyForRecord}
+          onClick={(event) => {
+            event.stopPropagation();
+            onManage("update", record);
+          }}
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-blue-200/80 bg-white px-2 text-[11px] font-medium text-blue-600 transition-colors hover:border-blue-300 hover:bg-blue-50 disabled:opacity-50"
+        >
+          <RefreshCw className="h-3 w-3" />
+          {busyAction === "update"
+            ? t("marketplaceUpdating")
+            : t("marketplaceUpdate")}
+        </button>
+      )}
 
-        {record && canUpdate && (
-          <button
-            disabled={busyForRecord}
-            onClick={(event) => {
-              event.stopPropagation();
-              onManage("update", record);
-            }}
-            className="inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-xl border border-blue-200/80 bg-white px-3 text-xs font-medium text-blue-600 transition-colors hover:border-blue-300 hover:bg-blue-50 disabled:opacity-50"
-          >
-            <RefreshCw className="h-3.5 w-3.5" />
-            {busyAction === "update"
-              ? t("marketplaceUpdating")
-              : t("marketplaceUpdate")}
-          </button>
-        )}
+      {record && canUninstall && (
+        <button
+          disabled={busyForRecord}
+          onClick={(event) => {
+            event.stopPropagation();
+            onManage("uninstall", record);
+          }}
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-gray-200/80 bg-white px-2 text-[11px] font-medium text-gray-500 transition-colors hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
+        >
+          <Trash2 className="h-3 w-3" />
+          {busyAction === "uninstall"
+            ? t("marketplaceRemoving")
+            : t("marketplaceUninstall")}
+        </button>
+      )}
+    </div>
+  );
+}
 
-        {record && canUninstall && (
-          <button
-            disabled={busyForRecord}
-            onClick={(event) => {
-              event.stopPropagation();
-              onManage("uninstall", record);
-            }}
-            className="inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-xl border border-gray-200/80 bg-white px-3 text-xs font-medium text-gray-500 transition-colors hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
-          >
-            <Trash2 className="h-3.5 w-3.5" />
-            {busyAction === "uninstall"
-              ? t("marketplaceRemoving")
-              : t("marketplaceUninstall")}
-          </button>
-        )}
-      </div>
+function MarketplaceListCardStatus(props: {
+  record?: MarketplaceInstalledRecord;
+  disabled: boolean;
+}) {
+  const { record, disabled } = props;
+  if (!record) {
+    return null;
+  }
+  return (
+    <div className="flex h-5 w-5 shrink-0 items-center justify-end">
+      <MarketplaceInstalledStatusIcon disabled={disabled} />
     </div>
   );
 }
 
 function MarketplaceInstalledStatusIcon(props: { disabled: boolean }) {
   const { disabled } = props;
-  const { language } = useI18n();
   const label = disabled
-    ? readLocalized({ zh: "已禁用", en: "Disabled" }, language)
-    : readLocalized({ zh: "已安装", en: "Installed" }, language);
+    ? t("marketplaceDisabledStatus")
+    : t("marketplaceInstalledStatus");
 
   return (
     <TooltipProvider delayDuration={300}>
@@ -251,6 +242,7 @@ export function MarketplaceListCard(props: {
     pickLocalizedText(item?.summaryI18n, item?.summary, localeFallbacks) ||
     (record ? t("marketplaceInstalledLocalSummary") : "");
   const spec = item?.install.spec ?? record?.spec ?? "";
+  const tags = item?.tags ?? [];
   const targetId = record?.id || record?.spec;
   const busyAction = targetId
     ? manageState.actionsByTarget.get(targetId)
@@ -268,35 +260,69 @@ export function MarketplaceListCard(props: {
   return (
     <article
       onClick={onOpen}
-      className="group flex cursor-pointer items-start justify-between gap-3.5 rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm transition-all hover:border-blue-300/80 hover:shadow-md"
+      className="group flex h-full min-h-[156px] cursor-pointer flex-col rounded-xl border border-gray-200/60 bg-white p-3.5 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/60"
     >
-      <div className="flex min-w-0 flex-1 gap-3">
+      <div className="flex min-w-0 items-start gap-2.5">
         <MarketplaceItemIcon
           name={title}
           fallback={spec || t("marketplaceTypeSkill")}
+          className="h-9 w-9 rounded-lg text-xs"
         />
-        <div className="flex min-w-0 flex-1 flex-col justify-center">
-          <MarketplaceListCardMeta title={title} spec={spec} summary={summary} />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <MarketplaceListCardMeta title={title} spec={spec} />
         </div>
+
+        <MarketplaceListCardStatus record={record} disabled={isDisabled} />
       </div>
 
-      <MarketplaceListCardActions
-        item={item}
-        record={record}
-        state={{
-          isInstalling,
-          isDisabled,
-          canUpdate,
-          canUninstall,
-          busyAction,
-        }}
-        onInstall={onInstall}
-        onManage={onManage}
-      />
+      <div className="mt-2 flex min-w-0 flex-1 flex-col">
+        <p className="line-clamp-2 text-left text-[12px] leading-relaxed text-gray-500">
+          {summary}
+        </p>
+
+        <div className="mt-auto flex min-w-0 items-end justify-between gap-2 pt-2">
+          <div className="min-w-0 flex-1">
+            <MarketplaceListCardTags tags={tags} />
+          </div>
+          <MarketplaceListCardActionButtons
+            item={item}
+            record={record}
+            state={{
+              isInstalling,
+              canUpdate,
+              canUninstall,
+              busyAction,
+            }}
+            onInstall={onInstall}
+            onManage={onManage}
+          />
+        </div>
+      </div>
     </article>
   );
 }
 
-function readLocalized(text: { zh: string; en: string }, language: string) {
-  return language.startsWith("zh") ? text.zh : text.en;
+function MarketplaceListCardTags({ tags }: { tags: string[] }) {
+  const visibleTags = tags.filter(isVisibleMarketplaceTag).slice(0, 3);
+  if (visibleTags.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex min-w-0 flex-wrap gap-1.5 overflow-hidden">
+      {visibleTags.map((tag) => (
+        <span
+          key={tag}
+          className="max-w-[104px] truncate rounded-md bg-gray-100 px-2 py-0.5 text-[11px] font-medium leading-5 text-gray-500"
+        >
+          {tag}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function isVisibleMarketplaceTag(tag: string) {
+  const normalized = tag.trim().toLowerCase();
+  return normalized.length > 0 && normalized !== "skill";
 }

package/src/features/marketplace/components/marketplace-page-parts.tsx

@@ -78,21 +78,26 @@ export function MarketplaceListSkeleton({ count }: {
       {Array.from({ length: count }, (_, index) => (
         <article
           key={`marketplace-skeleton-${index}`}
-          className="h-full rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm"
+          className="h-full rounded-xl border border-gray-200/60 bg-white p-3.5 shadow-sm"
         >
-          <div className="flex items-start justify-between gap-3.5">
-            <div className="flex min-w-0 flex-1 gap-3">
-              <Skeleton className="h-10 w-10 shrink-0 rounded-xl" />
-              <div className="min-w-0 flex-1 space-y-2 pt-0.5">
+          <div className="flex items-start justify-between gap-2.5">
+            <div className="flex min-w-0 flex-1 gap-2.5">
+              <Skeleton className="h-9 w-9 shrink-0 rounded-lg" />
+              <div className="min-w-0 flex-1 space-y-2">
                 <Skeleton className="h-4 w-32 max-w-[70%]" />
                 <div className="flex items-center gap-2">
                   <Skeleton className="h-3 w-12" />
                   <Skeleton className="h-3 w-24" />
                 </div>
                 <Skeleton className="h-3 w-full" />
+                <div className="flex gap-1.5 pt-0.5">
+                  <Skeleton className="h-5 w-14 rounded-md" />
+                  <Skeleton className="h-5 w-16 rounded-md" />
+                  <Skeleton className="h-5 w-12 rounded-md" />
+                </div>
               </div>
             </div>
-            <Skeleton className="h-8 w-20 shrink-0 rounded-xl" />
+            <Skeleton className="h-7 w-16 shrink-0 rounded-md" />
           </div>
         </article>
       ))}

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;