要在网页中实时显示codex后台任务进度，需启用结构化状态上报、校验progress参数范围、暴露/progress接口，前端通过轮询或eventsource获取数据，绑定进度条并按status做差异化渲染。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在网页中实时显示Codex后台任务的处理进度，必须绕过其默认的终端TUI输出机制，将status、progress字段从任务运行时状态中提取并推送到前端界面。直接读取命令行输出不可靠，因为交互模式下消息区内容不持久，且alternate_screen会清空历史。
获取实时progress数据源
第一步：确认任务已启用结构化状态上报。Codex执行工作流任务时，只有调用Tauri工具类的update_task接口并传入progress参数，才会在后台数据库（AITask模型）中持续更新progress字段。若使用/codex:rescue或纯exec命令，progress不会自动写回。
第二步：在server_backend/modules/Tauri/utils.py中检查update_task函数是否包含progress参数校验逻辑。缺失该逻辑会导致前端始终读到null或旧值——【必须确保progress是float类型且范围在0.0～1.0之间】。
第三步：后端暴露GET /api/tauri/task/{task_id}/progress接口，返回JSON格式{"progress": 0.65, "status": "running", "updated_at": "2026-10-14T22:18:03Z"}。该接口需校验user_uuid权限，禁止跨用户访问。
前端轮询进度接口
方法一：使用setInterval + fetch（适用于轻量级页面）
在Vue组件mounted钩子中启动轮询：const timer = setInterval(() => { fetch(`/api/tauri/task/${taskId}/progress`).then(r => r.json()).then(data => { this.progress = data.progress; this.status = data.status; }); }, 2000);
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
注意：必须在beforeUnmount中clearInterval(timer)，否则页面卸载后仍持续请求。
方法二：使用EventSource建立服务端事件流（推荐用于多任务面板）
后端需改写progress接口为text/event-stream响应，每次progress变更即推送data: {"progress":0.72}；前端用new EventSource()监听，无需手动管理间隔与错误重连。
在页面中渲染进度条
第一步：引入原生HTML progress元素或使用UI库组件，绑定progress值。例如：<progress value="0.42" max="1"></progress>。
第二步：当progress === 1.0且status === "completed"时，触发完成动画并停止轮询。此时务必调用delete_task接口清理记录——【不主动删除会导致数据库堆积无效任务】。
第三步：对status为"waiting_approval"的任务，隐藏进度条，改用脉冲式图标+文字提示：“请前往Codex窗口批准操作”。这一步不能依赖progress值判断，必须单独读取status字段。
