From 92fd0ce129337b7cbd83b3da176d72f9c0094375 Mon Sep 17 00:00:00 2001 From: HouYunFei <1844025705@qq.com> Date: Wed, 29 Jul 2026 10:28:24 +0800 Subject: [PATCH] feat(logging): update logging format to plain text and enhance HTTP diagnostics --- CHANGELOG.md | 5 +- canvas-agent/src/agents.ts | 34 +++-- canvas-agent/src/http-server.ts | 8 +- canvas-agent/src/utils/logger.ts | 7 +- docs/content/docs/progress/pending-test.mdx | 4 +- .../canvas/canvas-agent-chat-ui.tsx | 14 +- .../canvas/canvas-local-agent-panel.tsx | 141 ++++++++++-------- web/src/stores/use-agent-store.ts | 3 + 8 files changed, 123 insertions(+), 93 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b892be3..d057b9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,10 @@ ## Unreleased -+ [新增] Canvas Agent 支持通过 `--debug` 输出彩色详细日志并按日期保存到本地日志文件。 ++ [新增] Canvas Agent 支持通过 `--debug` 输出详细日志并按日期保存到本地日志文件。 ++ [优化] Canvas Agent Debug 日志改为简洁的纯文本单行格式。 ++ [优化] 精简网页与本地 Agent 的 HTTP 诊断日志，过滤轮询和流式重复事件并改用任务摘要展示。 ++ [优化] Agent 对话采用透明无气泡的简洁用户消息样式，输入框上方居中实时展示带平滑数字动画的最新一次模型调用 Token 用量。 + [修复] 修复 Agent 发送后的运行提示闪退及回复需要切换标签页才显示的问题。 + [优化] Agent 历史记录支持多选批量删除，点击记录可直接进入对话。 + [优化] Canvas Agent 改为从独立指令文件初始化当前工作目录的 AGENTS.md，不再为每轮消息重复拼接前置提示词。 diff --git a/canvas-agent/src/agents.ts b/canvas-agent/src/agents.ts index 4764ef7..ee3380d 100644 --- a/canvas-agent/src/agents.ts +++ b/canvas-agent/src/agents.ts @@ -40,7 +40,6 @@ export function interruptCodexTurn(threadId?: string) { async function runCodexTurnNow(prompt: string, emit: AgentEmit, attachments: AgentAttachment[], options: CodexRunOptions) { let files: string[] = []; try { - logger.info("Preparing Codex turn", { threadId: options.threadId, cwd: options.cwd, prompt, attachmentCount: attachments.length }); options.onStart?.(); files = await writeAttachmentFiles(attachments); const app = await getCodexApp(options.appEmit || emit); @@ -147,7 +146,6 @@ class CodexAppClient { private nextId = 1; private buffer = ""; private textByItem = new Map(); - private deltaCount = 0; private lastUsage: unknown = null; private pending = new Map(); private activeTurns = new Map(); @@ -245,7 +243,9 @@ class CodexAppClient { } private write(value: unknown) { - logger.debug("Codex app-server request", value); + const method = String(field(value, "method") || ""); + const params = field(value, "params"); + if (method) logger.debug(`Codex ${method}`, { id: field(value, "id"), threadId: field(params, "threadId") }); this.child.stdin?.write(`${JSON.stringify(value)}\n`); } @@ -264,9 +264,12 @@ class CodexAppClient { } private handle(message: Json) { - logger.debug("Codex app-server response", message); const id = Number(message.id); - if (message.error && this.pending.has(id)) return this.reject(id, String(field(message.error, "message") || "Codex request failed")); + if (message.error && this.pending.has(id)) { + const error = String(field(message.error, "message") || "Codex request failed"); + logger.warn("Codex request failed", { id, error }); + return this.reject(id, error); + } if (this.pending.has(id)) return this.resolve(id, message.result); if (typeof message.method === "string" && "id" in message) return this.answerServerRequest(message); if (typeof message.method === "string") this.handleNotification(message.method, (message.params || {}) as Json); @@ -274,7 +277,11 @@ class CodexAppClient { private handleNotification(method: string, params: Json) { if (method === "item/agentMessage/delta") return this.emitDelta(params); - if (method === "thread/tokenUsage/updated") this.lastUsage = normalizeUsage(params); + if (method === "thread/tokenUsage/updated") { + this.lastUsage = normalizeUsage(params); + this.emit("agent_event", { agent: "codex", type: "usage.updated", usage: this.lastUsage, ...codexEventScope(params) }); + return; + } const event = normalizeCodexNotification(method, params); if (!event) return; if (event.type === "item.completed") { @@ -296,8 +303,6 @@ class CodexAppClient { } else if (turnId) { this.completedTurns.set(turnId, error ? new Error(String(field(error, "message") || "Codex turn failed")) : null); } - this.emit("agent_event", { agent: "codex", type: "stream.summary", delta_count: this.deltaCount, ...codexEventScope(params) }); - this.deltaCount = 0; this.emit("agent_done", { agent: "codex", usage: event.usage, ...codexEventScope(params) }); } } @@ -305,7 +310,6 @@ class CodexAppClient { private emitDelta(params: Json) { const id = String(field(params, "itemId") || ""); const text = `${this.textByItem.get(id) || ""}${String(field(params, "delta") || "")}`; - this.deltaCount += 1; this.textByItem.set(id, text); this.emit("agent_event", { agent: "codex", type: "item.updated", item: { id, type: "agent_message", text }, ...codexEventScope(params) }); } @@ -353,7 +357,7 @@ function normalizeCodexNotification(method: string, params: Json): AgentEvent | const scope = codexEventScope(params); if (method === "thread/started") return { type: "thread.started", ...scope }; if (method === "turn/started") return { type: "turn.started", ...scope }; - if (method === "turn/completed") return { type: "turn.completed", usage: null, ...scope }; + if (method === "turn/completed") return { type: "turn.completed", usage: null, duration_ms: field(field(params, "turn"), "durationMs"), ...scope }; if (method === "item/started") return { type: "item.started", item: normalizeItem(field(params, "item")), ...scope }; if (method === "item/completed") return { type: "item.completed", item: normalizeItem(field(params, "item")), ...scope }; if (method === "error") return { type: "error", message: field(params, "message"), ...scope }; @@ -405,12 +409,12 @@ function normalizeItem(item: unknown) { } function normalizeUsage(params: Json) { - const total = field(field(params, "tokenUsage"), "total") as Json | undefined; + const last = field(field(params, "tokenUsage"), "last") as Json | undefined; return { - input_tokens: field(total, "inputTokens"), - cached_input_tokens: field(total, "cachedInputTokens"), - output_tokens: field(total, "outputTokens"), - reasoning_output_tokens: field(total, "reasoningOutputTokens"), + input_tokens: field(last, "inputTokens"), + cached_input_tokens: field(last, "cachedInputTokens"), + output_tokens: field(last, "outputTokens"), + reasoning_output_tokens: field(last, "reasoningOutputTokens"), }; } diff --git a/canvas-agent/src/http-server.ts b/canvas-agent/src/http-server.ts index ea7bd48..12e573a 100644 --- a/canvas-agent/src/http-server.ts +++ b/canvas-agent/src/http-server.ts @@ -16,7 +16,6 @@ export function startHttpServer() { const emit = (type: string, payload: unknown) => { const data = payload && typeof payload === "object" && !Array.isArray(payload) ? payload as Record : { value: payload }; const threadId = String(data.threadId || data.thread_id || ensureSiteWorkspace(config).activeThreadId || ""); - logger.debug("Agent event", { type, threadId, payload: data }); threadId ? session.emitThread(type, threadId, data) : session.emitAll(type, data); }; const setActiveThread = (activeThreadId: string, payload: Record = {}) => { @@ -31,7 +30,10 @@ export function startHttpServer() { if (!logger.enabled) return next(); const startedAt = Date.now(); const url = requestUrl(req, config); - res.on("finish", () => logger.debug("HTTP request", { method: req.method, path: url.pathname, status: res.statusCode, durationMs: Date.now() - startedAt, origin: req.headers.origin, clientId: url.searchParams.get("clientId") })); + res.on("finish", () => { + if (req.method === "OPTIONS" || (res.statusCode < 400 && ["/health", "/canvas/state", "/canvas/activate"].includes(url.pathname))) return; + logger.debug(`HTTP ${req.method} ${url.pathname}`, { status: res.statusCode, durationMs: Date.now() - startedAt }); + }); next(); }); app.use((req, res, next) => { @@ -117,7 +119,7 @@ export function startHttpServer() { const prompt = String(req.body?.prompt || ""); if (!prompt.trim()) return res.status(400).json({ ok: false, error: "请输入任务内容" }); const clientId = String(req.body?.clientId || ""); - logger.info("Codex turn accepted", { clientId, threadId: req.body?.threadId, prompt, attachments: attachments.map(({ id, name, type, size, width, height }) => ({ id, name, type, size, width, height })) }); + logger.info("Codex turn accepted", { threadId: req.body?.threadId, promptLength: prompt.length, attachmentCount: attachments.length }); session.setCodexState({ busy: true, threadId: String(req.body?.threadId || workspace.activeThreadId || ""), turnId: "" }); try { let threadId = String(req.body?.threadId || workspace.activeThreadId || ""); diff --git a/canvas-agent/src/utils/logger.ts b/canvas-agent/src/utils/logger.ts index 398f1ad..8ae9918 100644 --- a/canvas-agent/src/utils/logger.ts +++ b/canvas-agent/src/utils/logger.ts @@ -20,11 +20,11 @@ export class Logger { return; } fs.mkdirSync(path.dirname(this.filePath), {recursive: true}); - const line = format.printf(({level, message, timestamp, details}) => `[${level.toUpperCase()}][${timestamp}] ${message}${formatDetails(details)}`); + const line = format.printf(({level, message, timestamp, details}) => `${timestamp} ${level.toUpperCase()} ${message}${formatDetails(details)}`); this.logger = winston.createLogger({ level: "debug", transports: [ - new transports.Console({format: format.combine(format.colorize(), format.timestamp({format: "HH:mm:ss"}), line)}), + new transports.Console({format: format.combine(format.timestamp({format: "HH:mm:ss"}), line)}), new transports.File({filename: this.filePath, format: format.combine(format.timestamp({format: "HH:mm:ss"}), line)}), ], }); @@ -59,7 +59,8 @@ export class Logger { function formatDetails(details: unknown) { if (details === undefined) return ""; if (!details || typeof details !== "object" || Array.isArray(details)) return ` ${inspect(details, {depth: null, breakLength: Infinity})}`; - return ` ${Object.entries(details).map(([key, value]) => `${key}=${inspect(value, {depth: null, breakLength: Infinity})}`).join(" ")}`; + const text = Object.entries(details).filter(([, value]) => value !== undefined).map(([key, value]) => `${key}=${inspect(value, {depth: null, breakLength: Infinity})}`).join(" "); + return text ? ` ${text}` : ""; } /** 清理日志内容中的敏感数据和不可序列化引用。 */ diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx index 7ffc73d..d7004f9 100644 --- a/docs/content/docs/progress/pending-test.mdx +++ b/docs/content/docs/progress/pending-test.mdx @@ -5,7 +5,9 @@ description: 当前版本已实现但仍需人工验证的变更项 # 待测试 -- Canvas Agent Debug：使用 `npx -y @basketikun/canvas-agent --debug` 启动后，终端应以 `[DEBUG][HH:mm:ss]` 等传统格式输出带级别颜色的详细日志并显示日志文件路径，`~/.infinite-canvas/logs/` 下应按启动日期生成不含颜色代码的 `canvas-agent-YYYY-MM-DD.log`，同一天多次启动应追加到同一文件；普通启动保持原有简洁输出，日志中不应出现连接 token 或图片 Data URL 原文。 +- Canvas Agent Debug：使用 `npx -y @basketikun/canvas-agent --debug` 启动后，终端应按“时间 级别 消息 详情”的纯文本单行格式输出日志并显示日志文件路径，`~/.infinite-canvas/logs/` 下应按启动日期生成相同格式的 `canvas-agent-YYYY-MM-DD.log`，同一天多次启动应追加到同一文件；普通启动保持原有简洁输出，日志中不应出现连接 token 或图片 Data URL 原文。 +- Agent HTTP 诊断日志：网页发送一条普通消息后，本地 Debug 日志不应重复输出 `/health`、`/canvas/state`、`/canvas/activate` 成功请求、流式增量或完整会话响应，只保留 HTTP 请求与 Codex 生命周期摘要；右侧「日志」应以单行时间线展示发送、开始、回复、工具、完成用量和错误，不再输出 userMessage started/completed、流式摘要、重复 threadId 或大段原始 JSON。 +- Agent 对话统计：用户消息应右对齐并使用透明无边框、无气泡背景的简洁样式，用户消息和 Codex 回复下方均不显示时间或 Token 信息；输入框上方应居中展示最新一次模型调用的输入、缓存、输出 Token 用量，不显示会话累计值，数值更新时应从旧值平滑滚动到新值而非突然跳变，新建、切换或删除当前会话后应清空旧统计。 - Agent 回复实时显示：在右侧 Agent 发送消息后，用户消息下方应立即出现 GPT 图标和 `working...`，任务运行期间不应闪退；Codex 的回复应在当前对话中持续显示，实时事件缺失时也应在任务完成后自动同步完整内容，无需切换到历史或日志再返回对话。 - Agent 历史记录：点击记录卡片应直接进入对应对话，不再显示「进入」按钮；可勾选单条或全选多条记录并批量删除，删除当前对话后聊天内容应清空。 - Agent 工作目录指令：`canvas-agent/agent-instructions.md` 应作为独立维护源；重启 Canvas Agent 后，当前工作目录应自动生成 `AGENTS.md`；新建对话发送消息时，Codex 日志中的用户消息只包含本轮请求和必要的附件上下文，不再重复整段 Infinite Canvas 前置提示词，画布及工作台工具仍可正常调用。 diff --git a/web/src/components/canvas/canvas-agent-chat-ui.tsx b/web/src/components/canvas/canvas-agent-chat-ui.tsx index 0f3dbf9..1a8bd3c 100644 --- a/web/src/components/canvas/canvas-agent-chat-ui.tsx +++ b/web/src/components/canvas/canvas-agent-chat-ui.tsx @@ -49,16 +49,8 @@ export function AgentChatMessage({ item, theme, user, onRejectTool, onApproveToo
{!isUser ? : null}
{isUser ? (
{item.text}
@@ -66,7 +58,7 @@ export function AgentChatMessage({ item, theme, user, onRejectTool, onApproveToo {item.text} )} {item.attachments?.length ? : null} - {item.meta ?
{item.meta}
: null} + {item.meta ?
{item.meta}
: null}
{isUser ? : null}
diff --git a/web/src/components/canvas/canvas-local-agent-panel.tsx b/web/src/components/canvas/canvas-local-agent-panel.tsx index f08c3dc..7a707cd 100644 --- a/web/src/components/canvas/canvas-local-agent-panel.tsx +++ b/web/src/components/canvas/canvas-local-agent-panel.tsx @@ -3,6 +3,7 @@ import { useNavigate, useSearchParams } from "react-router-dom"; import { App, Button, Checkbox, Input, Segmented, Tooltip } from "antd"; import copyToClipboard from "copy-to-clipboard"; import { ChevronDown, Copy, FolderOpen, History, KeyRound, Link2, LoaderCircle, MessageSquare, PlugZap, Plus, RefreshCw, Square, Terminal, Trash2 } from "lucide-react"; +import { motion, useSpring, useTransform } from "motion/react"; import { canvasThemes } from "@/lib/canvas-theme"; import { imageMetadata } from "@/lib/canvas/canvas-node-factory"; @@ -13,7 +14,7 @@ import { uploadImage } from "@/services/image-storage"; import { useThemeStore } from "@/stores/use-theme-store"; import { useUserStore } from "@/stores/use-user-store"; import { useShallow } from "zustand/react/shallow"; -import { useAgentStore, type AgentAttachment, type AgentCanvasContext, type AgentChatItem, type AgentEventLog, type AgentPanelTab, type AgentPendingToolCall, type AgentThreadSummary } from "@/stores/use-agent-store"; +import { useAgentStore, type AgentAttachment, type AgentCanvasContext, type AgentChatItem, type AgentEventLog, type AgentPanelTab, type AgentPendingToolCall, type AgentThreadSummary, type AgentTokenUsage } from "@/stores/use-agent-store"; import { summarizeCanvasAgentOps, type CanvasAgentOp, type CanvasAgentSnapshot } from "@/lib/canvas/canvas-agent-ops"; import { isSiteTool, runSiteTool, SITE_TOOL_LABELS } from "@/lib/agent/agent-site-tools"; import { AgentChatComposer, AgentChatMessage, AgentPanelTabs, AgentPendingToolCard, AgentWorkingMessage, type CanvasAgentChatAttachment } from "./canvas-agent-chat-ui"; @@ -39,6 +40,7 @@ type AgentEventPayload = { error?: { message?: string }; message?: string; usage?: Record; + duration_ms?: number; }; type AgentEventItem = { id?: string; type?: string; text?: unknown; message?: unknown; server?: string; tool?: string; status?: string; arguments?: unknown; result?: unknown; error?: { message?: string } }; @@ -63,7 +65,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb // 注意：canvasContext 不在此订阅内 —— 它在拖拽/resize 时会被 project 每帧写入， // 但面板只在 ref 同步与防抖 postState 中用到它、渲染层从不读它。若把它放进订阅， // 面板会随画布每帧重渲染（性能问题，也是 #185 崩溃的放大器）。改为下方 subscribe 命令式监听。 - const { width, url, token, connected, enabled, prompt, attachments, sending, waiting, messages, eventLogs, threads, activeThreadId, workspacePath, loadingThreads, activeTab, confirmTools, activity, connectError, pendingTool } = useAgentStore( + const { width, url, token, connected, enabled, prompt, attachments, sending, waiting, messages, tokenUsage, eventLogs, threads, activeThreadId, workspacePath, loadingThreads, activeTab, confirmTools, activity, connectError, pendingTool } = useAgentStore( useShallow((state) => ({ width: state.width, url: state.url, @@ -75,6 +77,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb sending: state.sending, waiting: state.waiting, messages: state.messages, + tokenUsage: state.tokenUsage, eventLogs: state.eventLogs, threads: state.threads, activeThreadId: state.activeThreadId, @@ -233,7 +236,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb enqueueEvent(async () => { const nextThreadId = data.activeThreadId ?? data.threadId ?? ""; pendingToolRef.current = null; - setAgentState({ activeThreadId: nextThreadId, messages: [], pendingTool: null }); + setAgentState({ activeThreadId: nextThreadId, messages: [], tokenUsage: null, pendingTool: null }); await loadThreads(data.emptyThread); }); }); @@ -263,7 +266,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb const silent = useAgentStore.getState().silentConnect && !wasConnected; const text = wasConnected ? "本地 Agent 连接失败或已断开" : "连接失败，请检查地址和 token"; if (!errorLoggedRef.current || wasConnected) { - addEventLog(wasConnected ? "连接断开" : "连接失败", { endpoint, error: text }); + addEventLog(wasConnected ? "连接断开" : "连接失败", text); if (!headless && !silent) message.error(text); } errorLoggedRef.current = true; @@ -310,7 +313,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb setAgentState({ activity: "发送中", sending: true }); const messageId = createId(); addMessage({ id: messageId, role: "user", text: text || "发送了图片", attachments: files }); - addEventLog("用户发送", { text, attachments: files.map(({ name, type, size }) => ({ name, type, size })) }); + addEventLog("发送任务", `${compactText(text) || "仅附件"}${files.length ? ` · 附件 ${files.length}` : ""}`); try { const data = await fetchAgentJson<{ threadId?: string }>(endpoint, token, "/agent/codex/turn", { method: "POST", @@ -325,7 +328,6 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb }), }); if (data.threadId) setAgentState({ activeThreadId: data.threadId }); - addEventLog("本地 Agent 已接收", { threadId: data.threadId }); files.forEach((item) => { URL.revokeObjectURL(item.url); attachmentUrlsRef.current.delete(item.url); @@ -349,7 +351,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb setAgentState({ activity: "停止中" }); try { await fetch(`${endpoint}/agent/codex/interrupt?token=${encodeURIComponent(token)}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ threadId: useAgentStore.getState().activeThreadId || undefined }) }); - addEventLog("用户停止", {}); + addEventLog("停止任务", "已发送停止请求"); } catch { setAgentState({ activity: "停止失败" }); } @@ -534,6 +536,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb turnSyncSequenceRef.current += 1; setAgentState({ messages: [], + tokenUsage: null, threads: [], activeThreadId: "", workspacePath: "", @@ -551,7 +554,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb setAgentState({ loadingThreads: true }); try { const data = await fetchAgentJson(endpoint, token, "/agent/codex/threads/new", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) }); - setAgentState({ activeThreadId: data.thread?.id || data.workspace?.activeThreadId || "", messages: [], activeTab: "chat", activity: "新对话" }); + setAgentState({ activeThreadId: data.thread?.id || data.workspace?.activeThreadId || "", messages: [], tokenUsage: null, activeTab: "chat", activity: "新对话" }); } catch (error) { addEventLog("新建对话失败", error); message.error(error instanceof Error ? error.message : "新建对话失败"); @@ -565,7 +568,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb setAgentState({ loadingThreads: true }); try { const data = await fetchAgentJson(endpoint, token, `/agent/codex/threads/${encodeURIComponent(threadId)}/resume`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) }); - setAgentState({ activeThreadId: data.thread?.id || threadId, messages: normalizeHistoryMessages(data.messages || []), activeTab: "chat", activity: "已恢复会话" }); + setAgentState({ activeThreadId: data.thread?.id || threadId, messages: normalizeHistoryMessages(data.messages || []), tokenUsage: null, activeTab: "chat", activity: "已恢复会话" }); } catch (error) { addEventLog("恢复对话失败", error); message.error(error instanceof Error ? error.message : "恢复对话失败"); @@ -585,6 +588,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb threads: current.threads.filter((thread) => !deleted.has(thread.id)), activeThreadId: deleted.has(current.activeThreadId) ? "" : current.activeThreadId, messages: deleted.has(current.activeThreadId) ? [] : current.messages, + tokenUsage: deleted.has(current.activeThreadId) ? null : current.tokenUsage, }); message.success(`已删除 ${threadIds.length} 条记录`); } catch (error) { @@ -630,18 +634,23 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb }; const addEventLog = (title: string, text: unknown, raw?: unknown) => { - pushEventLog({ id: `${Date.now()}-${Math.random()}`, time: new Date().toLocaleTimeString(), title, text: normalizeText(text) || title, raw }); + const value = normalizeText(text) || title; + const last = useAgentStore.getState().eventLogs.at(-1); + if (last?.title === title && last.text === value) return; + pushEventLog({ id: `${Date.now()}-${Math.random()}`, time: new Date().toLocaleTimeString(), title, text: value, raw }); }; const handleAgentEvent = (event: AgentEventPayload) => { - if (shouldLogAgentEvent(event)) addEventLog(eventTitle(event), event, event); + if (event.type === "usage.updated") setAgentState({ tokenUsage: eventUsage(event) }); + const log = formatAgentEventLog(event); + if (log) addEventLog(log.title, log.text); if (event.type === "thread.started" && event.thread_id) setAgentState({ activeThreadId: event.thread_id }); if (event.type === "item.completed" && event.item?.type === "agent_message" && event.item.id) { const currentMessages = useAgentStore.getState().messages; const index = currentMessages.findIndex((message) => message.streamId === event.item?.id); if (index >= 0) { const text = stringText(event.item.text); - setAgentState({ messages: currentMessages.map((message, i) => (i === index ? { ...message, text: text || message.text, meta: usageText(event) || message.meta, streamId: undefined } : message)) }); + setAgentState({ messages: currentMessages.map((message, i) => (i === index ? { ...message, text: text || message.text, streamId: undefined } : message)) }); return; } } @@ -743,6 +752,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb ) : null} + {tokenUsage ? : null} + 最新调用 + + + + + ); +} + +function UsageNumber({ label, value, color }: { label: string; value: number; color: string }) { + const spring = useSpring(value, { stiffness: 110, damping: 24, mass: 0.7 }); + const text = useTransform(spring, (current) => Math.round(current).toLocaleString()); + useEffect(() => spring.set(value), [spring, value]); + return ( + + {label} + + {text} + + + ); +} + function AgentLogView({ logs, theme, @@ -1125,7 +1160,7 @@ async function postToolResult(endpoint: string, token: string, clientId: string, } function agentMessageToChatMessage(item: AgentChatItem) { - return { ...item, attachments: item.attachments?.map(agentAttachmentToChatAttachment) }; + return { ...item, meta: item.role === "user" || item.role === "assistant" ? undefined : item.meta, attachments: item.attachments?.map(agentAttachmentToChatAttachment) }; } function agentAttachmentToChatAttachment(item: AgentAttachment): CanvasAgentChatAttachment { @@ -1135,10 +1170,8 @@ function agentAttachmentToChatAttachment(item: AgentAttachment): CanvasAgentChat function formatAgentEvent(event: AgentEventPayload): Omit | null { const item = event.item; if (event.type === "item.completed" && item?.type === "error") return { role: "error", title: "错误", text: normalizeText(item.message), detail: item }; - if ((event.type === "item.updated" || event.type === "item.completed") && item?.type === "agent_message") return { role: "assistant", title: "Codex", text: stringText(item.text), meta: usageText(event), streamId: event.type === "item.updated" ? item.id : undefined }; + if ((event.type === "item.updated" || event.type === "item.completed") && item?.type === "agent_message") return { role: "assistant", title: "Codex", text: stringText(item.text), streamId: event.type === "item.updated" ? item.id : undefined }; if (event.type === "item.completed" && isMcpToolItem(item) && isReadTool(String(item?.tool || ""))) return { role: "tool", title: `${toolName(String(item?.tool || ""))}完成`, text: item?.error?.message || toolSummary(item), detail: toolDetail(item) }; - const text = eventText(event); - if (text) return { role: "assistant", title: "Codex", text, meta: usageText(event) }; return null; } @@ -1157,22 +1190,12 @@ function isCurrentThreadEvent(event: { threadId?: string; thread_id?: string }) function formatLogText(logs: AgentEventLog[], context: AgentLogContext) { const head = [ - "Infinite Canvas Agent 诊断日志", - `Canvas Agent: ${context.endpoint}`, - `连接: ${context.connected ? "在线" : context.enabled ? "连接中" : "未启用"}`, - `状态: ${context.activity}`, - `waiting: ${context.waiting}`, - `sending: ${context.sending}`, - `messages: ${context.messages}`, - `pendingTool: ${context.pendingTool ? toolName(context.pendingTool) : "none"}`, - `logs: ${logs.length}`, + "Infinite Canvas Agent 诊断", + `地址：${context.endpoint}`, + `连接：${context.connected ? "在线" : context.enabled ? "连接中" : "未启用"} · 状态：${context.activity}`, + `消息：${context.messages} · 工具：${context.pendingTool ? toolName(context.pendingTool) : "无"}`, ].join("\n"); - const body = logs - .map((item, index) => { - const detail = item.raw == null ? item.text : JSON.stringify(item.raw, null, 2); - return [`#${index + 1} ${item.time} ${item.title}`, detail].filter(Boolean).join("\n"); - }) - .join("\n\n---\n\n"); + const body = logs.map((item) => `${item.time} ${item.title}${item.text && item.text !== item.title ? ` · ${item.text}` : ""}`).join("\n"); return [head, body || "暂无事件日志"].join("\n\n"); } @@ -1180,37 +1203,37 @@ function formatLogJson(logs: AgentEventLog[], context: AgentLogContext) { return JSON.stringify({ context, logs: logs.map(({ time, title, text, raw }) => ({ time, title, text, raw })) }, null, 2); } -function eventText(event: AgentEventPayload) { - return event.type === "item.completed" && event.item?.type === "agent_message" ? stringText(event.item.text) : ""; -} - -function usageText(event: AgentEventPayload) { - const usage = event.usage; - if (!usage || typeof usage !== "object") return undefined; - const total = numberField(usage, "total_tokens"); - const input = numberField(usage, "input_tokens"); - const output = numberField(usage, "output_tokens"); - if (total) return `${total} tok`; - if (input || output) return `${input || 0}/${output || 0} tok`; - return undefined; -} - -function eventTitle(event: AgentEventPayload) { +function formatAgentEventLog(event: AgentEventPayload) { const item = event.item; - if (event.type === "thread.started") return "已创建 Codex 会话"; - if (event.type === "turn.started") return "开始处理"; - if (event.type === "turn.completed") return "本轮完成"; - if (event.type === "stream.summary") return "流式摘要"; - if (event.type === "turn.failed" || event.type === "error") return "本轮失败"; - if (event.type === "item.started" && isMcpToolItem(item)) return `调用工具：${toolName(String(item?.tool || ""))}`; - if (event.type === "item.completed" && isMcpToolItem(item)) return `工具完成：${toolName(String(item?.tool || ""))}`; - if (event.type === "item.completed" && item?.type === "agent_message") return "Codex 回复"; - return event.type || "Codex 事件"; + if (event.type === "thread.started") return { title: "创建会话", text: shortId(event.thread_id) }; + if (event.type === "turn.started") return { title: "开始处理", text: shortId(event.turn_id) }; + if (event.type === "turn.completed") return { title: "处理完成", text: turnSummary(event) }; + if (event.type === "turn.failed" || event.type === "error") return { title: "处理失败", text: event.message || event.error?.message || "未知错误" }; + if (event.type === "item.started" && isMcpToolItem(item)) return { title: "调用工具", text: toolName(String(item?.tool || "")) }; + if (event.type === "item.completed" && isMcpToolItem(item)) return { title: item.error ? "工具失败" : "工具完成", text: `${toolName(String(item?.tool || ""))}${item.error?.message ? ` · ${item.error.message}` : ""}` }; + if (event.type === "item.completed" && item?.type === "agent_message") return { title: "收到回复", text: compactText(stringText(item.text)) }; + return null; } -function shouldLogAgentEvent(event: AgentEventPayload) { - const itemType = event.item?.type || ""; - return !["item.updated"].includes(event.type || "") && !["reasoning"].includes(itemType) && !(event.type === "item.started" && itemType === "agent_message"); +function turnSummary(event: AgentEventPayload) { + return event.duration_ms ? `${(event.duration_ms / 1000).toFixed(1)} 秒` : "完成"; +} + +function eventUsage(event: AgentEventPayload): AgentTokenUsage { + return { + input: numberField(event.usage, "input_tokens"), + cached: numberField(event.usage, "cached_input_tokens"), + output: numberField(event.usage, "output_tokens"), + }; +} + +function shortId(value?: string) { + return value ? value.slice(0, 8) : ""; +} + +function compactText(value: string, maxLength = 120) { + const text = value.replace(/\s+/g, " ").trim(); + return text.length > maxLength ? `${text.slice(0, maxLength)}…` : text; } function isConnectionErrorMessage(item: AgentChatItem) { diff --git a/web/src/stores/use-agent-store.ts b/web/src/stores/use-agent-store.ts index 20871f5..e25fba0 100644 --- a/web/src/stores/use-agent-store.ts +++ b/web/src/stores/use-agent-store.ts @@ -9,6 +9,7 @@ export type AgentEventLog = { id: string; time: string; title: string; text: str export type AgentPendingToolCall = { requestId: string; name: string; input?: { ops?: CanvasAgentOp[]; path?: string } & Record }; export type AgentCanvasContext = { snapshot: CanvasAgentSnapshot; applyOps: (ops?: CanvasAgentOp[]) => CanvasAgentSnapshot; undoOps: () => CanvasAgentSnapshot | null; canUndo: boolean }; export type AgentThreadSummary = { id: string; preview: string; name?: string | null; cwd?: string; status?: string; source?: unknown; createdAt?: number; updatedAt?: number }; +export type AgentTokenUsage = { input: number; cached: number; output: number }; export type AgentPanelTab = "chat" | "setup" | "history" | "log"; const CONNECT_TIMEOUT_MS = 6000; @@ -31,6 +32,7 @@ type AgentStore = { sending: boolean; waiting: boolean; messages: AgentChatItem[]; + tokenUsage: AgentTokenUsage | null; eventLogs: AgentEventLog[]; threads: AgentThreadSummary[]; activeThreadId: string; @@ -71,6 +73,7 @@ export const useAgentStore = create((set, get) => ({ sending: false, waiting: false, messages: [], + tokenUsage: null, eventLogs: [], threads: [], activeThreadId: "",