核心工作流程

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 编程助手和其他复杂交互应用提供了可借鉴的设计范式。

FunTester 原创精华

↙↙↙阅读原文可查看相关链接，并与作者交流