@nextclaw/ui 0.25.3 → 0.26.0

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>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { MoreVertical } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+} 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",
+          revealOnHover &&
+            "pointer-events-none opacity-0 transition-opacity group-hover/page-row:pointer-events-auto group-hover/page-row:opacity-100 group-focus-within/page-row:pointer-events-auto group-focus-within/page-row: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 (
+    <>
+      {actions(page)
+        .flatMap((group) => group.items)
+        .map((item) => (
+          <button
+            key={item.key}
+            type="button"
+            disabled={item.disabled}
+            aria-pressed={item.pressed}
+            className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50"
+            onClick={() => {
+              onSelect?.();
+              item.onSelect?.();
+            }}
+          >
+            {item.icon}
+            {item.label}
+          </button>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,245 @@
+import { parseSystemObjectReferenceUri } from "@nextclaw/shared";
+import { useInfiniteNcpSessions } from "@/features/chat";
+import { parseSessionKeyFromPanelUrl } from "@/features/chat";
+import { useAgentIdentity } from "@/shared/components/common/agent-identity/use-agent-identity";
+import { parseResourceUri } from "@/shared/lib/resource-uri";
+import { useState } from "react";
+import {
+  Plug,
+  ListTodo,
+  Bot,
+  Folder,
+  Sparkles,
+  Inbox,
+  AlarmClock,
+  AppWindow,
+  BookOpen,
+  Boxes,
+  Eye,
+  File,
+  FolderTree,
+  GitBranch,
+  Github,
+  Globe,
+  LayoutDashboard,
+  Link2,
+  MessageSquare,
+  PanelsTopLeft,
+  Plus,
+} from "lucide-react";
+import { usePanelApps } from "@/features/panel-apps";
+import { readPanelAppIdFromParsedResourceUri } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
+import type { DocBrowserDockIcon } from "@/shared/components/doc-browser/types/doc-browser.types";
+import { FileTypeIcon } from "@/shared/components/file-type-icon";
+
+const RESOURCE_ICONS = {
+  mcp: Plug,
+  work: ListTodo,
+  agent: Bot,
+  project: Folder,
+  skill: Sparkles,
+  inbox: Inbox,
+  session: MessageSquare,
+  file: File,
+  app: AppWindow,
+  docs: BookOpen,
+  website: Globe,
+  generic: Link2,
+  page: PanelsTopLeft,
+  overview: LayoutDashboard,
+  "child-sessions": GitBranch,
+  "project-files": FolderTree,
+  cron: AlarmClock,
+  "continuous-attention": Eye,
+};
+const OBJECT_TYPE_ICONS: Record<string, keyof typeof RESOURCE_ICONS> = {
+  agent: "agent",
+  project: "project",
+  skill: "skill",
+  "cron-job": "cron",
+  "inbox-delivery": "inbox",
+  "service-app": "app",
+  "panel-app": "app",
+  "mcp-server": "mcp",
+  "project-work": "work",
+};
+const BUILTIN_ICONS: Record<string, typeof Globe> = {
+  apps: Boxes,
+  docs: BookOpen,
+  github: Github,
+  "new-tab": Plus,
+  "panel-app": AppWindow,
+  "service-apps": AppWindow,
+};
+
+function resourceTypeIcon(
+  uri: string,
+  appId: string | null,
+): keyof typeof RESOURCE_ICONS {
+  if (uri.startsWith("nextclaw://workspace?")) {
+    const kind = new URL(uri).searchParams.get("page");
+    return kind && Object.hasOwn(RESOURCE_ICONS, kind)
+      ? (kind as keyof typeof RESOURCE_ICONS)
+      : "page";
+  }
+  const object = parseSystemObjectReferenceUri(uri);
+  if (object) return OBJECT_TYPE_ICONS[object.objectType] ?? "generic";
+  if (
+    uri.startsWith("nextclaw://skill/") ||
+    uri.startsWith("nextclaw://marketplace-detail/skill")
+  )
+    return "skill";
+  if (uri.startsWith("nextclaw://page?")) return "page";
+  if (uri.startsWith("nextclaw://chat-session")) return "session";
+  if (
+    uri.startsWith("nextclaw://workspace-file") ||
+    uri.startsWith("file:") ||
+    uri.startsWith("nextclaw://file/")
+  )
+    return "file";
+  if (
+    appId ||
+    uri.startsWith("nextclaw://apps") ||
+    uri.startsWith("nextclaw://marketplace")
+  )
+    return "app";
+  if (uri.startsWith("nextclaw://docs")) return "docs";
+  return /^https?:/.test(uri) ? "website" : "generic";
+}
+
+function appIcon(value?: string): DocBrowserDockIcon | undefined {
+  if (!value) return undefined;
+  return /^(https?:|data:image\/|\/)/.test(value)
+    ? { type: "url", url: value }
+    : { type: "text", value };
+}
+
+function PanelAppResourceIcon({ uri, appId }: { uri: string; appId: string }) {
+  const apps = usePanelApps();
+  return (
+    <ResourceIcon
+      uri={uri}
+      specific={appIcon(
+        apps.data?.entries.find((entry) => entry.appId === appId || entry.id === appId)?.icon,
+      )}
+    />
+  );
+}
+
+function ConversationResourceIcon({
+  uri,
+  sessionKey,
+}: {
+  uri: string;
+  sessionKey: string;
+}) {
+  const sessions = useInfiniteNcpSessions({ pageSize: 100 });
+  const session = sessions.data?.pages
+    .flatMap((page) => page.sessions)
+    .find((item) => item.sessionId === sessionKey);
+  const identity = useAgentIdentity(session?.agentId);
+  return (
+    <ResourceIcon
+      uri={uri}
+      specific={
+        identity?.avatarUrl
+          ? { type: "url", url: identity.avatarUrl }
+          : undefined
+      }
+    />
+  );
+}
+
+function AgentResourceIcon({ uri, agentId }: { uri: string; agentId: string }) {
+  const identity = useAgentIdentity(agentId);
+  return (
+    <ResourceIcon
+      uri={uri}
+      specific={
+        identity?.avatarUrl
+          ? { type: "url", url: identity.avatarUrl }
+          : undefined
+      }
+    />
+  );
+}
+
+export function PageResourceIcon({
+  uri,
+  icon,
+}: {
+  uri: string;
+  icon?: DocBrowserDockIcon;
+}) {
+  const appId = readPanelAppIdFromParsedResourceUri(parseResourceUri(uri));
+  const sessionKey = parseSessionKeyFromPanelUrl(uri);
+  const object = parseSystemObjectReferenceUri(uri);
+  if (object?.objectType === "panel-app" && !icon)
+    return <PanelAppResourceIcon uri={uri} appId={object.objectId} />;
+  if (object?.objectType === "agent" && !icon)
+    return <AgentResourceIcon uri={uri} agentId={object.objectId} />;
+  if (sessionKey && !icon)
+    return <ConversationResourceIcon uri={uri} sessionKey={sessionKey} />;
+  return appId && !icon ? (
+    <PanelAppResourceIcon uri={uri} appId={appId} />
+  ) : (
+    <ResourceIcon uri={uri} specific={icon} />
+  );
+}
+
+function ResourceIcon({
+  uri,
+  specific,
+}: {
+  uri: string;
+  specific?: DocBrowserDockIcon;
+}) {
+  const appId = readPanelAppIdFromParsedResourceUri(parseResourceUri(uri));
+  const [failedUrl, setFailedUrl] = useState<string | null>(null);
+  if (
+    specific?.type === "url" &&
+    specific.url !== failedUrl &&
+    /^(https?:\/\/|data:image\/|\/)/.test(specific.url)
+  ) {
+    return (
+      <img
+        src={specific.url}
+        alt=""
+        referrerPolicy="no-referrer"
+        className="shrink-0 rounded-sm object-contain align-[-0.12em]"
+        // Inline geometry keeps prose image rules from expanding resource icons.
+        style={{ display: "inline-block", width: "1em", height: "1em", maxWidth: "1em", margin: 0 }}
+        onError={() => setFailedUrl(specific.url)}
+      />
+    );
+  }
+  if (specific?.type === "text")
+    return (
+      <span
+        aria-hidden="true"
+        className="inline-block h-[1em] w-[1em] shrink-0 overflow-hidden text-center leading-none"
+      >
+        {specific.value}
+      </span>
+    );
+  let pathname = uri;
+  try {
+    pathname = new URL(uri).searchParams.get("path") ?? new URL(uri).pathname;
+  } catch {
+    /* Local file link. */
+  }
+  if (
+    resourceTypeIcon(uri, appId) === "file" &&
+    /\.[a-z0-9]{1,8}(?:[?#]|$)/i.test(pathname)
+  )
+    return <FileTypeIcon fileName={pathname} size="compact" />;
+  const Icon =
+    (specific?.type === "builtin" && BUILTIN_ICONS[specific.name]) ||
+    RESOURCE_ICONS[resourceTypeIcon(uri, appId)];
+  return (
+    <Icon
+      aria-hidden="true"
+      className="inline-block h-[1em] w-[1em] shrink-0 align-[-0.12em]"
+    />
+  );
+}

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

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { ChevronDown, PanelsTopLeft } from "lucide-react";
+import { NavLink } from "react-router-dom";
+import { usePanelApps } from "@/features/panel-apps";
+import { createPanelAppRightPanelResourceTarget } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
+import {
+  pageResourceFromTarget,
+  pageResourceMainPath,
+} from "@/features/right-panel-resources/utils/page-resource-identity.utils";
+import { usePageNavigationStore } from "@/features/right-panel-resources/stores/page-navigation.store";
+import { PageResourceActionsMenu } from "./page-resource-actions-menu";
+import { PageResourceIcon } from "./page-resource-icon";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import type { PageResource } from "@/features/right-panel-resources/types/page-resource.types";
+import { t } from "@/shared/lib/i18n";
+
+function PageResourceSidebarItems({
+  pages,
+  onNavigate,
+}: {
+  pages: PageResource[];
+  onNavigate?: () => void;
+}) {
+  const app = useAppPresenter();
+  return (
+    <ul className="space-y-0.5">
+      {pages.map((page) => (
+        <li
+          key={page.uri}
+          className="group/page-row flex items-center gap-1 rounded-lg hover:bg-muted/60"
+        >
+          <NavLink
+            to={pageResourceMainPath(page)}
+            onClick={() => {
+              app.pageResourceManager.remember(page);
+              onNavigate?.();
+            }}
+            className={({ isActive }) =>
+              `flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2.5 py-1.5 text-[13px] ${isActive ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:text-foreground"}`
+            }
+          >
+            <PageResourceIcon uri={page.uri} icon={page.target.dockIcon} />
+            <span className="truncate">{page.title}</span>
+          </NavLink>
+          <PageResourceActionsMenu page={page} revealOnHover />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function PageResourceSidebarNav({
+  isCollapsed,
+}: {
+  isCollapsed: boolean;
+}) {
+  const apps = usePanelApps();
+  const pinned = usePageNavigationStore((state) => state.pinned);
+  const groupCollapsed = useViewportLayoutStore(
+    (state) => state.isMainSidebarAppGroupCollapsed,
+  );
+  const [railOpen, setRailOpen] = useState(false);
+  const appPages = (apps.data?.entries ?? [])
+    .filter((entry) => entry.mainSidebar)
+    .sort((a, b) => (a.mainSidebarOrder ?? 0) - (b.mainSidebarOrder ?? 0))
+    .map((entry) =>
+      pageResourceFromTarget(createPanelAppRightPanelResourceTarget(entry)),
+    );
+  const pages = [
+    ...appPages,
+    ...pinned.filter((page) => !appPages.some((app) => app.uri === page.uri)),
+  ];
+  if (!pages.length) return null;
+  if (isCollapsed)
+    return (
+      <Popover open={railOpen} onOpenChange={setRailOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("pageSidebar")}
+            className="mx-auto my-1 flex h-9 w-9 items-center justify-center rounded-lg hover:bg-muted"
+          >
+            <PanelsTopLeft className="h-4 w-4" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent side="right" className="w-64 p-2">
+          <PageResourceSidebarItems
+            pages={pages}
+            onNavigate={() => setRailOpen(false)}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  return (
+    <nav
+      aria-label={t("pageSidebar")}
+      className="mt-1 border-t border-border/50 px-3 pt-1"
+      data-testid="page-resource-sidebar-nav"
+    >
+      <button
+        type="button"
+        aria-expanded={!groupCollapsed}
+        onClick={viewportLayoutManager.toggleMainSidebarAppGroupCollapsed}
+        className="flex w-full items-center gap-2 px-2.5 py-1.5 text-[13px] text-muted-foreground"
+      >
+        <ChevronDown
+          className={`h-3.5 w-3.5 ${groupCollapsed ? "-rotate-90" : ""}`}
+        />
+        <span className="flex-1 text-left">{t("pageSidebar")}</span>
+        <span>{pages.length}</span>
+      </button>
+      {!groupCollapsed && <PageResourceSidebarItems pages={pages} />}
+    </nav>
+  );
+}