@nextclaw/ui 0.25.3 → 0.26.0

package/src/features/right-panel-resources/managers/page-resource.manager.ts

@@ -0,0 +1,342 @@
+import { parseSystemObjectReferenceUri } from "@nextclaw/shared";
+import { nextclawClient } from "@/shared/lib/api";
+import { toast } from "sonner";
+import { t } from "@/shared/lib/i18n";
+import { GLOBAL_WORKBENCH_SURFACE } from "@/shared/components/workbench/types/workbench-surface.types";
+import { useChatThreadStore } from "@/features/chat";
+import type { ChatThreadManager } from "@/features/chat";
+import type { AppPresenter } from "@/app/presenters/app.presenter";
+import { useDocBrowserStore } from "@/shared/components/doc-browser/stores/doc-browser.store";
+import { useFloatingSessionStore } from "@/features/chat";
+import { sessionSurfaceManager } from "@/features/chat";
+import {
+  buildSessionPath,
+  parseSessionKeyFromPanelUrl,
+  parseSessionKeyFromRoute,
+} from "@/features/chat";
+import { createChatUiResourceReferenceFromTab } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
+import {
+  pageResourceFromTab,
+  pageResourceFromTarget,
+  pageResourceMainPath,
+} from "@/features/right-panel-resources/utils/page-resource-identity.utils";
+import { usePageNavigationStore } from "@/features/right-panel-resources/stores/page-navigation.store";
+import { createWorkspaceFileViewerTab } from "@/features/chat";
+import {
+  resolveFileResourceTarget,
+  createWorkspaceFilePanelTarget,
+  readWorkspaceFilePanelView,
+} from "@/features/chat";
+import type { DocBrowserTab } from "@/shared/components/doc-browser/types/doc-browser.types";
+import type {
+  PageOpenLocation,
+  PageResource,
+} from "@/features/right-panel-resources/types/page-resource.types";
+
+export function pageResourceTab(page: PageResource): DocBrowserTab {
+  return {
+    ...page.target,
+    id: page.uri,
+    currentUrl: page.target.url,
+    history: [page.target.url],
+    historyIndex: 0,
+    navVersion: 0,
+  };
+}
+
+/** One opening and reference policy shared by menus, navigation entries and links. */
+export class PageResourceManager {
+  private readonly remembered = new Map<string, PageResource>();
+  private workspace?: ChatThreadManager;
+  constructor(private readonly app: AppPresenter) {}
+  bindWorkspace = (owner: ChatThreadManager): void => {
+    this.workspace = owner;
+  };
+
+  remember = (page: PageResource): void => {
+    this.remembered.delete(page.uri);
+    this.remembered.set(page.uri, page);
+    while (this.remembered.size > 100)
+      this.remembered.delete(this.remembered.keys().next().value!);
+  };
+
+  resolve = (
+    uri: string,
+    context?: { workingDir?: string | null; sessionKey?: string | null },
+  ): PageResource | null => {
+    if (!/^(nextclaw:\/\/|https?:\/\/)/i.test(uri)) return null;
+    if (uri.startsWith("nextclaw://file/")) {
+      try {
+        const target = resolveFileResourceTarget(uri, context);
+        return target ? pageResourceFromTarget(target) : null;
+      } catch {
+        return null;
+      }
+    }
+    const saved =
+      this.remembered.get(uri) ??
+      usePageNavigationStore.getState().pinned.find((page) => page.uri === uri);
+    if (saved) return saved;
+    const tab = useDocBrowserStore
+      .getState()
+      .snapshot.tabs.find(
+        (item) => (item.resourceUri ?? item.currentUrl) === uri,
+      );
+    if (tab) return pageResourceFromTab(tab);
+    try {
+      if (uri.startsWith("nextclaw://page?")) {
+        const path = new URL(uri).searchParams.get("path");
+        if (
+          !path?.startsWith("/") ||
+          path.startsWith("//") ||
+          path.startsWith("/resource") ||
+          path.includes("\\")
+        )
+          return null;
+        return {
+          uri,
+          title: path,
+          mainPath: path,
+          target: {
+            kind: "route",
+            title: path,
+            url: path,
+            resourceUri: uri,
+            historyPolicy: "none",
+          },
+        };
+      }
+      if (uri.startsWith("nextclaw://workspace?")) {
+        const params = new URL(uri).searchParams;
+        const kind = params.get("page");
+        if (
+          ![
+            "overview",
+            "child-sessions",
+            "project-files",
+            "cron",
+            "continuous-attention",
+          ].includes(kind ?? "")
+        )
+          return null;
+        return {
+          uri,
+          title: kind!,
+          target: {
+            kind: "workspace",
+            title: kind!,
+            url: uri,
+            resourceUri: uri,
+            historyPolicy: "none",
+          },
+        };
+      }
+      if (uri.startsWith("nextclaw://workspace-file?")) {
+        const params = new URL(uri).searchParams;
+        const file = useChatThreadStore
+          .getState()
+          .snapshot.workspaceFileTabs.find(
+            (item) => item.key === params.get("key"),
+          );
+        if (file)
+          return pageResourceFromTarget(
+            createWorkspaceFilePanelTarget(file, {
+              workingDir: params.get("base") || null,
+              projectRoot: null,
+            }),
+          );
+      }
+      const target = this.app.rightPanelResourceRouteResolver.resolve(uri);
+      if (uri.startsWith("nextclaw://") && target.kind === "content")
+        return null;
+      return pageResourceFromTarget(target);
+    } catch {
+      return null;
+    }
+  };
+
+  pin = (page: PageResource): void => {
+    this.remember(page);
+    usePageNavigationStore.setState(({ pinned }) => ({
+      pinned: [...pinned.filter((item) => item.uri !== page.uri), page].slice(
+        -64,
+      ),
+    }));
+  };
+  unpin = (uri: string): void => {
+    usePageNavigationStore.setState(({ pinned }) => ({
+      pinned: pinned.filter((page) => page.uri !== uri),
+    }));
+  };
+
+  open = (
+    page: PageResource,
+    location: PageOpenLocation,
+    navigate: (path: string) => void,
+  ): void => {
+    this.remember(page);
+    if (page.target.kind === "workspace") {
+      const params = new URL(page.uri).searchParams;
+      const kind = params.get("page") as Parameters<
+        ChatThreadManager["openWorkspacePage"]
+      >[1];
+      const session = params.get("session");
+      navigate(session ? buildSessionPath(session) : "/chat");
+      this.workspace?.openWorkspacePage(session, kind);
+      const parent =
+        useChatThreadStore.getState().snapshot.workspacePanelParentKey;
+      this.app.workbenchSurfaceManager.place(
+        `session-workspace:${parent ?? "draft"}`,
+        location === "floating" ? "floating" : "docked",
+      );
+      if (location === "main")
+        this.app.workbenchSurfaceManager.toggleMaximize(`session-workspace:${parent ?? "draft"}`);
+      return;
+    }
+    const sessionKey = parseSessionKeyFromPanelUrl(page.uri);
+    if (location === "default") {
+      if (
+        sessionKey &&
+        useFloatingSessionStore.getState().session?.sessionKey === sessionKey
+      ) {
+        sessionSurfaceManager.restore();
+        return;
+      }
+      if (this.reuseWorkspace(page, sessionKey)) return;
+      const existing = useDocBrowserStore.getState().snapshot;
+      const tab = existing.tabs.find(
+        (item) => (item.resourceUri ?? item.currentUrl) === page.uri,
+      );
+      if (existing.isOpen && tab) {
+        this.app.docBrowserManager.openTarget(page.target, { newTab: true });
+        this.app.workbenchSurfaceManager.restore(GLOBAL_WORKBENCH_SURFACE);
+        return;
+      }
+    }
+    if (
+      location === "main" ||
+      page.target.kind === "route" ||
+      (location === "default" && page.mainPath && page.target.kind !== "panel-app")
+    ) {
+      navigate(pageResourceMainPath(page));
+    } else if (location === "floating" && sessionKey) {
+      sessionSurfaceManager.open({ sessionKey, title: page.title });
+    } else {
+      this.app.docBrowserManager.openTarget(page.target, {
+        newTab: true,
+        placement: location === "floating" ? "floating" : "docked",
+      });
+    }
+  };
+
+  private reuseWorkspace = (
+    page: PageResource,
+    sessionKey: string | null,
+  ): boolean => {
+    const { snapshot } = useChatThreadStore.getState();
+    const surface = `session-workspace:${snapshot.workspacePanelParentKey ?? "draft"}`;
+    if (
+      !this.workspace ||
+      snapshot.workspacePanelHidden ||
+      !this.app.workbenchSurfaceManager.isVisible(surface)
+    )
+      return false;
+    const file = readWorkspaceFilePanelView(pageResourceTab(page))?.file;
+    if (
+      file &&
+      snapshot.workspaceFileTabs.some((item) => item.key === file.key)
+    )
+      this.workspace.selectWorkspaceFile(file.key);
+    else if (
+      sessionKey &&
+      snapshot.childSessionTabs.some((item) => item.sessionKey === sessionKey)
+    )
+      this.workspace.selectChildSessionDetail(sessionKey);
+    else return false;
+    this.app.workbenchSurfaceManager.restore(surface);
+    return true;
+  };
+
+  openFileViewer = (
+    page: PageResource,
+    viewer: "source" | "rendered",
+    origin: "main" | "global" | "workspace" | undefined,
+    navigate: (path: string) => void,
+  ): void => {
+    const view = readWorkspaceFilePanelView(pageResourceTab(page));
+    if (!view) return;
+    const workspace = useChatThreadStore.getState().snapshot;
+    if (
+      origin !== "main" &&
+      origin !== "global" &&
+      !workspace.workspacePanelHidden &&
+      workspace.workspaceFileTabs.some((file) => file.key === view.file.key) &&
+      this.workspace
+    ) {
+      this.workspace.openWorkspaceFileViewer(view.file.key, viewer);
+      return;
+    }
+    const file = createWorkspaceFileViewerTab(view.file, viewer);
+    if (!file) return;
+    const next = pageResourceFromTarget(
+      createWorkspaceFilePanelTarget(file, view),
+    );
+    this.remember(next);
+    if (origin === "main") {
+      navigate(pageResourceMainPath(next));
+      return;
+    }
+    const tab = useDocBrowserStore
+      .getState()
+      .snapshot.tabs.find((candidate) => candidate.resourceUri === page.uri);
+    if (tab) {
+      this.app.docBrowserManager.setActiveTab(tab.id);
+      this.app.docBrowserManager.openTarget(next.target);
+    } else this.open(next, "default", navigate);
+  };
+
+  addToChat = (
+    page: PageResource,
+    pathname: string,
+    navigate: (path: string) => void,
+  ): void => {
+    const isChat = pathname === "/chat" || pathname.startsWith("/chat/");
+    const targetSessionKey = isChat
+      ? parseSessionKeyFromRoute(pathname.slice("/chat/".length))
+      : null;
+    if (parseSystemObjectReferenceUri(page.uri)) {
+      void nextclawClient.systemObjectReferences
+        .resolve(page.uri)
+        .then((reference) => {
+          this.app.chatComposerIntentManager.requestSystemObjectReference({
+            targetSessionKey,
+            reference,
+          });
+          if (!isChat) navigate("/chat");
+        })
+        .catch(() => toast.error(t("pageUnavailable")));
+      return;
+    }
+    const tab = pageResourceTab(page);
+    const file = readWorkspaceFilePanelView(tab);
+    if (file) {
+      const path =
+        file.file.path.startsWith("/") || !file.workingDir
+          ? file.file.path
+          : `${file.workingDir.replace(/\/$/, "")}/${file.file.path}`;
+      this.app.chatComposerIntentManager.requestFileReference({
+        targetSessionKey,
+        tokenKey: path,
+        label: page.title,
+      });
+    } else {
+      const reference = createChatUiResourceReferenceFromTab(tab);
+      if (!reference) return;
+      this.app.chatComposerIntentManager.requestUiResourceReference({
+        targetSessionKey,
+        reference,
+      });
+    }
+    if (!isChat) navigate("/chat");
+  };
+}

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

@@ -0,0 +1,114 @@
+import {
+  isDocsUrl,
+  normalizeDocUrl,
+} from "@/shared/components/doc-browser/utils/doc-browser-url.utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { PAGE_RESOURCE_RENDERERS } from "@/app/configs/page-resource-renderers.config";
+import { DocBrowserFrameContent } from "@/shared/components/doc-browser/doc-browser-panel-parts";
+import { useDocBrowserScrollRestoration } from "@/shared/components/doc-browser/hooks/use-doc-browser-scroll-restoration";
+import { PageResourceActionsMenu } from "@/features/right-panel-resources/components/page-resource-actions-menu";
+import { PageResourceIcon } from "@/features/right-panel-resources/components/page-resource-icon";
+import { pageResourceTab } from "@/features/right-panel-resources/managers/page-resource.manager";
+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";
+
+function ResourcePageContent({ page }: { page: PageResource }) {
+  const app = useAppPresenter();
+  const navigate = useNavigate();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [revision, setRevision] = useState(0);
+  const tab = useMemo(() => pageResourceTab(page), [page]);
+  const renderer = PAGE_RESOURCE_RENDERERS[tab.kind];
+  const iframeInstanceId = `main:${page.uri}:${revision}`;
+  const restore = useDocBrowserScrollRestoration({
+    currentTab: tab,
+    iframeRef,
+    isEnabled: Boolean(renderer?.supportsScrollRestoration),
+  });
+  useEffect(() => {
+    const handler = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      if (
+        tab.kind === "docs" &&
+        event.data?.type === "docs-route-change" &&
+        typeof event.data.url === "string" &&
+        isDocsUrl(event.data.url) &&
+        normalizeDocUrl(event.data.url) !== normalizeDocUrl(tab.currentUrl)
+      ) {
+        const next = app.pageResourceManager.resolve(event.data.url);
+        if (next) app.pageResourceManager.open(next, "main", navigate);
+      }
+      renderer?.onIframeMessage?.({
+        event,
+        iframe: iframeRef.current,
+        iframeInstanceId,
+        tab,
+      });
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [app, navigate, iframeInstanceId, renderer, tab]);
+  const params = {
+    tab,
+    currentUrl: tab.currentUrl,
+    refreshIframe: () => setRevision((value) => value + 1),
+    open: (uri?: string) => {
+      const next = uri ? app.pageResourceManager.resolve(uri) : null;
+      if (next) app.pageResourceManager.open(next, "main", navigate);
+    },
+    openTarget: (target: PageResource["target"]) =>
+      app.pageResourceManager.open(
+        pageResourceFromTarget(target),
+        "main",
+        navigate,
+      ),
+  };
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col bg-background"
+      data-testid="resource-main-page"
+    >
+      <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>
+        <PageResourceActionsMenu page={page} />
+      </header>
+      {renderer?.renderToolbar?.(params)}
+      <DocBrowserFrameContent
+        currentTab={tab}
+        currentUrl={tab.currentUrl}
+        customContent={renderer?.renderContent?.(params)}
+        iframeRef={iframeRef}
+        iframeInstanceId={iframeInstanceId}
+        iframeSandbox={renderer?.getIframeSandbox?.(tab)}
+        isDragging={false}
+        isResizing={false}
+        onIframeLoad={restore}
+        onIframePointerOver={renderer?.onIframePointerOver}
+      />
+    </div>
+  );
+}
+
+export function ResourcePage() {
+  const app = useAppPresenter();
+  const [search] = useSearchParams();
+  const navigate = useNavigate();
+  const uri = search.get("uri") ?? "";
+  const page = useMemo(() => app.pageResourceManager.resolve(uri), [app, uri]);
+  useEffect(() => {
+    if (page?.target.kind === "workspace")
+      app.pageResourceManager.open(page, "main", navigate);
+  }, [app, navigate, page]);
+  if (page?.target.kind === "workspace") return null;
+  if (!page)
+    return (
+      <p role="status" className="p-4 text-sm text-muted-foreground">
+        {t("pageUnavailable")}
+      </p>
+    );
+  return <ResourcePageContent key={page.uri} page={page} />;
+}

package/src/features/right-panel-resources/stores/page-navigation.store.ts

@@ -0,0 +1,55 @@
+import { ViewMemoryStorage } from "@/shared/lib/navigation-history";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import type { PageResource } from "@/features/right-panel-resources/types/page-resource.types";
+
+function safeTargetUrl(value: string): boolean {
+  if (/^\/(?!\/)/.test(value) && !value.includes("\\")) return true;
+  try {
+    return ["nextclaw:", "http:", "https:"].includes(new URL(value).protocol);
+  } catch {
+    return false;
+  }
+}
+
+function readPages(value: unknown): PageResource[] {
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !("pinned" in value) ||
+    !Array.isArray(value.pinned)
+  )
+    return [];
+  return value.pinned
+    .filter((page): page is PageResource => {
+      if (!page || typeof page !== "object") return false;
+      return (
+        typeof page.uri === "string" &&
+        /^(nextclaw:\/\/|https?:\/\/)/.test(page.uri) &&
+        typeof page.title === "string" &&
+        typeof page.target?.url === "string" &&
+        safeTargetUrl(page.target.url) &&
+        (page.mainPath === undefined ||
+          (typeof page.mainPath === "string" &&
+            /^\/(?!\/)/.test(page.mainPath) &&
+            !page.mainPath.includes("\\"))) &&
+        typeof page.target?.kind === "string" &&
+        typeof page.target?.title === "string" &&
+        ["managed", "none"].includes(page.target.historyPolicy)
+      );
+    })
+    .filter(
+      (page, index, pages) =>
+        pages.findIndex((candidate) => candidate.uri === page.uri) === index,
+    )
+    .slice(-64);
+}
+
+export const usePageNavigationStore = create<{ pinned: PageResource[] }>()(
+  persist((): { pinned: PageResource[] } => ({ pinned: [] }), {
+    name: "nextclaw.page-navigation",
+    version: 1,
+    storage: createJSONStorage(() => new ViewMemoryStorage()),
+    merge: (saved, current) => ({ ...current, pinned: readPages(saved) }),
+  }),
+);

package/src/features/right-panel-resources/types/page-resource.types.ts

@@ -0,0 +1,11 @@
+import type { DocBrowserRouteTarget } from "@/shared/components/doc-browser/types/doc-browser.types";
+
+/** Resource identity is independent of the surface currently presenting it. */
+export type PageResource = {
+  uri: string;
+  title: string;
+  target: DocBrowserRouteTarget;
+  mainPath?: string;
+};
+
+export type PageOpenLocation = "default" | "main" | "sidebar" | "floating";

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

@@ -2,6 +2,16 @@ import { describe, expect, it } from 'vitest';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 
 describe('RightPanelResourceRouteResolver', () => {
+  it.each(['cron-job', 'inbox-delivery', 'skill', 'agent', 'project'])('resolves %s as an object, not an unsupported website', (type) => {
+    const uri = 'nextclaw://objects/' + type + '/' + encodeURIComponent('workspace:项目/对象');
+    expect(new RightPanelResourceRouteResolver().resolve(uri)).toMatchObject({ kind: 'system-object', url: uri, resourceUri: uri });
+  });
+  it('distinguishes a marketplace skill detail from its collection', () => {
+    const resolver = new RightPanelResourceRouteResolver();
+    expect(resolver.resolve('nextclaw://marketplace-detail/skill%3Aexample')).toMatchObject({ kind:'marketplace-detail' });
+    expect(resolver.resolve('nextclaw://marketplace')).toMatchObject({ kind:'route', url:'/skills' });
+  });
+
   it('normalizes apps resources and keeps service apps distinct', () => {
     const resolver = new RightPanelResourceRouteResolver();
 

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

@@ -0,0 +1,61 @@
+import { createSystemObjectReferenceUri } from "@nextclaw/shared";
+import type {
+  DocBrowserRouteTarget,
+  DocBrowserTab,
+} from "@/shared/components/doc-browser/types/doc-browser.types";
+import {
+  buildSessionPath,
+  parseSessionKeyFromPanelUrl,
+} from "@/features/chat";
+import { readPanelAppIdFromTab } from "./right-panel-resource-uri.utils";
+import type { PageResource } from "@/features/right-panel-resources/types/page-resource.types";
+
+export function pageResourceFromTarget(
+  target: DocBrowserRouteTarget,
+): PageResource {
+  const uri = target.resourceUri ?? target.url;
+  const sessionKey = parseSessionKeyFromPanelUrl(uri);
+  const appId = readPanelAppIdFromTab({
+    resourceUri: uri,
+    currentUrl: target.url,
+  });
+  return {
+    uri,
+    title: target.title,
+    target,
+    ...(target.kind === "route"
+      ? { mainPath: target.url }
+      : sessionKey
+        ? { mainPath: buildSessionPath(sessionKey) }
+        : appId
+          ? { mainPath: `/apps/panel/${encodeURIComponent(appId)}` }
+          : {}),
+  };
+}
+
+export function pageResourceFromTab(tab: DocBrowserTab): PageResource {
+  return pageResourceFromTarget({
+    ...tab,
+    url: tab.currentUrl,
+    historyPolicy: "managed",
+  });
+}
+
+export function pageResourceMainPath(page: PageResource): string {
+  return page.mainPath ?? `/resource?uri=${encodeURIComponent(page.uri)}`;
+}
+
+export function pageResourceFromSystemObject(
+  objectType: string,
+  objectId: string,
+  title: string,
+): PageResource {
+  const uri = createSystemObjectReferenceUri(objectType, objectId);
+  return pageResourceFromTarget({
+    kind: "system-object",
+    title,
+    url: uri,
+    resourceUri: uri,
+    historyPolicy: "none",
+  });
+}

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

@@ -1,3 +1,5 @@
+import { createPanelAppResourceUri } from '@nextclaw/shared';
+export { createPanelAppResourceUri } from '@nextclaw/shared';
 import {
   readChatUiResourceReference,
   type ChatUiResourceReference,
@@ -67,12 +69,6 @@ export function normalizeRightPanelAppsUrl(url: string): string {
   return createRightPanelAppsUrl(getRightPanelAppsTabFromUrl(url));
 }
 
-export function createPanelAppResourceUri(appId: string, sourcePath?: string): string {
-  const uri = `nextclaw://panel-app/${encodeURIComponent(appId)}`;
-  const path = sourcePath?.trim();
-  return path ? `${uri}?${new URLSearchParams({ path }).toString()}` : uri;
-}
-
 export function createPanelAppContentPath(appId: string, sourcePath?: string): string {
   const url = `/api/panel-apps/${encodeURIComponent(appId)}/content`;
   const path = sourcePath?.trim();

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

@@ -206,3 +206,5 @@ describe('ServiceAppsPanel', () => {
     });
   });
 });
+
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

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

@@ -1,3 +1,5 @@
+import { PageResourceActionItems } from "@/features/right-panel-resources";
+import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 import { useState } from "react";
 import type {
   AgentProfileView,
@@ -165,7 +167,9 @@ export function ServiceAppListItem({
                   {t("serviceAppsMoreActions")}
                 </TooltipContent>
               </Tooltip>
-              <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+              <PopoverContent align="end" className="w-56 rounded-xl p-1.5">
+                <PageResourceActionItems page={pageResourceFromSystemObject("service-app", app.id, app.title)} onSelect={() => setIsMenuOpen(false)} />
+                <div className="my-1 h-px bg-border" />
                 <ServiceAppMenuItem
                   disabled={!canDisconnectRuntime}
                   icon={Unplug}

package/src/features/settings/pages/providers-config-page.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { KeyRound, MoreHorizontal, Plus, Search, Trash2 } from 'lucide-react';
+import { KeyRound, MoreVertical, Plus, Search, Trash2 } from 'lucide-react';
 import {
   useCreateProvider,
   useDeleteProvider,
@@ -304,7 +304,7 @@ export function ProvidersConfigPage() {
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >
-                            <MoreHorizontal className='h-4 w-4' />
+                            <MoreVertical className='h-4 w-4' />
                           </button>
                         </PopoverTrigger>
                         <PopoverContent className='w-40 p-1' align='end' onClick={(event) => event.stopPropagation()}>