Cursor 开源平替 Cline 到底是如何实现的？本文带你刨根问底

graph TB  
subgraph VSCode[VS Code Extension]  
EXT[extension.ts]  
subgraph UI[User Interface]  
WP[Webview Panel]  
SB[Sidebar]  
CMD[Commands]  
end  
end
 
subgraph Core[Core System]  
CP[ClineProvider]  
CL[Cline]  
  
subgraph Modules[Core Modules]  
AM[assistant-message]  
IG[ignore]  
PR[prompts]  
SW[sliding-window]  
WV[webview]  
end  
end
 
subgraph State[State Management]  
GS[Global State]  
WS[Workspace State]  
SS[Secrets Storage]  
end
 
subgraph Services[External Services]  
AI[AI Services]  
subgraph APIs  
ANT[Anthropic API]  
OAI[OpenAI API]  
OR[OpenRouter]  
end  
AUTH[Authentication]  
BROW[Browser Control]  
end
 
%% Main Flow  
EXT -->|activates| CP  
EXT -->|registers| UI  
CP -->|initializes| CL  
  
%% Core Interactions  
CP -->|manages| State  
CL -->|uses| Modules  
  
%% UI Flow  
UI -->|communicates via| CP  
CP -->|updates| UI  
  
%% Service Integration  
CL -->|calls| APIs  
CP -->|manages| AUTH  
CL -->|controls| BROW
 
classDef vscode fill:#e1f3ff,stroke:#333,stroke-width:2px  
classDef core fill:#ffe1e1,stroke:#333,stroke-width:2px  
classDef state fill:#e1ffe1,stroke:#333,stroke-width:2px  
classDef service fill:#fff0db,stroke:#333,stroke-width:2px
 
class VSCode,UI vscode  
class Core,Modules core  
class State state  
class Services,APIs service  
  
  
  
  

export function activate(context: vscode.ExtensionContext) {  
// 1. 创建输出通道  
outputChannel = vscode.window.createOutputChannel("Cline");
 
// 2. 初始化日志系统  
Logger.initialize(outputChannel);
 
// 3. 创建侧边栏提供者  
const sidebarProvider = new ClineProvider(context, outputChannel);
 
// 4. 注册侧边栏视图  
context.subscriptions.push(  
vscode.window.registerWebviewViewProvider(  
ClineProvider.sideBarId,  
sidebarProvider,  
{  
webviewOptions: {  
retainContextWhenHidden: true  
}  
}  
)  
);  
}
 
// 注册了多个VS Code命令：  
- "cline.plusButtonClicked" // 新建对话  
- "cline.mcpButtonClicked" // MCP按钮  
- "cline.popoutButtonClicked" // 弹出到新标签页  
- "cline.settingsButtonClicked" // 设置  
- "cline.historyButtonClicked" // 历史记录  
- "cline.accountLoginClicked" // 账号登录  

graph TB  
subgraph ClineProvider[ClineProvider.ts]  
direction TB  
  
subgraph VSCodeIntegration[VS Code Integration]  
WV[Webview View]  
WP[Webview Panel]  
URI[URI Handler]  
end
 
subgraph StateSystem[State Management System]  
GS[Global State]  
SS[Secrets Storage]  
WS[Workspace State]  
end
 
subgraph TaskSystem[Task Management]  
TI[Task Init]  
TC[Task Control]  
TH[Task History]  
CK[Checkpoints]  
end
 
subgraph AuthSystem[Authentication & API]  
AM[Auth Manager]  
AC[API Config]  
MC[Model Config]  
MH[MCP Hub]  
end
 
subgraph EventSystem[Event Handling]  
ML[Message Listener]  
EH[Event Handler]  
CB[Callbacks]  
end
 
subgraph DataManagement[Data Management]  
ST[State]  
CF[Config]  
HI[History]  
SE[Secrets]  
end  
end
 
%% External Systems  
ExtVSCode[VS Code API]  
ExtAuth[Auth Services]  
ExtAPI[External APIs]  
Cline[Cline.ts]
 
%% Internal Connections  
StateSystem --> DataManagement  
TaskSystem --> StateSystem  
AuthSystem --> StateSystem  
EventSystem --> TaskSystem  
EventSystem --> AuthSystem  
VSCodeIntegration --> EventSystem
 
%% External Connections  
VSCodeIntegration --> ExtVSCode  
AuthSystem --> ExtAuth  
AuthSystem --> ExtAPI  
TaskSystem --> Cline
 
%% State Flow  
DataManagement --> ST  
DataManagement --> CF  
DataManagement --> HI  
DataManagement --> SE
 
classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px  
classDef system fill:#ffe1e1,stroke:#333,stroke-width:2px  
classDef external fill:#e1f3ff,stroke:#333,stroke-width:2px  
classDef data fill:#e1ffe1,stroke:#333,stroke-width:2px
 
class VSCodeIntegration,StateSystem,TaskSystem,AuthSystem,EventSystem system  
class ExtVSCode,ExtAuth,ExtAPI,Cline external  
class DataManagement data  

graph TB  
subgraph Cline[Cline.ts]  
direction TB  
  
subgraph Settings[Settings]  
CFG[API & System Config]  
end
 
subgraph Core[Core]  
TM[Task Manager]  
FM[File Manager]  
BM[Browser Manager]  
CM[Checkpoint Manager]  
end
 
subgraph Operations[Operations]  
TC[Task Control]  
FO[File Operations]  
AI[API Integration]  
TE[Tool Execution]  
end
 
subgraph UI[UI Interface]  
COM[Communication]  
end  
end
 
%% Main flows  
Settings --> Core  
Core --> Operations  
Operations --> UI
 
%% Cross-functional flows  
TC -->|uses| CM  
FO -->|uses| FM  
TE -->|uses| BM  
AI -->|via| COM
 
classDef settings fill:#e1f3ff,stroke:#333,stroke-width:2px  
classDef core fill:#ffe1e1,stroke:#333,stroke-width:2px  
classDef ops fill:#e1ffe1,stroke:#333,stroke-width:2px  
classDef ui fill:#fff0db,stroke:#333,stroke-width:2px
 
class Settings settings  
class Core core  
class Operations ops  
class UI ui  

sequenceDiagram  
participant User  
participant Webview  
participant ClineProvider  
participant Cline  
participant Tools  
participant AI
 
User->>Webview: 输入任务  
Webview->>ClineProvider: 发送消息  
ClineProvider->>Cline: 创建实例
 
activate Cline  
loop Task Loop  
Cline->>AI: 发送请求  
AI-->>Cline: 返回响应  
Cline->>Tools: 执行工具  
Tools->>User: 请求确认  
User-->>Tools: 确认执行  
Tools-->>Cline: 返回结果  
Cline->>AI: 返回执行结果  
end  
Cline-->>User: 任务完成  
deactivate Cline
 

flowchart TD  
A[AI 请求] --> B{AI 进行工具类型判断}  
B -->|Command| C[命令执行]  
B -->|File| D[文件操作]  
B -->|API| E[API 调用]  
B -->|Browser| F[浏览器操作]  
C --> G{需要确认?}  
G -->|Yes| H[用户确认]  
G -->|No| I[直接执行]  
H --> I  
I --> J[收集结果]  
D --> K[权限检查]  
K --> L[执行操作]  
L --> J  
E --> M[验证参数]  
M --> N[调用 API]  
N --> J  
F --> O[浏览器会话]  
O --> P[执行动作]  
P --> J  
J --> Q[返回给 AI]
 

class ClineProvider implements vscode.WebviewViewProvider {  
private cline?: Cline  
private view?: vscode.WebviewView  
private context: vscode.ExtensionContext
 
// 核心管理功能  
async initClineWithTask(task?: string)  
async handleMessage(message: Message)  
async updateState(state: State)  
  
// 定义全局文件名  
export const GlobalFileNames = {  
apiConversationHistory: "api_conversation_history.json", // API对话历史  
uiMessages: "ui_messages.json", // UI消息  
openRouterModels: "openrouter_models.json", // OpenRouter模型  
mcpSettings: "cline_mcp_settings.json", // MCP设置  
clineRules: ".clinerules", // Cline规则  
}  
}  

class ClineProvider {  
constructor(context: vscode.ExtensionContext) {  
this.context = context  
this.cline = undefined // 延迟初始化  
}
 
async initClineWithTask(task?: string) {  
await this.clearTask() // 清理现有任务
 
// 获取配置  
const config = await this.getState()
 
// 创建新实例  
this.cline = new Cline(  
this,  
config.apiConfiguration,  
config.autoApprovalSettings,  
config.browserSettings,  
config.chatSettings,  
config.customInstructions  
)  
}  
}
 

export class Cline {  
// 核心属性  
readonly taskId: string;  
api: ApiHandler;  
private terminalManager: TerminalManager;  
private urlContentFetcher: UrlContentFetcher;  
browserSession: BrowserSession;
 
// 状态控制  
private didEditFile: boolean = false;  
private abort: boolean = false;  
private consecutiveMistakeCount: number = 0;
 
// 历史记录  
apiConversationHistory: Anthropic.MessageParam[] = [];  
clineMessages: ClineMessage[] = [];
 
// 配置系统  
autoApprovalSettings: AutoApprovalSettings;  
private browserSettings: BrowserSettings;  
private chatSettings: ChatSettings;
 
// 任务执行核心方法  
async startTask(task?: string, images?: string[]): Promise<void> {  
// 初始化状态  
this.clineMessages = [];  
this.apiConversationHistory = [];
 
// 更新界面  
await this.providerRef.deref()?.postStateToWebview();
 
// 显示任务  
await this.say("text", task, images);
 
// 标记初始化完成  
this.isInitialized = true;
 
// 构建初始消息  
let imageBlocks = formatResponse.imageBlocks(images);
 
// 启动任务循环  
await this.initiateTaskLoop(  
[{  
type: "text",  
text: `<task>\\n${task}\\n</task>`,  
},  
...imageBlocks],  
true // isNewTask 标记  
);  
}  
}
 

private async initiateTaskLoop(  
userContent: UserContent,  
isNewTask: boolean  
): Promise<void> {  
let nextUserContent = userContent;  
let includeFileDetails = true;
 
while (!this.abort) {  
// 核心请求处理  
const didEndLoop = await this.recursivelyMakeClineRequests(  
nextUserContent,  
includeFileDetails,  
isNewTask  
);
 
includeFileDetails = false;
 
if (didEndLoop) {  
break;  
} else {  
// 处理未使用工具的情况  
nextUserContent = [{  
type: "text",  
text: formatResponse.noToolsUsed(),  
}];  
this.consecutiveMistakeCount++;  
}  
}  
}  

// 1. this.abort 为 true 的情况:  
- 用户手动中止  
- 发生严重错误  
- Cline 实例被销毁
 
// 2. didEndLoop 为 true 的情况:  
- 任务成功完成(使用 attempt_completion 工具)  
- 达到最大错误次数  
- 任务被标记为完成
 
// 3. 其他终止条件:  
- 连续错误次数过多  
- API 调用失败  
- 工具执行失败
 

private async recursivelyMakeClineRequests(  
userContent: UserContent,  
includeFileDetails: boolean,  
isNewTask: boolean  
): Promise<boolean> {  
// 1. 错误检查  
if (this.consecutiveMistakeCount >= MAX_CONSECUTIVE_MISTAKES) {  
throw new Error("Too many consecutive mistakes")  
}
 
try {  
// 2. 准备消息  
const messages = this.prepareMessages(userContent, includeFileDetails)
 
// 3. 发送 API 请求  
const response = await this.api.sendRequest(messages)
 
// 4. 处理响应  
if (response.type === "completion") {  
return true // 任务完成  
} else if (response.type === "tool_use") {  
await this.handleToolUse(response.tool)  
return false // 继续执行  
}  
} catch (error) {  
this.handleError(error)  
return true  
}  
}
 

private prepareMessages(  
userContent: UserContent,  
includeFileDetails: boolean  
): MessageParam[] {  
// 1. 构建基础消息  
const messages = [...this.apiConversationHistory]
 
// 2. 添加环境详情  
if (includeFileDetails) {  
messages.push({  
type: "environment_details",  
content: this.getEnvironmentDetails()  
})  
}
 
// 3. 添加用户内容  
messages.push({  
type: "user_content",  
content: userContent  
})
 
return messages  
}
 

class ApiHandler {  
async *attemptApiRequest(previousApiReqIndex: number) {  
// 1. 系统提示准备  
let systemPrompt = await SYSTEM_PROMPT(  
cwd,  
this.api.getModel().info.supportsComputerUse,  
mcpHub,  
this.browserSettings  
);
 
// 2. 上下文预处理  
const { truncatedHistory, deletedRange } = this.truncateHistoryToFitContext(  
previousApiReqIndex  
);
 
// 3. 流式通信  
const stream = this.api.createMessage(systemPrompt, truncatedHistory);  
yield* this.handleStreamResponse(stream);  
}
 
private truncateHistoryToFitContext(previousIndex: number) {  
const totalTokens = this.calculateTokensUsage();
 
switch (this.contextWindow) {  
case 64_000: // deepseek models  
this.maxAllowedSize = this.contextWindow - 27_000;  
break;  
case 128_000: // most models  
this.maxAllowedSize = this.contextWindow - 30_000;  
break;  
}
 
if (totalTokens >= this.maxAllowedSize) {  
return this.performTruncation();  
}
 
return { truncatedHistory: this.history };  
}  
}
 

export const toolUseNames = [  
"execute_command",  
"read_file",  
"write_to_file",  
"replace_in_file",  
"search_files",  
"list_files",  
"list_code_definition_names",  
"browser_action",  
"use_mcp_tool",  
"access_mcp_resource",  
"ask_followup_question",  
"plan_mode_response",  
"attempt_completion",  
] as const  

async executeCommandTool(command: string): Promise<[boolean, ToolResponse]> {  
// 1. 终端管理  
const terminalInfo = await this.terminalManager.getOrCreateTerminal(cwd)  
terminalInfo.terminal.show()
 
// 2. 执行命令  
const process = this.terminalManager.runCommand(terminalInfo, command)
 
// 3. 输出处理  
process.on("line", (line) => {  
result += line + "\\n"  
if (!didContinue) {  
sendCommandOutput(line)  
} else {  
this.say("command_output", line)  
}  
})
 
// 4. 等待完成  
await process
 
// 5. 返回结果  
return [completed, formatResult(result)]  
}
 

class FileOperations implements Tool {  
// 文件读取  
async readFile(path: string): Promise<string> {  
return fs.readFile(path, 'utf8');  
}
 
// 文件写入  
async writeFile(path: string, content: string): Promise<void> {  
await this.ensureDirectoryExists(path);  
await fs.writeFile(path, content);  
}
 
// 文件替换  
async replaceInFile(path: string, diff: string): Promise<void> {  
const content = await this.readFile(path);  
const newContent = await constructNewFileContent(diff, content);  
await this.writeFile(path, newContent);  
}
 
// 文件列表  
async listFiles(path: string, recursive: boolean): Promise<string[]> {  
if (recursive) {  
return this.recursiveListFiles(path);  
}  
return fs.readdir(path);  
}  
}
 

class FileOperationApproval {  
async checkFileAccess(operation: FileOperation): Promise<boolean> {  
// 1. 路径安全检查  
if (!this.isPathSafe(operation.path)) {  
return false;  
}
 
// 2. 操作权限检查  
if (!this.hasPermission(operation.type)) {  
return false;  
}
 
// 3. 内容安全检查  
if (operation.type === 'write' && !this.isContentSafe(operation.content)) {  
return false;  
}
 
return true;  
}
 
private isPathSafe(path: string): boolean {  
// 检查路径是否在工作目录内  
// 防止目录遍历攻击  
const normalizedPath = normalizePath(path);  
return isWithinWorkspace(normalizedPath);  
}  
}
 

class CommandSecurity {  
private readonly restrictedCommands: Set<string> = new Set([  
'rm -rf',  
'format',  
'shutdown',  
// ... 其他危险命令  
]);
 
async validateCommand(command: string): Promise<boolean> {  
// 1. 检查是否是受限命令  
if (this.isRestrictedCommand(command)) {  
return false;  
}
 
// 2. 检查命令权限  
if (!await this.checkCommandPermissions(command)) {  
return false;  
}
 
// 3. 检查资源限制  
if (!this.checkResourceLimits(command)) {  
return false;  
}
 
return true;  
}
 
private isRestrictedCommand(command: string): boolean {  
return Array.from(this.restrictedCommands).some(  
restricted => command.includes(restricted)  
);  
}  
}
 

class CheckpointSystem {  
private checkpoints: Map<string, Checkpoint> = new Map();
 
// 创建检查点  
async createCheckpoint(): Promise<string> {  
const checkpoint = {  
id: generateId(),  
timestamp: Date.now(),  
state: await this.captureCurrentState(),  
files: await this.captureFileState()  
};
 
this.checkpoints.set(checkpoint.id, checkpoint);  
return checkpoint.id;  
}
 
// 恢复检查点  
async restoreCheckpoint(id: string): Promise<void> {  
const checkpoint = this.checkpoints.get(id);  
if (!checkpoint) {  
throw new Error('Checkpoint not found');  
}
 
await this.restoreState(checkpoint.state);  
await this.restoreFiles(checkpoint.files);  
}  
}