@nextclaw/ui 0.12.9 → 0.12.11

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

@@ -0,0 +1,128 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+} from "@/api/types";
+import { Button } from "@/components/ui/button";
+import { TagChip } from "@/components/ui/tag-chip";
+import { t } from "@/lib/i18n";
+import { readSummary, readTransportLabel } from "./mcp-marketplace-doc";
+
+export function McpMarketplaceCard(props: {
+  item?: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
+  localeFallbacks: string[];
+  onOpen: () => void;
+  onInstall?: () => void;
+  onToggle?: () => void;
+  onDoctor?: () => void;
+  onRemove?: () => void;
+}) {
+  const {
+    item,
+    record,
+    localeFallbacks,
+    onOpen,
+    onInstall,
+    onToggle,
+    onDoctor,
+    onRemove,
+  } = props;
+  const installed = record;
+  const name = item?.name ?? record?.label ?? record?.id ?? "MCP";
+  const summary = readSummary(localeFallbacks, item, record);
+  const transport = readTransportLabel(item, record);
+  const status = installed
+    ? installed.enabled === false
+      ? t("marketplaceDisable")
+      : t("statusReady")
+    : null;
+
+  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"
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="text-sm font-semibold text-gray-900">{name}</div>
+          <div className="mt-1 text-xs text-gray-500">{transport}</div>
+          <div className="mt-2 line-clamp-2 text-sm text-gray-600">
+            {summary}
+          </div>
+          <div className="mt-3 flex flex-wrap gap-2">
+            {(item?.tags ?? []).map((tag) => (
+              <TagChip key={tag}>{tag}</TagChip>
+            ))}
+            {status ? <TagChip tone="success">{status}</TagChip> : null}
+          </div>
+        </div>
+
+        <div className="flex shrink-0 flex-col gap-2">
+          {!installed && item && onInstall ? (
+            <Button
+              type="button"
+              size="sm"
+              variant="primary"
+              className="rounded-xl"
+              onClick={(event) => {
+                event.stopPropagation();
+                onInstall();
+              }}
+            >
+              {t("marketplaceInstall")}
+            </Button>
+          ) : null}
+
+          {installed ? (
+            <>
+              {onToggle ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  className="rounded-xl border-gray-200 text-gray-700"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onToggle();
+                  }}
+                >
+                  {installed.enabled === false
+                    ? t("marketplaceEnable")
+                    : t("marketplaceDisable")}
+                </Button>
+              ) : null}
+              {onDoctor ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  className="rounded-xl border-blue-200 text-blue-700 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-700"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onDoctor();
+                  }}
+                >
+                  {t("marketplaceMcpDoctor")}
+                </Button>
+              ) : null}
+              {onRemove ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  className="rounded-xl border-rose-200 text-rose-600 hover:border-rose-300 hover:bg-rose-50 hover:text-rose-600"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onRemove();
+                  }}
+                >
+                  {t("marketplaceMcpRemove")}
+                </Button>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+      </div>
+    </article>
+  );
+}

package/src/components/marketplace/mcp/mcp-marketplace-dialogs.tsx

@@ -0,0 +1,191 @@
+import { useState } from "react";
+import type {
+  MarketplaceItemSummary,
+  MarketplaceMcpDoctorResult,
+  MarketplaceMcpInstallSpec,
+} from "@/api/types";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { NoticeCard } from "@/components/ui/notice-card";
+import { Switch } from "@/components/ui/switch";
+import { t } from "@/lib/i18n";
+
+export function InstallDialog(props: {
+  item: MarketplaceItemSummary | null;
+  open: boolean;
+  pending: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (payload: {
+    name: string;
+    allAgents: boolean;
+    inputs: Record<string, string>;
+  }) => Promise<void>;
+}) {
+  const { item, open, pending, onOpenChange, onSubmit } = props;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {item ? (
+        <InstallDialogContent
+          key={`${item.slug}:${open ? "open" : "closed"}`}
+          item={item}
+          pending={pending}
+          onOpenChange={onOpenChange}
+          onSubmit={onSubmit}
+        />
+      ) : null}
+    </Dialog>
+  );
+}
+
+function InstallDialogContent(props: {
+  item: MarketplaceItemSummary;
+  pending: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (payload: {
+    name: string;
+    allAgents: boolean;
+    inputs: Record<string, string>;
+  }) => Promise<void>;
+}) {
+  const { item, pending, onOpenChange, onSubmit } = props;
+  const template = item.install as MarketplaceMcpInstallSpec | undefined;
+  const [name, setName] = useState(template?.defaultName ?? "");
+  const [allAgents, setAllAgents] = useState(true);
+  const [inputs, setInputs] = useState<Record<string, string>>(
+    Object.fromEntries(
+      (template?.inputs ?? []).map((field) => [
+        field.id,
+        field.defaultValue ?? "",
+      ]),
+    ),
+  );
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{t("marketplaceMcpInstallDialogTitle")}</DialogTitle>
+        <DialogDescription>{item.name}</DialogDescription>
+      </DialogHeader>
+
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="text-sm font-medium text-gray-800">
+            {t("marketplaceMcpServerName")}
+          </div>
+          <Input
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            placeholder={template?.defaultName ?? "mcp-server"}
+          />
+        </div>
+
+        <div className="flex items-center justify-between rounded-xl border border-gray-200 px-3 py-3">
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              {t("marketplaceMcpAllAgents")}
+            </div>
+            <div className="text-xs text-gray-500">
+              {t("marketplaceMcpAllAgentsDescription")}
+            </div>
+          </div>
+          <Switch checked={allAgents} onCheckedChange={setAllAgents} />
+        </div>
+
+        {(template?.inputs ?? []).map((field) => (
+          <div key={field.id} className="space-y-2">
+            <div className="text-sm font-medium text-gray-800">
+              {field.label}
+            </div>
+            {field.description ? (
+              <div className="text-xs text-gray-500">{field.description}</div>
+            ) : null}
+            <Input
+              type={field.secret ? "password" : "text"}
+              value={inputs[field.id] ?? ""}
+              onChange={(event) =>
+                setInputs((current) => ({
+                  ...current,
+                  [field.id]: event.target.value,
+                }))
+              }
+              placeholder={field.defaultValue ?? ""}
+            />
+          </div>
+        ))}
+      </div>
+
+      <DialogFooter>
+        <Button
+          variant="outline"
+          onClick={() => onOpenChange(false)}
+          disabled={pending}
+        >
+          {t("cancel")}
+        </Button>
+        <Button
+          onClick={() => void onSubmit({ name, allAgents, inputs })}
+          disabled={pending || !name.trim()}
+        >
+          {pending ? t("marketplaceInstalling") : t("marketplaceInstall")}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
+
+export function DoctorDialog(props: {
+  result: MarketplaceMcpDoctorResult | null;
+  targetName: string | null;
+  open: boolean;
+  pending: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const { result, targetName, open, pending, onOpenChange } = props;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("marketplaceMcpDoctorTitle")}</DialogTitle>
+          <DialogDescription>{targetName ?? "-"}</DialogDescription>
+        </DialogHeader>
+        {pending ? (
+          <div className="text-sm text-gray-500">{t("loading")}</div>
+        ) : null}
+        {!pending && result ? (
+          <div className="space-y-3 text-sm text-gray-700">
+            <div>
+              {t("marketplaceMcpDoctorAccessible")}:{" "}
+              {result.accessible
+                ? t("statusReady")
+                : t("marketplaceOperationFailed")}
+            </div>
+            <div>
+              {t("marketplaceMcpDoctorTransport")}:{" "}
+              {result.transport.toUpperCase()}
+            </div>
+            <div>
+              {t("marketplaceMcpDoctorTools")}: {result.toolCount}
+            </div>
+            {result.error ? (
+              <NoticeCard
+                tone="danger"
+                description={result.error}
+                className="rounded-lg"
+              />
+            ) : null}
+          </div>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/marketplace/mcp/mcp-marketplace-doc.ts

@@ -0,0 +1,152 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceMcpInstallSpec,
+} from "@/api/types";
+import {
+  pickInstalledRecordDescription,
+  pickLocalizedText,
+} from "@/components/marketplace/marketplace-localization";
+import { t } from "@/lib/i18n";
+
+function normalizeMarketplaceKey(value: string | undefined): string {
+  return (value ?? "").trim().toLowerCase();
+}
+
+export function buildInstalledRecordLookup(
+  records: MarketplaceInstalledRecord[],
+): Map<string, MarketplaceInstalledRecord> {
+  const lookup = new Map<string, MarketplaceInstalledRecord>();
+
+  for (const record of records) {
+    const candidates = [
+      record.catalogSlug,
+      record.spec,
+      record.id,
+      record.label,
+    ];
+    for (const candidate of candidates) {
+      const normalized = normalizeMarketplaceKey(candidate);
+      if (!normalized || lookup.has(normalized)) {
+        continue;
+      }
+      lookup.set(normalized, record);
+    }
+  }
+
+  return lookup;
+}
+
+export function findInstalledRecordForItem(
+  item: MarketplaceItemSummary,
+  installedRecordLookup: Map<string, MarketplaceInstalledRecord>,
+): MarketplaceInstalledRecord | undefined {
+  const candidates = [item.slug, item.install.spec, item.id, item.name];
+  for (const candidate of candidates) {
+    const normalized = normalizeMarketplaceKey(candidate);
+    if (!normalized) {
+      continue;
+    }
+    const record = installedRecordLookup.get(normalized);
+    if (record) {
+      return record;
+    }
+  }
+  return undefined;
+}
+
+function escape(value: string) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function buildDocDataUrl(
+  title: string,
+  metadata: string,
+  content: string,
+  sourceUrl?: string,
+  summary?: string,
+): string {
+  const html = `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${escape(title)}</title>
+    <style>
+      body { margin: 0; background: #f8fafc; color: #0f172a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+      .wrap { max-width: 980px; margin: 0 auto; padding: 28px 20px 40px; }
+      .hero { border: 1px solid #dbeafe; border-radius: 16px; background: linear-gradient(180deg, #eff6ff, #ffffff); padding: 20px; }
+      .hero h1 { margin: 0; font-size: 26px; }
+      .grid { display: grid; grid-template-columns: 280px 1fr; gap: 14px; margin-top: 16px; }
+      .card { border: 1px solid #e2e8f0; background: #fff; border-radius: 14px; overflow: hidden; }
+      .card h2 { margin: 0; padding: 12px 14px; font-size: 13px; font-weight: 700; color: #1d4ed8; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
+      .body { padding: 12px 14px; }
+      pre { margin: 0; white-space: pre-wrap; line-height: 1.7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+      a { color: #2563eb; text-decoration: none; }
+      @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
+    </style>
+  </head>
+  <body>
+    <main class="wrap">
+      <section class="hero">
+        <h1>${escape(title)}</h1>
+        ${summary ? `<p>${escape(summary)}</p>` : ""}
+        ${sourceUrl ? `<p><a href="${escape(sourceUrl)}" target="_blank" rel="noopener noreferrer">${escape(sourceUrl)}</a></p>` : ""}
+      </section>
+      <section class="grid">
+        <article class="card">
+          <h2>Metadata</h2>
+          <div class="body"><pre>${escape(metadata)}</pre></div>
+        </article>
+        <article class="card">
+          <h2>Content</h2>
+          <div class="body"><pre>${escape(content)}</pre></div>
+        </article>
+      </section>
+    </main>
+  </body>
+</html>`;
+
+  return `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
+}
+
+export function readSummary(
+  localeFallbacks: string[],
+  item?: MarketplaceItemSummary,
+  record?: MarketplaceInstalledRecord,
+): string {
+  const localizedSummary = pickLocalizedText(
+    item?.summaryI18n,
+    item?.summary,
+    localeFallbacks,
+  );
+  if (localizedSummary) {
+    return localizedSummary;
+  }
+
+  const localizedRecordDescription = pickInstalledRecordDescription(
+    record,
+    localeFallbacks,
+  );
+  return localizedRecordDescription || t("marketplaceInstalledLocalSummary");
+}
+
+export function readTransportLabel(
+  item?: MarketplaceItemSummary,
+  record?: MarketplaceInstalledRecord,
+): string {
+  if (record?.transport) {
+    return record.transport.toUpperCase();
+  }
+  const install = item?.install as MarketplaceMcpInstallSpec | undefined;
+  return (
+    (install?.transportTypes ?? [])
+      .map((entry) => entry.toUpperCase())
+      .join(" / ") || "MCP"
+  );
+}

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

@@ -0,0 +1,223 @@
+import { render, screen } from "@testing-library/react";
+import { describe, beforeEach, expect, it, vi } from "vitest";
+import { McpMarketplacePage } from "@/components/marketplace/mcp/mcp-marketplace-page";
+import type {
+  MarketplaceInstalledView,
+  MarketplaceListView,
+} from "@/api/types";
+
+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(() => ({
+  itemsQuery: null as unknown as ItemsQueryState,
+  installedQuery: null as unknown as InstalledQueryState,
+  installMutation: {
+    mutateAsync: vi.fn(),
+    isPending: false,
+  },
+  manageMutation: {
+    mutateAsync: vi.fn(),
+    isPending: false,
+  },
+  doctorMutation: {
+    mutateAsync: vi.fn(),
+    isPending: false,
+  },
+  confirm: vi.fn(),
+  docOpen: vi.fn(),
+}));
+
+vi.mock("@tanstack/react-query", () => ({
+  useMutation: () => mocks.doctorMutation,
+}));
+
+vi.mock("@/components/providers/I18nProvider", () => ({
+  useI18n: () => ({
+    language: "zh",
+    setLanguage: vi.fn(),
+    toggleLanguage: vi.fn(),
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock("@/components/doc-browser", () => ({
+  useDocBrowser: () => ({
+    open: mocks.docOpen,
+  }),
+}));
+
+vi.mock("@/hooks/useConfirmDialog", () => ({
+  useConfirmDialog: () => ({
+    confirm: mocks.confirm,
+    ConfirmDialog: () => null,
+  }),
+}));
+
+vi.mock("@/hooks/useMcpMarketplace", () => ({
+  useMcpMarketplaceItems: () => mocks.itemsQuery,
+  useMcpMarketplaceInstalled: () => mocks.installedQuery,
+  useInstallMcpMarketplaceItem: () => mocks.installMutation,
+  useManageMcpMarketplaceItem: () => mocks.manageMutation,
+}));
+
+function createItemsQuery(
+  overrides: Partial<ItemsQueryState> = {},
+): ItemsQueryState {
+  return {
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    ...overrides,
+  };
+}
+
+function createInstalledQuery(
+  overrides: Partial<InstalledQueryState> = {},
+): InstalledQueryState {
+  return {
+    data: {
+      type: "mcp",
+      total: 0,
+      specs: [],
+      records: [],
+    },
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    ...overrides,
+  };
+}
+
+describe("McpMarketplacePage", () => {
+  beforeEach(() => {
+    mocks.installMutation.mutateAsync.mockReset();
+    mocks.manageMutation.mutateAsync.mockReset();
+    mocks.doctorMutation.mutateAsync.mockReset();
+    mocks.confirm.mockReset();
+    mocks.docOpen.mockReset();
+    mocks.itemsQuery = createItemsQuery();
+    mocks.installedQuery = createInstalledQuery();
+  });
+
+  it("prefers localized summary copy for the active language", () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 12,
+        totalPages: 1,
+        sort: "relevance",
+        items: [
+          {
+            id: "mcp-chrome-devtools",
+            slug: "chrome-devtools",
+            type: "mcp",
+            name: "Chrome DevTools MCP",
+            summary:
+              "Connect MCP clients to Chrome DevTools for browser inspection and automation.",
+            summaryI18n: {
+              en: "Connect MCP clients to Chrome DevTools for browser inspection and automation.",
+              zh: "把 MCP 客户端接入 Chrome DevTools，用于浏览器检查与自动化。",
+            },
+            tags: ["mcp", "browser"],
+            author: "Chrome DevTools",
+            install: {
+              kind: "template",
+              spec: "chrome-devtools",
+              command:
+                "nextclaw mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest",
+            },
+            updatedAt: "2026-03-19T00:00:00.000Z",
+          },
+        ],
+      },
+    });
+
+    render(<McpMarketplacePage />);
+
+    expect(
+      screen.getByText(
+        "把 MCP 客户端接入 Chrome DevTools，用于浏览器检查与自动化。",
+      ),
+    ).toBeTruthy();
+  });
+
+  it("hides install button when an installed record matches by spec without catalog slug", () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 12,
+        totalPages: 1,
+        sort: "relevance",
+        items: [
+          {
+            id: "mcp-chrome-devtools",
+            slug: "chrome-devtools",
+            type: "mcp",
+            name: "Chrome DevTools MCP",
+            summary:
+              "Connect MCP clients to Chrome DevTools for browser inspection and automation.",
+            summaryI18n: {
+              en: "Connect MCP clients to Chrome DevTools for browser inspection and automation.",
+              zh: "把 MCP 客户端接入 Chrome DevTools，用于浏览器检查与自动化。",
+            },
+            tags: ["mcp", "browser"],
+            author: "Chrome DevTools",
+            install: {
+              kind: "template",
+              spec: "chrome-devtools",
+              command:
+                "nextclaw mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest",
+            },
+            updatedAt: "2026-03-19T00:00:00.000Z",
+          },
+        ],
+      },
+    });
+    mocks.installedQuery = createInstalledQuery({
+      data: {
+        type: "mcp",
+        total: 1,
+        specs: ["chrome-devtools"],
+        records: [
+          {
+            type: "mcp",
+            id: "chrome-devtools",
+            spec: "chrome-devtools",
+            label: "Chrome DevTools MCP",
+            enabled: true,
+            runtimeStatus: "enabled",
+            transport: "stdio",
+            scope: {
+              allAgents: true,
+              agents: [],
+            },
+          },
+        ],
+      },
+    });
+
+    render(<McpMarketplacePage />);
+
+    expect(screen.queryByText("Install")).toBeNull();
+    expect(screen.getByText("Disable")).toBeTruthy();
+  });
+});