@nextclaw/ui 0.26.0 → 0.26.2

package/src/features/chat/utils/chat-voice-permissions.utils.test.ts

@@ -1,5 +1,6 @@
 import { afterEach, expect, it, vi } from 'vitest';
 import { checkMicrophoneAccess, classifyMicrophoneError, voicePermissionInstructionKeys } from './chat-voice-permissions.utils';
+import { setLanguage, t } from '@/shared/lib/i18n';
 
 afterEach(() => vi.unstubAllGlobals());
 
@@ -20,8 +21,11 @@ it('rechecks access and immediately releases every captured track', async () =>
   expect(stop).toHaveBeenCalledTimes(2);
 });
 
-it('reports unavailable media API and an actual denial without caching', async () => {
+it('distinguishes insecure HTTP from an unsupported media API and an actual denial', async () => {
+  vi.stubGlobal('isSecureContext', false);
   vi.stubGlobal('navigator', {});
+  expect(await checkMicrophoneAccess()).toBe('insecure-context');
+  vi.stubGlobal('isSecureContext', true);
   expect(await checkMicrophoneAccess()).toBe('unsupported');
   vi.stubGlobal('navigator', { mediaDevices: { getUserMedia: vi.fn().mockRejectedValue(new DOMException('', 'NotAllowedError')) } });
   expect(await checkMicrophoneAccess()).toBe('permission');
@@ -34,3 +38,10 @@ it.each([
   expect(voicePermissionInstructionKeys(ua)).toEqual(['chatInputVoicePermissionBrowser', `chatInputVoicePermission${platform}`]);
   expect(voicePermissionInstructionKeys(`${ua} Electron`)[0]).toBe('chatInputVoicePermissionDesktop');
 });
+
+it('explains the VPS HTTPS recovery path in both supported languages', () => {
+  setLanguage('zh');
+  expect(t('chatInputVoiceInsecureContext')).toContain('VPS 配置 HTTPS');
+  setLanguage('en');
+  expect(t('chatInputVoiceInsecureContext')).toContain('Configure HTTPS for a VPS');
+});

package/src/features/chat/utils/chat-voice-permissions.utils.ts

@@ -1,4 +1,8 @@
-export type MicrophoneError = 'permission' | 'no-device' | 'device-busy' | 'unsupported' | 'failed';
+export type MicrophoneError = 'insecure-context' | 'permission' | 'no-device' | 'device-busy' | 'unsupported' | 'failed';
+
+export function isMicrophoneSecureContext(): boolean {
+  return globalThis.isSecureContext !== false;
+}
 
 export function classifyMicrophoneError(error: unknown): MicrophoneError {
   const name = error instanceof DOMException || error instanceof Error ? error.name : '';
@@ -11,6 +15,7 @@ export function classifyMicrophoneError(error: unknown): MicrophoneError {
 
 /** Check on explicit start/retry; release every track even if the panel was closed. */
 export async function checkMicrophoneAccess(): Promise<MicrophoneError | null> {
+  if (!isMicrophoneSecureContext()) return 'insecure-context';
   if (!navigator.mediaDevices?.getUserMedia) return 'unsupported';
   try {
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

package/src/features/cron/components/cron-job-row.tsx

@@ -159,8 +159,14 @@ export function CronJobRow({
         </button>
 
         <TooltipProvider delayDuration={250}>
-          <div className="relative flex shrink-0 items-center">
-            <div className="absolute right-11 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-100 transition-opacity duration-150 [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
+          <div className="relative flex shrink-0 items-center gap-1">
+            <Switch
+              checked={job.enabled}
+              onCheckedChange={(checked) => onToggle(job, checked)}
+              aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
+            />
+
+            <div className="flex items-center gap-0.5 opacity-100 transition-opacity duration-150 [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -192,8 +198,7 @@ export function CronJobRow({
                   </TooltipTrigger>
                   <TooltipContent>{t("cronMoreActions")}</TooltipContent>
                 </Tooltip>
-                <PopoverContent align="end" sideOffset={4} className="w-56 p-1">
-                  <PageResourceActionItems page={pageResourceFromSystemObject("cron-job", job.id, jobLabel)} onSelect={() => setMenuOpen(false)} />
+                <PopoverContent align="end" sideOffset={4} variant="menu">
                   <div className="my-1 h-px bg-border" />
                   <button
                     type="button"
@@ -217,14 +222,11 @@ export function CronJobRow({
                     <Trash2 className="h-3.5 w-3.5" />
                     {t("delete")}
                   </button>
+                <div className="my-1 h-px bg-border" />
+                  <PageResourceActionItems page={pageResourceFromSystemObject("cron-job", job.id, jobLabel)} onSelect={() => setMenuOpen(false)} />
                 </PopoverContent>
               </Popover>
             </div>
-            <Switch
-              checked={job.enabled}
-              onCheckedChange={(checked) => onToggle(job, checked)}
-              aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
-            />
           </div>
         </TooltipProvider>
       </div>

package/src/features/inbox/components/inbox-reader-dialog.tsx

@@ -153,8 +153,10 @@ export function InboxReaderDialog() {
                     {formatDateTime(activeDelivery.createdAt)}
                   </time>
                 </div>
-                {activeDelivery && <PageResourceActionsMenu page={pageResourceFromSystemObject("inbox-delivery", activeDelivery.id, activeDelivery.title)} />}
-                {positionControls}
+                <div className="flex shrink-0 items-center gap-1">
+                  {positionControls}
+                  <PageResourceActionsMenu page={pageResourceFromSystemObject("inbox-delivery", activeDelivery.id, activeDelivery.title)} />
+                </div>
               </div>
               <DialogDescription className="sr-only">
                 {activeDelivery.summary ?? t("inboxNoSummary")}

package/src/features/inbox/pages/inbox-page.tsx

@@ -115,14 +115,17 @@ function InboxListPane({
         {filteredDeliveries.length > 0 ? (
           <ul className="space-y-0.5">
             {filteredDeliveries.map((delivery) => (
-              <li key={delivery.id}>
+              <li key={delivery.id} className={cn(
+                "group/page-row relative rounded-lg hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)] has-[[data-context-menu-open]]:bg-[var(--interaction-hover)]",
+                activeDeliveryId === delivery.id && "bg-[var(--interaction-selection)]",
+              )}>
                 <Link
                   to={`/inbox/${encodeURIComponent(delivery.id)}`}
                   className={cn(
-                    "block rounded-lg px-2.5 py-2 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                    "block rounded-lg px-2.5 py-2 pr-10 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                     activeDeliveryId === delivery.id
-                      ? "bg-[var(--interaction-selection)] text-foreground"
-                      : "text-foreground/80 hover:bg-[var(--interaction-hover)] hover:text-foreground",
+                      ? "text-foreground"
+                      : "text-foreground/80 hover:text-foreground",
                   )}
                 >
                   <h2 className={cn(
@@ -131,7 +134,6 @@ function InboxListPane({
                   )}>
                     {delivery.title}
                   </h2>
-          <PageResourceActionsMenu page={pageResourceFromSystemObject("inbox-delivery", delivery.id, delivery.title)} />
                   <div className="mt-0.5 flex items-center gap-2 text-[11px] leading-4 text-muted-foreground/65">
                     <p className="min-w-0 flex-1 truncate">
                       {delivery.summary ?? t("inboxNoSummary")}
@@ -148,6 +150,9 @@ function InboxListPane({
                     )}
                   </div>
                 </Link>
+                <span className="absolute right-1 top-1.5">
+                  <PageResourceActionsMenu revealOnHover page={pageResourceFromSystemObject("inbox-delivery", delivery.id, delivery.title)} />
+                </span>
               </li>
             ))}
           </ul>

package/src/features/marketplace/components/mcp/mcp-marketplace-card.tsx

@@ -60,7 +60,6 @@ export function McpMarketplaceCard(props: {
         </div>
 
         <div className="flex shrink-0 flex-col gap-2">
-          {record?.id && <PageResourceActionsMenu page={pageResourceFromSystemObject("mcp-server", record.id, name)} />}
           {!installed && item && onInstall ? (
             <Button
               type="button"
@@ -124,6 +123,7 @@ export function McpMarketplaceCard(props: {
               ) : null}
             </>
           ) : null}
+          {record?.id && <PageResourceActionsMenu page={pageResourceFromSystemObject("mcp-server", record.id, name)} />}
         </div>
       </div>
     </article>

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

@@ -98,9 +98,10 @@ describe('PanelAppListItem', () => {
       />,
     );
 
-    expect(screen.queryByRole('button', { name: 'Pin to left 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: 'Pin to left 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 },
@@ -120,9 +121,10 @@ describe('PanelAppListItem', () => {
         onToggleFavorite={vi.fn()}
       />,
     );
-    expect(screen.queryByRole('button', { name: 'Unpin from left 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: 'Unpin from left 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 },

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

@@ -51,9 +51,10 @@ describe('PanelAppToolbar', () => {
     expect(screen.getByText('墨爪助手')).toBeTruthy();
     expect(screen.queryByRole('button', { name: 'Apps' })).toBeNull();
 
-    expect(screen.queryByRole('button', { name: 'Pin to left 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: 'Pin to left 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);
 
@@ -61,7 +62,7 @@ describe('PanelAppToolbar', () => {
       id: 'ink-assistant',
       preferences: { mainSidebar: true },
     });
-    expect(screen.queryByRole('button', { name: 'Pin to left 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 () => {
@@ -76,7 +77,8 @@ describe('PanelAppToolbar', () => {
     );
 
     await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
-    const removeButton = screen.getByRole('button', { name: 'Unpin from left 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);
 

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-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/projects/components/project-skills.tsx

@@ -35,10 +35,10 @@ 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">
+            <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"
-              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"
+              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="pr-7 text-sm font-medium">{skill.name}</h3>

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

@@ -8,6 +8,7 @@ import { PageResourceSidebarNav } from "@/features/right-panel-resources/compone
 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[],
@@ -123,10 +124,10 @@ describe("shared left pages", () => {
     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",
+      "group-hover/sidebar-item:opacity-100",
     );
     expect(menu.parentElement?.className).toContain(
-      "group-focus-within/page-row:opacity-100",
+      "group-focus-within/sidebar-item:opacity-100",
     );
     expect(menu.parentElement?.className).toContain(
       "data-[context-menu-open]:opacity-100",
@@ -136,6 +137,8 @@ describe("shared left pages", () => {
     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" }),
     );
@@ -155,4 +158,26 @@ describe("shared left pages", () => {
   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/page-resource-actions-menu.tsx

@@ -2,6 +2,7 @@ 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";
@@ -21,9 +22,9 @@ export function PageResourceActionsMenu({
     <ContextMenu groups={actions(page)} label={t("pageActions")}>
       <span
         className={cn(
-          "inline-flex",
+          "inline-flex shrink-0",
           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",
+            "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>
@@ -47,25 +48,6 @@ export function PageResourceActionItems({
 }) {
   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>
-        ))}
-    </>
+    <ContextMenuItems groups={actions(page)} onClose={() => onSelect?.()} />
   );
 }

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { ChevronDown, PanelsTopLeft } from "lucide-react";
-import { NavLink } from "react-router-dom";
+import { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
+import { SIDEBAR_RAIL_CONTROL_CLASS, SIDEBAR_RAIL_SURFACE_CLASS } from "@/app/components/layout/sidebar-rail.styles";
 import { usePanelApps } from "@/features/panel-apps";
 import { createPanelAppRightPanelResourceTarget } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
 import {
@@ -34,22 +35,18 @@ function PageResourceSidebarItems({
       {pages.map((page) => (
         <li
           key={page.uri}
-          className="group/page-row flex items-center gap-1 rounded-lg hover:bg-muted/60"
         >
-          <NavLink
+          <SidebarNavLinkItem
             to={pageResourceMainPath(page)}
-            onClick={() => {
+            label={page.title}
+            density="compact"
+            iconNode={<PageResourceIcon uri={page.uri} icon={page.target.dockIcon} />}
+            actions={<PageResourceActionsMenu page={page} revealOnHover />}
+            onNavigate={() => {
               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>
@@ -85,7 +82,7 @@ export function PageResourceSidebarNav({
           <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"
+            className={`mx-auto my-1 flex items-center justify-center ${SIDEBAR_RAIL_CONTROL_CLASS} ${SIDEBAR_RAIL_SURFACE_CLASS}`}
           >
             <PanelsTopLeft className="h-4 w-4" />
           </button>

package/src/features/right-panel-resources/hooks/use-page-resource-actions.ts

@@ -14,9 +14,21 @@ import {
 } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
 import { pageResourceTab } from "@/features/right-panel-resources/managers/page-resource.manager";
 import type { PageResource } from "@/features/right-panel-resources/types/page-resource.types";
-import type { ContextMenuGroup } from "@/shared/components/ui/context-menu/context-menu";
+import type {
+  ContextMenuGroup,
+  ContextMenuItem,
+} from "@/shared/components/ui/context-menu/context-menu";
 import { t } from "@/shared/lib/i18n";
 import { toast } from "sonner";
+import { createElement } from "react";
+import {
+  LayoutPanelLeft,
+  Link,
+  MessageSquarePlus,
+  PanelLeft,
+  PanelsTopLeft,
+  Pin,
+} from "lucide-react";
 
 export function usePageResourceActions() {
   const app = useAppPresenter();
@@ -47,7 +59,12 @@ export function usePageResourceActions() {
     const items = [
       {
         key: "open-main",
-        label: t(page.target.kind === "workspace" ? "workbenchMaximize" : "workbenchOpenMain"),
+        icon: createElement(PanelsTopLeft, { className: "h-4 w-4" }),
+        label: t(
+          page.target.kind === "workspace"
+            ? "workbenchMaximize"
+            : "workbenchOpenMain",
+        ),
         onSelect: () => open("main"),
       },
       ...(page.target.kind === "route"
@@ -55,17 +72,20 @@ export function usePageResourceActions() {
         : [
             {
               key: "open-sidebar",
+              icon: createElement(PanelLeft, { className: "h-4 w-4" }),
               label: t("workbenchDock"),
               onSelect: () => open("sidebar"),
             },
             {
               key: "open-floating",
+              icon: createElement(PanelsTopLeft, { className: "h-4 w-4" }),
               label: t("workbenchFloatView"),
               onSelect: () => open("floating"),
             },
           ]),
       {
         key: "pin-left",
+        icon: createElement(Pin, { className: "h-4 w-4" }),
         pressed: pinned,
         label: t(pinned ? "pageUnpinLeft" : "pagePinLeft"),
         disabled: Boolean(entry && updatePreferences.isPending),
@@ -85,6 +105,7 @@ export function usePageResourceActions() {
         ? [
             {
               key: "add-to-chat",
+              icon: createElement(MessageSquarePlus, { className: "h-4 w-4" }),
               label: t("docBrowserAddToChat"),
               restoreFocus: false,
               onSelect: () =>
@@ -94,6 +115,7 @@ export function usePageResourceActions() {
         : []),
       {
         key: "copy-uri",
+        icon: createElement(Link, { className: "h-4 w-4" }),
         label: t("pageCopyUri"),
         onSelect: () => {
           void navigator.clipboard
@@ -103,7 +125,6 @@ export function usePageResourceActions() {
       },
     ];
     return [
-      { key: "page", items },
       ...(viewer
         ? [
             {
@@ -132,6 +153,38 @@ export function usePageResourceActions() {
             },
           ]
         : []),
+      ...groupPageResourceActions(items),
     ];
   };
 }
+
+function groupPageResourceActions(
+  items: ContextMenuItem[],
+): ContextMenuGroup[] {
+  return [
+    {
+      key: "page-reference",
+      items: items.filter(
+        (item) => item.key === "add-to-chat" || item.key === "copy-uri",
+      ),
+    },
+    {
+      key: "page-layout",
+      items: [
+        {
+          key: "layout",
+          label: t("pageLayoutActions"),
+          icon: createElement(LayoutPanelLeft, { className: "h-4 w-4" }),
+          children: [
+            {
+              key: "placement",
+              items: items.filter(
+                (item) => item.key !== "add-to-chat" && item.key !== "copy-uri",
+              ),
+            },
+          ],
+        },
+      ],
+    },
+  ];
+}

package/src/features/right-panel-resources/index.ts

@@ -26,7 +26,6 @@ export type {
 
 export { PageResourceIcon } from './components/page-resource-icon';
 export { PageResourceActionsMenu, PageResourceActionItems } from './components/page-resource-actions-menu';
-export { CurrentPageActions } from './components/current-page-actions';
 export { PageResourceSidebarNav } from './components/page-resource-sidebar-nav';
 export { SYSTEM_OBJECT_RESOURCE_RENDERERS } from './components/system-object-resource';
 export { WORKSPACE_FILE_PANEL_RENDERERS } from './components/workspace-file-resource';

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

@@ -167,8 +167,7 @@ export function ServiceAppListItem({
                   {t("serviceAppsMoreActions")}
                 </TooltipContent>
               </Tooltip>
-              <PopoverContent align="end" className="w-56 rounded-xl p-1.5">
-                <PageResourceActionItems page={pageResourceFromSystemObject("service-app", app.id, app.title)} onSelect={() => setIsMenuOpen(false)} />
+              <PopoverContent align="end" variant="menu">
                 <div className="my-1 h-px bg-border" />
                 <ServiceAppMenuItem
                   disabled={!canDisconnectRuntime}
@@ -197,6 +196,8 @@ export function ServiceAppListItem({
                     onClick={openDeleteDialog}
                   />
                 )}
+                <div className="my-1 h-px bg-border" />
+                <PageResourceActionItems page={pageResourceFromSystemObject("service-app", app.id, app.title)} onSelect={() => setIsMenuOpen(false)} />
               </PopoverContent>
             </Popover>
           </div>

package/src/features/system-status/components/__tests__/desktop-update-config.test.tsx

@@ -181,6 +181,46 @@ describe('DesktopUpdateConfig', () => {
     expect(screen.getByText('fetch failed: getaddrinfo ENOTFOUND updates.nextclaw.io')).toBeTruthy();
   });
 
+  it('offers a manual Portable Edition download when in-app updates are blocked', () => {
+    useRuntimeUpdateStore.setState((state) => ({
+      ...state,
+      snapshot: state.snapshot
+        ? {
+            ...state.snapshot,
+            status: 'blocked',
+            installationKind: 'desktop-bundle',
+            blockReason: 'unsupported-installation',
+            errorMessage: 'Portable Edition does not support in-app updates yet. Download a newer Portable Edition and keep the data directory.'
+          }
+        : null
+    }));
+
+    renderDesktopUpdateConfig();
+
+    const downloadLink = screen.getByRole('link', { name: '下载最新 Portable Edition' });
+    expect(downloadLink.getAttribute('href')).toBe('https://github.com/Peiiii/nextclaw/releases');
+    expect(downloadLink.getAttribute('target')).toBe('_blank');
+  });
+
+  it('does not offer a Portable Edition download for non-desktop update blocks', () => {
+    useRuntimeUpdateStore.setState((state) => ({
+      ...state,
+      snapshot: state.snapshot
+        ? {
+            ...state.snapshot,
+            status: 'blocked',
+            installationKind: 'npm-runtime-bundle',
+            blockReason: 'unsupported-installation',
+            errorMessage: 'This runtime does not support updates.'
+          }
+        : null
+    }));
+
+    renderDesktopUpdateConfig();
+
+    expect(screen.queryByRole('link', { name: '下载最新 Portable Edition' })).toBeNull();
+  });
+
   it('loads structured release notes from the docs JSON endpoint', async () => {
     const fetchMock = vi.fn(async () => new Response(JSON.stringify({
       schemaVersion: 1,