feat: documentation pages and updated model pricing
- Add 13 documentation pages under /docs (getting-started, concepts, SDK refs, integrations, API reference, self-hosting, OpenCode plugin) - Shared docs layout with collapsible sidebar navigation - Update model pricing across all SDKs: add GPT-5.x, GPT-4.1, o3/o4-mini, Claude 4.5 series, claude-opus-4-6 - Update trace-analytics context window lookup with current models
This commit is contained in:
Vectry
230
apps/web/src/app/docs/opencode-plugin/page.tsx
Normal file
230
apps/web/src/app/docs/opencode-plugin/page.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "OpenCode Plugin",
|
||||
description:
|
||||
"Capture OpenCode sessions including tool calls, LLM calls, file edits, and git diffs with the AgentLens OpenCode plugin.",
|
||||
};
|
||||
|
||||
function CodeBlock({ children, title }: { children: string; title?: string }) {
|
||||
return (
|
||||
<div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
|
||||
{title && (
|
||||
<div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
<pre className="p-4 overflow-x-auto text-sm leading-relaxed">
|
||||
<code className="text-neutral-300">{children}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function OpenCodePluginPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight mb-4">
|
||||
OpenCode Plugin
|
||||
</h1>
|
||||
<p className="text-lg text-neutral-400 mb-10 leading-relaxed">
|
||||
The AgentLens OpenCode plugin captures everything that happens during an
|
||||
OpenCode coding session and sends it as structured traces to your
|
||||
AgentLens instance.
|
||||
</p>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Installation</h2>
|
||||
<CodeBlock title="terminal">{`npm install opencode-agentlens`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Configuration</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
Add the plugin to your <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">opencode.json</code> configuration file:
|
||||
</p>
|
||||
<CodeBlock title="opencode.json">{`{
|
||||
"plugin": ["opencode-agentlens"]
|
||||
}`}</CodeBlock>
|
||||
<p className="text-neutral-400 leading-relaxed mt-4 mb-4">
|
||||
Set the required environment variables:
|
||||
</p>
|
||||
<CodeBlock title="terminal">{`export AGENTLENS_API_KEY="your-api-key"
|
||||
export AGENTLENS_ENDPOINT="https://agentlens.vectry.tech"`}</CodeBlock>
|
||||
|
||||
<p className="text-neutral-400 leading-relaxed mt-4">
|
||||
You can also add these to a <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">.env</code> file in your project root.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">What gets captured</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-6">
|
||||
Every OpenCode session becomes a trace with nested spans and events
|
||||
for each action taken during the session:
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="p-4 rounded-lg border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
AGENT span
|
||||
</span>
|
||||
<span className="text-sm font-medium text-neutral-200">
|
||||
Sessions
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500">
|
||||
Each OpenCode session is captured as a top-level AGENT span.
|
||||
Includes session ID, start time, end time, and overall status.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
LLM_CALL span
|
||||
</span>
|
||||
<span className="text-sm font-medium text-neutral-200">
|
||||
LLM calls
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500">
|
||||
Every call to an LLM provider (Claude, GPT, etc.) is recorded with
|
||||
the full prompt, response, token counts, and cost.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
TOOL_CALL span
|
||||
</span>
|
||||
<span className="text-sm font-medium text-neutral-200">
|
||||
Tool calls
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500">
|
||||
Tool invocations including file reads, writes, shell commands,
|
||||
search operations, and MCP tool calls. Captures input arguments
|
||||
and outputs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
TOOL_SELECTION decision
|
||||
</span>
|
||||
<span className="text-sm font-medium text-neutral-200">
|
||||
Permissions
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500">
|
||||
Permission requests and grants are captured as decision points,
|
||||
showing what the agent asked to do and whether it was allowed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
CUSTOM span
|
||||
</span>
|
||||
<span className="text-sm font-medium text-neutral-200">
|
||||
File edits
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500">
|
||||
Every file creation, modification, and deletion is tracked with
|
||||
before/after content diffs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg border border-neutral-800/50 bg-neutral-900/30">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-2 py-0.5 rounded text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
||||
CUSTOM event
|
||||
</span>
|
||||
<span className="text-sm font-medium text-neutral-200">
|
||||
Git diffs
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500">
|
||||
Git operations (commits, diffs, branch changes) are captured as
|
||||
events with the full diff content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Trace structure</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
A typical OpenCode session trace looks like this:
|
||||
</p>
|
||||
<CodeBlock>{`Trace: "opencode-session-abc123"
|
||||
|
|
||||
+-- Span: "session" (AGENT)
|
||||
| +-- Span: "read-file: src/main.ts" (TOOL_CALL)
|
||||
| +-- Span: "llm-call: claude-sonnet" (LLM_CALL)
|
||||
| | Decision: TOOL_SELECTION -> chose "edit-file" over "write-file"
|
||||
| +-- Span: "edit-file: src/main.ts" (TOOL_CALL)
|
||||
| +-- Span: "llm-call: claude-sonnet" (LLM_CALL)
|
||||
| +-- Span: "bash: npm test" (TOOL_CALL)
|
||||
| +-- Event: "git-diff" (CUSTOM)
|
||||
| +-- Span: "bash: git commit" (TOOL_CALL)`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Environment variables</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-800">
|
||||
<th className="text-left py-2 pr-4 text-neutral-400 font-medium">Variable</th>
|
||||
<th className="text-left py-2 pr-4 text-neutral-400 font-medium">Required</th>
|
||||
<th className="text-left py-2 text-neutral-400 font-medium">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-neutral-300">
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">AGENTLENS_API_KEY</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">Yes</td>
|
||||
<td className="py-2">API key for authentication</td>
|
||||
</tr>
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">AGENTLENS_ENDPOINT</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">Yes</td>
|
||||
<td className="py-2">AgentLens server URL</td>
|
||||
</tr>
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">AGENTLENS_ENABLED</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">No</td>
|
||||
<td className="py-2">Set to "false" to disable (default: "true")</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">AGENTLENS_SESSION_TAGS</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">No</td>
|
||||
<td className="py-2">Comma-separated tags to add to all session traces</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold mb-4">Filtering sensitive data</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
By default, the plugin captures full file contents and command outputs.
|
||||
To filter sensitive data, set the <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">AGENTLENS_REDACT_PATTERNS</code> environment variable with a comma-separated list of regex patterns:
|
||||
</p>
|
||||
<CodeBlock title="terminal">{`export AGENTLENS_REDACT_PATTERNS="password=.*,API_KEY=.*,Bearer .*"`}</CodeBlock>
|
||||
<p className="text-neutral-400 leading-relaxed mt-4">
|
||||
Matched content is replaced with <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">[REDACTED]</code> before
|
||||
being sent to the server.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user