@zshuangmu/agenthub 0.4.14 → 0.4.15

package/README.md

@@ -2,16 +2,16 @@
 
 # 🤖 AgentHub
 
-**OpenClaw Agent 的打包、发布与分发平台**
+**Packaging, Publishing & Distribution Platform for OpenClaw Agents**
 
 [![npm version](https://img.shields.io/npm/v/@zshuangmu/agenthub.svg)](https://www.npmjs.com/package/@zshuangmu/agenthub)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
 [![Node: >=18](https://img.shields.io/badge/Node.js->=18-green.svg)](https://nodejs.org/)
 [![GitHub Stars](https://img.shields.io/github/stars/itshaungmu/AgentHub?style=social)](https://github.com/itshaungmu/AgentHub)
 
-**把你调教好的 OpenClaw Agent 变成可复用、可分发、可升级的标准资产**
+**Turn your well-trained OpenClaw Agent into reusable, distributable, and upgradable standard assets**
 
-🌐 **在线演示**: [https://agenthub.cyou](https://agenthub.cyou/)
+🌐 **Live Demo**: [https://agenthub.cyou](https://agenthub.cyou/)
 
 [English](README.md) | [中文](README_CN.md)
 
@@ -19,52 +19,52 @@
 
 ---
 
-## 🎯 AgentHub 是什么？
+## 🎯 What is AgentHub?
 
-AgentHub 是一个专为 **OpenClaw** 设计的 Agent 打包与分发平台，类似于：
-- **Docker Hub** 之于 Docker 容器
-- **npm** 之于 Node.js 包
+AgentHub is a packaging and distribution platform designed specifically for **OpenClaw**, similar to:
+- **Docker Hub** for Docker containers
+- **npm** for Node.js packages
 
-但专注于 **OpenClaw Agent 的分发与复刻**。
+But focused on **OpenClaw Agent distribution and replication**.
 
-### 核心能力
+### Core Capabilities
 
-| 能力 | 描述 |
-|------|------|
-| 📦 **一键打包** | 将 Agent 的 personality、memory、skills 打包成标准 Bundle |
-| 🚀 **发布分发** | 发布到本地或远程 Registry，生成可分享链接 |
-| ⚡ **一键安装** | 团队成员通过统一命令安装，复刻完整 Agent 能力 |
-| 🔄 **版本管理** | 完整的升级、回滚、校验支持 |
+| Capability | Description |
+|------------|-------------|
+| 📦 **One-Click Packaging** | Package Agent's personality, memory, and skills into a standard Bundle |
+| 🚀 **Publish & Distribute** | Publish to local or remote Registry, generate shareable links |
+| ⚡ **One-Click Install** | Team members install via unified command, replicate complete Agent capabilities |
+| 🔄 **Version Management** | Full support for upgrades, rollbacks, and verification |
 
-### 适合谁？
+### Who is it for?
 
-- **✅ OpenClaw 团队用户**: 统一分发、版本管理、团队复用
-- **✅ Agent 创作者**: 打包分享你调教好的 Agent
-- **✅ AI 重度用户**: 快速获得别人调教好的 Agent 能力
+- **✅ OpenClaw Team Users**: Unified distribution, version management, team reuse
+- **✅ Agent Creators**: Package and share your well-trained Agents
+- **✅ AI Power Users**: Quickly acquire Agent capabilities trained by others
 
-### 不适合谁？
+### Who is it NOT for?
 
-- ❌ 非 OpenClaw 用户（当前仅支持 OpenClaw）
-- ❌ 需要 Prompt 收藏夹（请使用专门的 Prompt 工具）
-- ❌ 单个 Skill 分发（请使用 ClawHub）
+- ❌ Non-OpenClaw users (currently only supports OpenClaw)
+- ❌ Those needing a Prompt collection (please use dedicated Prompt tools)
+- ❌ Single Skill distribution (please use ClawHub)
 
-## 🎯 官方样板 Agent
+## 🎯 Official Sample Agents
 
-我们提供了 3 个官方样板 Agent，帮助你快速上手：
+We provide 3 official sample Agents to help you get started quickly:
 
-| Agent | 描述 | 适用场景 |
-|-------|------|----------|
-| **code-review-assistant** | 代码审查助手 | 代码质量审查、安全漏洞识别 |
-| **team-knowledge-assistant** | 团队知识问答 | 项目信息检索、新员工入职 |
-| **product-doc-writer** | 产品文档撰写 | 功能文档、用户指南、API 文档 |
+| Agent | Description | Use Cases |
+|-------|-------------|-----------|
+| **code-review-assistant** | Code Review Assistant | Code quality review, security vulnerability identification |
+| **team-knowledge-assistant** | Team Knowledge Q&A | Project information retrieval, new employee onboarding |
+| **product-doc-writer** | Product Documentation Writer | Feature docs, user guides, API documentation |
 
-### 快速试用
+### Quick Try
 
 ```bash
-# 打包任意样板 Agent
+# Package any sample Agent
 agenthub pack --workspace ./samples/code-review-assistant --config ./samples/code-review-assistant/openclaw.json
 
-# 发布并安装
+# Publish and install
 agenthub publish ./bundles/code-review-assistant-1.0.0.agent --registry ./.registry
 agenthub install code-review-assistant --registry ./.registry --target-workspace ./workspace
 ```
@@ -73,140 +73,140 @@ agenthub install code-review-assistant --registry ./.registry --target-workspace
 
 ![AgentHub Web Interface](./docs/image.png)
 
-## 🚀 3 步上手
+## 🚀 3 Steps to Get Started
 
-### 第一步：安装
+### Step 1: Installation
 
 ```bash
-# 通过 npm 全局安装
+# Install globally via npm
 npm install -g @zshuangmu/agenthub
 
-# 或克隆源码
+# Or clone from source
 git clone https://github.com/itshaungmu/AgentHub.git
 cd AgentHub && npm install && npm link
 ```
 
-### 第二步：打包并发布你的 Agent
+### Step 2: Package and Publish Your Agent
 
 ```bash
-# 1. 打包你的 OpenClaw workspace
+# 1. Package your OpenClaw workspace
 agenthub pack --workspace ./my-workspace --config openclaw.json
 
-# 或指定版本号
+# Or specify a version number
 agenthub pack --workspace ./my-workspace --config openclaw.json --version 2.0.0
 
-# 2. 发布到 Registry
+# 2. Publish to Registry
 agenthub publish ./bundles/my-agent.agent --registry ./.registry
 ```
 
-### 第三步：团队成员安装使用
+### Step 3: Team Members Install and Use
 
 ```bash
-# 团队成员一键安装
+# Team members install with one click
 agenthub install my-agent --registry ./.registry --target-workspace ./workspace
 
-# 或启动 Web 界面浏览
+# Or start the Web interface to browse
 agenthub serve --registry ./.registry --port 3000
 ```
 
-访问 http://localhost:3000 查看你的 Agent！
+Visit http://localhost:3000 to see your Agent!
 
-### 🎯 试用样板 Agent
+### 🎯 Try Sample Agents
 
-我们提供了一个官方样板 Agent，帮助你快速体验：
+We provide an official sample Agent for quick experience:
 
 ```bash
-# 1. 克隆仓库
+# 1. Clone the repository
 git clone https://github.com/itshaungmu/AgentHub.git
 cd AgentHub
 
-# 2. 打包样板 Agent
+# 2. Package the sample Agent
 agenthub pack --workspace ./samples/code-review-assistant --config ./samples/code-review-assistant/openclaw.json
 
-# 3. 发布到本地 Registry
+# 3. Publish to local Registry
 agenthub publish ./bundles/code-review-assistant-1.0.0.agent --registry ./.registry
 
-# 4. 安装到你的 workspace
+# 4. Install to your workspace
 agenthub install code-review-assistant --registry ./.registry --target-workspace ./my-workspace
 
-# 5. 校验安装
+# 5. Verify installation
 agenthub verify code-review-assistant --registry ./.registry --target-workspace ./my-workspace
 ```
 
 ---
 
-## 📖 命令文档
-
-### CLI 命令
-
-| 命令 | 描述 |
-|------|------|
-| `pack` | 打包 workspace 为 Agent Bundle（支持 `--version` 指定版本） |
-| `publish` | 发布到本地 Registry |
-| `publish-remote` | 发布到远程服务器 |
-| `search` | 搜索 Registry 中的 Agent |
-| `info` | 查看 Agent 详情 |
-| `install` | 安装 Agent 到 workspace |
-| `list` | 列出已安装的 Agent |
-| `uninstall` | 卸载已安装的 Agent |
-| `verify` | 校验已安装 Agent 是否完整 |
-| `versions` | 查看 Agent 版本历史 |
-| `update` | 更新 Agent 到最新版 |
-| `rollback` | 回滚 Agent 到指定版本 |
-| `stats` | 查看 Agent 统计信息 |
-| `doctor` | 诊断 AgentHub 安装和环境问题 |
-| `serve` | 启动 Web + API 服务 |
-| `api` | 仅启动 API 服务 |
-| `web` | 仅启动 Web 前端 |
+## 📖 Command Documentation
+
+### CLI Commands
+
+| Command | Description |
+|---------|-------------|
+| `pack` | Package workspace as Agent Bundle (supports `--version` to specify version) |
+| `publish` | Publish to local Registry |
+| `publish-remote` | Publish to remote server |
+| `search` | Search Agents in Registry |
+| `info` | View Agent details |
+| `install` | Install Agent to workspace |
+| `list` | List installed Agents |
+| `uninstall` | Uninstall an installed Agent |
+| `verify` | Verify installed Agent integrity |
+| `versions` | View Agent version history |
+| `update` | Update Agent to latest version |
+| `rollback` | Rollback Agent to specified version |
+| `stats` | View Agent statistics |
+| `doctor` | Diagnose AgentHub installation and environment issues |
+| `serve` | Start Web + API services |
+| `api` | Start API service only |
+| `web` | Start Web frontend only |
 
 ### HTTP API
 
 ```bash
-# 健康检查
+# Health check
 curl http://localhost:3001/api/health
 
-# 列出所有 Agent
+# List all Agents
 curl http://localhost:3001/api/agents
 
-# 搜索 Agent
+# Search Agents
 curl "http://localhost:3001/api/agents?q=react"
 
-# 获取 Agent 详情
+# Get Agent details
 curl http://localhost:3001/api/agents/my-agent
 
-# 下载 Agent Bundle
+# Download Agent Bundle
 curl http://localhost:3001/api/agents/my-agent/download
 
-# 获取统计信息
+# Get statistics
 curl http://localhost:3001/api/stats
 
-# 获取下载排行
+# Get download ranking
 curl "http://localhost:3001/api/stats/ranking?limit=10"
 
-# 发布 Agent (POST)
+# Publish Agent (POST)
 curl -X POST http://localhost:3001/api/publish -H "Content-Type: application/json" -d '{"slug":"my-agent","version":"1.0.0"}'
 
-# 上传发布 Agent (POST)
+# Upload and publish Agent (POST)
 curl -X POST http://localhost:3001/api/publish-upload -H "Content-Type: application/json" -d '{"bundleData":"..."}'
 ```
 
-### AI 自动发现
+### AI Auto-Discovery
 
-让你的 AI 助手自动发现可用的 Agent：
+Let your AI assistant automatically discover available Agents:
 
 ```bash
 curl http://localhost:3001/api/skills/agenthub-discover
 ```
 
-## 📚 教程文档
+## 📚 Tutorial Documentation
 
-| 教程 | 描述 |
-|------|------|
-| [3 步复刻 Agent](./docs/quick-start-3-steps.md) | 10 分钟快速上手指南 |
-| [团队分发指南](./docs/team-distribution-guide.md) | 如何把团队 Agent 标准化分发 |
-| [常见问题 FAQ](./docs/faq.md) | 常见问题解答 |
+| Tutorial | Description |
+|----------|-------------|
+| [3 Steps to Replicate Agent](./docs/quick-start-3-steps.md) | 10-minute quick start guide |
+| [Team Distribution Guide](./docs/team-distribution-guide.md) | How to standardize team Agent distribution |
+| [FAQ](./docs/faq.md) | Frequently asked questions |
 
-## 🏗️ 架构
+## 🏗️ Architecture
 
 ```
 ┌─────────────────┐     pack      ┌─────────────────┐    publish    ┌─────────────────┐
@@ -223,45 +223,45 @@ curl http://localhost:3001/api/skills/agenthub-discover
                                   └─────────────────┘
 ```
 
-## 🧪 开发
+## 🧪 Development
 
 ```bash
-# 运行测试
+# Run tests
 npm test
 
-# 启动开发服务器
+# Start development server
 node src/cli.js serve --registry ./.registry
 ```
 
-## 🐳 Docker 部署
+## 🐳 Docker Deployment
 
 ```bash
-# 生产环境启动（容器内）
+# Production startup (inside container)
 NODE_ENV=production node src/cli.js serve --registry ./.registry --port 3000 --host 0.0.0.0
 ```
 
-## 🤝 贡献
+## 🤝 Contributing
 
-欢迎贡献！请查看 [CONTRIBUTING.md](CONTRIBUTING.md) 了解详情。
+Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.
 
-- 🐛 [报告 Bug](https://github.com/itshaungmu/AgentHub/issues/new?template=bug_report.md)
-- 💡 [请求功能](https://github.com/itshaungmu/AgentHub/issues/new?template=feature_request.md)
-- 🔧 [提交 PR](https://github.com/itshaungmu/AgentHub/pulls)
+- 🐛 [Report a Bug](https://github.com/itshaungmu/AgentHub/issues/new?template=bug_report.md)
+- 💡 [Request a Feature](https://github.com/itshaungmu/AgentHub/issues/new?template=feature_request.md)
+- 🔧 [Submit a PR](https://github.com/itshaungmu/AgentHub/pulls)
 
-## 📄 许可证
+## 📄 License
 
 [MIT License](LICENSE) © AgentHub Team
 
-## 🙏 致谢
+## 🙏 Acknowledgments
 
-- 为 [OpenClaw](https://github.com/openclaw) 生态系统构建
-- 灵感来自 npm 和 Docker Hub
+- Built for the [OpenClaw](https://github.com/openclaw) ecosystem
+- Inspired by npm and Docker Hub
 
 ---
 
 <div align="center">
 
-**[⬆ 返回顶部](#agenthub)**
+**[⬆ Back to Top](#agenthub)**
 
 Made with ❤️ by the AgentHub Team
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zshuangmu/agenthub",
-  "version": "0.4.14",
+  "version": "0.4.15",
   "description": "AI Agent 打包与分发平台 - 一句话打包上传，一键下载获得能力",
   "type": "module",
   "main": "src/index.js",

package/src/lib/html.js

@@ -183,19 +183,15 @@ const langScript = `
         el.placeholder = window.i18n[lang][key];
       }
     });
-    // Update active button
     document.querySelectorAll('.lang-btn').forEach(btn => {
       btn.classList.toggle('active', btn.dataset.lang === lang);
     });
-    // Update html lang attribute
     document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
   }
 
-  // Theme toggle function
   function setTheme(theme) {
     localStorage.setItem('agenthub-theme', theme);
     document.documentElement.setAttribute('data-theme', theme);
-    // Update theme button icon
     const themeBtn = document.querySelector('.theme-btn');
     if (themeBtn) {
       themeBtn.textContent = theme === 'dark' ? '☀️' : '🌙';
@@ -214,15 +210,12 @@ const langScript = `
 
   document.addEventListener('DOMContentLoaded', () => {
     setLang(savedLang);
-    // Initialize theme (default to light)
     const savedTheme = localStorage.getItem('agenthub-theme') || 'light';
     setTheme(savedTheme);
 
-    // Copy to clipboard with fallback
+    // Copy to clipboard
     async function copyText(text) {
-      if (navigator.clipboard?.writeText) {
-        return navigator.clipboard.writeText(text);
-      }
+      if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(text);
       const ta = Object.assign(document.createElement('textarea'), { value: text, style: 'position:fixed;opacity:0' });
       document.body.appendChild(ta);
       ta.select();
@@ -230,12 +223,10 @@ const langScript = `
       ta.remove();
     }
 
-    // Initialize copy buttons
     document.querySelectorAll('.api-code, .detail-install').forEach(el => {
       el.addEventListener('click', () => {
         const text = el.querySelector('.code-text')?.textContent.trim() || el.textContent.trim();
         const btn = el.querySelector('.copy-btn');
-
         copyText(text).then(() => {
           if (!btn) return;
           btn.textContent = '✓';
@@ -244,6 +235,89 @@ const langScript = `
         }).catch(e => console.error('Copy failed:', e));
       });
     });
+
+    // === Client-side search & filter ===
+    const searchInput = document.getElementById('agent-search');
+    const categoryTabs = document.querySelectorAll('.category-tab');
+    const agentCards = document.querySelectorAll('.agent-card');
+    const loadMoreBtn = document.getElementById('load-more-btn');
+    const noResults = document.querySelector('.no-results');
+    let visibleCount = 0;
+    const PAGE_SIZE = 12;
+    let currentCategory = 'all';
+    let searchTerm = '';
+
+    function getFilteredCards() {
+      return Array.from(agentCards).filter(card => {
+        const matchCategory = currentCategory === 'all' || card.dataset.category === currentCategory;
+        const matchSearch = !searchTerm || card.textContent.toLowerCase().includes(searchTerm.toLowerCase());
+        return matchCategory && matchSearch;
+      });
+    }
+
+    function updateDisplay() {
+      const filtered = getFilteredCards();
+      agentCards.forEach(c => c.classList.add('hidden'));
+      filtered.forEach(c => c.classList.remove('hidden'));
+
+      visibleCount = Math.min(PAGE_SIZE, filtered.length);
+      filtered.slice(0, visibleCount).forEach(c => c.classList.remove('hidden'));
+
+      if (loadMoreBtn) {
+        loadMoreBtn.style.display = visibleCount < filtered.length ? 'inline-block' : 'none';
+      }
+      if (noResults) {
+        noResults.classList.toggle('show', filtered.length === 0);
+      }
+    }
+
+    if (searchInput) {
+      searchInput.addEventListener('input', (e) => {
+        searchTerm = e.target.value;
+        updateDisplay();
+      });
+      // Prevent form submit for client-side search
+      const form = searchInput.closest('form');
+      if (form) {
+        form.addEventListener('submit', (e) => {
+          e.preventDefault();
+          searchTerm = searchInput.value;
+          updateDisplay();
+        });
+      }
+    }
+
+    categoryTabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        categoryTabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        currentCategory = tab.dataset.category;
+        updateDisplay();
+      });
+    });
+
+    if (loadMoreBtn) {
+      loadMoreBtn.addEventListener('click', () => {
+        const filtered = getFilteredCards();
+        visibleCount = Math.min(visibleCount + PAGE_SIZE, filtered.length);
+        filtered.slice(0, visibleCount).forEach(c => c.classList.remove('hidden'));
+        loadMoreBtn.style.display = visibleCount < filtered.length ? 'inline-block' : 'none';
+      });
+    }
+
+    updateDisplay();
+
+    // === Scroll reveal animation ===
+    const revealObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+          revealObserver.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+
+    document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
   });
 })();
 </script>
@@ -378,13 +452,51 @@ function page(title, body, options = {}) {
 
     /* Animations */
     @keyframes fadeInUp {
-      from { opacity: 0; transform: translateY(16px); }
+      from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
     }
     @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
     }
+    @keyframes gradientShift {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+    @keyframes float {
+      0%, 100% { transform: translateY(0px); }
+      50% { transform: translateY(-8px); }
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 0.6; }
+      50% { opacity: 1; }
+    }
+    @keyframes countUp {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes shimmer {
+      0% { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+    @keyframes slideInRight {
+      from { opacity: 0; transform: translateX(20px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+
+    /* Scroll reveal */
+    .reveal {
+      opacity: 0;
+      transform: translateY(24px);
+      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    .reveal.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .reveal-delay-1 { transition-delay: 0.1s; }
+    .reveal-delay-2 { transition-delay: 0.2s; }
+    .reveal-delay-3 { transition-delay: 0.3s; }
     a { color: inherit; text-decoration: none; }
     .container {
       max-width: 1200px;
@@ -540,50 +652,79 @@ function page(title, body, options = {}) {
     /* Hero - Sunset gradient style */
     .hero {
       text-align: center;
-      padding: 72px 20px 56px;
+      padding: 80px 20px 64px;
       position: relative;
+      overflow: hidden;
     }
     .hero::before {
       content: '';
       position: absolute;
-      top: -20px;
+      top: -40px;
       left: 50%;
       transform: translateX(-50%);
-      width: 800px;
-      height: 500px;
-      background: radial-gradient(ellipse at center, rgba(250, 112, 154, 0.08) 0%, rgba(254, 225, 64, 0.05) 40%, transparent 70%);
+      width: 900px;
+      height: 600px;
+      background: radial-gradient(ellipse at center, rgba(250, 112, 154, 0.1) 0%, rgba(254, 225, 64, 0.06) 30%, rgba(255, 183, 77, 0.04) 50%, transparent 70%);
+      pointer-events: none;
+      z-index: -1;
+      animation: pulse 6s ease-in-out infinite;
+    }
+    .hero::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 600px;
+      height: 600px;
+      background: conic-gradient(from 0deg, transparent, rgba(250, 112, 154, 0.04), transparent, rgba(254, 152, 0, 0.04), transparent);
+      border-radius: 50%;
+      animation: spin 20s linear infinite;
       pointer-events: none;
       z-index: -1;
     }
+    @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
     .hero h1 {
       font-family: var(--font-display);
-      font-size: clamp(40px, 8vw, 64px);
+      font-size: clamp(42px, 8vw, 72px);
       font-weight: 700;
-      margin-bottom: 16px;
-      letter-spacing: -0.03em;
-      background: linear-gradient(135deg, var(--color-1) 0%, var(--color-3) 50%, var(--color-2) 100%);
+      margin-bottom: 20px;
+      letter-spacing: -0.04em;
+      background: linear-gradient(135deg, var(--color-1) 0%, var(--color-3) 40%, var(--color-2) 70%, var(--color-1) 100%);
+      background-size: 200% auto;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
-      animation: fadeInUp 0.6s ease-out;
+      animation: fadeInUp 0.6s ease-out, gradientShift 6s ease infinite;
     }
     .hero-subtitle {
-      font-size: 17px;
+      font-size: 18px;
       color: var(--text-secondary);
-      max-width: 560px;
-      margin: 0 auto 44px;
-      line-height: 1.75;
+      max-width: 600px;
+      margin: 0 auto 48px;
+      line-height: 1.8;
       animation: fadeInUp 0.6s ease-out 0.1s backwards;
     }
     .hero-stats {
       display: flex;
       justify-content: center;
-      gap: 56px;
-      margin-bottom: 44px;
+      gap: 48px;
+      margin-bottom: 48px;
       animation: fadeInUp 0.6s ease-out 0.2s backwards;
     }
     .hero-stat {
       text-align: center;
+      padding: 16px 24px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      transition: all 0.3s ease;
+      min-width: 140px;
+    }
+    .hero-stat:hover {
+      border-color: var(--color-1);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(250, 112, 154, 0.1);
     }
     .hero-stat-value {
       font-family: var(--font-display);
@@ -601,23 +742,23 @@ function page(title, body, options = {}) {
       text-transform: uppercase;
       letter-spacing: 0.1em;
       font-weight: 600;
-      margin-top: 4px;
+      margin-top: 6px;
     }
 
     /* Features - Warm coral accents */
     .features {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: 16px;
+      gap: 18px;
       margin-bottom: 56px;
     }
     .feature-card {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 16px;
-      padding: 28px 24px;
+      padding: 32px 24px;
       text-align: center;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
     }
@@ -632,31 +773,45 @@ function page(title, body, options = {}) {
       opacity: 0;
       transition: opacity 0.3s;
     }
+    .feature-card::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, rgba(250, 112, 154, 0.03), transparent);
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
     .feature-card:hover {
       border-color: var(--color-1);
-      transform: translateY(-4px);
-      box-shadow: 0 12px 32px rgba(250, 112, 154, 0.12);
+      transform: translateY(-6px);
+      box-shadow: 0 16px 40px rgba(250, 112, 154, 0.12);
     }
     .feature-card:hover::before {
       opacity: 1;
     }
+    .feature-card:hover::after {
+      opacity: 1;
+    }
     .feature-icon {
-      font-size: 32px;
-      margin-bottom: 14px;
+      font-size: 36px;
+      margin-bottom: 16px;
       display: block;
+      animation: float 3s ease-in-out infinite;
     }
+    .feature-card:nth-child(2) .feature-icon { animation-delay: 0.5s; }
+    .feature-card:nth-child(3) .feature-icon { animation-delay: 1s; }
     .feature-title {
       font-family: var(--font-display);
-      font-size: 14px;
+      font-size: 15px;
       font-weight: 600;
-      margin-bottom: 8px;
+      margin-bottom: 10px;
       letter-spacing: -0.01em;
       color: var(--text-primary);
     }
     .feature-desc {
       font-size: 13px;
       color: var(--text-secondary);
-      line-height: 1.6;
+      line-height: 1.7;
     }
 
     /* Section - Coral themed */
@@ -694,16 +849,30 @@ function page(title, body, options = {}) {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 18px;
+      transition: all 0.3s ease;
     }
     .agent-card {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 16px;
-      padding: 22px;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      padding: 24px;
+      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
       cursor: pointer;
       animation: fadeInUp 0.5s ease-out backwards;
       position: relative;
+      overflow: hidden;
+    }
+    .agent-card::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--color-1), var(--color-3), var(--color-2));
+      transform: scaleX(0);
+      transition: transform 0.3s ease;
+      transform-origin: left;
     }
     .agent-card:nth-child(1) { animation-delay: 0.05s; }
     .agent-card:nth-child(2) { animation-delay: 0.1s; }
@@ -716,8 +885,11 @@ function page(title, body, options = {}) {
     .agent-card:hover {
       background: var(--bg-card-hover);
       border-color: var(--color-1);
-      transform: translateY(-4px);
-      box-shadow: 0 16px 40px rgba(250, 112, 154, 0.15);
+      transform: translateY(-6px);
+      box-shadow: 0 20px 48px rgba(250, 112, 154, 0.15);
+    }
+    .agent-card:hover::after {
+      transform: scaleX(1);
     }
     .agent-card-featured {
       border-color: var(--color-1);
@@ -1197,26 +1369,45 @@ function page(title, body, options = {}) {
     .how-it-works {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: 24px;
+      gap: 32px;
       margin-bottom: 56px;
+      position: relative;
+    }
+    .how-it-works::before {
+      content: '';
+      position: absolute;
+      top: 36px;
+      left: 16%;
+      right: 16%;
+      height: 2px;
+      background: linear-gradient(90deg, var(--color-1), var(--color-3), var(--color-2));
+      opacity: 0.2;
+      z-index: 0;
     }
     .step {
       text-align: center;
+      position: relative;
+      z-index: 1;
     }
     .step-number {
-      width: 48px;
-      height: 48px;
+      width: 52px;
+      height: 52px;
       background: linear-gradient(135deg, var(--color-1) 0%, var(--color-3) 100%);
       color: #ffffff;
-      border-radius: 14px;
+      border-radius: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-display);
-      font-size: 18px;
+      font-size: 20px;
       font-weight: 700;
-      margin: 0 auto 16px;
+      margin: 0 auto 18px;
       box-shadow: 0 8px 24px rgba(250, 112, 154, 0.25);
+      transition: all 0.3s ease;
+    }
+    .step:hover .step-number {
+      transform: scale(1.1) rotate(5deg);
+      box-shadow: 0 12px 32px rgba(250, 112, 154, 0.35);
     }
     .step h4 {
       font-family: var(--font-display);
@@ -1230,6 +1421,98 @@ function page(title, body, options = {}) {
       line-height: 1.6;
     }
 
+    /* Category filter tabs */
+    .category-filters {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 20px;
+      justify-content: center;
+    }
+    .category-tab {
+      padding: 8px 18px;
+      border-radius: 24px;
+      border: 1px solid var(--border);
+      background: var(--bg-card);
+      color: var(--text-secondary);
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-display);
+      cursor: pointer;
+      transition: all 0.25s ease;
+    }
+    .category-tab:hover {
+      border-color: var(--color-1);
+      color: var(--color-1);
+      background: var(--accent-glow);
+    }
+    .category-tab.active {
+      background: linear-gradient(135deg, var(--color-1), var(--color-3));
+      color: white;
+      border-color: transparent;
+      box-shadow: 0 4px 12px rgba(250, 112, 154, 0.25);
+    }
+    .category-tab .count {
+      display: inline-block;
+      background: rgba(255,255,255,0.2);
+      padding: 1px 7px;
+      border-radius: 10px;
+      font-size: 11px;
+      margin-left: 4px;
+    }
+    .category-tab.active .count {
+      background: rgba(255,255,255,0.3);
+    }
+    .category-tab:not(.active) .count {
+      background: var(--bg-secondary);
+    }
+
+    /* Load more */
+    .load-more-wrap {
+      text-align: center;
+      margin-top: 28px;
+    }
+    .load-more-btn {
+      padding: 12px 36px;
+      border-radius: 12px;
+      border: 2px solid var(--border);
+      background: var(--bg-card);
+      color: var(--text-secondary);
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-display);
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+    .load-more-btn:hover {
+      border-color: var(--color-1);
+      color: var(--color-1);
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(250, 112, 154, 0.12);
+    }
+    .load-more-btn:active {
+      transform: translateY(0);
+    }
+    .agent-card.hidden {
+      display: none;
+    }
+
+    /* No results */
+    .no-results {
+      text-align: center;
+      padding: 48px 20px;
+      color: var(--text-muted);
+      display: none;
+    }
+    .no-results.show {
+      display: block;
+    }
+    .no-results-icon {
+      font-size: 48px;
+      margin-bottom: 12px;
+      opacity: 0.5;
+    }
+
     /* Search - Coral themed */
     .search-box {
       display: flex;
@@ -1304,9 +1587,21 @@ function page(title, body, options = {}) {
     /* Footer - Coral themed */
     footer {
       border-top: 1px solid var(--border);
-      padding: 36px 0;
-      margin-top: 64px;
+      padding: 48px 0;
+      margin-top: 80px;
       background: var(--bg-secondary);
+      position: relative;
+    }
+    footer::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--color-1), var(--color-3), var(--color-2), var(--color-1));
+      background-size: 200% auto;
+      animation: gradientShift 4s linear infinite;
     }
     .footer-content {
       display: flex;
@@ -1321,12 +1616,14 @@ function page(title, body, options = {}) {
       gap: 12px;
     }
     .footer-brand-icon {
-      width: 32px;
-      height: 32px;
+      width: 36px;
+      height: 36px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 22px;
+      font-size: 24px;
+      background: var(--accent-glow);
+      border-radius: 10px;
     }
     .footer-brand-text {
       font-family: var(--font-display);
@@ -1344,6 +1641,10 @@ function page(title, body, options = {}) {
     .footer-powered a {
       color: var(--color-1);
       font-weight: 600;
+      transition: color 0.2s;
+    }
+    .footer-powered a:hover {
+      color: var(--color-3);
     }
     .footer-links {
       display: flex;
@@ -1354,7 +1655,7 @@ function page(title, body, options = {}) {
       font-size: 13px;
       font-family: var(--font-display);
       font-weight: 500;
-      transition: color 0.2s;
+      transition: all 0.2s;
     }
     .footer-links a:hover {
       color: var(--color-1);
@@ -1364,10 +1665,12 @@ function page(title, body, options = {}) {
       .hero { padding: 48px 16px 40px; }
       .hero h1 { font-size: clamp(32px, 7vw, 44px); }
       .hero-subtitle { font-size: 15px; padding: 0 12px; }
-      .hero-stats { gap: 32px; flex-wrap: wrap; }
-      .hero-stat-value { font-size: 30px; }
+      .hero-stats { gap: 16px; flex-wrap: wrap; }
+      .hero-stat { min-width: 100px; padding: 12px 16px; }
+      .hero-stat-value { font-size: 28px; }
       .features { grid-template-columns: 1fr; gap: 14px; }
       .how-it-works { grid-template-columns: 1fr; gap: 24px; }
+      .how-it-works::before { display: none; }
       .detail-grid { grid-template-columns: repeat(2, 1fr); }
       .agent-grid { grid-template-columns: 1fr; }
       .footer-content { flex-direction: column; text-align: center; gap: 20px; }
@@ -1396,12 +1699,16 @@ function page(title, body, options = {}) {
       .stats-table th, .stats-table td { padding: 12px 10px; font-size: 13px; }
       .step-number { width: 42px; height: 42px; font-size: 16px; }
       .step h4 { font-size: 14px; }
+      .category-filters { gap: 6px; }
+      .category-tab { padding: 6px 14px; font-size: 12px; }
     }
 
     @media (max-width: 480px) {
       .theme-btn { width: 32px; height: 32px; font-size: 14px; }
-      .hero-stat-value { font-size: 26px; }
+      .hero-stat-value { font-size: 24px; }
       .hero-stat-label { font-size: 10px; }
+      .hero-stats { gap: 10px; }
+      .hero-stat { min-width: 80px; padding: 10px 12px; }
       .nav-links { gap: 12px; }
       .nav-links a { font-size: 12px; }
       .section-title { font-size: 18px; }
@@ -1465,6 +1772,13 @@ ${langScript}`;
 export function renderAgentListPage({ query, agents, totalDownloads, apiBase }) {
   const agentCount = agents.length;
 
+  // Count agents per category
+  const categoryCounts = {};
+  agents.forEach(a => {
+    const cat = a.metadata?.category || 'default';
+    categoryCounts[cat] = (categoryCounts[cat] || 0) + 1;
+  });
+
   const features = `
     <div class="features">
       <div class="feature-card">
@@ -1498,7 +1812,7 @@ export function renderAgentListPage({ query, agents, totalDownloads, apiBase })
     }[category] || 'tag-default';
 
     return `
-      <article class="agent-card${featured ? ' agent-card-featured' : ''}" onclick="window.location='/agents/${agent.slug}'">
+      <article class="agent-card hidden" data-category="${category}" onclick="window.location='/agents/${agent.slug}'">
         ${featured ? '<span class="featured-badge">⭐</span>' : ''}
         <div class="agent-header">
           <a href="/agents/${agent.slug}" class="agent-name" onclick="event.stopPropagation()">${agent.name || agent.slug}</a>
@@ -1519,8 +1833,24 @@ export function renderAgentListPage({ query, agents, totalDownloads, apiBase })
     `;
   }).join('');
 
+  // Category filter tabs
+  const categoryFilters = `
+    <div class="category-filters">
+      <button class="category-tab active" data-category="all">All<span class="count">${agentCount}</span></button>
+      ${Object.entries(categoryCounts).sort((a, b) => b[1] - a[1]).map(([cat, count]) => {
+        const tagClass = {
+          'ops': 'tag-ops',
+          'engineering': 'tag-engineering',
+          'content': 'tag-content',
+          'product': 'tag-product'
+        }[cat] || 'tag-default';
+        return `<button class="category-tab" data-category="${cat}">${cat}<span class="count">${count}</span></button>`;
+      }).join('')}
+    </div>
+  `;
+
   const howItWorks = `
-    <div class="section">
+    <div class="section reveal">
       <h2 class="section-title" style="text-align: center; margin-bottom: 32px;" data-i18n="howToUse">How to Use</h2>
       <div class="how-it-works">
         <div class="step">
@@ -1543,7 +1873,7 @@ export function renderAgentListPage({ query, agents, totalDownloads, apiBase })
   `;
 
   const apiBox = `
-    <div class="api-box">
+    <div class="api-box reveal">
       <h3 data-i18n="apiBoxTitle">🤖 AI Auto-Discovery API</h3>
       <p data-i18n="apiBoxDesc">Let your AI assistant automatically discover and install Agents</p>
       <div class="api-code" title="Click to copy">
@@ -1584,12 +1914,21 @@ export function renderAgentListPage({ query, agents, totalDownloads, apiBase })
         <a href="/stats" class="section-link" data-i18n="sectionViewAll">View All →</a>
       </div>
       <form class="search-box" method="get" action="/">
-        <input type="search" name="q" value="${query ?? ""}" data-i18n-placeholder="searchPlaceholder" placeholder="Search Agents, skills, tags..." />
+        <input id="agent-search" type="search" name="q" value="${query ?? ""}" data-i18n-placeholder="searchPlaceholder" placeholder="Search Agents, skills, tags..." />
         <button type="submit" data-i18n="searchButton">Search</button>
       </form>
+      ${categoryFilters}
+      <div class="no-results">
+        <div class="no-results-icon">🔍</div>
+        <h3>No matching agents found</h3>
+        <p>Try adjusting your search or filter</p>
+      </div>
       <div class="agent-grid">
         ${cards || `<div class="empty-state"><h3 data-i18n="noAgents">No Agents yet</h3><p data-i18n="noAgentsHint">Use <code>agenthub pack</code> to package your first Agent!</p></div>`}
       </div>
+      <div class="load-more-wrap">
+        <button id="load-more-btn" class="load-more-btn">Load More Agents</button>
+      </div>
     </section>
 
     ${howItWorks}