@nextclaw/ui 0.25.4 → 0.26.0

package/src/features/notifications/components/app-notification-toast.tsx

@@ -1,4 +1,4 @@
-import { X } from "lucide-react";
+import { Maximize2, X } from "lucide-react";
 import { Link } from "react-router-dom";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 
@@ -10,13 +10,14 @@ export type AppNotificationToastProps = {
   ariaLabel?: string;
   dismissLabel: string;
   onDismiss: () => void;
+  action?: { label: string; onClick: () => void };
 };
 
 const NOTIFICATION_CARD_CLASS =
-  "relative ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] rounded-[20px] border border-border/80 bg-background text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)]";
+  "relative ml-auto flex min-h-[68px] w-[360px] max-w-[calc(100vw-2rem)] items-center rounded-2xl border border-border/80 bg-background text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)]";
 
 const NOTIFICATION_CONTENT_CLASS =
-  "flex min-h-[72px] min-w-0 flex-1 items-center gap-3 rounded-[inherit] py-3 pl-[18px] pr-[52px]";
+  "flex min-h-[66px] min-w-0 flex-1 items-center gap-2.5 rounded-[inherit] py-3 pl-3.5 pr-1";
 
 function AppNotificationContent({
   title,
@@ -47,19 +48,33 @@ function AppNotificationContent({
   );
 }
 
-function AppNotificationDismissButton({
+function AppNotificationActions({
   dismissLabel,
   onDismiss,
-}: Pick<AppNotificationToastProps, "dismissLabel" | "onDismiss">) {
+  action,
+}: Pick<AppNotificationToastProps, "dismissLabel" | "onDismiss" | "action">) {
   return (
-    <IconActionButton
-      className="absolute right-2.5 top-2.5 z-10"
-      icon={<X className="h-4 w-4" aria-hidden="true" />}
-      label={dismissLabel}
-      onClick={onDismiss}
-      size="lg"
-      tooltipSide="left"
-    />
+    <div className="flex shrink-0 items-center gap-0.5 pr-2">
+      {action ? (
+        <IconActionButton
+          icon={<Maximize2 className="h-4 w-4" aria-hidden="true" />}
+          label={action.label}
+          className="h-9 w-9"
+          size="lg"
+          onClick={() => {
+            action.onClick();
+            onDismiss();
+          }}
+        />
+      ) : null}
+      <IconActionButton
+        icon={<X className="h-4 w-4" aria-hidden="true" />}
+        label={dismissLabel}
+        onClick={onDismiss}
+        className="h-9 w-9"
+        size="lg"
+      />
+    </div>
   );
 }
 
@@ -71,6 +86,7 @@ export function AppNotificationToast({
   ariaLabel,
   dismissLabel,
   onDismiss,
+  action,
 }: AppNotificationToastProps) {
   const accessibleLabel = ariaLabel ?? [title, description].filter(Boolean).join(": ");
 
@@ -89,7 +105,8 @@ export function AppNotificationToast({
             iconSrc={iconSrc}
           />
         </Link>
-        <AppNotificationDismissButton
+        <AppNotificationActions
+          action={action}
           dismissLabel={dismissLabel}
           onDismiss={onDismiss}
         />
@@ -110,7 +127,8 @@ export function AppNotificationToast({
           iconSrc={iconSrc}
         />
       </div>
-      <AppNotificationDismissButton
+      <AppNotificationActions
+        action={action}
         dismissLabel={dismissLabel}
         onDismiss={onDismiss}
       />

package/src/features/notifications/managers/app-notification.manager.ts

@@ -12,6 +12,7 @@ export type AppNotification = {
   ariaLabel?: string;
   dismissLabel?: string;
   durationMs?: number;
+  action?: { label: string; onClick: () => void };
 };
 
 const DEFAULT_NOTIFICATION_DURATION_MS = 8_000;
@@ -26,6 +27,7 @@ export class AppNotificationManager {
           href: notification.href,
           iconSrc: notification.iconSrc,
           ariaLabel: notification.ariaLabel,
+          action: notification.action,
           dismissLabel: notification.dismissLabel ?? t("notificationDismiss"),
           onDismiss: () => {
             toast.dismiss(toastId);

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,9 @@ describe('PanelAppListItem', () => {
       />,
     );
 
-    expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
+    expect(screen.queryByRole('button', { 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('button', { name: 'Pin to left sidebar' }));
     expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
       id: 'demo',
       preferences: { mainSidebar: true },
@@ -106,6 +109,7 @@ describe('PanelAppListItem', () => {
       useViewportLayoutStore.getState().isMainSidebarAppGroupCollapsed,
     ).toBe(false);
 
+    mainSidebarMutation.pinned = true;
     rerender(
       <PanelAppListItem
         deletePending={false}
@@ -116,9 +120,9 @@ describe('PanelAppListItem', () => {
         onToggleFavorite={vi.fn()}
       />,
     );
-    expect(screen.queryByRole('button', { name: 'Remove from main sidebar' })).toBeNull();
+    expect(screen.queryByRole('button', { 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('button', { name: 'Unpin from left sidebar' }));
     expect(mainSidebarMutation.mutate).toHaveBeenLastCalledWith({
       id: 'demo',
       preferences: { mainSidebar: false },
@@ -143,3 +147,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,9 @@ 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('button', { 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' });
+    const addButton = screen.getByRole('button', { name: 'Pin to left sidebar' });
     expect(addButton.getAttribute('aria-pressed')).toBe('false');
     await user.click(addButton);
 
@@ -59,10 +61,11 @@ describe('PanelAppToolbar', () => {
       id: 'ink-assistant',
       preferences: { mainSidebar: true },
     });
-    expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
+    expect(screen.queryByRole('button', { 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 +76,7 @@ describe('PanelAppToolbar', () => {
     );
 
     await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
-    const removeButton = screen.getByRole('button', { name: 'Remove from main sidebar' });
+    const removeButton = screen.getByRole('button', { name: 'Unpin from left sidebar' });
     expect(removeButton.getAttribute('aria-pressed')).toBe('true');
     await user.click(removeButton);
 
@@ -98,3 +101,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-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/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">
             <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 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"
               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,158 @@
+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";
+
+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/page-row:opacity-100",
+    );
+    expect(menu.parentElement?.className).toContain(
+      "group-focus-within/page-row: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,
+    );
+    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();
+  });
+});

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/current-page-actions.tsx

@@ -0,0 +1,36 @@
+import { useLocation } from "react-router-dom";
+import { PageResourceActionsMenu } from "./page-resource-actions-menu";
+import { resolveUiDocumentTitle } from "@/shared/lib/ui-document-title";
+import {
+  getMainSidebarNavItems,
+  getSettingsNavItems,
+} from "@/app/configs/app-navigation.config";
+import { t } from "@/shared/lib/i18n";
+
+/** Route pages share resource actions; forms retain their main-workspace-only capability. */
+export function CurrentPageActions() {
+  const { pathname } = useLocation();
+  const navigation = [...getMainSidebarNavItems(t), ...getSettingsNavItems(t)];
+  const title =
+    navigation.find((item) => item.target === pathname)?.label ??
+    resolveUiDocumentTitle(pathname).replace(/^NextClaw - /, "");
+  const uri = `nextclaw://page?${new URLSearchParams({ path: pathname })}`;
+  return (
+    <div className="flex shrink-0 justify-end border-b border-border/40 px-3 py-1">
+      <PageResourceActionsMenu
+        page={{
+          uri,
+          title,
+          mainPath: pathname,
+          target: {
+            kind: "route",
+            title,
+            url: pathname,
+            resourceUri: uri,
+            historyPolicy: "none",
+          },
+        }}
+      />
+    </div>
+  );
+}