@nextclaw/ui 0.25.4 → 0.26.1

package/src/features/side-dock/components/__tests__/side-dock.test.tsx

@@ -1,3 +1,4 @@
+import { WorkbenchSurfaceManager } from '@/shared/components/workbench/managers/workbench-surface.manager';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import {
@@ -23,7 +24,7 @@ describe('SideDock', () => {
   it('renders built-in entries and opens the selected resource', () => {
     const openItem = vi.fn();
     const manager = { openItem } as unknown as SideDockManager;
-    const docBrowserManager = new DocBrowserManager();
+    const docBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), );
 
     render(
       <DocBrowserProvider manager={docBrowserManager}>
@@ -47,7 +48,7 @@ describe('SideDock', () => {
 
   it('places the GitHub project shortcut in the utility section', () => {
     const manager = { openItem: vi.fn() } as unknown as SideDockManager;
-    const docBrowserManager = new DocBrowserManager();
+    const docBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), );
 
     render(
       <DocBrowserProvider manager={docBrowserManager}>
@@ -62,7 +63,7 @@ describe('SideDock', () => {
 
   it('confirms before hiding the dock and persists the visibility preference', async () => {
     const manager = { openItem: vi.fn() } as unknown as SideDockManager;
-    const docBrowserManager = new DocBrowserManager();
+    const docBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), );
 
     render(
       <DocBrowserProvider manager={docBrowserManager}>
@@ -85,7 +86,7 @@ describe('SideDock', () => {
 
   it('does not highlight the default docs tab while DocBrowser is closed', () => {
     const manager = { openItem: vi.fn() } as unknown as SideDockManager;
-    const docBrowserManager = new DocBrowserManager();
+    const docBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), );
 
     render(
       <DocBrowserProvider manager={docBrowserManager}>
@@ -105,7 +106,7 @@ describe('SideDock', () => {
       openItem: vi.fn(),
       unpinItem: vi.fn(),
     } as unknown as SideDockManager;
-    const docBrowserManager = new DocBrowserManager();
+    const docBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), );
     useSideDockStore.getState().setPinnedItems([
       {
         createdAt: '2026-06-02T00:00:00.000Z',
@@ -134,7 +135,7 @@ describe('SideDock', () => {
       openItem: vi.fn(),
       unpinItem: vi.fn(),
     } as unknown as SideDockManager;
-    const docBrowserManager = new DocBrowserManager();
+    const docBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), );
     useSideDockStore.getState().setPinnedItems([
       {
         createdAt: '2026-06-02T00:00:00.000Z',
@@ -159,7 +160,7 @@ describe('SideDock', () => {
       openItem: vi.fn(),
       unpinItem: vi.fn(),
     } as unknown as SideDockManager;
-    const docBrowserManager = new DocBrowserManager();
+    const docBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), );
     useSideDockStore.getState().setPinnedItems([
       {
         createdAt: '2026-06-02T00:00:00.000Z',
@@ -176,6 +177,6 @@ describe('SideDock', () => {
       </DocBrowserProvider>,
     );
 
-    expect(screen.getByText('🎨').className).toContain('text-[20px]');
+    expect(screen.getByText('🎨').parentElement?.className).toContain('text-xl');
   });
 });

package/src/features/side-dock/components/side-dock.tsx

@@ -1,4 +1,4 @@
-import { AppWindow, BookOpen, Boxes, Github, PanelRightClose, Plus, X } from 'lucide-react';
+import { PanelRightClose, X } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import type { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
 import {
@@ -7,9 +7,7 @@ import {
 } from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 import type {
-  SideDockIconName,
   SideDockItem,
-  SideDockItemIcon,
 } from '@/features/side-dock/types/side-dock.types';
 import { mergeSideDockItems } from '@/features/side-dock/utils/side-dock-item.utils';
 import {
@@ -26,56 +24,23 @@ import { useConfirmDialog } from '@/shared/hooks/use-confirm-dialog';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 
+import { PageResourceIcon } from '@/features/right-panel-resources';
+import { ContextMenu, type ContextMenuGroup } from '@/shared/components/ui/context-menu/context-menu';
+
 type SideDockProps = {
+  getItemMenuGroups?: (item: SideDockItem) => ContextMenuGroup[];
   manager: SideDockManager;
 };
 
-const SIDE_DOCK_ICON_COMPONENTS: Record<SideDockIconName, LucideIcon> = {
-  apps: Boxes,
-  docs: BookOpen,
-  github: Github,
-  'new-tab': Plus,
-  'panel-app': AppWindow,
-  'service-apps': AppWindow,
-};
-
-const SIDE_DOCK_UTILITY_ITEM_IDS = new Set<string>([SIDE_DOCK_GITHUB_PROJECT_ITEM_ID]);
-
-const SIDE_DOCK_EMOJI_ICON_PATTERN = /^\p{Extended_Pictographic}(?:\uFE0F|\uFE0E)?(?:\u200D\p{Extended_Pictographic}(?:\uFE0F|\uFE0E)?)*$/u;
-
-function isSideDockEmojiIcon(value: string): boolean {
-  return SIDE_DOCK_EMOJI_ICON_PATTERN.test(value.trim());
-}
-
-function SideDockItemIconView({ icon }: { icon: SideDockItemIcon }) {
-  if (icon.type === 'url') {
-    return <img src={icon.url} alt="" className="h-5 w-5 rounded object-cover" />;
-  }
-  if (icon.type === 'text') {
-    if (isSideDockEmojiIcon(icon.value)) {
-      return (
-        <span className="flex h-7 w-7 items-center justify-center text-[20px] leading-none" aria-hidden="true">
-          {icon.value}
-        </span>
-      );
-    }
-    return (
-      <span className="max-w-7 truncate text-center text-[13px] font-semibold leading-none" aria-hidden="true">
-        {icon.value}
-      </span>
-    );
-  }
-
-  const Icon = SIDE_DOCK_ICON_COMPONENTS[icon.name];
-  return <Icon className="h-5 w-5" aria-hidden="true" />;
-}
 
 function SideDockButton({
   active,
   item,
   onOpen,
   onUnpin,
+  menuGroups = [],
 }: {
+  menuGroups?: ContextMenuGroup[];
   active: boolean;
   item: SideDockItem;
   onOpen: (item: SideDockItem) => void;
@@ -85,7 +50,7 @@ function SideDockButton({
 
   return (
     <Tooltip>
-      <div className="group relative">
+      <ContextMenu groups={menuGroups} label={t('pageActions')}><div className="group relative">
         <TooltipTrigger asChild>
           <button
             type="button"
@@ -101,7 +66,7 @@ function SideDockButton({
                 : 'bg-transparent',
             )}
           >
-            <SideDockItemIconView icon={item.icon} />
+            <span className="flex items-center text-xl"><PageResourceIcon uri={getSideDockResourceUri(item) ?? ''} icon={item.icon} /></span>
           </button>
         </TooltipTrigger>
         {item.removable ? (
@@ -118,7 +83,7 @@ function SideDockButton({
             <X className="h-3 w-3" aria-hidden="true" />
           </button>
         ) : null}
-      </div>
+      </div></ContextMenu>
       <TooltipContent side="left">{label}</TooltipContent>
     </Tooltip>
   );
@@ -202,10 +167,10 @@ function hasExactActiveSideDockItem(items: SideDockItem[], currentTab?: DocBrows
 }
 
 function isSideDockUtilityItem(item: SideDockItem): boolean {
-  return SIDE_DOCK_UTILITY_ITEM_IDS.has(item.id);
+  return item.id === SIDE_DOCK_GITHUB_PROJECT_ITEM_ID;
 }
 
-export function SideDock({ manager }: SideDockProps) {
+export function SideDock({ manager, getItemMenuGroups }: SideDockProps) {
   const pinnedItems = useSideDockStore((state) => state.pinnedItems);
   const setSideDockVisible = useSideDockStore((state) => state.setVisible);
   const { currentTab, isOpen } = useDocBrowser();
@@ -237,6 +202,7 @@ export function SideDock({ manager }: SideDockProps) {
           {mainItems.map((item) => (
             <SideDockButton
               key={item.id}
+              menuGroups={getItemMenuGroups?.(item)}
               active={isSideDockItemActive(item, isOpen, currentTab, hasExactActiveItem)}
               item={item}
               onOpen={manager.openItem}
@@ -249,6 +215,7 @@ export function SideDock({ manager }: SideDockProps) {
             {utilityItems.map((item) => (
               <SideDockButton
                 key={item.id}
+              menuGroups={getItemMenuGroups?.(item)}
                 active={isSideDockItemActive(item, isOpen, currentTab, hasExactActiveItem)}
                 item={item}
                 onOpen={manager.openItem}

package/src/features/side-dock/managers/side-dock.manager.ts

@@ -176,6 +176,8 @@ export class SideDockManager {
   };
 
   private getTabResourceUri = (tab?: DocBrowserTab): string | null => {
+    // Snapshot-backed previews cannot be reconstructed from a shortcut URI alone.
+    if (tab?.viewState != null) return null;
     const uri = tab?.resourceUri ?? tab?.currentUrl;
     const normalized = uri ? normalizeSideDockResourceUri(uri) : '';
     return normalized.length > 0 ? normalized : null;

package/src/features/system-status/components/__tests__/desktop-update-config.test.tsx

@@ -181,6 +181,46 @@ describe('DesktopUpdateConfig', () => {
     expect(screen.getByText('fetch failed: getaddrinfo ENOTFOUND updates.nextclaw.io')).toBeTruthy();
   });
 
+  it('offers a manual Portable Edition download when in-app updates are blocked', () => {
+    useRuntimeUpdateStore.setState((state) => ({
+      ...state,
+      snapshot: state.snapshot
+        ? {
+            ...state.snapshot,
+            status: 'blocked',
+            installationKind: 'desktop-bundle',
+            blockReason: 'unsupported-installation',
+            errorMessage: 'Portable Edition does not support in-app updates yet. Download a newer Portable Edition and keep the data directory.'
+          }
+        : null
+    }));
+
+    renderDesktopUpdateConfig();
+
+    const downloadLink = screen.getByRole('link', { name: '下载最新 Portable Edition' });
+    expect(downloadLink.getAttribute('href')).toBe('https://github.com/Peiiii/nextclaw/releases');
+    expect(downloadLink.getAttribute('target')).toBe('_blank');
+  });
+
+  it('does not offer a Portable Edition download for non-desktop update blocks', () => {
+    useRuntimeUpdateStore.setState((state) => ({
+      ...state,
+      snapshot: state.snapshot
+        ? {
+            ...state.snapshot,
+            status: 'blocked',
+            installationKind: 'npm-runtime-bundle',
+            blockReason: 'unsupported-installation',
+            errorMessage: 'This runtime does not support updates.'
+          }
+        : null
+    }));
+
+    renderDesktopUpdateConfig();
+
+    expect(screen.queryByRole('link', { name: '下载最新 Portable Edition' })).toBeNull();
+  });
+
   it('loads structured release notes from the docs JSON endpoint', async () => {
     const fetchMock = vi.fn(async () => new Response(JSON.stringify({
       schemaVersion: 1,

package/src/features/system-status/components/desktop-update-config.tsx

@@ -16,7 +16,9 @@ import {
   type ReleaseNotesLocale,
   type ReleaseNotesSection
 } from '@/features/system-status/utils/update-release-notes.utils';
-import { RefreshCw, RotateCw } from 'lucide-react';
+import { Download, RefreshCw, RotateCw } from 'lucide-react';
+
+const PORTABLE_RELEASES_URL = 'https://github.com/Peiiii/nextclaw/releases';
 
 const STATUS_LABEL_KEYS: Record<string, string> = {
   checking: 'desktopUpdatesStatusChecking',
@@ -117,6 +119,12 @@ function getStatusTone(status: string): string {
   return 'bg-gray-100 text-gray-700 ring-gray-200';
 }
 
+function isPortableUpdateBlocked(snapshot: UpdateSnapshot): boolean {
+  return snapshot.status === 'blocked'
+    && snapshot.installationKind === 'desktop-bundle'
+    && snapshot.blockReason === 'unsupported-installation';
+}
+
 function getReleaseNotesLocale(): ReleaseNotesLocale {
   return getLanguage() === 'zh' ? 'zh-CN' : 'en-US';
 }
@@ -265,6 +273,16 @@ export function DesktopUpdateConfig() {
                 <p className='text-sm font-semibold text-red-800'>{t('desktopUpdatesBlockedTitle')}</p>
                 <p className='mt-1 text-sm text-red-700'>{snapshot.errorMessage ?? t('desktopUpdatesBlockedDescription')}</p>
                 {snapshot.recoveryCommand ? <code className='mt-3 block rounded-lg bg-white/70 px-3 py-2 text-xs text-red-800'>{snapshot.recoveryCommand}</code> : null}
+                {isPortableUpdateBlocked(snapshot) ? (
+                  <NavigationLink
+                    href={PORTABLE_RELEASES_URL}
+                    external
+                    icon={Download}
+                    className='mt-3 rounded-full border border-red-300 bg-white/70 px-3 py-2 text-red-800 no-underline hover:bg-white hover:text-red-900 hover:no-underline'
+                  >
+                    {t('desktopUpdatesManualPortableDownload')}
+                  </NavigationLink>
+                ) : null}
               </div>
             ) : null}
             {snapshot.errorMessage && snapshot.status !== 'blocked' ? <div className='rounded-2xl border border-red-200 bg-red-50/70 p-4 text-sm text-red-700'>{snapshot.errorMessage}</div> : null}

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

@@ -167,3 +167,5 @@ describe("DesktopAppShell", () => {
     expect(screen.getByTestId("app-content")).toBeTruthy();
   });
 });
+
+vi.mock("@/shared/components/doc-browser/doc-browser", () => ({ DocBrowser: () => null }));

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

@@ -36,8 +36,6 @@ type DesktopAppShellProps = {
 export function DesktopAppShell({
   pathname,
   isMobileLayout = false,
-  isDocBrowserOpen,
-  docBrowserMode,
   docBrowserDockControls,
   docBrowserRenderers = {},
   docBrowserTabMenuGroups,
@@ -133,7 +131,7 @@ export function DesktopAppShell({
       {shouldUseWindowsChrome ? (
         <DesktopWindowChrome sidebarCollapsed={isSidebarCollapsed} />
       ) : null}
-      <div className="relative z-[1] flex min-h-0 flex-1 overflow-hidden">
+      <div className="relative flex min-h-0 flex-1 overflow-hidden">
         {!isMainRoute && <Sidebar />}
         <div className="flex-1 flex min-w-0 overflow-hidden relative">
           <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
@@ -152,7 +150,7 @@ export function DesktopAppShell({
               </main>
             )}
           </div>
-          {isDocBrowserOpen && docBrowserMode === "docked" ? (
+          {(
             <Suspense fallback={null}>
               <DocBrowser
                 customTabRenderers={docBrowserRenderers}
@@ -160,20 +158,11 @@ export function DesktopAppShell({
                 getTabMenuGroups={docBrowserTabMenuGroups}
               />
             </Suspense>
-          ) : null}
+          )}
           {sideDock}
         </div>
       </div>
       {showMobileBottomNav ? <MobileBottomNav /> : null}
-      {isDocBrowserOpen && docBrowserMode === "floating" ? (
-        <Suspense fallback={null}>
-          <DocBrowser
-            customTabRenderers={docBrowserRenderers}
-            dockControls={docBrowserDockControls}
-            getTabMenuGroups={docBrowserTabMenuGroups}
-          />
-        </Suspense>
-      ) : null}
     </div>
   );
 }

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

@@ -38,6 +38,7 @@ describe("MobileAppShell", () => {
     expect(shell.className).toContain("supports-[height:100dvh]:h-[100dvh]");
     expect(shell.className).not.toContain("h-screen");
     expect(screen.getByTestId("mobile-bottom-nav")).toBeTruthy();
+    expect(screen.queryByTestId('mobile-topbar')).toBeNull();
   });
 
   it("centers primary route titles without reserving back-button spacers", () => {

package/src/platforms/mobile/components/__tests__/mobile-bottom-nav.test.tsx

@@ -7,7 +7,8 @@ import { MobileBottomNav } from "@/platforms/mobile/components/mobile-bottom-nav
 
 const { openAppsMock } = vi.hoisted(() => ({ openAppsMock: vi.fn() }));
 
-vi.mock("@/features/panel-apps", () => ({ openApps: openAppsMock }));
+vi.mock("@/features/panel-apps", async (importOriginal) => ({
+  ...await importOriginal<object>(), openApps: openAppsMock }));
 vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({ open: vi.fn() }),
 }));
@@ -39,7 +40,7 @@ describe("MobileBottomNav", () => {
     ).toBeNull();
     expect(screen.getByTestId("mobile-nav-active-indicator")).toBeTruthy();
     expect(screen.getByRole("link", { name: /settings/i }).className).toContain(
-      "bg-gray-100",
+      "bg-muted",
     );
     expect(screen.getByTestId("mobile-nav-active-indicator").textContent).toMatch(
       /settings/i,

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

@@ -25,7 +25,6 @@ type MobileAppShellProps = {
 
 export function MobileAppShell({
   pathname,
-  isDocBrowserOpen,
   docBrowserDockControls,
   docBrowserRenderers = {},
   docBrowserTabMenuGroups,
@@ -33,7 +32,7 @@ export function MobileAppShell({
   children,
 }: MobileAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
-  const showTopbar = !isChatSessionDetailRoute(pathname);
+  const showTopbar = pathname !== '/chat' && !isChatSessionDetailRoute(pathname);
   const showBottomNav = !isChatSessionDetailRoute(pathname);
 
   return (
@@ -49,7 +48,7 @@ export function MobileAppShell({
         )}
       </div>
       {showBottomNav ? <MobileBottomNav /> : null}
-      {isDocBrowserOpen ? (
+      {(
         <Suspense fallback={null}>
           <DocBrowser
             customTabRenderers={docBrowserRenderers}
@@ -58,7 +57,7 @@ export function MobileAppShell({
             getTabMenuGroups={docBrowserTabMenuGroups}
           />
         </Suspense>
-      ) : null}
+      )}
     </div>
   );
 }

package/src/platforms/mobile/components/mobile-bottom-nav.tsx

@@ -20,7 +20,7 @@ export function MobileBottomNav() {
     <nav
       data-testid="mobile-bottom-nav"
       aria-label={t("settings")}
-      className="shrink-0 border-t border-gray-200/80 bg-white/95 backdrop-blur-sm"
+      className="shrink-0 border-t border-border/60 bg-background text-foreground"
       style={{
         paddingBottom: "calc(env(safe-area-inset-bottom, 0px) + 0.25rem)",
       }}
@@ -39,19 +39,19 @@ export function MobileBottomNav() {
                 className={cn(
                   "group flex min-h-[2.875rem] flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   active
-                    ? "bg-gray-100 text-gray-900"
-                    : "text-gray-500 hover:bg-gray-50 hover:text-gray-800",
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                 )}
               >
                 <span className="relative">
                   <item.icon
                     className={cn(
                       "h-3.5 w-3.5",
-                      active ? "text-gray-900" : "text-gray-400",
+                      active ? "text-foreground" : "text-muted-foreground",
                     )}
                   />
                   {item.target === "/inbox" && unreadCount > 0 ? (
-                    <span className="absolute -right-1 -top-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-white" />
+                    <span className="absolute -right-1 -top-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-background" />
                   ) : null}
                 </span>
                 <span className="max-w-full truncate">{item.label}</span>
@@ -63,9 +63,9 @@ export function MobileBottomNav() {
           <button
             type="button"
             onClick={() => openApps(docBrowser)}
-            className="group flex min-h-[2.875rem] w-full flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="group flex min-h-[2.875rem] w-full flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
-            <Boxes className="h-3.5 w-3.5 text-gray-400" />
+            <Boxes className="h-3.5 w-3.5 text-muted-foreground" />
             <span className="max-w-full truncate">{t("appsTitle")}</span>
           </button>
         </li>

package/src/platforms/mobile/components/mobile-settings-shell.tsx

@@ -1,12 +1,12 @@
 import { NavLink } from "react-router-dom";
-import { getSettingsNavItems } from "@/app/configs/app-navigation.config";
+import { getSettingsNavSections } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities";
 
 export function MobileSettingsShell() {
   const desktopCapabilityAvailable = useDesktopCapabilityAvailability();
-  const settingsNavItems = getSettingsNavItems(t, {
+  const settingsNavSections = getSettingsNavSections(t, {
     includeKeyboardShortcuts: false,
     includeDesktopCapabilities: desktopCapabilityAvailable,
   });
@@ -16,7 +16,10 @@ export function MobileSettingsShell() {
       data-testid="mobile-settings-shell"
       className="space-y-3 pb-4"
     >
-      {settingsNavItems.map((item) => (
+      {settingsNavSections.map((section) => (
+        <section key={section.label} className="space-y-2">
+          <h2 className="px-1 pt-2 text-xs font-medium text-muted-foreground">{section.label}</h2>
+          {section.items.map((item) => (
         <NavLink
           key={item.target}
           to={item.target}
@@ -38,6 +41,8 @@ export function MobileSettingsShell() {
             </p>
           </div>
         </NavLink>
+          ))}
+        </section>
       ))}
     </div>
   );

package/src/platforms/mobile/components/mobile-topbar.tsx

@@ -11,7 +11,7 @@ export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   return (
     <header
       data-testid="mobile-topbar"
-      className="shrink-0 border-b border-gray-200/80 bg-white/95 backdrop-blur-sm"
+      className="shrink-0 border-b border-border/60 bg-secondary text-foreground"
       style={{
         paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.25rem)",
       }}
@@ -24,18 +24,18 @@ export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
           <button
             type="button"
             onClick={() => navigate(routeMeta.backTarget as string)}
-            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-200 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900"
+            className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
             aria-label={routeMeta.backLabel ?? t("backToMain")}
           >
             <ArrowLeft className="h-4 w-4" />
           </button>
         ) : null}
         <div className="min-w-0 flex-1">
-          <h1 className="truncate text-center text-[15px] font-semibold text-gray-900">
+          <h1 className="truncate text-center text-[17px] font-semibold text-foreground">
             {routeMeta.title}
           </h1>
         </div>
-        {routeMeta.backTarget ? <div className="h-8 w-8 shrink-0" aria-hidden="true" /> : null}
+        {routeMeta.backTarget ? <div className="h-11 w-11 shrink-0" aria-hidden="true" /> : null}
       </div>
     </header>
   );

package/src/shared/components/doc-browser/__tests__/doc-browser-context.test.tsx

@@ -1,3 +1,4 @@
+import { WorkbenchSurfaceManager } from '@/shared/components/workbench/managers/workbench-surface.manager';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { DocBrowserProvider, useDocBrowser } from '@/shared/components/doc-browser/doc-browser-context';
@@ -18,7 +19,7 @@ const wrapper = ({ children }: { children: ReactNode }) => (
   <DocBrowserProvider manager={testDocBrowserManager}>{children}</DocBrowserProvider>
 );
 
-const testDocBrowserManager = new DocBrowserManager(new RightPanelResourceRouteResolver());
+const testDocBrowserManager = new DocBrowserManager(new WorkbenchSurfaceManager(), new RightPanelResourceRouteResolver());
 
 const docBrowserStorageKey = 'nextclaw.doc-browser.state';
 
@@ -56,7 +57,7 @@ async function resetMemoryThenRehydrate(savedState: string | null) {
 describe('DocBrowserManager layout notifications', () => {
   it('notifies the app layout coordinator after opening the docked browser', () => {
     const onRightPanelOpened = vi.fn();
-    const manager = new DocBrowserManager(
+    const manager = new DocBrowserManager(new WorkbenchSurfaceManager(),
       new RightPanelResourceRouteResolver(),
       onRightPanelOpened,
     );
@@ -71,7 +72,7 @@ describe('DocBrowserManager layout notifications', () => {
 
   it('notifies the app layout coordinator after changing dock mode', () => {
     const onRightPanelOpened = vi.fn();
-    const manager = new DocBrowserManager(
+    const manager = new DocBrowserManager(new WorkbenchSurfaceManager(),
       new RightPanelResourceRouteResolver(),
       onRightPanelOpened,
     );

package/src/shared/components/doc-browser/__tests__/doc-browser-tab-strip.test.tsx

@@ -20,16 +20,11 @@ function renderTabStrip(tabs: DocBrowserTab[]) {
       activeTabId={tabs[0]?.id ?? ""}
       canGoBack={false}
       canGoForward={false}
-      isDocked={true}
-      isFullscreen={false}
       onGoBack={vi.fn()}
       onGoForward={vi.fn()}
       onOpenNewTab={vi.fn()}
       onSetActiveTab={vi.fn()}
       onCloseTab={vi.fn()}
-      onClose={vi.fn()}
-      onDragStart={vi.fn()}
-      onToggleMode={vi.fn()}
     />,
   );
 }