@nextclaw/ui 0.12.9 → 0.12.11

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

@@ -0,0 +1,414 @@
+/* eslint-disable max-lines-per-function */
+import { useEffect, useMemo, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceMcpDoctorResult,
+  MarketplaceSort,
+} from "@/api/types";
+import {
+  fetchMcpMarketplaceContent,
+  doctorMcpMarketplaceItem,
+} from "@/api/mcp-marketplace";
+import { PageHeader, PageLayout } from "@/components/layout/page-layout";
+import {
+  MarketplaceInfiniteScrollStatus,
+  MarketplaceListSkeleton,
+} from "@/components/marketplace/marketplace-page-parts";
+import { buildLocaleFallbacks } from "@/components/marketplace/marketplace-localization";
+import { McpMarketplaceCard } from "@/components/marketplace/mcp/mcp-marketplace-card";
+import {
+  buildDocDataUrl,
+  buildInstalledRecordLookup,
+  findInstalledRecordForItem,
+  readSummary,
+} from "@/components/marketplace/mcp/mcp-marketplace-doc";
+import {
+  DoctorDialog,
+  InstallDialog,
+} from "@/components/marketplace/mcp/mcp-marketplace-dialogs";
+import { Tabs } from "@/components/ui/tabs-custom";
+import { Input } from "@/components/ui/input";
+import { NoticeCard } from "@/components/ui/notice-card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useConfirmDialog } from "@/hooks/useConfirmDialog";
+import {
+  useInstallMcpMarketplaceItem,
+  useManageMcpMarketplaceItem,
+  useMcpMarketplaceInstalled,
+  useMcpMarketplaceItems,
+} from "@/hooks/useMcpMarketplace";
+import { useDocBrowser } from "@/components/doc-browser";
+import { useI18n } from "@/components/providers/I18nProvider";
+import { t } from "@/lib/i18n";
+import { useInfiniteScrollLoader } from "@/hooks/use-infinite-scroll-loader";
+
+type ScopeType = "catalog" | "installed";
+
+const PAGE_SIZE = 12;
+
+export function McpMarketplacePage() {
+  const [scope, setScope] = useState<ScopeType>("catalog");
+  const [searchText, setSearchText] = useState("");
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<MarketplaceSort>("relevance");
+  const [installingItem, setInstallingItem] =
+    useState<MarketplaceItemSummary | null>(null);
+  const [doctorTarget, setDoctorTarget] = useState<string | null>(null);
+  const [doctorResult, setDoctorResult] =
+    useState<MarketplaceMcpDoctorResult | null>(null);
+  const { language } = useI18n();
+  const docBrowser = useDocBrowser();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const localeFallbacks = useMemo(
+    () => buildLocaleFallbacks(language),
+    [language],
+  );
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setQuery(searchText.trim());
+    }, 250);
+    return () => window.clearTimeout(timer);
+  }, [searchText]);
+
+  const itemsQuery = useMcpMarketplaceItems({
+    q: query || undefined,
+    sort,
+    pageSize: PAGE_SIZE,
+  });
+  const installedQuery = useMcpMarketplaceInstalled();
+
+  const infiniteScroll = useInfiniteScrollLoader({
+    disabled:
+      scope !== "catalog" ||
+      itemsQuery.isError ||
+      !itemsQuery.hasNextPage ||
+      itemsQuery.isFetchingNextPage,
+    onLoadMore: () => itemsQuery.fetchNextPage(),
+    watchValue: `${scope}:${query}:${sort}:${itemsQuery.data?.loadedItems ?? 0}:${itemsQuery.data?.loadedPages ?? 0}`,
+  });
+  const { containerRef, sentinelRef } = infiniteScroll;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container && typeof container.scrollTo === "function") {
+      container.scrollTo({ top: 0 });
+    }
+  }, [containerRef, query, scope, sort]);
+
+  const installMutation = useInstallMcpMarketplaceItem();
+  const manageMutation = useManageMcpMarketplaceItem();
+  const doctorMutation = useMutation({
+    mutationFn: doctorMcpMarketplaceItem,
+    onSuccess: (result, name) => {
+      setDoctorTarget(name);
+      setDoctorResult(result);
+    },
+  });
+
+  const installedRecordLookup = useMemo(() => {
+    return buildInstalledRecordLookup(installedQuery.data?.records ?? []);
+  }, [installedQuery.data?.records]);
+
+  const installedRecords = useMemo(() => {
+    const entries = installedQuery.data?.records ?? [];
+    return entries.filter((record) => {
+      const text = [
+        record.id ?? "",
+        record.label ?? "",
+        record.catalogSlug ?? "",
+        record.description ?? "",
+        record.descriptionZh ?? "",
+      ]
+        .join(" ")
+        .toLowerCase();
+      return query ? text.includes(query.toLowerCase()) : true;
+    });
+  }, [installedQuery.data?.records, query]);
+
+  const openDoc = async (
+    item?: MarketplaceItemSummary,
+    record?: MarketplaceInstalledRecord,
+  ) => {
+    const title = item?.name ?? record?.label ?? record?.id ?? "MCP";
+    const summary = readSummary(localeFallbacks, item, record);
+    if (!item) {
+      const url = buildDocDataUrl(
+        title,
+        JSON.stringify(record ?? {}, null, 2),
+        t("marketplaceInstalledLocalSummary"),
+        record?.docsUrl,
+        summary,
+      );
+      docBrowser.open(url, { newTab: true, title, kind: "content" });
+      return;
+    }
+    try {
+      const content = await fetchMcpMarketplaceContent(item.slug);
+      const url = buildDocDataUrl(
+        title,
+        content.metadataRaw || JSON.stringify(item, null, 2),
+        content.bodyRaw || content.raw,
+        content.sourceUrl,
+        summary,
+      );
+      docBrowser.open(url, { newTab: true, title, kind: "content" });
+    } catch (error) {
+      const url = buildDocDataUrl(
+        title,
+        JSON.stringify(
+          { error: error instanceof Error ? error.message : String(error) },
+          null,
+          2,
+        ),
+        summary,
+        undefined,
+        summary,
+      );
+      docBrowser.open(url, { newTab: true, title, kind: "content" });
+    }
+  };
+
+  const handleInstall = async (payload: {
+    name: string;
+    allAgents: boolean;
+    inputs: Record<string, string>;
+  }) => {
+    if (!installingItem) {
+      return;
+    }
+    await installMutation.mutateAsync({
+      spec: installingItem.slug,
+      name: payload.name.trim(),
+      allAgents: payload.allAgents,
+      inputs: payload.inputs,
+    });
+    setInstallingItem(null);
+  };
+
+  const handleManage = async (
+    action: "enable" | "disable" | "remove",
+    record: MarketplaceInstalledRecord,
+  ) => {
+    const target = record.id || record.spec;
+    if (!target) {
+      return;
+    }
+    if (action === "remove") {
+      const confirmed = await confirm({
+        title: `${t("marketplaceMcpRemoveTitle")} ${target}?`,
+        description: t("marketplaceMcpRemoveDescription"),
+        confirmLabel: t("marketplaceMcpRemove"),
+        variant: "destructive",
+      });
+      if (!confirmed) {
+        return;
+      }
+    }
+    await manageMutation.mutateAsync({
+      action,
+      id: target,
+      spec: record.spec,
+    });
+  };
+
+  return (
+    <PageLayout className="flex h-full min-h-0 flex-col pb-0">
+      <PageHeader
+        title={t("marketplaceMcpPageTitle")}
+        description={t("marketplaceMcpPageDescription")}
+      />
+
+      <Tabs
+        tabs={[
+          { id: "catalog", label: t("marketplaceMcpTabCatalog") },
+          {
+            id: "installed",
+            label: t("marketplaceMcpTabInstalled"),
+            count: installedQuery.data?.total ?? 0,
+          },
+        ]}
+        activeTab={scope}
+        onChange={(value) => setScope(value as ScopeType)}
+        className="mb-4"
+      />
+
+      <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <Input
+          value={searchText}
+          onChange={(event) => setSearchText(event.target.value)}
+          placeholder={t("marketplaceMcpSearchPlaceholder")}
+          className="md:max-w-sm"
+        />
+
+        <Select
+          value={sort}
+          onValueChange={(value) => setSort(value as MarketplaceSort)}
+        >
+          <SelectTrigger className="h-9 w-[180px] rounded-lg">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="relevance">
+              {t("marketplaceSortRelevance")}
+            </SelectItem>
+            <SelectItem value="updated">
+              {t("marketplaceSortUpdated")}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <section className="flex min-h-0 flex-1 flex-col">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-gray-900">
+            {scope === "catalog"
+              ? t("marketplaceMcpSectionCatalog")
+              : t("marketplaceMcpSectionInstalled")}
+          </h3>
+          <span className="text-xs text-gray-500">
+            {scope === "catalog"
+              ? (itemsQuery.data?.total ?? 0)
+              : (installedQuery.data?.total ?? 0)}
+          </span>
+        </div>
+
+        <div
+          ref={containerRef}
+          className="min-h-0 flex-1 overflow-y-auto pr-1"
+          aria-busy={itemsQuery.isLoading || itemsQuery.isFetchingNextPage}
+        >
+          <div className="grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3">
+            {scope === "catalog" && itemsQuery.isLoading && (
+              <MarketplaceListSkeleton count={6} />
+            )}
+
+            {scope === "catalog" &&
+              !itemsQuery.isLoading &&
+              (itemsQuery.data?.items ?? []).map((item) => {
+                const installed = findInstalledRecordForItem(
+                  item,
+                  installedRecordLookup,
+                );
+                return (
+                  <McpMarketplaceCard
+                    key={item.id}
+                    item={item}
+                    record={installed}
+                    localeFallbacks={localeFallbacks}
+                    onOpen={() => void openDoc(item, installed)}
+                    onInstall={() => setInstallingItem(item)}
+                    onToggle={
+                      installed
+                        ? () =>
+                            void handleManage(
+                              installed.enabled === false
+                                ? "enable"
+                                : "disable",
+                              installed,
+                            )
+                        : undefined
+                    }
+                    onDoctor={
+                      installed
+                        ? () => {
+                            setDoctorTarget(installed.id ?? null);
+                            setDoctorResult(null);
+                            void doctorMutation.mutateAsync(installed.id ?? "");
+                          }
+                        : undefined
+                    }
+                    onRemove={
+                      installed
+                        ? () => void handleManage("remove", installed)
+                        : undefined
+                    }
+                  />
+                );
+              })}
+            {scope === "installed" &&
+              installedRecords.map((record) => (
+                <McpMarketplaceCard
+                  key={record.id ?? record.spec}
+                  record={record}
+                  localeFallbacks={localeFallbacks}
+                  onOpen={() => void openDoc(undefined, record)}
+                  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)}
+                />
+              ))}
+          </div>
+
+          {scope === "catalog" && itemsQuery.isError && (
+            <NoticeCard
+              tone="danger"
+              title={t("marketplaceMcpSectionCatalog")}
+              description={itemsQuery.error.message}
+            />
+          )}
+          {scope === "installed" && installedQuery.isError && (
+            <NoticeCard
+              tone="danger"
+              title={t("marketplaceMcpSectionInstalled")}
+              description={installedQuery.error.message}
+            />
+          )}
+          {scope === "catalog" &&
+            !itemsQuery.isLoading &&
+            (itemsQuery.data?.items?.length ?? 0) === 0 && (
+              <div className="py-8 text-center text-sm text-gray-500">
+                {t("marketplaceNoMcp")}
+              </div>
+            )}
+          {scope === "installed" && installedRecords.length === 0 && (
+            <div className="py-8 text-center text-sm text-gray-500">
+              {t("marketplaceNoInstalledMcp")}
+            </div>
+          )}
+
+          {scope === "catalog" && !itemsQuery.isError && (
+            <MarketplaceInfiniteScrollStatus
+              hasMore={Boolean(itemsQuery.hasNextPage)}
+              loading={itemsQuery.isFetchingNextPage}
+              sentinelRef={sentinelRef}
+            />
+          )}
+        </div>
+      </section>
+
+      <InstallDialog
+        item={installingItem}
+        open={Boolean(installingItem)}
+        pending={installMutation.isPending}
+        onOpenChange={(open) => !open && setInstallingItem(null)}
+        onSubmit={handleInstall}
+      />
+      <DoctorDialog
+        open={Boolean(doctorTarget)}
+        targetName={doctorTarget}
+        result={doctorResult}
+        pending={doctorMutation.isPending}
+        onOpenChange={(open) => !open && setDoctorTarget(null)}
+      />
+      <ConfirmDialog />
+    </PageLayout>
+  );
+}

package/src/components/ui/notice-card.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const noticeCardVariants = cva("rounded-2xl border px-4 py-3", {
+  variants: {
+    tone: {
+      neutral: "border-gray-200 bg-gray-50 text-gray-900",
+      success: "border-emerald-200 bg-emerald-50 text-emerald-900",
+      warning: "border-amber-200 bg-amber-50 text-amber-900",
+      danger: "border-rose-200 bg-rose-50 text-rose-700",
+      info: "border-primary/20 bg-primary/10 text-primary",
+    },
+    borderStyle: {
+      solid: "",
+      dashed: "border-dashed",
+    },
+  },
+  defaultVariants: {
+    tone: "neutral",
+    borderStyle: "solid",
+  },
+});
+
+const titleClassMap: Record<
+  NonNullable<VariantProps<typeof noticeCardVariants>["tone"]>,
+  string
+> = {
+  neutral: "text-gray-900",
+  success: "text-emerald-800",
+  warning: "text-amber-900",
+  danger: "text-rose-700",
+  info: "text-primary",
+};
+
+const descriptionClassMap: Record<
+  NonNullable<VariantProps<typeof noticeCardVariants>["tone"]>,
+  string
+> = {
+  neutral: "text-gray-600",
+  success: "text-emerald-700",
+  warning: "text-amber-800",
+  danger: "text-rose-700",
+  info: "text-primary/90",
+};
+
+export interface NoticeCardProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof noticeCardVariants> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export const NoticeCard = React.forwardRef<HTMLDivElement, NoticeCardProps>(
+  (
+    {
+      className,
+      tone = "neutral",
+      borderStyle = "solid",
+      title,
+      description,
+      icon,
+      actions,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const resolvedTone = tone ?? "neutral";
+    const hasHeader =
+      Boolean(title) ||
+      Boolean(description) ||
+      Boolean(icon) ||
+      Boolean(actions);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          noticeCardVariants({ tone: resolvedTone, borderStyle }),
+          className,
+        )}
+        {...props}
+      >
+        {hasHeader ? (
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <div className="flex items-start gap-2">
+                {icon ? <div className="mt-0.5 shrink-0">{icon}</div> : null}
+                <div className="min-w-0 flex-1">
+                  {title ? (
+                    <p
+                      className={cn(
+                        "text-sm font-medium",
+                        titleClassMap[resolvedTone],
+                      )}
+                    >
+                      {title}
+                    </p>
+                  ) : null}
+                  {description ? (
+                    <p
+                      className={cn(
+                        title ? "mt-1" : "",
+                        "text-sm leading-6",
+                        descriptionClassMap[resolvedTone],
+                      )}
+                    >
+                      {description}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+            {actions ? <div className="shrink-0">{actions}</div> : null}
+          </div>
+        ) : null}
+        {children ? (
+          <div className={cn(hasHeader ? "mt-3" : "")}>{children}</div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+NoticeCard.displayName = "NoticeCard";

package/src/components/ui/setting-row.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const settingRowVariants = cva(
+  "flex items-start justify-between gap-4 rounded-xl border p-4",
+  {
+    variants: {
+      tone: {
+        default: "border-gray-200 bg-white",
+        muted: "border-gray-200 bg-gray-50",
+      },
+    },
+    defaultVariants: {
+      tone: "default",
+    },
+  },
+);
+
+export interface SettingRowProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof settingRowVariants> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  control?: React.ReactNode;
+}
+
+export const SettingRow = React.forwardRef<HTMLDivElement, SettingRowProps>(
+  (
+    { className, tone, title, description, control, children, ...props },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      className={cn(settingRowVariants({ tone }), className)}
+      {...props}
+    >
+      <div className="min-w-0 flex-1 space-y-2">
+        <div className="text-sm font-medium text-gray-900">{title}</div>
+        {description ? (
+          <p className="text-sm leading-6 text-gray-500">{description}</p>
+        ) : null}
+        {children}
+      </div>
+      {control ? <div className="shrink-0">{control}</div> : null}
+    </div>
+  ),
+);
+
+SettingRow.displayName = "SettingRow";

package/src/components/ui/tag-chip.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const tagChipVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium",
+  {
+    variants: {
+      tone: {
+        subtle: "border-gray-200 bg-gray-50 text-gray-600",
+        neutral: "border-gray-200 bg-white text-gray-600",
+        success: "border-emerald-200 bg-emerald-50 text-emerald-700",
+        warning: "border-amber-200 bg-amber-50 text-amber-800",
+        danger: "border-rose-200 bg-rose-50 text-rose-600",
+        info: "border-primary/20 bg-primary/10 text-primary",
+      },
+    },
+    defaultVariants: {
+      tone: "subtle",
+    },
+  },
+);
+
+export interface TagChipProps
+  extends
+    React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof tagChipVariants> {}
+
+export const TagChip = React.forwardRef<HTMLSpanElement, TagChipProps>(
+  ({ className, tone, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(tagChipVariants({ tone }), className)}
+      {...props}
+    />
+  ),
+);
+
+TagChip.displayName = "TagChip";

package/src/components/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        "flex min-h-28 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+
+Textarea.displayName = "Textarea";