{% extends "base.html" %}
{% block title %}Hermes Agent 接入指南 - Augur{% endblock %}
{% block extra_head %}
<style>
.setup-step {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    align-items: flex-start;
}
.step-num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: var(--accent-orange);
    color: var(--bg-void);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 700 1rem/1 var(--font-data);
}
.step-body { flex: 1; min-width: 0; }
.step-title { font: 700 1rem/1.3 var(--font-sans); color: var(--fg-1); margin: 0 0 8px; }
.step-desc { font-size: 0.82rem; color: var(--fg-2); margin: 0 0 12px; line-height: 1.6; }
.code-block {
    background: var(--bg-void);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md, 8px);
    padding: 14px 16px;
    font: 0.82rem/1.6 var(--font-mono);
    color: var(--amber);
    overflow-x: auto;
    position: relative;
}
.code-block .comment { color: var(--fg-3); }
.copy-btn-code {
    position: absolute; top: 8px; right: 8px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--fg-2); border-radius: 4px; padding: 3px 8px;
    font-size: 0.68rem; cursor: pointer; transition: all 0.15s;
}
.copy-btn-code:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin: 12px 0;
}
.skill-chip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.78rem;
}
.skill-chip .skill-name { font: 700 0.8rem/1 var(--font-mono); color: var(--amber); }
.skill-chip .skill-desc { color: var(--fg-3); font-size: 0.7rem; margin-top: 3px; }

.check-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 8px;
}
.check-icon { font-size: 1.1rem; }
.check-text { font-size: 0.82rem; color: var(--fg-1); }
.check-status { margin-left: auto; font-size: 0.72rem; }
.status-ok { color: var(--signal-buy); }
.status-pending { color: var(--text-muted); }

.platform-tabs {
    display: flex; gap: 8px; margin-bottom: 16px;
}
.ptab {
    padding: 6px 14px; border-radius: 6px; cursor: pointer;
    font: 600 0.78rem/1 var(--font-sans);
    border: 1px solid var(--border-color);
    background: var(--bg-card); color: var(--fg-2);
    transition: all 0.15s;
}
.ptab.active { background: var(--accent-orange); color: var(--bg-void); border-color: var(--accent-orange); }
.ptab-content { display: none; }
.ptab-content.active { display: block; }
</style>
{% endblock %}

{% block content %}
<header class="page-header mb-24">
    <div class="page-header__text">
        <h1 class="page-title">Hermes Agent 接入指南</h1>
        <p class="page-lead">5 分钟完成配置，让 18 位大师成为你的 AI 对话伙伴</p>
    </div>
    <div class="page-actions">
        <a href="/committee" class="btn btn-sm btn-ghost">→ 委员会</a>
        <a href="/chat" class="btn btn-sm btn-ghost">→ AI 对话</a>
    </div>
</header>

<!-- Quick check -->
<div class="card mb-24" style="padding:20px;">
    <div class="section-title compact mb-12">环境检查</div>
    <div class="check-row">
        <span class="check-icon">🐍</span>
        <span class="check-text">Python 3.8+</span>
        <span class="check-status" id="check-python"><span class="status-pending">检测中…</span></span>
    </div>
    <div class="check-row">
        <span class="check-icon">📦</span>
        <span class="check-text">augur-agents 已安装</span>
        <span class="check-status" id="check-augur"><span class="status-pending">检测中…</span></span>
    </div>
    <div class="check-row">
        <span class="check-icon">🔌</span>
        <span class="check-text">augur-mcp 命令可用（Python 3.10+，pip install -e ".[mcp]"）</span>
        <span class="check-status"><span class="status-pending">需手动验证</span></span>
    </div>
</div>

<!-- Step 1: Install -->
<div class="setup-step">
    <div class="step-num">1</div>
    <div class="step-body">
        <div class="step-title">安装 Augur + MCP 依赖</div>
        <div class="step-desc">需要 Python 3.10+ 才能使用 MCP 功能。</div>
        <div class="code-block">
            <button class="copy-btn-code" onclick="copyCode(this)">复制</button>
<span class="comment"># 克隆仓库（或用你已有的本地目录）</span>
git clone https://github.com/BruceLanLan/augur.git && cd augur

<span class="comment"># 安装含 MCP 支持的完整版</span>
pip install -e ".[data,mcp]"

<span class="comment"># 验证 augur-mcp 命令</span>
augur-mcp --help
        </div>
    </div>
</div>

<!-- Step 2: Configure platform -->
<div class="setup-step">
    <div class="step-num">2</div>
    <div class="step-body">
        <div class="step-title">配置你的 AI 客户端</div>
        <div class="step-desc">选择你使用的平台：</div>
        <div class="platform-tabs">
            <div class="ptab active" onclick="switchTab('hermes')">Hermes Studio</div>
            <div class="ptab" onclick="switchTab('claude')">Claude Desktop</div>
            <div class="ptab" onclick="switchTab('other')">其他 MCP 客户端</div>
        </div>

        <div id="tab-hermes" class="ptab-content active">
            <div class="step-desc">编辑 <code>~/.hermes/config.yaml</code>：</div>
            <div class="code-block">
                <button class="copy-btn-code" onclick="copyCode(this)">复制</button>
mcp_servers:
  augur:
    command: augur-mcp   <span class="comment"># augur-mcp 须在 PATH 中</span>
            </div>
            <div class="step-desc" style="margin-top:10px;">重启 Hermes Studio，然后在对话框输入：</div>
            <div class="code-block">
                <button class="copy-btn-code" onclick="copyCode(this)">复制</button>
/skill augur-buffett
"AAPL 值得买吗？PE=32，ROE=55%"
            </div>
        </div>

        <div id="tab-claude" class="ptab-content">
            <div class="step-desc">编辑 <code>~/Library/Application Support/Claude/claude_desktop_config.json</code>：</div>
            <div class="code-block">
                <button class="copy-btn-code" onclick="copyCode(this)">复制</button>{
  "mcpServers": {
    "augur": {
      "command": "augur-mcp"
    }
  }
}
            </div>
            <div class="step-desc" style="margin-top:10px;">保存后重启 Claude Desktop，MCP 工具会自动出现在工具列表。</div>
        </div>

        <div id="tab-other" class="ptab-content">
            <div class="step-desc">任何支持 MCP stdio 传输的客户端：</div>
            <div class="code-block">
                <button class="copy-btn-code" onclick="copyCode(this)">复制</button><span class="comment"># 启动方式：stdio 传输</span>
command: augur-mcp

<span class="comment"># 工具会自动注册为：</span>
mcp_augur_analyze, mcp_augur_consensus, mcp_augur_committee,
mcp_augur_debate, mcp_augur_fetch, mcp_augur_sentiment,
mcp_augur_list_personas, mcp_augur_configure
            </div>
        </div>
    </div>
</div>

<!-- Step 3: Use skills -->
<div class="setup-step">
    <div class="step-num">3</div>
    <div class="step-body">
        <div class="step-title">开始对话</div>
        <div class="step-desc">在 Hermes Studio 中加载任意大师 Skill，然后直接提问：</div>
        <div class="skill-grid">
            <div class="skill-chip"><div class="skill-name">/skill augur-buffett</div><div class="skill-desc">巴菲特 · 价值护城河</div></div>
            <div class="skill-chip"><div class="skill-name">/skill augur-duan-yongping</div><div class="skill-desc">段永平 · 本分集中</div></div>
            <div class="skill-chip"><div class="skill-name">/skill augur-dalio</div><div class="skill-desc">达利欧 · 全天候宏观</div></div>
            <div class="skill-chip"><div class="skill-name">/skill augur-cathie-wood</div><div class="skill-desc">凯西伍德 · 颠覆创新</div></div>
            <div class="skill-chip"><div class="skill-name">/skill augur-zhang-lei</div><div class="skill-desc">张磊 · 结构性长期</div></div>
            <div class="skill-chip"><div class="skill-name">/skill augur-committee</div><div class="skill-desc">委员会主席 · 多Agent协调</div></div>
        </div>
    </div>
</div>

<!-- Step 4: Committee -->
<div class="setup-step">
    <div class="step-num">4</div>
    <div class="step-body">
        <div class="step-title">召开投资委员会</div>
        <div class="step-desc">有两种方式召开委员会：</div>

        <div style="margin-bottom:12px;">
            <div style="font:600 0.78rem/1 var(--font-sans); color:var(--fg-1); margin-bottom:6px;">方式 A：通过 Hermes Skill（推荐）</div>
            <div class="code-block">
                <button class="copy-btn-code" onclick="copyCode(this)">复制</button>/skill augur-committee
"中国价值委员会：段永平、张磊、李录、但斌，讨论腾讯00700.HK的投资价值"
            </div>
        </div>

        <div>
            <div style="font:600 0.78rem/1 var(--font-sans); color:var(--fg-1); margin-bottom:6px;">方式 B：通过 Dashboard</div>
            <div class="step-desc">在本页侧边栏点击「投资委员会」，选择大师，输入标的和问题。</div>
            <a href="/committee" class="btn btn-sm btn-primary" style="text-decoration:none;">→ 打开委员会页面</a>
        </div>
    </div>
</div>

<!-- Step 5: Troubleshooting -->
<div class="card" style="padding:20px;">
    <div class="section-title compact mb-12">常见问题</div>

    <details style="margin-bottom:10px;">
        <summary style="cursor:pointer; font:600 0.82rem/1.5 var(--font-sans); color:var(--fg-1);">augur-mcp: command not found</summary>
        <div style="padding:10px 0 0 16px; font-size:0.8rem; color:var(--fg-2);">
            运行 <code>pip install -e ".[mcp]"</code> 安装 MCP 支持（需要 Python 3.10+）。<br>
            如果仍报错，检查 <code>pip show augur-agents | grep Location</code>，将对应 bin 目录加入 PATH。
        </div>
    </details>

    <details style="margin-bottom:10px;">
        <summary style="cursor:pointer; font:600 0.82rem/1.5 var(--font-sans); color:var(--fg-1);">MCP 工具出现但调用失败</summary>
        <div style="padding:10px 0 0 16px; font-size:0.8rem; color:var(--fg-2);">
            实时数据需要 yfinance：<code>pip install -e ".[data]"</code><br>
            如果只需要评分（不需要实时价格），传入手动指标即可：<br>
            <code>mcp_augur_analyze(ticker="AAPL", pe=32, roe=0.55)</code>
        </div>
    </details>

    <details>
        <summary style="cursor:pointer; font:600 0.82rem/1.5 var(--font-sans); color:var(--fg-1);">/skill augur-buffett 没有反应</summary>
        <div style="padding:10px 0 0 16px; font-size:0.8rem; color:var(--fg-2);">
            确认 Hermes 的 <code>skills.external_dirs</code> 指向 augur 仓库的 <code>src/skills/</code> 目录：<br>
            <code>skills:<br>&nbsp;&nbsp;external_dirs:<br>&nbsp;&nbsp;&nbsp;&nbsp;- /path/to/augur/src/skills</code>
        </div>
    </details>
</div>

{% endblock %}

{% block extra_scripts %}
<script>
// Platform tab switching
function switchTab(name) {
    document.querySelectorAll('.ptab').forEach(function(t) { t.classList.remove('active'); });
    document.querySelectorAll('.ptab-content').forEach(function(c) { c.classList.remove('active'); });
    event.target.classList.add('active');
    document.getElementById('tab-' + name).classList.add('active');
}

// Code copy
function copyCode(btn) {
    var block = btn.parentElement;
    var text = Array.from(block.childNodes)
        .filter(function(n) { return n.nodeType === 3 || (n.nodeType === 1 && !n.classList.contains('copy-btn-code')); })
        .map(function(n) { return n.textContent || n.innerText || ''; })
        .join('').trim();
    navigator.clipboard.writeText(text).then(function() {
        btn.textContent = '已复制!';
        setTimeout(function() { btn.textContent = '复制'; }, 1500);
    });
}

// Basic health check
document.addEventListener('DOMContentLoaded', function() {
    fetch('/health').then(function(r) { return r.json(); }).then(function(d) {
        var pyEl = document.getElementById('check-python');
        var augurEl = document.getElementById('check-augur');
        if (d.status === 'ok') {
            pyEl.innerHTML = '<span class="status-ok">✓ 正常</span>';
            augurEl.innerHTML = '<span class="status-ok">✓ v' + (d.version || '') + '</span>';
        }
    }).catch(function() {
        document.getElementById('check-python').innerHTML = '<span class="status-pending">未知</span>';
        document.getElementById('check-augur').innerHTML = '<span class="status-pending">未知</span>';
    });
});
</script>
{% endblock %}