@nextclaw/ui 0.14.4 → 0.15.0

package/src/features/chat/stores/chat-thread.store.ts

@@ -1,11 +1,15 @@
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import type { NcpMessage } from '@nextclaw/ncp';
-import type { ChatFileOperationLineViewModel } from '@nextclaw/agent-chat-ui';
+import type { ChatFileOperationLineViewModel, ChatFilePreviewViewer } from '@nextclaw/agent-chat-ui';
 import type {
   SessionContextWindowView,
   SessionTypeIconView
 } from '@/shared/lib/api';
+import {
+  normalizePersistedWorkspaceFileTab,
+  toPersistedWorkspaceFileTab,
+} from '@/features/chat/features/workspace/utils/chat-workspace-file-tab-persistence.utils';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -25,6 +29,7 @@ export type ChatWorkspaceFileTab = {
   path: string;
   label?: string | null;
   viewMode: 'preview' | 'diff';
+  previewViewer?: ChatFilePreviewViewer | null;
   line?: number | null;
   column?: number | null;
   rawText?: string | null;
@@ -146,12 +151,6 @@ function normalizeOptionalString(value: unknown): string | null {
     : null;
 }
 
-function normalizeOptionalNumber(value: unknown): number | null {
-  return typeof value === 'number' && Number.isFinite(value)
-    ? value
-    : null;
-}
-
 function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
   return typeof value === 'number' && Number.isInteger(value)
     ? Math.min(Math.max(0, value), maxIndex)
@@ -210,63 +209,6 @@ function createWorkspaceNavigationEntryFromSnapshot({
   return null;
 }
 
-function normalizeOptionalText(value: unknown): string | null {
-  return typeof value === 'string' ? value : null;
-}
-
-function normalizePersistedWorkspaceFileTab(
-  value: unknown,
-): ChatWorkspaceFileTab | null {
-  if (
-    !isRecord(value)
-    || typeof value.key !== 'string'
-    || typeof value.path !== 'string'
-    || (value.viewMode !== 'preview' && value.viewMode !== 'diff')
-  ) {
-    return null;
-  }
-  const key = value.key.trim();
-  const path = value.path.trim();
-  if (!key || !path) {
-    return null;
-  }
-  return {
-    key,
-    parentSessionKey: normalizeOptionalString(value.parentSessionKey),
-    path,
-    label: normalizeOptionalString(value.label),
-    viewMode: value.viewMode,
-    line: normalizeOptionalNumber(value.line),
-    column: normalizeOptionalNumber(value.column),
-    rawText: normalizeOptionalText(value.rawText),
-    beforeText: normalizeOptionalText(value.beforeText),
-    afterText: normalizeOptionalText(value.afterText),
-    patchText: normalizeOptionalText(value.patchText),
-    oldStartLine: normalizeOptionalNumber(value.oldStartLine),
-    newStartLine: normalizeOptionalNumber(value.newStartLine),
-  };
-}
-
-function toPersistedWorkspaceFileTab(
-  tab: ChatWorkspaceFileTab,
-): ChatWorkspaceFileTab {
-  return {
-    key: tab.key,
-    parentSessionKey: tab.parentSessionKey,
-    path: tab.path,
-    label: tab.label,
-    viewMode: tab.viewMode,
-    line: tab.line,
-    column: tab.column,
-    rawText: tab.rawText,
-    beforeText: tab.beforeText,
-    afterText: tab.afterText,
-    patchText: tab.patchText,
-    oldStartLine: tab.oldStartLine,
-    newStartLine: tab.newStartLine,
-  };
-}
-
 function normalizePersistedWorkspaceSnapshot(
   value: unknown,
 ): PersistedChatWorkspaceSnapshot | null {

package/src/features/chat/types/chat-message.types.ts

@@ -23,6 +23,10 @@ export type ChatMessageAdapterTexts = {
   unknownPartLabel: string;
 };
 
+export type ChatMessageProcessSummarySource = {
+  label: string;
+};
+
 export type ChatMessagePartSource =
   | {
       type: "text";

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

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MarketplacePage } from "@/features/marketplace";
+import { useMarketplaceDetailDocStore } from "@/features/marketplace/stores/marketplace-detail-doc.store";
 import type { MarketplaceInstalledView, MarketplaceItemSummary, MarketplaceListView } from "@/shared/lib/api";
 
 type ItemsQueryState = {
@@ -21,7 +22,7 @@ type InstalledQueryState = {
 
 const mocks = vi.hoisted(() => ({
   navigate: vi.fn(),
-  docOpen: vi.fn(),
+  docOpenTarget: vi.fn(),
   itemsQuery: null as unknown as ItemsQueryState,
   installedQuery: null as unknown as InstalledQueryState,
   fetchMarketplaceSkillContent: vi.fn(),
@@ -38,7 +39,7 @@ vi.mock("react-router-dom", async () => {
 
 vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
-    open: mocks.docOpen,
+    openTarget: mocks.docOpenTarget,
   }),
 }));
 
@@ -137,7 +138,7 @@ function createInstalledQuery(): InstalledQueryState {
 describe("MarketplacePage detail loading", () => {
   beforeEach(() => {
     mocks.navigate.mockReset();
-    mocks.docOpen.mockReset();
+    mocks.docOpenTarget.mockReset();
     mocks.fetchMarketplaceSkillContent.mockReset();
     mocks.itemsQuery = createItemsQuery([createMarketplaceItem()]);
     mocks.installedQuery = createInstalledQuery();
@@ -165,13 +166,15 @@ describe("MarketplacePage detail loading", () => {
 
     await user.click(screen.getByText("Web Search"));
 
-    expect(mocks.docOpen).toHaveBeenCalledTimes(1);
-    const loadingDetailHtml = decodeURIComponent(String(mocks.docOpen.mock.calls[0]?.[0]));
-    expect(loadingDetailHtml).toContain('aria-busy="true"');
-    expect(loadingDetailHtml).not.toContain("Loading");
-    expect(mocks.docOpen.mock.calls[0]?.[1]).toMatchObject({
-      dedupeKey: "marketplace:skill:web-search",
-      kind: "content",
+    expect(mocks.docOpenTarget).toHaveBeenCalledTimes(1);
+    expect(mocks.docOpenTarget.mock.calls[0]?.[0]).toMatchObject({
+      dedupeKey: "marketplace-detail:skill:web-search",
+      kind: "marketplace-detail",
+      title: "Web Search",
+      url: "nextclaw://marketplace-detail/skill%3Aweb-search",
+    });
+    expect(useMarketplaceDetailDocStore.getState().entries["skill:web-search"]).toMatchObject({
+      status: "loading",
       title: "Web Search",
     });
 
@@ -184,11 +187,15 @@ describe("MarketplacePage detail loading", () => {
     });
 
     await waitFor(() => {
-      expect(mocks.docOpen).toHaveBeenCalledTimes(2);
+      expect(mocks.docOpenTarget).toHaveBeenCalledTimes(2);
     });
-    expect(mocks.docOpen.mock.calls[1]?.[1]).toMatchObject({
+    expect(mocks.docOpenTarget.mock.calls[1]?.[1]).toMatchObject({
       activate: false,
-      dedupeKey: "marketplace:skill:web-search",
+      dedupeKey: "marketplace-detail:skill:web-search",
+    });
+    expect(useMarketplaceDetailDocStore.getState().entries["skill:web-search"]).toMatchObject({
+      contentRaw: "Use this skill to search the web.",
+      status: "ready",
     });
   });
 
@@ -259,20 +266,20 @@ describe("MarketplacePage detail loading", () => {
     });
 
     await waitFor(() => {
-      expect(mocks.docOpen).toHaveBeenCalledTimes(4);
+      expect(mocks.docOpenTarget).toHaveBeenCalledTimes(4);
     });
 
-    const webSearchCalls = mocks.docOpen.mock.calls.filter(
-      (call) => call[1]?.dedupeKey === "marketplace:skill:web-search",
+    const webSearchCalls = mocks.docOpenTarget.mock.calls.filter(
+      (call) => call[0]?.dedupeKey === "marketplace-detail:skill:web-search",
     );
-    const browserCalls = mocks.docOpen.mock.calls.filter(
-      (call) => call[1]?.dedupeKey === "marketplace:skill:bb-browser",
+    const browserCalls = mocks.docOpenTarget.mock.calls.filter(
+      (call) => call[0]?.dedupeKey === "marketplace-detail:skill:bb-browser",
     );
 
     expect(webSearchCalls).toHaveLength(2);
     expect(browserCalls).toHaveLength(2);
-    expect(String(webSearchCalls[1]?.[0])).toContain("Web%20Search");
-    expect(String(browserCalls[1]?.[0])).toContain("BB%20Browser");
+    expect(useMarketplaceDetailDocStore.getState().entries["skill:web-search"]?.contentRaw).toContain("search the web");
+    expect(useMarketplaceDetailDocStore.getState().entries["skill:bb-browser"]?.contentRaw).toContain("browser workflow");
   });
 
   it("ignores stale responses for the same skill detail key", async () => {
@@ -327,16 +334,16 @@ describe("MarketplacePage detail loading", () => {
     });
 
     await waitFor(() => {
-      expect(mocks.docOpen).toHaveBeenCalledTimes(3);
+      expect(mocks.docOpenTarget).toHaveBeenCalledTimes(3);
     });
 
-    expect(String(mocks.docOpen.mock.calls[2]?.[0])).toContain(
-      "Latest%20content",
+    expect(useMarketplaceDetailDocStore.getState().entries["skill:web-search"]?.contentRaw).toContain(
+      "Latest content",
     );
-    expect(mocks.docOpen.mock.calls[2]?.[1]).toMatchObject({
+    expect(mocks.docOpenTarget.mock.calls[2]?.[1]).toMatchObject({
       activate: false,
-      dedupeKey: "marketplace:skill:web-search",
+      dedupeKey: "marketplace-detail:skill:web-search",
     });
-    expect(String(mocks.docOpen.mock.calls[2]?.[0])).not.toContain("Stale");
+    expect(useMarketplaceDetailDocStore.getState().entries["skill:web-search"]?.contentRaw).not.toContain("Stale");
   });
 });

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

@@ -57,6 +57,7 @@ vi.mock("react-router-dom", async () => {
 vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
     open: mocks.docOpen,
+    openTarget: mocks.docOpen,
   }),
 }));
 

package/src/features/marketplace/components/curated-shelves/__tests__/marketplace-curated-scene-route.test.tsx

@@ -53,6 +53,7 @@ vi.mock("react-router-dom", async () => {
 vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
     open: mocks.docOpen,
+    openTarget: mocks.docOpen,
   }),
 }));
 

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

@@ -0,0 +1,115 @@
+import { render, screen } from "@testing-library/react";
+import {
+  createMarketplaceDetailDocId,
+  createMarketplaceDetailDocUrl,
+  MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
+  MARKETPLACE_DETAIL_TAB_KIND,
+} from "@/features/marketplace/components/marketplace-detail-doc";
+import { setMarketplaceDetailDocEntry } from "@/features/marketplace/stores/marketplace-detail-doc.store";
+
+function renderDetail(detailId: string) {
+  const renderer = MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS[MARKETPLACE_DETAIL_TAB_KIND];
+  return render(
+    <>
+      {renderer?.renderContent?.({
+        currentUrl: createMarketplaceDetailDocUrl(detailId),
+        open: vi.fn(),
+        openTarget: vi.fn(),
+        refreshIframe: vi.fn(),
+        tab: {
+          id: "tab-1",
+          kind: MARKETPLACE_DETAIL_TAB_KIND,
+          title: "Weather Skill",
+          currentUrl: createMarketplaceDetailDocUrl(detailId),
+          history: [createMarketplaceDetailDocUrl(detailId)],
+          historyIndex: 0,
+          navVersion: 0,
+        },
+      })}
+    </>,
+  );
+}
+
+describe("Marketplace detail doc renderer", () => {
+  it("renders metadata and markdown content as React content", () => {
+    const detailId = createMarketplaceDetailDocId("skill", "weather");
+    setMarketplaceDetailDocEntry({
+      id: detailId,
+      title: "Weather Skill",
+      typeLabel: "Skill",
+      spec: "@nextclaw/weather",
+      status: "ready",
+      metadataRaw: "name: weather\ndescription: Local weather skill",
+      contentRaw: "# Weather Skill\n\nUse **weather** with `city`.\n\n- Local forecast\n- Severe alerts",
+    });
+
+    renderDetail(detailId);
+
+    expect(screen.getAllByRole("heading", { name: "Weather Skill", level: 1 })).toHaveLength(2);
+    expect(screen.getByText("name")).toBeTruthy();
+    expect(screen.getAllByText("weather")).toHaveLength(2);
+    expect(screen.getByText("description")).toBeTruthy();
+    expect(screen.getByText("city")).toBeTruthy();
+    expect(screen.getByText("Local forecast")).toBeTruthy();
+    expect(screen.getByText("Severe alerts")).toBeTruthy();
+  });
+
+  it("treats unsafe HTML as text, skips nested metadata, and preserves safe links", () => {
+    const detailId = createMarketplaceDetailDocId("skill", "unsafe");
+    setMarketplaceDetailDocEntry({
+      id: detailId,
+      title: "Unsafe Skill",
+      typeLabel: "Skill",
+      spec: "@nextclaw/unsafe",
+      status: "ready",
+      metadataRaw: '{"name":"unsafe","nested":{"script":"<script>alert(1)</script>"}}',
+      contentRaw: "[safe](https://example.com) <script>alert(1)</script>",
+    });
+
+    const { container } = renderDetail(detailId);
+
+    expect(screen.queryByText("nested")).toBeNull();
+    expect(screen.queryByText('{"script":"<script>alert(1)</script>"}')).toBeNull();
+    expect(screen.getByRole("link", { name: "safe" }).getAttribute("href")).toBe("https://example.com");
+    expect(container.querySelector("script")).toBeNull();
+    expect(screen.getAllByText(/<script>alert\(1\)<\/script>/)).toHaveLength(1);
+  });
+
+  it("renders loading and missing states inside the React panel", () => {
+    const loadingId = createMarketplaceDetailDocId("skill", "loading");
+    setMarketplaceDetailDocEntry({
+      id: loadingId,
+      title: "Loading Skill",
+      typeLabel: "Skill",
+      spec: "@nextclaw/loading",
+      status: "loading",
+    });
+
+    const { rerender } = renderDetail(loadingId);
+    expect(document.querySelector(".animate-pulse")).toBeTruthy();
+
+    const missingId = createMarketplaceDetailDocId("skill", "missing");
+    const renderer = MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS[MARKETPLACE_DETAIL_TAB_KIND];
+    rerender(
+      <>
+        {renderer?.renderContent?.({
+          currentUrl: createMarketplaceDetailDocUrl(missingId),
+          open: vi.fn(),
+          openTarget: vi.fn(),
+          refreshIframe: vi.fn(),
+          tab: {
+            id: "tab-1",
+            kind: MARKETPLACE_DETAIL_TAB_KIND,
+            title: "Missing",
+            currentUrl: createMarketplaceDetailDocUrl(missingId),
+            history: [createMarketplaceDetailDocUrl(missingId)],
+            historyIndex: 0,
+            navVersion: 0,
+          },
+        })}
+      </>,
+    );
+
+    expect(screen.getByText("Detail unavailable")).toBeTruthy();
+  });
+});