@nextclaw/ui 0.14.4 → 0.15.0

package/index.html

@@ -12,7 +12,7 @@
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="#FAF9F7" />
-  <meta name="color-scheme" content="light" />
+  <meta name="color-scheme" content="light dark" />
   <style>
     html,
     body,
@@ -50,6 +50,12 @@
       background: #f8f8f7;
     }
 
+    html[data-theme="night"],
+    html[data-theme="night"] body,
+    html[data-theme="night"] #root {
+      background: #101318;
+    }
+
     html[data-theme="probe"],
     html[data-theme="probe"] body,
     html[data-theme="probe"] #root {
@@ -67,8 +73,19 @@
         cool: '#F8FAFC',
         dawn: '#FAF7F4',
         graphite: '#F8F8F7',
+        night: '#101318',
         probe: '#FEFCF6'
       };
+      const themeAppearances = {
+        natural: 'light',
+        minimal: 'light',
+        warm: 'light',
+        cool: 'light',
+        dawn: 'light',
+        graphite: 'light',
+        night: 'dark',
+        probe: 'light'
+      };
       const legacyThemeAliases = {
         leaf: 'warm'
       };
@@ -82,13 +99,19 @@
         window.localStorage.setItem(storageKey, nextTheme);
       }
       const themeColor = themeColors[nextTheme];
+      const themeAppearance = themeAppearances[nextTheme];
       document.documentElement.setAttribute('data-theme', nextTheme);
+      document.documentElement.setAttribute('data-theme-appearance', themeAppearance);
       document.documentElement.style.backgroundColor = themeColor;
-      document.documentElement.style.colorScheme = 'light';
+      document.documentElement.style.colorScheme = themeAppearance;
       const themeMeta = document.querySelector('meta[name="theme-color"]');
       if (themeMeta) {
         themeMeta.setAttribute('content', themeColor);
       }
+      const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
+      if (colorSchemeMeta) {
+        colorSchemeMeta.setAttribute('content', themeAppearance);
+      }
     })();
   </script>
   <script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,14 +28,14 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat-ui": "0.5.4",
-    "@nextclaw/agent-chat": "0.2.16",
-    "@nextclaw/ncp": "0.6.6",
-    "@nextclaw/client-sdk": "0.4.7",
-    "@nextclaw/ncp-http-agent-client": "0.3.48",
-    "@nextclaw/ncp-toolkit": "0.5.41",
-    "@nextclaw/shared": "0.3.3",
-    "@nextclaw/ncp-react": "0.4.56"
+    "@nextclaw/agent-chat-ui": "0.6.0",
+    "@nextclaw/agent-chat": "0.3.0",
+    "@nextclaw/client-sdk": "0.5.0",
+    "@nextclaw/ncp": "0.7.0",
+    "@nextclaw/ncp-toolkit": "0.6.0",
+    "@nextclaw/ncp-react": "0.5.0",
+    "@nextclaw/shared": "0.4.0",
+    "@nextclaw/ncp-http-agent-client": "0.4.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/app/components/layout/__tests__/app-layout.test.tsx

@@ -6,6 +6,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { AppLayout } from "@/app/components/layout/app-layout";
 import { I18nProvider } from "@/app/components/i18n-provider";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { useSideDockStore } from "@/features/side-dock";
 
 const { useViewportLayoutMock } = vi.hoisted(() => ({
   useViewportLayoutMock: vi.fn(() => ({
@@ -53,6 +54,8 @@ describe("AppLayout", () => {
       isDesktop: true,
     });
     window.nextclawDesktop = undefined;
+    useSideDockStore.getState().setVisible(true);
+    useSideDockStore.getState().setPinnedItems([]);
   });
 
   it("treats /agents as a main workspace route instead of the settings shell", () => {
@@ -79,6 +82,30 @@ describe("AppLayout", () => {
     expect(screen.getByTestId("side-dock")).toBeTruthy();
   });
 
+  it("hides the side dock when the persisted visibility preference is off", () => {
+    useSideDockStore.getState().setVisible(false);
+
+    render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/chat"]}>
+          <Routes>
+            <Route
+              path="*"
+              element={
+                <AppLayout>
+                  <div data-testid="chat-content">Chat Content</div>
+                </AppLayout>
+              }
+            />
+          </Routes>
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(screen.getByTestId("chat-content")).toBeTruthy();
+    expect(screen.queryByTestId("side-dock")).toBeNull();
+  });
+
   it("keeps settings routes on the shared shell without channel-specific scroll locking", () => {
     const { container } = render(
       <I18nProvider>

package/src/app/components/layout/__tests__/settings-entry-page.test.tsx

@@ -23,7 +23,7 @@ vi.mock("@/platforms/mobile", async () => ({
 }));
 
 describe("SettingsEntryPage", () => {
-  it("redirects desktop users to the model settings page", () => {
+  it("redirects desktop users to the primary model settings page", () => {
     render(
       <I18nProvider>
         <MemoryRouter initialEntries={["/settings"]}>
@@ -61,6 +61,14 @@ describe("SettingsEntryPage", () => {
     expect(screen.getByTestId("mobile-settings-shell")).toBeTruthy();
     const links = screen.getAllByRole("link");
     expect(links[0]?.textContent?.trim()).toBe("Language");
+    expect(links.slice(1, 7).map((link) => link.textContent?.trim())).toEqual([
+      "Model",
+      "Providers",
+      "Channels",
+      "Search Channels",
+      "Appearance",
+      "Security",
+    ]);
     expect(links.some((link) => link.getAttribute("href") === "/cron")).toBe(
       false,
     );

package/src/app/components/layout/__tests__/sidebar.layout.test.tsx

@@ -81,6 +81,7 @@ describe("Sidebar", () => {
     expect(nav?.className).toContain("flex-1");
     expect(nav?.className).toContain("min-h-0");
     expect(nav?.className).toContain("overflow-y-auto");
+    expect(nav?.className).toContain("[mask-image:linear-gradient");
     expect(
       screen.getByRole("link", { current: "page" }).className,
     ).not.toContain("font-semibold");
@@ -101,7 +102,7 @@ describe("Sidebar", () => {
     expect(backLink).toBeTruthy();
     expect(header.className).not.toContain("bg-white");
     expect(header.className).not.toContain("rounded-2xl");
-    expect(backLink.className).toContain("hover:bg-accent");
+    expect(backLink.className).toContain("hover:bg-gray-200/60");
   });
 
   it("keeps the settings navigation in the expected product order", () => {
@@ -125,10 +126,11 @@ describe("Sidebar", () => {
       "Providers",
       "Channels",
       "Search Channels",
+      "Appearance",
+      "Security",
       "Routing & Runtime",
       "Updates",
       "Remote Access",
-      "Security",
       "Secrets",
       "MCP",
     ]);
@@ -149,7 +151,8 @@ describe("Sidebar", () => {
     expect(screen.getByText("user@example.com")).toBeTruthy();
     expect(accountEntry.className).toContain("py-2");
     expect(accountEntry.className).toContain("text-muted-foreground");
-    expect(accountEntry.className).toContain("hover:bg-accent");
+    expect(accountEntry.className).toContain("hover:bg-gray-200/60");
+    expect(accountEntry.parentElement?.className).not.toContain("border-t");
     expect(accountStatus.className).toContain("text-[11px]");
   });
 

package/src/app/components/layout/app-layout.tsx

@@ -10,6 +10,7 @@ import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { DesktopAppShell, getDesktopHostPlatform } from "@/platforms/desktop";
 import { MobileAppShell } from "@/platforms/mobile";
 import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
+import { MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS } from "@/features/marketplace";
 import {
   SideDock,
   type SideDockManager,
@@ -23,6 +24,11 @@ interface AppLayoutProps {
   children: React.ReactNode;
 }
 
+const DOC_BROWSER_RENDERERS = {
+  ...PANEL_APPS_DOC_BROWSER_RENDERERS,
+  ...MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
+};
+
 function AppLayoutInner({
   children,
   sideDockManager,
@@ -33,6 +39,7 @@ function AppLayoutInner({
   const { language } = useI18n();
   const { isMobile } = useViewportLayout();
   const desktopHostPlatform = getDesktopHostPlatform();
+  const isSideDockVisible = useSideDockStore((state) => state.isVisible);
   useSideDockStore((state) => state.pinnedItems);
   const docBrowserDockControls: DocBrowserDockControls = {
     getDockState: sideDockManager.getDockState,
@@ -50,7 +57,7 @@ function AppLayoutInner({
         pathname={pathname}
         isDocBrowserOpen={isOpen}
         docBrowserDockControls={docBrowserDockControls}
-        docBrowserRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS}
+        docBrowserRenderers={DOC_BROWSER_RENDERERS}
         topbarLeadingInset={
           desktopHostPlatform === "darwin" ? "4.75rem" : undefined
         }
@@ -67,8 +74,8 @@ function AppLayoutInner({
       isDocBrowserOpen={isOpen}
       docBrowserMode={mode}
       docBrowserDockControls={docBrowserDockControls}
-      docBrowserRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS}
-      sideDock={<SideDock manager={sideDockManager} />}
+      docBrowserRenderers={DOC_BROWSER_RENDERERS}
+      sideDock={isSideDockVisible ? <SideDock manager={sideDockManager} /> : null}
     >
       {children}
     </DesktopAppShell>

package/src/app/components/layout/sidebar-items.tsx

@@ -111,10 +111,10 @@ export function SidebarNavLinkItem({
         isActive
           ? collapsed
             ? SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS
-            : "bg-accent text-accent-foreground shadow-sm"
+            : "bg-gray-200/80 text-gray-900 shadow-sm"
           : collapsed
             ? SIDEBAR_RAIL_SURFACE_CLASS
-            : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+            : "text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900",
         className,
       )}
     >
@@ -123,8 +123,8 @@ export function SidebarNavLinkItem({
           collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
           "shrink-0 transition-colors",
           isActive
-            ? "text-accent-foreground"
-            : "text-muted-foreground/75 group-hover:text-accent-foreground",
+            ? "text-gray-700"
+            : "text-muted-foreground/75 group-hover:text-gray-700",
         )}
       />
       <span className={collapsed ? "sr-only" : "min-w-0 flex-1 text-left"}>
@@ -174,7 +174,7 @@ export function SidebarActionItem({
       onClick={onClick}
       aria-label={label}
       className={cn(
-        "group flex w-full items-center rounded-xl font-medium text-muted-foreground transition-all duration-base hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+        "group flex w-full items-center rounded-xl font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
@@ -189,7 +189,7 @@ export function SidebarActionItem({
       <Icon
         className={cn(
           collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
-          "shrink-0 text-muted-foreground/75 transition-colors group-hover:text-accent-foreground",
+          "shrink-0 text-muted-foreground/75 transition-colors group-hover:text-gray-700",
         )}
       />
       <span
@@ -248,7 +248,7 @@ export function SidebarSelectItem({
     <SelectTrigger
       aria-label={label}
       className={cn(
-        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-muted-foreground shadow-none hover:bg-accent hover:text-accent-foreground focus:ring-0 focus-visible:ring-2 focus-visible:ring-primary/35",
+        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-muted-foreground shadow-none hover:bg-gray-200/60 hover:text-gray-900 focus:ring-0 focus-visible:ring-2 focus-visible:ring-primary/35",
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
@@ -267,7 +267,7 @@ export function SidebarSelectItem({
         <Icon
           className={cn(
             collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
-            "shrink-0 text-muted-foreground/75 transition-colors group-hover:text-accent-foreground",
+            "shrink-0 text-muted-foreground/75 transition-colors group-hover:text-gray-700",
           )}
         />
         <span className={collapsed ? "sr-only" : "text-left"}>{label}</span>

package/src/app/components/layout/sidebar-rail.styles.ts

@@ -5,11 +5,13 @@ export const SIDEBAR_RAIL_CONTROL_CLASS = "h-9 w-9 rounded-xl";
 export const SIDEBAR_RAIL_ICON_CLASS = "h-4 w-4";
 export const SIDEBAR_RAIL_STACK_CLASS = "space-y-1";
 export const SIDEBAR_RAIL_ITEM_GAP_CLASS = "gap-1";
+export const SIDEBAR_SCROLL_EDGE_FADE_CLASS =
+  "[mask-image:linear-gradient(to_bottom,black_calc(100%_-_28px),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,black_calc(100%_-_28px),transparent)]";
 
 export const SIDEBAR_RAIL_SURFACE_CLASS =
-  "text-muted-foreground transition-colors duration-base hover:bg-accent hover:text-accent-foreground active:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35";
+  "text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35";
 
-export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = "bg-accent text-accent-foreground";
+export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = "bg-gray-200/80 text-gray-900";
 
 export const SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS =
   "bg-primary/10 text-primary transition-colors duration-base hover:bg-primary/15 hover:text-primary-700 active:bg-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35";

package/src/app/components/layout/sidebar.tsx

@@ -41,6 +41,7 @@ import {
   SIDEBAR_RAIL_STACK_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
   SIDEBAR_RAIL_WIDTH_CLASS,
+  SIDEBAR_SCROLL_EDGE_FADE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
 type SidebarMode = "main" | "settings";
@@ -105,7 +106,7 @@ function SettingsSidebarHeader({
           to="/chat"
           aria-label={t("backToMain")}
           className={cn(
-            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
             isCollapsed
               ? cn(
                   SIDEBAR_RAIL_CONTROL_CLASS,
@@ -118,7 +119,7 @@ function SettingsSidebarHeader({
           <ArrowLeft
             className={cn(
               isCollapsed ? SIDEBAR_RAIL_ICON_CLASS : "h-3.5 w-3.5",
-              "shrink-0 text-muted-foreground/75 group-hover:text-accent-foreground",
+              "shrink-0 text-muted-foreground/75 group-hover:text-gray-700",
             )}
           />
           <span className={isCollapsed ? "sr-only" : "truncate"}>
@@ -208,6 +209,7 @@ function SidebarNavigation({
       className={cn(
         "custom-scrollbar min-h-0 flex-1 overflow-y-auto",
         isCollapsed ? "pr-0" : "pr-1",
+        SIDEBAR_SCROLL_EDGE_FADE_CLASS,
       )}
     >
       <ul
@@ -219,22 +221,20 @@ function SidebarNavigation({
               : "space-y-1 pb-4",
         )}
       >
-        {items.map((item) => {
-          return (
-            <li
-              key={item.target}
-              className={isCollapsed ? "flex justify-center" : undefined}
-            >
-              <SidebarNavLinkItem
-                to={item.target}
-                label={item.label}
-                icon={item.icon}
-                density={density}
-                collapsed={isCollapsed}
-              />
-            </li>
-          );
-        })}
+        {items.map((item) => (
+          <li
+            key={item.target}
+            className={isCollapsed ? "flex justify-center" : undefined}
+          >
+            <SidebarNavLinkItem
+              to={item.target}
+              label={item.label}
+              icon={item.icon}
+              density={density}
+              collapsed={isCollapsed}
+            />
+          </li>
+        ))}
       </ul>
     </nav>
   );
@@ -264,13 +264,9 @@ export function Sidebar({ mode }: SidebarProps) {
   const accountConnected = Boolean(remoteStatus.data?.account.loggedIn);
 
   const handleThemeSwitch = (nextTheme: UiTheme) => {
-    if (theme === nextTheme) {
-      return;
-    }
-    setTheme(nextTheme);
+    if (theme !== nextTheme) setTheme(nextTheme);
   };
 
-  // Core navigation items - primary features
   const mainNavItems: SidebarNavItem[] = [
     {
       target: "/chat",
@@ -294,8 +290,7 @@ export function Sidebar({ mode }: SidebarProps) {
     },
   ];
 
-  const settingsNavItems = getSettingsNavItems(t);
-  const navItems = isSettingsMode ? settingsNavItems : mainNavItems;
+  const navItems = isSettingsMode ? getSettingsNavItems(t) : mainNavItems;
   const sidebarDensity = isSettingsMode ? "compact" : "default";
 
   return (
@@ -315,7 +310,6 @@ export function Sidebar({ mode }: SidebarProps) {
       />
 
       <div className="flex min-h-0 flex-1 flex-col">
-        {/* Navigation */}
         <SidebarNavigation
           isSettingsMode={isSettingsMode}
           isCollapsed={isCollapsed}
@@ -323,10 +317,9 @@ export function Sidebar({ mode }: SidebarProps) {
           density={sidebarDensity}
         />
 
-        {/* Footer actions stay reachable while the nav scrolls independently. */}
         <div
           className={cn(
-            "shrink-0 border-t border-border/70 bg-secondary",
+            "shrink-0 bg-secondary",
             isCollapsed
               ? "mt-2 pt-2"
               : isSettingsMode

package/src/app/configs/app-navigation.config.ts

@@ -8,6 +8,7 @@ import {
   Languages,
   MessageCircle,
   MessageSquare,
+  Palette,
   Search,
   Settings,
   Shield,
@@ -103,6 +104,16 @@ export function getSettingsNavItems(
       label: translate("searchChannels"),
       icon: Search,
     },
+    {
+      target: "/appearance",
+      label: translate("appearance"),
+      icon: Palette,
+    },
+    {
+      target: "/security",
+      label: translate("security"),
+      icon: Shield,
+    },
     {
       target: "/runtime",
       label: translate("runtime"),
@@ -118,11 +129,6 @@ export function getSettingsNavItems(
       label: translate("remote"),
       icon: Wifi,
     },
-    {
-      target: "/security",
-      label: translate("security"),
-      icon: Shield,
-    },
     {
       target: "/secrets",
       label: translate("secrets"),

package/src/app/index.tsx

@@ -26,6 +26,10 @@ const ModelConfigPage = lazy(async () => ({
   default: (await import("@/features/settings/pages/model-config-page"))
     .ModelConfigPage,
 }));
+const AppearanceSettingsPage = lazy(async () => ({
+  default: (await import("@/features/settings/pages/appearance-settings-page"))
+    .AppearanceSettingsPage,
+}));
 const ChatPage = lazy(async () => ({
   default: (await import("@/components/chat/chat-page")).ChatPage,
 }));
@@ -114,6 +118,10 @@ const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
     path: "/cron",
     element: createLazyElement(<ChatPage view="cron" />),
   },
+  {
+    path: "/appearance",
+    element: createLazyElement(<AppearanceSettingsPage />),
+  },
   {
     path: "/model",
     element: createLazyElement(<ModelConfigPage />),

package/src/app/managers/__tests__/viewport-layout.manager.test.ts

@@ -0,0 +1,59 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  DENSE_RIGHT_PANELS_AUTO_COLLAPSE_MAX_WIDTH,
+  viewportLayoutManager,
+} from "@/app/managers/viewport-layout.manager";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+
+function setViewportWidth(width: number): void {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: width,
+    writable: true,
+  });
+  viewportLayoutManager.resetForTests();
+}
+
+describe("ViewportLayoutManager dense right panels", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    setViewportWidth(DENSE_RIGHT_PANELS_AUTO_COLLAPSE_MAX_WIDTH);
+  });
+
+  it("collapses the left sidebar once when two docked right panels crowd a desktop viewport", () => {
+    viewportLayoutManager.collapseSidebarForDenseRightPanels({
+      isDocBrowserDocked: true,
+      isDocBrowserOpen: true,
+      isWorkspacePanelOpen: true,
+    });
+
+    expect(useViewportLayoutStore.getState().isSidebarCollapsed).toBe(true);
+  });
+
+  it("keeps the left sidebar expanded when only one right panel is open", () => {
+    viewportLayoutManager.collapseSidebarForDenseRightPanels({
+      isDocBrowserDocked: true,
+      isDocBrowserOpen: true,
+      isWorkspacePanelOpen: false,
+    });
+
+    expect(useViewportLayoutStore.getState().isSidebarCollapsed).toBe(false);
+  });
+
+  it("does not collapse the left sidebar for floating DocBrowser or wide desktop layouts", () => {
+    viewportLayoutManager.collapseSidebarForDenseRightPanels({
+      isDocBrowserDocked: false,
+      isDocBrowserOpen: true,
+      isWorkspacePanelOpen: true,
+    });
+    expect(useViewportLayoutStore.getState().isSidebarCollapsed).toBe(false);
+
+    setViewportWidth(DENSE_RIGHT_PANELS_AUTO_COLLAPSE_MAX_WIDTH + 1);
+    viewportLayoutManager.collapseSidebarForDenseRightPanels({
+      isDocBrowserDocked: true,
+      isDocBrowserOpen: true,
+      isWorkspacePanelOpen: true,
+    });
+    expect(useViewportLayoutStore.getState().isSidebarCollapsed).toBe(false);
+  });
+});

package/src/app/managers/viewport-layout.manager.ts

@@ -5,6 +5,14 @@ import {
   type ViewportLayoutSnapshot,
 } from "@/app/stores/viewport-layout.store";
 
+export const DENSE_RIGHT_PANELS_AUTO_COLLAPSE_MAX_WIDTH = 1800;
+
+type DenseRightPanelsLayout = {
+  isDocBrowserDocked: boolean;
+  isDocBrowserOpen: boolean;
+  isWorkspacePanelOpen: boolean;
+};
+
 export class ViewportLayoutManager {
   private consumerCount = 0;
 
@@ -51,6 +59,37 @@ export class ViewportLayoutManager {
     useViewportLayoutStore.setState({ isSidebarCollapsed });
   };
 
+  collapseSidebarForDenseRightPanels = (layout: DenseRightPanelsLayout) => {
+    if (
+      !layout.isDocBrowserOpen ||
+      !layout.isDocBrowserDocked ||
+      !layout.isWorkspacePanelOpen
+    ) {
+      return;
+    }
+
+    const snapshot = this.getSnapshot();
+    if (snapshot.mode !== "desktop" || snapshot.isSidebarCollapsed) {
+      return;
+    }
+
+    const width =
+      typeof snapshot.width === "number"
+        ? snapshot.width
+        : typeof window === "undefined"
+          ? null
+          : window.innerWidth;
+    if (
+      typeof width !== "number" ||
+      !Number.isFinite(width) ||
+      width > DENSE_RIGHT_PANELS_AUTO_COLLAPSE_MAX_WIDTH
+    ) {
+      return;
+    }
+
+    this.setSidebarCollapsed(true);
+  };
+
   toggleSidebarCollapsed = () => {
     useViewportLayoutStore.setState((state) => ({
       isSidebarCollapsed: !state.isSidebarCollapsed,

package/src/app/presenters/app.presenter.ts

@@ -1,16 +1,39 @@
 import { AccountManager } from '@/features/account';
-import { ChatDraftIntentManager } from '@/features/chat';
+import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
+import {
+  ChatDraftIntentManager,
+  useChatThreadStore,
+} from '@/features/chat';
 import { PanelAppBridgeManager } from '@/features/panel-apps';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 import { RemoteAccessManager } from '@/features/remote';
 import { ServiceActionAuthorizationManager } from '@/features/service-apps';
 import { SideDockManager } from '@/features/side-dock';
 import { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
+import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
+
+type ChatThreadSnapshot = ReturnType<typeof useChatThreadStore.getState>['snapshot'];
+
+function isChatWorkspacePanelOpen(snapshot: ChatThreadSnapshot): boolean {
+  return snapshot.activeWorkspacePanelKind != null;
+}
 
 export class AppPresenter {
   accountManager = new AccountManager();
   rightPanelResourceRouteResolver = new RightPanelResourceRouteResolver();
-  docBrowserManager = new DocBrowserManager(this.rightPanelResourceRouteResolver);
+  notifyRightPanelOpened = () => {
+    const docBrowser = useDocBrowserStore.getState().snapshot;
+    const chatThread = useChatThreadStore.getState().snapshot;
+    viewportLayoutManager.collapseSidebarForDenseRightPanels({
+      isDocBrowserDocked: docBrowser.mode === 'docked',
+      isDocBrowserOpen: docBrowser.isOpen,
+      isWorkspacePanelOpen: isChatWorkspacePanelOpen(chatThread),
+    });
+  };
+  docBrowserManager = new DocBrowserManager(
+    this.rightPanelResourceRouteResolver,
+    this.notifyRightPanelOpened,
+  );
   sideDockManager = new SideDockManager(this.docBrowserManager);
   chatDraftIntentManager = new ChatDraftIntentManager();
   serviceActionAuthorizationManager = new ServiceActionAuthorizationManager();