【免费下载链接】paseoOrchestrate multiple coding agents from desktop and mobile项目地址https://gitcode.com/gh_mirrors/pa/paseo点击查看免费下载Paseo 的插件系统允许客户端通过 Timeline Transformer 与 Timeline Renderer 接管 Agent 时间线上任意条目的数据与渲染。本文以仓库中inline-thinking示例为核心讲解如何截获 Agent 流式输出的 reasoning推理/思维链条目将其替换为带打字机节奏的内联文本渲染并深入剖析 transform 契约、phase 语义、Zod 数据校验与useRevealedText的配合方式帮助你举一反三地自定义任意时间线条目。这个示例解决什么问题在默认界面中Paseo 时间线上的reasoning条目Agent 思考过程的文本以整段形式出现。inline-thinking插件的目标是只针对第一个流式 delta 产生的推理行做替换随后以按节奏逐字揭示paced text的方式内联渲染出来让推理过程像消息正文一样平滑滚动而不是一次性砸出一大段。原文档对该插件的描述非常精炼完整摘录如下This plugin replaces reasoning rows from the first streaming delta and renders the paced text inline. Install the directory asinline-thinking, then run an agent that streams reasoning.index.client.tsxwires the transformer and renderer to the component inclient/thinking.tsx.它透露了三个关键事实插件只关心流式阶段的 reasoning 条目渲染采用内联 渐显形式整条链路由index.client.tsx组装。下面逐一展开。插件目录结构与安装方式inline-thinking示例位于 plugin-examples/inline-thinking目录结构只有三个文件plugin-examples/inline-thinking/ ├── paseo-plugin.json # 插件元数据与版本要求 ├── index.client.tsx # 客户端贡献入口注册 transformer 与 renderer └── client/ └── thinking.tsx # 内联思维链渲染组件 Zod schema安装时按原文档要求将目录命名为inline-thinking插件 id 必须与目录名一致Paseo 通过目录名识别插件身份。paseo-plugin.json 内容如下{ id: inline-thinking, requirements: { paseo: 0.8.0 } }id固定为inline-thinking与安装目录名保持一致requirements.paseo声明本插件要求 Paseo 客户端版本不低于0.8.0这是 Timeline Transformer / Renderer 能力可用性的最低版本门槛。安装完成后只需启动一个会流式输出推理内容的 Agent即开启 reasoning streaming 的模型插件便会自动生效——因为 Transformer 的query直接订阅了reasoning类型的条目无需任何额外配置。注意该插件只有客户端贡献没有 server 入口也没有子进程属于纯 UI 型插件。核心机制Timeline Transformer 与 Timeline Renderer要理解这个插件先要理解 Paseo 客户端插件系统提供的两条时间线相关能力它们都定义在 PluginClientContext 中interface PluginClientContext extends PluginCommandCapabilities { addTimelineTransformerItemType extends AgentTimelineItem[type]( contribution: PluginTimelineTransformerContributionItemType, ): PluginCleanup; addTimelineRendererSchema extends ZodType( contribution: PluginTimelineRendererContributionSchema, ): PluginCleanup; // ... }两条能力一前一后构成数据替换 → 渲染接管的完整管线Transformer转换器在 Paseo 构建渲染模型时被调用接收原始时间线条目返回一个或多个插件自有条目或undefined表示保留原样Renderer渲染器注册与插件条目kind/version匹配的 React Native 组件Paseo 在渲染前会用注册的 Zod schema 校验item.data校验通过才挂载组件。根据官方插件参考文档 public-docs/plugins/reference.md 的说明整个替换发生在Paseo 拆分原生 Markdown 或对工具进行分组之前且每个流式更新都会重新走一遍 transform这意味着推理文本每新增一个 chunkrenderer 都会收到一次更新——这正是内联打字机效果的来源。phase 语义区分流式与完成Transformer 与 Renderer 共享一个关键入参phase取值仅两种phase含义典型时机streaming条目仍在流式更新中实时的 assistant 消息、运行中的工具调用、加载中的 reasoningcomplete条目已定格已提交或已获取的消息、已完成的工具调用或推理inline-thinking的 renderer 正是利用phase来决定useRevealedText的节流行为流式阶段逐字渐显完成阶段一次性补全剩余文本。index.client.tsx 源码剖析transformer 与 renderer 的接线插件入口 index.client.tsx 完整代码如下import type { PluginClientContext } from getpaseo/plugin/client; import { InlineThinking, inlineThinkingSchema } from ./client/thinking; export default function contribute(client: PluginClientContext) { client.addTimelineTransformer({ id: inline-thinking, query: { itemType: reasoning }, transform: ({ item, phase }) ({ items: [ { type: plugin, kind: inline-thinking, version: 1, data: { text: item.text, phase }, }, ], }), }); client.addTimelineRenderer({ kind: inline-thinking, version: 1, schema: inlineThinkingSchema, Component: InlineThinking, }); return () {}; }逐段拆解contribute(client)是客户端插件的标准入口Paseo 在加载插件时调用注入PluginClientContext返回值是清理函数此处为空函数用于插件卸载时注销贡献。Transformer 注册id为inline-thinkingquery: { itemType: reasoning }是稳定的粗粒度选择器只命中类型为reasoning的条目。在 packages/protocol/src/agent-types.ts 中可以看到该条目类型的确切定义{ type: reasoning; text: string }——它只有一个text字段这解释了为什么 transform 里直接取item.text。transform 返回值把原始 reasoning 条目替换为一个type: plugin的条目携带kind: inline-thinking、version: 1以及{ text, phase }数据。根据参考文档data必须是 JSON 兼容的PluginTimelineData JsonValue见 packages/plugin/src/contracts.ts字符串和枚举值自然满足要求。Renderer 注册kind/version与替换条目完全一致Paseo 据此找到渲染组件schema: inlineThinkingSchema负责挂载前的数据校验。返回 undefined 的兜底语义Transformer 的transform返回类型是PluginTimelineTransformResult | undefined见 PluginTimelineTransformerContribution。参考文档明确了三条规则返回undefined→保留原始条目返回items数组 →替换原条目返回空数组 →移除该条目。inline-thinking的 transform 无条件替换每次返回一个 plugin item。同类示例 plugin-examples/timeline-items 则展示了不确定就不替换的防御写法只有当工具调用name todo且输出可被对应 schema 解析时才返回替换项否则返回undefined让 Paseo 保留原始工具调用条目——这种模式对识别类插件尤为重要。渲染器实现Zod schema、useRevealedText 与主题色核心渲染组件在 client/thinking.tsximport type { PluginTimelineItemProps } from getpaseo/plugin/client; import { useRevealedText } from getpaseo/plugin/client/react-native; import { useMemo } from react; import { Text } from react-native; import { z } from zod; export const inlineThinkingSchema z.object({ text: z.string(), phase: z.enum([streaming, complete]), }); type InlineThinkingData z.outputtypeof inlineThinkingSchema; export function InlineThinking({ item, theme }: PluginTimelineItemPropsInlineThinkingData) { const text useRevealedText(item.data.text, item.data.phase); const style useMemo( () ({ color: theme.colors.foregroundMuted }), [theme.colors.foregroundMuted], ); return Text style{style}{text}/Text; }三个设计要点Schema 与数据契约强绑定。text必须是字符串phase只能是streaming | complete二选一。这与 transform 写入的data: { text: item.text, phase }严格对应任何不符合 schema 的数据都会在渲染前被 Paseo 拦截。类型层面通过z.outputtypeof inlineThinkingSchema保证组件 props 与校验结果一致。useRevealedText(text, phase)是打字机效果的来源。该 hook 由 Paseo 客户端插件库导出声明见 packages/plugin/src/client/react-native.ts。官方参考文档特别强调当渲染器需要像 Paseo 内置 assistant 行那样按节奏显示流式文本时应直接使用这个 hook。它内部根据phase控制揭示进度streaming阶段持续推进complete阶段直接展示全文。这保证了插件渲染的节奏与宿主内置行完全一致。主题令牌而非硬编码颜色。组件从PluginTimelineItemProps中取theme使用theme.colors.foregroundMuted弱化前景色标识这是思考过程不是正式回复并放入useMemo避免无谓重渲染。可用的主题令牌定义在 packages/plugin/src/contracts.ts包括surface0/surface1/surface2、border、foreground、foregroundMuted、accent、statusSuccess/Warning/Danger等插件应始终通过令牌取色以自动适配明暗主题。渲染器的完整 props 契约Renderer 组件收到的 props 由PluginTimelineItemProps定义见 packages/plugin/src/client/contracts.tsinterface PluginTimelineItemPropsData unknown extends PluginHostProps { agentId: string; item: { type: plugin; kind: string; version: number; data: Data; }; timestamp: Date; }其中PluginHostProps提供theme渲染样式、host宿主机 id/label与layout紧凑模式、平台ios | android | web。由于 Paseo 同时面向桌面与移动端组件内也可按layout.platform区分平台表现inline-thinking保持极简仅使用theme。此外参考文档还指出Paseo 会按源条目引用对 transform 结果做 memoization并从源行推导替换身份因此对同一条流式条目的多次更新不会导致 renderer 重新挂载——这正是useRevealedText能连续续写而非每次从头播放的前提。替换条目还可选地设置插件局部id不设置时 Paseo 以该条目在源条目输出中的索引作为身份。运行验证与效果观察要看到插件的真实效果按以下步骤操作将 plugin-examples/inline-thinking 目录整体复制为inline-thinking并安装到 Paseo 插件目录要求 Paseo 版本 ≥ 0.8.0启动一个配置了 reasoning streaming 的 Agent推理文本以流式 delta 到达的模型在时间线中观察原本整段出现的推理行现在以内联形式从第一个流式 delta 开始逐字揭示文字颜色为弱化前景色与正式回复形成视觉区分。判定插件是否生效的关键特征推理文本出现打字机节奏而非瞬间铺满流式结束后文本一次性补全到完整内容对应phase从streaming切换为complete。扩展思路基于同一机制做更多自定义inline-thinking演示的Transformer Renderer 流式文本 hook组合是自定义时间线的通用范式。围绕 reasoning 条目可以继续演化折叠式思维链在 renderer 中用layout.compact或本地状态控制展开/收起仅展示摘要行点击后展开全文阶段感知样式利用phase在流式阶段显示光标或半透明文本完成阶段切换为完整颜色识别式替换仿照 pi-tasks 示例 的模式对tool_call条目做内容识别先z.safeParse解析工具输出解析失败返回undefined保留原条目把原始工具调用渲染成结构化任务卡片。若需将新条目写入服务端历史例如把渲染结果固化为时间线中的正式行可参考 public-docs/plugins/reference.md 中的paseo.agents.ref(agentId).timeline.append()服务端 API传入type: plugin的条目与稳定的插件局部id。小结inline-thinking通过addTimelineTransformer订阅reasoning条目用{ text, phase }数据将其替换为kind: inline-thinking、version: 1的插件条目通过addTimelineRenderer注册同 kind/version 的渲染组件并以 inlineThinkingSchema 做挂载前校验渲染器使用宿主导出的useRevealedText实现与内置消息行一致的内联渐显效果用theme.colors.foregroundMuted保持主题一致整个管线完全发生在客户端纯 UI 替换不依赖 server 贡献插件要求 Paseo ≥ 0.8.0。掌握 transformer/renderer 契约与phase语义后你可以在不修改宿主源码的前提下自由重构 Agent 时间线上任何条目的展示形态。赞分享【免费下载链接】paseoOrchestrate multiple coding agents from desktop and mobile项目地址https://gitcode.com/gh_mirrors/pa/paseo点击查看免费下载相关推荐CopilotKit × LlamaIndex 推理链路实战指南用自定义 reasoningMessage 插槽渲染 Agent 思考过程CopilotKit × LlamaIndex 推理链路实战指南用自定义 reasoningMessage 插槽渲染 Agent 思考过程 导读 本文以 Co人工智能AI AgentAgent 框架前端后端CopilotKit 工具渲染Tool Rendering实战用 useRenderTool 把 Agent 工具调用渲染成 React 组件CopilotKit 工具渲染Tool Rendering实战用 useRenderTool 把 Agent 工具调用渲染成 React 组件 导读 本篇人工智能AI AgentAgent 框架前端后端CopilotKit 工具渲染Tool Rendering实战用 useRenderTool 把 Agent 工具调用渲染为对话内的 React 组件CopilotKit 工具渲染Tool Rendering实战用 useRenderTool 把 Agent 工具调用渲染为对话内的 React 组件 本人工智能AI AgentAgent 框架前端后端上一篇React Aria无障碍测试自动化测试与手动测试下一篇从故障到自愈揭秘Weaviate分布式向量数据库的终极高可用架构创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考