@nextclaw/ui 0.25.4 → 0.26.1

package/src/features/panel-apps/components/__tests__/panel-app-list-item.test.tsx

@@ -7,10 +7,12 @@ import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-lis
 
 const mainSidebarMutation = vi.hoisted(() => ({
   isPending: false,
+  pinned: false,
   mutate: vi.fn(),
 }));
 
 vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
+  usePanelApps: () => ({ data:{ entries:[{ ...baseEntry, mainSidebar: mainSidebarMutation.pinned }] } }),
   useUpdatePanelAppPreferences: () => mainSidebarMutation,
 }));
 
@@ -37,6 +39,7 @@ describe('PanelAppListItem', () => {
     window.localStorage.clear();
     viewportLayoutManager.resetForTests();
     mainSidebarMutation.isPending = false;
+    mainSidebarMutation.pinned = false;
     mainSidebarMutation.mutate.mockReset();
   });
 
@@ -95,9 +98,10 @@ describe('PanelAppListItem', () => {
       />,
     );
 
-    expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
+    expect(screen.queryByRole('menuitem', { name: 'Pin to left sidebar' })).toBeNull();
     await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
-    await user.click(screen.getByRole('button', { name: 'Add to main sidebar' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Layout and position' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Pin to left sidebar' }));
     expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
       id: 'demo',
       preferences: { mainSidebar: true },
@@ -106,6 +110,7 @@ describe('PanelAppListItem', () => {
       useViewportLayoutStore.getState().isMainSidebarAppGroupCollapsed,
     ).toBe(false);
 
+    mainSidebarMutation.pinned = true;
     rerender(
       <PanelAppListItem
         deletePending={false}
@@ -116,9 +121,10 @@ describe('PanelAppListItem', () => {
         onToggleFavorite={vi.fn()}
       />,
     );
-    expect(screen.queryByRole('button', { name: 'Remove from main sidebar' })).toBeNull();
+    expect(screen.queryByRole('menuitem', { name: 'Unpin from left sidebar' })).toBeNull();
     await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
-    await user.click(screen.getByRole('button', { name: 'Remove from main sidebar' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Layout and position' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Unpin from left sidebar' }));
     expect(mainSidebarMutation.mutate).toHaveBeenLastCalledWith({
       id: 'demo',
       preferences: { mainSidebar: false },
@@ -143,3 +149,6 @@ describe('PanelAppListItem', () => {
     expect(link.getAttribute('href')).toBe('/apps/panel/demo/standalone');
   });
 });
+
+vi.mock("react-router-dom", async (importOriginal) => ({ ...(await importOriginal<object>()),useNavigate: () => vi.fn(), useLocation: () => ({ pathname:'/apps',search:'' }) }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager:{ open:vi.fn() } }) }));

package/src/features/panel-apps/components/__tests__/panel-app-toolbar.test.tsx

@@ -5,11 +5,12 @@ import { PanelAppToolbar } from '@/features/panel-apps/components/panel-app-tool
 
 const mainSidebarMutation = vi.hoisted(() => ({
   isPending: false,
+  pinned: false,
   mutate: vi.fn(),
 }));
 
 vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
-  usePanelApps: vi.fn(),
+  usePanelApps: () => ({ data:{ entries:[{ ...entry, mainSidebar: mainSidebarMutation.pinned }] } }),
   useUpdatePanelAppPreferences: () => mainSidebarMutation,
 }));
 
@@ -33,6 +34,7 @@ const entry = {
 describe('PanelAppToolbar', () => {
   beforeEach(() => {
     mainSidebarMutation.isPending = false;
+    mainSidebarMutation.pinned = false;
     mainSidebarMutation.mutate.mockReset();
   });
 
@@ -49,9 +51,10 @@ describe('PanelAppToolbar', () => {
     expect(screen.getByText('墨爪助手')).toBeTruthy();
     expect(screen.queryByRole('button', { name: 'Apps' })).toBeNull();
 
-    expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
+    expect(screen.queryByRole('menuitem', { name: 'Pin to left sidebar' })).toBeNull();
     await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
-    const addButton = screen.getByRole('button', { name: 'Add to main sidebar' });
+    await user.click(screen.getByRole('menuitem', { name: 'Layout and position' }));
+    const addButton = screen.getByRole('menuitem', { name: 'Pin to left sidebar' });
     expect(addButton.getAttribute('aria-pressed')).toBe('false');
     await user.click(addButton);
 
@@ -59,10 +62,11 @@ describe('PanelAppToolbar', () => {
       id: 'ink-assistant',
       preferences: { mainSidebar: true },
     });
-    expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
+    expect(screen.queryByRole('menuitem', { name: 'Pin to left sidebar' })).toBeNull();
   });
 
   it('uses the same menu item to remove an app already in the main sidebar', async () => {
+    mainSidebarMutation.pinned = true;
     const user = userEvent.setup();
     render(
       <PanelAppToolbar
@@ -73,7 +77,8 @@ describe('PanelAppToolbar', () => {
     );
 
     await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
-    const removeButton = screen.getByRole('button', { name: 'Remove from main sidebar' });
+    await user.click(screen.getByRole('menuitem', { name: 'Layout and position' }));
+    const removeButton = screen.getByRole('menuitem', { name: 'Unpin from left sidebar' });
     expect(removeButton.getAttribute('aria-pressed')).toBe('true');
     await user.click(removeButton);
 
@@ -98,3 +103,6 @@ describe('PanelAppToolbar', () => {
     expect(link.getAttribute('href')).toBe('/apps/panel/ink-assistant/standalone');
   });
 });
+
+vi.mock("react-router-dom", async (importOriginal) => ({ ...(await importOriginal<object>()),useNavigate: () => vi.fn(), useLocation: () => ({ pathname:'/apps',search:'' }) }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager:{ open:vi.fn() } }) }));

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -76,7 +76,7 @@ export function PanelAppListItem({
                 <MoreVertical className="h-4 w-4" />
               </button>
             </PopoverTrigger>
-            <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+            <PopoverContent align="end" variant="menu">
               <PanelAppOpenStandaloneMenuItem
                 entry={entry}
                 onSelect={() => setIsMenuOpen(false)}

package/src/features/panel-apps/components/panel-app-main-sidebar-menu-item.tsx

@@ -1,41 +1,8 @@
-import { PanelLeft, PanelLeftDashed } from 'lucide-react';
-import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
-import { useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
 import type { PanelAppEntryView } from '@/shared/lib/api';
-import { t } from '@/shared/lib/i18n';
+import { PageResourceActionItems } from '@/features/right-panel-resources';
+import { pageResourceFromTarget } from '@/features/right-panel-resources';
+import { createPanelAppRightPanelResourceTarget } from '@/features/right-panel-resources';
 
-export function PanelAppMainSidebarMenuItem({
-  entry,
-  onSelect,
-}: {
-  entry: PanelAppEntryView;
-  onSelect?: () => void;
-}) {
-  const updatePreferences = useUpdatePanelAppPreferences();
-  const label = entry.mainSidebar
-    ? t('panelAppsRemoveFromMainSidebar')
-    : t('panelAppsAddToMainSidebar');
-  const Icon = entry.mainSidebar ? PanelLeftDashed : PanelLeft;
-
-  return (
-    <button
-      type="button"
-      disabled={updatePreferences.isPending}
-      aria-pressed={entry.mainSidebar}
-      className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50"
-      onClick={() => {
-        onSelect?.();
-        if (!entry.mainSidebar) {
-          viewportLayoutManager.setMainSidebarAppGroupCollapsed(false);
-        }
-        updatePreferences.mutate({
-          id: entry.id,
-          preferences: { mainSidebar: !entry.mainSidebar },
-        });
-      }}
-    >
-      <Icon className="h-4 w-4 shrink-0" />
-      <span>{label}</span>
-    </button>
-  );
+export function PanelAppMainSidebarMenuItem({ entry, onSelect }: { entry: PanelAppEntryView; onSelect?: () => void }) {
+  return <PageResourceActionItems page={pageResourceFromTarget(createPanelAppRightPanelResourceTarget(entry))} onSelect={onSelect} />;
 }

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -30,6 +30,12 @@ export function PanelAppToolbar({
       >
         {appTitle}
       </span>
+      <IconActionButton
+        icon={<RefreshCw className="h-3.5 w-3.5" />}
+        label={t('panelAppsRefreshCurrent')}
+        onClick={onRefresh}
+        size="sm"
+      />
       {entry ? (
         <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
           <PopoverTrigger asChild>
@@ -39,7 +45,7 @@ export function PanelAppToolbar({
               size="sm"
             />
           </PopoverTrigger>
-          <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+          <PopoverContent align="end" variant="menu">
             <PanelAppOpenStandaloneMenuItem
               entry={entry}
               onSelect={() => setIsMenuOpen(false)}
@@ -51,12 +57,6 @@ export function PanelAppToolbar({
           </PopoverContent>
         </Popover>
       ) : null}
-      <IconActionButton
-        icon={<RefreshCw className="h-3.5 w-3.5" />}
-        label={t('panelAppsRefreshCurrent')}
-        onClick={onRefresh}
-        size="sm"
-      />
     </div>
   );
 }

package/src/features/panel-apps/index.ts

@@ -1,5 +1,4 @@
 export { PanelAppsList } from './components/panel-apps-list';
-export { PanelAppMainSidebarNav } from './components/panel-app-main-sidebar-nav';
 export { PanelAppMainPage } from './pages/panel-app-main-page';
 export { PanelAppStandalonePage } from './pages/panel-app-standalone-page';
 export { PanelAppServiceActionAuthorizationDialog } from './components/panel-app-service-action-authorization-dialog';
@@ -9,6 +8,7 @@ export {
   usePanelApp,
   useGrantPanelAppClient,
   usePanelApps,
+  useUpdatePanelAppPreferences,
   useRecordPanelAppOpened,
 } from './hooks/use-panel-apps';
 export { PanelAppBridgeManager } from './managers/panel-app-bridge.manager';

package/src/features/projects/components/project-materials.test.tsx

@@ -78,3 +78,5 @@ describe("project materials", () => {
     ).toBeTruthy();
   });
 });
+
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

package/src/features/projects/components/project-skills.tsx

@@ -1,3 +1,5 @@
+import { PageResourceActionsMenu } from "@/features/right-panel-resources";
+import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 import type { ProjectSkillMaterial } from "@nextclaw/client-sdk";
 import { formatNumber, t } from "@/shared/lib/i18n";
 import { ProjectEmptyState } from "./project-section";
@@ -33,13 +35,13 @@ export function ProjectSkills({
       {skills.length ? (
         <div className="grid min-w-0 gap-3 md:grid-cols-2">
           {skills.map((skill) => (
+            <div key={skill.ref} className="relative group/page-row rounded-xl border border-border/60 transition-colors hover:border-border hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)] has-[[data-context-menu-open]]:bg-[var(--interaction-hover)]">
             <button
               type="button"
-              key={skill.ref}
-              className="min-w-0 rounded-xl border border-border/60 p-3 text-left transition-colors hover:border-border hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+              className="w-full min-w-0 rounded-xl p-3 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
               onClick={() => onOpen(skill)}
             >
-              <h3 className="text-sm font-medium">{skill.name}</h3>
+              <h3 className="pr-7 text-sm font-medium">{skill.name}</h3>
               <p
                 className="mt-1 truncate text-xs text-muted-foreground"
                 title={skill.path}
@@ -53,6 +55,8 @@ export function ProjectSkills({
                 {skill.description ?? skill.ref}
               </p>
             </button>
+            <span className="absolute right-2 top-2"><PageResourceActionsMenu revealOnHover page={pageResourceFromSystemObject("skill", skill.ref, skill.name)} /></span>
+            </div>
           ))}
         </div>
       ) : (

package/src/features/projects/components/work/project-work-item-drawer.test.tsx

@@ -64,3 +64,5 @@ describe("ProjectWorkItemDrawer", () => {
     );
   });
 });
+
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

package/src/features/projects/components/work/project-work-item-drawer.tsx

@@ -1,3 +1,5 @@
+import { PageResourceActionsMenu } from "@/features/right-panel-resources";
+import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 import { useState } from "react";
 import type {
   ProjectWorkActivity,
@@ -163,7 +165,7 @@ function ProjectWorkItemEditor({
   return (
     <>
       <SheetHeader className="shrink-0 border-b border-border/60 px-5 pb-5 pt-6 pr-14 sm:px-7 sm:pt-7">
-        <SheetTitle>{t("projectsWorkDetails")}</SheetTitle>
+        <div className="flex items-center justify-between gap-2"><SheetTitle>{t("projectsWorkDetails")}</SheetTitle><PageResourceActionsMenu page={pageResourceFromSystemObject("project-work", JSON.stringify([item.projectId, item.id]), item.title)} /></div>
         <SheetDescription>
           {item.id} · {t("projectsWorkVersion")} {item.version}
         </SheetDescription>

package/src/features/right-panel-resources/components/__tests__/page-resource-icon.test.tsx

@@ -0,0 +1,67 @@
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PageResourceIcon } from "@/features/right-panel-resources/components/page-resource-icon";
+
+vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({
+  usePanelApps: () => ({
+    data: { entries: [{ id: "source:notes", appId: "notes", icon: "/notes.png" }] },
+  }),
+}));
+afterEach(cleanup);
+
+describe("resource icon precedence", () => {
+  it("keeps avatar links inline under Markdown body-image styles without resizing body images", () => {
+    const view = render(
+      <div className="chat-markdown">
+        <style>{'.chat-markdown img { display: block; width: auto; height: auto; max-width: 32rem; }'}</style>
+        <a href="nextclaw://objects/agent/coder">
+          <PageResourceIcon uri="nextclaw://objects/agent/coder" icon={{ type: "url", url: "/avatar.png" }} />
+          Coder
+        </a>
+        <img src="/body.png" alt="Body illustration" />
+      </div>,
+    );
+    const icon = view.container.querySelector("a img")!;
+    expect(getComputedStyle(icon).width).toBe("1em");
+    expect(getComputedStyle(icon).height).toBe("1em");
+    expect(getComputedStyle(icon).display).toBe("inline-block");
+    expect(getComputedStyle(view.getByAltText("Body illustration")).width).toBe("auto");
+  });
+  it("uses installed app metadata for an ordinary resource URI and falls back after a load error", () => {
+    const view = render(<PageResourceIcon uri="nextclaw://panel-app/notes" />);
+    const image = view.container.querySelector("img")!;
+    expect(image.getAttribute("src")).toBe("/notes.png");
+    fireEvent.error(image);
+    expect(view.container.querySelector("img")).toBeNull();
+    expect(view.container.querySelector(".lucide-app-window")).not.toBeNull();
+  });
+  it("uses an explicit icon ahead of metadata and then the resource category", () => {
+    const view = render(
+      <PageResourceIcon
+        uri="nextclaw://panel-app/notes"
+        icon={{ type: "text", value: "✎" }}
+      />,
+    );
+    expect(view.container.textContent).toBe("✎");
+    view.rerender(<PageResourceIcon uri="https://example.com" />);
+    expect(view.container.querySelector(".lucide-globe")).not.toBeNull();
+    view.rerender(<PageResourceIcon uri="nextclaw://unknown/item" />);
+    expect(view.container.querySelector(".lucide-link2")).not.toBeNull();
+  });
+  it("uses Panel object identity for its installed icon and falls back to the application icon", () => {
+    const view = render(<PageResourceIcon uri="nextclaw://objects/panel-app/source%3Anotes" />);
+    const icon = view.container.querySelector("img")!;
+    expect(icon.getAttribute("src")).toBe("/notes.png");
+    fireEvent.error(icon);
+    expect(view.container.querySelector(".lucide-app-window")).not.toBeNull();
+  });
+  it("honors precise builtin icons", () => {
+    const view = render(
+      <PageResourceIcon
+        uri="https://github.com"
+        icon={{ type: "builtin", name: "github" }}
+      />,
+    );
+    expect(view.container.querySelector(".lucide-github")).not.toBeNull();
+  });
+});

package/src/features/right-panel-resources/components/__tests__/page-resource-sidebar-nav.test.tsx

@@ -0,0 +1,183 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+import { PageResourceSidebarNav } from "@/features/right-panel-resources/components/page-resource-sidebar-nav";
+import { usePageNavigationStore } from "@/features/right-panel-resources/stores/page-navigation.store";
+import { AppPresenterProvider } from "@/app/components/app-presenter-provider";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+import { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
+
+const mocks = vi.hoisted(() => ({
+  entries: [] as PanelAppEntryView[],
+  mutate: vi.fn(),
+}));
+
+vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({
+  usePanelApps: () => ({ data: { entries: mocks.entries } }),
+  useUpdatePanelAppPreferences: () => ({
+    isPending: false,
+    mutate: mocks.mutate,
+  }),
+}));
+
+function createEntry(
+  overrides: Partial<PanelAppEntryView> = {},
+): PanelAppEntryView {
+  return {
+    appId: "demo",
+    clientDeclared: false,
+    clientGranted: false,
+    contentPath: "/api/panel-apps/demo/content",
+    createdAt: "2026-08-19T00:00:00.000Z",
+    favorite: false,
+    fileName: "demo.panel.html",
+    id: "demo",
+    kind: "single-file",
+    mainSidebar: false,
+    openCount: 0,
+    sizeBytes: 10,
+    title: "Demo",
+    updatedAt: "2026-08-19T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function renderNav(collapsed = false, route = "/") {
+  return render(
+    <MemoryRouter initialEntries={[route]}>
+      <AppPresenterProvider>
+        <PageResourceSidebarNav isCollapsed={collapsed} />
+      </AppPresenterProvider>
+    </MemoryRouter>,
+  );
+}
+describe("shared left pages", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    viewportLayoutManager.resetForTests();
+    usePageNavigationStore.setState({ pinned: [] });
+    mocks.entries = [];
+    mocks.mutate.mockReset();
+  });
+  it("preserves app ordering and app routes while including arbitrary pinned pages", () => {
+    mocks.entries = [
+      createEntry({
+        appId: "second",
+        title: "Second",
+        mainSidebar: true,
+        mainSidebarOrder: 1,
+      }),
+      createEntry({
+        appId: "first",
+        title: "First",
+        mainSidebar: true,
+        mainSidebarOrder: 0,
+      }),
+      createEntry({ appId: "hidden", title: "Hidden" }),
+    ];
+    const uri = "nextclaw://page?path=%2Fskills";
+    usePageNavigationStore.setState({
+      pinned: [
+        {
+          uri,
+          title: "Skills",
+          mainPath: "/skills",
+          target: {
+            kind: "route",
+            title: "Skills",
+            url: "/skills",
+            resourceUri: uri,
+            historyPolicy: "none",
+          },
+        },
+      ],
+    });
+    renderNav(false, "/apps/panel/first");
+    expect(screen.getAllByRole("link").map((link) => link.textContent)).toEqual(
+      ["First", "Second", "Skills"],
+    );
+    expect(
+      screen.getByRole("link", { name: "First" }).getAttribute("aria-current"),
+    ).toBe("page");
+    expect(
+      screen.getByRole("link", { name: "Skills" }).getAttribute("href"),
+    ).toBe("/skills");
+    expect(screen.queryByText("Hidden")).toBeNull();
+  });
+  it("preserves the collapsed group preference", async () => {
+    mocks.entries = [createEntry({ mainSidebar: true })];
+    renderNav();
+    await userEvent.click(screen.getByRole("button", { name: "Pages 1" }));
+    expect(screen.queryByRole("link")).toBeNull();
+    expect(
+      useViewportLayoutStore.getState().isMainSidebarAppGroupCollapsed,
+    ).toBe(true);
+  });
+  it("uses shared actions without nesting action buttons inside links and keeps app preferences on their existing owner", async () => {
+    mocks.entries = [createEntry({ mainSidebar: true })];
+    renderNav();
+    const link = screen.getByRole("link", { name: "Demo" });
+    const menu = screen.getByRole("button", { name: "Page actions" });
+    expect(link.contains(menu)).toBe(false);
+    expect(menu.querySelector(".lucide-ellipsis-vertical")).not.toBeNull();
+    expect(menu.parentElement?.className).toContain(
+      "group-hover/sidebar-item:opacity-100",
+    );
+    expect(menu.parentElement?.className).toContain(
+      "group-focus-within/sidebar-item:opacity-100",
+    );
+    expect(menu.parentElement?.className).toContain(
+      "data-[context-menu-open]:opacity-100",
+    );
+    await userEvent.click(menu);
+    expect(menu.getAttribute("aria-expanded")).toBe("true");
+    expect(menu.parentElement?.hasAttribute("data-context-menu-open")).toBe(
+      true,
+    );
+    expect(screen.queryByRole("menuitem", { name: "Unpin from left sidebar" })).toBeNull();
+    await userEvent.click(screen.getByRole("menuitem", { name: "Layout and position" }));
+    await userEvent.click(
+      screen.getByRole("menuitem", { name: "Unpin from left sidebar" }),
+    );
+    expect(mocks.mutate).toHaveBeenCalledWith({
+      id: "demo",
+      preferences: { mainSidebar: false },
+    });
+  });
+  it("closes the collapsed rail menu after navigation", async () => {
+    mocks.entries = [createEntry({ mainSidebar: true })];
+    renderNav(true);
+    expect(screen.queryByRole("link")).toBeNull();
+    await userEvent.click(screen.getByRole("button", { name: "Pages" }));
+    await userEvent.click(screen.getByRole("link", { name: "Demo" }));
+    expect(screen.queryByRole("link")).toBeNull();
+  });
+  it("omits an empty group", () => {
+    expect(renderNav().container.firstChild).toBeNull();
+  });
+  it("shares one whole-row surface with primary navigation and keeps actions inside that surface", () => {
+    mocks.entries = [createEntry({ mainSidebar: true })];
+    render(
+      <MemoryRouter><AppPresenterProvider>
+        <SidebarNavLinkItem to="/inbox" label="Inbox" density="compact" />
+        <PageResourceSidebarNav isCollapsed={false} />
+      </AppPresenterProvider></MemoryRouter>,
+    );
+    const primary = screen.getByRole("link", { name: "Inbox" });
+    const page = screen.getByRole("link", { name: "Demo" });
+    expect(page.parentElement?.className).toBe(primary.parentElement?.className);
+    expect(page.parentElement?.contains(screen.getByRole("button", { name: "Page actions" }))).toBe(true);
+    expect(page.className).toContain("pr-9");
+  });
+  it("distinguishes resources sharing a pathname by their query identity", () => {
+    render(<MemoryRouter initialEntries={["/resource?uri=one"]}>
+      <SidebarNavLinkItem to="/resource?uri=one" label="One" />
+      <SidebarNavLinkItem to="/resource?uri=two" label="Two" />
+    </MemoryRouter>);
+    expect(screen.getByRole("link", { name: "One" }).getAttribute("aria-current")).toBe("page");
+    expect(screen.getByRole("link", { name: "Two" }).hasAttribute("aria-current")).toBe(false);
+  });
+});

package/src/features/right-panel-resources/components/__tests__/system-object-resource.test.tsx

@@ -0,0 +1,42 @@
+import type * as ReactQuery from "@tanstack/react-query";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SYSTEM_OBJECT_RESOURCE_RENDERERS } from "@/features/right-panel-resources/components/system-object-resource";
+import type { DocBrowserCustomTabRenderParams } from "@/shared/components/doc-browser/doc-browser-renderer.types";
+
+vi.mock("@tanstack/react-query", async (importOriginal) => ({
+  ...await importOriginal<typeof ReactQuery>(),
+  useQuery: () => ({
+    data: {
+      reference: { fileName: "agent.md", label: "Agent", mimeType: "text/markdown" },
+      content: "# Agent snapshot",
+    },
+  }),
+}));
+vi.mock("@/features/chat/features/workspace/components/chat-session-workspace-file-preview", () => ({
+  ChatSessionWorkspaceFilePreview: ({ file }: { file: { key: string; rawText: string } }) => (
+    <div data-testid="preview" data-resource-key={file.key}>{file.rawText}</div>
+  ),
+}));
+afterEach(cleanup);
+
+describe("system object reading identity", () => {
+  it("isolates same-named snapshots by resource URI and preserves identity on reopen", () => {
+    const content = (uri: string) => SYSTEM_OBJECT_RESOURCE_RENDERERS["system-object"].renderContent!({
+      currentUrl: uri,
+      tab: { id: uri, kind: "system-object", title: "Agent", currentUrl: uri, resourceUri: uri, history: [uri], historyIndex: 0, navVersion: 0 },
+      open: vi.fn(),
+      openTarget: vi.fn(),
+      refreshIframe: vi.fn(),
+    } satisfies DocBrowserCustomTabRenderParams);
+    const first = "nextclaw://objects/agent/first";
+    const second = "nextclaw://objects/agent/second";
+    const view = render(content(first));
+    expect(screen.getByTestId("preview").getAttribute("data-resource-key")).toBe(first);
+    view.rerender(content(second));
+    expect(screen.getByTestId("preview").getAttribute("data-resource-key")).toBe(second);
+    view.rerender(content(first));
+    expect(screen.getByTestId("preview").getAttribute("data-resource-key")).toBe(first);
+    expect(screen.getByTestId("preview").textContent).toBe("# Agent snapshot");
+  });
+});

package/src/features/right-panel-resources/components/page-resource-actions-menu.tsx

@@ -0,0 +1,53 @@
+import { MoreVertical } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuItems,
+} from "@/shared/components/ui/context-menu/context-menu";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { usePageResourceActions } from "@/features/right-panel-resources/hooks/use-page-resource-actions";
+import type { PageResource } from "@/features/right-panel-resources/types/page-resource.types";
+import { cn } from "@/shared/lib/utils";
+import { t } from "@/shared/lib/i18n";
+
+export function PageResourceActionsMenu({
+  page,
+  revealOnHover = false,
+}: {
+  page: PageResource;
+  revealOnHover?: boolean;
+}) {
+  const actions = usePageResourceActions();
+  return (
+    <ContextMenu groups={actions(page)} label={t("pageActions")}>
+      <span
+        className={cn(
+          "inline-flex shrink-0",
+          revealOnHover &&
+            "pointer-events-none opacity-0 transition-opacity group-hover/sidebar-item:pointer-events-auto group-hover/sidebar-item:opacity-100 group-focus-within/sidebar-item:pointer-events-auto group-focus-within/sidebar-item:opacity-100 data-[context-menu-open]:pointer-events-auto data-[context-menu-open]:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100",
+        )}
+      >
+        <ContextMenuTrigger>
+          <IconActionButton
+            icon={<MoreVertical className="h-4 w-4" />}
+            label={t("pageActions")}
+            size="sm"
+          />
+        </ContextMenuTrigger>
+      </span>
+    </ContextMenu>
+  );
+}
+
+export function PageResourceActionItems({
+  page,
+  onSelect,
+}: {
+  page: PageResource;
+  onSelect?: () => void;
+}) {
+  const actions = usePageResourceActions();
+  return (
+    <ContextMenuItems groups={actions(page)} onClose={() => onSelect?.()} />
+  );
+}