很多 AI 产品一开始都是聊天框。
这个形态适合短任务，比如：
解释概念。 改一句文案。 写一段代码。 总结一小段资料。
但 Agentic AI 之后，越来越多任务不是几秒钟完成，而是长任务。
比如：
分析一个代码仓库。 生成一套测试。 整理一批客户反馈。 写一份长报告。 对比多个竞品。 处理一次数据清洗。 并行生成多个页面方案。
OpenAI Codex 官方介绍中提到，它面向多代理工作流，带有 worktrees 和云端环境，Agents 可以并行跨项目工作。
这说明 AI 产品正在从“即时回答”变成“异步执行”。
而异步执行带来一个前端问题：用户不能只看到一个转圈 loading。
如果一个 AI 任务要跑 3 分钟、10 分钟甚至更久，前端必须告诉用户：
现在做到哪一步？ 是否卡住了？ 能不能取消？ 能不能查看中间结果？ 失败后能不能重试？ 是否需要用户补充信息？ 哪些步骤已经完成？
这就是 AI 长任务状态设计。
一个简单的任务状态可以这样定义：
type AITaskStatus =
| "queued"
| "planning"
| "running"
| "waiting_for_user"
| "review_required"
| "completed"
| "failed"
| "cancelled";
再定义任务对象：
type AITask = {
id: string;
title: string;
status: AITaskStatus;
progress?: number;
currentStep?: string;
steps: AITaskStep[];
createdAt: string;
updatedAt: string;
result?: unknown;
error?: {
code: string;
message: string;
retryable: boolean;
};
};
type AITaskStep = {
id: string;
name: string;
status: "pending" | "running" | "completed" | "failed" | "skipped";
startedAt?: string;
finishedAt?: string;
summary?: string;
};
为什么要拆 step？
因为 AI 长任务最怕黑箱。
用户提交一个任务：“帮我分析这个项目并生成优化建议。”
如果界面只是显示：
“AI 正在处理中……”
用户会焦虑。
更好的状态是：
正在读取项目结构。 正在识别核心模块。 正在分析依赖。 正在检查潜在风险。 正在生成优化建议。 等待用户确认是否生成修改计划。
这会让用户知道系统不是卡住了，而是在推进。
前端可以做一个 Task Timeline。
function TaskTimeline({ task }: { task: AITask }) {
return (
<div>
{task.steps.map(step => (
<div key={step.id}>
<span>{step.status}</span>
<strong>{step.name}</strong>
{step.summary && <p>{step.summary}</p>}
</div>
))}
</div>
);
}
还要设计 Action 区域。
不同状态下，用户能做的事不一样。
function getAvailableActions(status: AITaskStatus) {
switch (status) {
case "queued":
case "planning":
case "running":
return ["cancel"];
case "waiting_for_user":
return ["provide_input", "cancel"];
case "review_required":
return ["approve", "reject", "edit"];
case "failed":
return ["retry", "view_logs"];
case "completed":
return ["view_result", "export"];
default:
return [];
}
}
AI 长任务还有一个关键点：中间结果。
很多任务不一定要等全部完成才展示。
比如分析客户反馈时，可以先展示已识别的高频问题。 分析代码仓库时，可以先展示项目结构。 生成报告时，可以先展示大纲。 生成页面时，可以先展示草图。 跑测试时，可以先展示失败用例。
前端可以支持 partial result：
type PartialResult = {
stepId: string;
type: "outline" | "summary" | "table" | "diff" | "chart";
data: unknown;
isFinal: boolean;
};
这样用户可以边看边判断，必要时提前打断。
AI 长任务还必须支持人工介入。
比如系统发现：
权限不够。 资料缺失。 参数不明确。 风险过高。 输出需要审核。
这时任务状态应该变成 waiting_for_user 或 review_required，而不是继续硬跑。
对产品体验来说，这比“全自动”更可靠。
Google I/O 2026 之后，Gemini 3.5 Flash 被报道为更强调 agentic behavior 和 coding tasks 的模型；这类趋势会让更多 AI 产品从“问答界面”变成“任务执行界面”。
如果前端团队要比较不同模型在长任务拆解、步骤生成、中间结果表达上的能力，可以通过 gpt1998.com 测试 ChatGPT、Claude、Gemini、Grok 的差异。但无论模型如何，前端必须把长任务状态设计成用户能理解的流程。
未来 AI 产品的体验，不只是回答质量。
还包括：
任务是否透明。 状态是否清楚。 失败是否可恢复。 中间结果是否可看。 用户是否能介入。 结果是否能导出。
聊天框适合短任务。 时间线、状态机和任务面板，才适合长任务。
Agent 越强，前端越要把“正在发生什么”讲清楚。
