@hyzyn/dsh-docker 0.16.1 → 0.17.0

package/README.en.md

@@ -69,7 +69,7 @@ dsh plugin --profile web add link:$(pwd)/packages/docker    # repo development a
 ```
 
 The aggregate package `@hyzyn/dsh-all` (or the repo-root bundle) already includes this plugin, so there is no need
-to add it separately. After installing, restart `dsh web` and the "Containers" entry appears in the sidebar; the
+to add it separately. After installing, restart `dsh web` and the "Containers" entry appears **in the panel navigation directly below "Plugins"** (same column and same spec as "Today's Worth Reading / Global search / Terminal"); the
 "Docker Container Panel" card maintains targets and switches, and **saving applies hot** (`settings/updated`
 triggers re-resolution, with no restart needed).
 
@@ -658,6 +658,15 @@ loopback, `localhost`, or a hostname / `/etc/hosts` alias that **resolves to thi
 `forbidden: loopback-only`. The request body is capped at 1MB, and responses are uniformly `application/json` +
 `referrer-policy: no-referrer`.
 
+**Not available behind a reverse proxy or from another machine**: non-local requests get 403
+`forbidden: loopback-only`. That is deliberate — these routes carry the mutating and execution
+surface (docker stop / remove / exec), which is not opened to remote sessions (see [ROADMAP.md](../../ROADMAP.md)
+item 5 § 5.4). To use this panel from another machine, use an **SSH tunnel**:
+`ssh -L 3080:127.0.0.1:3080 <host>` and open `http://localhost:3080` — the host sees a loopback
+source and a `localhost` Host, so the fence admits it, and the session cookie is minted for that
+authority.
+
+
 **On top of loopback there is a second gate, the "same-origin proof"**: the four SSE streams (`/logs/stream`,
 `/stats/stream`, `/events/stream`, `/images/pull/stream`) and every write sub-route (`/action`,
 `/images/remove|prune`, `/networks/remove|prune`, `/volumes/remove|prune`, `/exec`, `/elevate` (including

package/README.md

@@ -57,7 +57,7 @@ dsh plugin --profile web add link:$(pwd)/packages/docker    # 仓库开发调试
 ```
 
 聚合包 `@hyzyn/dsh-all`（或仓库根 bundle）已包含本插件，一次装齐时不必单独 add。装完重启 `dsh web`，
-侧边栏出现「容器」入口；「Docker 容器面板」卡片维护目标与开关，**保存即热生效**（`settings/updated`
+侧栏**面板导航里紧跟「插件」那一行**出现「容器」入口（与「今日值得读 / 全局搜索 / 终端」同栏、同规格）；「Docker 容器面板」卡片维护目标与开关，**保存即热生效**（`settings/updated`
 触发重解析，无需重启）。
 
 > 已在 web profile 里装过 `@hyzyn/dsh-all` 或根 bundle 时**不要**再 add 本包，否则插件行重复挂载，
@@ -558,6 +558,13 @@ HTTP `POST /api/dsh-docker/config` 是卡片的写入通道，只接受下表这
 非本机请求一律 403 `forbidden: loopback-only`。请求体上限 1MB，响应统一 `application/json` +
 `referrer-policy: no-referrer`。
 
+**反代 / 另一台机器访问下不可用**：非本机请求一律 403 `forbidden: loopback-only`——这是刻意的，
+这些路由里包含变更与执行面（docker 的 stop / remove / exec），不开放给远程会话（评估与取舍见 [ROADMAP.md](../../ROADMAP.md)
+第 5 项 § 5.4）。需要从另一台机器用这块面板时走 **SSH 隧道**：`ssh -L 3080:127.0.0.1:3080 <host>`，
+浏览器打开 `http://localhost:3080`——宿主侧看到的来源是回环、Host 是 `localhost`，围栏直接放行，
+会话 cookie 也按该 authority 铸造。
+
+
 **除 loopback 之外还有一道「同源证明」**：四条 SSE（`/logs/stream`、`/stats/stream`、`/events/stream`、
 `/images/pull/stream`）与全部写子路由（`/action`、`/images/remove|prune`、`/networks/remove|prune`、
 `/volumes/remove|prune`、`/exec`、`/elevate`（含 `/elevate/status`、`/elevate/revoke`）、`/connect-local`）要求请求带 `Origin: <同源>` 或

package/client-src/docker.css

@@ -120,47 +120,79 @@
 
 /* ============================ 侧边栏入口 ============================ */
 
+/*
+ * 入口与宿主面板行（`.panelRow`）**同规格**：入口住在宿主的面板导航里、紧跟固定面板
+ * 「插件」，与「插件 / 插件市场 / …」并排出现，差一个字号或一个灰度都看得出来。
+ *
+ * 取值一律跟着宿主走、不抄数字：`font: inherit` 拿宿主侧栏字号（14px）、
+ * `color: inherit` 拿 `.root` 的主文字色、行内边距与标签间距取宿主的 `--dsh-sidebar-*`
+ * 几何契约、圆角走 radius token、悬停底色用宿主侧栏自己在用的
+ * `--dsw-alias-interactive-bg-hover`、键盘焦点走宿主的全局焦点环令牌。
+ *
+ * 只有「上下内边距 / 最小行高」宿主没暴露令牌（rc.1 是 7px/36px、rc.2 是 5px/32px），
+ * 这里给 rc.2 的兜底值。
+ *
+ * 宿主无全局 box-sizing reset：`box-sizing` 必须显式声明，否则 width:100% + 左右 padding
+ * 在 content-box 下比容器宽，右侧被侧边栏裁掉（hover 底色缺一角）。
+ */
 [data-dsh-docker-entry] {
   position: relative;
-  /* 与 tty 侧边栏入口同因：宿主无全局 box-sizing reset，width:100% + 左右 padding
-     在 content-box 下会比容器宽 24px，多出的右侧会被侧边栏裁掉（hover 底色缺一角）。 */
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: var(--dk-gap-md);
+  gap: var(--dsh-sidebar-label-gap, 6px);
   width: 100%;
   min-width: 0;
-  height: var(--dk-h-lg);
-  padding: 0 var(--dk-gap-lg);
-  border-radius: var(--dk-r-md);
-  color: var(--dk-label-2);
-  font-size: 13px;
-  line-height: 20px;
+  min-height: 32px;
+  padding: 5px calc(var(--dsh-sidebar-row-padding, 12px) - var(--dsh-sidebar-paint-inset, 3px));
+  border: none;
+  border-inline: var(--dsh-sidebar-paint-inset, 3px) solid transparent;
+  border-radius: var(--dsw-radius-md);
+  background: 0 0;
+  background-clip: padding-box;
+  color: inherit;
+  font: inherit;
+  line-height: 22px;
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
-  transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease);
+  transition: background-color var(--dk-dur) var(--dk-ease);
 }
 
 [data-dsh-docker-entry]:hover {
-  background: var(--dk-hover);
-  color: var(--dk-label);
+  background-color: var(--dk-hover);
 }
 
 [data-dsh-docker-entry]:focus-visible {
-  outline: none;
-  box-shadow: var(--dk-ring);
+  /* 单行写：client-lint 的变量名扫描按行取名字，折行会把变量名截断成不存在的名字。 */
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
 }
 
+/*
+ * 图标：宿主宽态面板行是 16px（`sidebar.panel.icon` 的 size），折叠 rail 是 18px。
+ *
+ * 笔画按**宿主的图标口径**覆盖成 1：宿主面板图标是 sprite symbol（`viewBox 16` +
+ * `stroke-width="1"`），渲染 16px 时实际笔画 1.0px；`ICON_BOX` 是按 18px 设计的（写了 1.5），
+ * 直接塞进 16px 的行里会比邻居粗半档——2026-11-14 真机实测 1.5px vs 宿主 1.0px。
+ * 只覆盖入口内的实例，图标常量本身不动（面板头部那枚仍按自己的尺寸用）。
+ */
 .dk_entryIcon {
+  flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   color: currentColor;
 }
 
+.dk_entryIcon svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 1;
+}
+
 .dk_entryLabel {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -168,14 +200,21 @@
 }
 
 /* 侧边栏折叠（DSH 外壳在祖先元素上打 data-sidebar-collapsed）：只留图标，
-   与 tty 的终端入口同形——否则标签会从窄栏里溢出一条竖条 */
+   与 tty 的终端入口同形——否则标签会从窄栏里溢出一条竖条。
+   宿主的 `.collapsed .panelRow` 是 36×36、居中、无左右描边，跟齐。 */
 [data-sidebar-collapsed] [data-dsh-docker-entry] {
   justify-content: center;
   width: 100%;
-  /* 折叠 rail 里宿主的行是 36×36，跟齐（与 tty 入口一致） */
-  height: 36px;
+  min-height: 36px;
   padding: 0;
   margin: 0;
+  border-inline: 0;
+}
+
+[data-sidebar-collapsed] .dk_entryIcon,
+[data-sidebar-collapsed] .dk_entryIcon svg {
+  width: 18px;
+  height: 18px;
 }
 
 [data-sidebar-collapsed] .dk_entryLabel {

package/client-src/index.js

@@ -1685,6 +1685,16 @@ function sessionHostOf(spec, bookName, liveTarget) {
 
 const ICON_BOX =
   '<svg viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.8l5.4 3.1v6.2L8 14.2 2.6 11.1V4.9z"/><path d="M2.6 4.9L8 8l5.4-3.1"/><path d="M8 8v6.2"/></svg>'
+/**
+ * 侧栏入口专用图标：按**宿主的 16 格**画（墨迹 2.5~13.5、笔画 1）。
+ *
+ * 为什么不复用 `ICON_BOX`：那枚按 18px 设计（笔画 1.5、墨迹只占 2.6~13.4），塞进 16px 的行里
+ * 墨迹比宿主邻居小一圈——真机并排时像「左边距不对」（2026-11-14 实测）。面板头部与连接栏
+ * 仍用 `ICON_BOX` / `ICON_BOX_SM`，它们在那儿有自己的尺寸。
+ */
+const ICON_BOX_ENTRY =
+  '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.5 14.3 5.2v5.6L8 14.5 1.7 10.8V5.2z"/><path d="M1.7 5.2 8 8.85l6.3-3.65"/><path d="M8 8.85v5.65"/></svg>'
+
 /** 连接栏按钮用的 13px 版本（与 tty 的 SFTP / 隧道按钮同尺寸）。 */
 const ICON_BOX_SM =
   '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.8l5.4 3.1v6.2L8 14.2 2.6 11.1V4.9z"/><path d="M2.6 4.9L8 8l5.4-3.1"/><path d="M8 8v6.2"/></svg>'
@@ -10418,14 +10428,69 @@ window.__ModuleLoader__.load({
       return undefined
     }
 
+    /**
+     * kit 家族在宿主面板导航里的次序：小的在前。
+     *
+     * 四条入口由四个插件各挂各的、加载顺序不定，所以先后不能靠「谁先插」——按下表的值
+     * 互相让位（见 `placeInPanelNav`）：今日值得读 < 全局搜索 < 终端 < 容器。
+     */
+    const KIT_SIDEBAR_RANK = 40
+    const KIT_ENTRY = '[data-dsh-kit-sidebar-rank]'
+
+    /**
+     * 宿主的面板导航：从宿主的**面板行**（`.panelRow`，类名带 hash 前缀，只能子串匹配）
+     * 往上找它所在的 `nav`。
+     *
+     * 为什么不再挂顶层：入口原先插在侧栏 root 的直接子级（logo 行之后），于是四条入口顶在
+     * 侧栏最上面、与宿主的「插件 / 插件市场 / …」分成两段。宿主把面板行渲染在侧栏滚动区里的
+     * `nav` 中，**不是 root 的直接子元素**——只看 `root.children` 会找不到。
+     */
+    function panelNavOf(rootNode, entry) {
+      for (const row of rootNode.querySelectorAll('[class*="panelRow"]')) {
+        if (!(row instanceof HTMLElement)) continue
+        if (row === entry || row.contains(entry)) continue
+        if (row.matches(KIT_ENTRY) || row.querySelector(KIT_ENTRY) !== null) continue
+        const nav = row.closest('nav')
+        if (nav !== null && nav.contains(row)) return nav
+      }
+      return undefined
+    }
+
+    /**
+     * 插进宿主面板导航：紧跟固定面板「插件」（宿主 `FIXED_PANEL_ID='plugins'`，order 0、
+     * 永不折叠，所以它总是第一行）。同族按 rank 让位，加载顺序变了也不会颠倒；只在**位置
+     * 不对**时才动 DOM（宿主重渲染后由 MutationObserver 叫回来，位置对就不做事，免得自激）。
+     */
+    function placeInPanelNav(rootNode, entry) {
+      const nav = panelNavOf(rootNode, entry)
+      if (nav === undefined) return false
+      const row = nav.querySelector('[class*="panelRow"]')
+      if (row === null) return false
+      const wrapper = row.closest('[class*="panelEntry"]')
+      const anchorRow = wrapper !== null && wrapper.parentElement === nav ? wrapper : row
+      if (anchorRow.parentElement !== nav) return false
+      let after = anchorRow
+      for (const node of nav.children) {
+        if (!(node instanceof HTMLElement) || node === entry) continue
+        if (!node.matches(KIT_ENTRY)) continue
+        const rank = Number(node.getAttribute('data-dsh-kit-sidebar-rank'))
+        if (Number.isFinite(rank) && rank < KIT_SIDEBAR_RANK) after = node
+      }
+      if (entry.parentElement !== nav || entry.previousElementSibling !== after) {
+        nav.insertBefore(entry, after.nextSibling)
+      }
+      return true
+    }
+
     function createSidebarEntry() {
       const entry = document.createElement('div')
       entry.dataset.dshDockerEntry = ''
+      entry.dataset.dshKitSidebarRank = String(KIT_SIDEBAR_RANK)
       entry.className = 'dk_sidebarEntry'
       entry.setAttribute('role', 'button')
       entry.setAttribute('aria-label', t('panel.containers'))
       entry.innerHTML =
-        '<span class="dk_entryIcon">' + ICON_BOX + '</span>' +
+        '<span class="dk_entryIcon">' + ICON_BOX_ENTRY + '</span>' +
         '<span class="dk_entryLabel">' + t('panel.containers') + '</span>'
       entry.addEventListener('click', (event) => {
         event.preventDefault()
@@ -10435,6 +10500,8 @@ window.__ModuleLoader__.load({
     }
 
     function placeSidebarEntry(rootNode, entry) {
+      if (placeInPanelNav(rootNode, entry)) return true
+      // 宿主没有面板导航（老版本 / 版式换过一轮）：退回顶层紧接 logo 行，入口不消失。
       const button = newSessionButton(rootNode)
       if (button === undefined) return false
       if (entry.parentElement !== rootNode) {
@@ -10487,7 +10554,10 @@ window.__ModuleLoader__.load({
           tryPlace()
           return
         }
-        if (!rootNode.contains(entry)) placed = placeSidebarEntry(rootNode, entry)
+        // 位置也要复核：入口现在住在宿主的面板 `nav` 里，宿主重渲染可能把它挤到别处
+        // （`rootNode.contains` 仍为真，只看「还在不在」会漏掉被挪走那一档）。
+        // `placeSidebarEntry` 只在位置不对时动 DOM，所以这里不会自己触发自己。
+        placed = placeSidebarEntry(rootNode, entry)
       })
 
       tryPlace()