@zshuangmu/agenthub 0.1.0

package/src/lib/html.js

@@ -0,0 +1,1730 @@
+// i18n translations
+const i18n = {
+  en: {
+    title: "AgentHub - AI Agent Open Source Community",
+    navHome: "Home",
+    navStats: "Stats",
+    heroTitle: "AgentHub",
+    heroSubtitle: "The Open Source Marketplace for AI Agents. Package and upload your Agent's full capabilities in one command, download and gain those powers with one click.",
+    statAgents: "Available Agents",
+    statDownloads: "Total Downloads",
+    statOpenSource: "Open Source",
+    feature1Title: "Ready to Use",
+    feature1Desc: "Skip complex configurations, get battle-tested AI Agent setups",
+    feature2Title: "Instant Deploy",
+    feature2Desc: "One-click install, deploy in minutes, start working immediately",
+    feature3Title: "Version Control",
+    feature3Desc: "Auto-update pushes, always stay with the latest capabilities",
+    apiBoxTitle: "AI Auto-Discovery API",
+    apiBoxDesc: "Let your AI assistant automatically discover and install Agents",
+    sectionHotAgents: "Hot Agents",
+    sectionViewAll: "View All →",
+    searchPlaceholder: "Search Agents, skills, tags...",
+    searchButton: "Search",
+    downloads: "downloads",
+    install: "Install",
+    howToUse: "How to Use",
+    step1Title: "Browse & Discover",
+    step1Desc: "Find the Agent that fits your workflow",
+    step2Title: "One-Click Install",
+    step2Desc: "Run the install command, deploy in minutes",
+    step3Title: "Start Working",
+    step3Desc: "Your AI assistant is ready, start delegating tasks",
+    noAgents: "No Agents yet",
+    noAgentsHint: "Use <code>agenthub pack</code> to package your first Agent!",
+    // Detail page
+    backToHome: "← Back to Home",
+    detailVersion: "Version",
+    detailRuntime: "Runtime",
+    detailDownloads: "Downloads",
+    detailAuthor: "Author",
+    detailInstall: "Install Command",
+    personaTitle: "🎭 Personality",
+    personaTraits: "Traits",
+    personaExpertise: "Expertise",
+    memoryTitle: "🧠 Memory Config",
+    memoryPublic: "Public",
+    memoryPortable: "Portable",
+    memoryPrivate: "Private",
+    memoryNoData: "No memory data",
+    skillsTitle: "🔧 Skills",
+    tagsTitle: "🏷️ Tags",
+    requirementsTitle: "⚙️ System Requirements",
+    requirementsNone: "No special requirements",
+    requirementsEnv: "🔐 Environment variables required:",
+    requirementsModel: "🤖 Recommended model:",
+    requirementsRuntime: "⚡ Runtime version:",
+    installMethodTitle: "📥 Installation",
+    installMethodDesc: "Run in your workspace:",
+    // Stats page
+    statsTitle: "Statistics Center - AgentHub",
+    statsHeader: "📊 Statistics Center",
+    statsDesc: "AgentHub download statistics and data analysis",
+    statsTotalAgents: "Agent Count",
+    statsTotalDownloads: "Total Downloads",
+    statsTotalLogs: "Download Logs",
+    rankingTitle: "🏆 Download Ranking",
+    rankingAgent: "Agent",
+    rankingDownloads: "Downloads",
+    rankingLastDownload: "Last Download",
+    rankingRank: "Rank",
+    recentTitle: "📋 Recent Downloads",
+    recentAgent: "Agent",
+    recentTime: "Time",
+    recentTarget: "Target Path",
+    noData: "No data",
+    // Tags
+    tagOps: "ops",
+    tagEngineering: "engineering",
+    tagContent: "content",
+    tagProduct: "product",
+    tagDefault: "default",
+  },
+  zh: {
+    title: "AgentHub - AI Agent 开源社区",
+    navHome: "首页",
+    navStats: "统计",
+    heroTitle: "AgentHub",
+    heroSubtitle: "AI Agent 的开源应用市场。一句话打包上传 Agent 的全部能力，一键下载获得这些功力。",
+    statAgents: "可用 Agent",
+    statDownloads: "累计下载",
+    statOpenSource: "开源免费",
+    feature1Title: "开箱即用",
+    feature1Desc: "跳过繁琐的配置，获取经过实战验证的 AI Agent 配置",
+    feature2Title: "即装即用",
+    feature2Desc: "一键安装，几分钟内部署完成，立即开始工作",
+    feature3Title: "版本管理",
+    feature3Desc: "自动更新推送，始终保持最新能力",
+    apiBoxTitle: "🤖 AI 自动发现 API",
+    apiBoxDesc: "让你的 AI 助手自动发现并安装 Agent",
+    sectionHotAgents: "热门 Agent",
+    sectionViewAll: "查看全部 →",
+    searchPlaceholder: "搜索 Agent、技能、标签...",
+    searchButton: "搜索",
+    downloads: "次下载",
+    install: "安装",
+    howToUse: "如何使用",
+    step1Title: "浏览发现",
+    step1Desc: "找到适合你工作流程的 Agent",
+    step2Title: "一键安装",
+    step2Desc: "运行安装命令，几分钟内部署完成",
+    step3Title: "开始工作",
+    step3Desc: "你的 AI 助手已就绪，立即开始委托任务",
+    noAgents: "暂无 Agent",
+    noAgentsHint: "使用 <code>agenthub pack</code> 打包你的第一个 Agent 吧！",
+    // Detail page
+    backToHome: "← 返回首页",
+    detailVersion: "版本",
+    detailRuntime: "运行时",
+    detailDownloads: "下载次数",
+    detailAuthor: "作者",
+    detailInstall: "安装命令",
+    personaTitle: "🎭 性格简介",
+    personaTraits: "特质",
+    personaExpertise: "专长",
+    memoryTitle: "🧠 记忆配置",
+    memoryPublic: "公开",
+    memoryPortable: "可移植",
+    memoryPrivate: "私有",
+    memoryNoData: "暂无记忆数据",
+    skillsTitle: "🔧 技能",
+    tagsTitle: "🏷️ 标签",
+    requirementsTitle: "⚙️ 系统要求",
+    requirementsNone: "无特殊要求",
+    requirementsEnv: "🔐 需要配置环境变量:",
+    requirementsModel: "🤖 推荐模型:",
+    requirementsRuntime: "⚡ 运行时版本:",
+    installMethodTitle: "📥 安装方式",
+    installMethodDesc: "在你的工作区运行：",
+    // Stats page
+    statsTitle: "统计中心 - AgentHub",
+    statsHeader: "📊 统计中心",
+    statsDesc: "AgentHub 下载统计与数据分析",
+    statsTotalAgents: "Agent 数量",
+    statsTotalDownloads: "累计下载",
+    statsTotalLogs: "下载记录",
+    rankingTitle: "🏆 下载排行榜",
+    rankingAgent: "Agent",
+    rankingDownloads: "下载次数",
+    rankingLastDownload: "最后下载",
+    rankingRank: "排名",
+    recentTitle: "📋 最近下载",
+    recentAgent: "Agent",
+    recentTime: "时间",
+    recentTarget: "目标路径",
+    noData: "暂无数据",
+    // Tags
+    tagOps: "运维",
+    tagEngineering: "工程",
+    tagContent: "内容",
+    tagProduct: "产品",
+    tagDefault: "默认",
+  }
+};
+
+// Language toggle script
+const langScript = `
+<script>
+(function() {
+  const defaultLang = 'en';
+  const savedLang = localStorage.getItem('agenthub-lang') || defaultLang;
+
+  function setLang(lang) {
+    localStorage.setItem('agenthub-lang', lang);
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+      const key = el.getAttribute('data-i18n');
+      if (window.i18n && window.i18n[lang] && window.i18n[lang][key]) {
+        el.textContent = window.i18n[lang][key];
+      }
+    });
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+      const key = el.getAttribute('data-i18n-placeholder');
+      if (window.i18n && window.i18n[lang] && window.i18n[lang][key]) {
+        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' ? '☀️' : '🌙';
+      themeBtn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+    }
+  }
+
+  function toggleTheme() {
+    const currentTheme = localStorage.getItem('agenthub-theme') || 'light';
+    setTheme(currentTheme === 'dark' ? 'light' : 'dark');
+  }
+
+  window.setLang = setLang;
+  window.toggleTheme = toggleTheme;
+  window.i18n = ${JSON.stringify(i18n)};
+
+  document.addEventListener('DOMContentLoaded', () => {
+    setLang(savedLang);
+    // Initialize theme (default to light)
+    const savedTheme = localStorage.getItem('agenthub-theme') || 'light';
+    setTheme(savedTheme);
+
+    // Initialize copy buttons
+    document.querySelectorAll('.api-code, .detail-install').forEach(el => {
+      el.addEventListener('click', async (e) => {
+        const codeText = el.querySelector('.code-text');
+        const text = codeText ? codeText.textContent.trim() : el.textContent.trim();
+        const btn = el.querySelector('.copy-btn');
+
+        try {
+          await navigator.clipboard.writeText(text);
+          if (btn) {
+            btn.textContent = '✓';
+            btn.classList.add('copied');
+            setTimeout(() => {
+              btn.textContent = '📋';
+              btn.classList.remove('copied');
+            }, 2000);
+          }
+        } catch (err) {
+          console.error('Copy failed:', err);
+        }
+      });
+    });
+  });
+})();
+</script>
+`;
+
+function page(title, body, options = {}) {
+  const {
+    description = "AgentHub - The Open Source Marketplace for AI Agents. Package and upload your Agent's full capabilities in one command, download and gain those powers with one click.",
+    url = "https://agenthub.cyou/",
+    type = "website",
+    image = "https://agenthub.cyou/og-image.png"
+  } = options;
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${title}</title>
+
+  <!-- SEO Meta -->
+  <meta name="description" content="${description}">
+  <meta name="keywords" content="AI Agent, AgentHub, OpenClaw, AI marketplace, agent packaging, artificial intelligence, open source">
+  <meta name="author" content="AgentHub Team">
+  <meta name="robots" content="index, follow">
+  <link rel="canonical" href="${url}">
+
+  <!-- Open Graph -->
+  <meta property="og:type" content="${type}">
+  <meta property="og:title" content="${title}">
+  <meta property="og:description" content="${description}">
+  <meta property="og:url" content="${url}">
+  <meta property="og:image" content="${image}">
+  <meta property="og:site_name" content="AgentHub">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:locale:alternate" content="zh_CN">
+
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="${title}">
+  <meta name="twitter:description" content="${description}">
+  <meta name="twitter:image" content="${image}">
+
+  <!-- JSON-LD Structured Data -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": "AgentHub",
+    "url": "https://agenthub.cyou/",
+    "description": "${description.replace(/"/g, '\\"')}",
+    "potentialAction": {
+      "@type": "SearchAction",
+      "target": "https://agenthub.cyou/?q={search_term_string}",
+      "query-input": "required name=search_term_string"
+    }
+  }
+  </script>
+
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦀</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* Light theme (default) */
+    :root {
+      --font-display: 'JetBrains Mono', monospace;
+      --font-body: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
+      --bg-primary: #fafafa;
+      --bg-secondary: #f0f0f0;
+      --bg-card: #ffffff;
+      --bg-card-hover: #f8f8f8;
+      --bg-code: #f4f4f5;
+      --text-primary: #18181b;
+      --text-secondary: #52525b;
+      --text-muted: #a1a1aa;
+      --accent: #00d68f;
+      --accent-light: #00e6a0;
+      --accent-dark: #00b377;
+      --accent-glow: rgba(0, 214, 143, 0.15);
+      --border: #e4e4e7;
+      --header-bg: rgba(250, 250, 250, 0.92);
+      --tag-ops: #8b5cf6;
+      --tag-engineering: #3b82f6;
+      --tag-content: #f59e0b;
+      --tag-product: #ec4899;
+    }
+
+    /* Dark theme - Enhanced */
+    [data-theme="dark"] {
+      --bg-primary: #09090b;
+      --bg-secondary: #18181b;
+      --bg-card: #1c1c1f;
+      --bg-card-hover: #242427;
+      --bg-code: #18181b;
+      --text-primary: #fafafa;
+      --text-secondary: #a1a1aa;
+      --text-muted: #71717a;
+      --accent: #00e6a0;
+      --accent-light: #34d399;
+      --accent-dark: #00d68f;
+      --accent-glow: rgba(0, 230, 160, 0.12);
+      --border: #27272a;
+      --header-bg: rgba(9, 9, 11, 0.92);
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: var(--font-body);
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      line-height: 1.6;
+      min-height: 100vh;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    /* Subtle background texture */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
+      pointer-events: none;
+      z-index: -1;
+    }
+
+    /* Animations */
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(16px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    a { color: inherit; text-decoration: none; }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+
+    /* Header */
+    header {
+      border-bottom: 1px solid var(--border);
+      padding: 16px 0;
+      position: sticky;
+      top: 0;
+      background: var(--header-bg);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      z-index: 100;
+      animation: fadeIn 0.4s ease-out;
+    }
+    .header-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-family: var(--font-display);
+      font-size: 22px;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+      transition: opacity 0.2s;
+    }
+    .logo:hover {
+      opacity: 0.85;
+    }
+    .logo-icon {
+      width: 36px;
+      height: 36px;
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    .logo:hover .logo-icon {
+      transform: rotate(-8deg) scale(1.05);
+    }
+    .nav-links {
+      display: flex;
+      align-items: center;
+      gap: 28px;
+    }
+    .nav-links a {
+      color: var(--text-secondary);
+      font-weight: 500;
+      font-size: 14px;
+      transition: color 0.2s;
+      position: relative;
+    }
+    .nav-links a::after {
+      content: '';
+      position: absolute;
+      bottom: -4px;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: var(--accent);
+      transition: width 0.2s ease;
+    }
+    .nav-links a:hover {
+      color: var(--text-primary);
+    }
+    .nav-links a:hover::after {
+      width: 100%;
+    }
+    .nav-powered {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: var(--bg-secondary);
+      border-radius: 6px;
+      font-size: 12px;
+      color: var(--text-muted);
+      font-family: var(--font-display);
+    }
+    .nav-powered a {
+      color: var(--accent);
+      font-weight: 600;
+    }
+    .nav-powered a::after {
+      display: none;
+    }
+
+    /* Language Switcher */
+    .lang-switcher {
+      display: flex;
+      background: var(--bg-secondary);
+      border-radius: 6px;
+      padding: 3px;
+      gap: 2px;
+    }
+    .lang-btn {
+      padding: 5px 10px;
+      border: none;
+      background: transparent;
+      color: var(--text-muted);
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 600;
+      font-family: var(--font-display);
+      transition: all 0.2s;
+    }
+    .lang-btn:hover {
+      color: var(--text-primary);
+    }
+    .lang-btn.active {
+      background: var(--accent);
+      color: #ffffff;
+    }
+
+    /* Theme Switcher */
+    .theme-btn {
+      background: var(--bg-secondary);
+      border: none;
+      width: 34px;
+      height: 34px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+      margin-left: 6px;
+    }
+    .theme-btn:hover {
+      background: var(--bg-card-hover);
+    }
+    .theme-btn:active {
+      transform: scale(0.95);
+    }
+
+    /* Hero */
+    .hero {
+      text-align: center;
+      padding: 80px 20px 60px;
+      position: relative;
+    }
+    .hero::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 600px;
+      height: 400px;
+      background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
+      pointer-events: none;
+      z-index: -1;
+    }
+    .hero h1 {
+      font-family: var(--font-display);
+      font-size: clamp(36px, 7vw, 56px);
+      font-weight: 700;
+      margin-bottom: 16px;
+      letter-spacing: -1px;
+      background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-dark) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: fadeInUp 0.5s ease-out;
+    }
+    .hero-subtitle {
+      font-size: 18px;
+      color: var(--text-secondary);
+      max-width: 640px;
+      margin: 0 auto 40px;
+      line-height: 1.7;
+      animation: fadeInUp 0.5s ease-out 0.1s backwards;
+    }
+    .hero-stats {
+      display: flex;
+      justify-content: center;
+      gap: 48px;
+      margin-bottom: 48px;
+      animation: fadeInUp 0.5s ease-out 0.2s backwards;
+    }
+    .hero-stat {
+      text-align: center;
+    }
+    .hero-stat-value {
+      font-family: var(--font-display);
+      font-size: 32px;
+      font-weight: 700;
+      color: var(--accent);
+      letter-spacing: -1px;
+    }
+    .hero-stat-label {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      font-weight: 500;
+    }
+
+    /* Features */
+    .features {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+      margin-bottom: 60px;
+    }
+    .feature-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 24px;
+      text-align: center;
+      transition: all 0.25s ease;
+    }
+    .feature-card:hover {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 1px var(--accent-glow);
+    }
+    .feature-icon {
+      font-size: 28px;
+      margin-bottom: 12px;
+    }
+    .feature-title {
+      font-family: var(--font-display);
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 6px;
+      letter-spacing: -0.3px;
+    }
+    .feature-desc {
+      font-size: 13px;
+      color: var(--text-secondary);
+      line-height: 1.5;
+    }
+
+    /* Section */
+    .section {
+      margin-bottom: 60px;
+    }
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+    .section-title {
+      font-family: var(--font-display);
+      font-size: 20px;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+    }
+    .section-link {
+      color: var(--accent);
+      font-weight: 500;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: gap 0.2s;
+    }
+    .section-link:hover {
+      gap: 8px;
+    }
+
+    /* Agent Grid */
+    .agent-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 16px;
+    }
+    .agent-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      animation: fadeInUp 0.4s ease-out backwards;
+      position: relative;
+    }
+    .agent-card:nth-child(1) { animation-delay: 0.05s; }
+    .agent-card:nth-child(2) { animation-delay: 0.1s; }
+    .agent-card:nth-child(3) { animation-delay: 0.15s; }
+    .agent-card:nth-child(4) { animation-delay: 0.2s; }
+    .agent-card:nth-child(5) { animation-delay: 0.25s; }
+    .agent-card:nth-child(6) { animation-delay: 0.3s; }
+    .agent-card:nth-child(7) { animation-delay: 0.35s; }
+    .agent-card:nth-child(8) { animation-delay: 0.4s; }
+    .agent-card:hover {
+      background: var(--bg-card-hover);
+      border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+      transform: translateY(-3px);
+      box-shadow: 0 8px 24px var(--accent-glow);
+    }
+    .agent-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .agent-name {
+      font-family: var(--font-display);
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: -0.3px;
+      transition: color 0.2s;
+    }
+    .agent-card:hover .agent-name {
+      color: var(--accent);
+    }
+    .agent-version {
+      background: var(--bg-secondary);
+      padding: 3px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-family: var(--font-display);
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+    .agent-desc {
+      color: var(--text-secondary);
+      font-size: 13px;
+      margin-bottom: 12px;
+      line-height: 1.5;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .agent-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 14px;
+    }
+    .agent-tag {
+      padding: 3px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      font-family: var(--font-display);
+    }
+    .tag-ops { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
+    .tag-engineering { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
+    .tag-content { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
+    .tag-product { background: rgba(236, 72, 153, 0.15); color: #f472b6; }
+    .tag-default { background: var(--bg-secondary); color: var(--text-muted); }
+    .agent-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-top: 14px;
+      border-top: 1px solid var(--border);
+    }
+    .agent-downloads {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: var(--text-muted);
+      font-size: 13px;
+    }
+    .agent-install {
+      background: var(--accent);
+      color: #ffffff;
+      padding: 6px 14px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-family: var(--font-display);
+      font-weight: 600;
+      transition: all 0.2s;
+    }
+    .agent-install:hover {
+      background: var(--accent-dark);
+      transform: translateY(-1px);
+    }
+    .agent-install:active {
+      transform: translateY(0);
+    }
+
+    /* API Box */
+    .api-box {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 32px;
+      margin-bottom: 60px;
+      position: relative;
+      overflow: hidden;
+    }
+    .api-box::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
+    }
+    .api-box h3 {
+      font-family: var(--font-display);
+      font-size: 17px;
+      margin-bottom: 6px;
+      letter-spacing: -0.3px;
+    }
+    .api-box p {
+      color: var(--text-secondary);
+      margin-bottom: 20px;
+      font-size: 14px;
+    }
+    .api-code {
+      background: var(--bg-code);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px 20px;
+      font-family: var(--font-display);
+      font-size: 13px;
+      color: var(--accent);
+      overflow-x: auto;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .api-code:hover {
+      border-color: var(--accent);
+      background: var(--bg-secondary);
+    }
+    .api-code .code-text {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .api-code .code-text::before {
+      content: '$';
+      color: var(--text-muted);
+      flex-shrink: 0;
+    }
+    .api-code .copy-btn {
+      background: transparent;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 4px 8px;
+      font-size: 12px;
+      color: var(--text-muted);
+      cursor: pointer;
+      transition: all 0.2s;
+      flex-shrink: 0;
+    }
+    .api-code .copy-btn:hover {
+      background: var(--accent);
+      color: var(--bg-primary);
+      border-color: var(--accent);
+    }
+    .api-code .copy-btn.copied {
+      background: #22c55e;
+      border-color: #22c55e;
+      color: white;
+    }
+
+    /* Detail Page */
+    .detail-header {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 32px;
+      margin-bottom: 24px;
+      position: relative;
+      overflow: hidden;
+    }
+    .detail-header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--accent), var(--accent-light));
+    }
+    .detail-title {
+      font-family: var(--font-display);
+      font-size: 28px;
+      font-weight: 700;
+      margin-bottom: 8px;
+      letter-spacing: -1px;
+    }
+    .detail-desc {
+      font-size: 16px;
+      color: var(--text-secondary);
+      margin-bottom: 20px;
+      line-height: 1.6;
+    }
+    .detail-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    .detail-item {
+      background: var(--bg-secondary);
+      padding: 16px;
+      border-radius: 8px;
+    }
+    .detail-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 6px;
+      font-weight: 500;
+    }
+    .detail-value {
+      font-family: var(--font-display);
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.5px;
+    }
+    .detail-install {
+      background: var(--bg-code);
+      border: 1px solid var(--border);
+      color: var(--accent);
+      padding: 14px 20px;
+      border-radius: 8px;
+      font-family: var(--font-display);
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .detail-install:hover {
+      border-color: var(--accent);
+      background: var(--bg-secondary);
+    }
+    .detail-install .code-text {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .detail-install .code-text::before {
+      content: "$";
+      color: var(--text-muted);
+      font-weight: bold;
+    }
+    .detail-install .copy-btn {
+      background: transparent;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 4px 10px;
+      font-size: 12px;
+      color: var(--text-muted);
+      cursor: pointer;
+      transition: all 0.2s;
+      flex-shrink: 0;
+    }
+    .detail-install .copy-btn:hover {
+      background: var(--accent);
+      color: var(--bg-primary);
+      border-color: var(--accent);
+    }
+    .detail-install .copy-btn.copied {
+      background: #22c55e;
+      border-color: #22c55e;
+      color: white;
+    }
+    .install-label {
+      font-size: 11px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 8px;
+    }
+    .install-methods {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .install-box {
+      position: relative;
+    }
+    .install-box.primary .detail-install {
+      border-color: var(--accent);
+      background: linear-gradient(135deg, rgba(var(--accent-rgb, 99, 102, 241), 0.1), transparent);
+    }
+    .install-box .badge-new {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      background: var(--accent);
+      color: white;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-weight: 500;
+    }
+
+    .section-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 24px;
+      margin-bottom: 20px;
+    }
+    .section-card h3 {
+      font-family: var(--font-display);
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 14px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      letter-spacing: -0.3px;
+    }
+    .back-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--text-secondary);
+      margin-bottom: 20px;
+      font-size: 14px;
+      transition: all 0.2s;
+    }
+    .back-link:hover {
+      color: var(--accent);
+      gap: 10px;
+    }
+
+    /* Memory bars */
+    .memory-bars {
+      display: flex;
+      gap: 3px;
+      height: 6px;
+      border-radius: 3px;
+      overflow: hidden;
+      margin-bottom: 10px;
+    }
+    .memory-bar { height: 100%; }
+    .memory-bar.public { background: var(--accent); }
+    .memory-bar.portable { background: var(--accent-light); }
+    .memory-bar.private { background: var(--tag-content); }
+    .memory-legend {
+      display: flex;
+      gap: 16px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+    .memory-legend span {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .memory-legend .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    /* Skills & Tags */
+    .skills-list, .tags-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    .badge {
+      padding: 5px 10px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-family: var(--font-display);
+      font-weight: 500;
+    }
+    .badge-skill { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
+    .badge-tag { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
+
+    /* Requirements */
+    .requirements-list {
+      list-style: none;
+    }
+    .requirements-list li {
+      padding: 10px 0;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+    }
+    .requirements-list li:last-child {
+      border-bottom: none;
+    }
+    .env-var {
+      font-family: var(--font-display);
+      background: var(--bg-secondary);
+      padding: 3px 8px;
+      border-radius: 4px;
+      color: var(--accent);
+      font-size: 12px;
+    }
+
+    /* Stats Page */
+    .stats-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 14px;
+    }
+    .stats-table th, .stats-table td {
+      padding: 14px 12px;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    .stats-table th {
+      font-family: var(--font-display);
+      color: var(--text-muted);
+      font-weight: 600;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .stats-table a {
+      color: var(--accent);
+      font-family: var(--font-display);
+    }
+    .stats-table a:hover {
+      text-decoration: underline;
+    }
+
+    /* How it works */
+    .how-it-works {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 24px;
+      margin-bottom: 60px;
+    }
+    .step {
+      text-align: center;
+    }
+    .step-number {
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
+      color: #ffffff;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--font-display);
+      font-size: 16px;
+      font-weight: 700;
+      margin: 0 auto 14px;
+    }
+    .step h4 {
+      font-family: var(--font-display);
+      font-size: 16px;
+      margin-bottom: 6px;
+      letter-spacing: -0.3px;
+    }
+    .step p {
+      color: var(--text-secondary);
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    /* Search */
+    .search-box {
+      display: flex;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 5px;
+      max-width: 480px;
+      margin: 0 auto 32px;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    .search-box:focus-within {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-glow);
+    }
+    .search-box input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      padding: 10px 14px;
+      font-size: 14px;
+      font-family: var(--font-body);
+      color: var(--text-primary);
+      outline: none;
+    }
+    .search-box input::placeholder {
+      color: var(--text-muted);
+    }
+    .search-box button {
+      background: var(--accent);
+      color: #ffffff;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 6px;
+      font-family: var(--font-display);
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .search-box button:hover {
+      background: var(--accent-dark);
+    }
+    .search-box button:active {
+      transform: scale(0.97);
+    }
+
+    /* Empty state */
+    .empty-state {
+      text-align: center;
+      padding: 48px 20px;
+      color: var(--text-muted);
+    }
+    .empty-state h3 {
+      font-family: var(--font-display);
+      font-size: 17px;
+      margin-bottom: 6px;
+      color: var(--text-primary);
+    }
+    .empty-state p {
+      font-size: 14px;
+    }
+
+    /* Footer */
+    footer {
+      border-top: 1px solid var(--border);
+      padding: 32px 0;
+      margin-top: 60px;
+      background: var(--bg-secondary);
+    }
+    .footer-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+    .footer-brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .footer-brand-icon {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+    }
+    .footer-brand-text {
+      font-family: var(--font-display);
+      font-weight: 600;
+      font-size: 15px;
+      color: var(--text-primary);
+    }
+    .footer-powered {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+    .footer-powered a {
+      color: var(--accent);
+      font-weight: 500;
+    }
+    .footer-links {
+      display: flex;
+      gap: 20px;
+    }
+    .footer-links a {
+      color: var(--text-secondary);
+      font-size: 13px;
+      font-family: var(--font-display);
+      transition: color 0.2s;
+    }
+    .footer-links a:hover {
+      color: var(--accent);
+    }
+
+    @media (max-width: 768px) {
+      .hero { padding: 48px 16px 36px; }
+      .hero h1 { font-size: clamp(28px, 6vw, 36px); }
+      .hero-subtitle { font-size: 15px; padding: 0 12px; }
+      .hero-stats { gap: 28px; flex-wrap: wrap; }
+      .hero-stat-value { font-size: 26px; }
+      .features { grid-template-columns: 1fr; gap: 12px; }
+      .how-it-works { grid-template-columns: 1fr; gap: 20px; }
+      .detail-grid { grid-template-columns: 1fr; }
+      .agent-grid { grid-template-columns: 1fr; }
+      .footer-content { flex-direction: column; text-align: center; gap: 16px; }
+
+      /* Mobile navigation */
+      .header-content { flex-wrap: wrap; gap: 10px; }
+      .nav-links {
+        order: 3;
+        width: 100%;
+        justify-content: center;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      .nav-links a { font-size: 13px; }
+      .nav-powered { display: none; }
+      .logo { font-size: 18px; }
+      .logo-icon { width: 30px; height: 30px; font-size: 16px; }
+      .container { padding: 0 16px; }
+      .detail-header { padding: 20px; }
+      .detail-title { font-size: 22px; }
+      .section-card { padding: 18px; }
+      .search-box { margin: 0 0 24px; }
+      .api-box { padding: 20px; }
+      .api-code { font-size: 11px; padding: 14px; }
+      .stats-table th, .stats-table td { padding: 10px 8px; font-size: 12px; }
+      .step-number { width: 36px; height: 36px; font-size: 14px; }
+      .step h4 { font-size: 14px; }
+    }
+
+    @media (max-width: 480px) {
+      .theme-btn { width: 30px; height: 30px; font-size: 14px; }
+      .hero-stat-value { font-size: 22px; }
+      .hero-stat-label { font-size: 10px; }
+      .nav-links { gap: 12px; }
+      .nav-links a { font-size: 12px; }
+      .section-title { font-size: 17px; }
+      .feature-card { padding: 18px; }
+      .feature-icon { font-size: 24px; }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="container header-content">
+      <a href="/" class="logo">
+        <div class="logo-icon">🦀</div>
+        <span>AgentHub</span>
+      </a>
+      <nav class="nav-links">
+        <a href="/"><span data-i18n="navHome">Home</span></a>
+        <a href="/stats"><span data-i18n="navStats">Stats</span></a>
+        <a href="https://github.com/itshaungmu/AgentHub" target="_blank">GitHub</a>
+        <div class="nav-powered">
+          <span>🦀</span>
+          <span>Powered by</span>
+          <a href="https://github.com/openclaw" target="_blank">OpenClaw</a>
+        </div>
+        <div class="lang-switcher">
+          <button class="lang-btn active" data-lang="en" onclick="setLang('en')">EN</button>
+          <button class="lang-btn" data-lang="zh" onclick="setLang('zh')">中文</button>
+        </div>
+        <button class="theme-btn" onclick="toggleTheme()" aria-label="Switch theme">🌙</button>
+      </nav>
+    </div>
+  </header>
+  <main class="container">${body}</main>
+  <footer>
+    <div class="container footer-content">
+      <div class="footer-brand">
+        <div class="footer-brand-icon">🦀</div>
+        <span class="footer-brand-text">AgentHub</span>
+      </div>
+      <div class="footer-powered">
+        <span>Powered by</span>
+        <a href="https://github.com/openclaw" target="_blank">OpenClaw</a>
+        <span>•</span>
+        <span>Built with ❤️ for AI Agents</span>
+      </div>
+      <div class="footer-links">
+        <a href="https://github.com/openclaw" target="_blank">OpenClaw</a>
+        <a href="https://github.com/itshaungmu/AgentHub" target="_blank">AgentHub</a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>
+${langScript}`;
+}
+
+export function renderAgentListPage({ query, agents, totalDownloads, apiBase }) {
+  const agentCount = agents.length;
+
+  const features = `
+    <div class="features">
+      <div class="feature-card">
+        <div class="feature-icon">📦</div>
+        <div class="feature-title" data-i18n="feature1Title">Ready to Use</div>
+        <div class="feature-desc" data-i18n="feature1Desc">Skip complex configurations, get battle-tested AI Agent setups</div>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">⚡</div>
+        <div class="feature-title" data-i18n="feature2Title">Instant Deploy</div>
+        <div class="feature-desc" data-i18n="feature2Desc">One-click install, deploy in minutes, start working immediately</div>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">🔄</div>
+        <div class="feature-title" data-i18n="feature3Title">Version Control</div>
+        <div class="feature-desc" data-i18n="feature3Desc">Auto-update pushes, always stay with the latest capabilities</div>
+      </div>
+    </div>
+  `;
+
+  const cards = agents.map(agent => {
+    const tags = agent.metadata?.tags || [];
+    const category = agent.metadata?.category || 'default';
+
+    const tagClass = {
+      'ops': 'tag-ops',
+      'engineering': 'tag-engineering',
+      'content': 'tag-content',
+      'product': 'tag-product'
+    }[category] || 'tag-default';
+
+    return `
+      <article class="agent-card" onclick="window.location='/agents/${agent.slug}'">
+        <div class="agent-header">
+          <a href="/agents/${agent.slug}" class="agent-name" onclick="event.stopPropagation()">${agent.name || agent.slug}</a>
+          <span class="agent-version">v${agent.version}</span>
+        </div>
+        <p class="agent-desc">${agent.description || 'A powerful AI Agent'}</p>
+        <div class="agent-meta">
+          <span class="agent-tag ${tagClass}">${category}</span>
+          ${tags.slice(0, 2).map(t => `<span class="agent-tag tag-default">${t}</span>`).join('')}
+        </div>
+        <div class="agent-footer">
+          <span class="agent-downloads">
+            <span>⬇️</span> ${agent.downloads || 0} <span data-i18n="downloads">downloads</span>
+          </span>
+          <span class="agent-install" data-i18n="install">Install</span>
+        </div>
+      </article>
+    `;
+  }).join('');
+
+  const howItWorks = `
+    <div class="section">
+      <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">
+          <div class="step-number">1</div>
+          <h4 data-i18n="step1Title">Browse & Discover</h4>
+          <p data-i18n="step1Desc">Find the Agent that fits your workflow</p>
+        </div>
+        <div class="step">
+          <div class="step-number">2</div>
+          <h4 data-i18n="step2Title">One-Click Install</h4>
+          <p data-i18n="step2Desc">Run the install command, deploy in minutes</p>
+        </div>
+        <div class="step">
+          <div class="step-number">3</div>
+          <h4 data-i18n="step3Title">Start Working</h4>
+          <p data-i18n="step3Desc">Your AI assistant is ready, start delegating tasks</p>
+        </div>
+      </div>
+    </div>
+  `;
+
+  const apiBox = `
+    <div class="api-box">
+      <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">
+        <span class="code-text">curl -s https://raw.githubusercontent.com/itshaungmu/AgentHub/main/skills/agenthub-discover/SKILL.md</span>
+        <button class="copy-btn" title="Copy">📋</button>
+      </div>
+    </div>
+  `;
+
+  return page(
+    "AgentHub - AI Agent Open Source Community",
+    `
+    <section class="hero">
+      <h1 data-i18n="heroTitle">AgentHub</h1>
+      <p class="hero-subtitle" data-i18n="heroSubtitle">The Open Source Marketplace for AI Agents. Package and upload your Agent's full capabilities in one command, download and gain those powers with one click.</p>
+      <div class="hero-stats">
+        <div class="hero-stat">
+          <div class="hero-stat-value">${agentCount}</div>
+          <div class="hero-stat-label" data-i18n="statAgents">Available Agents</div>
+        </div>
+        <div class="hero-stat">
+          <div class="hero-stat-value">${totalDownloads || 0}</div>
+          <div class="hero-stat-label" data-i18n="statDownloads">Total Downloads</div>
+        </div>
+        <div class="hero-stat">
+          <div class="hero-stat-value">100%</div>
+          <div class="hero-stat-label" data-i18n="statOpenSource">Open Source</div>
+        </div>
+      </div>
+      ${features}
+    </section>
+
+    ${apiBox}
+
+    <section class="section">
+      <div class="section-header">
+        <h2 class="section-title" data-i18n="sectionHotAgents">Hot Agents</h2>
+        <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..." />
+        <button type="submit" data-i18n="searchButton">Search</button>
+      </form>
+      <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>
+    </section>
+
+    ${howItWorks}
+    `,
+    {
+      description: "AgentHub - The Open Source Marketplace for AI Agents. Package and upload your Agent's full capabilities in one command, download and gain those powers with one click.",
+      url: "https://agenthub.cyou/"
+    }
+  );
+}
+
+export function renderAgentDetailPage(manifest) {
+  const memoryInfo = manifest.includes?.memory || {};
+  const runtimeInfo = manifest.runtime || {};
+  const skills = manifest.includes?.skills || [];
+  const tags = manifest.metadata?.tags || [];
+  const requirements = manifest.requirements || {};
+  const persona = manifest.persona || {};
+
+  const totalMemory = memoryInfo.count || 0;
+  const publicRatio = totalMemory > 0 ? (memoryInfo.public || 0) / totalMemory : 0;
+  const portableRatio = totalMemory > 0 ? (memoryInfo.portable || 0) / totalMemory : 0;
+  const privateRatio = totalMemory > 0 ? (memoryInfo.private || 0) / totalMemory : 0;
+
+  const skillsHtml = skills.length > 0
+    ? skills.map(s => `<span class="badge badge-skill">${s}</span>`).join("")
+    : '<span style="color: var(--text-muted)">None</span>';
+
+  const tagsHtml = tags.length > 0
+    ? tags.map(t => `<span class="badge badge-tag">${t}</span>`).join("")
+    : '<span style="color: var(--text-muted)">None</span>';
+
+  const envVars = requirements.env || [];
+  const requirementsHtml = [];
+  if (envVars.length > 0) {
+    requirementsHtml.push('<li>🔐 <span data-i18n="requirementsEnv">Environment variables required:</span></li>');
+    for (const env of envVars) {
+      requirementsHtml.push(`<li style="padding-left: 20px;"><span class="env-var">${env}</span></li>`);
+    }
+  }
+  if (requirements.model) {
+    requirementsHtml.push(`<li>🤖 <span data-i18n="requirementsModel">Recommended model:</span> <span class="env-var">${requirements.model}</span></li>`);
+  }
+  if (requirements.openclaw) {
+    requirementsHtml.push(`<li>⚡ <span data-i18n="requirementsRuntime">Runtime version:</span> OpenClaw ${requirements.openclaw}</li>`);
+  }
+
+  return page(
+    `${manifest.name || manifest.slug} - AgentHub`,
+    `
+    <a href="/" class="back-link" data-i18n="backToHome">← Back to Home</a>
+
+    <div class="detail-header">
+      <h1 class="detail-title">${manifest.name || manifest.slug}</h1>
+      <p class="detail-desc">${manifest.description || 'A powerful AI Agent'}</p>
+      <div class="detail-grid">
+        <div class="detail-item">
+          <div class="detail-label" data-i18n="detailVersion">Version</div>
+          <div class="detail-value">${manifest.version}</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label" data-i18n="detailRuntime">Runtime</div>
+          <div class="detail-value">${runtimeInfo.type || 'OpenClaw'}</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label" data-i18n="detailDownloads">Downloads</div>
+          <div class="detail-value">⬇️ ${manifest.downloads || 0}</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label" data-i18n="detailAuthor">Author</div>
+          <div class="detail-value">${manifest.author || 'Anonymous'}</div>
+        </div>
+      </div>
+      <div class="detail-install" title="Click to copy">
+        <span class="code-text">npx agenthub install ${manifest.slug}</span>
+        <button class="copy-btn" title="Copy">📋</button>
+      </div>
+    </div>
+
+    ${persona.summary ? `
+    <div class="section-card">
+      <h3 data-i18n="personaTitle">🎭 Personality</h3>
+      <p style="color: var(--text-secondary); line-height: 1.8;">${persona.summary}</p>
+      ${persona.traits?.length > 0 ? `<p style="margin-top: 12px;"><strong data-i18n="personaTraits">Traits:</strong> ${persona.traits.join(', ')}</p>` : ''}
+      ${persona.expertise?.length > 0 ? `<p><strong data-i18n="personaExpertise">Expertise:</strong> ${persona.expertise.join(', ')}</p>` : ''}
+    </div>
+    ` : ''}
+
+    <div class="section-card">
+      <h3 data-i18n="memoryTitle">🧠 Memory Config</h3>
+      ${totalMemory > 0 ? `
+        <div class="memory-bars">
+          <div class="memory-bar public" style="flex: ${publicRatio}" title="Public"></div>
+          <div class="memory-bar portable" style="flex: ${portableRatio}" title="Portable"></div>
+          ${privateRatio > 0 ? `<div class="memory-bar private" style="flex: ${privateRatio}" title="Private"></div>` : ''}
+        </div>
+        <div class="memory-legend">
+          <span><span class="dot" style="background: var(--accent)"></span> <span data-i18n="memoryPublic">Public</span>: ${memoryInfo.public || 0}</span>
+          <span><span class="dot" style="background: var(--accent-light)"></span> <span data-i18n="memoryPortable">Portable</span>: ${memoryInfo.portable || 0}</span>
+          ${memoryInfo.private > 0 ? `<span><span class="dot" style="background: var(--tag-content)"></span> <span data-i18n="memoryPrivate">Private</span>: ${memoryInfo.private || 0}</span>` : ''}
+        </div>
+      ` : '<p style="color: var(--text-muted);" data-i18n="memoryNoData">No memory data</p>'}
+    </div>
+
+    <div class="section-card">
+      <h3 data-i18n="skillsTitle">🔧 Skills</h3>
+      <div class="skills-list">${skillsHtml}</div>
+    </div>
+
+    <div class="section-card">
+      <h3 data-i18n="tagsTitle">🏷️ Tags</h3>
+      <div class="tags-list">${tagsHtml}</div>
+    </div>
+
+    <div class="section-card">
+      <h3 data-i18n="requirementsTitle">⚙️ System Requirements</h3>
+      ${requirementsHtml.length > 0 ? `<ul class="requirements-list">${requirementsHtml.join('')}</ul>` : '<p style="color: var(--text-muted);" data-i18n="requirementsNone">No special requirements</p>'}
+    </div>
+
+    <div class="section-card">
+      <h3 data-i18n="installMethodTitle">📥 Installation</h3>
+      <p style="color: var(--text-secondary); margin-bottom: 16px;" data-i18n="installMethodDesc">Run in your workspace:</p>
+      <div class="install-methods">
+        <div class="install-box primary">
+          <span class="badge-new">推荐</span>
+          <div class="install-label">npx (无需预安装)</div>
+          <div class="detail-install" title="Click to copy">
+            <span class="code-text">npx agenthub install ${manifest.slug} --target-workspace ./my-workspace</span>
+            <button class="copy-btn" title="Copy">📋</button>
+          </div>
+        </div>
+        <div class="install-box">
+          <div class="install-label">已有 CLI</div>
+          <div class="detail-install" title="Click to copy">
+            <span class="code-text">agenthub install ${manifest.slug}@${manifest.version} --target-workspace ./my-workspace</span>
+            <button class="copy-btn" title="Copy">📋</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    `,
+    {
+      description: manifest.description || `${manifest.name || manifest.slug} - AI Agent on AgentHub. ${manifest.persona?.summary || ''}`.slice(0, 160),
+      url: `https://agenthub.cyou/agents/${manifest.slug}`,
+      type: "article"
+    }
+  );
+}
+
+export function renderStatsPage(statsData) {
+  const { stats, ranking, recent } = statsData;
+
+  const rankingHtml = ranking.map((item, index) => `
+    <tr>
+      <td>${index + 1}</td>
+      <td><a href="/agents/${item.slug}">${item.slug}</a></td>
+      <td><strong>${item.downloads}</strong></td>
+      <td style="color: var(--text-muted)">${item.lastDownload || '-'}</td>
+    </tr>
+  `).join('');
+
+  const recentHtml = recent.map(item => `
+    <tr>
+      <td><a href="/agents/${item.slug}">${item.slug}</a></td>
+      <td style="color: var(--text-muted)">${item.installedAt || '-'}</td>
+      <td><code style="color: var(--accent)">${item.targetWorkspace || '-'}</code></td>
+    </tr>
+  `).join('');
+
+  return page(
+    "Statistics Center - AgentHub",
+    `
+    <a href="/" class="back-link" data-i18n="backToHome">← Back to Home</a>
+
+    <div class="detail-header">
+      <h1 class="detail-title" data-i18n="statsHeader">📊 Statistics Center</h1>
+      <p class="detail-desc" data-i18n="statsDesc">AgentHub download statistics and data analysis</p>
+      <div class="detail-grid">
+        <div class="detail-item">
+          <div class="detail-label" data-i18n="statsTotalAgents">Agent Count</div>
+          <div class="detail-value">${stats.totalAgents}</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label" data-i18n="statsTotalDownloads">Total Downloads</div>
+          <div class="detail-value">⬇️ ${stats.totalDownloads}</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label" data-i18n="statsTotalLogs">Download Logs</div>
+          <div class="detail-value">${stats.totalLogs}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="section-card">
+      <h3 data-i18n="rankingTitle">🏆 Download Ranking</h3>
+      <table class="stats-table">
+        <thead>
+          <tr>
+            <th data-i18n="rankingRank">Rank</th>
+            <th data-i18n="rankingAgent">Agent</th>
+            <th data-i18n="rankingDownloads">Downloads</th>
+            <th data-i18n="rankingLastDownload">Last Download</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rankingHtml || `<tr><td colspan="4" style="text-align: center; padding: 20px; color: var(--text-muted);" data-i18n="noData">No data</td></tr>`}
+        </tbody>
+      </table>
+    </div>
+
+    <div class="section-card">
+      <h3 data-i18n="recentTitle">📋 Recent Downloads</h3>
+      <table class="stats-table">
+        <thead>
+          <tr>
+            <th data-i18n="recentAgent">Agent</th>
+            <th data-i18n="recentTime">Time</th>
+            <th data-i18n="recentTarget">Target Path</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${recentHtml || `<tr><td colspan="3" style="text-align: center; padding: 20px; color: var(--text-muted);" data-i18n="noData">No data</td></tr>`}
+        </tbody>
+      </table>
+    </div>
+    `,
+    {
+      description: "AgentHub Statistics Center - View download rankings, recent activity, and platform analytics for AI Agents.",
+      url: "https://agenthub.cyou/stats"
+    }
+  );
+}