self-media-james/articles/008/cover.html
邓文兵 0686f1969c docs(article): 添加 Claude Code 源码分析文章及相关架构图
- 新增 008 号文章《51 万行源码意外曝光!我扒完了 Claude Code 的全部家底》
- 添加 8 个 Mermaid 架构图文件,涵盖整体架构、启动流程、查询循环等
- 新增项目配置文件 CLAUDE.md,定义自媒体写作规范
- 创建详细的架构分析文档 claude-arch-by-claude.md
- 包含权限系统、工具调度、多智能体等核心技术解析
- 记录反蒸馏机制、KAIROS 守护进程等隐藏功能发现
- 提供完整的工具清单及安全防护措施说明
2026-04-01 10:38:57 +08:00

492 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@900&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 900px;
height: 383px;
overflow: hidden;
background: #0a0a0f;
font-family: 'Noto Sans SC', sans-serif;
}
.canvas {
position: relative;
width: 900px;
height: 383px;
overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 75% 50%, rgba(220, 80, 40, 0.12) 0%, transparent 70%),
radial-gradient(ellipse 50% 80% at 20% 80%, rgba(40, 80, 220, 0.08) 0%, transparent 60%),
linear-gradient(160deg, #0a0a12 0%, #0d0d18 40%, #0a0f1a 100%);
}
/* Scrolling code background */
.code-rain {
position: absolute;
inset: 0;
opacity: 0.12;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
line-height: 1.6;
color: #7faaff;
overflow: hidden;
pointer-events: none;
}
.code-col {
position: absolute;
top: -20px;
white-space: pre;
animation: codeScroll 20s linear infinite;
}
@keyframes codeScroll {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
.code-col:nth-child(1) { left: 2%; animation-duration: 18s; color: #5a7fbb; }
.code-col:nth-child(2) { left: 14%; animation-duration: 22s; animation-delay: -3s; color: #6b8fcc; }
.code-col:nth-child(3) { left: 26%; animation-duration: 16s; animation-delay: -7s; }
.code-col:nth-child(4) { left: 54%; animation-duration: 25s; animation-delay: -2s; color: #5a7fbb; }
.code-col:nth-child(5) { left: 66%; animation-duration: 19s; animation-delay: -5s; }
.code-col:nth-child(6) { left: 78%; animation-duration: 21s; animation-delay: -9s; color: #6b8fcc; }
.code-col:nth-child(7) { left: 88%; animation-duration: 17s; animation-delay: -4s; }
/* Glitch scan line */
.scanline {
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(220, 80, 40, 0.4), rgba(255, 120, 60, 0.6), rgba(220, 80, 40, 0.4), transparent);
animation: scan 3s ease-in-out infinite;
z-index: 2;
box-shadow: 0 0 20px rgba(220, 80, 40, 0.3);
}
@keyframes scan {
0%, 100% { top: -2px; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 383px; opacity: 0; }
}
/* Grid overlay */
.grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(100, 150, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(100, 150, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
z-index: 1;
}
/* Main content */
.content {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
display: flex;
padding: 36px 48px;
gap: 20px;
}
.left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
/* Leak badge */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(220, 50, 30, 0.15);
border: 1px solid rgba(220, 50, 30, 0.5);
color: #ff6b4a;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 4px;
letter-spacing: 2px;
text-transform: uppercase;
width: fit-content;
animation: badgePulse 2s ease-in-out infinite;
}
.badge::before {
content: '';
width: 6px;
height: 6px;
background: #ff4030;
border-radius: 50%;
animation: dot 1s ease-in-out infinite;
}
@keyframes dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 10px rgba(220, 50, 30, 0.1); }
50% { box-shadow: 0 0 20px rgba(220, 50, 30, 0.25); }
}
/* Title */
.title {
font-size: 46px;
font-weight: 900;
line-height: 1.15;
letter-spacing: -1px;
color: #f0f0f5;
text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.title .num {
background: linear-gradient(135deg, #ff6b3d, #ff4019);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 52px;
}
.title .leak {
position: relative;
color: #ff6b4a;
-webkit-text-fill-color: #ff6b4a;
}
.subtitle {
font-size: 17px;
color: rgba(180, 195, 230, 0.7);
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.5;
}
.subtitle strong {
color: rgba(220, 230, 255, 0.9);
font-weight: 700;
}
/* Right side - terminal card */
.right {
width: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.terminal {
width: 100%;
background: rgba(12, 14, 24, 0.85);
border: 1px solid rgba(100, 150, 255, 0.12);
border-radius: 10px;
overflow: hidden;
box-shadow:
0 4px 40px rgba(0, 0, 0, 0.5),
0 0 60px rgba(220, 80, 40, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.terminal-bar {
height: 28px;
background: rgba(20, 22, 35, 0.9);
display: flex;
align-items: center;
padding: 0 10px;
gap: 6px;
border-bottom: 1px solid rgba(100, 150, 255, 0.06);
}
.terminal-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.terminal-dot:nth-child(1) { background: #ff5f57; }
.terminal-dot:nth-child(2) { background: #ffbd2e; }
.terminal-dot:nth-child(3) { background: #28c840; }
.terminal-body {
padding: 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
line-height: 1.7;
color: #8899bb;
}
.terminal-body .cmd { color: #28c840; }
.terminal-body .path { color: #ffbd2e; }
.terminal-body .err { color: #ff5f57; }
.terminal-body .str { color: #7faaff; }
.terminal-body .comment { color: #4a5568; }
.terminal-body .highlight { color: #ff6b4a; font-weight: 700; }
.terminal-body .white { color: #c8d4e8; }
/* Bottom bar */
.bottom-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent,
#ff4019 20%,
#ff6b3d 50%,
#ff4019 80%,
transparent
);
z-index: 10;
opacity: 0.7;
}
/* Corner accents */
.corner {
position: absolute;
width: 20px;
height: 20px;
z-index: 10;
opacity: 0.3;
}
.corner--tl { top: 12px; left: 12px; border-top: 2px solid #ff6b4a; border-left: 2px solid #ff6b4a; }
.corner--tr { top: 12px; right: 12px; border-top: 2px solid #ff6b4a; border-right: 2px solid #ff6b4a; }
.corner--bl { bottom: 12px; left: 12px; border-bottom: 2px solid #ff6b4a; border-left: 2px solid #ff6b4a; }
.corner--br { bottom: 12px; right: 12px; border-bottom: 2px solid #ff6b4a; border-right: 2px solid #ff6b4a; }
/* Noise texture */
.noise {
position: absolute;
inset: 0;
z-index: 5;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
pointer-events: none;
}
</style>
</head>
<body>
<div class="canvas">
<!-- Code rain background -->
<div class="code-rain">
<div class="code-col">const query = async () => {
const stream = api.stream()
for await (const chunk of stream) {
if (chunk.type === 'tool_use') {
await executeTool(chunk)
}
yield chunk.delta
}
}
export class QueryEngine {
private sessions: Map&lt;string&gt;
async compact(history) {
if (tokens > MAX_CONTEXT) {
return summarize(history)
}
}
}
const PERMISSIONS = [
'FileRead', 'FileWrite',
'Bash', 'Glob', 'Grep',
]
function checkSecurity(cmd) {
for (const rule of RULES) {
if (rule.match(cmd)) block()
}
}</div>
<div class="code-col">interface Tool {
name: string
isConcurrencySafe: boolean
execute(input: unknown)
}
async function dispatch(calls) {
const reads = calls.filter(safe)
const writes = calls.filter(!safe)
await Promise.all(reads)
for (const w of writes) {
await w.execute()
}
}
// KAIROS daemon mode
class KairosDaemon {
private cron: CronScheduler
async autoDream() {
await consolidateMemory()
await mergeFindingss()
}
watch(repo: Repository) {
repo.on('pr', handle)
repo.on('issue', handle)
}
}</div>
<div class="code-col">const FEATURE_FLAGS = {
KAIROS: false,
VOICE_MODE: false,
COORDINATOR: true,
BUDDY: true,
ANTI_DISTILL: true,
DAEMON: false,
BRIDGE: true,
TORCH: false,
}
// anti-distillation
if (feature('ANTI_DISTILL')) {
result.anti_distillation
= ['fake_tools']
}
// undercover mode
export function isUndercover() {
return isExternalRepo()
&& isAnthropicUser()
}</div>
<div class="code-col">export async function main() {
const config = loadConfig()
const keys = await keychain()
await Promise.all([
growthbook.init(),
mcp.connect(servers),
registerTools(TOOLS),
])
const prompt = buildSystem({
identity: AGENT_IDENTITY,
tools: TOOL_SPECS,
memory: loadMemory(),
claudeMd: readClaudeMd(),
})
launchRepl(prompt, config)
}</div>
<div class="code-col">// bashSecurity.ts
const CHECKS = 23
function validateCommand(cmd) {
// Check 1: $(command)
// Check 2: process substitution
// Check 7: zmodload bypass
// Check 12: unicode zero-width
// Check 19: IFS null byte
// Check 23: HackerOne report
if (dangerous(cmd)) {
telemetry.track(
'bash_security_triggered',
{ check: checkId }
)
return BLOCKED
}
}
// 512,664 lines total
// 1,884 .ts/.tsx files
// Runtime: Bun</div>
<div class="code-col">class MemorySystem {
private index: MemoryIndex
async recall(query: string) {
const matches = semantic(
this.memories, query
)
return matches.slice(0, 5)
}
async age() {
for (const m of this.memories) {
if (isStale(m)) {
await this.archive(m)
}
}
}
}
// buddy/species.ts
const SPECIES = [
'duck', 'dragon', 'octopus',
'capybara', 'ghost', 'mushroom',
]</div>
<div class="code-col">// coordinator prompt (300+ lines)
// Phase 1: Research
// Phase 2: Synthesis
// Phase 3: Implementation
// Phase 4: Verification
//
// "Do not rubber-stamp
// weak work"
//
// prompt cache strategy:
// static segments: cached
// dynamic segments: rebuilt
//
// cache_control: {
// type: 'ephemeral'
// }
//
// MAX_AUTOCOMPACT = 3
// saved 250k API calls/day</div>
</div>
<div class="scanline"></div>
<div class="grid-overlay"></div>
<div class="noise"></div>
<div class="corner corner--tl"></div>
<div class="corner corner--tr"></div>
<div class="corner corner--bl"></div>
<div class="corner corner--br"></div>
<!-- Main content -->
<div class="content">
<div class="left">
<div class="badge">source leaked</div>
<div class="title">
<span class="num">51万行</span>源码<span class="leak">曝光</span><br>
我扒完了Claude Code<br>的全部家底
</div>
<div class="subtitle">
<strong>512,664行</strong> TypeScript · <strong>1,884</strong> 文件 · <strong>44</strong> 特性开关
</div>
</div>
<div class="right">
<div class="terminal">
<div class="terminal-bar">
<div class="terminal-dot"></div>
<div class="terminal-dot"></div>
<div class="terminal-dot"></div>
</div>
<div class="terminal-body">
<span class="comment">// npm source map leak</span><br>
<span class="cmd">$</span> <span class="white">npm pack @anthropic-ai/claude-code</span><br>
<span class="path"></span> <span class="str">claude-code-2.1.88.tgz</span><br>
<span class="path"></span> <span class="str">index.js.map</span> <span class="highlight">59.8MB</span><br><br>
<span class="comment">// found R2 bucket URL...</span><br>
<span class="err">⚠ EXPOSED:</span><br>
<span class="white">&nbsp;&nbsp;files: </span><span class="highlight">1,884</span><br>
<span class="white">&nbsp;&nbsp;lines: </span><span class="highlight">512,664</span><br>
<span class="white">&nbsp;&nbsp;flags: </span><span class="highlight">44</span><br>
<span class="white">&nbsp;&nbsp;tools: </span><span class="highlight">40+</span><br><br>
<span class="err">█ KAIROS █ ANTI_DISTILL</span><br>
<span class="err">█ BUDDY &nbsp;█ UNDERCOVER</span>
</div>
</div>
</div>
</div>
<div class="bottom-bar"></div>
</div>
</body>
</html>