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

@crazx/dsh-client-ui-sidebar

v0.2.1-rc.2.zw.9

Published

Sidebar plugin: session multi-level tree, search, grouping, state dots

Readme


description: "dsh Web 客户端的侧边栏外壳插件:品牌行、New Session 操作、折叠控件、可感知滚动的区域席位与底部固定的 Settings 席位。" kind: "package-reference"

@deepseek-ai/dsh-client-ui-sidebar

English | 中文

桌面端产品事件使用可选的产品埋点服务,不包含普通 Web 交互。

概述

dsh Web 客户端的侧边栏让用户识别当前构建、启动新会话、将导航折叠为 56px 轨道、浏览 Workspace 与 Session,以及打开 Settings。它会将 Settings 入口固定在底部,并在隐藏空闲滚动条时避免浏览器行发生位移。New Session 优先使用显式选择的 Workspace,其次使用当前 Session 所属的 Workspace,再其次使用最近活跃的 Workspace;如果都不存在,则打开空白的 New Session 页面。部署可以替换品牌标记或名称,同时保留导航控件和轨道几何。

目录


使用本包

侧边栏是导航外壳:用户看到品牌、启动新会话、折叠轨道并到达 Settings。功能插件填充它的席位——ui-workspace 填充 sidebar.workspaces,ui-settings 在 sidebar.settings 注册触发行与设置面板。

品牌与 New Session

展开的品牌行把 sidebar.brand.mark 与 sidebar.brand.name 渲染为两个独立的 single slot;收起轨道则渲染同一个 mark slot。在 Web 和 Windows 桌面端,点击展开态的品牌会新建会话,悬停或聚焦时不显示 tooltip。没有占位者时,外壳使用鱼形标记和本地化的本地构建标签。完整构建会在标签下方显示代码徽标;该徽标使用 DSH_CLIENT_VERSION、可选的 7 位 DSH_CLIENT_COMMIT_HASH 与 DSH_CLIENT_GIT_DIRTY=true 组装成 version[-commit][-dirty];缺少版本元数据时不显示徽标。New Session 优先使用作用域操作明确指定的 Workspace,否则使用当前 Session 所属 Workspace,再否则使用最近活跃 Workspace;一个 Workspace 都没有时则清空选择,进入空白 New Session 页面。 展开态的新建会话按钮在悬停或键盘聚焦时于右侧以灰色文字显示当前有效绑定。快捷键可见且空间较窄时,居中的图标与文字在快捷键之前渐隐;CSS 为快捷键保留宽度,无需测量按钮。纯图标控件保留使用平台键位样式的 tooltip,侧栏隐藏时常驻的 macOS 头部控件也保持一致。所有控件均提供 aria-keyshortcuts。

全局面板入口

插件在 root 作用域的 sidebar.panellist list 中注册图标组件,提供 id、可选 order,以及字符串或 locale-aware 的 label。同一个 id 寻址布局中 root 作用域 main keyed slot 的组件;选择不存在的主面板条目会抛错,并保留当前选中态。标签提供普通可见文字、无障碍名称和折叠提示。每一行通过 usePanelInfo 读取自己的选中态;DOM 焦点移到搜索框或目录选择器时,显示的面板及其列表项选中态不变。没有注册项时,列表及其间距均不渲染。产品随附的组合不注册示例面板。行还可以声明 conversationAgentPreset:主区显示对话时,声明值与屏上(mainView)会话 agentPreset 投影相等的行同样视为选中——把布局交还给所打开对话的面板入口因此保持选中态,且不需要第二份选中状态。投影缺失或未就绪不选中任何行;全局面板优先于该归属;重复声明时按显示顺序的第一行生效。

折叠行为

侧栏及会话头部的开关从命令目录读取当前有效快捷键,用于悬停、键盘聚焦提示和 aria-keyshortcuts。未绑定的命令只显示操作名称。

侧栏收起时,顶部展开按钮承载可选、不可交互的 sidebar.toggle.badge slot。占用方提供状态和提示内容,不增加操作,也不改变按钮的导航行为。

实时收起时,展开内容在当前宽度淡出,上方控件共用同一段透明度渐变,并向左平移进入 56px 轨道,由布局的栏滑动结束整段动画。页面初始即为收起状态时会静态渲染轨道;减少动态效果模式会禁用两段过渡。固定在底部的 sidebar.settings 控件共用相同的透明度渐变时序,但不发生横向位移。

在 Windows Electron 中,html[data-windows-titlebar] 将两种状态下的侧栏开关固定在顶栏左上角,仅在展开态与新建会话按钮左边缘对齐。展开态品牌位于顶栏下方、新建会话按钮上方,按钮上方额外留出 8px。收起后,品牌和侧栏内容隐藏,新建会话按钮排在侧栏开关与 Desktop 菜单之间。侧栏在收起态将根元素的 --dsh-windows-menu-start 设为 84px;Desktop preload 使用它将菜单放在新建会话之后,展开态默认为 48px。顶栏图标按钮采用紧凑控件圆角的 28px 控件,图标为居中 16px,并从窗口拖拽区域中排除。侧栏开关与新建会话的悬停提示在顶栏下方展开,Desktop 菜单文字不会盖住它们;占用 sidebar.toggle.badge 的控件自行决定气泡展开方向。

macOS 桌面

在 html[data-platform='darwin'](仅由桌面 preload 设置)下,展开的侧边栏列顶部有一条 52px 的顶部条:避开 hiddenInset 红绿灯并承载收起按钮;顶部条与其下的 logo 行各自打上 data-window-drag,于是每行自己的盒子就是窗口的拖拽区(唯一的 darwin drag 规则由 ui-web base.css 声明),因此品牌 wordmark 在 macOS 上不再是 New Session 快捷入口——专用的 New Session 按钮保留该操作;收起时整列隐藏而非保留轨道。本包向框架的 shell.leading 窗口 chrome 座(ui-layout)注册 HeaderLeadingControls——打开侧边栏与 New Session 两个控件,由框架仅在列隐藏时挂载于红绿灯旁,覆盖所有主面板。Desktop 参考负责窗口集成。

滚动条

栏内的滚动条是一种指针可供性:只要指针不在栏内,外壳就把滚动条间接层重新绑定为 transparent;指针离开后滑块再保留 2 秒,因此没人指向的列表不会带着滚动条。避免行位移的空间预留属于滚动区域本身(ui-workspace),所以显示滑块不会引起重排。


理解实现

外壳是纯组合:SidebarRootComponentProps 组合布局 owner share、全局 useSessions 与 useWorkspaces 钩子、已声明的品牌、sidebar.workspaces 与 sidebar.settings 子 slot,以及注入的导航回调。面板入口及其可选标题使用相同的组合方式。面板元数据由列表注册和 locale 变化派生;选中态属于布局存储。

slot 纪律

声明感知的 slots.inject() 让替换包无论先于还是后于侧边栏激活都能生效。页脚承载 sidebar.settings 席位:侧边栏只渲染固定在底部的布局 slot,并共享其栏状态(wide)。/client 导出接口只包含插件主体(apply/inject)及约定类型;SidebarRoot、行组件与树派生仍由 slot 注册封装在包内。


进一步探索

以下页面覆盖填充外壳席位的各个界面与组合模型。

  • ui-workspace——渲染到 sidebar.workspaces 的 Workspace 与 Session 浏览器。
  • ui-settings——在 sidebar.settings 注册触发行与设置面板的设置领域底座。
  • ui-layout——折叠所使用轨道与栏状态的布局 owner。
  • ui-theme——外壳所重新绑定的滚动条 token 间接层。
  • slot 系统标准——席位背后的组合模型。

模型体验

无。该包是浏览器端 UI 插件层,不注册任何面向模型的内容。

KV Cache 影响

无;该包既不组装也不发送提供方请求。

已知限制与延期工作

这些限制定义外壳拥有什么、其占位方拥有什么;它们是当前包约束。

  • Session 状态点渲染由 ui-workspace 持有:本外壳没有可用的 done/error 通知数据源。
  • Workspace 浏览行为由组合持有:分组、排序、搜索与行状态都属于 ui-workspace,不属于此外壳。
  • 「New task completed」未读标记是本地查看状态:完成时间 > 上次查看时间这一事实永远不会到达宿主。

开发备注

无。