@nextclaw/ui 0.19.0 → 0.19.1

package/src/features/panel-apps/components/__tests__/panel-app-main-sidebar-nav.test.tsx

@@ -1,4 +1,5 @@
 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 {
@@ -9,10 +10,15 @@ 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 {
@@ -38,6 +44,7 @@ function createEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryV
 describe("PanelAppMainSidebarNav", () => {
   beforeEach(() => {
     mocks.entries = [];
+    mocks.mutate.mockReset();
   });
 
   it("projects only manually added apps in persisted order", () => {
@@ -71,6 +78,50 @@ describe("PanelAppMainSidebarNav", () => {
     expect(screen.queryByText("Hidden")).toBeNull();
   });
 
+  it("removes an expanded entry from its hover actions without nesting the button in the link", async () => {
+    const user = userEvent.setup();
+    mocks.entries = [
+      createEntry({ appId: "publisher.todo", mainSidebar: true, title: "Todo" }),
+    ];
+
+    render(
+      <MemoryRouter initialEntries={["/apps/panel/publisher.todo"]}>
+        <PanelAppMainSidebarNav isCollapsed={false} />
+      </MemoryRouter>,
+    );
+
+    const link = screen.getByRole("link", { name: "Todo" });
+    const menuButton = screen.getByRole("button", {
+      name: "More panel app actions: Todo",
+    });
+    expect(link.contains(menuButton)).toBe(false);
+    expect(menuButton.className).toContain("group-hover/panel-app:opacity-100");
+
+    await user.click(menuButton);
+    await user.click(screen.getByRole("button", { name: "Remove from main sidebar" }));
+
+    expect(mocks.mutate).toHaveBeenCalledWith({
+      id: "demo",
+      preferences: { mainSidebar: false },
+    });
+    expect(link.getAttribute("aria-current")).toBe("page");
+  });
+
+  it("keeps the collapsed rail as one navigation target", () => {
+    mocks.entries = [
+      createEntry({ appId: "publisher.todo", mainSidebar: true, title: "Todo" }),
+    ];
+
+    render(
+      <MemoryRouter>
+        <PanelAppMainSidebarNav isCollapsed />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole("link", { name: "Todo" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "More panel app actions: Todo" })).toBeNull();
+  });
+
   it("renders no section when no app was manually added", () => {
     const { container } = render(
       <MemoryRouter>

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

@@ -1,18 +1,48 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { PanelAppToolbar } from '@/features/panel-apps/components/panel-app-toolbar';
 
+const mainSidebarMutation = vi.hoisted(() => ({
+  isPending: false,
+  mutate: vi.fn(),
+}));
+
+vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
+  usePanelApps: vi.fn(),
+  useUpdatePanelAppPreferences: () => mainSidebarMutation,
+}));
+
+const entry = {
+  appId: 'ink-assistant',
+  clientDeclared: false,
+  clientGranted: false,
+  contentPath: '/api/panel-apps/ink-assistant/content',
+  createdAt: '2026-08-19T00:00:00.000Z',
+  favorite: false,
+  fileName: 'ink-assistant.panel.html',
+  id: 'ink-assistant',
+  kind: 'single-file' as const,
+  mainSidebar: false,
+  openCount: 0,
+  sizeBytes: 10,
+  title: '墨爪助手',
+  updatedAt: '2026-08-19T00:00:00.000Z',
+};
+
 describe('PanelAppToolbar', () => {
+  beforeEach(() => {
+    mainSidebarMutation.isPending = false;
+    mainSidebarMutation.mutate.mockReset();
+  });
+
   it('keeps placement in the overflow menu without adding a second back action', async () => {
     const user = userEvent.setup();
-    const onToggleMainSidebar = vi.fn();
     render(
       <PanelAppToolbar
         appTitle="墨爪助手"
-        mainSidebar={false}
+        entry={entry}
         onRefresh={vi.fn()}
-        onToggleMainSidebar={onToggleMainSidebar}
       />,
     );
 
@@ -25,7 +55,31 @@ describe('PanelAppToolbar', () => {
     expect(addButton.getAttribute('aria-pressed')).toBe('false');
     await user.click(addButton);
 
-    expect(onToggleMainSidebar).toHaveBeenCalledTimes(1);
+    expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
+      id: 'ink-assistant',
+      preferences: { mainSidebar: true },
+    });
     expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
   });
+
+  it('uses the same menu item to remove an app already in the main sidebar', async () => {
+    const user = userEvent.setup();
+    render(
+      <PanelAppToolbar
+        appTitle="墨爪助手"
+        entry={{ ...entry, mainSidebar: true }}
+        onRefresh={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    const removeButton = screen.getByRole('button', { name: 'Remove from main sidebar' });
+    expect(removeButton.getAttribute('aria-pressed')).toBe('true');
+    await user.click(removeButton);
+
+    expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
+      id: 'ink-assistant',
+      preferences: { mainSidebar: false },
+    });
+  });
 });

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

@@ -1,7 +1,8 @@
 import { useState, type MouseEvent } from 'react';
-import { MoreVertical, PanelLeft, PanelLeftDashed, Star, Trash2, type LucideIcon } from 'lucide-react';
+import { MoreVertical, Star, Trash2, type LucideIcon } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { PanelAppIcon } from '@/features/panel-apps/components/panel-app-icon';
+import { PanelAppMainSidebarMenuItem } from '@/features/panel-apps/components/panel-app-main-sidebar-menu-item';
 import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import { getLanguage, getLocale, t } from '@/shared/lib/i18n';
@@ -11,20 +12,16 @@ export function PanelAppListItem({
   deletePending,
   entry,
   favoritePending,
-  mainSidebarPending,
   onDelete,
   onOpen,
   onToggleFavorite,
-  onToggleMainSidebar,
 }: {
   deletePending: boolean;
   entry: PanelAppEntryView;
   favoritePending: boolean;
-  mainSidebarPending: boolean;
   onDelete: () => void;
   onOpen: () => void;
   onToggleFavorite: () => void;
-  onToggleMainSidebar: () => void;
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -37,18 +34,10 @@ export function PanelAppListItem({
     event.stopPropagation();
     onToggleFavorite();
   };
-  const handleMainSidebar = () => {
-    setIsMenuOpen(false);
-    onToggleMainSidebar();
-  };
   const openDeleteDialog = () => {
     setIsMenuOpen(false);
     setIsDeleteDialogOpen(true);
   };
-  const mainSidebarLabel = entry.mainSidebar
-    ? t('panelAppsRemoveFromMainSidebar')
-    : t('panelAppsAddToMainSidebar');
-
   return (
     <div className="group w-full min-w-0 rounded-lg border border-border/60 bg-card px-2.5 py-2.5 transition-colors hover:bg-muted/40">
       <div className="flex min-w-0 items-start gap-2">
@@ -87,11 +76,9 @@ export function PanelAppListItem({
               </button>
             </PopoverTrigger>
             <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
-              <PanelAppMenuItem
-                disabled={mainSidebarPending}
-                icon={entry.mainSidebar ? PanelLeftDashed : PanelLeft}
-                label={mainSidebarLabel}
-                onClick={handleMainSidebar}
+              <PanelAppMainSidebarMenuItem
+                entry={entry}
+                onSelect={() => setIsMenuOpen(false)}
               />
               <PanelAppMenuItem
                 destructive

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

@@ -0,0 +1,37 @@
+import { PanelLeft, PanelLeftDashed } from 'lucide-react';
+import { useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+
+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?.();
+        updatePreferences.mutate({
+          id: entry.id,
+          preferences: { mainSidebar: !entry.mainSidebar },
+        });
+      }}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </button>
+  );
+}

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

@@ -1,9 +1,13 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { MoreVertical } from "lucide-react";
 import { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
 import { SIDEBAR_RAIL_STACK_CLASS } from "@/app/components/layout/sidebar-rail.styles";
 import { PanelAppIcon } from "@/features/panel-apps/components/panel-app-icon";
+import { PanelAppMainSidebarMenuItem } from "@/features/panel-apps/components/panel-app-main-sidebar-menu-item";
 import { usePanelApps } from "@/features/panel-apps/hooks/use-panel-apps";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
 import type { PanelAppEntryView } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 const MAIN_SIDEBAR_FALLBACK_ORDER = Number.MAX_SAFE_INTEGER;
@@ -45,28 +49,75 @@ export function PanelAppMainSidebarNav({
     >
       <ul className={isCollapsed ? SIDEBAR_RAIL_STACK_CLASS : "space-y-0.5"}>
         {entries.map((entry) => (
-          <li
+          <PanelAppMainSidebarNavItem
             key={entry.appId}
-            className={isCollapsed ? "flex justify-center" : undefined}
-          >
-            <SidebarNavLinkItem
-              to={`/apps/panel/${encodeURIComponent(entry.appId)}`}
-              label={entry.title}
-              iconNode={(
-                <PanelAppIcon
-                  icon={entry.icon}
-                  title={entry.title}
-                  className="h-full w-full text-[13px]"
-                  imageClassName="rounded-[3px]"
-                />
-              )}
-              density="compact"
-              collapsed={isCollapsed}
-              className={isCollapsed ? undefined : "rounded-lg px-2.5 py-1.5"}
-            />
-          </li>
+            entry={entry}
+            isCollapsed={isCollapsed}
+          />
         ))}
       </ul>
     </div>
   );
 }
+
+function PanelAppMainSidebarNavItem({
+  entry,
+  isCollapsed,
+}: {
+  entry: PanelAppEntryView;
+  isCollapsed: boolean;
+}) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const link = (
+    <SidebarNavLinkItem
+      to={`/apps/panel/${encodeURIComponent(entry.appId)}`}
+      label={entry.title}
+      iconNode={(
+        <PanelAppIcon
+          icon={entry.icon}
+          title={entry.title}
+          className="h-full w-full text-[13px]"
+          imageClassName="rounded-[3px]"
+        />
+      )}
+      density="compact"
+      collapsed={isCollapsed}
+      className={isCollapsed ? undefined : "rounded-lg py-1.5 pl-2.5 pr-9"}
+    />
+  );
+
+  if (isCollapsed) {
+    return <li className="flex justify-center">{link}</li>;
+  }
+
+  const menuLabel = `${t("panelAppsMoreActions")}: ${entry.title}`;
+  return (
+    <li>
+      <div className="group/panel-app relative">
+        {link}
+        <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              aria-label={menuLabel}
+              className={cn(
+                "absolute right-1 top-1/2 z-[1] -translate-y-1/2 rounded-md p-1 text-muted-foreground/70 transition-[color,background-color,opacity] hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                isMenuOpen
+                  ? "pointer-events-auto opacity-100"
+                  : "pointer-events-none opacity-0 group-hover/panel-app:pointer-events-auto group-hover/panel-app:opacity-100 group-focus-within/panel-app:pointer-events-auto group-focus-within/panel-app:opacity-100",
+              )}
+            >
+              <MoreVertical className="h-4 w-4" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+            <PanelAppMainSidebarMenuItem
+              entry={entry}
+              onSelect={() => setIsMenuOpen(false)}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </li>
+  );
+}

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

@@ -1,29 +1,25 @@
 import { useMemo, useState } from 'react';
-import { MoreVertical, PanelLeft, PanelLeftDashed, RefreshCw } from 'lucide-react';
-import { usePanelApps, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
+import { MoreVertical, RefreshCw } from 'lucide-react';
+import { PanelAppMainSidebarMenuItem } from '@/features/panel-apps/components/panel-app-main-sidebar-menu-item';
+import { usePanelApps } from '@/features/panel-apps/hooks/use-panel-apps';
+import { readPanelAppIdFromTab } from '@/features/right-panel-resources';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import type { PanelAppEntryView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
 
 type PanelAppToolbarProps = {
   appTitle: string;
-  mainSidebar?: boolean;
-  mainSidebarPending?: boolean;
+  entry?: PanelAppEntryView;
   onRefresh: () => void;
-  onToggleMainSidebar?: () => void;
 };
 
 export function PanelAppToolbar({
   appTitle,
-  mainSidebar = false,
-  mainSidebarPending = false,
+  entry,
   onRefresh,
-  onToggleMainSidebar,
 }: PanelAppToolbarProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const mainSidebarLabel = mainSidebar
-    ? t('panelAppsRemoveFromMainSidebar')
-    : t('panelAppsAddToMainSidebar');
 
   return (
     <div className="flex items-center justify-between gap-2 border-b border-border/70 bg-card px-3.5 py-2 shrink-0">
@@ -33,7 +29,7 @@ export function PanelAppToolbar({
       >
         {appTitle}
       </span>
-      {onToggleMainSidebar ? (
+      {entry ? (
         <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
           <PopoverTrigger asChild>
             <IconActionButton
@@ -43,21 +39,10 @@ export function PanelAppToolbar({
             />
           </PopoverTrigger>
           <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
-            <button
-              type="button"
-              disabled={mainSidebarPending}
-              aria-pressed={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={() => {
-                setIsMenuOpen(false);
-                onToggleMainSidebar();
-              }}
-            >
-              {mainSidebar
-                ? <PanelLeftDashed className="h-4 w-4 shrink-0" />
-                : <PanelLeft className="h-4 w-4 shrink-0" />}
-              <span>{mainSidebarLabel}</span>
-            </button>
+            <PanelAppMainSidebarMenuItem
+              entry={entry}
+              onSelect={() => setIsMenuOpen(false)}
+            />
           </PopoverContent>
         </Popover>
       ) : null}
@@ -72,16 +57,18 @@ export function PanelAppToolbar({
 }
 
 export function PanelAppDocBrowserToolbar({
-  appId,
   appTitle,
+  currentUrl,
   onRefresh,
+  resourceUri,
 }: {
-  appId: string | null;
   appTitle: string;
+  currentUrl: string;
   onRefresh: () => void;
+  resourceUri?: string;
 }) {
   const panelApps = usePanelApps();
-  const updatePreferences = useUpdatePanelAppPreferences();
+  const appId = readPanelAppIdFromTab({ currentUrl, resourceUri });
   const entry = useMemo(
     () => panelApps.data?.entries.find((candidate) => candidate.appId === appId),
     [appId, panelApps.data?.entries],
@@ -90,15 +77,8 @@ export function PanelAppDocBrowserToolbar({
   return (
     <PanelAppToolbar
       appTitle={entry?.title ?? appTitle}
-      mainSidebar={entry?.mainSidebar}
-      mainSidebarPending={updatePreferences.isPending}
+      entry={entry}
       onRefresh={onRefresh}
-      onToggleMainSidebar={entry
-        ? () => updatePreferences.mutate({
-            id: entry.id,
-            preferences: { mainSidebar: !entry.mainSidebar },
-          })
-        : undefined}
     />
   );
 }

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

@@ -48,13 +48,6 @@ export function PanelAppsList({
     });
   };
 
-  const toggleMainSidebar = (entry: PanelAppEntryView) => {
-    updatePreferences.mutate({
-      id: entry.id,
-      preferences: { mainSidebar: !entry.mainSidebar },
-    });
-  };
-
   const deleteEntry = (entry: PanelAppEntryView) => {
     deletePanelApp.mutate(entry.id);
   };
@@ -129,11 +122,9 @@ export function PanelAppsList({
                 entry={entry}
                 deletePending={deletePanelApp.isPending}
                 favoritePending={updatePreferences.isPending}
-                mainSidebarPending={updatePreferences.isPending}
                 onDelete={() => deleteEntry(entry)}
                 onOpen={() => void openPanelApp(entry)}
                 onToggleFavorite={() => toggleFavorite(entry)}
-                onToggleMainSidebar={() => toggleMainSidebar(entry)}
               />
             ))}
           </div>

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -6,7 +6,6 @@ import { AppsPanel, type AppsPanelTab } from '@/features/apps';
 import { PanelAppDocBrowserToolbar } from '@/features/panel-apps/components/panel-app-toolbar';
 import {
   createPanelAppRightPanelResourceTarget,
-  readPanelAppIdFromResourceUri,
   RIGHT_PANEL_APPS_TAB_KIND,
   RIGHT_PANEL_APPS_URL,
   RIGHT_PANEL_HOME_TAB_KIND,
@@ -78,9 +77,10 @@ export const PANEL_APPS_DOC_BROWSER_RENDERERS: DocBrowserCustomTabRenderers = {
     renderIcon: () => <AppWindow className="w-4 h-4 text-primary shrink-0" />,
     renderToolbar: ({ refreshIframe, tab }) => (
       <PanelAppDocBrowserToolbar
-        appId={readPanelAppIdFromResourceUri(tab.resourceUri ?? tab.currentUrl)}
         appTitle={tab.title || t('panelAppsTitle')}
+        currentUrl={tab.currentUrl}
         onRefresh={refreshIframe}
+        resourceUri={tab.resourceUri}
       />
     ),
     supportsScrollRestoration: true,

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

@@ -11,6 +11,7 @@ export {
   createPanelAppResourceUri,
   createPanelAppRightPanelResourceTarget,
   readPanelAppIdFromResourceUri,
+  readPanelAppIdFromTab,
   RIGHT_PANEL_APPS_TAB_KIND,
   RIGHT_PANEL_APPS_URL,
   RIGHT_PANEL_HOME_TAB_KIND,

package/src/features/right-panel-resources/utils/__tests__/right-panel-resource-uri.utils.test.ts

@@ -6,6 +6,7 @@ import {
   createPanelAppResourceUri,
   createPanelAppRightPanelResourceTarget,
   readPanelAppIdFromResourceUri,
+  readPanelAppIdFromTab,
 } from '@/features/right-panel-resources/utils/right-panel-resource-uri.utils';
 
 function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryView {
@@ -78,6 +79,17 @@ describe('right-panel-resource uri utils', () => {
     expect(readPanelAppIdFromResourceUri('nextclaw://apps')).toBeNull();
   });
 
+  it('falls back to the stable current URL for restored panel app shortcuts', () => {
+    expect(readPanelAppIdFromTab({
+      currentUrl: '/api/panel-apps/publisher.todo/content',
+      resourceUri: 'nextclaw://panel-app',
+    })).toBe('publisher.todo');
+    expect(readPanelAppIdFromTab({
+      currentUrl: '/api/panel-apps/publisher.todo/content?path=%2Ftmp%2Ftodo.panel',
+      resourceUri: 'nextclaw://panel-app/publisher.todo?path=%2Ftmp%2Ftodo.panel',
+    })).toBeNull();
+  });
+
   it('keeps panel app image icons as dock image icons', () => {
     const target = createPanelAppRightPanelResourceTarget(createPanelAppEntry({
       icon: '/api/panel-apps/demo/assets/icon.png',

package/src/features/right-panel-resources/utils/right-panel-resource-uri.utils.ts

@@ -107,6 +107,14 @@ export function readPanelAppIdFromResourceUri(value: string): string | null {
     : readPanelAppIdFromParsedResourceUri(uri);
 }
 
+export function readPanelAppIdFromTab(
+  tab: Pick<DocBrowserTab, 'currentUrl' | 'resourceUri'>,
+): string | null {
+  return (tab.resourceUri
+    ? readPanelAppIdFromResourceUri(tab.resourceUri)
+    : null) ?? readPanelAppIdFromResourceUri(tab.currentUrl);
+}
+
 function isPanelAppImageIcon(icon: string): boolean {
   return (
     icon.startsWith('data:image/') ||

package/src/shared/components/doc-browser/__tests__/doc-browser.test.tsx

@@ -537,6 +537,32 @@ describe("DocBrowser panel app navigation", () => {
       preferences: { mainSidebar: true },
     });
   });
+
+  it("keeps placement actions when a restored shortcut only has a stable current URL", async () => {
+    const user = userEvent.setup();
+    const panelAppTab: DocBrowserTab = {
+      id: "piano",
+      kind: "panel-app",
+      title: "Piano",
+      currentUrl: "/api/panel-apps/piano/content",
+      resourceUri: "nextclaw://panel-app",
+      history: ["/api/panel-apps/piano/content"],
+      historyIndex: 0,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [panelAppTab];
+    docBrowserState.activeTabId = panelAppTab.id;
+    docBrowserState.currentTab = panelAppTab;
+
+    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
+
+    await user.click(screen.getByRole("button", { name: "More panel app actions" }));
+    await user.click(screen.getByRole("button", { name: "Add to main sidebar" }));
+    expect(panelAppHooks.mutate).toHaveBeenCalledWith({
+      id: "piano",
+      preferences: { mainSidebar: true },
+    });
+  });
 });
 
 describe("DocBrowser scroll restoration", () => {