@nextclaw/ui 0.24.1 → 0.24.3

package/src/features/account/hooks/use-auth.ts

@@ -1,69 +1,19 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
-  fetchAuthStatus,
   loginAuth,
   logoutAuth,
   setupAuth,
   updateAuthEnabled,
   updateAuthPassword
 } from '@/shared/lib/api';
-import type { AuthStatusView } from '@/shared/lib/api';
 import { toast } from 'sonner';
 import { t } from '@/shared/lib/i18n';
-import { isTransientRuntimeConnectionErrorMessage } from '@/shared/lib/transport';
-
-const AUTH_STATUS_BOOTSTRAP_PROBE_POLICY = {
-  maxRetries: 8,
-  startupTimeoutMs: 2_000,
-  settledTimeoutMs: 5_000,
-  retryBaseDelayMs: 500,
-  retryMaxDelayMs: 3_000,
-} as const;
-
-export function isTransientAuthStatusBootstrapError(error: unknown): boolean {
-  if (!(error instanceof Error)) {
-    return false;
-  }
-  return isTransientRuntimeConnectionErrorMessage(error.message);
-}
-
-export function shouldRetryAuthStatusBootstrap(failureCount: number, error: unknown): boolean {
-  if (failureCount >= AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.maxRetries) {
-    return false;
-  }
-  return isTransientAuthStatusBootstrapError(error);
-}
-
-export function resolveAuthStatusBootstrapRetryDelay(failureCount: number): number {
-  return Math.min(
-    AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.retryMaxDelayMs,
-    AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.retryBaseDelayMs * 2 ** Math.max(0, failureCount - 1)
-  );
-}
-
-export function useAuthStatus() {
-  const [bootstrapSettled, setBootstrapSettled] = useState(false);
-  const query = useQuery<AuthStatusView>({
-    queryKey: ['auth-status'],
-    queryFn: () => fetchAuthStatus({
-      timeoutMs: bootstrapSettled
-        ? AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.settledTimeoutMs
-        : AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.startupTimeoutMs,
-    }),
-    staleTime: 5_000,
-    retry: shouldRetryAuthStatusBootstrap,
-    retryDelay: resolveAuthStatusBootstrapRetryDelay
-  });
-
-  useEffect(() => {
-    if (query.isSuccess && !bootstrapSettled) {
-      setBootstrapSettled(true);
-    }
-  }, [bootstrapSettled, query.isSuccess]);
-
-  return query;
-}
+export {
+  isTransientAuthStatusBootstrapError,
+  resolveAuthStatusBootstrapRetryDelay,
+  shouldRetryAuthStatusBootstrap,
+  useAuthStatus,
+} from "@/shared/hooks/use-auth-status";
 
 function invalidateProtectedQueries(queryClient: ReturnType<typeof useQueryClient>): Promise<unknown[]> {
   return Promise.all([

package/src/features/account/index.ts

@@ -1,4 +1,5 @@
-export { AccountPanel } from './components/account-panel';
-export { LoginPage } from './components/login-page';
 export { AccountManager } from './managers/account.manager';
 export { useAccountStore } from './stores/account.store';
+export async function loadAccountPanel() {
+  return await import('./components/account-panel');
+}

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

@@ -14,11 +14,13 @@ vi.mock('@/features/panel-apps', () => ({
   PanelAppsList: () => <div>panel-apps-content</div>,
 }));
 vi.mock('@/features/service-apps', () => ({
-  ServiceAppsPanel: ({ onManagePackage }: { onManagePackage: (packageId: string) => void }) => (
-    <button type="button" onClick={() => onManagePackage('nextclaw.personal-organizer')}>
-      service-apps-content
-    </button>
-  ),
+  loadServiceAppsPanel: async () => ({
+    ServiceAppsPanel: ({ onManagePackage }: { onManagePackage: (packageId: string) => void }) => (
+      <button type="button" onClick={() => onManagePackage('nextclaw.personal-organizer')}>
+        service-apps-content
+      </button>
+    ),
+  }),
 }));
 
 function AppsPanelHarness() {

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

@@ -1,14 +1,18 @@
-import { useState } from 'react';
+import { lazy, Suspense, useState } from 'react';
 import { AppWindow, Boxes, Server } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { AppPackagesPanel } from '@/features/apps/components/app-packages-panel';
 import { PanelAppsList } from '@/features/panel-apps';
-import { ServiceAppsPanel } from '@/features/service-apps';
+import { loadServiceAppsPanel } from '@/features/service-apps';
 import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
 import { t } from '@/shared/lib/i18n';
 
 export type AppsPanelTab = 'apps' | 'panel-apps' | 'service-apps';
 
+const ServiceAppsPanel = lazy(async () => ({
+  default: (await loadServiceAppsPanel()).ServiceAppsPanel,
+}));
+
 export function AppsPanel({
   activeTab,
   onActiveTabChange,
@@ -54,7 +58,9 @@ export function AppsPanel({
         ) : activeTab === 'panel-apps' ? (
           <PanelAppsList onOpenPanelApp={onOpenPanelApp} />
         ) : (
-          <ServiceAppsPanel onManagePackage={managePackage} />
+          <Suspense fallback={null}>
+            <ServiceAppsPanel onManagePackage={managePackage} />
+          </Suspense>
         )}
       </div>
     </div>

package/src/features/chat/features/message/utils/__tests__/chat-message-timeline.utils.test.ts

@@ -125,6 +125,16 @@ describe("chat message timeline visibility", () => {
     })).toBe(false);
     expect(isVisibleChatMessage(visibleMessage)).toBe(true);
   });
+
+  it("keeps a normal assistant reply visible when it explains the silent marker", () => {
+    expect(isVisibleChatMessage({
+      ...visibleMessage,
+      parts: [{
+        type: "text",
+        text: "空转 tick 调用一次服务，然后返回 `<noreply/>`，成本很低。",
+      }],
+    })).toBe(true);
+  });
 });
 
 describe("chat message continuation projection", () => {

package/src/features/chat/features/session/components/__tests__/chat-sidebar-project-groups.test.tsx

@@ -9,7 +9,9 @@ import {
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 
 const mocks = vi.hoisted(() => ({
+  confirm: vi.fn(),
   createSession: vi.fn(),
+  removeProject: vi.fn(),
   toggleProjectCollapsed: vi.fn(),
   toggleProjectPinned: vi.fn(),
 }));
@@ -19,6 +21,18 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
     chatSessionListManager: mocks,
   }),
 }));
+vi.mock("@/shared/hooks/use-projects", () => ({
+  useRemoveProject: () => ({
+    mutateAsync: mocks.removeProject,
+    isPending: false,
+  }),
+}));
+vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
+  useConfirmDialog: () => ({
+    confirm: mocks.confirm,
+    ConfirmDialog: () => <div data-testid="confirm-dialog" />,
+  }),
+}));
 
 const projectGroup: ChatSidebarProjectGroup = {
   projectId: "project-analysis",
@@ -50,9 +64,10 @@ function LocationProbe() {
 function renderProjectGroups(
   isPinned = false,
   group: ChatSidebarProjectGroup = projectGroup,
+  initialPath = "/chat",
 ) {
   return render(
-    <MemoryRouter initialEntries={["/chat"]}>
+    <MemoryRouter initialEntries={[initialPath]}>
       <ChatSidebarProjectGroups
         groups={[{ ...group, isPinned }]}
         projectCronJobCountByRoot={new Map([[projectGroup.projectRoot, 2]])}
@@ -69,7 +84,11 @@ function renderProjectGroups(
 
 describe("ChatSidebarProjectGroups", () => {
   beforeEach(() => {
+    mocks.confirm.mockReset();
+    mocks.confirm.mockResolvedValue(true);
     mocks.createSession.mockReset();
+    mocks.removeProject.mockReset();
+    mocks.removeProject.mockResolvedValue(undefined);
     mocks.toggleProjectCollapsed.mockReset();
     mocks.toggleProjectPinned.mockReset();
     useChatSessionListStore.setState({
@@ -97,12 +116,16 @@ describe("ChatSidebarProjectGroups", () => {
     expect(projectRow?.className).toContain("hover:bg-gray-200/60");
     const projectContent = projectLink.parentElement;
     expect(projectContent?.classList.contains("pr-14")).toBe(false);
-    expect(projectContent?.className).toContain("group-hover/project:pr-14");
+    expect(projectContent?.className).toContain("group-hover/project:pr-20");
     expect(projectContent?.className).toContain(
-      "group-has-[[data-project-actions]:focus-within]/project:pr-14",
+      "group-has-[[data-project-actions]:focus-within]/project:pr-20",
+    );
+    expect(projectLink.querySelector("span")?.className).not.toContain(
+      "uppercase",
+    );
+    expect(projectLink.querySelector("span")?.className).toContain(
+      "text-[13px]",
     );
-    expect(projectLink.querySelector("span")?.className).not.toContain("uppercase");
-    expect(projectLink.querySelector("span")?.className).toContain("text-[13px]");
     expect(
       header.compareDocumentPosition(projectLink) &
         Node.DOCUMENT_POSITION_FOLLOWING,
@@ -159,7 +182,7 @@ describe("ChatSidebarProjectGroups", () => {
     expect(within(tooltip).getByText("2")).toBeTruthy();
   });
 
-  it("keeps project creation and pinning in one trailing action cluster", () => {
+  it("keeps project creation, pinning, and more actions in one trailing cluster", () => {
     renderProjectGroups();
 
     fireEvent.click(screen.getByLabelText("Pin project"));
@@ -168,6 +191,67 @@ describe("ChatSidebarProjectGroups", () => {
       "/tmp/analysis-project",
     );
     expect(screen.getByLabelText("New Task · analysis-project")).not.toBeNull();
+    const pinButton = screen.getByLabelText("Pin project");
+    const moreButton = screen.getByLabelText(
+      "More actions for analysis-project",
+    );
+    expect(moreButton.querySelector(".lucide-ellipsis-vertical")).not.toBeNull();
+    expect(
+      pinButton.compareDocumentPosition(moreButton) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("removes a project from an ordinary more-actions menu after confirmation", async () => {
+    const user = userEvent.setup();
+    renderProjectGroups(
+      false,
+      projectGroup,
+      "/projects/project-analysis/overview",
+    );
+
+    await user.click(
+      screen.getByLabelText("More actions for analysis-project"),
+    );
+    const removeButton = await screen.findByRole("button", {
+      name: "Remove from project list",
+    });
+    expect(removeButton.className).not.toContain("text-destructive");
+    await user.click(removeButton);
+
+    await vi.waitFor(() =>
+      expect(mocks.confirm).toHaveBeenCalledWith(
+        expect.objectContaining({
+          description: expect.stringMatching(/local folder|本地目录/),
+          variant: "default",
+        }),
+      ),
+    );
+    await vi.waitFor(() =>
+      expect(mocks.removeProject).toHaveBeenCalledWith("project-analysis"),
+    );
+    await vi.waitFor(() =>
+      expect(screen.getByTestId("location").textContent).toBe("/projects"),
+    );
+  });
+
+  it("keeps the project when removal is cancelled from the menu", async () => {
+    mocks.confirm.mockResolvedValue(false);
+    const user = userEvent.setup();
+    renderProjectGroups();
+
+    await user.click(
+      screen.getByLabelText("More actions for analysis-project"),
+    );
+    await user.click(
+      await screen.findByRole("button", {
+        name: "Remove from project list",
+      }),
+    );
+
+    await vi.waitFor(() => expect(mocks.confirm).toHaveBeenCalledOnce());
+    expect(mocks.removeProject).not.toHaveBeenCalled();
+    expect(screen.getByRole("link", { name: "analysis-project" })).toBeTruthy();
   });
 
   it("uses the same pin control to show and clear the project pin state", () => {

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -1,11 +1,13 @@
 import { useMemo, useState, type ReactNode } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import {
   AlarmClock,
   ChevronDown,
   ChevronRight,
   Folder,
+  FolderMinus,
   MessageSquareText,
+  MoreVertical,
   Pin,
   Plus,
 } from "lucide-react";
@@ -22,6 +24,9 @@ import { t } from "@/shared/lib/i18n";
 import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
 import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
 import { cn } from "@/shared/lib/utils";
+import { useRemoveProject } from "@/shared/hooks/use-projects";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import { ChatSessionHeaderMenuItem } from "@/features/chat/features/session/components/session-header/chat-session-header-menu-item";
 
 export type { ChatSidebarProjectGroup };
 
@@ -57,10 +62,16 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
   } = props;
   const presenter = usePresenter();
   const location = useLocation();
+  const navigate = useNavigate();
+  const projectRemoval = useRemoveProject();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
   const collapsedProjectRoots = useChatSessionListStore(
     (state) => state.snapshot.collapsedProjectRoots,
   );
   const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
+  const [openProjectMenuRoot, setOpenProjectMenuRoot] = useState<string | null>(
+    null,
+  );
   const preferredSessionType = useMemo(
     () =>
       resolveProjectGroupDefaultSessionType(
@@ -70,6 +81,25 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
     [defaultSessionType, sessionTypeOptions],
   );
   const supportsSessionTypeChoice = sessionTypeOptions.length > 1;
+  const removeProject = async (group: ChatSidebarProjectGroup) => {
+    if (!group.projectId) return;
+    setOpenProjectMenuRoot(null);
+    const confirmed = await confirm({
+      title: `${t("projectsRemoveConfirmTitle")} “${group.projectName}”`,
+      description: t("projectsRemoveConfirmDescription"),
+      confirmLabel: t("projectsRemoveConfirmAction"),
+      variant: "default",
+    });
+    if (!confirmed) return;
+    try {
+      await projectRemoval.mutateAsync(group.projectId);
+      if (location.pathname.startsWith(`/projects/${group.projectId}/`)) {
+        navigate("/projects");
+      }
+    } catch {
+      // The mutation owns the visible error and the project stays available.
+    }
+  };
 
   return (
     <div className="space-y-0.5">
@@ -116,7 +146,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
               >
                 <div
                   className={cn(
-                    "flex h-full w-full min-w-0 items-center group-hover/project:pr-14 group-has-[[data-project-actions]:focus-within]/project:pr-14",
+                    "flex h-full w-full min-w-0 items-center group-hover/project:pr-20 group-has-[[data-project-actions]:focus-within]/project:pr-20",
                     hasRunningSession && "pr-7",
                   )}
                 >
@@ -243,6 +273,37 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                     )
                   }
                 />
+                {group.projectId ? (
+                  <Popover
+                    open={openProjectMenuRoot === group.projectRoot}
+                    onOpenChange={(nextOpen) =>
+                      setOpenProjectMenuRoot(
+                        nextOpen ? group.projectRoot : null,
+                      )
+                    }
+                  >
+                    <PopoverTrigger asChild>
+                      <IconActionButton
+                        icon={<MoreVertical className="h-3.5 w-3.5" />}
+                        label={t("projectsMoreActions").replace(
+                          "{name}",
+                          group.projectName,
+                        )}
+                        tooltip={false}
+                        disabled={projectRemoval.isPending}
+                        onClick={(event) => event.stopPropagation()}
+                      />
+                    </PopoverTrigger>
+                    <ChatPopoverContent align="end" className="w-56 p-2">
+                      <ChatSessionHeaderMenuItem
+                        icon={FolderMinus}
+                        label={t("projectsRemoveFromList")}
+                        disabled={projectRemoval.isPending}
+                        onClick={() => void removeProject(group)}
+                      />
+                    </ChatPopoverContent>
+                  </Popover>
+                ) : null}
               </div>
             </div>
             {isCollapsed ? null : (
@@ -253,6 +314,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
           </div>
         );
       })}
+      <ConfirmDialog key="project-remove-confirm-dialog" />
     </div>
   );
 }

package/src/features/chat/features/session/utils/__tests__/chat-sidebar-session-groups.utils.test.ts

@@ -10,7 +10,7 @@ describe("groupSessionsByProject", () => {
       template: "knowledge-base",
       createdAt: "2026-07-15T00:00:00.000Z",
       updatedAt: "2026-07-15T00:00:00.000Z",
-    }]);
+    },]);
 
     expect(groups).toEqual([{
       projectId: "project-knowledge",
@@ -19,6 +19,31 @@ describe("groupSessionsByProject", () => {
       items: [],
       latestUpdatedAt: new Date("2026-07-15T00:00:00.000Z").getTime(),
       isPinned: false,
-    }]);
+    },
+    ]);
+  });
+
+  it("keeps sessions for removed projects out of the project-first view", () => {
+    const groups = groupSessionsByProject(
+      [
+        {
+          session: {
+            key: "session:removed-project",
+            projectRoot: "/tmp/removed",
+            projectName: "Removed",
+            createdAt: "2026-07-15T00:00:00.000Z",
+            updatedAt: "2026-07-15T00:00:00.000Z",
+            sessionType: "native",
+            sessionTypeMutable: false,
+            messageCount: 1,
+          },
+        },
+      ],
+      new Set(),
+      new Set(),
+      [],
+    );
+
+    expect(groups).toEqual([]);
   });
 });

package/src/features/chat/features/session/utils/chat-sidebar-session-groups.utils.ts

@@ -1,6 +1,5 @@
 import type { ProjectView, SessionEntryView } from "@/shared/lib/api";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
-import { getSessionProjectName } from "@/shared/lib/session-project";
 import { t } from "@/shared/lib/i18n";
 
 export type ChatSidebarDateGroup = {
@@ -127,16 +126,6 @@ export function groupSessionsByProject(
       );
       continue;
     }
-    grouped.set(projectRoot, {
-      projectRoot,
-      projectName:
-        item.session.projectName?.trim() ||
-        getSessionProjectName(projectRoot) ||
-        projectRoot,
-      items: [item],
-      latestUpdatedAt: updatedAt,
-      isPinned: pinnedProjectRoots.has(projectRoot),
-    });
   }
 
   return [...grouped.values()]

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

@@ -124,4 +124,22 @@ describe('PanelAppListItem', () => {
       preferences: { mainSidebar: false },
     });
   });
+
+  it('offers the standalone app link from the more-actions menu', async () => {
+    const user = userEvent.setup();
+    render(
+      <PanelAppListItem
+        deletePending={false}
+        entry={baseEntry}
+        favoritePending={false}
+        onDelete={vi.fn()}
+        onOpen={vi.fn()}
+        onToggleFavorite={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    const link = screen.getByRole('link', { name: 'Open in New Tab' });
+    expect(link.getAttribute('href')).toBe('/apps/panel/demo/standalone');
+  });
 });

package/src/features/panel-apps/components/__tests__/panel-app-open-standalone-menu-item.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PanelAppOpenStandaloneMenuItem } from "@/features/panel-apps/components/panel-app-open-standalone-menu-item";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+
+const entry: PanelAppEntryView = {
+  appId: "publisher.todo board",
+  clientDeclared: false,
+  clientGranted: false,
+  contentPath: "/api/panel-apps/publisher.todo%20board/content",
+  createdAt: "2026-09-03T00:00:00.000Z",
+  favorite: false,
+  fileName: "todo.panel.html",
+  id: "todo",
+  kind: "single-file",
+  mainSidebar: false,
+  openCount: 0,
+  sizeBytes: 10,
+  title: "Todo",
+  updatedAt: "2026-09-03T00:00:00.000Z",
+};
+
+function setDesktopHost(value: Window["nextclawDesktop"] | undefined) {
+  Object.defineProperty(window, "nextclawDesktop", {
+    configurable: true,
+    value,
+  });
+}
+
+describe("PanelAppOpenStandaloneMenuItem", () => {
+  afterEach(() => {
+    setDesktopHost(undefined);
+  });
+
+  it("uses an auxiliary new-tab link that installed PWA navigation cannot capture", () => {
+    const onSelect = vi.fn();
+    setDesktopHost(undefined);
+    render(
+      <PanelAppOpenStandaloneMenuItem entry={entry} onSelect={onSelect} />,
+    );
+
+    const link = screen.getByRole("link", { name: "Open in New Tab" });
+    expect(link.getAttribute("href")).toBe(
+      "/apps/panel/publisher.todo%20board/standalone",
+    );
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toBe("opener");
+    expect(link.getAttribute("referrerpolicy")).toBe("no-referrer");
+  });
+
+  it("describes the same link as opening in the browser inside Desktop", () => {
+    setDesktopHost({ platform: "darwin" } as Window["nextclawDesktop"]);
+    render(<PanelAppOpenStandaloneMenuItem entry={entry} />);
+
+    expect(screen.getByRole("link", { name: "Open in Browser" })).toBeTruthy();
+  });
+});

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

@@ -82,4 +82,19 @@ describe('PanelAppToolbar', () => {
       preferences: { mainSidebar: false },
     });
   });
+
+  it('offers the standalone app link from the toolbar menu', async () => {
+    const user = userEvent.setup();
+    render(
+      <PanelAppToolbar
+        appTitle="墨爪助手"
+        entry={entry}
+        onRefresh={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    const link = screen.getByRole('link', { name: 'Open in New Tab' });
+    expect(link.getAttribute('href')).toBe('/apps/panel/ink-assistant/standalone');
+  });
 });

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

@@ -3,6 +3,7 @@ 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 { PanelAppOpenStandaloneMenuItem } from '@/features/panel-apps/components/panel-app-open-standalone-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';
@@ -76,6 +77,10 @@ export function PanelAppListItem({
               </button>
             </PopoverTrigger>
             <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+              <PanelAppOpenStandaloneMenuItem
+                entry={entry}
+                onSelect={() => setIsMenuOpen(false)}
+              />
               <PanelAppMainSidebarMenuItem
                 entry={entry}
                 onSelect={() => setIsMenuOpen(false)}

package/src/features/panel-apps/components/panel-app-open-standalone-menu-item.tsx

@@ -0,0 +1,32 @@
+import { ExternalLink } from "lucide-react";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
+
+export function PanelAppOpenStandaloneMenuItem({
+  entry,
+  onSelect,
+}: {
+  entry: PanelAppEntryView;
+  onSelect?: () => void;
+}) {
+  const label = typeof window !== "undefined" && window.nextclawDesktop
+    ? t("panelAppsOpenInBrowser")
+    : t("panelAppsOpenInNewTab");
+  const href = `/apps/panel/${encodeURIComponent(entry.appId)}/standalone`;
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      // Chrome captures non-auxiliary in-scope links into an installed PWA.
+      // `opener` keeps this trusted same-origin target auxiliary, so the current browser owns the new tab.
+      rel="opener"
+      referrerPolicy="no-referrer"
+      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"
+      onClick={onSelect}
+    >
+      <ExternalLink className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </a>
+  );
+}