host
e90c885290
保持一页式控制台排版与全部功能、API 不变，只换视觉： 深色顶栏 #24292f、Primer 浅色配色（边框 #d0d7de、链接蓝 #0969da、绿主按钮 #2da44e）、6px 圆角方框、系统字体与 等宽 ID/trace；任务列表改 issues 式（状态圆点 + 标题 + 灰色元信息）；对话改评论时间线（白框 + 头部 + 正文， 竖线连接），灰/蓝气泡已移除；自动选项目与继续消息历史 不受影响。console 标记单测本地 53 项通过。
38 lines
2.3 KiB
TypeScript
38 lines
2.3 KiB
TypeScript
import { useMemo } from "react";
|
||
import { useConsole } from "../../context";
|
||
import { Bar } from "../../components/ui";
|
||
import { ChatList } from "../../components/chat/Chat";
|
||
import { traceEntryToChatMessage, type ChatMessage } from "../../components/chat/mapTrace";
|
||
|
||
export default function TracePanel() {
|
||
const ctx = useConsole();
|
||
const messages = useMemo<ChatMessage[]>(() => {
|
||
const t = ctx.currentTask;
|
||
const head: ChatMessage[] = t && t.prompt ? [{ id: "task-prompt", role: "user", text: t.prompt }] : [];
|
||
const pool = ctx.traceKind ? ctx.traceEntries.filter((e) => e.kind === ctx.traceKind) : ctx.traceEntries;
|
||
const body = pool.map((e, i) => traceEntryToChatMessage(e, i));
|
||
const tail: ChatMessage[] = ctx.traceDone ? [{ id: "trace-done", role: "status", text: "链路已结束（" + ctx.traceDone + "）" }] : [];
|
||
return [...head, ...body, ...tail];
|
||
}, [ctx.currentTask, ctx.traceEntries, ctx.traceKind, ctx.traceDone]);
|
||
return (
|
||
<>
|
||
<div className="muted">实时链路</div>
|
||
<Bar>
|
||
<select aria-label="链路类型" value={ctx.traceKind} onChange={(e) => ctx.setTraceKind(e.target.value)}>
|
||
<option value="">链路类型：全部</option>
|
||
{["exec", "file", "call", "tool", "message", "reasoning", "plan", "agent-start", "agent-done"].map((k) => (
|
||
<option key={k} value={k}>{k === "exec" ? "命令" : k === "file" ? "文件" : k === "call" ? "调用" : k === "tool" ? "工具" : k === "message" ? "消息" : k === "reasoning" ? "思考" : k === "plan" ? "计划" : "子代理"}</option>
|
||
))}
|
||
</select>
|
||
<button onClick={ctx.downloadTrace}>下载完整链路</button>
|
||
<span className="muted">{ctx.traceMsg}</span>
|
||
</Bar>
|
||
{ctx.traceNote ? <div><span className="err">{ctx.traceNote}</span></div> : null}
|
||
<div className="chat-column">
|
||
<ChatList messages={messages} empty="（暂无链路条目）" />
|
||
</div>
|
||
<div className="muted">对话时间线：首条是本任务 prompt（用户）；助手回复来自 message 条目，命令/文件/工具/调用是工具评论框，计划/思考/子代理开始结束是时间线上的状态文字。流式进行中时新条目实时追加；你在底部时自动跟随，往上翻时暂停跟随，点“回到最新”恢复。</div>
|
||
</>
|
||
);
|
||
}
|