npm - foliko - Versions diffs - 2.0.5 → 2.0.7 - Mend

foliko 2.0.5 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/.claude/settings.local.json +4 -1
package/.cli_default_systemPrompt.md +291 -0
package/CLAUDE.md +3 -0
package/README.md +20 -3
package/docs/architecture.md +34 -2
package/docs/extensions.md +199 -0
package/docs/migration.md +100 -0
package/docs/public-api.md +280 -24
package/docs/usage.md +122 -30
package/package.json +1 -1
package/plugins/core/audit/index.js +1 -1
package/plugins/core/default/bootstrap.js +44 -19
package/plugins/core/python-loader/index.js +43 -25
package/plugins/core/scheduler/index.js +1 -0
package/plugins/core/skill-manager/PROMPT.md +6 -0
package/plugins/core/skill-manager/index.js +402 -115
package/plugins/core/sub-agent/PROMPT.md +10 -0
package/plugins/core/sub-agent/index.js +36 -3
package/plugins/core/think/index.js +1 -0
package/plugins/core/workflow/context.js +941 -0
package/plugins/core/workflow/engine.js +66 -0
package/plugins/core/workflow/examples/01-basic.js +42 -0
package/plugins/core/workflow/examples/01-basic.json +30 -0
package/plugins/core/workflow/examples/02-choice.js +75 -0
package/plugins/core/workflow/examples/02-choice.json +59 -0
package/plugins/core/workflow/examples/03-chain-style.js +114 -0
package/plugins/core/workflow/examples/03-each.json +41 -0
package/plugins/core/workflow/examples/04-parallel.js +52 -0
package/plugins/core/workflow/examples/04-parallel.json +51 -0
package/plugins/core/workflow/examples/05-chain-style.json +68 -0
package/plugins/core/workflow/examples/05-each.js +65 -0
package/plugins/core/workflow/examples/06-script.js +82 -0
package/plugins/core/workflow/examples/07-module-export.js +43 -0
package/plugins/core/workflow/examples/08-default-export.js +29 -0
package/plugins/core/workflow/examples/09-next-with-args.js +50 -0
package/plugins/core/workflow/examples/10-logger.js +34 -0
package/plugins/core/workflow/examples/11-storage.js +68 -0
package/plugins/core/workflow/examples/simple.js +77 -0
package/plugins/core/workflow/examples/simple.json +75 -0
package/plugins/core/workflow/index.js +204 -78
package/plugins/core/workflow/js-runner.js +318 -0
package/plugins/core/workflow/json-runner.js +323 -0
package/plugins/core/workflow/stages/action.js +211 -0
package/plugins/core/workflow/stages/choice.js +74 -0
package/plugins/core/workflow/stages/delay.js +73 -0
package/plugins/core/workflow/stages/each.js +123 -0
package/plugins/core/workflow/stages/parallel.js +69 -0
package/plugins/core/workflow/stages/try.js +142 -0
package/plugins/executors/data-splitter/PROMPT.md +13 -0
package/plugins/executors/data-splitter/index.js +8 -6
package/plugins/executors/extension/extension-registry.js +145 -0
package/plugins/executors/extension/index.js +405 -437
package/plugins/executors/extension/prompt-builder.js +359 -0
package/plugins/executors/extension/skill-helper.js +143 -0
package/plugins/messaging/feishu/index.js +5 -3
package/plugins/messaging/qq/index.js +6 -4
package/plugins/messaging/telegram/index.js +6 -3
package/plugins/messaging/weixin/index.js +5 -3
package/plugins/tools/PROMPT.md +26 -0
package/plugins/tools/index.js +6 -5
package/sandbox/check-context.js +5 -0
package/sandbox/test-context.js +27 -0
package/sandbox/test-fixes.js +40 -0
package/sandbox/test-hello-js.js +46 -0
package/skills/foliko/AGENTS.md +196 -43
package/skills/foliko/SKILL.md +157 -28
package/skills/mcp/SKILL.md +77 -118
package/skills/plugins/SKILL.md +89 -3
package/skills/python/SKILL.md +57 -39
package/skills/skill-guide/SKILL.md +42 -34
package/skills/workflows/SKILL.md +753 -436
package/src/agent/chat.js +56 -28
package/src/agent/main.js +39 -14
package/src/agent/prompt-registry.js +56 -16
package/src/agent/prompts/PROMPT.md +3 -0
package/src/agent/sub.js +1 -1
package/src/cli/ui/chat-ui-old.js +5 -2
package/src/cli/ui/chat-ui.js +9 -5
package/src/common/constants.js +12 -0
package/src/common/error-capture.js +91 -0
package/src/common/json-safe.js +20 -0
package/src/common/logger.js +2 -2
package/src/context/compressor.js +6 -2
package/src/executors/mcp-executor.js +105 -125
package/src/framework/framework.js +78 -12
package/src/index.js +4 -0
package/src/plugin/base.js +908 -5
package/src/plugin/manager.js +124 -9
package/src/tool/schema.js +32 -9
package/src/utils/sandbox.js +1 -1
package/website/index.html +821 -0
package/skills/workflows/workflow-troubleshooting/DEBUGGING.md +0 -197
package/skills/workflows/workflow-troubleshooting/SKILL.md +0 -391

package/website/index.html ADDED Viewed

@@ -0,0 +1,821 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Foliko — 简约的插件化 Agent 框架</title>
+  <meta name="description" content="Foliko 是一个纯 JavaScript 编写的插件化 Agent 框架，支持多 AI 提供商、流式输出、工具调用、工作流自动化。">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --primary: #2A9D8F;
+      --primary-dark: #238B7E;
+      --primary-light: #3DB8A8;
+      --gold: #E9C46A;
+      --sand: #F4F1DE;
+      --terracotta: #E76F51;
+      --dim: #6B7280;
+      --dark: #1a2332;
+      --darker: #111827;
+      --card-bg: rgba(255,255,255,0.04);
+      --card-border: rgba(255,255,255,0.08);
+      --text: #F9FAFB;
+      --text-secondary: #9CA3AF;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Inter', -apple-system, sans-serif;
+      background: var(--darker);
+      color: var(--text);
+      line-height: 1.6;
+      overflow-x: hidden;
+    }
+    a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
+    a:hover { color: var(--primary-light); }
+    /* NAV */
+    nav {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      background: rgba(17,24,39,0.85);
+      backdrop-filter: blur(16px);
+      border-bottom: 1px solid var(--card-border);
+      padding: 0 2rem;
+    }
+    nav .inner {
+      max-width: 1200px; margin: 0 auto;
+      display: flex; align-items: center; justify-content: space-between;
+      height: 64px;
+    }
+    nav .logo { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
+    nav .logo span { color: var(--primary); }
+    nav .links { display: flex; gap: 2rem; align-items: center; }
+    nav .links a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; }
+    nav .links a:hover { color: var(--text); }
+    nav .cta-btn {
+      background: var(--primary); color: #fff !important;
+      padding: 0.45rem 1.2rem; border-radius: 8px;
+      font-weight: 600 !important; font-size: 0.85rem !important;
+      transition: background 0.2s !important;
+    }
+    nav .cta-btn:hover { background: var(--primary-dark) !important; color: #fff !important; }
+    /* HERO */
+    .hero {
+      min-height: 100vh;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      text-align: center; padding: 8rem 2rem 4rem;
+      position: relative; overflow: hidden;
+    }
+    .hero::before {
+      content: '';
+      position: absolute; inset: 0;
+      background:
+        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(42,157,143,0.18) 0%, transparent 70%),
+        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(231,111,81,0.08) 0%, transparent 60%);
+      pointer-events: none;
+    }
+    .hero-badge {
+      display: inline-flex; align-items: center; gap: 0.5rem;
+      background: rgba(42,157,143,0.15); border: 1px solid rgba(42,157,143,0.3);
+      color: var(--primary-light); font-size: 0.8rem; font-weight: 600;
+      padding: 0.35rem 1rem; border-radius: 999px;
+      margin-bottom: 2rem; letter-spacing: 0.05em; text-transform: uppercase;
+    }
+    .hero-badge .dot { width: 6px; height: 6px; background: var(--primary-light); border-radius: 50%; animation: pulse 2s infinite; }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+    .hero h1 {
+      font-size: clamp(3rem, 8vw, 5.5rem);
+      font-weight: 800; letter-spacing: -0.04em; line-height: 1.05;
+      margin-bottom: 1.5rem;
+    }
+    .hero h1 .gradient {
+      background: linear-gradient(135deg, #fff 0%, var(--primary-light) 50%, var(--gold) 100%);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .hero .subtitle {
+      font-size: clamp(1.1rem, 2.5vw, 1.35rem);
+      color: var(--text-secondary); max-width: 620px;
+      margin-bottom: 3rem; font-weight: 300; line-height: 1.7;
+    }
+    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: 3rem; }
+    .btn {
+      display: inline-flex; align-items: center; gap: 0.5rem;
+      padding: 0.75rem 1.75rem; border-radius: 10px;
+      font-weight: 600; font-size: 0.95rem; cursor: pointer;
+      border: none; transition: all 0.2s;
+    }
+    .btn-primary { background: var(--primary); color: #fff; }
+    .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); color: #fff; }
+    .btn-ghost {
+      background: var(--card-bg); border: 1px solid var(--card-border);
+      color: var(--text); backdrop-filter: blur(8px);
+    }
+    .btn-ghost:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); color: var(--text); }
+    .hero-code {
+      background: rgba(0,0,0,0.4); border: 1px solid var(--card-border);
+      border-radius: 14px; padding: 1.5rem 2rem;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.875rem; color: #a8b5c4;
+      max-width: 700px; width: 100%;
+      text-align: left; position: relative;
+      backdrop-filter: blur(8px);
+    }
+    .hero-code .kw { color: var(--primary-light); }
+    .hero-code .str { color: var(--gold); }
+    .hero-code .cm { color: #555; font-style: italic; }
+    .hero-code .fn { color: var(--terracotta); }
+    .hero-code .dot { color: #93c5fd; }
+    .hero-code .num { color: #f97316; }
+    .hero-scroll {
+      margin-top: 5rem; color: var(--dim); font-size: 0.8rem;
+      display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
+      animation: bounce 2s infinite;
+    }
+    @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
+    /* SECTIONS */
+    .section { padding: 7rem 2rem; }
+    .section-inner { max-width: 1200px; margin: 0 auto; }
+    .section-label {
+      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
+      text-transform: uppercase; color: var(--primary); margin-bottom: 0.75rem;
+    }
+    .section-title {
+      font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800;
+      letter-spacing: -0.03em; margin-bottom: 1rem; line-height: 1.15;
+    }
+    .section-desc { color: var(--text-secondary); font-size: 1.1rem; max-width: 560px; margin-bottom: 4rem; font-weight: 300; }
+    .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--card-border), transparent); max-width: 1200px; margin: 0 auto; }
+    /* FEATURES */
+    .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
+    .feature-card {
+      background: var(--card-bg); border: 1px solid var(--card-border);
+      border-radius: 16px; padding: 1.75rem;
+      transition: all 0.25s;
+    }
+    .feature-card:hover { border-color: rgba(42,157,143,0.4); background: rgba(42,157,143,0.06); transform: translateY(-3px); }
+    .feature-icon {
+      width: 44px; height: 44px; border-radius: 10px;
+      background: rgba(42,157,143,0.15);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.3rem; margin-bottom: 1.1rem;
+    }
+    .feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
+    .feature-card p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; }
+    /* ARCH DIAGRAM */
+    .arch-diagram {
+      background: var(--card-bg); border: 1px solid var(--card-border);
+      border-radius: 20px; padding: 2rem 2.5rem; margin-top: 2rem;
+      font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
+    }
+    .layer { margin-bottom: 1rem; }
+    .layer-label {
+      font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em;
+      color: var(--primary); font-weight: 700; margin-bottom: 0.5rem;
+    }
+    .layer-items { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+    .arch-item {
+      background: rgba(42,157,143,0.1); border: 1px solid rgba(42,157,143,0.25);
+      border-radius: 6px; padding: 0.35rem 0.7rem;
+      color: var(--primary-light); font-size: 0.75rem;
+    }
+    /* CODE BLOCK */
+    .code-block {
+      background: rgba(0,0,0,0.5); border: 1px solid var(--card-border);
+      border-radius: 14px; padding: 1.25rem 1.75rem;
+      font-family: 'JetBrains Mono', monospace; font-size: 0.82rem;
+      overflow-x: auto; position: relative;
+    }
+    .code-block .copy-btn {
+      position: absolute; top: 0.6rem; right: 0.6rem;
+      background: rgba(255,255,255,0.08); border: 1px solid var(--card-border);
+      border-radius: 6px; padding: 0.2rem 0.55rem;
+      font-size: 0.68rem; color: var(--text-secondary); cursor: pointer;
+      transition: all 0.2s; font-family: 'Inter', sans-serif;
+    }
+    .code-block .copy-btn:hover { background: rgba(255,255,255,0.14); color: var(--text); }
+    .code-block .kw { color: var(--primary-light); }
+    .code-block .str { color: var(--gold); }
+    .code-block .cm { color: #555; font-style: italic; }
+    .code-block .fn { color: var(--terracotta); }
+    .code-block .dot { color: #93c5fd; }
+    .code-block .num { color: #f97316; }
+    .code-block .tag { color: #f472b6; }
+    /* PLUGINS */
+    .plugin-tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
+    .plugin-tab {
+      padding: 0.5rem 1.25rem; border-radius: 8px; font-size: 0.85rem;
+      font-weight: 500; cursor: pointer; border: 1px solid var(--card-border);
+      background: var(--card-bg); color: var(--text-secondary);
+      transition: all 0.2s; font-family: 'Inter', sans-serif;
+    }
+    .plugin-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
+    .plugin-tab:hover:not(.active) { color: var(--text); }
+    .plugin-list { display: grid; gap: 0.75rem; }
+    .plugin-item {
+      display: flex; align-items: center; gap: 1rem;
+      background: var(--card-bg); border: 1px solid var(--card-border);
+      border-radius: 12px; padding: 0.9rem 1.25rem;
+    }
+    .plugin-item .p-name { font-weight: 600; font-size: 0.875rem; min-width: 160px; }
+    .plugin-item .p-desc { font-size: 0.8rem; color: var(--text-secondary); }
+    /* SKILLS */
+    .skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
+    .skill-card {
+      background: var(--card-bg); border: 1px solid var(--card-border);
+      border-radius: 16px; padding: 1.5rem; transition: all 0.25s;
+    }
+    .skill-card:hover { border-color: rgba(42,157,143,0.4); transform: translateY(-2px); }
+    .skill-card .skill-tag {
+      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em;
+      background: rgba(42,157,143,0.15); border: 1px solid rgba(42,157,143,0.25);
+      color: var(--primary-light); padding: 0.2rem 0.65rem;
+      border-radius: 999px; display: inline-block; margin-bottom: 0.75rem;
+    }
+    .skill-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
+    .skill-card p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; }
+    /* TWO COLUMN LAYOUT */
+    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
+    .info-card {
+      background: var(--card-bg); border: 1px solid var(--card-border);
+      border-radius: 16px; padding: 1.5rem;
+    }
+    .info-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; }
+    .info-card .item { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.9; }
+    .info-card .item .dot { color: var(--primary); margin-right: 0.4rem; }
+    /* INSTALL CARDS */
+    .install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
+    .install-card {
+      background: var(--card-bg); border: 1px solid var(--card-border);
+      border-radius: 14px; padding: 1.5rem;
+    }
+    .install-card h4 {
+      font-size: 0.78rem; font-weight: 700; margin-bottom: 0.75rem;
+      color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em;
+    }
+    .install-card pre {
+      background: rgba(0,0,0,0.35); border-radius: 8px;
+      padding: 0.75rem 1rem; font-size: 0.78rem; color: #a8b5c4;
+      border: 1px solid rgba(255,255,255,0.05); font-family: 'JetBrains Mono', monospace;
+      overflow-x: auto;
+    }
+    /* API TABLE */
+    .api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-top: 2rem; }
+    .api-card {
+      background: var(--card-bg); border: 1px solid var(--card-border);
+      border-radius: 12px; padding: 1.1rem 1.3rem;
+    }
+    .api-card .api-name { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--primary-light); font-weight: 600; }
+    .api-card .api-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.4rem; line-height: 1.6; }
+    /* FOOTER */
+    footer {
+      border-top: 1px solid var(--card-border);
+      padding: 3rem 2rem; text-align: center;
+      color: var(--dim); font-size: 0.8rem;
+    }
+    footer a { color: var(--dim); }
+    footer a:hover { color: var(--primary); }
+    /* ANIMATIONS */
+    .fade-in { opacity: 0; transform: translateY(24px); transition: all 0.7s cubic-bezier(0.16,1,0.3,1); }
+    .fade-in.visible { opacity: 1; transform: translateY(0); }
+    .delay-1 { transition-delay: 0.1s; }
+    .delay-2 { transition-delay: 0.2s; }
+    .delay-3 { transition-delay: 0.3s; }
+    /* MOBILE */
+    @media (max-width: 768px) {
+      nav .links { display: none; }
+      .hero { padding: 7rem 1.5rem 3rem; }
+      .install-grid, .two-col { grid-template-columns: 1fr; }
+      .features-grid { grid-template-columns: 1fr; }
+      .section { padding: 4rem 1.5rem; }
+    }
+  </style>
+</head>
+<body>
+<!-- NAV -->
+<nav>
+  <div class="inner">
+    <div class="logo">folio<span>ko</span></div>
+    <div class="links">
+      <a href="#features">特性</a>
+      <a href="#architecture">架构</a>
+      <a href="#plugins">插件</a>
+      <a href="#skills">技能</a>
+      <a href="#api">API</a>
+      <a href="#quickstart">快速开始</a>
+      <a href="https://github.com/folikoai/foliko" class="cta-btn" target="_blank">GitHub</a>
+    </div>
+  </div>
+</nav>
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-badge"><span class="dot"></span> v2.0 · 纯 JavaScript · 无 TypeScript 依赖</div>
+  <h1>Foliko</h1>
+  <p class="subtitle">
+    简约的插件化 Agent 框架。纯 JavaScript 编写，支持多 AI 提供商、流式输出、工具调用、工作流自动化与统一扩展调度。
+  </p>
+  <div class="hero-actions">
+    <a href="#quickstart" class="btn btn-primary">▶ 快速开始</a>
+    <a href="#architecture" class="btn btn-ghost">◎ 了解架构</a>
+  </div>
+  <div class="hero-code">
+    <span class="cm">// 安装</span><br>
+    <span class="kw">npm</span> install foliko<br><br>
+    <span class="cm">// 创建 Framework，链式加载插件</span><br>
+    <span class="kw">const</span> { createApp, withAI, bootstrap } = <span class="kw">require</span>(<span class="str">'foliko'</span>);<br><br>
+    <span class="kw">const</span> app = createApp({ debug: <span class="kw">true</span> });<br>
+    <span class="kw">await</span> app.<span class="dot">use</span>(withAI({<br>
+    &nbsp;&nbsp;provider: <span class="str">'deepseek'</span>,<br>
+    &nbsp;&nbsp;model: <span class="str">'deepseek-chat'</span>,<br>
+    &nbsp;&nbsp;apiKey: process.env.<span class="str">DEEPSEEK_API_KEY</span><br>
+    }));<br>
+    <span class="kw">await</span> bootstrap(app, { _config: { ai: {} } });<br><br>
+    <span class="cm">// 创建 Agent 并对话</span><br>
+    <span class="kw">const</span> agent = createAgent(app, { systemPrompt: <span class="str">'你是智能助手'</span> });<br>
+    <span class="kw">const</span> reply = <span class="kw">await</span> agent.<span class="dot">chat</span>(<span class="str">'解释量子计算'</span>);<br>
+    <span class="cm">// → 流式输出，实时响应</span>
+  </div>
+  <div class="hero-scroll">
+    <div>向下滚动了解更多</div><span>↓</span>
+  </div>
+</section>
+<!-- FEATURES -->
+<section class="section" id="features">
+  <div class="section-inner">
+    <div class="section-label">核心特性</div>
+    <h2 class="section-title">为什么选择 Foliko？</h2>
+    <p class="section-desc">轻量、灵活、可扩展。Foliko 帮你快速构建 AI 应用，无需复杂的工程化配置。</p>
+    <div class="features-grid">
+      <div class="feature-card fade-in">
+        <div class="feature-icon">🔌</div>
+        <h3>插件化架构</h3>
+        <p>核心保持简单，功能通过插件扩展。支持热重载，按需加载，开箱即用的插件生态。</p>
+      </div>
+      <div class="feature-card fade-in delay-1">
+        <div class="feature-icon">⚡</div>
+        <h3>流式输出</h3>
+        <p>实时流式响应，无需等待完整生成。支持 Markdown 渲染和代码高亮。</p>
+      </div>
+      <div class="feature-card fade-in delay-2">
+        <div class="feature-icon">🤖</div>
+        <h3>多 AI 支持</h3>
+        <p>统一接口对接 Anthropic、DeepSeek、OpenAI、MiniMax 等多提供商，轻松切换模型。</p>
+      </div>
+      <div class="feature-card fade-in">
+        <div class="feature-icon">🔧</div>
+        <h3>工具调用</h3>
+        <p>通过 Zod Schema 定义工具参数，自动调用 Shell、Python、文件系统等工具完成任务。</p>
+      </div>
+      <div class="feature-card fade-in delay-1">
+        <div class="feature-icon">🧩</div>
+        <h3>子 Agent 系统</h3>
+        <p>多 Agent 协作，任务委托。上下文三层隔离（Request / Session / Agent），互不干扰。</p>
+      </div>
+      <div class="feature-card fade-in delay-2">
+        <div class="feature-icon">📅</div>
+        <h3>定时调度</h3>
+        <p>内置 Cron 调度器，支持自然语言设置提醒："每天早上 9 点提醒我查邮件"。</p>
+      </div>
+      <div class="feature-card fade-in">
+        <div class="feature-icon">💬</div>
+        <h3>多渠道消息推送</h3>
+        <p>统一的消息推送，支持 Telegram、QQ、微信、企业微信、飞书、邮件。</p>
+      </div>
+      <div class="feature-card fade-in delay-1">
+        <div class="feature-icon">🔗</div>
+        <h3>MCP 协议集成</h3>
+        <p>支持 Model Context Protocol，可连接各种 MCP 服务器，扩展 AI 能力边界。</p>
+      </div>
+      <div class="feature-card fade-in delay-2">
+        <div class="feature-icon">🛡️</div>
+        <h3>规则引擎</h3>
+        <p>细粒度的权限和行为规则，内容过滤、敏感词检测、操作审计，开箱即用。</p>
+      </div>
+      <div class="feature-card fade-in">
+        <div class="feature-icon">🧠</div>
+        <h3>上下文压缩</h3>
+        <p>自动上下文压缩，控制 token 消耗。支持智能压缩策略，保留关键信息。</p>
+      </div>
+      <div class="feature-card fade-in delay-1">
+        <div class="feature-icon">📦</div>
+        <h3>工作流引擎</h3>
+        <p>结构化工作流执行，支持顺序、并行、条件分支，满足复杂自动化场景。</p>
+      </div>
+      <div class="feature-card fade-in delay-2">
+        <div class="feature-icon">🌙</div>
+        <h3>Ambient Agent</h3>
+        <p>后台自主运行，主动监控事件、思考下一步行动，无需人工干预的自动化 Agent。</p>
+      </div>
+    </div>
+  </div>
+</section>
+<div class="divider"></div>
+<!-- ARCHITECTURE -->
+<section class="section" id="architecture">
+  <div class="section-inner">
+    <div class="section-label">架构设计</div>
+    <h2 class="section-title">三层上下文隔离</h2>
+    <p class="section-desc">基于 AsyncLocalStorage 实现请求、会话、Agent 三层完全隔离，安全可靠。</p>
+    <div class="arch-diagram fade-in">
+      <div class="layer">
+        <div class="layer-label">Agent Context · Layer 3</div>
+        <div class="layer-items">
+          <span class="arch-item">agentId</span>
+          <span class="arch-item">tools</span>
+          <span class="arch-item">skills</span>
+          <span class="arch-item">systemPrompt</span>
+        </div>
+      </div>
+      <div style="color:#333;font-size:1.1rem;text-align:center;margin:0.3rem 0;">↓</div>
+      <div class="layer">
+        <div class="layer-label">Session Context · Layer 2</div>
+        <div class="layer-items">
+          <span class="arch-item">sessionId</span>
+          <span class="arch-item">variables</span>
+          <span class="arch-item">messageStore</span>
+          <span class="arch-item">metadata</span>
+        </div>
+      </div>
+      <div style="color:#333;font-size:1.1rem;text-align:center;margin:0.3rem 0;">↓</div>
+      <div class="layer">
+        <div class="layer-label">Request Context · Layer 1</div>
+        <div class="layer-items">
+          <span class="arch-item">requestId</span>
+          <span class="arch-item">traceId</span>
+          <span class="arch-item">timeout</span>
+          <span class="arch-item">startTime</span>
+        </div>
+      </div>
+    </div>
+    <div class="two-col fade-in">
+      <div class="info-card">
+        <h3>Framework 容器层</h3>
+        <div class="item"><span class="dot">•</span>pluginManager — 插件生命周期管理</div>
+        <div class="item"><span class="dot">•</span>toolRegistry — 工具注册与执行</div>
+        <div class="item"><span class="dot">•</span>promptRegistry — 系统提示词注册表</div>
+        <div class="item"><span class="dot">•</span>skillManager — 技能加载与命令</div>
+        <div class="item"><span class="dot">•</span>eventEmitter — 事件总线</div>
+      </div>
+      <div class="info-card">
+        <h3>Agent 对话层</h3>
+        <div class="item"><span class="dot">•</span>chat() / chatStream() — 发送消息</div>
+        <div class="item"><span class="dot">•</span>tools — 来自 Framework</div>
+        <div class="item"><span class="dot">•</span>events — 消息/工具事件</div>
+        <div class="item"><span class="dot">•</span>subAgent — 子 Agent 委托</div>
+        <div class="item"><span class="dot">•</span>消息队列自动管理</div>
+      </div>
+    </div>
+  </div>
+</section>
+<div class="divider"></div>
+<!-- PLUGINS -->
+<section class="section" id="plugins">
+  <div class="section-inner">
+    <div class="section-label">插件生态</div>
+    <h2 class="section-title">开箱即用的插件</h2>
+    <p class="section-desc">丰富的内置插件覆盖 AI、工具执行、消息推送、数据存储等场景。</p>
+    <div class="plugin-tabs" id="pluginTabs">
+      <button class="plugin-tab active" data-tab="core">核心</button>
+      <button class="plugin-tab" data-tab="executor">执行器</button>
+      <button class="plugin-tab" data-tab="messaging">消息</button>
+      <button class="plugin-tab" data-tab="io">文件/网络</button>
+      <button class="plugin-tab" data-tab="other">其他</button>
+    </div>
+    <div class="plugin-list" id="pluginList"></div>
+  </div>
+</section>
+<div class="divider"></div>
+<!-- SKILLS -->
+<section class="section" id="skills">
+  <div class="section-inner">
+    <div class="section-label">技能系统</div>
+    <h2 class="section-title">可扩展的 Skill 体系</h2>
+    <p class="section-desc">Skill 是可复用的技能模块，包含描述文档和可执行命令。通过 <code style="background:rgba(0,0,0,0.3);padding:0.15rem 0.4rem;border-radius:4px;">ext_call({ plugin: "skill:&lt;name&gt;", tool: "&lt;cmd&gt;", args: {...} })</code> 统一调度。</p>
+    <div class="skill-grid">
+      <div class="skill-card fade-in">
+        <div class="skill-tag">视频</div>
+        <h3>video-creator</h3>
+        <p>基于 FFmpeg 的视频生成技能，支持片头/内容页/片尾、TTS 字幕、背景音乐、转场动画。</p>
+      </div>
+      <div class="skill-card fade-in delay-1">
+        <div class="skill-tag">AI 绘画</div>
+        <h3>mmx-cli</h3>
+        <p>MiniMax AI 绘画命令行工具，支持文生图、图生图、风格迁移。</p>
+      </div>
+      <div class="skill-card fade-in delay-2">
+        <div class="skill-tag">搜索</div>
+        <h3>baidu-video-publisher</h3>
+        <p>百度视频素材搜索与发布，支持 Cookie 管理、视频下载、批量上传。</p>
+      </div>
+      <div class="skill-card fade-in">
+        <div class="skill-tag">开发</div>
+        <h3>skill-guide</h3>
+        <p>Foliko Skill 开发指南，教你如何编写自定义 Skill 并注册到框架中。</p>
+      </div>
+    </div>
+  </div>
+</section>
+<div class="divider"></div>
+<!-- UNIFIED EXTENSION CALL -->
+<section class="section" id="extensions">
+  <div class="section-inner">
+    <div class="section-label">扩展调用</div>
+    <h2 class="section-title">ext_call 统一扩展调度</h2>
+    <p class="section-desc">通过 <code style="background:rgba(0,0,0,0.3);padding:0.15rem 0.4rem;border-radius:4px;">ext_call</code> 一个工具调用所有扩展类型：MCP 服务器、Skill 命令、Python 插件、普通扩展。</p>
+    <div class="code-block fade-in" style="margin-bottom:1rem;">
+      <span class="cm">// ext_skill 查询扩展详情（必先调用）</span><br>
+      ext_skill({ plugin: <span class="str">"skill:my-skill"</span> })<br>
+      ext_skill({ plugin: <span class="str">"mcp:designmd"</span> })<br><br>
+      <span class="cm">// ext_call 调用扩展工具（plugin 格式决定类型）</span><br>
+      ext_call({<br>
+      &nbsp;&nbsp;plugin: <span class="str">"skill:my-skill"</span>,&nbsp;&nbsp;<span class="cm">// skill:&lt;name&gt; → Skill 命令</span><br>
+      &nbsp;&nbsp;tool: <span class="str">"greet"</span>,<br>
+      &nbsp;&nbsp;args: { command: <span class="str">"-n Alice -l en"</span> }<br>
+      })<br><br>
+      ext_call({<br>
+      &nbsp;&nbsp;plugin: <span class="str">"mcp:designmd"</span>,&nbsp;&nbsp;<span class="cm">// mcp:&lt;server&gt; → MCP 服务器</span><br>
+      &nbsp;&nbsp;tool: <span class="str">"search_design_kits"</span>,<br>
+      &nbsp;&nbsp;args: { query: <span class="str">"minimal UI"</span> }<br>
+      })<br><br>
+      ext_call({<br>
+      &nbsp;&nbsp;plugin: <span class="str">"gate-trading"</span>,&nbsp;&nbsp;<span class="cm">// 普通扩展</span><br>
+      &nbsp;&nbsp;tool: <span class="str">"gate_get_balance"</span>,<br>
+      &nbsp;&nbsp;args: { currency: <span class="str">"USDT"</span> }<br>
+      })
+    </div>
+    <div class="info-card fade-in" style="margin-top:1.5rem;">
+      <h3>扩展命名空间</h3>
+      <div class="item"><span class="dot">•</span><code style="font-family:'JetBrains Mono',monospace;font-size:0.78rem;">skill:&lt;name&gt;</code> — Skill 命令（如 skill:video-creator）</div>
+      <div class="item"><span class="dot">•</span><code style="font-family:'JetBrains Mono',monospace;font-size:0.78rem;">mcp:&lt;server&gt;</code> — MCP 服务器（如 mcp:designmd）</div>
+      <div class="item"><span class="dot">•</span><code style="font-family:'JetBrains Mono',monospace;font-size:0.78rem;">python:&lt;plugin&gt;</code> — Python 插件</div>
+      <div class="item"><span class="dot">•</span><code style="font-family:'JetBrains Mono',monospace;font-size:0.78rem;">&lt;name&gt;</code> — 普通扩展（如 gate-trading）</div>
+    </div>
+  </div>
+</section>
+<div class="divider"></div>
+<!-- API REFERENCE -->
+<section class="section" id="api">
+  <div class="section-inner">
+    <div class="section-label">API 参考</div>
+    <h2 class="section-title">Framework 接口一览</h2>
+    <p class="section-desc">Framework 实例上可直接访问 prompts、skills、workflows、storage、mcps、sessions、extensions、rules 等子系统。</p>
+    <div class="api-grid">
+      <div class="api-card fade-in">
+        <div class="api-name">framework.prompts</div>
+        <div class="api-desc">系统提示词注册表。register / registerFile / build() / invalidate() / clearOwner()</div>
+      </div>
+      <div class="api-card fade-in delay-1">
+        <div class="api-name">framework.skills</div>
+        <div class="api-desc">技能管理器。list() / get() / register() / remove() / reload() / details()</div>
+      </div>
+      <div class="api-card fade-in delay-2">
+        <div class="api-name">framework.workflows</div>
+        <div class="api-desc">工作流引擎。list() / get() / execute() / register() / remove()</div>
+      </div>
+      <div class="api-card fade-in">
+        <div class="api-name">framework.storage</div>
+        <div class="api-desc">键值存储。get() / set() / delete() / list() / clear() / stats()</div>
+      </div>
+      <div class="api-card fade-in delay-1">
+        <div class="api-name">framework.mcps</div>
+        <div class="api-desc">MCP 服务器。list() / addServer() / removeServer() / call() / setEnabled()</div>
+      </div>
+      <div class="api-card fade-in delay-2">
+        <div class="api-name">framework.sessions</div>
+        <div class="api-desc">会话管理。list() / get() / getOrCreate() / destroy() / runIn()</div>
+      </div>
+      <div class="api-card fade-in">
+        <div class="api-name">framework.extensions</div>
+        <div class="api-desc">扩展工具。listPlugins() / listTools() / getTool() / execute()</div>
+      </div>
+      <div class="api-card fade-in delay-1">
+        <div class="api-name">framework.rules</div>
+        <div class="api-desc">规则引擎。list() / add() / remove() / test() / checkToolCall() / checkMessage()</div>
+      </div>
+      <div class="api-card fade-in delay-2">
+        <div class="api-name">framework.plugins</div>
+        <div class="api-desc">插件管理。register() / get() / list() / has() / create()</div>
+      </div>
+    </div>
+  </div>
+</section>
+<div class="divider"></div>
+<!-- QUICK START -->
+<section class="section" id="quickstart">
+  <div class="section-inner">
+    <div class="section-label">快速开始</div>
+    <h2 class="section-title">5 分钟上手 Foliko</h2>
+    <p class="section-desc">一行命令安装，本地配置 AI Key，马上开始对话。</p>
+    <div class="code-block fade-in">
+      <span class="cm"># macOS / Linux</span><br>
+      curl -fsSL https://folikoai.com/install.sh | bash<br><br>
+      <span class="cm"># Windows</span><br>
+      irm https://folikoai.com/install.ps1 | iex<br><br>
+      <span class="cm"># npm</span><br>
+      npm install -g foliko
+    </div>
+    <div class="install-grid">
+      <div class="install-card fade-in">
+        <h4>配置文件</h4>
+        <p style="font-size:0.8rem;color:var(--text-secondary);margin-bottom:0.75rem;">项目根目录创建 <code style="background:rgba(0,0,0,0.3);padding:0.1rem 0.35rem;border-radius:3px;font-family:'JetBrains Mono',monospace;">.foliko/ai.json</code></p>
+        <pre>{
+  <span class="dot">"provider"</span>: <span class="str">"deepseek"</span>,
+  <span class="dot">"apiKey"</span>: <span class="str">"sk-xxx"</span>,
+  <span class="dot">"model"</span>: <span class="str">"deepseek-chat"</span>
+}</pre>
+      </div>
+      <div class="install-card fade-in delay-1">
+        <h4>开始对话</h4>
+        <pre style="color:#a8b5c4;">$ foliko chat
+<span class="cm"># 或指定模型</span>
+$ foliko chat --provider deepseek \
+  --model deepseek-chat \
+  --api-key sk-xxx</pre>
+      </div>
+    </div>
+    <div style="margin-top:2.5rem;" class="fade-in">
+      <h3 style="font-size:1.1rem;font-weight:700;margin-bottom:1.25rem;">完整示例：编程方式</h3>
+      <div class="code-block">
+<span class="kw">const</span> { createApp, withAI, withShell, bootstrap, createAgent, destroy } = <span class="kw">require</span>(<span class="str">'foliko'</span>);<br>
+<span class="kw">const</span> { z } = <span class="kw">require</span>(<span class="str">'zod'</span>);<br><br>
+<span class="cm">// 1. 创建 Framework，链式加载插件</span><br>
+<span class="kw">const</span> app = createApp({ debug: <span class="kw">true</span> });<br>
+<span class="kw">await</span> app.<span class="dot">use</span>(withAI({ provider: <span class="str">'deepseek'</span>, model: <span class="str">'deepseek-chat'</span>, apiKey: <span class="str">'sk-xxx'</span> }));<br>
+<span class="kw">await</span> app.<span class="dot">use</span>(withShell());<br>
+<span class="kw">await</span> bootstrap(app, { _config: { ai: {} } });<br><br>
+<span class="cm">// 2. 注册自定义工具（Zod Schema 定义参数）</span><br>
+app.<span class="dot">registerTool</span>({<br>
+&nbsp;&nbsp;name: <span class="str">'calculate'</span>,<br>
+&nbsp;&nbsp;description: <span class="str">'计算数学表达式'</span>,<br>
+&nbsp;&nbsp;inputSchema: z.object({ expression: z.string().describe(<span class="str">'如 2+3*4'</span>) }),<br>
+&nbsp;&nbsp;execute: <span class="kw">async</span> (args) => ({ result: <span class="kw">eval</span>(args.expression) })<br>
+});<br><br>
+<span class="cm">// 3. 创建 Agent</span><br>
+<span class="kw">const</span> agent = createAgent(app, {<br>
+&nbsp;&nbsp;name: <span class="str">'MyAgent'</span>,<br>
+&nbsp;&nbsp;systemPrompt: <span class="str">'你是一个有帮助的助手'</span><br>
+});<br><br>
+<span class="cm">// 4. 流式对话</span><br>
+<span class="kw">for await</span> (<span class="kw">const</span> chunk <span class="kw">of</span> agent.<span class="dot">chatStream</span>(<span class="str">'请用中文介绍一下自己'</span>)) {<br>
+&nbsp;&nbsp;<span class="kw">if</span> (chunk.type === <span class="str">'text'</span>) process.stdout.<span class="dot">write</span>(chunk.text);<br>
+}<br><br>
+<span class="cm">// 5. 清理</span><br>
+<span class="kw">await</span> destroy(app);
+      </div>
+    </div>
+  </div>
+</section>
+<!-- FOOTER -->
+<footer>
+  <p>Foliko · 简约的插件化 Agent 框架 · MIT License</p>
+  <p style="margin-top:0.5rem;">
+    <a href="https://github.com/folikoai/foliko" target="_blank">GitHub</a> ·
+    <a href="https://www.npmjs.com/package/foliko" target="_blank">npm</a> ·
+    <a href="https://folikoai.com" target="_blank">官网</a>
+  </p>
+</footer>
+<script>
+  // Plugin data
+  const pluginData = {
+    core: [
+      { name: 'ai', desc: 'AI 对话 · Vercel AI SDK，多 Provider 支持' },
+      { name: 'storage', desc: '键值持久化 · JSONL 格式' },
+      { name: 'session', desc: '多会话管理 · 上下文隔离' },
+      { name: 'sub-agent', desc: '子 Agent 隔离与委托' },
+      { name: 'skill-manager', desc: 'Skill 加载与命令注册' },
+      { name: 'workflow', desc: '结构化工作流引擎' },
+      { name: 'scheduler', desc: 'Cron 定时任务调度' },
+      { name: 'mcp', desc: 'Model Context Protocol 集成' },
+      { name: 'rules', desc: '权限与内容规则引擎' },
+      { name: 'audit', desc: '操作审计日志' },
+      { name: 'coordinator', desc: '多 Agent 协调模式' },
+      { name: 'think', desc: '主动思考 Agent' },
+    ],
+    executor: [
+      { name: 'shell-executor', desc: 'Shell 命令执行' },
+      { name: 'python-executor', desc: 'Python 代码/脚本执行' },
+      { name: 'extension-executor', desc: '外部扩展工具统一调度（ext_call）' },
+      { name: 'data-splitter', desc: '大数据自动分片' },
+      { name: 'python-loader', desc: '动态加载 Python 插件' },
+    ],
+    messaging: [
+      { name: 'telegram', desc: 'Telegram Bot 集成' },
+      { name: 'qq', desc: 'QQ 机器人' },
+      { name: 'weixin', desc: '微信 Bot' },
+      { name: 'feishu', desc: '飞书/Lark 消息推送' },
+      { name: 'email', desc: 'SMTP/IMAP 邮件收发' },
+    ],
+    io: [
+      { name: 'file-system', desc: '文件系统操作工具' },
+      { name: 'web', desc: 'HTTP 服务器与 Webhook' },
+    ],
+    other: [
+      { name: 'ambient', desc: '后台自主 Agent 循环' },
+      { name: 'memory', desc: '四层记忆系统' },
+      { name: 'trading', desc: 'Gate.io 交易接口' },
+      { name: 'install', desc: 'npm 包自动安装' },
+    ],
+  };
+  function renderPlugins(tab) {
+    const list = document.getElementById('pluginList');
+    list.innerHTML = '';
+    (pluginData[tab] || []).forEach(p => {
+      const div = document.createElement('div');
+      div.className = 'plugin-item';
+      div.innerHTML = `<span class="p-name">${p.name}</span><span class="p-desc">${p.desc}</span>`;
+      list.appendChild(div);
+    });
+  }
+  document.querySelectorAll('.plugin-tab').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.plugin-tab').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      renderPlugins(btn.dataset.tab);
+    });
+  });
+  renderPlugins('core');
+  // Scroll animations
+  const observer = new IntersectionObserver(
+    entries => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }),
+    { threshold: 0.08, rootMargin: '0px 0px -40px 0px' }
+  );
+  document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+  // Copy buttons
+  document.querySelectorAll('.code-block').forEach(block => {
+    const btn = document.createElement('button');
+    btn.className = 'copy-btn';
+    btn.textContent = '复制';
+    btn.addEventListener('click', () => {
+      const code = block.cloneNode(true);
+      code.querySelector('.copy-btn')?.remove();
+      navigator.clipboard.writeText(code.textContent).then(() => {
+        btn.textContent = '已复制!';
+        setTimeout(() => (btn.textContent = '复制'), 2000);
+      });
+    });
+    block.style.position = 'relative';
+    block.appendChild(btn);
+  });
+  // Smooth scroll
+  document.querySelectorAll('a[href^="#"]').forEach(a => {
+    a.addEventListener('click', e => {
+      e.preventDefault();
+      document.querySelector(a.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
+    });
+  });
+</script>
+</body>
+</html>