Kun 轨迹视图对齐 DeepSeek Harness:Schema v2 投影、密集台账与悬浮 Composer 的实现拆解
人工智能AI Agent自主智能体桌面应用MCP Clients【免费下载链接】KunLocal-first AI agent workspace for coding, writing, design, research, and automation — one runtime for desktop GUI and TUI.项目地址https://gitcode.com/gh_mirrors/de/Kun点击查看免费下载Kun 的轨迹Trajectory视图原本以卡片式仪表盘呈现请求与工具调用记录信息密度和交互方式与 DeepSeek Harness 的ui-trajectory包存在明显差异。本文以仓库中 match-deepseek-harness-trajectory-ui 变更包 为主线完整还原该次“冻结参考实现移植”的技术方案包括轨迹 Schema v2 契约、渲染层投影模型、Harness 几何与交互移植、悬浮 Composer 避让以及 Raw/Source 检查器对等与验证证据链。读完你可以掌握 Kun 轨迹视图的完整实现脉络并了解如何在保留自有主题与存储策略的前提下对一个外部 MIT 参考实现做行为级移植。1. 背景为什么要把轨迹视图重做成 Harness 风格按 proposal.md 的说明Kun 此前的轨迹视图“暴露了所需数据”但采用卡片导向的仪表盘48px 的标题/筛选合并工具栏、摘要指标条、88px 时间轴、44/62px 卡片行以及通用 JSON 检查器。而 DeepSeek Harness 的packages/client/ui-trajectory冻结提交0a53fb55bea101816fa226bb964ae2bed71c343b使用的是另一套几何与交互语义32px 工具栏50px 时序总览timing overview30px 高度的双列密集台账dense ledger请求边界标记request-boundary markers按记录类型定制的富检查器record-specific rich inspection。本次变更的核心目标不是“抄 UI”而是让请求/工具的时间线可以按 Harness 相同的信息密度与交互语义来浏览和操作同时保留 Kun 的标题栏 Trace 开关、运行时状态指示、语义主题 token、存储与采集策略、路由路径以及 Chat/Composer 状态。具体范围与非目标在 design.md 中有明确界定不拷贝 Harness 的全局导航、Chat/Trajectory 标签、Cordis 插槽运行时或设计 token 包运行时也不依赖 Harness 仓库不修改紧凑存储格式与预算。2. 契约先行轨迹 Schema v2 与 v1 兼容变更包的第一大块tasks.md 的 1.11.3是数据层的投影与契约升级。服务端契约位于 kun/src/contracts/trajectory.ts核心常量export const TRAJECTORY_SCHEMA_VERSION 2 as const export const PROMPT_MANIFEST_SCHEMA_VERSION 1 as constSchema v2 在原有记录基座schemaVersion、threadId、turnId、roundId、step、sourceSeq、status、startedAt/firstTokenAt/completedAt/durationMs、preview、detailState、errorCode/errorMessage之上为三种记录扩展了字段llm_requestTrajectoryRequestRecordSchema新增attempt、attemptReason、purpose、provider、model、endpointFormat、responseStatus、usage复用UsageSnapshotSchema、manifestId、optionsAvailable、promptFingerprint、previousPromptFingerprint以及systemBlobId/toolsBlobId/configBlobId三个 Prompt 指纹 blob 引用tool/subtoolTrajectoryToolRecordSchema新增callId、parentRequestId、parentCallId、toolName、argumentsItemId、resultItemId、isError、argumentPreview、resultPreview、schemaAvailable、attachmentIdssystem/user/context/compacted/assistantTrajectoryMessageRecordSchema新增itemId/itemIds、parentRequestId、sourceType、sourceAvailable、sourceLabel、thinkingPreview、attachmentIds、promptFingerprint、previousPromptFingerprint。细节投影采用按需分节on-demand section模型TrajectoryDetailSectionSchema定义了overview/input/output/usage/timing/raw/arguments/result/system-prompt/tools/diff/options/rendered/source/schema等分节TrajectoryDetailSchema附带stateavailable/not_captured/truncated/evicted/legacy与truncated、warning字段。渲染层通过fetchTrajectoryDetail(threadId, recordId, section)按?section查询参数拉取见 src/renderer/src/agent/trajectory.ts。v1 兼容是这次契约升级的关键约束现有日志与 Prompt Manifest 磁盘文件保持不变查询服务直接推导出 v2 数据渲染层在收到 schema-v1 页面时自动归一化。parseTrajectoryPage的实现先判断schemaVersion 2否则走normalizeLegacyPage把旧记录的input等 kind 映射为 v2 的user等 renderer 记录并补齐itemIds参见 src/renderer/src/agent/trajectory.ts。这条归一化路径有专门的测试覆盖normalizes schema-v1 pages to v2 renderer records断言 v1 页被提升为schemaVersion: 2且kind: user、itemIds: [item-1]见 trajectory-harness-parity.test.ts。3. 渲染层移植从卡片仪表盘到 Harness 密集台账3.1 纯模型层投影、Turn/请求边界与折叠渲染层把“数据 → 视图”的转换收敛到纯函数模型里便于移植 Harness 的算法并做确定性单测。核心文件是 trajectory-harness-model.tsderiveHarnessLayout(records)把 v1/v2 记录排序后投影为System/User/Context/Compacted/Assistant/Tool/Subtool七类单元格HarnessCell并按turnId分组为HarnessTurn初始 System 记录无previousPromptFingerprint单独归入 Turn 0。请求边界不产生重复行llm_request记录不渲染成独立行而是按parentRequestId匹配到对应 Assistant 单元格找不到非 System 单元格时退化为“仅请求锚点”requestOnly: true行高 9px并把请求编号挂在目标单元格上。测试attaches request numbers without rendering a duplicate request row直接断言了这一点三个输入记录只产出[assistant, tool]两行请求编号只装饰一次。projectHarnessCells(...)执行 Turn 折叠与 Assistant 调用折叠——折叠后的 Turn 汇总行以·连接各单元格文本并标记collapsedSummary: turn折叠的 Tool 调用汇总行标记collapsedSummary: calls同时提供本地搜索过滤searchText覆盖 kind、正文、thinking、result、status、toolName、argumentPreview、errorMessage、model、provider、requestId 等字段。3.2 几何CSS Modules 钉死 Harness 尺寸按照 spec 的 “Frozen Harness geometry” 要求Kun 必须在 1 CSS 像素内复刻 Harness 的工具栏/时间轴/台账/请求边界/检查器/响应式几何同时保留 Kun 语义主题色。CSS 常量被钉死在各个 module.css 中并由测试直接断言见 trajectory-harness-parity.test.ts区域几何来源文件工具栏height: 32pxTrajectoryToolbar.module.css时间轴height: 50px44px 标签列 1fr 轨道TrajectoryTimeline.module.css台账表头/记录行height: 30px双列Event/ContentTrajectoryLedger.module.css检查器width: clamp(320px, 38%, 440px)TrajectoryInspector.module.css响应式断点同样被测试锁定台账容器跨过620px时类型标签折叠为图标.kindTag相关样式带max-width: 620px的 container query中心宽度跨过760px时检查器变为右覆盖层且不宽于 420px。宽屏默认态是“停靠式 320–440px 检查器”。主题桥接semantic token bridge在 TrajectoryView.module.css所有--trajectory-*变量都映射到 Kun 的--ds-*语义变量如--trajectory-bg-1: var(--ds-bg-main)、--trajectory-accent: var(--ds-accent)并用color-mix(in srgb, ...)派生状态色。测试同时断言视图根节点不直接引用--ds-main/ink/muted/faint/hover/card/sidebar-bg这些字面色变量——也就是说几何完全照搬 Harness配色完全走 Kun 语义 token这正是 spec “masked pixel difference at most one percent / fixed geometry assertions within one pixel” 的落地前提。3.3 时间轴sequence/duration 双投影与全套手势TrajectoryTimeline.tsx 实现了 Harness 时序总览的完整交互清单design.md 的 “Preserve reference interaction invariants”双投影模式sequence等宽序列投影用于并发语义分析与duration按真实耗时投影由工具栏“实际耗时”开关切换选择持久化在localStorage的kun.trajectory.actual-duration键切换时重置视口并清空选区见 TrajectoryView.tsx 与setActualDuration。TTFT/解码分段Assistant span 用 CSS 渐变同时渲染 TTFT 段与生成段--ttft-width变量来自deriveHarnessTimeline输出的ttftFraction测试断言 250ms/1000ms 的请求ttftFraction 0.25。语义车道span 按--span-lane排布多车道测试断言示例输入产出lane: [1, 2]。手势左键拖拽做包含式区间选择inclusive range右键拖拽清空/平移pan滚轮以指针为锚点缩放0.82×/1.18×因子、最小视口宽度 4%靠近左右边缘 8% 区域触发自动边缘平移16ms 定时器步进 0.008悬停延迟出现 tooltipEscape清除选区、Home回到全景。与台账双向同步点击 span 会清掉已有区间选择、滚动台账到对应记录并打开其检查器区间聚焦focus interval通过harnessTimelineFocusIds计算“区间内记录集合”台账侧把区间外记录以data-timeline-focusoutside降透明度opacity: .24但不删除记录。3.4 台账虚拟滚动、折叠、尾部跟随与历史前置锚点TrajectoryLedger.tsx 是交互密度最高的部分直接复用tanstack/react-virtual虚拟化阈值行数超过HARNESS_VIRTUALIZATION_THRESHOLD 100或有更早历史时启用虚拟化overscan: 12行键用encodeURIComponent(cell.id)保证稳定见 trajectory-harness-virtual.ts。三类行高普通记录HARNESS_ROW_HEIGHT 30折叠汇总行HARNESS_COLLAPSED_HEIGHT 20仅请求边界锚点HARNESS_TERMINAL_BOUNDARY_HEIGHT 9。折叠语义Turn 折叠与 Assistant 调用折叠相互独立工具栏提供全局“全部折叠/展开”开关⊞/⊟按钮见 TrajectoryToolbar.tsx且折叠状态按线程存于trajectory-ui-store。尾部跟随tail follow新记录到达时若用户停留在底部scrollHeight - scrollTop - clientHeight 2则自动滚动到底否则累计“新记录数”提示可一键jumpToLive。历史前置锚点prepend anchor加载更早分页前先记录当前scrollHeight/scrollTop加载完成后在requestAnimationFrame里补偿滚动位置保证选区、行键、检查器与可见锚点不变spec 的 “Prepend history” 场景。3.5 检查器按记录类型的定制 TabTrajectoryInspector.tsx 替换了原来的通用 JSON 检查器Tab 集合由记录类型推导tabsFor(cell, request, t)RequestSummary / Options / Usage / TimingSystemPrompt / Tools / DiffDiff 复用diff包的diffLines比较promptFingerprint与previousPromptFingerprint对应的 Prompt 内容Markdown 类消息User/Context/Assistant/CompactedSummary / Preview / Raw / SourceToolSummary / Payload / Result / Schema / Timing。细节按需拉取并做两级缓存运行中记录走liveDetail随状态/时间戳变化刷新 key稳定记录走Map缓存key threadId:targetId:detailRevision:active其中detailRevision包含状态、itemIds、completedAt、运行中记录的sourceSeq/文本/thinking/result 等指纹。检查器支持拖拽调宽双击还原默认宽度、Escape关闭、Tab 焦点/ARIA 语义并保留not_captured/truncated/evicted/interrupted/running/error等状态展示。3.6 Raw 与 Source 对等脱敏与来源溯源tasks.md 第 4 节是 Raw/Source 检查器对等收尾把轨迹 Raw 内容块与 Source 溯源在按需细节投影中分开处理并保持 legacy 兼容与敏感数据安全。TrajectoryRawBlocks.tsx 按TrajectoryRawBlockSchematype/content/itemId/attachmentId/callId/toolName渲染有序 Raw 块text/thinking/context/summary/tool-call/attachment等类型各自呈现敏感脱敏由正则与 Base64 启发式共同完成——SENSITIVE_KEY匹配authorization/auth/api-key/access-key/cookie/credential/password/secret/token/signature/providerMetadata等键名BASE64_VALUE匹配超长 base64 值二者命中的内容在 Raw/Source 展示中不泄露 provider 元数据与凭据字段也不渲染内联二进制负载。TrajectoryMessageSource.tsx 的 Source tab 只展示真实记录的生产者溯源sourceAvailable/sourceLabelSource 可用性由真实 provenance 推导未记录溯源时不可见。对应聚焦测试位于 TrajectoryInspectorRawSource.test.ts。4. 悬浮 Composer不卸载 Chat/Composer 的避让方案trajectory 模式下 Chat 与 Composer 保持挂载Composer 悬浮于全高台账之上。避让机制分两层WorkbenchChatStage.tsx 通过ResizeObserver测量真实 Composer 高度写入 DOM 级 CSS 变量--trajectory-composer-heightTrajectoryView.module.css 用--trajectory-bottom-clearance: calc(var(--trajectory-composer-height, 152px) 16px)作为台账与检查器滚动区的底部 padding即预留“Composer 实测高度 16px”。这样 Composer 因文本、附件或控件变高时最终行与检查器内容始终可滚动到 Composer 边缘之上且 Chat/Composer 的草稿与模型状态不会被卸载丢失spec 的 “Composer height changes” 场景。5. 兼容性边界与迁移按 design.md 的 “Extend query detail without migrating storage” 决策现有 journal/manifest 磁盘文件不变查询服务在内存中推导 v2 字段渲染层继续接受 v1 页面normalizeLegacyPage旧 parser 保留用于回滚存储文件、路由路径均不改变TrajectoryFilterSchema继续支持all/llm/tool/error过滤参数。spec 还明确约束禁止凭空合成记录——Kun 缺少部分 Harness 事件类型时System/Subtool 单元格只能来自真实 Prompt Manifest 或嵌套运行时证据绝不伪造假记录。这是保证轨迹数据可信度的底线。6. 验证与证据链从单测到 Electron 截图tasks.md 第 3、4 节的验证策略分两层参考派生单测trajectory-harness-parity.test.ts覆盖投影、请求编号、Turn 0 归属、9px 边界行、20px 折叠行、语义车道/TTFT/区间聚焦、v1 归一化以及 CSS 几何钉死直接readFile五个 module.css 断言 32/50/30px 与 clamp 宽度、断点、no-drag区域。确定性 Electron 截图烟测对 wide/narrow、light/dark、empty/loading/running/error/history/long-list/inspector 等状态输出截图与几何证据默认浅色主题下固定 parity fixture 与冻结参考的掩码像素差异不超过 1%固定几何断言差异不超过 1 像素。fixture 与烟测入口见 TrajectoryHarnessSmokeFixture.tsx。仓库门禁还包括 focused tests、typecheck、Kun build、production build、changed-file ESLint、file-line700 行/文件上限与 OpenSpec/diff 检查因为参考单体超过行数限制纯模型、手势、行、presenter 与样式被拆分为独立文件但保留参考测试与常量。7. 小结这个变更包展示了一条“行为级移植、Kun 化集成”的完整路径用 Schema v2 契约承载更细的请求/工具/消息元数据用纯模型函数把数据投影成 Harness 的密集台账语义用 CSS Modules 钉死参考几何同时通过语义 token 桥保持主题一致再用区间聚焦、折叠、虚拟滚动、尾部跟随与悬浮 Composer 避让还原参考交互模型——全程不动存储格式、不改路由、不引入 Harness 运行时依赖并且用参考派生单测 Electron 像素级截图把“parity”变成可验证的工程承诺。想深入源码可以从 TrajectoryView.tsx 这个组装入口出发依次阅读模型层、时间轴、台账与检查器四个模块再对照 契约文件 与 parity 测试 验证每条 spec 场景。赞分享人工智能AI Agent自主智能体桌面应用MCP Clients【免费下载链接】KunLocal-first AI agent workspace for coding, writing, design, research, and automation — one runtime for desktop GUI and TUI.项目地址https://gitcode.com/gh_mirrors/de/Kun点击查看免费下载相关推荐DeepSeek Harness 轨迹检视台账Turn 感知事件台账与局部记录检查器的设计实现DeepSeek Harness 轨迹检视台账Turn 感知事件台账与局部记录检查器的设计实现 DeepSeek HarnessEverything is人工智能AI AgentAgent 框架DeepSeekKun 对话轨迹视图Conversation Trajectory View设计与实现从全量 trace 到紧凑生命周期存储Kun 对话轨迹视图Conversation Trajectory View设计与实现从全量 trace 到紧凑生命周期存储 本文以 Kun 项目 ope人工智能AI Agent自主智能体桌面应用MCP ClientsPyWxDump 微信聊天记录解密与导出工具全复盘从一键解密到项目下架你需要知道的一切PyWxDump 微信聊天记录解密与导出工具全复盘从一键解密到项目下架你需要知道的一切 PyWxDump 是一款基于 Python 的微信 PC 端聊天记录人工智能AI Agent自主智能体桌面应用MCP Clients上一篇15分钟从零搭建Paperless-ngx智能文档管理系统开发环境下一篇Mapbox.js部署与配置从开发到生产环境的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考