【反馈】侧边栏底部插件入口横排拥挤（sidebar.footer.action），建议支持纵向堆叠

[taotaowang-wt]

环境

• DeepSeek Harness 桌面版 0.2.0-rc.2（Windows 11，Windows titlebar 模式）
• 已装插件：skillhub-plugin 0.2.16（"插件广场"）、dsh-context 0.62.2（"上下文洞察"）

现象

侧边栏底部的插件入口左右并排（横排）。每多装一个带底部入口的插件，就多挤一个按钮；侧边栏宽度有限，插件数量增多后会横向溢出、互相挤压。

复现步骤

1. 安装任意两个会向 sidebar.footer.action 槽位注册入口的插件（如 skillhub-plugin + dsh-context）；
2. 观察侧边栏底部：两个入口左右排列；
3. 再装第三个、第四个同类插件，底部继续横向扩展直至溢出。

期望行为

底部入口纵向堆叠（上下排列，与上方"设置"行的排布方向一致），或提供收纳机制（溢出折叠进 "⋯" 菜单）。

代码定位（0.2.0-rc.2）

@deepseek-ai/dsh-client-ui-sidebar 的 SidebarRoot：

• 底部区域：<div class="footerActions">{renderSlot("sidebar.footer.action", { wide })}</div>；
• sidebar.footer.action 声明为 kind: "list"，多个插件可各自注册一个 entry（如 skillhub 的 skillhub-plaza、dsh-context 的 context-overview）；
• footerActions 容器 CSS 为 display:flex，默认 flex-direction: row、nowrap，因此所有 entry 横向排列，无堆叠/收纳机制。

建议（任选其一或组合）

1. 最简单：footerActions 改为 flex-direction: column（与紧邻其下的 settingsArea 行为一致），entry 自身已是通栏样式（skillhub 与 dsh-context 的按钮默认都是 width: calc(100% + 4px)），纵排零成本；
2. 更灵活：提供 CSS 变量（如 --dsh-sidebar-footer-direction）或槽位注册 option，让插件/主题可选排布方向；
3. 最完备：入口超过 N 个时自动收纳进 "⋯" 溢出菜单。

补充：社区已有需求佐证

社区已有多个第三方方案在解决同一问题（如 GitHub 上的 dsh-sidebar-footer-stack、插件市场的 dsh-footer-order），说明这不是个例。期望官方能在框架层收纳此能力，避免各插件自行打补丁（第三方补丁会随插件/版本更新而失效）。

谢谢！

---

以下为开发者视角的附加信息，可保留可删除

临时本地补丁方案（供参考）：运行时给 footerActions 容器（父级为 footArea，可与 user-questions 同名 footer 区分）追加类，强制 flex-direction:column !important，折叠（collapsed/rail）态用 [class*="collapsed"] 前缀规则让图标居中。

---

_{提交账号说明：本反馈由用户本人（taotaowang-wt）在 DeepSeek Harness 桌面版内借助 AI 助手整理文字并代为提交。用户当前临时方案：已安装社区插件 dsh-sidebar-footer-stack。}

[jd04063221]

这块我踩过同一块石头，把核对结果和"插件该怎么做"写清楚（以下都在 0.2.0-rc.2 上验证过）。

1. 先对齐事实

槽位与外壳的渲染（@deepseek-ai/dsh-client-ui-sidebar）：

"sidebar.footer.action": { kind: "list",   scope: "root" }
"sidebar.settings":      { kind: "single", scope: "root" }

<div class="footArea">
  <div class="footerActions">{renderSlot("sidebar.footer.action", { wide })}</div>
  <div class="settingsArea">{renderSlot("sidebar.settings",       { wide })}</div>
</div>

席位 CSS（前缀随构建变，本机是 hHd-Xa_）：

• .footArea { display:flex; flex-direction:column }
• .settingsArea, .footerActions { flex:none; width:100%; min-width:0 }
• .footerActions { display:flex } ← 没写 flex-direction，也没写 flex-wrap；实测 computed 就是 row + nowrap
• .collapsed .footerActions, .collapsed .settingsArea { justify-content:center; width:auto; display:flex }
• 外壳没有任何一条规则设置 flex-direction，所以插件改方向不需要 !important

有两处前提要修正：

第一，settingsArea 不是"纵向排布"的范例。 它是 kind:"single" 的席位，最多一个占用者，宽态下甚至不是 flex 行（块级撑满就行），只有折叠态才被改成 flex 居中。它不溢出不是因为它纵向，而是因为 single 席位天然只有一个占用者；footer.action 是 list，才是真的会堆 N 个。所以"照设置行改"这条路其实不成立。

第二，插件入口不是 .footerActions 的直接子元素。 渲染层（dsh-client-ui-renderer）给每个槽位包了一层锚点：

// "Anchor style shared by every outlet wrapper: display:contents keeps the
//  wrapper out of layout (grid/flex parents see the slot's own children),
//  so the anchor is purely addressable surface."
const ANCHOR_STYLE = { display: "contents" };
<div data-slot={slotKey} style={ANCHOR_STYLE}>…</div>

实测的父子链是 卡片 → (display:contents) → .footerActions → .footArea，所以任何 > 直接子代选择器都会落空——这正是第三方补丁最容易踩空的一步。反过来，data-slot="sidebar.footer.action" 是渲染层按槽位 key 写死的属性，核心自己的 CSS 也在这么用（如 ….scrollBody > [data-slot="conversation.session"] > …），比去缝哈希类名稳得多。

另外，席位里几乎每个占用者都按"整行"写宽度（你贴的 calc(100% + 4px)，我自己那张卡片是 flex:1 1 100%），在 row 里谁都拿不到整行：只装我自己时实测卡片 105.2px、席位 256px。

2. 插件应该做什么：三条 CSS，自证在场

/* 只当自己那张"整行"卡片真的在这个席位里时，把席位变成纵向列 */
:has(> [data-slot="sidebar.footer.action"]):has(.your-fullwidth-card) {
  flex-direction: column;
}

逐条理由：

• 用 :has(> [data-slot="sidebar.footer.action"]) 定位席位，而不是 [class*="_footerActions"]：哈希类名换构建就变，data-slot 是槽位 key。这样也天然只改席位本身、不碰任何祖先。
• 第二个 :has(.your-card) 是自证在场：自己不在席位里就别动别人的布局。这也是多个插件同时这么做不会打架的原因——大家设的是同一个值，幂等；会冲突的只有"某插件想要横排"这种相反诉求。
• 改 flex-direction，不要改 flex-wrap：列容器上的 wrap 是"另起一列"，会把卡片挤到邻居右边并溢出（我实测过）。要改的是方向。
• 不要 !important，也不要把方向加在祖先上：footArea → root 是外壳自己的列，改错会把整个侧边栏和主面板叠起来。

3. 折叠态必须自动失效

折叠后外壳把席位改成 width:auto; justify-content:center，期望的是一行小图标。插件若无条件写 column，收起后图标会竖着排。

别用 [class*="collapsed"] 去特判，让选择器依赖"只在宽态存在的东西"就行：宽态渲染通栏卡片（.your-card），折叠态换成圆形图标按钮（.your-rail）。上面第二条 :has() 用的是卡片类名，收起时自然不匹配，零特判。如果某插件的入口在两种状态下是同一个图标元素，那它本来就不该动方向——横排图标是对的。

4. 这件事该由谁做

我不认为这是核心的 bug：list 席位默认 row 是合理默认（图标型入口、单占用者都吃它），"我要整行"是占用者自己的诉求。占用者写一条自证在场的 CSS，代价 3 行，插件卸载即消失，不需要核心发版。

这个问题我认为应该是插件更新来适应新版本

5. 参考实现

我的插件 dsh-desktop-token-usage（在 sidebar.footer.action 里挂 token 用量卡片）现在跑的就是这类规则：[class*="_footerActions"]:has(.dtu-footCard), :has(> .dtu-footCard){flex-direction:column}，实测卡片 105.2px → 铺满 256px。