npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@huiliyi37/dsh-client-ui-tool

v0.6.0

Published

Client Tool call-tree renderer and keyed per-tool presentation slot

Readme

@huiliyi37/dsh-client-ui-tool

English | 中文

Client Tool 展示插件。ui-conversation 通过 conversation.chat.node 的同名 key 分发每个已排序的 tool-call Conversation Node;本包渲染其中的 root 及其 Code Dispatch 子调用,并把每个原子调用通过 keyed slot tool.call.toolview 分发。没有注册的 Tool 名称使用通用卡片。

业务 UI 包只注册 wire Tool 名称和原子视图,不配对 Session Event、不重建 transcript,也不拥有 root/subcall 拓扑。Runtime 继续负责 call/result 配对、生命周期和递归 subCalls 投影;conversation view 继续负责 ChatFlow 位置。

渲染约定

ToolCallTree 接收一个已经包含递归 subCalls 的 root ToolCallBlock、selection 状态、会话 cwd,以及用于打开文件和检查调用的 Host 回调。它递归遍历标准 call block,让 root 与任意深度的 child 经过同一条原子分发路径,不再订阅独立的 parent-to-children map。

每个 root 和 child wrapper 都保留 data-chat-anchor-key="call:<id>"data-chat-call-id DOM 约定,供分页和 selection 使用。

本包还通过 ToolDetails 填充 conversation.details.tool。行 renderer 与详情 renderer 为 terminalreaddiffsearchweb render intent 共用同一组纯 card model。本版本不认识的 intent 标签和格式错误的 wire card 数据都会回退为压平的 Tool result 文本。

通用行把已知 Tool 名称归类为 search、read、shell、write、edit、code 或 generic 变体。运行中、成功、失败和中断状态只来自冻结的 call/result slice。只有用户调用 Host 打开文件回调时,文件路径才相对会话 cwd 解析;展示代码不读取 Session service。

原子 Tool 视图

业务所有方把自己的 wire Tool 名称注册进 tool.call.toolview

ctx.slots.inject('tool.call.toolview', () =>
  ctx.slots.register({
    name: 'tool.call.toolview',
    key: '<wire tool name>',
  }, BusinessToolRow))

owner 载荷为 ToolCallOwnerPropscallIdtoolName、冻结的 block、可选 cwdhome,以及普通的 openFileinspect 回调。路径摘要先相对会话 cwd 缩短,再把剩余的 POSIX 宿主家目录写成 ~filePath 与 Host 打开仍使用作者给出的文件系统路径。注册项会收到正常的 Session slot runtime share,但不会收到 React node、Runtime service 或 root/subcall 知识。

本包当前拥有 generic fallback,以及 bash/pwsh、read、write/edit、grep/glob、web、todo、question 和 Code Dispatch 的内置展示。ui-skill 展示了业务包如何拥有 skill 注册。

各类卡片的上限与 fallback 规则仍由对应的 terminaldiffreadsearchweb Note 负责。

模型体验

无,因为本包只渲染已经记录的 Tool 调用和结果,不改变模型请求、Tool 执行或 Session Event。

KV Cache 影响

无。本包只负责 Client 展示。

已知限制与后续工作

  • Host 不把 run_code 暴露为 Code Mode 程序 binding,因此生产事件目前只能产生一层分发;递归的运行时/UI 约定已为未来的嵌套生产者做好准备。
  • 现有第一方 Tool 视图初期仍集中在本包,之后可以通过 keyed slot 独立迁回各自业务包。
  • Tool 文案暂时复用 ui-conversation locale namespace。