@nextclaw/ui 0.27.4 → 0.27.5-beta.1

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

@@ -14,6 +14,16 @@ import { pageResourceTab } from "@/features/right-panel-resources/managers/page-
 import { pageResourceFromTarget } from "@/features/right-panel-resources/utils/page-resource-identity.utils";
 import type { PageResource } from "@/features/right-panel-resources/types/page-resource.types";
 import { t } from "@/shared/lib/i18n";
+import { parseSystemObjectReferenceUri } from "@nextclaw/shared";
+import { RefreshCw } from "lucide-react";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { usePanelApps } from "@/features/panel-apps/hooks/use-panel-apps";
+
+function PanelAppResourceTitle({ appId, fallback }: { appId: string; fallback: string }) {
+  const panelApps = usePanelApps();
+  const title = panelApps.data?.entries.find((entry) => entry.appId === appId)?.title ?? fallback;
+  return <span className="min-w-0 flex-1 truncate text-sm">{title}</span>;
+}
 
 function ResourcePageContent({ page }: { page: PageResource }) {
   const app = useAppPresenter();
@@ -22,6 +32,10 @@ function ResourcePageContent({ page }: { page: PageResource }) {
   const [revision, setRevision] = useState(0);
   const tab = useMemo(() => pageResourceTab(page), [page]);
   const renderer = PAGE_RESOURCE_RENDERERS[tab.kind];
+  const object = tab.kind === "system-object"
+    ? parseSystemObjectReferenceUri(page.uri)
+    : null;
+  const panelAppId = object?.objectType === "panel-app" ? object.objectId : null;
   const iframeInstanceId = `main:${page.uri}:${revision}`;
   const restore = useDocBrowserScrollRestoration({
     currentTab: tab,
@@ -55,6 +69,7 @@ function ResourcePageContent({ page }: { page: PageResource }) {
     tab,
     currentUrl: tab.currentUrl,
     refreshIframe: () => setRevision((value) => value + 1),
+    refreshVersion: revision,
     open: (uri?: string) => {
       const next = uri ? app.pageResourceManager.resolve(uri) : null;
       if (next) app.pageResourceManager.open(next, "main", navigate);
@@ -73,10 +88,22 @@ function ResourcePageContent({ page }: { page: PageResource }) {
     >
       <header className="flex min-h-10 shrink-0 items-center gap-2 border-b border-border/60 px-3">
         <PageResourceIcon uri={page.uri} icon={page.target.dockIcon} />
-        <span className="min-w-0 flex-1 truncate text-sm">{page.title}</span>
+        {panelAppId ? (
+          <PanelAppResourceTitle appId={panelAppId} fallback={page.title} />
+        ) : (
+          <span className="min-w-0 flex-1 truncate text-sm">{page.title}</span>
+        )}
+        {panelAppId ? (
+          <IconActionButton
+            icon={<RefreshCw className="h-3.5 w-3.5" />}
+            label={t("panelAppsRefreshCurrent")}
+            onClick={params.refreshIframe}
+            size="sm"
+          />
+        ) : null}
         <PageResourceActionsMenu page={page} />
       </header>
-      {renderer?.renderToolbar?.(params)}
+      {!panelAppId ? renderer?.renderToolbar?.(params) : null}
       <DocBrowserFrameContent
         currentTab={tab}
         currentUrl={tab.currentUrl}

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

@@ -18,6 +18,7 @@ import type {
   DocBrowserTab,
 } from "@/shared/components/doc-browser/doc-browser-context";
 import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
+import { pageResourceFromTab, usePageResourceActions } from "@/features/right-panel-resources";
 import { PANEL_APP_SCROLL_RESTORATION_CONTRACT } from "@nextclaw/shared";
 
 const { navigateMock } = vi.hoisted(() => ({
@@ -28,6 +29,12 @@ const panelAppHooks = vi.hoisted(() => ({
   mutate: vi.fn(),
 }));
 
+function DocBrowserWithPageActions() {
+  const actions = usePageResourceActions();
+  return <DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS}
+    getTabMenuGroups={(tab) => actions(pageResourceFromTab(tab), 'global')} />;
+}
+
 vi.mock("react-router-dom", async () => ({
   ...((await vi.importActual("react-router-dom")) as object),
   useNavigate: () => navigateMock,
@@ -536,21 +543,12 @@ describe("DocBrowser panel app navigation", () => {
     docBrowserState.activeHistoryIndex = 1;
     docBrowserState.currentTab = panelAppTab;
 
-    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
+    render(<DocBrowserWithPageActions />);
 
     expect(screen.getAllByRole("button", { name: "Back" })).toHaveLength(1);
     expect(screen.queryByRole("button", { name: "Apps" })).toBeNull();
     await user.click(screen.getByRole("button", { name: "Back" }));
     expect(docBrowserState.goBack).toHaveBeenCalledTimes(1);
-
-    expect(screen.queryByRole("button", { name: "Pin to left sidebar" })).toBeNull();
-    await user.click(screen.getByRole("button", { name: "More panel app actions" }));
-    await user.click(screen.getByRole("menuitem", { name: "Layout and position" }));
-    await user.click(screen.getByRole("menuitem", { name: "Pin to left sidebar" }));
-    expect(panelAppHooks.mutate).toHaveBeenCalledWith({
-      id: "piano",
-      preferences: { mainSidebar: true },
-    });
   });
 
   it("keeps placement actions when a restored shortcut only has a stable current URL", async () => {
@@ -569,9 +567,9 @@ describe("DocBrowser panel app navigation", () => {
     docBrowserState.activeTabId = panelAppTab.id;
     docBrowserState.currentTab = panelAppTab;
 
-    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
+    render(<DocBrowserWithPageActions />);
 
-    await user.click(screen.getByRole("button", { name: "More panel app actions" }));
+    await user.click(screen.getByRole("button", { name: "More tab actions" }));
     await user.click(screen.getByRole("menuitem", { name: "Layout and position" }));
     await user.click(screen.getByRole("menuitem", { name: "Pin to left sidebar" }));
     expect(panelAppHooks.mutate).toHaveBeenCalledWith({
@@ -623,7 +621,12 @@ describe("DocBrowser scroll restoration", () => {
       source: initialWindow,
     }));
 
-    fireEvent.click(screen.getByRole("button", { name: "Refresh current panel app" }));
+    expect(screen.queryByRole("button", { name: "Refresh current panel app" })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "More tab actions" }));
+    const standalone = screen.getByRole("menuitem", { name: "Open in New Tab" });
+    expect(standalone.getAttribute("href")).toBe("/apps/panel/piano/standalone");
+    expect(standalone.getAttribute("target")).toBe("_blank");
+    fireEvent.click(screen.getByRole("menuitem", { name: "Refresh current panel app" }));
 
     const refreshedIframe = container.querySelector('iframe[title="Piano"]') as HTMLIFrameElement;
     const refreshedPostMessage = vi.fn();

package/src/shared/components/doc-browser/doc-browser-renderer.types.ts

@@ -1,11 +1,13 @@
 import type { PointerEvent, ReactNode } from 'react';
 import type { DocBrowserContextValue, DocBrowserTab } from './doc-browser-context';
+import type { ContextMenuGroup } from '@/shared/components/ui/context-menu/context-menu';
 
 export type DocBrowserCustomTabRenderParams = {
   currentUrl: string;
   open: DocBrowserContextValue['open'];
   openTarget: DocBrowserContextValue['openTarget'];
   refreshIframe: () => void;
+  refreshVersion: number;
   tab: DocBrowserTab;
 };
 
@@ -17,6 +19,7 @@ export type DocBrowserIframeMessageParams = {
 };
 
 export type DocBrowserCustomTabRenderer = {
+  getTabMenuGroups?: (params: DocBrowserCustomTabRenderParams) => readonly ContextMenuGroup[];
   getIframeSandbox?: (tab: DocBrowserTab) => string | undefined;
   getTitle?: (tab: DocBrowserTab) => string;
   onIframeMessage?: (params: DocBrowserIframeMessageParams) => void;

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

@@ -265,6 +265,7 @@ export function DocBrowser({
     open,
     openTarget,
     refreshIframe,
+    refreshVersion: iframeReloadVersion,
     tab: currentTab,
   } : undefined;
   const customToolbar = customRenderParams ? customRenderer?.renderToolbar?.(customRenderParams) : null;
@@ -325,7 +326,12 @@ export function DocBrowser({
         onToggleDock={handleToggleDock}
         onSetActiveTab={setActiveTab}
         onCloseTab={closeTab}
-        getTabMenuGroups={getTabMenuGroups}
+        getTabMenuGroups={(tab) => [
+          ...(getTabMenuGroups?.(tab) ?? []),
+          ...(tab.id === activeTabId && customRenderParams
+            ? customRenderer?.getTabMenuGroups?.(customRenderParams) ?? []
+            : []),
+        ]}
       />
       }>
       {panelContent}

package/src/shared/components/ui/context-menu/context-menu-items.tsx

@@ -164,6 +164,7 @@ export function ContextMenuItems({ groups, onClose }: {
           onClose={onClose} className={className}>{content}</ContextSubmenu>;
         const select = () => { item.onSelect?.(); onClose(item.href ? false : item.restoreFocus !== false); };
         return item.href ? <a key={item.key} role="menuitem" className={className} href={item.href} download={item.download}
+          target={item.target} rel={item.rel} referrerPolicy={item.referrerPolicy}
           onPointerEnter={() => setOpenKey(null)} onClick={(event) => { event.stopPropagation(); select(); }}>{content}</a>
           : <button key={item.key} type="button" role="menuitem" disabled={item.disabled} aria-pressed={item.pressed}
             data-menu-key={item.key} className={className} onPointerEnter={() => setOpenKey(null)}

package/src/shared/components/ui/context-menu/context-menu.tsx

@@ -30,18 +30,27 @@ export type ContextMenuItem = ContextMenuItemBase &
         children?: never;
         download?: string;
         href: string;
+        target?: '_blank';
+        rel?: string;
+        referrerPolicy?: React.HTMLAttributeReferrerPolicy;
         onSelect?: () => void;
       }
     | {
         children?: never;
         download?: never;
         href?: never;
+        target?: never;
+        rel?: never;
+        referrerPolicy?: never;
         onSelect: () => void;
       }
     | {
         children: readonly ContextMenuGroup[];
         download?: never;
         href?: never;
+        target?: never;
+        rel?: never;
+        referrerPolicy?: never;
         onSelect?: never;
       }
   );

package/dist/assets/agents-p_wcGhC3.js

@@ -1 +0,0 @@
-import{t as e}from"./agents-BdeFtIOV.js";export{e as AgentsPage};

package/dist/assets/apps-CKFrWb00.js

@@ -1 +0,0 @@
-import{ot as e}from"./app-presenter-provider-BB3Xl8b0.js";export{e as AppsPanel};

package/dist/assets/cron-UqsFT41c.js

@@ -1 +0,0 @@
-import{K as e}from"./app-presenter-provider-BB3Xl8b0.js";export{e as CronJobResource};

package/dist/assets/doc-browser-2VjSkax1.js

@@ -1 +0,0 @@
-import{St as e}from"./app-presenter-provider-BB3Xl8b0.js";export{e as DocBrowser};

package/dist/assets/inbox-D62apR2j.js

@@ -1 +0,0 @@
-import{z as e}from"./app-presenter-provider-BB3Xl8b0.js";export{e as InboxPage};

package/dist/assets/mcp-marketplace-page-oHCbBkS-.js

@@ -1 +0,0 @@
-import{st as e}from"./app-presenter-provider-BB3Xl8b0.js";export{e as McpMarketplacePage};

package/dist/assets/panel-apps-CniMi7QW.js

@@ -1 +0,0 @@
-import{s as e,v as t}from"./theme-provider-BsJ6HxeX.js";import"./app-presenter-provider-BB3Xl8b0.js";export{t as PanelAppHostProvider,e as PanelAppRuntimeSurface};

package/dist/assets/remote-CsJMF8OR.js

@@ -1 +0,0 @@
-import{F as e}from"./app-presenter-provider-BB3Xl8b0.js";export{e as RemoteAccessPage};

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

@@ -1,108 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { PanelAppToolbar } from '@/features/panel-apps/components/panel-app-toolbar';
-
-const mainSidebarMutation = vi.hoisted(() => ({
-  isPending: false,
-  pinned: false,
-  mutate: vi.fn(),
-}));
-
-vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
-  usePanelApps: () => ({ data:{ entries:[{ ...entry, mainSidebar: mainSidebarMutation.pinned }] } }),
-  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.pinned = false;
-    mainSidebarMutation.mutate.mockReset();
-  });
-
-  it('keeps placement in the overflow menu without adding a second back action', async () => {
-    const user = userEvent.setup();
-    render(
-      <PanelAppToolbar
-        appTitle="墨爪助手"
-        entry={entry}
-        onRefresh={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByText('墨爪助手')).toBeTruthy();
-    expect(screen.queryByRole('button', { name: 'Apps' })).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('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);
-
-    expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
-      id: 'ink-assistant',
-      preferences: { mainSidebar: true },
-    });
-    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 () => {
-    mainSidebarMutation.pinned = true;
-    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' }));
-    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);
-
-    expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
-      id: 'ink-assistant',
-      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');
-  });
-});
-
-vi.mock("react-router-dom", async (importOriginal) => ({ ...(await importOriginal<object>()),useNavigate: () => vi.fn(), useLocation: () => ({ pathname:'/apps',search:'' }) }));
-vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager:{ open:vi.fn() } }) }));

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

@@ -1,89 +0,0 @@
-import { useMemo, useState } from 'react';
-import { MoreVertical, RefreshCw } from 'lucide-react';
-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 { 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;
-  entry?: PanelAppEntryView;
-  onRefresh: () => void;
-};
-
-export function PanelAppToolbar({
-  appTitle,
-  entry,
-  onRefresh,
-}: PanelAppToolbarProps) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  return (
-    <div className="flex items-center justify-between gap-2 border-b border-border/70 bg-card px-3.5 py-2 shrink-0">
-      <span
-        className="min-w-0 flex-1 truncate text-xs font-medium text-muted-foreground"
-        title={appTitle}
-      >
-        {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>
-            <IconActionButton
-              icon={<MoreVertical className="h-3.5 w-3.5" />}
-              label={t('panelAppsMoreActions')}
-              size="sm"
-            />
-          </PopoverTrigger>
-          <PopoverContent align="end" variant="menu">
-            <PanelAppOpenStandaloneMenuItem
-              entry={entry}
-              onSelect={() => setIsMenuOpen(false)}
-            />
-            <PanelAppMainSidebarMenuItem
-              entry={entry}
-              onSelect={() => setIsMenuOpen(false)}
-            />
-          </PopoverContent>
-        </Popover>
-      ) : null}
-    </div>
-  );
-}
-
-export function PanelAppDocBrowserToolbar({
-  appTitle,
-  currentUrl,
-  onRefresh,
-  resourceUri,
-}: {
-  appTitle: string;
-  currentUrl: string;
-  onRefresh: () => void;
-  resourceUri?: string;
-}) {
-  const panelApps = usePanelApps();
-  const appId = readPanelAppIdFromTab({ currentUrl, resourceUri });
-  const entry = useMemo(
-    () => panelApps.data?.entries.find((candidate) => candidate.appId === appId),
-    [appId, panelApps.data?.entries],
-  );
-
-  return (
-    <PanelAppToolbar
-      appTitle={entry?.title ?? appTitle}
-      entry={entry}
-      onRefresh={onRefresh}
-    />
-  );
-}