{{define "claude-code"}}
<div class="hero container">
    <p class="label accent mb-4">Integration Guide</p>
    <h1 class="mb-4">Clavitor + Claude Code</h1>
    <p class="lead">Give Claude Code secure, scoped access to credentials. Every secret stays encrypted until the moment it's needed — and your AI never sees what it shouldn't.</p>
</div>

<hr class="divider">

<div class="section container narrow">
    <h2 class="mb-4">How it works</h2>
    <p class="mb-6">Claude Code calls the Clavitor CLI to fetch credentials. Each agent token is scoped — it can only access entries you've explicitly allowed. No vault browsing, no discovery, no surprise access.</p>

    <div class="grid-2 mb-8">
        <div class="card">
            <p class="label accent mb-3">Credential Encryption</p>
            <h3 class="mb-2">Claude can read</h3>
            <p>API keys, SSH keys, OAuth tokens, TOTP secrets. Encrypted at rest, decryptable by the vault. Claude fetches what it's scoped to via the CLI.</p>
        </div>
        <div class="card red">
            <p class="label red mb-3">Identity Encryption</p>
            <h3 class="mb-2">Claude cannot read</h3>
            <p>Passport numbers, credit cards, private signing keys. Encrypted client-side with WebAuthn PRF. The server cannot decrypt them. Neither can Claude. Math, not policy.</p>
        </div>
    </div>

    <h2 class="mb-4">Setup</h2>

    <div class="step">
        <div class="step-num">1</div>
        <div class="step-body">
            <h3>Create a scoped agent token</h3>
            <p class="mb-3">From the Clavitor web UI or CLI, create a token scoped to the entries Claude needs.</p>
            <div class="code-block">
                <div><span class="prompt">$</span> clavitor token create --scope dev --name "Claude Code"</div>
                <div class="comment">Token: ctk_dev_a3f8...</div>
            </div>
        </div>
    </div>

    <div class="step">
        <div class="step-num">2</div>
        <div class="step-body">
            <h3>Use credentials in Claude Code</h3>
            <p class="mb-3">Claude calls the CLI directly. The token restricts access to the <code>dev</code> scope only.</p>
            <div class="code-block">
                <div><span class="comment"># Claude fetches a GitHub token</span></div>
                <div><span class="prompt">$</span> clavitor get github.token --agent dev</div>
                <div class="comment">ghp_a3f8...</div>
                <div class="mt-2"><span class="comment"># Claude tries to access something outside its scope</span></div>
                <div><span class="prompt">$</span> clavitor get stripe.secret --agent dev</div>
                <div class="comment" style="color:var(--brand-red)">Error: access denied (scope: dev)</div>
            </div>
        </div>
    </div>

    <div class="step">
        <div class="step-num">3</div>
        <div class="step-body">
            <h3>TOTP generation</h3>
            <p class="mb-3">Store TOTP secrets as Credential fields. Claude generates time-based 2FA codes on demand.</p>
            <div class="code-block">
                <div><span class="prompt">$</span> clavitor totp github --agent dev</div>
                <div class="comment">284919 (expires in 14s)</div>
            </div>
        </div>
    </div>

    <h2 class="mb-4 mt-8">Why not MCP?</h2>
    <p class="mb-6">MCP gives the agent access to the vault — search, list, browse. That's too much. Clavitor's CLI gives the agent exactly the credentials it's scoped to. Nothing more. No browsing, no discovery.</p>

    <h2 class="mb-4">Multiple agents, different scopes</h2>
    <p class="mb-6">Create separate tokens for different contexts. Your deploy agent sees Vercel keys. Your code agent sees GitHub tokens. Neither sees your personal credentials.</p>
    <div class="code-block mb-8">
        <div><span class="prompt">$</span> clavitor token create --scope deploy --name "CI pipeline"</div>
        <div><span class="prompt">$</span> clavitor token create --scope social --name "Social bot"</div>
        <div><span class="prompt">$</span> clavitor token create --scope dev --name "Claude Code"</div>
    </div>

    <div class="card mb-8" style="text-align:center">
        <p class="mb-4">Three-tier encryption. Scoped access. Your AI gets what it needs — nothing more.</p>
        <a href="/hosted" class="btn btn-primary">Get hosted &mdash; <s>$20</s> $12/yr</a>
        <a href="/install" class="btn btn-ghost" style="margin-left:8px">Self-host free &rarr;</a>
    </div>
</div>
{{end}}

{{define "codex"}}
<div class="hero container">
    <p class="label accent mb-4">Integration Guide</p>
    <h1 class="mb-4">Clavitor + OpenAI Codex</h1>
    <p class="lead">Connect Codex to your vault via the CLI. Scoped tokens, TOTP generation, field-level encryption. Your Codex agent gets exactly what it needs.</p>
</div>

<hr class="divider">

<div class="section container narrow">
    <h2 class="mb-4">How it works</h2>
    <p class="mb-6">Codex calls the Clavitor CLI to fetch credentials and generate 2FA codes. Each token is scoped — Codex only sees entries you've explicitly allowed.</p>

    <h2 class="mb-4">Setup</h2>

    <div class="step">
        <div class="step-num">1</div>
        <div class="step-body">
            <h3>Install Clavitor</h3>
            <div class="code-block">
                <div><span class="prompt">$</span> curl -fsSL clavitor.com/install.sh | sh</div>
            </div>
        </div>
    </div>

    <div class="step">
        <div class="step-num">2</div>
        <div class="step-body">
            <h3>Create a scoped token for Codex</h3>
            <div class="code-block">
                <div><span class="prompt">$</span> clavitor token create --scope codex --name "Codex agent"</div>
                <div class="comment">Token: ctk_codex_7b2e...</div>
            </div>
        </div>
    </div>

    <div class="step">
        <div class="step-num">3</div>
        <div class="step-body">
            <h3>Fetch credentials from Codex</h3>
            <div class="code-block">
                <div><span class="prompt">$</span> clavitor get openai.api_key --agent codex</div>
                <div class="comment">sk-proj-...</div>
                <div class="mt-2"><span class="prompt">$</span> clavitor totp aws --agent codex</div>
                <div class="comment">739201 (expires in 22s)</div>
            </div>
        </div>
    </div>

    <h2 class="mb-4 mt-8">Three-tier encryption</h2>
    <div class="grid-3 mb-8">
        <div class="card">
            <p class="label mb-2">Vault Encryption</p>
            <p>Entire vault encrypted at rest. AES-256-GCM.</p>
        </div>
        <div class="card">
            <p class="label accent mb-2">Credential Encryption</p>
            <p>Per-field. Codex can read these via scoped CLI tokens.</p>
        </div>
        <div class="card red">
            <p class="label red mb-2">Identity Encryption</p>
            <p>Per-field. Client-side. WebAuthn PRF. Nobody can read these — not Codex, not us.</p>
        </div>
    </div>

    <div class="card mb-8" style="text-align:center">
        <p class="mb-4">Scoped access for every agent. Your secrets stay yours.</p>
        <a href="/hosted" class="btn btn-primary">Get hosted &mdash; <s>$20</s> $12/yr</a>
        <a href="/install" class="btn btn-ghost" style="margin-left:8px">Self-host free &rarr;</a>
    </div>
</div>
{{end}}

{{define "openclaw"}}
<div class="hero container">
    <p class="label accent mb-4">Integration Guide</p>
    <h1 class="mb-4">Clavitor + OpenClaw</h1>
    <p class="lead">Multi-agent credential management. Give your OpenClaw agents scoped access to credentials. Each agent sees only what it needs.</p>
</div>

<hr class="divider">

<div class="section container narrow">
    <h2 class="mb-4">The problem with multi-agent credential access</h2>
    <p class="mb-6">When you run multiple OpenClaw agents — a deploy agent, a monitoring agent, a social agent — they all need different credentials. Sharing one vault key means every agent sees everything. A compromised deploy agent exposes your personal data.</p>

    <h2 class="mb-4">Clavitor solves this</h2>
    <p class="mb-6">Create a separate scoped token per agent. Each token can only access its designated entries. Compromise one, the rest stay clean.</p>

    <div class="code-block mb-8">
        <p class="code-label">One vault. Five agents. Five scopes.</p>
        <pre><span class="comment"># Deploy agent — Vercel, Netlify, AWS</span>
<span class="prompt">$</span> clavitor token create --scope deploy --name "OC Deploy"

<span class="comment"># Monitor agent — Datadog, PagerDuty</span>
<span class="prompt">$</span> clavitor token create --scope monitor --name "OC Monitor"

<span class="comment"># Social agent — Twitter, Discord</span>
<span class="prompt">$</span> clavitor token create --scope social --name "OC Social"

<span class="comment"># Finance agent — Stripe, Plaid</span>
<span class="prompt">$</span> clavitor token create --scope finance --name "OC Finance"

<span class="comment"># Code agent — GitHub, GitLab</span>
<span class="prompt">$</span> clavitor token create --scope dev --name "OC Dev"</pre>
    </div>

    <h2 class="mb-4">In your OpenClaw configuration</h2>
    <p class="mb-6">Each agent calls the CLI with its own token. The vault enforces scope boundaries — no agent can escalate.</p>
    <div class="code-block mb-8">
        <div><span class="comment"># Inside the deploy agent's workflow</span></div>
        <div><span class="prompt">$</span> VERCEL_TOKEN=$(clavitor get vercel.token --agent deploy)</div>
        <div><span class="prompt">$</span> vercel deploy --token $VERCEL_TOKEN</div>
        <div class="mt-2"><span class="comment"># Deploy agent tries to read social credentials</span></div>
        <div><span class="prompt">$</span> clavitor get twitter.oauth --agent deploy</div>
        <div class="comment" style="color:var(--brand-red)">Error: access denied (scope: deploy)</div>
    </div>

    <h2 class="mb-4">Identity Encryption: the hard boundary</h2>
    <p class="mb-6">Credential fields are readable by scoped agents. But Identity fields — passport numbers, credit cards, private signing keys — are encrypted client-side with WebAuthn PRF. No agent, no server, no court order can decrypt them. The key never leaves your device.</p>

    <div class="card mb-8" style="text-align:center">
        <p class="mb-4">Multi-agent. Scoped. Encrypted. Built for autonomous workflows.</p>
        <a href="/hosted" class="btn btn-primary">Get hosted &mdash; <s>$20</s> $12/yr</a>
        <a href="/install" class="btn btn-ghost" style="margin-left:8px">Self-host free &rarr;</a>
    </div>
</div>
{{end}}

{{define "openclaw-cn"}}
<div class="hero container">
    <p class="label accent mb-4">集成指南</p>
    <h1 class="mb-4">Clavitor + OpenClaw</h1>
    <p class="lead">多智能体凭据管理。为每个 OpenClaw 智能体提供独立的、范围限定的凭据访问权限。每个智能体只能看到它需要的内容。</p>
</div>

<hr class="divider">

<div class="section container narrow">
    <h2 class="mb-4">多智能体凭据访问的问题</h2>
    <p class="mb-6">当您运行多个 OpenClaw 智能体时——部署智能体、监控智能体、社交智能体——它们都需要不同的凭据。共享一个密钥库密钥意味着每个智能体都能看到所有内容。一个被入侵的部署智能体会暴露您的个人数据。</p>

    <h2 class="mb-4">Clavitor 解决方案</h2>
    <p class="mb-6">为每个智能体创建独立的范围限定令牌。每个令牌只能访问其指定的条目。一个被入侵，其余安全无虞。</p>

    <div class="code-block mb-8">
        <p class="code-label">一个密钥库。五个智能体。五个范围。</p>
        <pre><span class="comment"># 部署智能体 — Vercel, Netlify, AWS</span>
<span class="prompt">$</span> clavitor token create --scope deploy --name "OC 部署"

<span class="comment"># 监控智能体 — Datadog, PagerDuty</span>
<span class="prompt">$</span> clavitor token create --scope monitor --name "OC 监控"

<span class="comment"># 社交智能体 — Twitter, Discord</span>
<span class="prompt">$</span> clavitor token create --scope social --name "OC 社交"

<span class="comment"># 财务智能体 — Stripe, Plaid</span>
<span class="prompt">$</span> clavitor token create --scope finance --name "OC 财务"

<span class="comment"># 代码智能体 — GitHub, GitLab</span>
<span class="prompt">$</span> clavitor token create --scope dev --name "OC 开发"</pre>
    </div>

    <h2 class="mb-4">三层加密</h2>
    <div class="grid-3 mb-8">
        <div class="card">
            <p class="label mb-2">密钥库加密</p>
            <p>整个密钥库静态加密。AES-256-GCM。</p>
        </div>
        <div class="card">
            <p class="label accent mb-2">凭据加密</p>
            <p>逐字段加密。智能体可通过范围限定的 CLI 令牌读取。</p>
        </div>
        <div class="card red">
            <p class="label red mb-2">身份加密</p>
            <p>逐字段加密。客户端加密。WebAuthn PRF。没有人能读取——智能体不能，我们也不能。</p>
        </div>
    </div>

    <h2 class="mb-4">身份加密：硬边界</h2>
    <p class="mb-6">凭据字段可由范围限定的智能体读取。但身份字段——护照号码、信用卡、私钥——使用 WebAuthn PRF 在客户端加密。没有任何智能体、服务器或法院命令可以解密它们。密钥永远不会离开您的设备。</p>

    <div class="card mb-8" style="text-align:center">
        <p class="mb-4">多智能体。范围限定。加密。为自主工作流构建。</p>
        <a href="/hosted" class="btn btn-primary">托管服务 &mdash; <s>$20</s> $12/年</a>
        <a href="/install" class="btn btn-ghost" style="margin-left:8px">免费自托管 &rarr;</a>
    </div>
</div>
{{end}}