@nextclaw/ui 0.25.4 → 0.26.1

package/src/app/components/layout/__tests__/sidebar.layout.test.tsx

@@ -2,6 +2,7 @@ import { render, screen, within } from "@testing-library/react";
 import { fireEvent } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MobileSettingsShell } from "@/platforms/mobile/components/mobile-settings-shell";
 import { Sidebar } from "@/app/components/layout/sidebar";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 import type * as RemoteFeature from "@/features/remote";
@@ -19,6 +20,10 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
+vi.mock("@/app/hooks/use-feature-controls", () => ({
+  useFeatureControls: () => ({ data: { desktopAutomation: { available: false } } }),
+}));
+
 vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
     open: mocks.docOpen,
@@ -102,7 +107,7 @@ describe("Sidebar", () => {
     expect(backLink).toBeTruthy();
     expect(header.className).not.toContain("bg-white");
     expect(header.className).not.toContain("rounded-2xl");
-    expect(backLink.className).toContain("hover:bg-gray-200/60");
+    expect(backLink.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
   });
 
   it("keeps the settings navigation in the expected product order", () => {
@@ -127,9 +132,11 @@ describe("Sidebar", () => {
 
     expect(groupHeadings).toEqual([
       "Basic Configuration",
-      "Advanced Configuration",
+      "Common Settings",
+      "Security & Privacy",
+      "System & Extensions",
     ]);
-    expect(groups).toHaveLength(2);
+    expect(groups).toHaveLength(4);
     expect(
       within(groups[0] as HTMLElement)
         .getAllByRole("link")
@@ -140,32 +147,45 @@ describe("Sidebar", () => {
         .getAllByRole("link")
         .map((link) => link.textContent?.trim() || ""),
     ).toEqual([
-      "Extensions",
       "Appearance",
-      "Sign-in Management",
-      "Privacy & Analytics",
-      "Search Channels",
       "Updates",
-      "Remote Access",
-      "Routing & Runtime",
-      "Secrets",
-      "MCP",
+      "Search Channels",
+      "Keyboard shortcuts",
+    ]);
+    expect(within(groups[2] as HTMLElement).getAllByRole("link").map((link) => link.textContent)).toEqual([
+      "Sign-in Management", "Privacy & Analytics", "Secrets",
+    ]);
+    expect(within(groups[3] as HTMLElement).getAllByRole("link").map((link) => link.textContent)).toEqual([
+      "Remote Access", "Routing & Runtime", "MCP", "Extensions",
     ]);
     expect(linkTexts).toEqual([
       "Model",
       "Providers",
       "Channels",
-      "Extensions",
       "Appearance",
+      "Updates",
+      "Search Channels",
+      "Keyboard shortcuts",
       "Sign-in Management",
       "Privacy & Analytics",
-      "Search Channels",
-      "Updates",
+      "Secrets",
       "Remote Access",
       "Routing & Runtime",
-      "Secrets",
       "MCP",
+      "Extensions",
+    ]);
+  });
+
+  it("shares the grouped navigation with mobile while omitting desktop shortcuts", () => {
+    render(<MemoryRouter initialEntries={["/settings"]}><MobileSettingsShell /></MemoryRouter>);
+    expect(screen.getAllByRole("heading", { level: 2 }).map((heading) => heading.textContent)).toEqual([
+      "Basic Configuration", "Common Settings", "Security & Privacy", "System & Extensions",
     ]);
+    const links = screen.getAllByRole("link");
+    expect(links.slice(0, 3).map((link) => link.textContent?.trim())).toEqual(["Model", "Providers", "Channels"]);
+    expect(links.at(-1)?.textContent?.trim()).toBe("Extensions");
+    expect(screen.queryByRole("link", { name: "Keyboard shortcuts" })).toBeNull();
+    expect(new Set(links.map((link) => link.getAttribute("href"))).size).toBe(links.length);
   });
 
   it("keeps the footer utilities compact without changing the top header structure", () => {
@@ -187,7 +207,7 @@ describe("Sidebar", () => {
     expect(screen.queryByRole("combobox", { name: "Language" })).toBeNull();
     expect(accountEntry.className).toContain("py-2");
     expect(accountEntry.className).toContain("text-muted-foreground");
-    expect(accountEntry.className).toContain("hover:bg-gray-200/60");
+    expect(accountEntry.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
     expect(navigationList?.className).toContain("space-y-0.5");
     expect(footer?.className).toContain("space-y-0.5");
     expect(footer?.firstElementChild?.textContent).toContain("Help Docs");

package/src/app/components/layout/app-layout.tsx

@@ -1,6 +1,10 @@
-import { useCallback, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { MessageSquarePlus } from "lucide-react";
+import { ChatResourceLinkProvider } from '@nextclaw/agent-chat-ui';
+import { PageResourceIcon } from '@/features/right-panel-resources';
+import { usePageResourceActions } from '@/features/right-panel-resources';
+import { pageResourceFromTab } from '@/features/right-panel-resources';
+import { PAGE_RESOURCE_RENDERERS } from '@/app/configs/page-resource-renderers.config';
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 import {
   DocBrowserProvider,
   useDocBrowser,
@@ -10,30 +14,21 @@ import { useI18n } from "@/app/components/i18n-provider";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { DesktopAppShell, getDesktopHostPlatform } from "@/platforms/desktop";
 import { MobileAppShell } from "@/platforms/mobile";
-import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
-import { MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS } from "@/features/marketplace";
 import {
   SideDock,
   type SideDockManager,
   useSideDockStore,
 } from "@/features/side-dock";
 import { getPresenter } from "@/app/presenters/app.presenter";
-import { CHAT_DRAFT_SESSION_PATH } from "@/features/chat";
-import { parseSessionKeyFromRoute } from "@/features/chat/features/session/utils/chat-session-route.utils";
-import { createChatUiResourceReferenceFromTab } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
 import { resolveUiDocumentTitle } from "@/shared/lib/ui-document-title";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
 import type { DocBrowserTabMenuGroupsResolver } from "@/shared/components/doc-browser/doc-browser";
-import { t } from "@/shared/lib/i18n";
 
 interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-const DOC_BROWSER_RENDERERS = {
-  ...PANEL_APPS_DOC_BROWSER_RENDERERS,
-  ...MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
-};
+const renderResourceIcon = (uri: string) => <PageResourceIcon uri={uri} />;
 
 function AppLayoutInner({
   children,
@@ -42,8 +37,6 @@ function AppLayoutInner({
   const { isOpen, mode } = useDocBrowser();
   useDocLinkInterceptor();
   const { pathname } = useLocation();
-  const navigate = useNavigate();
-  const presenter = getPresenter();
   const { language } = useI18n();
   const { isMobile } = useViewportLayout();
   const desktopHostPlatform = getDesktopHostPlatform();
@@ -54,32 +47,8 @@ function AppLayoutInner({
     pinTab: sideDockManager.pinTab,
     unpinTab: sideDockManager.unpinTab,
   };
-  const getDocBrowserTabMenuGroups = useCallback<DocBrowserTabMenuGroupsResolver>((tab) => {
-    const reference = createChatUiResourceReferenceFromTab(tab);
-    if (!reference) return undefined;
-    return [{
-      key: "chat",
-      items: [{
-        key: "add-to-chat",
-        icon: <MessageSquarePlus className="h-4 w-4" />,
-        label: t("docBrowserAddToChat"),
-        restoreFocus: false,
-        onSelect: () => {
-          const isChatRoute = pathname === "/chat" || pathname.startsWith("/chat/");
-          const routeSessionKey = pathname === "/chat"
-            ? null
-            : parseSessionKeyFromRoute(pathname.slice("/chat/".length));
-          presenter.chatComposerIntentManager.requestUiResourceReference({
-            targetSessionKey: isChatRoute ? routeSessionKey : null,
-            reference,
-          });
-          if (!isChatRoute) {
-            navigate(CHAT_DRAFT_SESSION_PATH);
-          }
-        },
-      }],
-    }];
-  }, [navigate, pathname, presenter]);
+  const pageActions = usePageResourceActions();
+  const getDocBrowserTabMenuGroups: DocBrowserTabMenuGroupsResolver = (tab) => pageActions(pageResourceFromTab(tab), 'global');
 
   useEffect(() => {
     document.title = resolveUiDocumentTitle(pathname, window.location);
@@ -91,7 +60,7 @@ function AppLayoutInner({
         pathname={pathname}
         isDocBrowserOpen={isOpen}
         docBrowserDockControls={docBrowserDockControls}
-        docBrowserRenderers={DOC_BROWSER_RENDERERS}
+        docBrowserRenderers={PAGE_RESOURCE_RENDERERS}
         docBrowserTabMenuGroups={getDocBrowserTabMenuGroups}
         topbarLeadingInset={
           desktopHostPlatform === "darwin" ? "4.75rem" : undefined
@@ -109,9 +78,12 @@ function AppLayoutInner({
       isDocBrowserOpen={isOpen}
       docBrowserMode={mode}
       docBrowserDockControls={docBrowserDockControls}
-      docBrowserRenderers={DOC_BROWSER_RENDERERS}
+      docBrowserRenderers={PAGE_RESOURCE_RENDERERS}
       docBrowserTabMenuGroups={getDocBrowserTabMenuGroups}
-      sideDock={isSideDockVisible ? <SideDock manager={sideDockManager} /> : null}
+      sideDock={isSideDockVisible ? <SideDock manager={sideDockManager} getItemMenuGroups={(item) => {
+        const page = getPresenter().pageResourceManager.resolve(item.target.type === 'right-panel-resource' ? item.target.uri : item.target.url);
+        return page ? pageActions(page) : [];
+      }} /> : null}
     >
       {children}
     </DesktopAppShell>
@@ -123,9 +95,9 @@ export function AppLayout({ children }: AppLayoutProps) {
 
   return (
     <DocBrowserProvider manager={presenter.docBrowserManager}>
-      <AppLayoutInner sideDockManager={presenter.sideDockManager}>
+      <ChatResourceLinkProvider renderIcon={renderResourceIcon}><AppLayoutInner sideDockManager={presenter.sideDockManager}>
         {children}
       </AppLayoutInner>
-    </DocBrowserProvider>
+    </ChatResourceLinkProvider></DocBrowserProvider>
   );
 }

package/src/app/components/layout/sidebar-items.tsx

@@ -17,6 +17,7 @@ import {
   SIDEBAR_RAIL_CONTROL_CLASS,
   SIDEBAR_RAIL_ICON_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
+  SIDEBAR_ITEM_SURFACE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
 export type SidebarIcon = ComponentType<{ className?: string }>;
@@ -63,9 +64,12 @@ export function getSidebarItemStackClass(
   return getSidebarItemTone(density).stack;
 }
 
-function isSidebarRouteActive(pathname: string, target: string): boolean {
+function isSidebarRouteActive(pathname: string, search: string, target: string): boolean {
   const normalizedPathname = pathname.toLowerCase();
-  const normalizedTarget = target.toLowerCase();
+  const [targetPath, targetSearch] = target.split("?");
+  const normalizedTarget = targetPath.toLowerCase();
+  const currentParams = new URLSearchParams(search);
+  if ([...new URLSearchParams(targetSearch)].some(([key, value]) => currentParams.get(key) !== value)) return false;
   return (
     normalizedPathname === normalizedTarget ||
     normalizedPathname.startsWith(`${normalizedTarget}/`)
@@ -99,10 +103,11 @@ type SidebarNavLinkItemProps = {
   icon?: SidebarIcon;
   iconNode?: ReactNode;
   density?: SidebarItemDensity;
-  className?: string;
   collapsed?: boolean;
   indicator?: boolean;
   trailing?: ReactNode;
+  actions?: ReactNode;
+  onNavigate?: () => void;
 };
 
 function SidebarNavIcon({
@@ -149,32 +154,32 @@ export function SidebarNavLinkItem({
   icon: Icon,
   iconNode,
   density = "default",
-  className,
   collapsed = false,
   indicator = false,
   trailing,
+  actions,
+  onNavigate,
 }: SidebarNavLinkItemProps) {
   const tone = getSidebarItemTone(density);
-  const { pathname } = useLocation();
-  const isActive = isSidebarRouteActive(pathname, to);
+  const { pathname, search } = useLocation();
+  const isActive = isSidebarRouteActive(pathname, search, to);
   const link = (
+    <div
+      data-sidebar-item=""
+      data-active={isActive || undefined}
+      className={cn("group group/sidebar-item relative flex items-center", collapsed ? SIDEBAR_RAIL_CONTROL_CLASS : "w-full", SIDEBAR_ITEM_SURFACE_CLASS, isActive && SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS)}
+    >
     <Link
       to={to}
+      onClick={onNavigate}
       aria-label={label}
       aria-current={isActive ? "page" : undefined}
       className={cn(
-        "group flex w-full items-center rounded-xl font-medium transition-colors duration-base focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+        "flex min-w-0 flex-1 items-center rounded-xl font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         collapsed
           ? cn(SIDEBAR_RAIL_CONTROL_CLASS, "justify-center px-0 py-0")
           : tone.row,
-        isActive
-          ? collapsed
-            ? SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS
-            : "bg-gray-200/80 text-gray-900 shadow-sm"
-          : collapsed
-            ? SIDEBAR_RAIL_SURFACE_CLASS
-            : "text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900",
-        className,
+        actions && !collapsed && "pr-9",
       )}
     >
       <SidebarNavIcon
@@ -185,7 +190,7 @@ export function SidebarNavLinkItem({
         isActive={isActive}
         tone={tone}
       />
-      <span className={collapsed ? "sr-only" : "min-w-0 flex-1 text-left"}>
+      <span className={collapsed ? "sr-only" : "min-w-0 flex-1 truncate text-left"}>
         {label}
       </span>
       {!collapsed && trailing ? (
@@ -194,6 +199,8 @@ export function SidebarNavLinkItem({
         </span>
       ) : null}
     </Link>
+    {!collapsed && actions ? <span className="absolute right-1 flex items-center">{actions}</span> : null}
+    </div>
   );
 
   return collapsed ? (
@@ -270,7 +277,8 @@ export function SidebarActionItem({
       onClick={onClick}
       aria-label={label}
       className={cn(
-        "group flex w-full items-center rounded-xl font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+        "group flex w-full items-center font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+        SIDEBAR_ITEM_SURFACE_CLASS,
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
@@ -344,7 +352,8 @@ export function SidebarSelectItem({
     <SelectTrigger
       aria-label={label}
       className={cn(
-        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-muted-foreground shadow-none hover:bg-gray-200/60 hover:text-gray-900 focus:ring-0 focus-visible:ring-1 focus-visible:ring-border",
+        "group h-auto w-full border-0 bg-transparent font-medium shadow-none focus:ring-0 focus-visible:ring-1 focus-visible:ring-border",
+        SIDEBAR_ITEM_SURFACE_CLASS,
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,

package/src/app/components/layout/sidebar-rail.styles.ts

@@ -6,10 +6,19 @@ export const SIDEBAR_RAIL_ICON_CLASS = "h-4 w-4";
 export const SIDEBAR_RAIL_STACK_CLASS = "space-y-1";
 export const SIDEBAR_RAIL_ITEM_GAP_CLASS = "gap-1";
 
+// Shared by expanded navigation, compound rows and the collapsed rail.
+// Use theme neutral tokens directly so legacy gray utility overrides cannot
+// turn sidebar feedback into a content selection or accent surface.
+export const SIDEBAR_ITEM_SURFACE_CLASS =
+  "rounded-xl text-muted-foreground transition-colors duration-base hover:bg-[hsl(var(--gray-200)/0.6)] hover:text-foreground focus-within:bg-[hsl(var(--gray-200)/0.6)] has-[[data-context-menu-open]]:bg-[hsl(var(--gray-200)/0.6)]";
+
+export const SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS =
+  "bg-[hsl(var(--gray-200)/0.8)] text-foreground hover:bg-[hsl(var(--gray-200)/0.8)] focus-within:bg-[hsl(var(--gray-200)/0.8)] has-[[data-context-menu-open]]:bg-[hsl(var(--gray-200)/0.8)]";
+
 export const SIDEBAR_RAIL_SURFACE_CLASS =
-  "text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
+  `${SIDEBAR_ITEM_SURFACE_CLASS} active:bg-[hsl(var(--gray-200)/0.8)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border`;
 
-export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = "bg-gray-200/80 text-gray-900";
+export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS;
 
 export const SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS =
   "bg-primary/10 text-primary transition-colors duration-base hover:bg-primary/15 hover:text-primary-700 active:bg-primary/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";

package/src/app/components/layout/sidebar.tsx

@@ -19,7 +19,7 @@ import { IconActionButton } from "@/shared/components/ui/actions/icon-action-but
 import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { useRemoteStatus } from "@/features/remote";
-import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities/hooks/use-desktop-capabilities";
+import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities";
 import { getSettingsNavSections } from "@/app/configs/app-navigation.config";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
@@ -89,7 +89,8 @@ function SettingsSidebarHeader({
           to="/chat"
           aria-label={t("backToMain")}
           className={cn(
-            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+            "group inline-flex min-w-0 items-center text-[12px] font-medium",
+            SIDEBAR_RAIL_SURFACE_CLASS,
             isCollapsed
               ? cn(
                   SIDEBAR_RAIL_CONTROL_CLASS,

package/src/app/configs/__tests__/app-navigation.config.test.ts

@@ -7,6 +7,10 @@ import {
 } from "@/app/configs/app-navigation.config";
 
 describe("panel app main navigation", () => {
+  it("labels resource pages as resources, not settings", () => {
+    expect(isMainWorkspaceRoute("/resource")).toBe(true);
+    expect(resolveMobileRouteMeta("/resource", key => key).title).toBe("resourcePageTitle");
+  });
   it("keeps panel app routes inside the main workspace shell", () => {
     expect(isMainWorkspaceRoute("/apps/panel/rust-todo")).toBe(true);
     expect(isMainWorkspaceRoute("/apps")).toBe(false);

package/src/app/configs/app-navigation.config.ts

@@ -52,6 +52,7 @@ export function matchesRouteTarget(pathname: string, target: string): boolean {
 export function isMainWorkspaceRoute(pathname: string): boolean {
   const normalized = pathname.toLowerCase();
   return (
+    normalized === "/resource" ||
     normalized === "/chat" ||
     normalized.startsWith("/chat/") ||
     normalized === "/inbox" ||
@@ -137,107 +138,60 @@ export function getMainSidebarNavItems(
   ];
 }
 
-export function getSettingsNavItems(
+export function getSettingsNavSections(
   translate: Translate,
   options: SettingsNavigationOptions = {},
-): AppNavigationItem[] {
-  const items = [
-    {
-      target: "/model",
-      label: translate("model"),
-      icon: Cpu,
-    },
-    {
-      target: "/providers",
-      label: translate("providers"),
-      icon: Sparkles,
-    },
-    {
-      target: "/channels",
-      label: translate("channels"),
-      icon: MessageSquare,
-    },
-    {
-      target: "/extensions",
-      label: translate("extensions"),
-      icon: Puzzle,
-    },
-    {
-      target: "/appearance",
-      label: translate("appearance"),
-      icon: Palette,
-    },
-    {
-      target: "/keyboard-shortcuts",
-      label: translate("keyboardShortcuts"),
-      icon: Keyboard,
-    },
-    {
-      target: "/security",
-      label: translate("security"),
-      icon: Shield,
-    },
-    {
-      target: "/privacy",
-      label: translate("privacy"),
-      icon: Activity,
-    },
-    {
-      target: "/desktop-capabilities",
-      label: translate("desktopCapabilities"),
-      icon: MonitorCog,
-    },
-    {
-      target: "/search",
-      label: translate("searchChannels"),
-      icon: Search,
-    },
-    {
-      target: "/updates",
-      label: translate("updates"),
-      icon: Download,
-    },
+): AppNavigationSection[] {
+  const sections = [
     {
-      target: "/remote",
-      label: translate("remote"),
-      icon: Wifi,
+      label: translate("settingsGroupBasic"),
+      items: [
+        { target: "/model", label: translate("model"), icon: Cpu },
+        { target: "/providers", label: translate("providers"), icon: Sparkles },
+        { target: "/channels", label: translate("channels"), icon: MessageSquare },
+      ],
     },
     {
-      target: "/runtime",
-      label: translate("runtime"),
-      icon: Cpu,
+      label: translate("settingsGroupCommon"),
+      items: [
+        { target: "/appearance", label: translate("appearance"), icon: Palette },
+        { target: "/updates", label: translate("updates"), icon: Download },
+        { target: "/search", label: translate("searchChannels"), icon: Search },
+        { target: "/keyboard-shortcuts", label: translate("keyboardShortcuts"), icon: Keyboard },
+      ],
     },
     {
-      target: "/secrets",
-      label: translate("secrets"),
-      icon: KeyRound,
+      label: translate("settingsGroupSecurity"),
+      items: [
+        { target: "/security", label: translate("security"), icon: Shield },
+        { target: "/privacy", label: translate("privacy"), icon: Activity },
+        { target: "/secrets", label: translate("secrets"), icon: KeyRound },
+        { target: "/desktop-capabilities", label: translate("desktopCapabilities"), icon: MonitorCog },
+      ],
     },
     {
-      target: "/marketplace/mcp",
-      label: translate("marketplaceFilterMcp"),
-      icon: Wrench,
+      label: translate("settingsGroupSystem"),
+      items: [
+        { target: "/remote", label: translate("remote"), icon: Wifi },
+        { target: "/runtime", label: translate("runtime"), icon: Cpu },
+        { target: "/marketplace/mcp", label: translate("marketplaceFilterMcp"), icon: Wrench },
+        { target: "/extensions", label: translate("extensions"), icon: Puzzle },
+      ],
     },
   ];
-  return items.filter((item) =>
-    (options.includeDesktopCapabilities !== false || item.target !== "/desktop-capabilities") &&
-    (options.includeKeyboardShortcuts !== false || item.target !== "/keyboard-shortcuts"));
+  return sections.map((section) => ({
+    ...section,
+    items: section.items.filter((item) =>
+      (options.includeDesktopCapabilities !== false || item.target !== "/desktop-capabilities") &&
+      (options.includeKeyboardShortcuts !== false || item.target !== "/keyboard-shortcuts")),
+  })).filter((section) => section.items.length > 0);
 }
 
-export function getSettingsNavSections(
+export function getSettingsNavItems(
   translate: Translate,
   options: SettingsNavigationOptions = {},
-): AppNavigationSection[] {
-  const items = getSettingsNavItems(translate, options);
-  return [
-    {
-      label: translate("settingsGroupBasic"),
-      items: items.slice(0, 3),
-    },
-    {
-      label: translate("settingsGroupAdvanced"),
-      items: items.slice(3),
-    },
-  ];
+): AppNavigationItem[] {
+  return getSettingsNavSections(translate, options).flatMap((section) => section.items);
 }
 
 export function isSettingsRoute(pathname: string): boolean {
@@ -260,6 +214,7 @@ export function resolveMobileRouteMeta(
 } {
   const normalized = pathname.toLowerCase();
   const settingsItems = getSettingsNavItems(translate);
+  if (normalized === "/resource") return { title: translate("resourcePageTitle"), backTarget: null, backLabel: null };
 
   if (isChatSessionDetailRoute(normalized)) {
     return {

package/src/app/configs/page-resource-renderers.config.ts

@@ -0,0 +1,13 @@
+import { SYSTEM_OBJECT_RESOURCE_RENDERERS } from "@/features/right-panel-resources";
+import { WORKSPACE_FILE_PANEL_RENDERERS } from "@/features/right-panel-resources";
+import { CHAT_SESSION_PANEL_RENDERERS } from "@/features/chat";
+import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
+import { MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS } from "@/features/marketplace";
+
+export const PAGE_RESOURCE_RENDERERS = {
+  ...SYSTEM_OBJECT_RESOURCE_RENDERERS,
+  ...WORKSPACE_FILE_PANEL_RENDERERS,
+  ...CHAT_SESSION_PANEL_RENDERERS,
+  ...PANEL_APPS_DOC_BROWSER_RENDERERS,
+  ...MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
+};

package/src/app/index.tsx

@@ -11,6 +11,7 @@ import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styl
 import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
 import { LoginPage } from "@/components/auth/login-page";
 import { ChatPage } from "@/components/chat/chat-page";
+import { ChatRuntimeProvider } from "@/features/chat";
 import { loadAccountPanel } from "@/features/account";
 import { InboxRuntime } from "@/features/inbox";
 import { PanelAppServiceActionAuthorizationDialog } from "@/features/panel-apps";
@@ -117,6 +118,7 @@ function createLazyElement(element: ReactElement): ReactElement {
 }
 
 const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
+  { path: '/resource', element: createLazyElement(<ChatPage view="resource" />) },
   {
     path: "/projects/:projectId/:tab",
     element: createLazyElement(<ChatPage view="projects" />),
@@ -274,6 +276,7 @@ function ProtectedApp() {
 
   return (
     <AppPresenterProvider>
+      <ChatRuntimeProvider>
       <AppNotificationRuntime />
       <InboxRuntime />
       <AppLayout>
@@ -284,6 +287,7 @@ function ProtectedApp() {
       </Suspense>
       <PanelAppServiceActionAuthorizationDialog />
       <DesktopAuthorizationDialog />
+      </ChatRuntimeProvider>
     </AppPresenterProvider>
   );
 }

package/src/app/presenters/app.presenter.ts

@@ -1,3 +1,4 @@
+import { PageResourceManager } from '@/features/right-panel-resources';
 import { AccountManager } from '@/features/account';
 import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
 import {
@@ -15,14 +16,17 @@ import { RemoteAccessManager } from '@/features/remote';
 import { SideDockManager } from '@/features/side-dock';
 import { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
+import { GLOBAL_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
+import { workbenchSurfaceManager } from '@/shared/components/workbench/managers/workbench-surface.manager';
 
 type ChatThreadSnapshot = ReturnType<typeof useChatThreadStore.getState>['snapshot'];
 
 function isChatWorkspacePanelOpen(snapshot: ChatThreadSnapshot): boolean {
-  return snapshot.activeWorkspacePanelKind != null;
+  return snapshot.activeWorkspacePanelKind != null && !snapshot.workspacePanelHidden;
 }
 
 export class AppPresenter {
+  workbenchSurfaceManager = workbenchSurfaceManager;
   notificationManager = new AppNotificationManager();
   inboxManager = new InboxManager();
   chatCompletionNotificationManager = new ChatCompletionNotificationManager(
@@ -34,15 +38,22 @@ export class AppPresenter {
     const docBrowser = useDocBrowserStore.getState().snapshot;
     const chatThread = useChatThreadStore.getState().snapshot;
     viewportLayoutManager.collapseSidebarForDenseRightPanels({
-      isDocBrowserDocked: docBrowser.mode === 'docked',
+      isDocBrowserDocked: this.workbenchSurfaceManager.get(GLOBAL_WORKBENCH_SURFACE).placement === 'docked',
       isDocBrowserOpen: docBrowser.isOpen,
       isWorkspacePanelOpen: isChatWorkspacePanelOpen(chatThread),
     });
   };
+  notifyWorkspacePanelOpened = () => {
+    const parentKey = useChatThreadStore.getState().snapshot.workspacePanelParentKey;
+    this.workbenchSurfaceManager.restore(`session-workspace:${parentKey ?? 'draft'}`);
+    this.notifyRightPanelOpened();
+  };
   docBrowserManager = new DocBrowserManager(
+    this.workbenchSurfaceManager,
     this.rightPanelResourceRouteResolver,
     this.notifyRightPanelOpened,
   );
+  pageResourceManager = new PageResourceManager(this);
   appPackageOperationSettlementManager = new AppPackageOperationSettlementManager(
     this.docBrowserManager,
   );