@nextclaw/ui 0.25.3 → 0.26.0

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/platforms/desktop/components/__tests__/desktop-app-shell.test.tsx

@@ -167,3 +167,6 @@ describe("DesktopAppShell", () => {
     expect(screen.getByTestId("app-content")).toBeTruthy();
   });
 });
+
+vi.mock("@/shared/components/doc-browser/doc-browser", () => ({ DocBrowser: () => null }));
+vi.mock("@/features/right-panel-resources/components/current-page-actions", () => ({ CurrentPageActions: () => null }));

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

@@ -1,3 +1,4 @@
+import { CurrentPageActions } from '@/features/right-panel-resources';
 import { lazy, Suspense } from "react";
 import type { CSSProperties } from "react";
 import {
@@ -36,8 +37,6 @@ type DesktopAppShellProps = {
 export function DesktopAppShell({
   pathname,
   isMobileLayout = false,
-  isDocBrowserOpen,
-  docBrowserMode,
   docBrowserDockControls,
   docBrowserRenderers = {},
   docBrowserTabMenuGroups,
@@ -133,10 +132,11 @@ 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">
+            {!isMainRoute ? <CurrentPageActions /> : null}
             {isMainRoute ? (
               <div className="flex-1 h-full overflow-hidden">{children}</div>
             ) : (
@@ -152,7 +152,7 @@ export function DesktopAppShell({
               </main>
             )}
           </div>
-          {isDocBrowserOpen && docBrowserMode === "docked" ? (
+          {(
             <Suspense fallback={null}>
               <DocBrowser
                 customTabRenderers={docBrowserRenderers}
@@ -160,20 +160,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

@@ -1,3 +1,4 @@
+import { CurrentPageActions } from '@/features/right-panel-resources';
 import { lazy, Suspense } from "react";
 import {
   isChatSessionDetailRoute,
@@ -25,7 +26,6 @@ type MobileAppShellProps = {
 
 export function MobileAppShell({
   pathname,
-  isDocBrowserOpen,
   docBrowserDockControls,
   docBrowserRenderers = {},
   docBrowserTabMenuGroups,
@@ -33,12 +33,13 @@ export function MobileAppShell({
   children,
 }: MobileAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
-  const showTopbar = !isChatSessionDetailRoute(pathname);
+  const showTopbar = pathname !== '/chat' && !isChatSessionDetailRoute(pathname);
   const showBottomNav = !isChatSessionDetailRoute(pathname);
 
   return (
     <div className="flex h-[100svh] flex-col bg-background font-sans text-foreground supports-[height:100dvh]:h-[100dvh]">
       {showTopbar ? <MobileTopbar leadingInset={topbarLeadingInset} /> : null}
+      {!isMainRoute ? <CurrentPageActions /> : null}
       <div className="relative flex-1 min-h-0 overflow-hidden">
         {isMainRoute ? (
           <div className="h-full min-h-0 overflow-hidden">{children}</div>
@@ -49,7 +50,7 @@ export function MobileAppShell({
         )}
       </div>
       {showBottomNav ? <MobileBottomNav /> : null}
-      {isDocBrowserOpen ? (
+      {(
         <Suspense fallback={null}>
           <DocBrowser
             customTabRenderers={docBrowserRenderers}
@@ -58,7 +59,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-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()}
     />,
   );
 }