feat(engine): 添加MCP连接管理和工具集成功能

- 集成MCP连接管理器，支持MCP服务器连接
- 添加多种内置工具：ClarifyTool、CronTool、DelegateTool、ExecuteCodeTool、
  PatchFileTool、ProcessTool、SendMessageTool、SpawnTool、TerminalTool、
  TodoTool、WebFetchTool、WebSearchTool、WriteFileTool等
- 实现工具注册和装配功能
- 添加技能选择上下文参数
- 支持思考模式控制参数thinking_enabled

feat(coordinator): 重构任务执行计划器参数命名

- 将learning_candidate_enabled重命名为allow_candidate_generation
- 更新TeamGraphScheduler中的参数传递
- 修改LocalAgentRunner中的相关参数处理
- 更新README文档中的相应描述

refactor(context): 标准化工具调用参数格式

- 添加_json导入用于参数序列化
- 实现_provider_tool_calls方法标准化OpenAI兼容的工具调用载荷
- 修复工具调用中参数非字符串类型的序列化问题

refactor(session): 优化消息历史记录过滤逻辑

- 修改get_messages_as_conversation为基于运行状态过滤消息
- 排除未完成、失败或错误结束的运行记录
- 改进对话历史的可见性控制机制

fix(store): 修复FTS索引重建逻辑

- 添加异常处理防止FTS索引创建失败
- 实现_rebuild_fts_index方法重新构建全文搜索索引
- 优化索引触发器和表的维护流程

app-instance/frontend/app/(app)/marketplace/page.tsx

@@ -1,439 +1,256 @@
 'use client';
 
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { AlertCircle, ArrowLeft, Check, Download, Loader2, Search, Star } from 'lucide-react';
+
 import {
-  Store,
-  RefreshCw,
-  Loader2,
-  AlertCircle,
-  Plus,
-  Trash2,
-  Download,
-  Check,
-  X,
-  Globe,
-  FolderOpen,
-} from 'lucide-react';
-import {
-  listMarketplaces,
-  addMarketplace,
-  removeMarketplace,
-  updateMarketplace,
-  listMarketplacePlugins,
-  installMarketplacePlugin,
-  uninstallPlugin,
+  getSkillHubDetail,
+  getSkillHubVersion,
+  installSkillHubSkill,
+  searchSkillHubSkills,
 } from '@/lib/api';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
-import type { Marketplace, MarketplacePlugin } from '@/types';
+import type { SkillHubSearchItem, SkillHubVersionResponse } from '@/types';
 import { pickAppText } from '@/lib/i18n/core';
 import { useAppI18n } from '@/lib/i18n/provider';
 
+type SortMode = 'relevance' | 'downloads' | 'newest';
+
+function publishedVersion(skill: SkillHubSearchItem | null): string {
+  return skill?.publishedVersion?.version || skill?.headlineVersion?.version || '';
+}
+
 export default function MarketplacePage() {
   const { locale } = useAppI18n();
-  const [marketplaces, setMarketplaces] = useState<Marketplace[]>([]);
-  const [selectedMarketplace, setSelectedMarketplace] = useState<string | null>(null);
-  const [plugins, setPlugins] = useState<MarketplacePlugin[]>([]);
+  const t = useCallback((zh: string, en: string) => pickAppText(locale, zh, en), [locale]);
+  const [query, setQuery] = useState('');
+  const [sort, setSort] = useState<SortMode>('newest');
+  const [starredOnly, setStarredOnly] = useState(false);
+  const [page, setPage] = useState(0);
+  const [items, setItems] = useState<SkillHubSearchItem[]>([]);
+  const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(true);
-  const [pluginsLoading, setPluginsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [showAddForm, setShowAddForm] = useState(false);
-  const [addSource, setAddSource] = useState('');
-  const [adding, setAdding] = useState(false);
-  const [actionPlugin, setActionPlugin] = useState<string | null>(null);
-  const [updatingMarketplace, setUpdatingMarketplace] = useState<string | null>(null);
+  const [selected, setSelected] = useState<SkillHubSearchItem | null>(null);
+  const [versionDetail, setVersionDetail] = useState<SkillHubVersionResponse | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [installing, setInstalling] = useState(false);
 
-  const loadMarketplaces = useCallback(async () => {
+  const load = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
-      const data = await listMarketplaces();
-      const list = Array.isArray(data) ? data : [];
-      setMarketplaces(list);
-      // Auto-select first marketplace if none selected or selected was removed
-      if (list.length > 0) {
-        setSelectedMarketplace((prev) => {
-          if (prev && list.some((m) => m.name === prev)) return prev;
-          return list[0].name;
-        });
-      } else {
-        setSelectedMarketplace(null);
-        setPlugins([]);
-      }
+      const result = await searchSkillHubSkills({ q: query, sort, page, size: 12 });
+      const nextItems = Array.isArray(result.items) ? result.items : [];
+      setItems(starredOnly ? nextItems.filter((item) => (item.starCount || 0) > 0) : nextItems);
+      setTotal(result.total || 0);
     } catch (err: any) {
-      setError(err.message || pickAppText(locale, '加载市场失败', 'Failed to load marketplaces'));
+      setError(err.message || t('加载 SkillHub 失败', 'Failed to load SkillHub'));
     } finally {
       setLoading(false);
     }
-  }, []);
-
-  const loadPlugins = useCallback(async (marketplaceName: string) => {
-    setPluginsLoading(true);
-    try {
-      const data = await listMarketplacePlugins(marketplaceName);
-      setPlugins(Array.isArray(data) ? data : []);
-    } catch (err: any) {
-      setError(err.message || pickAppText(locale, '加载插件失败', 'Failed to load plugins'));
-    } finally {
-      setPluginsLoading(false);
-    }
-  }, []);
+  }, [page, query, sort, starredOnly, t]);
 
   useEffect(() => {
-    loadMarketplaces();
-  }, [loadMarketplaces]);
+    void load();
+  }, [load]);
 
-  useEffect(() => {
-    if (selectedMarketplace) {
-      loadPlugins(selectedMarketplace);
-    }
-  }, [selectedMarketplace, loadPlugins]);
-
-  const handleAdd = async () => {
-    if (!addSource.trim()) return;
-    setAdding(true);
+  const openDetail = async (item: SkillHubSearchItem) => {
+    setSelected(item);
+    setVersionDetail(null);
+    setDetailLoading(true);
     setError(null);
     try {
-      const marketplace = await addMarketplace(addSource.trim());
-      setAddSource('');
-      setShowAddForm(false);
-      await loadMarketplaces();
-      setSelectedMarketplace(marketplace.name);
-    } catch (err: any) {
-      setError(err.message || pickAppText(locale, '添加市场失败', 'Failed to add the marketplace'));
-    } finally {
-      setAdding(false);
-    }
-  };
-
-  const handleRemove = async (name: string) => {
-    setError(null);
-    try {
-      await removeMarketplace(name);
-      if (selectedMarketplace === name) {
-        setSelectedMarketplace(null);
-        setPlugins([]);
-      }
-      await loadMarketplaces();
-    } catch (err: any) {
-      setError(err.message || pickAppText(locale, '移除市场失败', 'Failed to remove the marketplace'));
-    }
-  };
-
-  const handleUpdateMarketplace = async (name: string) => {
-    setUpdatingMarketplace(name);
-    setError(null);
-    try {
-      await updateMarketplace(name);
-      await loadPlugins(name);
-    } catch (err: any) {
-      setError(err.message || pickAppText(locale, '更新市场失败', 'Failed to update the marketplace'));
-    } finally {
-      setUpdatingMarketplace(null);
-    }
-  };
-
-  const handleUpdatePlugin = async (marketplaceName: string, pluginName: string) => {
-    setActionPlugin(pluginName);
-    setError(null);
-    try {
-      await installMarketplacePlugin(marketplaceName, pluginName);
-      await loadPlugins(marketplaceName);
-    } catch (err: any) {
-      setError(err.message || pickAppText(locale, '更新插件失败', 'Failed to update the plugin'));
-    } finally {
-      setActionPlugin(null);
-    }
-  };
-
-  const handleInstall = async (marketplaceName: string, pluginName: string) => {
-    setActionPlugin(pluginName);
-    setError(null);
-    try {
-      await installMarketplacePlugin(marketplaceName, pluginName);
-      await loadPlugins(marketplaceName);
-    } catch (err: any) {
-      setError(err.message || pickAppText(locale, '安装插件失败', 'Failed to install the plugin'));
-    } finally {
-      setActionPlugin(null);
-    }
-  };
-
-  const handleUninstall = async (pluginName: string) => {
-    setActionPlugin(pluginName);
-    setError(null);
-    try {
-      await uninstallPlugin(pluginName);
-      if (selectedMarketplace) {
-        await loadPlugins(selectedMarketplace);
+      const detail = await getSkillHubDetail(item.namespace, item.slug);
+      setSelected(detail);
+      const version = publishedVersion(detail);
+      if (version) {
+        setVersionDetail(await getSkillHubVersion(detail.namespace, detail.slug, version));
       }
     } catch (err: any) {
-      setError(err.message || pickAppText(locale, '卸载插件失败', 'Failed to uninstall the plugin'));
+      setError(err.message || t('加载技能详情失败', 'Failed to load skill details'));
     } finally {
-      setActionPlugin(null);
+      setDetailLoading(false);
     }
   };
 
-  const handleRefresh = async () => {
-    await loadMarketplaces();
-    if (selectedMarketplace) {
-      await loadPlugins(selectedMarketplace);
+  const installSelected = async () => {
+    if (!selected) return;
+    setInstalling(true);
+    setError(null);
+    try {
+      const result = await installSkillHubSkill(selected.namespace, selected.slug, publishedVersion(selected));
+      setSelected({ ...selected, installed: true, installed_version: result.version });
+      await load();
+    } catch (err: any) {
+      setError(err.message || t('安装技能失败', 'Failed to install skill'));
+    } finally {
+      setInstalling(false);
     }
   };
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-20">
-        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
+  const totalPages = useMemo(() => Math.max(1, Math.ceil(total / 12)), [total]);
 
   return (
-    <div className="max-w-5xl mx-auto p-6 space-y-6">
-      {/* Page header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold flex items-center gap-2">
-            <Store className="w-6 h-6" />
-            {pickAppText(locale, '插件市场', 'Plugin marketplace')}
-          </h1>
-          <p className="text-sm text-muted-foreground mt-1">
-            {pickAppText(locale, '浏览并安装已注册市场中的插件', 'Browse and install plugins from registered marketplaces')}
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            onClick={() => setShowAddForm((v) => !v)}
-            variant="outline"
-            size="sm"
-          >
-            <Plus className="w-4 h-4 mr-2" />
-            {pickAppText(locale, '添加市场', 'Add marketplace')}
+    <div className="mx-auto max-w-7xl p-6">
+      <div className="mx-auto mb-10 max-w-4xl">
+        <form
+          className="flex gap-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            setPage(0);
+            void load();
+          }}
+        >
+          <div className="relative flex-1">
+            <Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder={t('搜索技能...', 'Search skills...')}
+              className="h-14 rounded-2xl pl-12 text-base"
+            />
+          </div>
+          <Button type="submit" className="h-14 rounded-2xl px-10 text-base">
+            {t('搜索', 'Search')}
           </Button>
-          <Button onClick={handleRefresh} variant="outline" size="sm">
-            <RefreshCw className="w-4 h-4 mr-2" />
-            {pickAppText(locale, '刷新', 'Refresh')}
-          </Button>
-        </div>
+        </form>
       </div>
 
-      {/* Error */}
       {error && (
-        <Card className="border-destructive">
-          <CardContent className="pt-6">
-            <div className="flex items-center justify-between gap-2 text-destructive text-sm">
-              <div className="flex items-center gap-2">
-                <AlertCircle className="w-4 h-4 shrink-0" />
-                {error}
+        <Card className="mb-6 border-destructive">
+          <CardContent className="flex items-center gap-2 pt-6 text-sm text-destructive">
+            <AlertCircle className="h-4 w-4" />
+            {error}
+          </CardContent>
+        </Card>
+      )}
+
+      {selected ? (
+        <div className="space-y-5">
+          <Button variant="ghost" onClick={() => setSelected(null)}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            {t('返回搜索', 'Back to search')}
+          </Button>
+          <Card>
+            <CardHeader>
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div>
+                  <div className="mb-2 flex items-center gap-2">
+                    <Badge variant="outline">@{selected.namespace}</Badge>
+                    {selected.installed && (
+                      <Badge variant="secondary" className="gap-1">
+                        <Check className="h-3 w-3" />
+                        {t('已安装', 'Installed')}
+                      </Badge>
+                    )}
+                  </div>
+                  <CardTitle className="text-2xl">{selected.displayName || selected.slug}</CardTitle>
+                  <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">{selected.summary}</p>
+                </div>
+                <Button onClick={installSelected} disabled={installing || detailLoading}>
+                  {installing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Download className="mr-2 h-4 w-4" />}
+                  {selected.installed ? t('重新安装/更新', 'Reinstall/update') : t('安装', 'Install')}
+                </Button>
               </div>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="shrink-0 h-6 w-6 p-0"
-                onClick={() => setError(null)}
-              >
-                <X className="w-4 h-4" />
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Add marketplace form */}
-      {showAddForm && (
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-2">
-              <Input
-                placeholder={pickAppText(locale, '本地路径或 Git 地址（例如 /path/to/marketplace 或 https://github.com/...）', 'Local path or Git URL (for example /path/to/marketplace or https://github.com/...)')}
-                value={addSource}
-                onChange={(e) => setAddSource(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') handleAdd();
-                }}
-                disabled={adding}
-                className="flex-1"
-              />
-              <Button onClick={handleAdd} disabled={adding || !addSource.trim()} size="sm">
-                {adding ? (
-                  <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                ) : (
-                  <Plus className="w-4 h-4 mr-2" />
-                )}
-                {pickAppText(locale, '添加', 'Add')}
-              </Button>
-              <Button
-                onClick={() => {
-                  setShowAddForm(false);
-                  setAddSource('');
-                }}
-                variant="ghost"
-                size="sm"
-              >
-                {pickAppText(locale, '取消', 'Cancel')}
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Marketplace tabs */}
-      {marketplaces.length > 0 && (
-        <div className="flex items-center gap-2 flex-wrap">
-          {marketplaces.map((marketplace) => (
-            <div key={marketplace.name} className="flex items-center gap-0.5">
-              <Button
-                variant={selectedMarketplace === marketplace.name ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setSelectedMarketplace(marketplace.name)}
-                className="gap-1.5"
-              >
-                {marketplace.type === 'git' ? (
-                  <Globe className="w-3.5 h-3.5" />
-                ) : (
-                  <FolderOpen className="w-3.5 h-3.5" />
-                )}
-                {marketplace.name}
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 w-8 p-0 text-muted-foreground hover:text-primary"
-                disabled={updatingMarketplace === marketplace.name}
-                onClick={() => handleUpdateMarketplace(marketplace.name)}
-                title={pickAppText(locale, '更新市场', 'Update marketplace')}
-              >
-                {updatingMarketplace === marketplace.name ? (
-                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                ) : (
-                  <RefreshCw className="w-3.5 h-3.5" />
-                )}
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive"
-                onClick={() => handleRemove(marketplace.name)}
-              >
-                <Trash2 className="w-3.5 h-3.5" />
-              </Button>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Empty state */}
-      {marketplaces.length === 0 && !error && (
-        <Card>
-          <CardContent className="py-16 text-center text-muted-foreground">
-            <Store className="w-12 h-12 mx-auto mb-4 opacity-30" />
-            <p className="font-medium">{pickAppText(locale, '还没有注册任何市场', 'No marketplaces are registered yet')}</p>
-            <p className="text-sm mt-2 max-w-sm mx-auto">
-              {pickAppText(locale, '点击上方的', 'Use the')}<strong>{pickAppText(locale, '添加市场', 'Add marketplace')}</strong>{pickAppText(locale, '，填入本地路径或 Git 地址即可开始使用。', ' action above and provide a local path or Git URL to get started.')}
-            </p>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Plugin list */}
-      {selectedMarketplace && (
-        <>
-          {pluginsLoading ? (
-            <div className="flex items-center justify-center py-12">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : plugins.length === 0 ? (
-            <Card>
-              <CardContent className="py-12 text-center text-muted-foreground">
-                <Store className="w-10 h-10 mx-auto mb-3 opacity-30" />
-                <p className="font-medium">{pickAppText(locale, '暂无可用插件', 'No plugins available')}</p>
-                <p className="text-sm mt-1">{pickAppText(locale, '这个市场里暂时还没有插件。', 'There are no plugins in this marketplace yet.')}</p>
-              </CardContent>
-            </Card>
-          ) : (
-            <div className="space-y-4">
-              {plugins.map((plugin) => (
-                <Card key={plugin.name}>
-                  <CardHeader className="pb-3">
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 flex-wrap">
-                          <CardTitle className="text-base font-semibold">
-                            {plugin.name}
-                          </CardTitle>
-                          {plugin.installed && (
-                            <Badge variant="secondary" className="text-xs gap-1">
-                              <Check className="w-3 h-3" />
-                              {pickAppText(locale, '已安装', 'Installed')}
-                            </Badge>
-                          )}
-                        </div>
-                        {plugin.description && (
-                          <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
-                            {plugin.description}
-                          </p>
-                        )}
-                      </div>
-                      <div className="shrink-0 flex items-center gap-2">
-                        {plugin.installed ? (
-                          <>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              disabled={actionPlugin === plugin.name}
-                              onClick={() =>
-                                handleUpdatePlugin(plugin.marketplace_name, plugin.name)
-                              }
-                            >
-                              {actionPlugin === plugin.name ? (
-                                <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                              ) : (
-                                <RefreshCw className="w-4 h-4 mr-2" />
-                              )}
-                              {pickAppText(locale, '更新', 'Update')}
-                            </Button>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              disabled={actionPlugin === plugin.name}
-                              onClick={() => handleUninstall(plugin.name)}
-                            >
-                              {actionPlugin === plugin.name ? (
-                                <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                              ) : (
-                                <Trash2 className="w-4 h-4 mr-2" />
-                              )}
-                              {pickAppText(locale, '卸载', 'Uninstall')}
-                            </Button>
-                          </>
-                        ) : (
-                          <Button
-                            variant="default"
-                            size="sm"
-                            disabled={actionPlugin === plugin.name}
-                            onClick={() =>
-                              handleInstall(plugin.marketplace_name, plugin.name)
-                            }
-                          >
-                            {actionPlugin === plugin.name ? (
-                              <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                            ) : (
-                              <Download className="w-4 h-4 mr-2" />
-                            )}
-                            {pickAppText(locale, '安装', 'Install')}
-                          </Button>
-                        )}
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {detailLoading ? (
+                <div className="flex justify-center py-10">
+                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                </div>
+              ) : (
+                <>
+                  <div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
+                    <Badge variant="outline">v{publishedVersion(selected) || '-'}</Badge>
+                    <span>{t('下载', 'Downloads')}: {selected.downloadCount || 0}</span>
+                    <span>{t('收藏', 'Stars')}: {selected.starCount || 0}</span>
+                  </div>
+                  <div className="grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
+                    <div className="rounded-lg border border-border bg-muted/20 p-4">
+                      <div className="mb-2 text-sm font-medium">SKILL.md</div>
+                      <pre className="max-h-[520px] overflow-auto whitespace-pre-wrap text-xs">
+                        {versionDetail?.detail?.parsedMetadataJson || t('暂无预览', 'No preview available')}
+                      </pre>
+                    </div>
+                    <div className="rounded-lg border border-border bg-muted/20 p-4">
+                      <div className="mb-3 text-sm font-medium">{t('版本文件', 'Version files')}</div>
+                      <div className="space-y-2">
+                        {(versionDetail?.files || []).map((file) => (
+                          <div key={file.filePath} className="flex items-center justify-between gap-3 rounded-md bg-background px-3 py-2 text-xs">
+                            <span className="break-all font-mono">{file.filePath}</span>
+                            <span className="shrink-0 text-muted-foreground">{file.fileSize} B</span>
+                          </div>
+                        ))}
                       </div>
                     </div>
+                  </div>
+                </>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          <div className="flex flex-wrap items-center gap-3">
+            <span className="text-sm font-medium text-muted-foreground">{t('排序：', 'Sort:')}</span>
+            {([
+              ['relevance', t('相关性', 'Relevance')],
+              ['downloads', t('下载量', 'Downloads')],
+              ['newest', t('最新', 'Newest')],
+            ] as Array<[SortMode, string]>).map(([value, label]) => (
+              <Button key={value} size="sm" variant={sort === value ? 'default' : 'outline'} onClick={() => { setSort(value); setPage(0); }}>
+                {label}
+              </Button>
+            ))}
+            <span className="ml-4 text-sm font-medium text-muted-foreground">{t('筛选：', 'Filter:')}</span>
+            <Button size="sm" variant={starredOnly ? 'default' : 'outline'} onClick={() => setStarredOnly((value) => !value)}>
+              <Star className="mr-2 h-4 w-4" />
+              {t('只看已收藏', 'Starred only')}
+            </Button>
+          </div>
+
+          {loading ? (
+            <div className="flex justify-center py-20">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+              {items.map((item) => (
+                <Card key={`${item.namespace}/${item.slug}`} className="cursor-pointer transition hover:border-primary" onClick={() => void openDetail(item)}>
+                  <CardHeader>
+                    <div className="flex items-start justify-between gap-3">
+                      <CardTitle className="text-xl">{item.displayName || item.slug}</CardTitle>
+                      <Badge variant="outline">@{item.namespace}</Badge>
+                    </div>
                   </CardHeader>
+                  <CardContent className="space-y-5">
+                    <p className="line-clamp-3 min-h-[4.5rem] text-sm leading-6 text-muted-foreground">{item.summary}</p>
+                    <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+                      <Badge variant="secondary">v{publishedVersion(item) || '-'}</Badge>
+                      <span>{item.downloadCount || 0}</span>
+                      <span>{item.starCount || 0}</span>
+                      {item.installed && <Badge variant="outline">{t('已安装', 'Installed')}</Badge>}
+                    </div>
+                  </CardContent>
                 </Card>
               ))}
             </div>
           )}
-        </>
+
+          <div className="flex items-center justify-center gap-3">
+            <Button variant="outline" disabled={page <= 0} onClick={() => setPage((value) => Math.max(0, value - 1))}>
+              {t('上一页', 'Previous')}
+            </Button>
+            <span className="text-sm text-muted-foreground">{page + 1} / {totalPages}</span>
+            <Button variant="outline" disabled={page + 1 >= totalPages} onClick={() => setPage((value) => value + 1)}>
+              {t('下一页', 'Next')}
+            </Button>
+          </div>
+        </div>
       )}
     </div>
   );