@nextclaw/ui 0.27.0 → 0.27.2

package/src/features/cron/components/cron-job-detail-dialog.tsx

@@ -43,6 +43,7 @@ function DetailRow({
 }
 
 type CronJobDetailDialogProps = {
+  readonly embedded?: boolean;
   readonly job: CronJobView | null;
   readonly open: boolean;
   readonly onDelete: (job: CronJobView) => void;
@@ -52,6 +53,7 @@ type CronJobDetailDialogProps = {
 };
 
 export function CronJobDetailDialog({
+  embedded = false,
   job,
   open,
   onDelete,
@@ -74,13 +76,8 @@ export function CronJobDetailDialog({
       )
     : t("cronNeverRun");
 
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent
-        side="right"
-        closeLabel={t("cronCloseDetails")}
-        className="flex w-full flex-col overflow-hidden p-0 sm:max-w-[510px]"
-      >
+  const content = (
+    <>
         <SheetHeader className="shrink-0 border-b border-border/60 px-5 pb-5 pt-6 pr-14 sm:px-7 sm:pt-7">
           <div className="mb-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
             <span>{describeCronSchedule(job)}</span>
@@ -232,7 +229,11 @@ export function CronJobDetailDialog({
             {t("cronRunNow")}
           </Button>
         </SheetFooter>
-      </SheetContent>
-    </Sheet>
+    </>
   );
+  return <Sheet open={!embedded && open} onOpenChange={onOpenChange}>
+    {embedded ? <div className="flex h-full min-h-0 flex-col" data-testid="cron-job-detail">{content}</div> : (
+      <SheetContent side="right" closeLabel={t("cronCloseDetails")} className="flex w-full flex-col overflow-hidden p-0 sm:max-w-[510px]">{content}</SheetContent>
+    )}
+  </Sheet>;
 }

package/src/features/cron/components/cron-job-resource.tsx

@@ -0,0 +1,51 @@
+import { CronJobDetailDialog } from "./cron-job-detail-dialog";
+import { useCronJobs } from "@/features/cron/hooks/use-cron-jobs";
+import { useCronJobActions } from "@/features/cron/hooks/use-cron-job-actions";
+import { t } from "@/shared/lib/i18n";
+
+export function CronJobResource({ jobId }: { jobId: string }) {
+  const query = useCronJobs({ all: true });
+  const actions = useCronJobActions();
+  const job = query.data?.jobs.find((item) => item.id === jobId);
+  if (query.isPending)
+    return (
+      <p role="status" className="p-4">
+        {t("loading")}
+      </p>
+    );
+  if (query.isError)
+    return (
+      <div className="p-4">
+        <p role="alert">{t("resourceLoadFailed")}</p>
+        <button onClick={() => void query.refetch()}>
+          {t("resourceRetry")}
+        </button>
+      </div>
+    );
+  if (!job)
+    return (
+      <p role="alert" className="p-4">
+        {t("resourceNotFound")}
+      </p>
+    );
+  return (
+    <>
+      <CronJobDetailDialog
+        embedded
+        job={job}
+        open
+        onOpenChange={() => {}}
+        onDelete={(value) => {
+          void actions.deleteJob(value);
+        }}
+        onRun={(value) => {
+          void actions.runJob(value);
+        }}
+        onToggle={(value, enabled) => {
+          void actions.toggleJob(value, enabled);
+        }}
+      />
+      <actions.ConfirmDialog />
+    </>
+  );
+}

package/src/features/cron/index.ts

@@ -1,4 +1,5 @@
 export { CronConfig } from "./components/cron-config";
+export { CronJobResource } from "./components/cron-job-resource";
 export { CronJobDetailDialog } from "./components/cron-job-detail-dialog";
 export { useCronJobActions } from "./hooks/use-cron-job-actions";
 export {

package/src/features/inbox/pages/inbox-page.tsx

@@ -271,9 +271,10 @@ function InboxDetailPane({
   );
 }
 
-export function InboxPage() {
+export function InboxPage({ resourceId }: { resourceId?: string } = {}) {
   const navigate = useNavigate();
-  const { deliveryId } = useParams<{ deliveryId?: string }>();
+  const { deliveryId: routeDeliveryId } = useParams<{ deliveryId?: string }>();
+  const deliveryId = resourceId ?? routeDeliveryId;
   const { isMobile } = useViewportLayout();
   const { chatComposerIntentManager, docBrowserManager, inboxManager } = useAppPresenter();
   const deliveriesQuery = useInboxDeliveries();
@@ -366,12 +367,14 @@ export function InboxPage() {
     });
   };
 
-  const showList = !isMobile || !deliveryId;
+  const showList = !resourceId && (!isMobile || !deliveryId);
   const showDetail = !isMobile || Boolean(deliveryId);
+  if (resourceId && deliveriesQuery.isPending) return <p role="status" className="p-4">{t("loading")}</p>;
+  if (resourceId && !deliveriesQuery.isError && !activeDelivery) return <p role="alert" className="p-4">{t("resourceNotFound")}</p>;
 
   return (
     <div className="flex h-full min-h-0 flex-col md:gap-6">
-      {!isMobile ? <PageHeader
+      {!isMobile && !resourceId ? <PageHeader
         headingLevel={1}
         title={t("inboxTitle")}
         className="px-4 sm:px-0"
@@ -381,7 +384,7 @@ export function InboxPage() {
         {deliveriesQuery.isError ? (
           <div className="p-4">{isMobile && deliveryId ? <IconActionButton icon={<ArrowLeft className="h-4 w-4" />} label={t("inboxTitle")} onClick={() => navigate('/inbox')} /> : null}<p role="alert" className="text-sm text-destructive">{t("inboxLoadError")}</p></div>
         ) : (
-          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[300px_minmax(0,1fr)]">
+          <div className={cn("grid h-full min-h-0 grid-cols-1", !resourceId && "md:grid-cols-[300px_minmax(0,1fr)]")}>
             {showList ? <InboxListPane
               activeDeliveryId={activeDelivery?.id ?? null}
               deliveries={deliveries}

package/src/features/marketplace/components/__tests__/marketplace-page-detail.test.tsx

@@ -28,6 +28,7 @@ const mocks = vi.hoisted(() => ({
   fetchMarketplaceSkillContent: vi.fn(),
 }));
 
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { resolve: vi.fn(), open: vi.fn() } }) }));
 vi.mock("react-router-dom", async () => {
   const actual = await vi.importActual("react-router-dom");
   return {

package/src/features/marketplace/components/__tests__/marketplace-page.test.tsx

@@ -47,6 +47,7 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { resolve: vi.fn(), open: vi.fn() } }) }));
 vi.mock("react-router-dom", async () => {
   const actual = await vi.importActual("react-router-dom");
   return {

package/src/features/marketplace/components/mcp/__tests__/mcp-marketplace-page.test.tsx

@@ -6,6 +6,8 @@ import type {
   MarketplaceListView,
 } from "@/shared/lib/api";
 import type * as ReactQueryModule from "@tanstack/react-query";
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { open: vi.fn() } }) }));
+vi.mock("react-router-dom", () => ({ useNavigate: () => vi.fn() }));
 
 type ItemsQueryState = {
   data?: MarketplaceListView;

package/src/features/marketplace/components/mcp/mcp-marketplace-card.tsx

@@ -13,7 +13,7 @@ export function McpMarketplaceCard(props: {
   item?: MarketplaceItemSummary;
   record?: MarketplaceInstalledRecord;
   localeFallbacks: string[];
-  onOpen: () => void;
+  onOpen?: () => void;
   onInstall?: () => void;
   onToggle?: () => void;
   onDoctor?: () => void;
@@ -42,7 +42,7 @@ export function McpMarketplaceCard(props: {
   return (
     <article
       onClick={onOpen}
-      className="cursor-pointer rounded-2xl border border-gray-200/70 bg-white p-4 shadow-sm transition hover:border-blue-300 hover:shadow-md"
+      className={`rounded-2xl border border-gray-200/70 bg-white p-4 shadow-sm transition${onOpen ? " cursor-pointer hover:border-blue-300 hover:shadow-md" : ""}`}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">

package/src/features/marketplace/components/mcp/mcp-marketplace-page.tsx

@@ -50,12 +50,17 @@ import { useInfiniteScrollLoader } from "@/shared/hooks/use-infinite-scroll-load
 import { cn } from "@/shared/lib/utils";
 import { Sparkles, PackageCheck } from "lucide-react";
 import { Button } from "@/shared/components/ui/button";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { useNavigate } from "react-router-dom";
+import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 
 type ScopeType = "catalog" | "installed";
 
 const PAGE_SIZE = 12;
 
-export function McpMarketplacePage() {
+export function McpMarketplacePage({ resourceId }: { resourceId?: string } = {}) {
+  const app = useAppPresenter();
+  const navigate = useNavigate();
   const [scope, setScope] = useState<ScopeType>("catalog");
   const [searchText, setSearchText] = useState("");
   const [query, setQuery] = useState("");
@@ -142,6 +147,10 @@ export function McpMarketplacePage() {
     item?: MarketplaceItemSummary,
     record?: MarketplaceInstalledRecord,
   ) => {
+    if (record?.id) {
+      app.pageResourceManager.open(pageResourceFromSystemObject("mcp-server", record.id, record.label || record.id), "default", navigate);
+      return;
+    }
     const title = item?.name ?? record?.label ?? record?.id ?? "MCP";
     const detailId = createMarketplaceDetailDocId(
       item ? "mcp" : "mcp-local",
@@ -260,6 +269,19 @@ export function McpMarketplacePage() {
     });
   };
 
+  if (resourceId) {
+    const record = installedQuery.data?.records.find((item) => item.id === resourceId);
+    if (installedQuery.isPending) return <p role="status" className="p-4">{t("loading")}</p>;
+    if (!record) return <p role="alert" className="p-4">{t(installedQuery.isError ? "resourceLoadFailed" : "resourceNotFound")}</p>;
+    return <div className="h-full overflow-auto p-4">
+      <McpMarketplaceCard record={record} localeFallbacks={localeFallbacks}
+        onToggle={() => void handleManage(record.enabled === false ? "enable" : "disable", record)}
+        onDoctor={() => { setDoctorTarget(record.id ?? null); setDoctorResult(null); void doctorMutation.mutateAsync(record.id ?? ""); }}
+        onRemove={() => void handleManage("remove", record)} />
+      <DoctorDialog open={Boolean(doctorTarget)} targetName={doctorTarget} result={doctorResult} pending={doctorMutation.isPending} onOpenChange={(open) => !open && setDoctorTarget(null)} />
+      <ConfirmDialog />
+    </div>;
+  }
   const scopeTabs = [
     { id: "catalog", label: t("marketplaceMcpTabCatalog"), icon: Sparkles },
     {

package/src/features/marketplace/hooks/use-marketplace-item-detail.ts

@@ -11,8 +11,13 @@ import {
 import { pickLocalizedText } from "@/features/marketplace/components/marketplace-localization";
 import { t } from "@/shared/lib/i18n";
 import { useRef } from "react";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
 
 export function useMarketplaceItemDetail(localeFallbacks: string[]) {
+  const app = useAppPresenter();
+  const navigate = useNavigate();
   const docBrowser = useDocBrowser();
   const detailRequestRef = useRef({ byKey: new Map<string, number>(), seq: 0 });
 
@@ -20,6 +25,12 @@ export function useMarketplaceItemDetail(localeFallbacks: string[]) {
     item?: MarketplaceItemSummary,
     record?: MarketplaceInstalledRecord,
   ) => {
+    if (record?.resourceUri) {
+      const page = app.pageResourceManager.resolve(record.resourceUri);
+      if (page) app.pageResourceManager.open(page, "default", navigate);
+      else toast.error(t("pageUnavailable"));
+      return;
+    }
     const title =
       item?.name ??
       record?.label ??

package/src/features/panel-apps/index.ts

@@ -1,4 +1,5 @@
 export { PanelAppsList } from './components/panel-apps-list';
+export { PanelAppRuntimeSurface } from './components/panel-app-runtime-surface';
 export { PanelAppMainPage } from './pages/panel-app-main-page';
 export { PanelAppStandalonePage } from './pages/panel-app-standalone-page';
 export { PanelAppServiceActionAuthorizationDialog } from './components/panel-app-service-action-authorization-dialog';

package/src/features/projects/components/work/project-work-item-drawer.tsx

@@ -39,12 +39,14 @@ import { getProjectWorkStateLabel } from "@/features/projects/utils/project-work
 import { joinProjectPath } from "@/features/projects/utils/project-artifact-view.utils";
 
 export function ProjectWorkItemDrawer({
+  embedded = false,
   onOpenArtifact,
   onOpenChange,
   projectId,
   projectRoot,
   workItemId,
 }: {
+  embedded?: boolean;
   onOpenArtifact: (path: string, label: string) => void;
   onOpenChange: (open: boolean) => void;
   projectId: string;
@@ -55,13 +57,7 @@ export function ProjectWorkItemDrawer({
   const activity = useProjectWorkActivity(projectId, workItemId);
   useProjectWorkEvents(projectId);
   const states = useProjectWorkStates(projectId);
-  return (
-    <Sheet open={Boolean(workItemId)} onOpenChange={onOpenChange}>
-      <SheetContent
-        side="right"
-        closeLabel={t("projectsCloseDetails")}
-        className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-[680px]"
-      >
+  const content = <>
         {item.isLoading ? (
           <div className="p-6 text-sm text-muted-foreground">
             {t("projectsLoading")}
@@ -84,9 +80,10 @@ export function ProjectWorkItemDrawer({
             onClose={() => onOpenChange(false)}
           />
         ) : null}
-      </SheetContent>
-    </Sheet>
-  );
+  </>;
+  return <Sheet open={!embedded && Boolean(workItemId)} onOpenChange={onOpenChange}>
+    {embedded ? <div className="flex h-full min-h-0 flex-col">{content}</div> : <SheetContent side="right" closeLabel={t("projectsCloseDetails")} className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-[680px]">{content}</SheetContent>}
+  </Sheet>;
 }
 
 function ProjectWorkItemEditor({

package/src/features/projects/pages/project-home-page.tsx

@@ -28,6 +28,8 @@ import {
   type ProjectHomeTab,
 } from "@/features/projects/presenters/project-home.presenter";
 import { joinProjectPath } from "@/features/projects/utils/project-artifact-view.utils";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 
 const PROJECT_TABS: ProjectHomeTab[] = [
   "overview",
@@ -37,19 +39,21 @@ const PROJECT_TABS: ProjectHomeTab[] = [
   "agreement",
 ];
 
-export function ProjectsPage() {
-  const { projectId, tab: tabParam } = useParams<{
+export function ProjectsPage({ resourceId, resourceWorkId }: { resourceId?: string; resourceWorkId?: string } = {}) {
+  const app = useAppPresenter();
+  const { projectId: routeProjectId, tab: routeTab } = useParams<{
     projectId?: string;
     tab?: string;
   }>();
+  const projectId = resourceId ?? routeProjectId;
+  const [resourceTab, setResourceTab] = useState<ProjectHomeTab>("overview");
+  const tabParam = resourceId ? resourceTab : routeTab;
   const navigate = useNavigate();
   const { state } = useLocation();
   const presenter = usePresenter();
   const { isMobile } = useViewportLayout();
   const projects = useProjects();
-  const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(
-    null,
-  );
+  const openWorkItem = (id: string) => app.pageResourceManager.open(pageResourceFromSystemObject("project-work", JSON.stringify([projectId, id]), id), "default", navigate);
   const registered = projects.data?.projects ?? [];
   const selectedProject =
     registered.find((project) => project.id === projectId) ?? null;
@@ -74,6 +78,7 @@ export function ProjectsPage() {
         {t("projectsLoadFailed")}: {projects.error.message}
       </main>
     );
+  if (resourceId && !selectedProject) return <p role="alert" className="p-4">{t("resourceNotFound")}</p>;
   if (!registered.length)
     return (
       <main className="p-6 text-sm text-muted-foreground">
@@ -103,6 +108,8 @@ export function ProjectsPage() {
       viewMode: "preview",
       previewViewer: "rendered",
     });
+  if (resourceWorkId) return <ProjectWorkItemDrawer embedded projectId={selectedProject.id} projectRoot={selectedProject.rootPath}
+    workItemId={resourceWorkId} onOpenChange={(open) => { if (!open) navigate(`/projects/${encodeURIComponent(selectedProject.id)}/work`); }} onOpenArtifact={openProjectFile} />;
   return (
     <>
       <main className="h-full min-w-0 flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
@@ -116,7 +123,7 @@ export function ProjectsPage() {
           <Tabs
             value={tab}
             onValueChange={(value) =>
-              navigate(
+              resourceId && isProjectHomeTab(value) ? setResourceTab(value) : navigate(
                 `/projects/${encodeURIComponent(selectedProject.id)}/${value}`,
                 { state },
               )
@@ -140,13 +147,13 @@ export function ProjectsPage() {
                     label,
                   )
                 }
-                onOpenWorkItem={setSelectedWorkItemId}
+                onOpenWorkItem={openWorkItem}
               />
             </TabsContent>
             <TabsContent value="work" className="mt-4">
               <ProjectWorkItems
                 projectId={selectedProject.id}
-                onOpenWorkItem={setSelectedWorkItemId}
+                onOpenWorkItem={openWorkItem}
               />
             </TabsContent>
             <TabsContent value="artifacts" className="mt-4">
@@ -166,10 +173,7 @@ export function ProjectsPage() {
                 isLoading={skills.isLoading}
                 isError={skills.isError}
                 onOpen={(skill) =>
-                  openProjectFile(
-                    joinProjectPath(selectedProject.rootPath, skill.path),
-                    skill.name,
-                  )
+                  app.pageResourceManager.open(pageResourceFromSystemObject("skill", skill.ref, skill.name), "default", navigate)
                 }
               />
             </TabsContent>
@@ -189,20 +193,11 @@ export function ProjectsPage() {
           </Tabs>
         </div>
       </main>
-      <ProjectWorkItemDrawer
-        projectId={selectedProject.id}
-        projectRoot={selectedProject.rootPath}
-        workItemId={selectedWorkItemId}
-        onOpenChange={(open) => {
-          if (!open) setSelectedWorkItemId(null);
-        }}
-        onOpenArtifact={openProjectFile}
-      />
-      <ChatConversationWorkspaceSection
+      {!resourceId && <ChatConversationWorkspaceSection
         layoutMode={isMobile ? "mobile" : "desktop"}
         sessionKey={null}
         projectRoot={selectedProject.rootPath}
-      />
+      />}
     </>
   );
 }

package/src/features/projects/pages/projects-page.test.tsx

@@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ProjectsPage } from "./project-home-page";
 
 const mocks = vi.hoisted(() => ({
+  openResource: vi.fn(),
   agreementProps: vi.fn(),
   artifactsProps: vi.fn(),
   drawerProps: vi.fn(),
@@ -13,6 +14,8 @@ const mocks = vi.hoisted(() => ({
   useProjectSkills: vi.fn(),
   useProjects: vi.fn(),
 }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { open: mocks.openResource } }) }));
+vi.mock("@/features/right-panel-resources", () => ({ pageResourceFromSystemObject: (type: string, id: string) => ({ type, id }) }));
 
 vi.mock("@/shared/hooks/use-projects", () => ({
   useProjects: mocks.useProjects,
@@ -117,7 +120,7 @@ describe("ProjectsPage", () => {
     expect(mocks.useProjectSkills).toHaveBeenCalledWith(null);
     expect(screen.getAllByRole("tab")).toHaveLength(5);
     fireEvent.click(screen.getByRole("button", { name: "Overview work" }));
-    expect(screen.getByTestId("work-drawer").textContent).toBe("work-overview");
+    expect(mocks.openResource).toHaveBeenCalledWith({ type: "project-work", id: JSON.stringify(["project-1", "work-overview"]) }, "default", expect.any(Function));
   });
 
   it("loads artifacts from project work without material observation", () => {

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

@@ -1,8 +1,41 @@
 import type * as ReactQuery from "@tanstack/react-query";
-import { cleanup, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type * as ReactRouter from "react-router-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { SYSTEM_OBJECT_RESOURCE_RENDERERS } from "@/features/right-panel-resources/components/system-object-resource";
+import { WORKSPACE_FILE_PANEL_RENDERERS } from "@/features/right-panel-resources/components/workspace-file-resource";
+import { createWorkspaceFilePanelTarget } from "@/features/chat";
 import type { DocBrowserCustomTabRenderParams } from "@/shared/components/doc-browser/doc-browser-renderer.types";
+import type { WorkspaceTextExcerpt } from "@/features/chat";
+import { NativeObjectResource } from "@/features/right-panel-resources/components/native-object-resource";
+
+vi.mock("@/features/agents", () => ({ AgentsPage: ({ resourceId }: { resourceId: string }) => <div>agent:{resourceId}</div> }));
+vi.mock("@/features/cron", () => ({ CronJobResource: ({ jobId }: { jobId: string }) => <div>cron-job:{jobId}</div> }));
+vi.mock("@/features/projects", () => ({ ProjectsPage: ({ resourceId, resourceWorkId }: { resourceId: string; resourceWorkId?: string }) => <div>project:{resourceId}{resourceWorkId ? `/${resourceWorkId}` : ""}</div> }));
+vi.mock("@/features/inbox", () => ({ InboxPage: ({ resourceId }: { resourceId: string }) => <div>inbox-delivery:{resourceId}</div> }));
+vi.mock("@/features/apps", () => ({ AppsPanel: ({ serviceResourceId }: { serviceResourceId: string }) => <div>service-app:{serviceResourceId}</div> }));
+vi.mock("@/features/marketplace", () => ({ McpMarketplacePage: ({ resourceId }: { resourceId: string }) => <div>mcp-server:{resourceId}</div> }));
+vi.mock("@/features/panel-apps", () => ({
+  PanelAppRuntimeSurface: ({ appId }: { appId: string }) => <div>panel-app:{appId}</div>,
+  PanelAppHostProvider: ({ children }: { children: ReactNode }) => children,
+}));
+
+const actions = vi.hoisted(() => ({ addExcerptToChat: vi.fn(), navigate: vi.fn() }));
+vi.mock("@/features/chat", async () => ({
+  ...await import("@/features/chat/features/workspace/utils/workspace-file-panel-route.utils"),
+  ...await import("@/features/chat/features/workspace/utils/chat-workspace-file-tab.utils"),
+  ...await import("@/features/chat/features/workspace/utils/workspace-text-excerpt.utils"),
+  ...await import("@/features/chat/features/workspace/components/chat-session-workspace-file-preview"),
+}));
+vi.mock("@/app/components/app-presenter-provider", () => ({
+  useAppPresenter: () => ({ pageResourceManager: actions }),
+}));
+vi.mock("react-router-dom", async (importOriginal) => ({
+  ...await importOriginal<typeof ReactRouter>(),
+  useLocation: () => ({ pathname: "/chat/current-session" }),
+  useNavigate: () => actions.navigate,
+}));
 
 vi.mock("@tanstack/react-query", async (importOriginal) => ({
   ...await importOriginal<typeof ReactQuery>(),
@@ -14,13 +47,44 @@ vi.mock("@tanstack/react-query", async (importOriginal) => ({
   }),
 }));
 vi.mock("@/features/chat/features/workspace/components/chat-session-workspace-file-preview", () => ({
-  ChatSessionWorkspaceFilePreview: ({ file }: { file: { key: string; rawText: string } }) => (
-    <div data-testid="preview" data-resource-key={file.key}>{file.rawText}</div>
+  ChatSessionWorkspaceFilePreview: ({ file, onTextExcerptAdd }: {
+    file: { key: string; rawText: string };
+    onTextExcerptAdd?: (excerpt: WorkspaceTextExcerpt) => void;
+  }) => (
+    <div data-testid="preview" data-resource-key={file.key}>{file.rawText}
+      <button onClick={() => onTextExcerptAdd?.({ path: "agent.md", label: "agent.md", excerpt: "Agent snapshot", startLine: 1, endLine: 1 })}>Add selection</button>
+    </div>
   ),
 }));
 afterEach(cleanup);
 
 describe("system object reading identity", () => {
+  it.each(["agent", "cron-job", "project", "inbox-delivery", "service-app", "mcp-server", "panel-app"])("opens %s with its native renderer and unchanged identity", async (objectType) => {
+    render(<NativeObjectResource objectType={objectType} objectId="raw:id" openTarget={vi.fn()} />);
+    expect(await screen.findByText(`${objectType}:raw:id`)).toBeTruthy();
+    expect(screen.queryByTestId("preview")).toBeNull();
+  });
+
+  it("keeps project and work item identities separate", async () => {
+    render(<NativeObjectResource objectType="project-work" objectId={JSON.stringify(["project", "work"])} openTarget={vi.fn()} />);
+    expect(await screen.findByText("project:project/work")).toBeTruthy();
+  });
+
+  it("retains a global file's source context when quoting into a different conversation", () => {
+    const target = createWorkspaceFilePanelTarget({
+      key: "source-file", path: "agent.md", label: "agent.md", parentSessionKey: "source-session", viewMode: "preview",
+    }, { workingDir: "/source/workspace", projectRoot: "/source/workspace" });
+    render(WORKSPACE_FILE_PANEL_RENDERERS["workspace-file"].renderContent!({
+      currentUrl: target.url,
+      tab: { ...target, id: target.url, currentUrl: target.url, history: [target.url], historyIndex: 0, navVersion: 0 },
+      open: vi.fn(), openTarget: vi.fn(), refreshIframe: vi.fn(),
+    }));
+    fireEvent.click(screen.getByRole("button", { name: "Add selection" }));
+    expect(actions.addExcerptToChat).toHaveBeenLastCalledWith({
+      path: target.resourceUri, label: "agent.md", excerpt: "Agent snapshot", startLine: 1, endLine: 1,
+    }, "/chat/current-session", actions.navigate);
+  });
+
   it("isolates same-named snapshots by resource URI and preserves identity on reopen", () => {
     const content = (uri: string) => SYSTEM_OBJECT_RESOURCE_RENDERERS["system-object"].renderContent!({
       currentUrl: uri,
@@ -29,14 +93,18 @@ describe("system object reading identity", () => {
       openTarget: vi.fn(),
       refreshIframe: vi.fn(),
     } satisfies DocBrowserCustomTabRenderParams);
-    const first = "nextclaw://objects/agent/first";
-    const second = "nextclaw://objects/agent/second";
+    const first = "nextclaw://objects/skill/first";
+    const second = "nextclaw://objects/skill/second";
     const view = render(content(first));
     expect(screen.getByTestId("preview").getAttribute("data-resource-key")).toBe(first);
     view.rerender(content(second));
     expect(screen.getByTestId("preview").getAttribute("data-resource-key")).toBe(second);
     view.rerender(content(first));
     expect(screen.getByTestId("preview").getAttribute("data-resource-key")).toBe(first);
-    expect(screen.getByTestId("preview").textContent).toBe("# Agent snapshot");
+    expect(screen.getByTestId("preview").textContent).toContain("# Agent snapshot");
+    fireEvent.click(screen.getByRole("button", { name: "Add selection" }));
+    expect(actions.addExcerptToChat).toHaveBeenCalledWith({
+      path: first, label: "Agent", excerpt: "Agent snapshot", startLine: null, endLine: null,
+    }, "/chat/current-session", actions.navigate);
   });
 });