@nextclaw/ui 0.25.3 → 0.26.0

package/src/features/right-panel-resources/components/system-object-resource.tsx

@@ -0,0 +1,100 @@
+import { NextClawClientError } from "@nextclaw/client-sdk";
+import { useQuery } from "@tanstack/react-query";
+import { nextclawClient, buildNcpAssetContentUrl } from "@/shared/lib/api";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat";
+import { createWorkspaceFileTab } from "@/features/chat";
+import { createWorkspaceFilePanelTarget } from "@/features/chat";
+import type {
+  DocBrowserCustomTabRenderParams,
+  DocBrowserCustomTabRenderers,
+} from "@/shared/components/doc-browser/doc-browser-renderer.types";
+import { t } from "@/shared/lib/i18n";
+
+function SystemObjectResource({
+  tab,
+  openTarget,
+}: DocBrowserCustomTabRenderParams) {
+  const uri = tab.resourceUri ?? tab.currentUrl;
+  const query = useQuery({
+    queryKey: ["resource-object-snapshot", uri],
+    queryFn: async ({ signal }) => {
+      const reference =
+        await nextclawClient.systemObjectReferences.resolve(uri);
+      const response = await fetch(
+        buildNcpAssetContentUrl(reference.assetUri),
+        { signal },
+      );
+      if (!response.ok)
+        throw new Error(`Unable to read resource (${response.status})`);
+      return { reference, content: await response.text() };
+    },
+    retry: false,
+  });
+  if (query.isPending)
+    return (
+      <p role="status" className="p-4 text-sm text-muted-foreground">
+        {t("loading")}
+      </p>
+    );
+  if (!query.data) {
+    const code =
+      query.error instanceof NextClawClientError ? query.error.code : undefined;
+    const message =
+      code === "SYSTEM_OBJECT_NOT_FOUND"
+        ? "resourceNotFound"
+        : code === "SYSTEM_OBJECT_INVALID_REFERENCE"
+          ? "resourceInvalid"
+          : "resourceLoadFailed";
+    return (
+      <div className="space-y-2 p-4">
+        <p role="alert" className="text-sm text-destructive">
+          {t(message)}
+        </p>
+        <button
+          type="button"
+          className="text-sm underline"
+          onClick={() => void query.refetch()}
+        >
+          {t("resourceRetry")}
+        </button>
+      </div>
+    );
+  }
+  const { reference, content } = query.data;
+  const file = createWorkspaceFileTab(
+    {
+      path: reference.fileName,
+      label: reference.label,
+      viewMode: "preview",
+      previewViewer: "rendered",
+      rawText: content,
+      mimeType: reference.mimeType,
+    },
+    null,
+  )!;
+  return (
+    <ChatSessionWorkspaceFilePreview
+      file={{ ...file, key: uri }}
+      sessionWorkingDir={null}
+      sessionProjectRoot={null}
+      onFileOpen={(action) => {
+        const next = createWorkspaceFileTab(action, null);
+        if (next)
+          openTarget(
+            createWorkspaceFilePanelTarget(next, {
+              workingDir: null,
+              projectRoot: null,
+            }),
+            { newTab: true },
+          );
+      }}
+    />
+  );
+}
+
+export const SYSTEM_OBJECT_RESOURCE_RENDERERS: DocBrowserCustomTabRenderers = {
+  "system-object": {
+    getTitle: (tab) => tab.title,
+    renderContent: (params) => <SystemObjectResource {...params} />,
+  },
+};

package/src/features/right-panel-resources/components/workspace-file-resource.tsx

@@ -0,0 +1,56 @@
+import { FileText } from "lucide-react";
+import type {
+  DocBrowserCustomTabRenderers,
+  DocBrowserCustomTabRenderParams,
+} from "@/shared/components/doc-browser/doc-browser-renderer.types";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat";
+import {
+  createWorkspaceFilePanelTarget,
+  readWorkspaceFilePanelView,
+  WORKSPACE_FILE_PANEL_KIND,
+} from "@/features/chat";
+import { createWorkspaceFileTab } from "@/features/chat";
+import { t } from "@/shared/lib/i18n";
+
+function WorkspaceFilePanelContent({
+  tab,
+  openTarget,
+}: DocBrowserCustomTabRenderParams) {
+  const view = readWorkspaceFilePanelView(tab);
+  if (!view)
+    return (
+      <p role="status" className="p-4 text-sm text-muted-foreground">
+        {t("workbenchFileUnavailable")}
+      </p>
+    );
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col"
+      data-testid="workspace-file-panel-tab"
+    >
+      <ChatSessionWorkspaceFilePreview
+        file={view.file}
+        sessionWorkingDir={view.workingDir}
+        sessionProjectRoot={view.projectRoot}
+        onFileOpen={(action) => {
+          const file = createWorkspaceFileTab(
+            action,
+            view.file.parentSessionKey,
+          );
+          if (file)
+            openTarget(createWorkspaceFilePanelTarget(file, view), {
+              newTab: true,
+            });
+        }}
+      />
+    </div>
+  );
+}
+
+export const WORKSPACE_FILE_PANEL_RENDERERS: DocBrowserCustomTabRenderers = {
+  [WORKSPACE_FILE_PANEL_KIND]: {
+    getTitle: (tab) => tab.title,
+    renderIcon: () => <FileText className="h-4 w-4" />,
+    renderContent: (params) => <WorkspaceFilePanelContent {...params} />,
+  },
+};

package/src/features/right-panel-resources/configs/right-panel-resource-routes.config.ts

@@ -1,4 +1,6 @@
+import { parseSystemObjectReferenceUri, createPanelAppResourceUri as buildPanelAppResourceUri } from '@nextclaw/shared';
 import { t } from '@/shared/lib/i18n';
+import { buildSessionPanelUrl, CHAT_SESSION_PANEL_KIND, parseSessionKeyFromPanelUrl } from '@/features/chat';
 import { parseResourceUri, type ParsedResourceUri, type ResourceUriRouteDefinition } from '@/shared/lib/resource-uri';
 import {
   getDefaultDocsUrl,
@@ -77,9 +79,7 @@ function createPanelAppResourceUri(uri: ParsedResourceUri): string {
   if (!appId) {
     return 'nextclaw://panel-app';
   }
-  const resourceUri = `nextclaw://panel-app/${encodeURIComponent(appId)}`;
-  const path = uri.searchParams.get('path')?.trim();
-  return path ? `${resourceUri}?${new URLSearchParams({ path }).toString()}` : resourceUri;
+  return buildPanelAppResourceUri(appId, uri.searchParams.get('path') ?? undefined);
 }
 
 function arePanelAppUrlsEquivalent(left: string, right: string): boolean {
@@ -95,6 +95,49 @@ function arePanelAppUrlsEquivalent(left: string, right: string): boolean {
 }
 
 export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefinition[] = [
+  {
+    id: 'system-object', kind: 'system-object', defaultUrl: () => 'nextclaw://objects',
+    match: (uri) => Boolean(parseSystemObjectReferenceUri(uri.raw)),
+    resolve: (uri) => ({ kind: 'system-object', title: parseSystemObjectReferenceUri(uri.raw)!.objectId, url: uri.raw, resourceUri: uri.raw, historyPolicy: 'none' }),
+    areEquivalent: (left, right) => left === right,
+  },
+  {
+    id: 'marketplace-detail', kind: 'marketplace-detail', defaultUrl: () => 'nextclaw://marketplace-detail',
+    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'marketplace-detail' && uri.pathSegments.length === 1,
+    resolve: (uri) => ({ kind: 'marketplace-detail', title: decodeURIComponent(uri.pathSegments[0]), url: uri.raw, resourceUri: uri.raw, historyPolicy: 'managed' }),
+    areEquivalent: (left, right) => left === right,
+  },
+  {
+    id: 'marketplace', kind: 'route', defaultUrl: () => 'nextclaw://marketplace',
+    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'marketplace' && uri.pathSegments.length === 0,
+    resolve: (uri) => ({ kind: 'route', title: t('marketplaceTypeSkill'), url: '/skills', resourceUri: uri.raw, historyPolicy: 'none' }),
+    areEquivalent: (left, right) => left === right,
+  },
+  {
+    id: 'workspace-file', kind: 'workspace-file', defaultUrl: () => 'nextclaw://workspace-file',
+    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'workspace-file',
+    resolve: (uri) => ({ kind: 'workspace-file', title: t('chatWorkspaceProjectFiles'), url: uri.raw, resourceUri: uri.raw, dedupeKey: uri.raw, historyPolicy: 'none' }),
+    areEquivalent: (left, right) => left === right,
+  },
+  {
+    defaultUrl: () => 'nextclaw://chat-session/',
+    id: CHAT_SESSION_PANEL_KIND,
+    kind: CHAT_SESSION_PANEL_KIND,
+    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'chat-session',
+    resolve: (uri) => {
+      const sessionKey = parseSessionKeyFromPanelUrl(uri.raw);
+      const url = sessionKey ? buildSessionPanelUrl(sessionKey) : uri.raw;
+      return {
+        kind: CHAT_SESSION_PANEL_KIND,
+        title: t('chatFloatingConversation'),
+        url,
+        resourceUri: url,
+        dedupeKey: url,
+        historyPolicy: 'none',
+      };
+    },
+    areEquivalent: (left, right) => left === right,
+  },
   {
     defaultUrl: () => RIGHT_PANEL_HOME_URL,
     id: 'home',

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

@@ -0,0 +1,137 @@
+import { resolveAlternateWorkspaceFileViewer } from "@/features/chat";
+import { readWorkspaceFilePanelView } from "@/features/chat";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  usePanelApps,
+  useUpdatePanelAppPreferences,
+} from "@/features/panel-apps";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { usePageNavigationStore } from "@/features/right-panel-resources/stores/page-navigation.store";
+import {
+  readPanelAppIdFromTab,
+  createChatUiResourceReferenceFromTab,
+} from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
+import { pageResourceTab } from "@/features/right-panel-resources/managers/page-resource.manager";
+import type { PageResource } from "@/features/right-panel-resources/types/page-resource.types";
+import type { ContextMenuGroup } from "@/shared/components/ui/context-menu/context-menu";
+import { t } from "@/shared/lib/i18n";
+import { toast } from "sonner";
+
+export function usePageResourceActions() {
+  const app = useAppPresenter();
+  const navigate = useNavigate();
+  const { pathname, search } = useLocation();
+  const pins = usePageNavigationStore((state) => state.pinned);
+  const apps = usePanelApps();
+  const updatePreferences = useUpdatePanelAppPreferences();
+  return (
+    page: PageResource,
+    origin?: "main" | "global" | "workspace",
+  ): ContextMenuGroup[] => {
+    const tab = pageResourceTab(page);
+    const file = readWorkspaceFilePanelView(tab)?.file;
+    const viewer =
+      file?.viewMode === "preview"
+        ? resolveAlternateWorkspaceFileViewer(file.path, file.previewViewer)
+        : null;
+    const appId = readPanelAppIdFromTab(tab);
+    const entry = apps.data?.entries.find(
+      (candidate) => candidate.appId === appId,
+    );
+    const pinned = entry
+      ? entry.mainSidebar
+      : pins.some((item) => item.uri === page.uri);
+    const open = (location: "main" | "sidebar" | "floating") =>
+      app.pageResourceManager.open(page, location, navigate);
+    const items = [
+      {
+        key: "open-main",
+        label: t(page.target.kind === "workspace" ? "workbenchMaximize" : "workbenchOpenMain"),
+        onSelect: () => open("main"),
+      },
+      ...(page.target.kind === "route"
+        ? []
+        : [
+            {
+              key: "open-sidebar",
+              label: t("workbenchDock"),
+              onSelect: () => open("sidebar"),
+            },
+            {
+              key: "open-floating",
+              label: t("workbenchFloatView"),
+              onSelect: () => open("floating"),
+            },
+          ]),
+      {
+        key: "pin-left",
+        pressed: pinned,
+        label: t(pinned ? "pageUnpinLeft" : "pagePinLeft"),
+        disabled: Boolean(entry && updatePreferences.isPending),
+        onSelect: () => {
+          if (entry)
+            updatePreferences.mutate({
+              id: entry.id,
+              preferences: { mainSidebar: !pinned },
+            });
+          else if (pinned) app.pageResourceManager.unpin(page.uri);
+          else app.pageResourceManager.pin(page);
+          if (!pinned)
+            viewportLayoutManager.setMainSidebarAppGroupCollapsed(false);
+        },
+      },
+      ...(createChatUiResourceReferenceFromTab(tab)
+        ? [
+            {
+              key: "add-to-chat",
+              label: t("docBrowserAddToChat"),
+              restoreFocus: false,
+              onSelect: () =>
+                app.pageResourceManager.addToChat(page, pathname, navigate),
+            },
+          ]
+        : []),
+      {
+        key: "copy-uri",
+        label: t("pageCopyUri"),
+        onSelect: () => {
+          void navigator.clipboard
+            .writeText(page.uri)
+            .catch(() => toast.error(t("pageCopyFailed")));
+        },
+      },
+    ];
+    return [
+      { key: "page", items },
+      ...(viewer
+        ? [
+            {
+              key: "file-view",
+              items: [
+                {
+                  key: `viewer:${viewer}`,
+                  label: t(
+                    viewer === "rendered"
+                      ? "chatWorkspaceOpenPreview"
+                      : "chatWorkspaceOpenSource",
+                  ),
+                  onSelect: () =>
+                    app.pageResourceManager.openFileViewer(
+                      page,
+                      viewer,
+                      origin ??
+                        (pathname === "/resource" &&
+                        new URLSearchParams(search).get("uri") === page.uri
+                          ? "main"
+                          : undefined),
+                      navigate,
+                    ),
+                },
+              ],
+            },
+          ]
+        : []),
+    ];
+  };
+}

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

@@ -1,12 +1,5 @@
-export { RightPanelResourceHomePage } from '@/features/right-panel-resources/components/right-panel-resource-home-page';
-export { RightPanelResourceRouteResolver } from '@/features/right-panel-resources/utils/right-panel-resource-route-resolver.utils';
-export type {
-  RightPanelResourceHomeNavigationItem,
-  RightPanelResourceKind,
-  RightPanelResourceNavigationTarget,
-  RightPanelResourceTarget,
-} from '@/features/right-panel-resources/types/right-panel-resource.types';
 export {
+  createChatUiResourceReferenceFromTab,
   createPanelAppContentPath,
   createPanelAppResourceUri,
   createPanelAppRightPanelResourceTarget,
@@ -20,3 +13,24 @@ export {
   RIGHT_PANEL_PANEL_APPS_URL,
   RIGHT_PANEL_SERVICE_APPS_URL,
 } from '@/features/right-panel-resources/utils/right-panel-resource-uri.utils';
+export { RightPanelResourceHomePage } from '@/features/right-panel-resources/components/right-panel-resource-home-page';
+export { RightPanelResourceRouteResolver } from '@/features/right-panel-resources/utils/right-panel-resource-route-resolver.utils';
+export type {
+  RightPanelResourceHomeNavigationItem,
+  RightPanelResourceKind,
+  RightPanelResourceNavigationTarget,
+  RightPanelResourceTarget,
+} from '@/features/right-panel-resources/types/right-panel-resource.types';
+
+
+
+export { PageResourceIcon } from './components/page-resource-icon';
+export { PageResourceActionsMenu, PageResourceActionItems } from './components/page-resource-actions-menu';
+export { CurrentPageActions } from './components/current-page-actions';
+export { PageResourceSidebarNav } from './components/page-resource-sidebar-nav';
+export { SYSTEM_OBJECT_RESOURCE_RENDERERS } from './components/system-object-resource';
+export { WORKSPACE_FILE_PANEL_RENDERERS } from './components/workspace-file-resource';
+export { ResourcePage } from './pages/resource-page';
+export { usePageResourceActions } from './hooks/use-page-resource-actions';
+export { PageResourceManager, pageResourceTab } from './managers/page-resource.manager';
+export { pageResourceFromTarget, pageResourceFromTab, pageResourceMainPath, pageResourceFromSystemObject } from './utils/page-resource-identity.utils';

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

@@ -0,0 +1,149 @@
+import type { ChatThreadManager } from "@/features/chat";
+import { useChatThreadStore } from "@/features/chat";
+import { nextclawClient } from "@/shared/lib/api";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { AppPresenter } from "@/app/presenters/app.presenter";
+import { PageResourceManager } from "@/features/right-panel-resources/managers/page-resource.manager";
+import { RightPanelResourceRouteResolver } from "@/features/right-panel-resources/utils/right-panel-resource-route-resolver.utils";
+import { usePageNavigationStore } from "@/features/right-panel-resources/stores/page-navigation.store";
+import { useDocBrowserStore } from "@/shared/components/doc-browser/stores/doc-browser.store";
+import { createDefaultDocBrowserState } from "@/shared/components/doc-browser/utils/doc-browser-state.utils";
+import { pageResourceTab } from "@/features/right-panel-resources/managers/page-resource.manager";
+import {
+  buildSessionPanelUrl,
+  buildSessionPath,
+} from "@/features/chat";
+
+function setup() {
+  const app = {
+    rightPanelResourceRouteResolver: new RightPanelResourceRouteResolver(),
+    docBrowserManager: { openTarget: vi.fn() },
+    workbenchSurfaceManager: {
+      restore: vi.fn(),
+      toggleMaximize: vi.fn(),
+      place: vi.fn(),
+      isVisible: vi.fn(() => false),
+    },
+    chatComposerIntentManager: {
+      requestUiResourceReference: vi.fn(),
+      requestFileReference: vi.fn(),
+      requestSystemObjectReference: vi.fn(),
+    },
+  };
+  return {
+    app,
+    manager: new PageResourceManager(app as unknown as AppPresenter),
+    navigate: vi.fn(),
+  };
+}
+
+describe("shared resource opening policy", () => {
+  beforeEach(() => {
+    usePageNavigationStore.setState({ pinned: [] });
+    useDocBrowserStore.setState({ snapshot: createDefaultDocBrowserState() });
+  });
+  it("opens contextual workspace pages through their owner and maximizes instead of pretending to render a separate main page", () => {
+    const { manager, app, navigate } = setup();
+    const openWorkspacePage = vi.fn(() => useChatThreadStore.getState().setSnapshot({ workspacePanelParentKey: "parent" }));
+    manager.bindWorkspace({ openWorkspacePage } as unknown as ChatThreadManager);
+    const page = manager.resolve("nextclaw://workspace?page=overview&session=parent")!;
+    manager.open(page, "main", navigate);
+    expect(openWorkspacePage).toHaveBeenCalledWith("parent", "overview");
+    expect(app.workbenchSurfaceManager.place).toHaveBeenCalledWith("session-workspace:parent", "docked");
+    expect(app.workbenchSurfaceManager.toggleMaximize).toHaveBeenCalledWith("session-workspace:parent");
+    expect(navigate).toHaveBeenCalledWith(buildSessionPath("parent"));
+  });
+  it("opens an ordinary Panel App URI in the global sidebar by default, preserving explicit main navigation", () => {
+    const { manager, app, navigate } = setup();
+    const page = manager.resolve("nextclaw://panel-app/example-notes")!;
+    expect(page.target.kind).toBe("panel-app");
+    manager.open(page, "default", navigate);
+    expect(navigate).not.toHaveBeenCalled();
+    expect(app.docBrowserManager.openTarget).toHaveBeenCalledWith(page.target, { newTab: true, placement: "docked" });
+    manager.open(page, "main", navigate);
+    expect(navigate).toHaveBeenCalledWith("/apps/panel/example-notes");
+  });
+  it("reuses an already open resource before default main navigation, while an explicit choice overrides it", () => {
+    const { manager, app, navigate } = setup();
+    const page = manager.resolve("nextclaw://panel-app/example-notes")!;
+    useDocBrowserStore.setState({
+      snapshot: {
+        ...createDefaultDocBrowserState(),
+        isOpen: true,
+        tabs: [pageResourceTab(page)],
+      },
+    });
+    manager.open(page, "default", navigate);
+    expect(app.docBrowserManager.openTarget).toHaveBeenCalledWith(page.target, {
+      newTab: true,
+    });
+    expect(navigate).not.toHaveBeenCalled();
+    manager.open(page, "main", navigate);
+    expect(navigate).toHaveBeenCalledWith("/apps/panel/example-notes");
+  });
+  it("reconstructs conversations and pins generic pages without a Panel App identity", () => {
+    const { manager, navigate } = setup();
+    const conversation = manager.resolve(
+      buildSessionPanelUrl("example-session"),
+    )!;
+    manager.open(conversation, "main", navigate);
+    expect(navigate).toHaveBeenCalledWith(buildSessionPath("example-session"));
+    const page = manager.resolve("nextclaw://page?path=%2Fskills")!;
+    manager.pin(page);
+    expect(usePageNavigationStore.getState().pinned[0].uri).toBe(page.uri);
+    manager.unpin(page.uri);
+    expect(usePageNavigationStore.getState().pinned).toEqual([]);
+  });
+  it("uses the same chat reference from resource menus and preserves current conversation context", () => {
+    const { manager, app, navigate } = setup();
+    const page = manager.resolve("nextclaw://panel-app/example-notes")!;
+    manager.addToChat(page, buildSessionPath("example-session"), navigate);
+    expect(
+      app.chatComposerIntentManager.requestUiResourceReference,
+    ).toHaveBeenCalledWith({
+      targetSessionKey: "example-session",
+      reference: expect.objectContaining({ uri: page.uri }),
+    });
+    expect(navigate).not.toHaveBeenCalled();
+  });
+  it("adds resolved object snapshots to chat without sending or substituting a generic UI reference", async () => {
+    const { manager, app, navigate } = setup();
+    const page = manager.resolve("nextclaw://objects/cron-job/existing")!;
+    const reference = {
+      uri: page.uri,
+      objectType: "cron-job",
+      objectId: "existing",
+      assetUri: "ncp://assets/exact-snapshot",
+    };
+    const resolve = vi
+      .spyOn(nextclawClient.systemObjectReferences, "resolve")
+      .mockResolvedValue(reference as never);
+    try {
+      manager.addToChat(page, "/cron", navigate);
+      await Promise.resolve();
+      await Promise.resolve();
+      expect(resolve).toHaveBeenCalledWith(page.uri);
+      expect(
+        app.chatComposerIntentManager.requestSystemObjectReference,
+      ).toHaveBeenCalledWith({ targetSessionKey: null, reference });
+      expect(
+        app.chatComposerIntentManager.requestUiResourceReference,
+      ).not.toHaveBeenCalled();
+      expect(navigate).toHaveBeenCalledWith("/chat");
+    } finally {
+      resolve.mockRestore();
+    }
+  });
+  it("rejects unsafe schemes, unknown internal resources and off-origin route escapes", () => {
+    const { manager } = setup();
+    for (const uri of [
+      "javascript:alert(1)",
+      "data:text/html,x",
+      "nextclaw://missing",
+      "nextclaw://page?path=%2F%2Fevil.test",
+      "nextclaw://page?path=%2Fresource",
+    ]) {
+      expect(manager.resolve(uri)).toBeNull();
+    }
+  });
+});