Pipeline Output UI

流水线输出 UI（Agent 主屏渲染管道）

🎨 UI & 扩展 · 🏠 首页 › Pipeline-Output-UI

---

📑 本页目录

• 1. 卡片矩阵
• 2. 工具分类（ToolKind）
• 3. 交互语义修正
• 4. ANSI 清理
• 5. 四条架构决策
• 6. CI 括号平衡门禁的"绕行写法"
• 7. 修复的五项逻辑缺陷
• 8. UI 打磨细节
• 9. 相关页面

Agent 执行过程中每一类输出（文字/代码/文件/选择/工具/思考/Skill/连接器/插件/MCP） 都以最适合的形态呈现。来源 docs/pipeline-output-optimization.md 与 docs/agent-ui-audit.md。

1. 卡片矩阵

卡片	内容
CodeOutputCard	轻量语法高亮（关键字/字符串/数字/注释/注解）+ 语言标签 + 行数 + 复制
FileOpCard	扩展名图标 + 文件名/路径 + 操作徽章（新建/覆盖/追加/编辑/删除/移动）+ 大小变更 Old→New + 行数统计 + 逐条编辑明细
ShellOutputCard	$ command 可复制命令头 + 输出体，失败红色化
JsonOutputCard	可折叠树：深度 ≤2 默认展开、30 项截断、值类型着色
StepMarkerCard	步骤 N + 描述（此前 StepStart 事件被丢弃）
RunSummaryCard	总结文本 + 迭代数 + 工具调用数 + 总耗时（此前 Complete 事件只复位 loading）
PipelineBannerCard	三态：Skill / 连接器 / 插件 × 运行 / 完成（完成后显示对勾 + 总耗时）
WebSearchResultsCard	标题 + 域名 + 摘要 + 外链（此前只 output.take(500) 纯文本折叠）
ErrorBlock	红底 + 红左边框 + ⚠ 图标 + 可选重试（此前 AgentEvent.Error 被当灰色 System 消息渲染）

2. 工具分类（ToolKind）

Kind	图标	匹配
LOCAL	🔧	本地工具（默认）
MCP	🔌 + server 名	mcp_*
WEB_SEARCH	🔍	id = web_search
WEB_FETCH	🌐	WebFetchTool
SKILL	✨	Skill 路由进入
CONNECTOR	紫色 + Icons.Default.Link	connector* / http_request / github_*
PLUGIN	琥珀 + Icons.Default.Extension	plugin* 前缀

/connector:xxx 与 /plugin:xxx 走专用横幅。

3. 交互语义修正

场景	旧行为	新行为
CHOICE	只有自由文本框	从 prompt 解析 1. / • / - 选项渲染单选卡 + 自定义答案兜底
CONFIRMATION	"提交/取消"	明确 "确认 / 拒绝" 双按钮
折叠态	8 行原始文本	摘要行（文件路径/命令/URL/server）+ 统计（行数/字符数）+ 截断提示 + 复制按钮
运行中工具卡	无计时	实时耗时（秒级刷新，≥60s 切 2m05s 格式）+ 参数智能摘要

4. ANSI 清理

shell 的彩色转义码曾原样混入输出 —— 现在在事件入口统一 stripAnsi （chunk / output / fullOutput 进入缓冲前清理），UI 层零感知。

5. 四条架构决策

1. 输出视图路由是纯函数：detectOutputView / parseFileOp / classifyTool / smartToolSummary； 不引第三方语法高亮库，约 60 行正则扫描器覆盖 C 族 / Kotlin / Java / Python / Go / Rust / Swift / Bash；
2. 路由上下文泛化：skillContext: String? → routeContextKind / routeContextName；SlashCommandRoute 新增 routeKind / sourceName；
3. 横幅收尾不新增消息：finishActiveBanner() 原地更新 PipelineBanner.finishedAt；
4. ANSI 清理在事件入口（见 §4）。

6. CI 括号平衡门禁的"绕行写法"

Note

CI 的括号检查按原始字符计数（含字符串与注释），所以正则/注释里的括号会误报。 仓库为此采用了语义等价的转义写法：

想要	写成	说明
正则 \(	\x28	Java/ICU 正则十六进制转义，已用 kotlinc + JVM 实测语义一致
字符类 [...)]	[...\x29]	同理
注释里的 1)	全角 1）	避免计数失衡

这是"门禁与表达力冲突"时的一次诚实取舍记录。

7. 修复的五项逻辑缺陷

缺陷	修复
旧的流水线横幅永久脉冲	sendMessage/retry 在 currentJob?.cancel() 后调 finishActiveBanner()
SmartToolOutput 视图路由 key 只用 output.take(64)（尾部结构不同却复用错误视图）	改用完整 output
FileOpCard 解析缓存 key 缺 args	补 args
CodeOutputCard 的 remember(code, lang) 未纳入 colors（明暗切换后配色陈旧）	纳入 colors
RunningToolCallCard 首帧显示 0s	初始化即按 startedAt 计算

8. UI 打磨细节

• PipelineBannerCard 脉冲动画仅在运行态创建（完成态零动画开销）；
• StepMarkerCard 步骤编号升级为带旗帜图标的胶囊徽章；
• RunSummaryCard 补细描边；
• 工具卡完成态耗时统一走 formatDuration（1.2s / 2m05s）等宽对齐；
• SkillBannerCard → PipelineBannerCard 后，Skill / 连接器 / 插件三种横幅共用一套收尾语义。

9. 相关页面

• 界面导航地图 · UI 审计 · Liquid Glass
• Agent 引擎（事件来源）· 工具系统

---

🏠 返回首页 · 📚 文档索引 · ❓ FAQ · 🔧 故障排查 · 🗺️ 路线图 · 🐛 提 Issue

_{Android Guru Agent · v1.4.4 · Kotlin 2.0.21 · Compose · PRoot · Room}