docs: add agent trace viewer seo pages
Co-authored-by: Talon <talon@users.noreply.github.com>
This commit is contained in:
liaohch3
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 495 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 368 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 519 KiB |
@@ -11,6 +11,8 @@
|
||||
|
||||
`claude-tap` is a local proxy and trace viewer for AI coding agents. Run your CLI through it, then inspect the real API traffic: system prompts, conversation history, tool schemas, tool calls, streaming responses, token usage, and request diffs.
|
||||
|
||||
Website: [Local AI Agent Trace Viewer](https://liaohch3.com/claude-tap/) · Guide: [How to view agent traces locally](docs/guides/agent-trace-viewer.md)
|
||||
|
||||
It works with [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Codex CLI](https://github.com/openai/codex), [Gemini CLI](https://github.com/google-gemini/gemini-cli), [Kimi CLI](https://github.com/MoonshotAI/kimi-cli), [OpenCode](https://opencode.ai), [Pi](https://github.com/badlogic/pi-mono/tree/main/packages/coding-agent), [Hermes Agent](https://github.com/NousResearch/hermes-agent), [Cursor CLI](https://cursor.com/cli), [Qoder CLI](https://qoder.com/cli), [Antigravity CLI](https://antigravity.google/product/antigravity-cli), and [CodeBuddy CLI](https://www.codebuddy.ai).
|
||||
|
||||
<p align="center">
|
||||
|
||||
@@ -11,6 +11,8 @@
|
||||
|
||||
`claude-tap` 是给 AI 编程 agent 用的本地代理和 trace 查看器。把 CLI 通过它启动，就能看到真实 API 流量：system prompt、对话历史、工具 schema、工具调用、流式响应、token 用量和请求 diff。
|
||||
|
||||
网站：[本地 AI Agent Trace Viewer](https://liaohch3.com/claude-tap/) · 指南：[如何本地查看 Agent traces](docs/guides/agent-trace-viewer.zh.md)
|
||||
|
||||
它支持 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Codex CLI](https://github.com/openai/codex)、[Gemini CLI](https://github.com/google-gemini/gemini-cli)、[Kimi CLI](https://github.com/MoonshotAI/kimi-cli)、[OpenCode](https://opencode.ai)、[Pi](https://github.com/badlogic/pi-mono/tree/main/packages/coding-agent)、[Hermes Agent](https://github.com/NousResearch/hermes-agent)、[Cursor CLI](https://cursor.com/cli)、[Qoder CLI](https://qoder.com/cli)、[Antigravity CLI](https://antigravity.google/product/antigravity-cli) 和 [CodeBuddy CLI](https://www.codebuddy.ai)。
|
||||
|
||||
<p align="center">
|
||||
|
||||
@@ -0,0 +1,483 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Local AI Agent Trace Viewer Guide - claude-tap</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="How to view Claude Code, Codex, OpenAI Responses API, Gemini, and other AI coding agent traces locally with claude-tap."
|
||||
>
|
||||
<link rel="canonical" href="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.html">
|
||||
<link rel="alternate" hreflang="en" href="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.html">
|
||||
<link rel="alternate" hreflang="zh-Hans" href="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.zh.html">
|
||||
<link rel="alternate" hreflang="x-default" href="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.html">
|
||||
<meta property="og:title" content="Local AI Agent Trace Viewer Guide - claude-tap">
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Inspect prompts, tool calls, token usage, latency, streaming output, and request diffs in local AI agent traces."
|
||||
>
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.html">
|
||||
<meta property="og:image" content="https://liaohch3.com/claude-tap/viewer-light.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #f4f7fb;
|
||||
--color-panel: #ffffff;
|
||||
--color-ink: #111827;
|
||||
--color-muted: #5f6f84;
|
||||
--color-line: #dce5ef;
|
||||
--color-blue: #2563eb;
|
||||
--color-blue-soft: #dbeafe;
|
||||
--color-shadow: rgba(26, 43, 68, 0.12);
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1040px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background: rgba(244, 247, 251, 0.92);
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.topbar-inner {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: space-between;
|
||||
min-height: 68px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
align-items: center;
|
||||
background: var(--color-ink);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
height: 34px;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
font-size: 0.94rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--color-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav .primary {
|
||||
background: var(--color-ink);
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
padding: 0.58rem 0.92rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: var(--space-16) 0 var(--space-10);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--color-blue);
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
margin: 0 0 var(--space-4);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.75rem, 7vw, 5.8rem);
|
||||
letter-spacing: 0;
|
||||
line-height: 0.96;
|
||||
margin: 0;
|
||||
max-width: 12ch;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: var(--color-muted);
|
||||
font-size: clamp(1.04rem, 2vw, 1.24rem);
|
||||
margin: var(--space-6) 0 0;
|
||||
max-width: 68ch;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-8);
|
||||
}
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0.72rem 1rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button.dark {
|
||||
background: var(--color-ink);
|
||||
border-color: var(--color-ink);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.light {
|
||||
background: var(--color-panel);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.article-grid {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
|
||||
padding-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
.toc {
|
||||
align-self: start;
|
||||
background: var(--color-panel);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-5);
|
||||
position: sticky;
|
||||
top: 92px;
|
||||
}
|
||||
|
||||
.toc strong {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.toc a {
|
||||
color: var(--color-muted);
|
||||
display: block;
|
||||
font-size: 0.92rem;
|
||||
padding: 0.32rem 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article {
|
||||
background: var(--color-panel);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 24px 60px var(--color-shadow);
|
||||
padding: var(--space-10);
|
||||
}
|
||||
|
||||
article > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.7rem, 3vw, 2.5rem);
|
||||
line-height: 1.05;
|
||||
margin: var(--space-12) 0 var(--space-4);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #0e1726;
|
||||
border: 1px solid #1f2f46;
|
||||
border-radius: var(--radius);
|
||||
color: #d8e7ff;
|
||||
font-family: var(--font-mono);
|
||||
overflow: auto;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.note {
|
||||
background: var(--color-blue-soft);
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: var(--radius);
|
||||
color: #1e3a8a;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(--space-8) 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: var(--color-muted);
|
||||
font-size: 0.92rem;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: var(--color-muted);
|
||||
padding: var(--space-8) 0;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.article-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.nav a:not(.primary):not(.lang) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.shell {
|
||||
width: min(100% - 24px, 1040px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.4rem, 18vw, 4rem);
|
||||
}
|
||||
|
||||
article {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="shell topbar-inner">
|
||||
<a class="brand" href="../index.html"><span class="brand-mark">ct</span><strong>claude-tap</strong></a>
|
||||
<nav class="nav" aria-label="Main navigation">
|
||||
<a href="../index.html">Home</a>
|
||||
<a href="../support-matrix.html">Clients</a>
|
||||
<a class="lang" href="agent-trace-viewer.zh.html">中文</a>
|
||||
<a class="primary" href="https://github.com/liaohch3/claude-tap">GitHub</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="shell">
|
||||
<p class="eyebrow">Guide</p>
|
||||
<h1>Local AI Agent Trace Viewer</h1>
|
||||
<p class="lead">
|
||||
A practical guide to viewing Claude Code, Codex, OpenAI Responses API, Gemini, and other AI coding
|
||||
agent traces locally with claude-tap.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button dark" href="https://github.com/liaohch3/claude-tap">Open GitHub</a>
|
||||
<a class="button light" href="../index.html">Back to overview</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="shell article-grid">
|
||||
<aside class="toc" aria-label="Guide sections">
|
||||
<strong>Sections</strong>
|
||||
<a href="#what-is-a-trace">What is a trace?</a>
|
||||
<a href="#local">Why local?</a>
|
||||
<a href="#supported">Supported clients</a>
|
||||
<a href="#how">How to view one</a>
|
||||
<a href="#inspect">What to inspect</a>
|
||||
<a href="#export">HTML export</a>
|
||||
</aside>
|
||||
|
||||
<article>
|
||||
<p>
|
||||
<code>claude-tap</code> is a local trace viewer and HTML exporter for AI coding agents. It helps you
|
||||
inspect prompts, tool calls, token usage, latency, streaming responses, request diffs, and raw API
|
||||
request shapes without sending private runs to a hosted dashboard.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<img src="../viewer-light.png" alt="claude-tap local AI agent trace viewer showing requests, tool calls, token usage, and latency">
|
||||
<figcaption>A local viewer for real agent sessions, not reconstructed terminal logs.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="what-is-a-trace">What is an AI agent trace?</h2>
|
||||
<p>
|
||||
An AI agent trace is the recorded request and response flow behind an agent run. For coding agents, a
|
||||
useful trace usually includes:
|
||||
</p>
|
||||
<ul>
|
||||
<li>System prompts and conversation history</li>
|
||||
<li>Tool schemas, tool calls, tool inputs, and tool results</li>
|
||||
<li>Streaming response chunks reconstructed into readable output</li>
|
||||
<li>Token usage, cache usage, and latency</li>
|
||||
<li>Request diffs between adjacent turns</li>
|
||||
</ul>
|
||||
<p>The terminal shows what the agent says. A trace shows what the agent actually sent.</p>
|
||||
|
||||
<h2 id="local">Why view traces locally?</h2>
|
||||
<p>
|
||||
Many observability products are useful for production systems, but local debugging has a different job.
|
||||
When a coding agent touches private code, private prompts, repository metadata, or internal tools, the
|
||||
safest default is to inspect the trace on your own machine.
|
||||
</p>
|
||||
<p class="note">
|
||||
claude-tap keeps trace sessions local by default. Common auth headers are redacted before recording, and
|
||||
exported HTML files are static artifacts that you control.
|
||||
</p>
|
||||
|
||||
<h2 id="supported">Supported traces and clients</h2>
|
||||
<p>claude-tap can trace and inspect sessions from:</p>
|
||||
<ul>
|
||||
<li>Claude Code</li>
|
||||
<li>Codex CLI</li>
|
||||
<li>Gemini CLI</li>
|
||||
<li>Cursor CLI</li>
|
||||
<li>OpenCode</li>
|
||||
<li>Kimi CLI</li>
|
||||
<li>Pi</li>
|
||||
<li>Hermes Agent</li>
|
||||
<li>Qoder CLI</li>
|
||||
<li>Antigravity CLI</li>
|
||||
<li>CodeBuddy CLI</li>
|
||||
</ul>
|
||||
<p>
|
||||
It also supports trace shapes from Anthropic Messages, OpenAI Responses, OpenAI Chat Completions, Gemini,
|
||||
and Claude-compatible gateways.
|
||||
</p>
|
||||
|
||||
<h2 id="how">How to view a trace</h2>
|
||||
<p>Install claude-tap:</p>
|
||||
<pre><code>uv tool install claude-tap</code></pre>
|
||||
<p>Run the client through claude-tap:</p>
|
||||
<pre><code># Claude Code
|
||||
claude-tap
|
||||
|
||||
# Codex CLI
|
||||
claude-tap --tap-client codex
|
||||
|
||||
# Gemini CLI
|
||||
claude-tap --tap-client gemini -- -p "hello"</code></pre>
|
||||
<p>Open the local dashboard or export a standalone HTML file:</p>
|
||||
<pre><code>claude-tap export --format html trace.jsonl</code></pre>
|
||||
|
||||
<h2 id="inspect">What to inspect first</h2>
|
||||
<ul>
|
||||
<li>Did the agent receive the prompt and context you expected?</li>
|
||||
<li>Did tool schemas change between turns?</li>
|
||||
<li>Did the agent call the right tool with the right parameters?</li>
|
||||
<li>Did token usage grow because of history, tool results, or repeated context?</li>
|
||||
<li>Did latency come from the model call, tool call, or a long streaming response?</li>
|
||||
</ul>
|
||||
|
||||
<h2>Claude trace viewer</h2>
|
||||
<p>
|
||||
For Claude Code and Anthropic-compatible traffic, claude-tap shows Anthropic Messages requests, tool calls,
|
||||
streaming responses, token usage, and Claude-compatible gateway metadata.
|
||||
</p>
|
||||
|
||||
<h2>Codex trace viewer</h2>
|
||||
<p>
|
||||
For Codex CLI, claude-tap supports OpenAI API key mode and ChatGPT subscription OAuth mode. It can inspect
|
||||
OpenAI Responses API traffic, WebSocket records, tool calls, reasoning/output sections, token usage, and
|
||||
request diffs.
|
||||
</p>
|
||||
|
||||
<h2 id="export">Export traces to HTML</h2>
|
||||
<p>The HTML export is useful when you need a portable review artifact:</p>
|
||||
<ul>
|
||||
<li>Share a debugging run with another maintainer</li>
|
||||
<li>Attach evidence to a pull request</li>
|
||||
<li>Archive a model behavior regression</li>
|
||||
<li>Compare adjacent requests during prompt or tool changes</li>
|
||||
</ul>
|
||||
<p>
|
||||
Use a local trace viewer when you want fast inspection of private agent runs. Use hosted observability when
|
||||
you need production monitoring, team-wide dashboards, alerts, or long-term telemetry.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer"><div class="shell">claude-tap is open source under the MIT License.</div></footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
# Local AI Agent Trace Viewer
|
||||
|
||||
`claude-tap` is a local trace viewer and HTML exporter for AI coding agents. It helps you inspect Claude Code traces, Codex traces, OpenAI Responses API traces, Anthropic Messages traces, Gemini traces, and other agent runs without uploading private data to a hosted dashboard.
|
||||
|
||||
English guide | [Simplified Chinese guide](agent-trace-viewer.zh.md)
|
||||
|
||||
## What is an AI agent trace?
|
||||
|
||||
An AI agent trace is the recorded request and response flow behind an agent run. For coding agents, a useful trace usually includes:
|
||||
|
||||
- System prompts and conversation history
|
||||
- Tool schemas, tool calls, tool inputs, and tool results
|
||||
- Streaming response chunks reconstructed into readable output
|
||||
- Token usage, cache usage, and latency
|
||||
- Request diffs between adjacent turns
|
||||
|
||||
These details are hard to recover from terminal output alone. The terminal shows what the agent says; a trace shows what the agent sent.
|
||||
|
||||
## Why view traces locally?
|
||||
|
||||
Many observability products are useful for production systems, but local debugging has a different job. When a coding agent touches private code, private prompts, repository metadata, or internal tools, the safest default is to inspect the trace on your own machine.
|
||||
|
||||
`claude-tap` keeps trace sessions local by default. Common auth headers are redacted before recording, and exported HTML files are static artifacts that you control.
|
||||
|
||||
## Supported traces and clients
|
||||
|
||||
`claude-tap` can trace and inspect sessions from:
|
||||
|
||||
- Claude Code
|
||||
- Codex CLI
|
||||
- Gemini CLI
|
||||
- Cursor CLI
|
||||
- OpenCode
|
||||
- Kimi CLI
|
||||
- Pi
|
||||
- Hermes Agent
|
||||
- Qoder CLI
|
||||
- Antigravity CLI
|
||||
- CodeBuddy CLI
|
||||
|
||||
It also supports trace shapes from Anthropic Messages, OpenAI Responses, OpenAI Chat Completions, Gemini, and Claude-compatible gateways.
|
||||
|
||||
## How to view a trace
|
||||
|
||||
Install `claude-tap`:
|
||||
|
||||
```bash
|
||||
uv tool install claude-tap
|
||||
```
|
||||
|
||||
Run the client through `claude-tap`:
|
||||
|
||||
```bash
|
||||
# Claude Code
|
||||
claude-tap
|
||||
|
||||
# Codex CLI
|
||||
claude-tap --tap-client codex
|
||||
|
||||
# Gemini CLI
|
||||
claude-tap --tap-client gemini -- -p "hello"
|
||||
```
|
||||
|
||||
Open the local dashboard or export a standalone HTML file:
|
||||
|
||||
```bash
|
||||
claude-tap export --format html trace.jsonl
|
||||
```
|
||||
|
||||
## What to inspect first
|
||||
|
||||
Start with these questions:
|
||||
|
||||
- Did the agent receive the prompt and context you expected?
|
||||
- Did tool schemas change between turns?
|
||||
- Did the agent call the right tool with the right parameters?
|
||||
- Did token usage grow because of history, tool results, or repeated context?
|
||||
- Did latency come from the model call, tool call, or a long streaming response?
|
||||
|
||||
The trace viewer is designed around these debugging questions.
|
||||
|
||||
## Claude trace viewer
|
||||
|
||||
For Claude Code and Anthropic-compatible traffic, `claude-tap` shows Anthropic Messages requests, tool calls, streaming responses, token usage, and Claude-compatible gateway metadata. It can be used as a local Claude trace viewer when you want to inspect Claude Code runs without uploading session data.
|
||||
|
||||
## Codex trace viewer
|
||||
|
||||
For Codex CLI, `claude-tap` supports OpenAI API key mode and ChatGPT subscription OAuth mode. It can inspect OpenAI Responses API traffic, WebSocket records, tool calls, reasoning/output sections, token usage, and request diffs.
|
||||
|
||||
## Export traces to HTML
|
||||
|
||||
The HTML export is useful when you need a portable review artifact:
|
||||
|
||||
- Share a debugging run with another maintainer
|
||||
- Attach evidence to a pull request
|
||||
- Archive a model behavior regression
|
||||
- Compare adjacent requests during prompt or tool changes
|
||||
|
||||
The exported file is self-contained and can be opened without a hosted dashboard.
|
||||
|
||||
## Local trace viewer vs hosted observability
|
||||
|
||||
Use a local trace viewer when you want fast inspection of private agent runs. Use hosted observability when you need production monitoring, team-wide dashboards, alerts, or long-term telemetry.
|
||||
|
||||
`claude-tap` is focused on the local debugging and review loop: capture a real run, inspect the request flow, and export a static artifact when needed.
|
||||
|
||||
## Next steps
|
||||
|
||||
- [Open the GitHub repository](https://github.com/liaohch3/claude-tap)
|
||||
- [Check supported clients](../support-matrix.md)
|
||||
- [Read the Chinese guide](agent-trace-viewer.zh.md)
|
||||
@@ -0,0 +1,456 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-Hans">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>本地 AI Agent Trace Viewer 指南 - claude-tap</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="使用 claude-tap 在本地查看 Claude Code、Codex、OpenAI Responses API、Gemini 和其他 AI 编程 Agent traces。"
|
||||
>
|
||||
<link rel="canonical" href="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.zh.html">
|
||||
<link rel="alternate" hreflang="en" href="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.html">
|
||||
<link rel="alternate" hreflang="zh-Hans" href="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.zh.html">
|
||||
<link rel="alternate" hreflang="x-default" href="https://liaohch3.com/claude-tap/guides/agent-trace-viewer.html">
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #f4f7fb;
|
||||
--color-panel: #ffffff;
|
||||
--color-ink: #111827;
|
||||
--color-muted: #5f6f84;
|
||||
--color-line: #dce5ef;
|
||||
--color-blue: #2563eb;
|
||||
--color-blue-soft: #dbeafe;
|
||||
--color-shadow: rgba(26, 43, 68, 0.12);
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1040px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background: rgba(244, 247, 251, 0.92);
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.topbar-inner {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: space-between;
|
||||
min-height: 68px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
align-items: center;
|
||||
background: var(--color-ink);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
height: 34px;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
font-size: 0.94rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--color-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav .primary {
|
||||
background: var(--color-ink);
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
padding: 0.58rem 0.92rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: var(--space-16) 0 var(--space-10);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--color-blue);
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 var(--space-4);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.65rem, 7vw, 5.5rem);
|
||||
letter-spacing: 0;
|
||||
line-height: 0.98;
|
||||
margin: 0;
|
||||
max-width: 12ch;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: var(--color-muted);
|
||||
font-size: clamp(1.04rem, 2vw, 1.24rem);
|
||||
margin: var(--space-6) 0 0;
|
||||
max-width: 68ch;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-8);
|
||||
}
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0.72rem 1rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button.dark {
|
||||
background: var(--color-ink);
|
||||
border-color: var(--color-ink);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.light {
|
||||
background: var(--color-panel);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.article-grid {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
|
||||
padding-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
.toc {
|
||||
align-self: start;
|
||||
background: var(--color-panel);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-5);
|
||||
position: sticky;
|
||||
top: 92px;
|
||||
}
|
||||
|
||||
.toc strong {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.toc a {
|
||||
color: var(--color-muted);
|
||||
display: block;
|
||||
font-size: 0.92rem;
|
||||
padding: 0.32rem 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article {
|
||||
background: var(--color-panel);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 24px 60px var(--color-shadow);
|
||||
padding: var(--space-10);
|
||||
}
|
||||
|
||||
article > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.7rem, 3vw, 2.5rem);
|
||||
line-height: 1.08;
|
||||
margin: var(--space-12) 0 var(--space-4);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #0e1726;
|
||||
border: 1px solid #1f2f46;
|
||||
border-radius: var(--radius);
|
||||
color: #d8e7ff;
|
||||
font-family: var(--font-mono);
|
||||
overflow: auto;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.note {
|
||||
background: var(--color-blue-soft);
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: var(--radius);
|
||||
color: #1e3a8a;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(--space-8) 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: var(--color-muted);
|
||||
font-size: 0.92rem;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: var(--color-muted);
|
||||
padding: var(--space-8) 0;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.article-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.nav a:not(.primary):not(.lang) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.shell {
|
||||
width: min(100% - 24px, 1040px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.4rem, 18vw, 4rem);
|
||||
}
|
||||
|
||||
article {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="shell topbar-inner">
|
||||
<a class="brand" href="../index.zh.html"><span class="brand-mark">ct</span><strong>claude-tap</strong></a>
|
||||
<nav class="nav" aria-label="主导航">
|
||||
<a href="../index.zh.html">首页</a>
|
||||
<a href="../support-matrix.zh.html">客户端</a>
|
||||
<a class="lang" href="agent-trace-viewer.html">English</a>
|
||||
<a class="primary" href="https://github.com/liaohch3/claude-tap">GitHub</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="shell">
|
||||
<p class="eyebrow">指南</p>
|
||||
<h1>本地 AI Agent Trace Viewer</h1>
|
||||
<p class="lead">
|
||||
使用 claude-tap 在本地查看 Claude Code、Codex、OpenAI Responses API、Gemini 和其他 AI 编程 Agent traces。
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button dark" href="https://github.com/liaohch3/claude-tap">打开 GitHub</a>
|
||||
<a class="button light" href="../index.zh.html">返回概览</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="shell article-grid">
|
||||
<aside class="toc" aria-label="指南章节">
|
||||
<strong>章节</strong>
|
||||
<a href="#what-is-a-trace">什么是 trace？</a>
|
||||
<a href="#local">为什么本地查看？</a>
|
||||
<a href="#supported">支持的客户端</a>
|
||||
<a href="#how">如何查看</a>
|
||||
<a href="#inspect">先看什么</a>
|
||||
<a href="#export">HTML 导出</a>
|
||||
</aside>
|
||||
|
||||
<article>
|
||||
<p>
|
||||
<code>claude-tap</code> 是面向 AI 编程 Agent 的本地 trace viewer 和 HTML 导出工具。它可以查看 prompt、工具调用、token 用量、延迟、流式响应、请求 diff 和原始 API 请求结构，不需要把私有运行记录上传到云端 dashboard。
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<img src="../viewer-zh.png" alt="claude-tap 本地 AI agent trace viewer，展示请求、工具调用、token 用量和延迟">
|
||||
<figcaption>面向真实 agent session 的本地 viewer，而不是从终端日志反推出来的记录。</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="what-is-a-trace">什么是 AI agent trace？</h2>
|
||||
<p>AI agent trace 是一次 agent 运行背后的请求和响应链路记录。对于编程 Agent，一个有用的 trace 通常包括：</p>
|
||||
<ul>
|
||||
<li>System prompt 和对话历史</li>
|
||||
<li>工具 schema、工具调用、工具输入和工具结果</li>
|
||||
<li>重建后的流式响应内容</li>
|
||||
<li>Token 用量、cache 用量和延迟</li>
|
||||
<li>相邻轮次之间的请求 diff</li>
|
||||
</ul>
|
||||
<p>终端显示 agent 说了什么；trace 显示 agent 实际发出了什么。</p>
|
||||
|
||||
<h2 id="local">为什么要本地查看 trace？</h2>
|
||||
<p>
|
||||
很多 observability 产品适合生产系统，但本地调试的目标不同。当编程 Agent 接触私有代码、私有 prompt、仓库元数据或内部工具时，最稳妥的默认方式是在自己的机器上检查 trace。
|
||||
</p>
|
||||
<p class="note">
|
||||
claude-tap 默认把 trace session 留在本地。常见认证 header 会在记录前脱敏，导出的 HTML 文件也是由你自己控制的静态 artifact。
|
||||
</p>
|
||||
|
||||
<h2 id="supported">支持的 traces 和客户端</h2>
|
||||
<p>claude-tap 可以追踪和查看这些客户端的会话：</p>
|
||||
<ul>
|
||||
<li>Claude Code</li>
|
||||
<li>Codex CLI</li>
|
||||
<li>Gemini CLI</li>
|
||||
<li>Cursor CLI</li>
|
||||
<li>OpenCode</li>
|
||||
<li>Kimi CLI</li>
|
||||
<li>Pi</li>
|
||||
<li>Hermes Agent</li>
|
||||
<li>Qoder CLI</li>
|
||||
<li>Antigravity CLI</li>
|
||||
<li>CodeBuddy CLI</li>
|
||||
</ul>
|
||||
<p>它也支持 Anthropic Messages、OpenAI Responses、OpenAI Chat Completions、Gemini 和 Claude 兼容网关等 trace 形态。</p>
|
||||
|
||||
<h2 id="how">如何查看 trace</h2>
|
||||
<p>安装 claude-tap：</p>
|
||||
<pre><code>uv tool install claude-tap</code></pre>
|
||||
<p>通过 claude-tap 启动客户端：</p>
|
||||
<pre><code># Claude Code
|
||||
claude-tap
|
||||
|
||||
# Codex CLI
|
||||
claude-tap --tap-client codex
|
||||
|
||||
# Gemini CLI
|
||||
claude-tap --tap-client gemini -- -p "hello"</code></pre>
|
||||
<p>打开本地 dashboard，或导出独立 HTML 文件：</p>
|
||||
<pre><code>claude-tap export --format html trace.jsonl</code></pre>
|
||||
|
||||
<h2 id="inspect">先看哪些内容？</h2>
|
||||
<ul>
|
||||
<li>Agent 是否收到了你预期的 prompt 和上下文？</li>
|
||||
<li>多轮之间工具 schema 是否发生了变化？</li>
|
||||
<li>Agent 是否用正确参数调用了正确工具？</li>
|
||||
<li>Token 增长来自历史、工具结果，还是重复上下文？</li>
|
||||
<li>延迟来自模型调用、工具调用，还是很长的流式响应？</li>
|
||||
</ul>
|
||||
|
||||
<h2>Claude trace viewer</h2>
|
||||
<p>
|
||||
对于 Claude Code 和 Anthropic 兼容流量，claude-tap 可以展示 Anthropic Messages 请求、工具调用、流式响应、token 用量和 Claude 兼容网关元数据。
|
||||
</p>
|
||||
|
||||
<h2>Codex trace viewer</h2>
|
||||
<p>
|
||||
对于 Codex CLI，claude-tap 支持 OpenAI API key 模式和 ChatGPT 订阅 OAuth 模式。它可以查看 OpenAI Responses API 流量、WebSocket 记录、工具调用、reasoning/output 区块、token 用量和请求 diff。
|
||||
</p>
|
||||
|
||||
<h2 id="export">导出 trace 到 HTML</h2>
|
||||
<p>HTML 导出适合生成可移植的 review artifact：</p>
|
||||
<ul>
|
||||
<li>和其他 maintainer 分享一次调试运行</li>
|
||||
<li>给 pull request 附上证据</li>
|
||||
<li>归档一次模型行为回归</li>
|
||||
<li>在 prompt 或工具变更期间对比相邻请求</li>
|
||||
</ul>
|
||||
<p>
|
||||
当你需要快速检查私有 agent runs 时，适合使用本地 trace viewer。当你需要生产监控、团队 dashboard、告警或长期遥测时，适合使用托管 observability。
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer"><div class="shell">claude-tap 是 MIT 协议开源项目。</div></footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
# 本地 AI Agent Trace Viewer
|
||||
|
||||
`claude-tap` 是面向 AI 编程 Agent 的本地 trace viewer 和 HTML 导出工具。它可以查看 Claude Code traces、Codex traces、OpenAI Responses API traces、Anthropic Messages traces、Gemini traces 和其他 agent runs，不需要把私有数据上传到云端 dashboard。
|
||||
|
||||
[English guide](agent-trace-viewer.md) | 中文指南
|
||||
|
||||
## 什么是 AI agent trace？
|
||||
|
||||
AI agent trace 是一次 agent 运行背后的请求和响应链路记录。对于编程 Agent，一个有用的 trace 通常包括：
|
||||
|
||||
- System prompt 和对话历史
|
||||
- 工具 schema、工具调用、工具输入和工具结果
|
||||
- 重建后的流式响应内容
|
||||
- Token 用量、cache 用量和延迟
|
||||
- 相邻轮次之间的请求 diff
|
||||
|
||||
这些内容很难只从终端输出里恢复。终端显示 agent 说了什么；trace 显示 agent 实际发出了什么。
|
||||
|
||||
## 为什么要本地查看 trace？
|
||||
|
||||
很多 observability 产品适合生产系统，但本地调试的目标不同。当编程 Agent 接触私有代码、私有 prompt、仓库元数据或内部工具时，最稳妥的默认方式是在自己的机器上检查 trace。
|
||||
|
||||
`claude-tap` 默认把 trace session 留在本地。常见认证 header 会在记录前脱敏，导出的 HTML 文件也是由你自己控制的静态 artifact。
|
||||
|
||||
## 支持的 traces 和客户端
|
||||
|
||||
`claude-tap` 可以追踪和查看这些客户端的会话：
|
||||
|
||||
- Claude Code
|
||||
- Codex CLI
|
||||
- Gemini CLI
|
||||
- Cursor CLI
|
||||
- OpenCode
|
||||
- Kimi CLI
|
||||
- Pi
|
||||
- Hermes Agent
|
||||
- Qoder CLI
|
||||
- Antigravity CLI
|
||||
- CodeBuddy CLI
|
||||
|
||||
它也支持 Anthropic Messages、OpenAI Responses、OpenAI Chat Completions、Gemini 和 Claude 兼容网关等 trace 形态。
|
||||
|
||||
## 如何查看 trace
|
||||
|
||||
安装 `claude-tap`：
|
||||
|
||||
```bash
|
||||
uv tool install claude-tap
|
||||
```
|
||||
|
||||
通过 `claude-tap` 启动客户端：
|
||||
|
||||
```bash
|
||||
# Claude Code
|
||||
claude-tap
|
||||
|
||||
# Codex CLI
|
||||
claude-tap --tap-client codex
|
||||
|
||||
# Gemini CLI
|
||||
claude-tap --tap-client gemini -- -p "hello"
|
||||
```
|
||||
|
||||
打开本地 dashboard，或导出独立 HTML 文件：
|
||||
|
||||
```bash
|
||||
claude-tap export --format html trace.jsonl
|
||||
```
|
||||
|
||||
## 先看哪些内容？
|
||||
|
||||
可以从这些问题开始：
|
||||
|
||||
- Agent 是否收到了你预期的 prompt 和上下文？
|
||||
- 多轮之间工具 schema 是否发生了变化？
|
||||
- Agent 是否用正确参数调用了正确工具？
|
||||
- Token 增长来自历史、工具结果，还是重复上下文？
|
||||
- 延迟来自模型调用、工具调用，还是很长的流式响应？
|
||||
|
||||
trace viewer 的设计就是围绕这些调试问题展开的。
|
||||
|
||||
## Claude trace viewer
|
||||
|
||||
对于 Claude Code 和 Anthropic 兼容流量，`claude-tap` 可以展示 Anthropic Messages 请求、工具调用、流式响应、token 用量和 Claude 兼容网关元数据。当你想在不上传 session 数据的情况下查看 Claude Code runs，它可以作为本地 Claude trace viewer 使用。
|
||||
|
||||
## Codex trace viewer
|
||||
|
||||
对于 Codex CLI，`claude-tap` 支持 OpenAI API key 模式和 ChatGPT 订阅 OAuth 模式。它可以查看 OpenAI Responses API 流量、WebSocket 记录、工具调用、reasoning/output 区块、token 用量和请求 diff。
|
||||
|
||||
## 导出 trace 到 HTML
|
||||
|
||||
HTML 导出适合生成可移植的 review artifact：
|
||||
|
||||
- 和其他 maintainer 分享一次调试运行
|
||||
- 给 pull request 附上证据
|
||||
- 归档一次模型行为回归
|
||||
- 在 prompt 或工具变更期间对比相邻请求
|
||||
|
||||
导出的文件是自包含的，不依赖托管 dashboard。
|
||||
|
||||
## 本地 trace viewer 和托管 observability 的区别
|
||||
|
||||
当你需要快速检查私有 agent runs 时，适合使用本地 trace viewer。当你需要生产监控、团队 dashboard、告警或长期遥测时，适合使用托管 observability。
|
||||
|
||||
`claude-tap` 关注的是本地调试和 review 流程：捕获一次真实运行，检查请求链路，并在需要时导出静态 artifact。
|
||||
|
||||
## 下一步
|
||||
|
||||
- [打开 GitHub 仓库](https://github.com/liaohch3/claude-tap)
|
||||
- [查看支持的客户端](../support-matrix.zh.md)
|
||||
- [Read the English guide](agent-trace-viewer.md)
|
||||
+633
@@ -0,0 +1,633 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>claude-tap - Local AI Agent Trace Viewer</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="claude-tap is a local AI agent trace viewer and HTML exporter for Claude Code, Codex, Gemini, Cursor, OpenCode, Kimi, Pi, Hermes, Qoder, Antigravity, and CodeBuddy."
|
||||
>
|
||||
<link rel="canonical" href="https://liaohch3.com/claude-tap/">
|
||||
<link rel="alternate" hreflang="en" href="https://liaohch3.com/claude-tap/">
|
||||
<link rel="alternate" hreflang="zh-Hans" href="https://liaohch3.com/claude-tap/index.zh.html">
|
||||
<link rel="alternate" hreflang="x-default" href="https://liaohch3.com/claude-tap/">
|
||||
<meta property="og:title" content="claude-tap - Local AI Agent Trace Viewer">
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Inspect coding agent traces locally: tool calls, prompts, token usage, latency, streaming responses, and request diffs."
|
||||
>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://liaohch3.com/claude-tap/">
|
||||
<meta property="og:image" content="https://liaohch3.com/claude-tap/viewer-light.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #f4f7fb;
|
||||
--color-panel: #ffffff;
|
||||
--color-ink: #111827;
|
||||
--color-muted: #5f6f84;
|
||||
--color-line: #dce5ef;
|
||||
--color-blue: #2563eb;
|
||||
--color-blue-soft: #dbeafe;
|
||||
--color-cyan: #06b6d4;
|
||||
--color-green: #059669;
|
||||
--color-orange: #ea580c;
|
||||
--color-shadow: rgba(26, 43, 68, 0.12);
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1180px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
background: rgba(244, 247, 251, 0.92);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.topbar-inner {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: space-between;
|
||||
min-height: 68px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
align-items: center;
|
||||
background: var(--color-ink);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
height: 34px;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.brand strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
font-size: 0.94rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--color-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav .primary {
|
||||
background: var(--color-ink);
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
padding: 0.58rem 0.92rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: var(--space-16) 0 var(--space-10);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--color-blue);
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
margin: 0 0 var(--space-4);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.75rem, 6vw, 5.7rem);
|
||||
letter-spacing: 0;
|
||||
line-height: 0.95;
|
||||
margin: 0;
|
||||
max-width: 11ch;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: var(--color-muted);
|
||||
font-size: clamp(1.05rem, 2vw, 1.28rem);
|
||||
margin: var(--space-6) 0 0;
|
||||
max-width: 62ch;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-8);
|
||||
}
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0.72rem 1rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button.dark {
|
||||
background: var(--color-ink);
|
||||
border-color: var(--color-ink);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.light {
|
||||
background: var(--color-panel);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.terminal {
|
||||
background: #0e1726;
|
||||
border: 1px solid #1f2f46;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 24px 50px var(--color-shadow);
|
||||
color: #d8e7ff;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.92rem;
|
||||
margin-top: var(--space-8);
|
||||
overflow: auto;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.terminal code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.viewer-shot {
|
||||
background: var(--color-panel);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 24px 60px var(--color-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewer-shot img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: var(--color-muted);
|
||||
font-size: 0.9rem;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.strip {
|
||||
border-top: 1px solid var(--color-line);
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
background: var(--color-panel);
|
||||
}
|
||||
|
||||
.strip-grid {
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
padding: var(--space-6) 0;
|
||||
}
|
||||
|
||||
.metric strong {
|
||||
display: block;
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.metric span {
|
||||
color: var(--color-muted);
|
||||
display: block;
|
||||
font-size: 0.92rem;
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: var(--space-16) 0;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(2rem, 4vw, 3.2rem);
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.section-head p,
|
||||
.section-copy {
|
||||
color: var(--color-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--color-panel);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.12rem;
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: var(--color-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.workflow {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.step {
|
||||
border-left: 3px solid var(--color-blue);
|
||||
padding-left: var(--space-4);
|
||||
}
|
||||
|
||||
.step strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step span {
|
||||
color: var(--color-muted);
|
||||
display: block;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.image-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.image-grid figure {
|
||||
background: var(--color-panel);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-grid figcaption {
|
||||
color: var(--color-muted);
|
||||
font-size: 0.9rem;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.clients {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.client {
|
||||
background: var(--color-panel);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: 999px;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.92rem;
|
||||
padding: 0.48rem 0.74rem;
|
||||
}
|
||||
|
||||
.cta {
|
||||
background: var(--color-ink);
|
||||
border-radius: var(--radius);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
padding: var(--space-8);
|
||||
}
|
||||
|
||||
.cta h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cta p {
|
||||
color: #d1d8e3;
|
||||
margin: var(--space-4) 0 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: var(--color-muted);
|
||||
padding: var(--space-8) 0;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.hero-grid,
|
||||
.section-head,
|
||||
.cards,
|
||||
.workflow,
|
||||
.image-grid,
|
||||
.cta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.strip-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.nav a:not(.primary):not(.lang) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.shell {
|
||||
width: min(100% - 24px, 1180px);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: var(--space-12);
|
||||
}
|
||||
|
||||
.strip-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.4rem, 18vw, 4rem);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="topbar">
|
||||
<div class="shell topbar-inner">
|
||||
<a class="brand" href="https://github.com/liaohch3/claude-tap">
|
||||
<span class="brand-mark">ct</span>
|
||||
<strong>claude-tap</strong>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Main navigation">
|
||||
<a href="guides/agent-trace-viewer.html">Guide</a>
|
||||
<a href="support-matrix.html">Clients</a>
|
||||
<a class="lang" href="index.zh.html">中文</a>
|
||||
<a class="primary" href="https://github.com/liaohch3/claude-tap">GitHub</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="shell hero-grid">
|
||||
<div>
|
||||
<p class="eyebrow">Local AI agent trace viewer</p>
|
||||
<h1>See what your coding agent really sent.</h1>
|
||||
<p class="lead">
|
||||
claude-tap captures real API traffic from AI coding agents and turns it into a local trace viewer.
|
||||
Inspect prompts, tool calls, token usage, latency, streaming responses, and request diffs without
|
||||
uploading private traces to a hosted dashboard.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button dark" href="https://github.com/liaohch3/claude-tap">View on GitHub</a>
|
||||
<a class="button light" href="guides/agent-trace-viewer.html">Read the trace viewer guide</a>
|
||||
</div>
|
||||
<pre class="terminal"><code>uv tool install claude-tap
|
||||
claude-tap --tap-client codex
|
||||
claude-tap export --format html trace.jsonl</code></pre>
|
||||
</div>
|
||||
<figure class="viewer-shot">
|
||||
<img src="viewer-light.png" alt="claude-tap local AI agent trace viewer showing requests, tool calls, and token usage">
|
||||
<figcaption class="caption">Open a real agent run, inspect each request, and compare context between turns.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="strip" aria-label="Trace viewer capabilities">
|
||||
<div class="shell strip-grid">
|
||||
<div class="metric">
|
||||
<strong>Tool calls</strong>
|
||||
<span>Inputs, outputs, parameters, and adjacent diffs.</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<strong>Token usage</strong>
|
||||
<span>Prompt, completion, cache, and latency metadata.</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<strong>HTML export</strong>
|
||||
<span>Portable trace files for review and archiving.</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<strong>Local-first</strong>
|
||||
<span>No hosted dashboard required for private traces.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="shell">
|
||||
<div class="section-head">
|
||||
<h2>Built for coding agent traces, not generic logs.</h2>
|
||||
<p>
|
||||
Agent runs are shaped by prompts, tool schemas, retries, streaming chunks, and model-specific
|
||||
request formats. claude-tap keeps those pieces visible so debugging can start from the actual trace.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<article class="card">
|
||||
<h3>Inspect full request flow</h3>
|
||||
<p>Review system prompts, conversation history, tool schemas, raw request bodies, and reconstructed responses.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Debug behavior with evidence</h3>
|
||||
<p>Use structured diffs to see which message, prompt, tool, or parameter changed between adjacent turns.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Share a trace without a service</h3>
|
||||
<p>Export a self-contained HTML viewer that teammates can open locally for review, support, or incident notes.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="shell">
|
||||
<div class="section-head">
|
||||
<h2>One workflow across agent clients.</h2>
|
||||
<p>
|
||||
Use one local trace viewer for Claude Code traces, Codex traces, OpenAI Responses API traces,
|
||||
Gemini traces, and other coding-agent sessions.
|
||||
</p>
|
||||
</div>
|
||||
<div class="clients" aria-label="Supported clients">
|
||||
<span class="client">Claude Code</span>
|
||||
<span class="client">Codex CLI</span>
|
||||
<span class="client">Gemini CLI</span>
|
||||
<span class="client">Cursor CLI</span>
|
||||
<span class="client">OpenCode</span>
|
||||
<span class="client">Kimi CLI</span>
|
||||
<span class="client">Pi</span>
|
||||
<span class="client">Hermes Agent</span>
|
||||
<span class="client">Qoder CLI</span>
|
||||
<span class="client">Antigravity CLI</span>
|
||||
<span class="client">CodeBuddy CLI</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="shell image-grid">
|
||||
<figure>
|
||||
<img src="diff-modal.png" alt="Structured diff between adjacent AI agent requests">
|
||||
<figcaption>Structured request diffs show how context changes from one turn to the next.</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="viewer-dark.png" alt="Dark mode local trace viewer for long AI agent review sessions">
|
||||
<figcaption>Light and dark viewer modes support longer debugging and review sessions.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="shell">
|
||||
<div class="section-head">
|
||||
<h2>From run to review artifact.</h2>
|
||||
<p>
|
||||
Keep the trace local while you inspect it, then export a static HTML artifact only when you need to share.
|
||||
</p>
|
||||
</div>
|
||||
<div class="workflow">
|
||||
<div class="step">
|
||||
<strong>Run</strong>
|
||||
<span>Launch your agent through claude-tap.</span>
|
||||
</div>
|
||||
<div class="step">
|
||||
<strong>Capture</strong>
|
||||
<span>Record real API traffic and streaming responses.</span>
|
||||
</div>
|
||||
<div class="step">
|
||||
<strong>Inspect</strong>
|
||||
<span>Search turns, tools, usage, latency, and diffs.</span>
|
||||
</div>
|
||||
<div class="step">
|
||||
<strong>Export</strong>
|
||||
<span>Save a standalone HTML trace for review.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="shell cta">
|
||||
<div>
|
||||
<h2>Start with a local trace.</h2>
|
||||
<p>
|
||||
Use claude-tap when you need to understand what an AI coding agent actually did before you tune prompts,
|
||||
compare tools, or share a run with another reviewer.
|
||||
</p>
|
||||
</div>
|
||||
<a class="button light" href="https://github.com/liaohch3/claude-tap">Install from GitHub</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="shell">
|
||||
<span>claude-tap is open source under the MIT license.</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,199 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-Hans">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>claude-tap - 本地 AI Agent Trace Viewer</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="claude-tap 是面向 AI 编程 Agent 的本地 trace viewer 和 HTML 导出工具，支持 Claude Code、Codex、Gemini、Cursor、OpenCode、Kimi、Pi、Hermes、Qoder、Antigravity 和 CodeBuddy。"
|
||||
>
|
||||
<link rel="canonical" href="https://liaohch3.com/claude-tap/index.zh.html">
|
||||
<link rel="alternate" hreflang="en" href="https://liaohch3.com/claude-tap/">
|
||||
<link rel="alternate" hreflang="zh-Hans" href="https://liaohch3.com/claude-tap/index.zh.html">
|
||||
<link rel="alternate" hreflang="x-default" href="https://liaohch3.com/claude-tap/">
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #f4f7fb;
|
||||
--color-panel: #ffffff;
|
||||
--color-ink: #111827;
|
||||
--color-muted: #5f6f84;
|
||||
--color-line: #dce5ef;
|
||||
--color-blue: #2563eb;
|
||||
--color-shadow: rgba(26, 43, 68, 0.12);
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--radius: 8px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; overflow-x: clip; }
|
||||
body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); line-height: 1.65; }
|
||||
a { color: inherit; }
|
||||
img { display: block; max-width: 100%; }
|
||||
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
|
||||
.topbar { border-bottom: 1px solid var(--color-line); background: rgba(244, 247, 251, 0.92); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
|
||||
.topbar-inner { align-items: center; display: flex; gap: var(--space-4); justify-content: space-between; min-height: 68px; }
|
||||
.brand { align-items: center; display: flex; gap: var(--space-3); text-decoration: none; }
|
||||
.brand-mark { align-items: center; background: var(--color-ink); border-radius: 6px; color: #fff; display: inline-flex; font-family: var(--font-mono); font-size: 0.92rem; font-weight: 700; height: 34px; justify-content: center; width: 34px; }
|
||||
.nav { align-items: center; display: flex; gap: var(--space-4); font-size: 0.94rem; white-space: nowrap; }
|
||||
.nav a { color: var(--color-muted); text-decoration: none; }
|
||||
.nav .primary { background: var(--color-ink); border-radius: 999px; color: #fff; padding: 0.58rem 0.92rem; }
|
||||
.hero { padding: var(--space-16) 0 var(--space-10); }
|
||||
.hero-grid { align-items: center; display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
|
||||
.eyebrow { color: var(--color-blue); font-size: 0.84rem; font-weight: 700; margin: 0 0 var(--space-4); text-transform: uppercase; }
|
||||
h1 { font-size: clamp(2.65rem, 6vw, 5.5rem); letter-spacing: 0; line-height: 0.98; margin: 0; max-width: 12ch; overflow-wrap: anywhere; }
|
||||
.lead { color: var(--color-muted); font-size: clamp(1.05rem, 2vw, 1.28rem); margin: var(--space-6) 0 0; max-width: 62ch; }
|
||||
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
|
||||
.button { align-items: center; border: 1px solid var(--color-line); border-radius: 999px; display: inline-flex; font-weight: 700; justify-content: center; min-height: 44px; padding: 0.72rem 1rem; text-decoration: none; white-space: nowrap; }
|
||||
.button.dark { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
|
||||
.button.light { background: var(--color-panel); color: var(--color-ink); }
|
||||
.terminal { background: #0e1726; border: 1px solid #1f2f46; border-radius: var(--radius); box-shadow: 0 24px 50px var(--color-shadow); color: #d8e7ff; font-family: var(--font-mono); font-size: 0.92rem; margin-top: var(--space-8); overflow: auto; padding: var(--space-5); }
|
||||
.terminal code { white-space: pre; }
|
||||
.viewer-shot { background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: 0 24px 60px var(--color-shadow); overflow: hidden; }
|
||||
.viewer-shot img { width: 100%; }
|
||||
.caption { color: var(--color-muted); font-size: 0.9rem; padding: var(--space-3) var(--space-4); }
|
||||
.strip { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-panel); }
|
||||
.strip-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--space-6) 0; }
|
||||
.metric strong { display: block; font-size: 1.02rem; }
|
||||
.metric span { color: var(--color-muted); display: block; font-size: 0.92rem; margin-top: 0.25rem; }
|
||||
.section { padding: var(--space-16) 0; }
|
||||
.section-head { align-items: end; display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); margin-bottom: var(--space-8); }
|
||||
h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; margin: 0; overflow-wrap: anywhere; }
|
||||
.section-head p { color: var(--color-muted); margin: 0; }
|
||||
.cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.card { background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-6); }
|
||||
.card h3 { font-size: 1.12rem; margin: 0 0 var(--space-3); }
|
||||
.card p { color: var(--color-muted); margin: 0; }
|
||||
.workflow { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.step { border-left: 3px solid var(--color-blue); padding-left: var(--space-4); }
|
||||
.step strong, .step span { display: block; }
|
||||
.step span { color: var(--color-muted); margin-top: 0.5rem; }
|
||||
.image-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.image-grid figure { background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius); margin: 0; overflow: hidden; }
|
||||
.image-grid figcaption { color: var(--color-muted); font-size: 0.9rem; padding: var(--space-3) var(--space-4); }
|
||||
.clients { display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
||||
.client { background: var(--color-panel); border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-muted); font-size: 0.92rem; padding: 0.48rem 0.74rem; }
|
||||
.cta { background: var(--color-ink); border-radius: var(--radius); color: #fff; display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-8); }
|
||||
.cta h2 { color: #fff; }
|
||||
.cta p { color: #d1d8e3; margin: var(--space-4) 0 0; }
|
||||
.footer { color: var(--color-muted); padding: var(--space-8) 0; }
|
||||
@media (max-width: 860px) {
|
||||
.hero-grid, .section-head, .cards, .workflow, .image-grid, .cta { grid-template-columns: 1fr; }
|
||||
.strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.nav a:not(.primary):not(.lang) { display: none; }
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.shell { width: min(100% - 24px, 1180px); }
|
||||
.hero { padding-top: var(--space-12); }
|
||||
.strip-grid { grid-template-columns: 1fr; }
|
||||
h1 { font-size: clamp(2.4rem, 18vw, 4rem); }
|
||||
.button { width: 100%; }
|
||||
.cta { padding: var(--space-6); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="shell topbar-inner">
|
||||
<a class="brand" href="https://github.com/liaohch3/claude-tap"><span class="brand-mark">ct</span><strong>claude-tap</strong></a>
|
||||
<nav class="nav" aria-label="主导航">
|
||||
<a href="guides/agent-trace-viewer.zh.html">指南</a>
|
||||
<a href="support-matrix.zh.html">客户端</a>
|
||||
<a class="lang" href="index.html">English</a>
|
||||
<a class="primary" href="https://github.com/liaohch3/claude-tap">GitHub</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="shell hero-grid">
|
||||
<div>
|
||||
<p class="eyebrow">本地 AI Agent Trace Viewer</p>
|
||||
<h1>看清编程 Agent 真正发出了什么。</h1>
|
||||
<p class="lead">
|
||||
claude-tap 捕获 AI 编程 Agent 的真实 API 流量，并生成本地 trace viewer。你可以查看 prompt、工具调用、token 用量、延迟、流式响应和请求 diff，不需要把私有 trace 上传到云端 dashboard。
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button dark" href="https://github.com/liaohch3/claude-tap">打开 GitHub</a>
|
||||
<a class="button light" href="guides/agent-trace-viewer.zh.html">阅读 Trace Viewer 指南</a>
|
||||
</div>
|
||||
<pre class="terminal"><code>uv tool install claude-tap
|
||||
claude-tap --tap-client codex
|
||||
claude-tap export --format html trace.jsonl</code></pre>
|
||||
</div>
|
||||
<figure class="viewer-shot">
|
||||
<img src="viewer-zh.png" alt="claude-tap 本地 AI agent trace viewer，展示请求、工具调用和 token 用量">
|
||||
<figcaption class="caption">打开一次真实 agent 运行，检查每个请求，并对比上下文在多轮之间如何变化。</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="strip" aria-label="Trace viewer 能力">
|
||||
<div class="shell strip-grid">
|
||||
<div class="metric"><strong>工具调用</strong><span>查看输入、输出、参数和相邻请求 diff。</span></div>
|
||||
<div class="metric"><strong>Token 用量</strong><span>记录 prompt、completion、cache 和 latency 信息。</span></div>
|
||||
<div class="metric"><strong>HTML 导出</strong><span>生成便于 review 和归档的可移植 trace 文件。</span></div>
|
||||
<div class="metric"><strong>本地优先</strong><span>查看私有 trace 不需要托管 dashboard。</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="shell">
|
||||
<div class="section-head">
|
||||
<h2>为编程 Agent trace 设计，而不是泛用日志。</h2>
|
||||
<p>Agent 运行受到 prompt、工具 schema、重试、流式 chunk 和模型请求格式影响。claude-tap 把这些内容保留下来，让调试从真实 trace 开始。</p>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<article class="card"><h3>查看完整请求链路</h3><p>检查 system prompt、对话历史、工具 schema、原始请求体和重建后的响应。</p></article>
|
||||
<article class="card"><h3>用证据调试行为</h3><p>通过结构化 diff 看清相邻轮次之间是哪条消息、prompt、工具或参数发生了变化。</p></article>
|
||||
<article class="card"><h3>不用服务也能分享 trace</h3><p>导出自包含 HTML viewer，团队成员可以本地打开用于 review、支持或复盘。</p></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="shell">
|
||||
<div class="section-head">
|
||||
<h2>一套流程覆盖多种 Agent 客户端。</h2>
|
||||
<p>用同一个本地 trace viewer 查看 Claude Code traces、Codex traces、OpenAI Responses API traces、Gemini traces 和其他编程 Agent 会话。</p>
|
||||
</div>
|
||||
<div class="clients" aria-label="支持的客户端">
|
||||
<span class="client">Claude Code</span><span class="client">Codex CLI</span><span class="client">Gemini CLI</span><span class="client">Cursor CLI</span><span class="client">OpenCode</span><span class="client">Kimi CLI</span><span class="client">Pi</span><span class="client">Hermes Agent</span><span class="client">Qoder CLI</span><span class="client">Antigravity CLI</span><span class="client">CodeBuddy CLI</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="shell image-grid">
|
||||
<figure><img src="diff-modal.png" alt="AI agent 相邻请求之间的结构化 diff"><figcaption>结构化请求 diff 展示上下文如何从一轮变化到下一轮。</figcaption></figure>
|
||||
<figure><img src="viewer-dark.png" alt="适合长时间 review 的暗色模式本地 trace viewer"><figcaption>亮色和暗色模式适合更长时间的调试和 review。</figcaption></figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="shell">
|
||||
<div class="section-head">
|
||||
<h2>从一次运行到一份 review 证据。</h2>
|
||||
<p>先把 trace 留在本地检查；只有需要分享时，再导出静态 HTML artifact。</p>
|
||||
</div>
|
||||
<div class="workflow">
|
||||
<div class="step"><strong>运行</strong><span>通过 claude-tap 启动你的 Agent。</span></div>
|
||||
<div class="step"><strong>捕获</strong><span>记录真实 API 流量和流式响应。</span></div>
|
||||
<div class="step"><strong>检查</strong><span>搜索轮次、工具、用量、延迟和 diff。</span></div>
|
||||
<div class="step"><strong>导出</strong><span>保存独立 HTML trace 供 review。</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="shell cta">
|
||||
<div><h2>从本地 trace 开始。</h2><p>当你需要理解一个 AI 编程 Agent 到底做了什么，再去调 prompt、比较工具或分享运行记录。</p></div>
|
||||
<a class="button light" href="https://github.com/liaohch3/claude-tap">从 GitHub 安装</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer"><div class="shell"><span>claude-tap 是 MIT 协议开源项目。</span></div></footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://liaohch3.com/claude-tap/sitemap.xml
|
||||
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://liaohch3.com/claude-tap/</loc>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://liaohch3.com/claude-tap/index.zh.html</loc>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://liaohch3.com/claude-tap/guides/agent-trace-viewer.html</loc>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://liaohch3.com/claude-tap/guides/agent-trace-viewer.zh.html</loc>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
Reference in New Issue
Block a user