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

dsh-composer-layout

v0.1.24

Published

Switch between Bottom, Right, and Automatic Composer layouts, with responsive sizing and space-aware controls.

Readme

回答与提示词并排展开——布局示意

长回答与复杂提示词,都需要充分展开的空间。把 Composer 停靠在右侧,就能对照回答撰写下一条消息;简短对话可以使用底部布局,也可以让自动模式随窗口变化调整。模型、权限、会话、工具与额度统计继续使用 DSH 原有实现。

一、亮点

从并排读写到小窗口下的空间分配,三个布局细节串起日常使用:

自适应布局与空间折叠——功能示意,非界面截图

还有这些顺手的细节:

  • 按会话记忆。 打开“记住当前会话布局”后,每个会话在这个浏览器中分别保留布局与手动调整的右栏宽度。
  • 原生编辑。 右侧编辑器填满可用输入区域,短草稿下方的空白处也可以直接编辑,保留原生文本选择行为。
  • 候选面板可达。 斜杠命令与文件引用候选留在右侧栏内;打开其他 Composer 浮层前,会先收起这些候选。
  • 合适的默认宽度。 可以选择窄、适中或宽的右栏,再用分隔条微调。

版本差异见更新记录,标为 Unpublished 的条目属于开发预览。

二、安装

把 web 换成你实际使用的 Web profile。npm 包已包含构建好的插件。

dsh plugin --profile web add dsh-composer-layout@latest

安装后根据插件管理器的提示完成加载;提示需要重启时,按原有启动方式重启目标 Web 服务并刷新页面。再打开“设置 → 内置插件 → Composer 布局”,选择“右侧”或“自动”。如果你平时手动启动 DSH:

dsh web --profile web

用 npm view dsh-composer-layout version 查询 npm 发布版本;用 dsh --profile web --dump-config 确认 bundle 已加入目标 profile。依赖声明见 package.json。

从发布标签选择与你的 DSH 版本匹配的版本,支持范围见 package.json 的 peerDependencies。用实际标签替换下面的 <release-tag>:

dsh plugin --profile web add "github:lavapapa/dsh-composer-layout#<release-tag>"

仓库包含 GitHub 安装所需的 Host 与浏览器产物。安装后按插件管理器提示完成加载;需要重启时,按原有启动方式重启目标 Web 服务并刷新页面。

先按原有启动方式停止使用该 profile 的 Web 服务,再查询 npm 版本并在同一个 profile 中替换插件:

npm view dsh-composer-layout version
dsh plugin --profile web remove dsh-composer-layout
dsh plugin --profile web add dsh-composer-layout@latest

替换插件包后,按原有启动方式重新启动目标 Web 服务并刷新页面。

三、使用

在“设置 → 内置插件 → Composer 布局”中设置默认布局,也可以通过会话右边缘的白条切换底部/右侧布局。右侧布局中,拖动中间分隔条即可调宽。

右侧白条、布局切换与右栏调宽

| 模式 | 适用场景 | 布局行为 | | --- | --- | --- | | 底部 | 简短消息或窄窗口 | 使用 DSH 紧凑的底部编辑器。 | | 右侧 | 对照长回答撰写复杂提示词 | 空间足够时并排,变窄时暂时回到底部。 | | 自动 | 经常改变窗口大小 | 根据会话主区域的宽高比,以及两栏需要的最小宽度选择布局。 |

自动模式的阈值可以在插件设置中调整。打开会话记忆后,各会话保留自己的布局和宽度;首页/新会话页面继续使用 DSH 原生布局。

正文使用左栏的可用宽度,通过插件分隔条调整阅读空间。右侧布局中,DSH 原生的两条正文调宽手柄会隐藏。切回底部后,原生手柄恢复,DSH 已保存的正文宽度偏好仍然保留。

四、开发

更新记录区分正式发布与开发预览。其中的滚动/折叠条目涵盖原生阅读位置恢复、底部布局的控件折叠、原生菜单材质与定位、控件原尺寸,以及内联提示免裁剪。使用 npm 安装时,请查对应发布条目确认这些改进是否已包含在内。

插件实现位于 src/,GitHub 安装使用的 lib/ 产物随仓库提交。发布前运行:

pnpm typecheck
pnpm build
pnpm test
pnpm test:dsh-matrix

参与开发请阅读贡献指南。

五、社区

项目已收录于 Awesome DSH Plugin、Awesome DeepSeek Harness Plugins、Awesome DSH Plugins 和 Oh My DSH。

反馈问题或建议 · DSH 插件主题 · DSH Market