核心工作流程
Focus Chain 的核心工作流程包括任务创建、执行和跨上下文持久化。通过自动生成清单、实时进度跟踪和智能提醒，系统实现了任务的全生命周期管理，支持手动编辑和状态保持，提升用户专注度与效率。
Focus Chain 实现了一个完整的任务生命周期管理系统：
任务创建阶段
- 用户输入任务描述：用户通过界面或命令输入任务的详细描述。
- 自动生成清单：Cline 分析任务内容，自动生成待办清单。
- 清单存储：清单以 Markdown 格式存储为可编辑文件，方便后续修改。
任务执行阶段
- 实时进度跟踪：系统实时监控任务进展，更新完成状态。
- 任务头显示：在任务头部显示当前步骤及整体完成状态。
- 手动编辑支持：用户可随时手动编辑待办清单，调整任务内容。
跨上下文持久化
- 状态保持：在自动摘要过程中，确保清单状态的完整性。
- 智能提醒：通过智能提醒系统，帮助用户保持任务的连续性和专注度。
待办清单解析核心逻辑
核心解析函数：parseCurrentTodoInfo
parseCurrentTodoInfo 函数的设计旨在解析任务清单文本并提取关键信息。首先，它通过换行符将输入文本分割为多行，并逐行检查是否符合 Focus Chain 清单项的格式。对于符合条件的行，函数提取任务文本和完成状态，构建任务项数组。接着，函数计算清单的总任务数、已完成任务数，并定位第一个未完成任务的索引。最后，返回一个包含当前任务、进度统计和清单状态的对象。该函数通过结构化解析和状态计算，为任务进度跟踪和界面渲染提供了核心数据支持。
// 位置：webview-ui/src/components/chat/task-header/TaskHeader.tsx
const parseCurrentTodoInfo = (text: string) => {
if (!text) {
return null
}
const lines = text.split("\n")
const todoItems: { text: string; completed: boolean; index: number }[] = []
// 逐行解析，识别 Focus Chain 项目
lines.forEach((line, index) => {
const trimmedLine = line.trim()
if (isFocusChainItem(trimmedLine)) {
const completed = isCompletedFocusChainItem(trimmedLine)
// 移除 Markdown 清单标记 "- [ ] " 或 "- [x] "
const text = trimmedLine.substring(5).trim()
todoItems.push({ text, completed, index })
}
})
if (todoItems.length === 0) {
return null
}
// 查找当前正在执行的任务项（第一个未完成的项目）
const currentTodoIndex = todoItems.findIndex((item) => !item.completed)
const currentTodo = currentTodoIndex >= 0 ? todoItems[currentTodoIndex] : null
const completedCount = todoItems.filter((item) => item.completed).length
const totalCount = todoItems.length
return {
currentTodo,
currentIndex: currentTodoIndex >= 0 ? currentTodoIndex + 1 : totalCount, // 1-based index
completedCount,
totalCount,
hasItems: totalCount > 0,
}
}
清单渲染器实现
清单渲染器（ChecklistRenderer）是 Focus Chain 的核心组件之一，用于解析和渲染任务清单。它通过 parseChecklistItems 函数解析输入文本，将每一行转换为任务项，并根据完成状态进行标记。组件支持用户滚动检测，避免在浏览时发生跳跃式滚动，同时提供自动滚动功能，确保用户始终聚焦于最新完成的任务。
渲染器通过 React 的 useEffect 钩子实现动态更新，监听任务清单的变化并自动滚动到最后一个完成的项目。任务项以直观的方式呈现，包括完成状态指示器和任务文本，确保用户能够快速理解任务进度。组件的设计兼顾了性能和用户体验，适用于多任务管理场景。此外，清单渲染器与 Focus Chain 的其他模块无缝集成，例如任务解析和状态计算逻辑，为整个系统的任务跟踪功能提供了强大的支持。
源码太长,全是前端的内容,省略一下.
设置和配置管理
协议定义和数据结构
// 位置: proto/cline/state.proto
message FocusChainSettings {
bool enabled = 1; // 是否启用 Focus Chain
int32 remind_cline_interval = 2; // 提醒间隔（消息数量）
}
// 在主状态消息中的集成
message State {
// ... 其他字段
optional FocusChainSettings focus_chain_settings = 17;
// ... 其他字段
}
文件编辑集成
Focus Chain 文件编辑功能
// 编辑按钮实现 - 位置：TaskHeader.tsx
{parseCurrentTodoInfo(lastProgressMessageText)?.hasItems &&
(() => {
// 用于调整 focus chain 编辑按钮位置
const lines = lastProgressMessageText.split("\n").filter((line) => line.trim())
const items = lines.filter((line) => {
const trimmedLine = line.trim()
return trimmedLine.match(FOCUS_CHAIN_ITEM_REGEX)
})
const hasScrollbar = items.length >= 10
return (
<VSCodeButton
appearance="icon"
onClick={async () => {
try {
// 调用文件服务打开 Focus Chain 文件
await FileServiceClient.openFocusChainFile(
StringRequest.create({ value: currentTaskItem?.id || "" })
)
} catch (error) {
console.error("Error opening todo file:", error)
}
}}
style={{
省略^,
}}
title="Edit focus chain list in markdown file">
<span
className="codicon codicon-edit"
style={{
fontSize: "14px",
color: "var(--vscode-badge-foreground)",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}></span>
</VSCodeButton>
)
})()}
自动清单生成算法
Focus Chain 的设计围绕任务生命周期管理展开，核心在于自动化、实时性和智能化。系统通过解析用户输入生成任务清单，并以 Markdown 格式存储，便于编辑和持久化。任务执行阶段，实时进度跟踪和动态渲染确保用户专注于当前任务，同时支持手动调整。解析逻辑通过正则表达式识别清单项，提取状态和文本，结合进度计算函数，提供任务统计和状态更新。
智能提醒系统基于用户配置的消息间隔触发，帮助用户保持专注。清单渲染器通过 React 动态更新，优化用户体验。协议定义和数据结构确保模块间无缝集成。整体设计兼顾性能和可扩展性，为复杂任务管理场景提供了高效解决方案。
const FOCUS_CHAIN_ITEM_REGEX = /^-\s*\[([ x])\]\s+(.+)$/
function isFocusChainItem(line: string): boolean {
return FOCUS_CHAIN_ITEM_REGEX.test(line.trim())
}
function isCompletedFocusChainItem(line: string): boolean {
const match = line.trim().match(FOCUS_CHAIN_ITEM_REGEX)
return match ? match[1] === 'x' : false
}
function parseFocusChainItem(line: string): { checked: boolean; text: string } | null {
const match = line.trim().match(FOCUS_CHAIN_ITEM_REGEX)
if (match) {
return {
checked: match[1] === 'x',
text: match[2].trim()
}
}
return null
}
结论
Focus Chain 提供了完整的任务生命周期管理和智能进度跟踪能力。其自动清单、实时进度、智能提醒等特性，为 AI 编程助手和其他复杂交互应用提供了可借鉴的设计范式。