@nextclaw/ui 0.12.24 → 0.12.25

package/src/features/marketplace/components/detail-doc/marketplace-detail-doc.test.ts

@@ -0,0 +1,40 @@
+import { buildGenericDetailDataUrl } from "@/features/marketplace/components/marketplace-detail-doc";
+
+function readDetailHtml(params: Parameters<typeof buildGenericDetailDataUrl>[0]) {
+  return decodeURIComponent(buildGenericDetailDataUrl(params));
+}
+
+describe("buildGenericDetailDataUrl", () => {
+  it("renders skill metadata and markdown content semantically", () => {
+    const html = readDetailHtml({
+      title: "Weather Skill",
+      typeLabel: "Skill",
+      spec: "@nextclaw/weather",
+      metadataRaw: "name: weather\ndescription: Local weather skill",
+      contentRaw: "# Weather Skill\n\nUse **weather** with `city`.\n\n- Local forecast\n- Severe alerts",
+    });
+
+    expect(html).toContain('<dl class="metadata-list">');
+    expect(html).toContain("<dt>name</dt><dd>weather</dd>");
+    expect(html).toContain("<h1>Weather Skill</h1>");
+    expect(html).toContain("<strong>weather</strong>");
+    expect(html).toContain("<code>city</code>");
+    expect(html).toContain("<li>Local forecast</li>");
+    expect(html).not.toContain('<pre class="code"># Weather Skill');
+  });
+
+  it("escapes marketplace content before rendering markdown", () => {
+    const html = readDetailHtml({
+      title: "Unsafe Skill",
+      typeLabel: "Skill",
+      spec: "@nextclaw/unsafe",
+      metadataRaw: '{"name":"unsafe","nested":{"script":"<script>alert(1)</script>"}}',
+      contentRaw: "[safe](https://example.com) <script>alert(1)</script>",
+    });
+
+    expect(html).toContain("<dt>nested</dt>");
+    expect(html).toContain("&lt;script&gt;alert(1)&lt;/script&gt;");
+    expect(html).toContain('<a href="https://example.com" target="_blank" rel="noopener noreferrer">safe</a>');
+    expect(html).not.toContain("<script>alert(1)</script>");
+  });
+});

package/src/features/marketplace/components/marketplace-catalog-grid.tsx

@@ -0,0 +1,114 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceManageAction,
+} from "@/shared/lib/api";
+import {
+  MarketplaceListCard,
+  type InstallState,
+  type ManageState,
+} from "@/features/marketplace/components/marketplace-list-card";
+import { MarketplaceListSkeleton } from "@/features/marketplace/components/marketplace-page-parts";
+import {
+  findInstalledRecordForItem,
+  type InstalledRenderEntry,
+} from "@/features/marketplace/components/marketplace-page-data";
+import { cn } from "@/shared/lib/utils";
+
+type MarketplaceCatalogGridProps = {
+  scope: "all" | "installed";
+  title: string;
+  summary: string;
+  showTitle: boolean;
+  showListSkeleton: boolean;
+  skeletonCardCount: number;
+  allItems: MarketplaceItemSummary[];
+  installedEntries: InstalledRenderEntry[];
+  installedRecordLookup: Map<string, MarketplaceInstalledRecord>;
+  language: string;
+  installState: InstallState;
+  manageState: ManageState;
+  onOpen: (item?: MarketplaceItemSummary, record?: MarketplaceInstalledRecord) => void;
+  onInstall: (item: MarketplaceItemSummary) => void;
+  onManage: (
+    action: MarketplaceManageAction,
+    record: MarketplaceInstalledRecord,
+  ) => void;
+};
+
+export function MarketplaceCatalogGrid(props: MarketplaceCatalogGridProps) {
+  const {
+    scope,
+    title,
+    summary,
+    showTitle,
+    showListSkeleton,
+    skeletonCardCount,
+    allItems,
+    installedEntries,
+    installedRecordLookup,
+    language,
+    installState,
+    manageState,
+    onOpen,
+    onInstall,
+    onManage,
+  } = props;
+
+  return (
+    <section className={cn("flex min-h-full flex-col", showTitle && "gap-3")}>
+      {showTitle && (
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="text-[14px] font-semibold text-gray-950">{title}</h3>
+          <span className="text-[12px] text-gray-500">{summary}</span>
+        </div>
+      )}
+
+      <div
+        data-testid={showListSkeleton ? "marketplace-list-skeleton" : undefined}
+        className={cn(
+          "grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3",
+          showListSkeleton && "min-h-0 flex-1 auto-rows-[104px] content-start",
+        )}
+      >
+        {showListSkeleton && (
+          <MarketplaceListSkeleton count={skeletonCardCount} />
+        )}
+
+        {!showListSkeleton &&
+          scope === "all" &&
+          allItems.map((item) => (
+            <MarketplaceListCard
+              key={item.id}
+              item={item}
+              record={findInstalledRecordForItem(item, installedRecordLookup)}
+              language={language}
+              installState={installState}
+              manageState={manageState}
+              onOpen={() =>
+                onOpen(item, findInstalledRecordForItem(item, installedRecordLookup))
+              }
+              onInstall={onInstall}
+              onManage={onManage}
+            />
+          ))}
+
+        {!showListSkeleton &&
+          scope === "installed" &&
+          installedEntries.map((entry) => (
+            <MarketplaceListCard
+              key={entry.key}
+              item={entry.item}
+              record={entry.record}
+              language={language}
+              installState={installState}
+              manageState={manageState}
+              onOpen={() => onOpen(entry.item, entry.record)}
+              onInstall={onInstall}
+              onManage={onManage}
+            />
+          ))}
+      </div>
+    </section>
+  );
+}

package/src/features/marketplace/components/marketplace-detail-doc.ts

@@ -1,11 +1,8 @@
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-}
+import {
+  escapeHtml,
+  renderDetailMarkdown,
+  renderDetailMetadata,
+} from "@/features/marketplace/components/detail-doc/marketplace-detail-doc-renderer";
 
 export function buildGenericDetailDataUrl(params: {
   title: string;
@@ -19,6 +16,7 @@ export function buildGenericDetailDataUrl(params: {
   sourceLabel?: string;
   tags?: string[];
   author?: string;
+  loading?: boolean;
 }): string {
   const {
     title,
@@ -32,12 +30,15 @@ export function buildGenericDetailDataUrl(params: {
     sourceLabel,
     tags,
     author,
+    loading,
   } = params;
   const metadata = metadataRaw?.trim() || "-";
   const content = contentRaw?.trim() || "-";
   const summary = rawSummary?.trim();
   const description = rawDescription?.trim();
   const shouldShowDescription = Boolean(description) && description !== summary;
+  const renderedMetadata = renderDetailMetadata(metadata);
+  const renderedContent = renderDetailMarkdown(content);
 
   const html = `<!doctype html>
 <html>
@@ -47,25 +48,72 @@ export function buildGenericDetailDataUrl(params: {
     <title>${escapeHtml(title)}</title>
     <style>
       :root { color-scheme: light; }
-      body { margin: 0; background: #f7f9fc; 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; box-shadow: 0 6px 20px rgba(30, 64, 175, 0.08); }
-      .hero h1 { margin: 0; font-size: 26px; }
-      .meta { margin-top: 8px; color: #475569; font-size: 13px; overflow-wrap: anywhere; word-break: break-word; }
-      .summary { margin-top: 14px; font-size: 14px; line-height: 1.7; color: #334155; }
-      .grid { display: grid; grid-template-columns: 260px 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; }
-      .card .body { padding: 12px 14px; font-size: 13px; color: #334155; line-height: 1.7; }
-      .code { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; margin: 0; }
+      body { margin: 0; background: #f9f8f5; color: #2f2212; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+      .wrap { max-width: 940px; margin: 0 auto; padding: 24px 20px 36px; }
+      .hero { border: 1px solid #f0e2c8; border-radius: 14px; background: linear-gradient(180deg, #fff9f1 0%, #ffffff 28%); padding: 18px; box-shadow: 0 1px 3px rgba(30, 20, 10, 0.05); }
+      .hero h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: 0; }
+      .meta { margin-top: 7px; color: #78644d; font-size: 12px; overflow-wrap: anywhere; word-break: break-word; }
+      .summary { margin: 12px 0 0; font-size: 13px; line-height: 1.65; color: #5f5142; }
+      .grid { display: grid; grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
+      .card { border: 1px solid #eee3d1; background: #fffdf9; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(30, 20, 10, 0.035); }
+      .card h2 { margin: 0; padding: 11px 13px; font-size: 12px; font-weight: 650; color: #3f472f; border-bottom: 1px solid #f1e7d4; background: #fffaf2; }
+      .card .body { padding: 12px 13px; font-size: 12px; color: #4e463d; line-height: 1.65; }
+      .code { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.55; margin: 0; }
+      .metadata-list { margin: 0; }
+      .metadata-list div { display: grid; grid-template-columns: minmax(72px, 0.36fr) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #f2eadc; }
+      .metadata-list div:last-child { border-bottom: 0; }
+      .metadata-list dt { color: #7a5a24; font-weight: 650; overflow-wrap: anywhere; }
+      .metadata-list dd { margin: 0; color: #4e463d; overflow-wrap: anywhere; }
+      .markdown { font-size: 13px; line-height: 1.68; }
+      .markdown > *:first-child { margin-top: 0; }
+      .markdown > *:last-child { margin-bottom: 0; }
+      .markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: 18px 0 8px; color: #2f2212; line-height: 1.25; letter-spacing: 0; }
+      .markdown h1 { font-size: 20px; }
+      .markdown h2 { font-size: 17px; }
+      .markdown h3 { font-size: 15px; }
+      .markdown h4 { font-size: 13px; }
+      .markdown p { margin: 10px 0; }
+      .markdown ul, .markdown ol { margin: 10px 0; padding-left: 20px; }
+      .markdown li { margin: 5px 0; }
+      .markdown blockquote { margin: 12px 0; padding: 8px 12px; border-left: 3px solid #d9b56f; border-radius: 8px; background: #fff7ea; color: #6d5841; }
+      .markdown code { border: 1px solid #eadcc6; border-radius: 5px; background: #fff7ea; padding: 1px 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #6b4b16; }
+      .markdown a { color: #5f6b45; text-decoration: none; font-weight: 600; }
+      .markdown a:hover { text-decoration: underline; }
+      .code-block { position: relative; margin: 12px 0; overflow: hidden; border: 1px solid #eadcc6; border-radius: 10px; background: #2f2a24; }
+      .code-block pre { margin: 0; overflow-x: auto; padding: 13px; }
+      .code-block code { border: 0; border-radius: 0; background: transparent; padding: 0; color: #f7efe3; }
+      .code-language { position: absolute; right: 10px; top: 8px; color: #d8c3a0; font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
       .tags { margin-top: 10px; }
-      .tag { display: inline-block; margin: 0 6px 6px 0; padding: 4px 9px; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-size: 11px; }
-      .source { color: #2563eb; text-decoration: none; overflow-wrap: anywhere; word-break: break-all; }
+      .tag { display: inline-block; margin: 0 6px 6px 0; padding: 4px 8px; border: 1px solid #ecd9b5; border-radius: 999px; background: #fff7ea; color: #7a5a24; font-size: 11px; }
+      .source { color: #5f6b45; text-decoration: none; overflow-wrap: anywhere; word-break: break-all; }
+      .source:hover { text-decoration: underline; }
+      .skeleton { display: block; border-radius: 8px; background: linear-gradient(90deg, #f0e6d6 0%, #fffaf2 42%, #f0e6d6 78%); background-size: 220% 100%; animation: shimmer 1.35s ease-in-out infinite; }
+      .detail-skeleton .hero { padding: 18px; }
+      .sk-title { width: 52%; height: 24px; }
+      .sk-meta { width: 78%; height: 12px; margin-top: 12px; }
+      .sk-line { height: 12px; margin-top: 12px; }
+      .sk-line.short { width: 62%; }
+      .sk-line.mid { width: 82%; }
+      .sk-body { height: 220px; margin: 13px; }
+      @keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
       @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
     </style>
   </head>
   <body>
-    <main class="wrap">
+    <main class="wrap${loading ? " detail-skeleton" : ""}"${loading ? ' aria-busy="true"' : ""}>
+      ${loading ? `
+      <section class="hero">
+        <span class="skeleton sk-title"></span>
+        <span class="skeleton sk-meta"></span>
+        <span class="skeleton sk-line mid"></span>
+        <span class="skeleton sk-line"></span>
+        <span class="skeleton sk-line short"></span>
+      </section>
+      <section class="grid">
+        <article class="card"><span class="skeleton sk-body"></span></article>
+        <article class="card"><span class="skeleton sk-body"></span></article>
+      </section>
+      ` : `
       <section class="hero">
         <h1>${escapeHtml(title)}</h1>
         <div class="meta">${escapeHtml(typeLabel)} · ${escapeHtml(spec)}${author ? ` · ${escapeHtml(author)}` : ""}</div>
@@ -78,13 +126,14 @@ export function buildGenericDetailDataUrl(params: {
       <section class="grid">
         <article class="card">
           <h2>Metadata</h2>
-          <div class="body"><pre class="code">${escapeHtml(metadata)}</pre></div>
+          <div class="body">${renderedMetadata}</div>
         </article>
         <article class="card">
           <h2>Content</h2>
-          <div class="body"><pre class="code">${escapeHtml(content)}</pre></div>
+          <div class="body markdown">${renderedContent}</div>
         </article>
       </section>
+      `}
     </main>
   </body>
 </html>`;

package/src/features/marketplace/components/marketplace-item-icon.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/shared/lib/utils";
+
+const MARKETPLACE_ITEM_ICON_COLORS = [
+  "bg-amber-600",
+  "bg-orange-500",
+  "bg-yellow-600",
+  "bg-emerald-600",
+  "bg-teal-600",
+  "bg-cyan-600",
+  "bg-stone-600",
+  "bg-rose-500",
+  "bg-violet-500",
+] as const;
+
+export function MarketplaceItemIcon(props: {
+  name?: string;
+  fallback: string;
+  className?: string;
+}) {
+  const { name, fallback, className } = props;
+  const displayName = name || fallback;
+  const letters = displayName.substring(0, 2).toUpperCase();
+
+  return (
+    <div
+      className={cn(
+        "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-semibold text-white",
+        getMarketplaceItemIconColor(displayName),
+        className,
+      )}
+    >
+      {letters}
+    </div>
+  );
+}
+
+function getMarketplaceItemIconColor(text: string) {
+  let hash = 0;
+  for (let index = 0; index < text.length; index++) {
+    hash = text.charCodeAt(index) + ((hash << 5) - hash);
+  }
+  return MARKETPLACE_ITEM_ICON_COLORS[
+    Math.abs(hash) % MARKETPLACE_ITEM_ICON_COLORS.length
+  ];
+}

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

@@ -13,8 +13,16 @@ import {
   buildLocaleFallbacks,
   pickLocalizedText,
 } from "@/features/marketplace/components/marketplace-localization";
+import { MarketplaceItemIcon } from "@/features/marketplace/components/marketplace-item-icon";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
+import {
+  CheckCircle2,
+  Download,
+  Power,
+  PowerOff,
+  Trash2,
+} from "lucide-react";
 
 export type InstallState = {
   installingSpecs: ReadonlySet<string>;
@@ -24,42 +32,22 @@ export type ManageState = {
   actionsByTarget: ReadonlyMap<string, MarketplaceManageAction>;
 };
 
-const ITEM_ICON_COLORS = [
-  "bg-amber-600",
-  "bg-orange-500",
-  "bg-yellow-600",
-  "bg-emerald-600",
-  "bg-teal-600",
-  "bg-cyan-600",
-  "bg-stone-600",
-  "bg-rose-500",
-  "bg-violet-500",
-] as const;
-
-function getAvatarColor(text: string) {
-  let hash = 0;
-  for (let i = 0; i < text.length; i++) {
-    hash = text.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return ITEM_ICON_COLORS[Math.abs(hash) % ITEM_ICON_COLORS.length];
-}
-
-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(
-        "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-semibold text-white",
-        colorClass,
-      )}
-    >
-      {letters}
-    </div>
-  );
-}
+type MarketplaceListCardActionProps = {
+  item?: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
+  pluginRecord?: MarketplaceInstalledRecord;
+  isInstalling: boolean;
+  isDisabled: boolean;
+  canUninstall: boolean;
+  busyAction?: MarketplaceManageAction;
+  busyForRecord: boolean;
+  language: string;
+  onInstall: (item: MarketplaceItemSummary) => void;
+  onManage: (
+    action: MarketplaceManageAction,
+    record: MarketplaceInstalledRecord,
+  ) => void;
+};
 
 function MarketplaceListCardMeta({
   title,
@@ -98,17 +86,144 @@ function MarketplaceListCardMeta({
         ) : null}
       </div>
 
+      <p className="line-clamp-2 text-left text-[12px] leading-relaxed text-gray-500/90">
+        {summary}
+      </p>
+    </TooltipProvider>
+  );
+}
+
+function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
+  const {
+    item,
+    record,
+    pluginRecord,
+    isInstalling,
+    isDisabled,
+    canUninstall,
+    busyAction,
+    busyForRecord,
+    language,
+    onInstall,
+    onManage,
+  } = props;
+  const hasActions = Boolean((item && !record) || pluginRecord || (record && canUninstall));
+
+  return (
+    <div
+      className={cn(
+        "relative flex h-8 shrink-0 items-center justify-end",
+        record ? "md:w-5" : "md:w-0",
+      )}
+    >
+      <div
+        className={cn(
+          "hidden items-center justify-end transition-opacity duration-150 md:flex",
+          hasActions && "group-hover:opacity-0 group-focus-within:opacity-0",
+        )}
+      >
+        {record ? (
+          <MarketplaceInstalledStatusIcon
+            disabled={isDisabled}
+            language={language}
+          />
+        ) : null}
+      </div>
+
+      <div
+        className={cn(
+          "flex w-max items-center justify-end gap-2 transition-opacity duration-150",
+          "opacity-100 md:pointer-events-none md:absolute md:right-0 md:opacity-0",
+          "md:group-hover:pointer-events-auto md:group-hover:opacity-100",
+          "md:group-focus-within:pointer-events-auto md:group-focus-within:opacity-100",
+        )}
+      >
+        {item && !record && (
+          <button
+            onClick={(event) => {
+              event.stopPropagation();
+              onInstall(item);
+            }}
+            disabled={isInstalling}
+            className="inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-xl bg-primary px-3 text-xs font-medium text-white transition-colors hover:bg-primary-600 disabled:opacity-50"
+          >
+            <Download className="h-3.5 w-3.5" />
+            {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 gap-1.5 whitespace-nowrap rounded-xl border border-gray-200/80 bg-white px-3 text-xs font-medium text-gray-600 transition-colors hover:border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          >
+            {isDisabled ? (
+              <Power className="h-3.5 w-3.5" />
+            ) : (
+              <PowerOff className="h-3.5 w-3.5" />
+            )}
+            {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 gap-1.5 whitespace-nowrap rounded-xl border border-gray-200/80 bg-white px-3 text-xs font-medium text-gray-500 transition-colors hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+            {busyAction === "uninstall"
+              ? t("marketplaceRemoving")
+              : t("marketplaceUninstall")}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MarketplaceInstalledStatusIcon(props: {
+  disabled: boolean;
+  language: string;
+}) {
+  const { disabled, language } = props;
+  const label = disabled
+    ? readLocalized({ zh: "已禁用", en: "Disabled" }, language)
+    : readLocalized({ zh: "已安装", en: "Installed" }, language);
+
+  return (
+    <TooltipProvider delayDuration={300}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <p className="line-clamp-1 text-left text-[12px] leading-relaxed text-gray-500/90">
-            {summary}
-          </p>
+          <span
+            aria-label={label}
+            className={cn(
+              "inline-flex h-5 w-5 items-center justify-center",
+              disabled ? "text-gray-400" : "text-emerald-700",
+            )}
+          >
+            {disabled ? (
+              <PowerOff className="h-4 w-4" />
+            ) : (
+              <CheckCircle2 className="h-4 w-4" />
+            )}
+          </span>
         </TooltipTrigger>
-        {summary ? (
-          <TooltipContent className="max-w-[400px] text-xs leading-relaxed">
-            {summary}
-          </TooltipContent>
-        ) : null}
+        <TooltipContent className="text-xs">{label}</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
@@ -171,7 +286,7 @@ export function MarketplaceListCard(props: {
       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 min-w-0 flex-1 gap-3">
-        <ItemIcon
+        <MarketplaceItemIcon
           name={title}
           fallback={spec || t("marketplaceTypeExtension")}
         />
@@ -180,54 +295,23 @@ export function MarketplaceListCard(props: {
         </div>
       </div>
 
-      <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>
+      <MarketplaceListCardActions
+        item={item}
+        record={record}
+        pluginRecord={pluginRecord}
+        isInstalling={isInstalling}
+        isDisabled={isDisabled}
+        canUninstall={canUninstall}
+        busyAction={busyAction}
+        busyForRecord={busyForRecord}
+        language={language}
+        onInstall={onInstall}
+        onManage={onManage}
+      />
     </article>
   );
 }
+
+function readLocalized(text: { zh: string; en: string }, language: string) {
+  return language.startsWith("zh") ? text.zh : text.en;
+}