@nextclaw/ui 0.12.11 → 0.12.12

package/src/{components/marketplace → features/marketplace/components}/marketplace-list-card.tsx

@@ -2,20 +2,19 @@ import type {
   MarketplaceInstalledRecord,
   MarketplaceItemSummary,
   MarketplaceManageAction,
-} from "@/api/types";
-import { Button } from "@/components/ui/button";
+} from "@/shared/lib/api";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
+} from "@/shared/components/ui/tooltip";
 import {
   buildLocaleFallbacks,
   pickLocalizedText,
-} from "@/components/marketplace/marketplace-localization";
+} from "@/features/marketplace/components/marketplace-localization";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 export type InstallState = {
   installingSpecs: ReadonlySet<string>;
@@ -49,6 +48,7 @@ function ItemIcon({ name, fallback }: { name?: string; fallback: string }) {
   const displayName = name || fallback;
   const letters = displayName.substring(0, 2).toUpperCase();
   const colorClass = getAvatarColor(displayName);
+
   return (
     <div
       className={cn(
@@ -61,13 +61,15 @@ function ItemIcon({ name, fallback }: { name?: string; fallback: string }) {
   );
 }
 
-function MarketplaceListCardMeta(props: {
+function MarketplaceListCardMeta({
+  title,
+  spec,
+  summary,
+}: {
   title: string;
   spec: string;
   summary: string;
 }) {
-  const { title, spec, summary } = props;
-
   return (
     <TooltipProvider delayDuration={400}>
       <Tooltip>
@@ -81,11 +83,11 @@ function MarketplaceListCardMeta(props: {
         </TooltipContent>
       </Tooltip>
 
-      <div className="mb-1.5 mt-0.5 flex items-center gap-1.5">
+      <div className="mb-1.5 mt-0.5 flex min-w-0 items-center gap-1.5">
         {spec ? (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="max-w-full truncate font-mono text-[11px] text-gray-400">
+              <span className="max-w-full truncate text-[11px] font-mono text-gray-400">
                 {spec}
               </span>
             </TooltipTrigger>
@@ -98,7 +100,7 @@ function MarketplaceListCardMeta(props: {
 
       <Tooltip>
         <TooltipTrigger asChild>
-          <p className="line-clamp-1 text-left text-[12px] leading-relaxed text-gray-500/90 transition-colors">
+          <p className="line-clamp-1 text-left text-[12px] leading-relaxed text-gray-500/90">
             {summary}
           </p>
         </TooltipTrigger>
@@ -112,101 +114,6 @@ function MarketplaceListCardMeta(props: {
   );
 }
 
-function readToggleLabel(
-  busyAction: MarketplaceManageAction | undefined,
-  isDisabled: boolean,
-) {
-  if (busyAction && busyAction !== "uninstall") {
-    return busyAction === "enable"
-      ? t("marketplaceEnabling")
-      : t("marketplaceDisabling");
-  }
-  return isDisabled ? t("marketplaceEnable") : t("marketplaceDisable");
-}
-
-function MarketplaceListCardActions(props: {
-  item?: MarketplaceItemSummary;
-  record?: MarketplaceInstalledRecord;
-  isInstalling: boolean;
-  busyAction: MarketplaceManageAction | undefined;
-  busyForRecord: boolean;
-  isDisabled: boolean;
-  onInstall: (item: MarketplaceItemSummary) => void;
-  onManage: (
-    action: MarketplaceManageAction,
-    record: MarketplaceInstalledRecord,
-  ) => void;
-}) {
-  const {
-    item,
-    record,
-    isInstalling,
-    busyAction,
-    busyForRecord,
-    isDisabled,
-    onInstall,
-    onManage,
-  } = props;
-  const pluginRecord = record?.type === "plugin" ? record : undefined;
-  const canUninstall =
-    (record?.type === "plugin" && record.origin !== "bundled") ||
-    (record?.type === "skill" && record.source === "workspace");
-
-  return (
-    <div className="flex h-full shrink-0 items-center">
-      {item && !record ? (
-        <Button
-          type="button"
-          size="sm"
-          variant="primary"
-          onClick={(event) => {
-            event.stopPropagation();
-            onInstall(item);
-          }}
-          disabled={isInstalling}
-          className="rounded-xl"
-        >
-          {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}
-        </Button>
-      ) : null}
-
-      {pluginRecord ? (
-        <Button
-          type="button"
-          size="sm"
-          variant="outline"
-          disabled={busyForRecord}
-          onClick={(event) => {
-            event.stopPropagation();
-            onManage(isDisabled ? "enable" : "disable", pluginRecord);
-          }}
-          className="rounded-xl border-gray-200/80 text-gray-600"
-        >
-          {readToggleLabel(busyAction, isDisabled)}
-        </Button>
-      ) : null}
-
-      {record && canUninstall ? (
-        <Button
-          type="button"
-          size="sm"
-          variant="outline"
-          disabled={busyForRecord}
-          onClick={(event) => {
-            event.stopPropagation();
-            onManage("uninstall", record);
-          }}
-          className="rounded-xl border-rose-100 text-rose-500 hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600"
-        >
-          {busyAction === "uninstall"
-            ? t("marketplaceRemoving")
-            : t("marketplaceUninstall")}
-        </Button>
-      ) : null}
-    </div>
-  );
-}
-
 export function MarketplaceListCard(props: {
   item?: MarketplaceItemSummary;
   record?: MarketplaceInstalledRecord;
@@ -231,6 +138,7 @@ export function MarketplaceListCard(props: {
     onManage,
   } = props;
   const localeFallbacks = buildLocaleFallbacks(language);
+  const pluginRecord = record?.type === "plugin" ? record : undefined;
   const title =
     item?.name ??
     record?.label ??
@@ -246,6 +154,9 @@ export function MarketplaceListCard(props: {
     ? manageState.actionsByTarget.get(targetId)
     : undefined;
   const busyForRecord = Boolean(busyAction);
+  const canUninstall =
+    (record?.type === "plugin" && record.origin !== "bundled") ||
+    (record?.type === "skill" && record.source === "workspace");
   const isDisabled = record
     ? record.enabled === false || record.runtimeStatus === "disabled"
     : false;
@@ -259,30 +170,64 @@ export function MarketplaceListCard(props: {
       onClick={onOpen}
       className="group flex cursor-pointer items-start justify-between gap-3.5 rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm transition-all hover:border-blue-300/80 hover:shadow-md"
     >
-      <div className="flex h-full min-w-0 flex-1 items-start gap-3">
+      <div className="flex min-w-0 flex-1 gap-3">
         <ItemIcon
           name={title}
           fallback={spec || t("marketplaceTypeExtension")}
         />
-        <div className="flex h-full min-w-0 flex-1 flex-col justify-center">
-          <MarketplaceListCardMeta
-            title={title}
-            spec={spec}
-            summary={summary}
-          />
+        <div className="flex min-w-0 flex-1 flex-col justify-center">
+          <MarketplaceListCardMeta title={title} spec={spec} summary={summary} />
         </div>
       </div>
 
-      <MarketplaceListCardActions
-        item={item}
-        record={record}
-        isInstalling={isInstalling}
-        busyAction={busyAction}
-        busyForRecord={busyForRecord}
-        isDisabled={isDisabled}
-        onInstall={onInstall}
-        onManage={onManage}
-      />
+      <div className="flex h-full shrink-0 items-center">
+        {item && !record && (
+          <button
+            onClick={(event) => {
+              event.stopPropagation();
+              onInstall(item);
+            }}
+            disabled={isInstalling}
+            className="inline-flex h-8 items-center gap-1.5 rounded-xl bg-primary px-4 text-xs font-medium text-white transition-colors hover:bg-primary-600 disabled:opacity-50"
+          >
+            {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}
+          </button>
+        )}
+
+        {pluginRecord && (
+          <button
+            disabled={busyForRecord}
+            onClick={(event) => {
+              event.stopPropagation();
+              onManage(isDisabled ? "enable" : "disable", pluginRecord);
+            }}
+            className="inline-flex h-8 items-center rounded-xl border border-gray-200/80 bg-white px-4 text-xs font-medium text-gray-600 transition-colors hover:border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          >
+            {busyAction && busyAction !== "uninstall"
+              ? busyAction === "enable"
+                ? t("marketplaceEnabling")
+                : t("marketplaceDisabling")
+              : isDisabled
+                ? t("marketplaceEnable")
+                : t("marketplaceDisable")}
+          </button>
+        )}
+
+        {record && canUninstall && (
+          <button
+            disabled={busyForRecord}
+            onClick={(event) => {
+              event.stopPropagation();
+              onManage("uninstall", record);
+            }}
+            className="inline-flex h-8 items-center rounded-xl border border-rose-100 bg-white px-4 text-xs font-medium text-rose-500 transition-colors hover:border-rose-200 hover:bg-rose-50 disabled:opacity-50"
+          >
+            {busyAction === "uninstall"
+              ? t("marketplaceRemoving")
+              : t("marketplaceUninstall")}
+          </button>
+        )}
+      </div>
     </article>
   );
 }

package/src/{components/marketplace → features/marketplace/components}/marketplace-localization.ts

@@ -1,4 +1,4 @@
-import type { MarketplaceInstalledRecord, MarketplaceLocalizedTextMap } from '@/api/types';
+import type { MarketplaceInstalledRecord, MarketplaceLocalizedTextMap } from '@/shared/lib/api';
 
 export function buildLocaleFallbacks(language: string): string[] {
   const normalized = language.trim().toLowerCase().replace(/_/g, '-');

package/src/{components/marketplace → features/marketplace/components}/marketplace-page-data.ts

@@ -1,8 +1,8 @@
 import type {
   MarketplaceInstalledRecord,
   MarketplaceItemSummary,
-} from "@/api/types";
-import { pickLocalizedText } from "@/components/marketplace/marketplace-localization";
+} from "@/shared/lib/api";
+import { pickLocalizedText } from "@/features/marketplace/components/marketplace-localization";
 
 export type InstalledRenderEntry = {
   key: string;

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

@@ -0,0 +1,336 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MarketplacePage } from "@/features/marketplace";
+import type { MarketplaceInstalledView, MarketplaceItemSummary, MarketplaceListView } from "@/shared/lib/api";
+
+type ItemsQueryState = {
+  data?: MarketplaceListView;
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
+type InstalledQueryState = {
+  data?: MarketplaceInstalledView;
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
+const mocks = vi.hoisted(() => ({
+  navigate: vi.fn(),
+  docOpen: vi.fn(),
+  itemsQuery: null as unknown as ItemsQueryState,
+  installedQuery: null as unknown as InstalledQueryState,
+  fetchMarketplaceSkillContent: vi.fn(),
+}));
+
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+  return {
+    ...(actual as object),
+    useNavigate: () => mocks.navigate,
+    useParams: () => ({}),
+  };
+});
+
+vi.mock("@/shared/components/doc-browser", () => ({
+  useDocBrowser: () => ({
+    open: mocks.docOpen,
+  }),
+}));
+
+vi.mock("@/shared/lib/api", () => ({
+  fetchMarketplaceSkillContent: mocks.fetchMarketplaceSkillContent,
+  fetchMarketplacePluginContent: vi.fn(),
+}));
+
+vi.mock("@/app/components/i18n-provider", () => ({
+  useI18n: () => ({
+    language: "en",
+  }),
+}));
+
+vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
+  useConfirmDialog: () => ({
+    confirm: vi.fn(),
+    ConfirmDialog: () => null,
+  }),
+}));
+
+vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
+  useMarketplaceItems: () => mocks.itemsQuery,
+  useMarketplaceInstalled: () => mocks.installedQuery,
+  useInstallMarketplaceItem: () => ({
+    mutateAsync: vi.fn(),
+    isPending: false,
+    variables: undefined,
+  }),
+  useManageMarketplaceItem: () => ({
+    mutate: vi.fn(),
+    mutateAsync: vi.fn(),
+    isPending: false,
+    variables: undefined,
+  }),
+}));
+
+function createMarketplaceItem(
+  overrides: Partial<MarketplaceItemSummary> = {},
+): MarketplaceItemSummary {
+  return {
+    id: "skill-web-search",
+    slug: "web-search",
+    type: "skill",
+    name: "Web Search",
+    summary: "Search the web from the marketplace",
+    summaryI18n: { en: "Search the web from the marketplace" },
+    tags: ["search"],
+    author: "NextClaw",
+    install: {
+      kind: "marketplace",
+      spec: "@nextclaw/web-search",
+      command: "nextclaw skills install @nextclaw/web-search",
+    },
+    updatedAt: "2026-03-17T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function createItemsQuery(items: MarketplaceItemSummary[]): ItemsQueryState {
+  return {
+    data: {
+      total: items.length,
+      page: 1,
+      pageSize: 12,
+      totalPages: 1,
+      sort: "relevance",
+      items,
+    } satisfies MarketplaceListView,
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+  };
+}
+
+function createInstalledQuery(): InstalledQueryState {
+  return {
+    data: {
+      type: "skill",
+      total: 0,
+      specs: [],
+      records: [],
+    } satisfies MarketplaceInstalledView,
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+  };
+}
+
+describe("MarketplacePage detail loading", () => {
+  beforeEach(() => {
+    mocks.navigate.mockReset();
+    mocks.docOpen.mockReset();
+    mocks.fetchMarketplaceSkillContent.mockReset();
+    mocks.itemsQuery = createItemsQuery([createMarketplaceItem()]);
+    mocks.installedQuery = createInstalledQuery();
+  });
+
+  it("opens a loading detail immediately before skill content resolves", async () => {
+    const user = userEvent.setup();
+    let resolveContent:
+      | ((value: {
+          metadataRaw: string;
+          bodyRaw: string;
+          raw: string;
+          source: string;
+          sourceUrl: string;
+        }) => void)
+      | undefined;
+    mocks.fetchMarketplaceSkillContent.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveContent = resolve;
+        }),
+    );
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    await user.click(screen.getByText("Web Search"));
+
+    expect(mocks.docOpen).toHaveBeenCalledTimes(1);
+    expect(String(mocks.docOpen.mock.calls[0]?.[0])).toContain("Loading");
+    expect(mocks.docOpen.mock.calls[0]?.[1]).toMatchObject({
+      dedupeKey: "marketplace:skill:web-search",
+      kind: "content",
+      title: "Web Search",
+    });
+
+    resolveContent?.({
+      metadataRaw: "name: Web Search",
+      bodyRaw: "Use this skill to search the web.",
+      raw: "Use this skill to search the web.",
+      source: "marketplace",
+      sourceUrl: "https://example.com/web-search",
+    });
+
+    await waitFor(() => {
+      expect(mocks.docOpen).toHaveBeenCalledTimes(2);
+    });
+    expect(mocks.docOpen.mock.calls[1]?.[1]).toMatchObject({
+      activate: false,
+      dedupeKey: "marketplace:skill:web-search",
+    });
+  });
+
+  it("keeps different skill detail responses independent", async () => {
+    const user = userEvent.setup();
+    let resolveFirst:
+      | ((value: {
+          metadataRaw: string;
+          bodyRaw: string;
+          raw: string;
+          source: string;
+          sourceUrl: string;
+        }) => void)
+      | undefined;
+    let resolveSecond:
+      | ((value: {
+          metadataRaw: string;
+          bodyRaw: string;
+          raw: string;
+          source: string;
+          sourceUrl: string;
+        }) => void)
+      | undefined;
+    mocks.fetchMarketplaceSkillContent.mockImplementation(
+      (slug: string) =>
+        new Promise((resolve) => {
+          if (slug === "web-search") {
+            resolveFirst = resolve;
+            return;
+          }
+          resolveSecond = resolve;
+        }),
+    );
+    mocks.itemsQuery = createItemsQuery([
+      createMarketplaceItem(),
+      createMarketplaceItem({
+        id: "skill-browser",
+        slug: "bb-browser",
+        name: "BB Browser",
+        summary: "Inspect pages in a browser workflow",
+        summaryI18n: { en: "Inspect pages in a browser workflow" },
+        install: {
+          kind: "marketplace",
+          spec: "@nextclaw/bb-browser",
+          command: "nextclaw skills install @nextclaw/bb-browser",
+        },
+      }),
+    ]);
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    await user.click(screen.getByText("Web Search"));
+    await user.click(screen.getByText("BB Browser"));
+
+    resolveFirst?.({
+      metadataRaw: "name: Web Search",
+      bodyRaw: "Use this skill to search the web.",
+      raw: "Use this skill to search the web.",
+      source: "marketplace",
+      sourceUrl: "https://example.com/web-search",
+    });
+    resolveSecond?.({
+      metadataRaw: "name: BB Browser",
+      bodyRaw: "Inspect pages in a browser workflow.",
+      raw: "Inspect pages in a browser workflow.",
+      source: "marketplace",
+      sourceUrl: "https://example.com/bb-browser",
+    });
+
+    await waitFor(() => {
+      expect(mocks.docOpen).toHaveBeenCalledTimes(4);
+    });
+
+    const webSearchCalls = mocks.docOpen.mock.calls.filter(
+      (call) => call[1]?.dedupeKey === "marketplace:skill:web-search",
+    );
+    const browserCalls = mocks.docOpen.mock.calls.filter(
+      (call) => call[1]?.dedupeKey === "marketplace: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");
+  });
+
+  it("ignores stale responses for the same skill detail key", async () => {
+    const user = userEvent.setup();
+    let resolveFirst:
+      | ((value: {
+          metadataRaw: string;
+          bodyRaw: string;
+          raw: string;
+          source: string;
+          sourceUrl: string;
+        }) => void)
+      | undefined;
+    let resolveSecond:
+      | ((value: {
+          metadataRaw: string;
+          bodyRaw: string;
+          raw: string;
+          source: string;
+          sourceUrl: string;
+        }) => void)
+      | undefined;
+    mocks.fetchMarketplaceSkillContent.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          if (!resolveFirst) {
+            resolveFirst = resolve;
+            return;
+          }
+          resolveSecond = resolve;
+        }),
+    );
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    await user.click(screen.getByText("Web Search"));
+    await user.click(screen.getByText("Web Search"));
+
+    resolveFirst?.({
+      metadataRaw: "name: stale",
+      bodyRaw: "Stale content should not open.",
+      raw: "Stale content should not open.",
+      source: "marketplace",
+      sourceUrl: "https://example.com/stale",
+    });
+    resolveSecond?.({
+      metadataRaw: "name: Web Search",
+      bodyRaw: "Latest content should open.",
+      raw: "Latest content should open.",
+      source: "marketplace",
+      sourceUrl: "https://example.com/web-search",
+    });
+
+    await waitFor(() => {
+      expect(mocks.docOpen).toHaveBeenCalledTimes(3);
+    });
+
+    expect(String(mocks.docOpen.mock.calls[2]?.[0])).toContain(
+      "Latest%20content",
+    );
+    expect(mocks.docOpen.mock.calls[2]?.[1]).toMatchObject({
+      activate: false,
+      dedupeKey: "marketplace:skill:web-search",
+    });
+    expect(String(mocks.docOpen.mock.calls[2]?.[0])).not.toContain("Stale");
+  });
+});