@hyzyn/dsh-docker 0.10.0 → 0.12.0

package/client-src/index.js

@@ -62,10 +62,11 @@ const I18N_ZH = {
   'status.restarting': '重启中',
   'status.removing': '删除中',
   'status.unknown': '未知',
-  'hint.pickMaxLocal': '最多 {max} 个容器，浏览器并发长连接有限制',
-  'hint.pickMaxSsh': '最多 {max} 个容器（SSH 目标上一条连接要同时装实时流与刷新等短命令）',
-  'hint.pickMany': '连接数较多，浏览器并发长连接有限制',
+  'hint.pickMaxLocal': '最多 {max} 个容器——再多会占满浏览器的同源连接，整个页面都会卡',
+  'hint.pickMaxSsh': '最多 {max} 个容器——再多会占满浏览器的同源连接，整个页面都会卡',
+  'hint.pickMany': '已接近上限，再选下去整个页面会变卡',
   'hint.pickAtLeastTwo': '至少选择 2 个容器',
+  'hint.pickBudget': '浏览器每个站点最多同时保持 4 条实时流（含活动条的事件流），再多页面就会卡住',
   'option.presetAll': '全部可见',
   'status.unhealthy': '不健康',
   'status.attention': '需关注',
@@ -361,7 +362,8 @@ const I18N_ZH = {
   'status.backToListRefresh': '，列表回到 AUTO REFRESH / 手动刷新；活动条上点「重连」可重新订阅',
   'btn.reconnectEvents': '重连',
   'hint.reconnectEvents': '重新打开容器事件流（docker events）；列表刷新按钮也会一并重连',
-  'hint.eventsClosedNoAuto': '事件流断开后不会自己回来（EventSource 只在连接层抖动时自愈；docker events 进程退出属于终止态）——点它重连，或点右上角刷新列表',
+  'hint.eventsClosedNoAuto': '不会自动恢复，点「重连」',
+  'hint.eventsReconnectRefused': '重连被拒：{message}',
   'hint.conversationHidden': ' · 会话在面板后面：关掉或最小化面板/终端即可看到',
   'msg.copied': '已复制：',
   'error.copyManual': '复制失败，请手动执行：',
@@ -481,7 +483,9 @@ const I18N_ZH = {
   'field.execTimeout': 'exec 超时（秒）',
   'section.capabilities': '能力开关（默认关闭）',
   'check.allowMutations': '允许变更操作（容器启停删、镜像拉取 / 删除 / 清理）',
-  'check.allowExec': '允许 exec（在容器内执行命令）',
+  // 限定到「一次性」通道：旧文案「（在容器内执行命令）」会被读成「exec 整体要授权」，
+  // 而卡片「终端」按钮的 docker exec -it 不受它管（D163）。设置卡片是用户第一眼看到的地方。
+  'check.allowExec': '允许一次性 exec（面板命令框与 docker_exec；交互式进容器不由它管）',
   'hint.socketRoot': 'docker socket 等价于目标主机的 root 权限。开启后，浏览器面板与 agent 都能执行对应操作，请只在可信环境下打开。',
   'hint.capabilityNotGranted': '⚠ 宿主尚未授权：这两个开关现在打不开，点它会给出一条就地确认的命令（免重启）。关掉它们随时可用。',
   'badge.notEffective': '未生效：未获宿主授权',
@@ -549,10 +553,11 @@ const I18N_EN = {
   'status.restarting': 'Restarting',
   'status.removing': 'Removing',
   'status.unknown': 'Unknown',
-  'hint.pickMaxLocal': 'At most {max} containers; browsers limit concurrent long-lived connections',
-  'hint.pickMaxSsh': 'At most {max} containers (a single SSH connection must also carry live streams and short refresh commands)',
-  'hint.pickMany': 'Many streams — browsers limit concurrent long-lived connections',
+  'hint.pickMaxLocal': 'At most {max} containers — more would exhaust the browser\'s per-origin connections and stall the whole page',
+  'hint.pickMaxSsh': 'At most {max} containers — more would exhaust the browser\'s per-origin connections and stall the whole page',
+  'hint.pickMany': 'Close to the limit — selecting more will slow the whole page down',
   'hint.pickAtLeastTwo': 'Select at least 2 containers',
+  'hint.pickBudget': 'A browser keeps at most 4 live streams per origin (including the Activity strip\'s event stream); more will stall the page',
   'option.presetAll': 'All visible',
   'status.unhealthy': 'Unhealthy',
   'status.attention': 'Needs attention',
@@ -848,7 +853,8 @@ const I18N_EN = {
   'status.backToListRefresh': ', the list returns to AUTO REFRESH / manual refresh; hit “Reconnect” on the activity bar to resubscribe',
   'btn.reconnectEvents': 'Reconnect',
   'hint.reconnectEvents': 'Reopen the container event stream (docker events); the list refresh button reconnects it too',
-  'hint.eventsClosedNoAuto': 'A closed event stream does not come back on its own (EventSource only self-heals connection blips; the docker events process exiting is terminal) — click to reconnect, or hit refresh in the top right',
+  'hint.eventsClosedNoAuto': 'Will not recover on its own — click Reconnect',
+  'hint.eventsReconnectRefused': 'Reconnect refused: {message}',
   'hint.conversationHidden': ' · the session is behind this panel: close or minimise the panel/terminal to see it',
   'msg.copied': 'Copied: ',
   'error.copyManual': 'Copy failed, run it manually: ',
@@ -968,7 +974,7 @@ const I18N_EN = {
   'field.execTimeout': 'exec timeout (seconds)',
   'section.capabilities': 'Capability switches (off by default)',
   'check.allowMutations': 'Allow changes (start/stop/remove containers, pull / remove / prune images)',
-  'check.allowExec': 'Allow exec (run commands inside containers)',
+  'check.allowExec': 'Allow one-shot exec (panel command box and docker_exec; interactive container access is not gated by it)',
   'hint.socketRoot': 'The docker socket is equivalent to root on the target host. Once enabled, both the browser panel and the agent can run these operations — only turn it on in a trusted environment.',
   'hint.capabilityNotGranted': '⚠ Not granted by the host: these two switches cannot be turned on right now — clicking one gives you a command to confirm in place (no restart). Turning them off always works.',
   'badge.notEffective': 'Not effective: not granted by the host',
@@ -1553,17 +1559,42 @@ const ICON_VOLUME =
  * 不进 settings，也不新增任何服务端字段，刷新后按 id 对账即可。
  */
 
-/** 超过这个数就给「浏览器并发长连接有限制」的软提示（仍可聚合）。 */
-const PICK_SOFT_MAX = 6
-/** 硬上限：再多就置灰——同源长连接排队后，聚合流反而会「看起来卡住」。 */
-const PICK_MAX = 8
+/*
+ * 浏览器**同源并发连接**预算（D165，2026-10-08 实测）。
+ *
+ * 为什么这是硬约束而不是「性能建议」：宿主是 **HTTP/1.1**（没有 h2 多路复用），浏览器对
+ * 每个源只放这么多条 TCP；而**每条 EventSource 独占一条连接、且永不主动释放**。吃满之后
+ * 同一个页面里**所有**普通请求（`/api/*`、列表刷新、会话加载……）全部排队——用户看到的是
+ * 「整个 DSH 页面卡住」，不只是 docker 面板。
+ *
+ * 实测（真 Chrome + test profile 宿主，页内连打 10 次普通请求、2s 超时）：
+ *   常驻流 4 条 → 6/6 成功、中位 29ms；常驻流 5 条 → **0/6 全部超时**。
+ * 宿主侧同时刻实测 41ms（进程外请求正常）——**堵在浏览器，不在宿主**。
+ * 所以预算是 4 条常驻流，且要**连同事件流一起算**：面板停在容器页时事件流恒开
+ * （见下方 events effect），聚合日志只能用掉剩下的 3 条。
+ *
+ * 这个数**不是猜的**，是量出来的；改它之前请重跑那组实验（README「已知限制」有复现步骤）。
+ */
+const SAME_ORIGIN_STREAM_BUDGET = 4
+/** 容器页常开的那条事件流（活动条）。它在预算里，不能被聚合日志挤掉。 */
+const RESERVED_STREAMS = 1
+/** 聚合日志可达的硬上限 = 预算 − 事件流。 */
+const PICK_MAX = SAME_ORIGIN_STREAM_BUDGET - RESERVED_STREAMS
 /**
- * SSH 目标的硬上限：一个目标只维持**一条** TCP 连接，通道额度（OpenSSH `MaxSessions`
- * 默认 10）要同时装下聚合流、统计流、事件流与「刷新列表」这类短命令。留出余量之后
- * 聚合最多 6 条——正好等于软提示线，于是 SSH 上不再有「可点但已偏多」的区间。
- * 本地目标走子进程，没有这个约束，仍是 {@link PICK_MAX}。
+ * 超过这个数就给软提示（仍可聚合）。
+ *
+ * 与硬上限之间刻意**留一档**：硬上限是「再点就连页面都卡」的红线，而用户在 3 条时
+ * 已经在消耗大部分预算——给一句提醒，但不禁用。
  */
-const PICK_MAX_SSH = 6
+const PICK_SOFT_MAX = 2
+/**
+ * SSH 目标为什么不再单独降一档：真正卡住页面的是**浏览器同源预算**（上面那条，与目标
+ * 类型无关），而不是 SSH 的 `MaxSessions`。旧代码把上限按「SSH 要同时装实时流与短命令」
+ * 设成 6——那条例由针对的是**宿主侧**通道额度，与浏览器这一层是两笔独立的账，写成同一个
+ * 数字正好把两者都算错（6 > 实测安全值）。现在两者各归各：浏览器预算管上限，
+ * `MaxSessions` 由宿主侧的 `MAX_STREAMS_PER_TARGET` 管。
+ */
+const PICK_MAX_SSH = PICK_MAX
 
 /**
  * 目标下拉里要不要列「＋ 连接本机」那一项。
@@ -1628,8 +1659,8 @@ function pickReconcile(ids, containers) {
 
 /**
  * 「按条件一键选择」的预设（0.15.0）。
- * 为什么需要：跨 30+ 容器里挑 4 个不健康的，手动点既慢又容易漏；而聚合日志的上限是
- * 8 条流，所以条件选择必须能**按上限截断并如实告知略过了几个**。
+ * 为什么需要：跨 30+ 容器里挑几个不健康的，手动点既慢又容易漏；而聚合日志有上限
+ * （见 {@link PICK_MAX}），所以条件选择必须能**按上限截断并如实告知略过了几个**。
  * `needsBase` 的项要先有勾选（拿第一个勾选的容器当基准：同镜像 / 同项目）。
  */
 const PICK_PRESETS = [
@@ -1967,6 +1998,36 @@ function canReconnectEvents(status) {
   return status === 'closed'
 }
 
+/**
+ * 从事件流的 `error` 事件里解出**服务端给的原因**（D164）。
+ *
+ * 为什么必须解出来：这条流的 `event: error` 带着 data 时（服务端主动拒绝 / 收尾），原文案
+ * 是宿主侧唯一一句可执行的话——例如长流配额满时的「关掉部分实时跟随、把聚合容器数减到 6 个
+ * 以内」。老代码把它整个丢掉、只置 `closed`，于是**点「重连」看起来毫无反应**：拒绝 →
+ * 状态回 `closed` → 界面与点击前逐像素相同，用户只能反复点。统计流一直是对的
+ * （`setStatsError(message)`），这里补齐同一套语义。
+ *
+ * 连接层错误（无 data 的普通 Event）不是「服务端说了什么」，返回空串——那种情况
+ * EventSource 会自己重连，不该冒充成一次被拒绝的重连。
+ *
+ * 抽成纯函数而不是写在组件闭包里：离线冒烟的 React 桩把 `useState` 冻在初值，组件里
+ * 遍历渲染树取不到真实调用结果，判定必须能直接驱动（与 canReconnectEvents 同一个理由）。
+ */
+function eventsErrorMessage(raw) {
+  if (raw === null || raw === undefined) return ''
+  const data = raw.data
+  if (typeof data !== 'string' || data === '') return ''
+  try {
+    const payload = JSON.parse(data)
+    if (payload !== null && typeof payload === 'object' && typeof payload.message === 'string') {
+      return payload.message
+    }
+  } catch {
+    /* 畸形载荷：按「没有可读原因」处理，不要拿半截 JSON 当文案 */
+  }
+  return data
+}
+
 /** 新事件放最前（活动条按时间倒序读），超出上限丢最旧。 */
 function pushEvent(list, event, limit) {
   const next = [event, ...list]
@@ -5480,6 +5541,19 @@ window.__ModuleLoader__.load({
        * `unsupported` 刻意不给这个按钮：那个环境根本没有 EventSource，重连必然还是失败。
        */
       const canReconnect = canReconnectEvents(props.status)
+      /*
+       * 断开时右侧那句提示（D164）：**被拒过就优先说原因**。「事件流已断开」只说状态，
+       * 用户据此以为点一下就好；而真正拦着重连的是服务端那句话（例如长流配额满），
+       * 不显示出来，「重连」按钮点多少次都像假的。
+       *
+       * 文案要**短**（2026-10-08 用户反馈「啰嗦又生硬」）：这里是折叠头右侧的单行小字，
+       * 长句会挤成多行墙。状态行左边已经写着「事件流已断开」，这句不再复述，
+       * 只说「不会自愈 + 点哪」；成因与上限写进 README，不塞进界面。
+       */
+      const refused = typeof props.refused === 'string' ? props.refused : ''
+      const hintText = canReconnect
+        ? (refused === '' ? t('hint.eventsClosedNoAuto') : t('hint.eventsReconnectRefused', { message: refused }))
+        : (events.length === 0 ? t('list.noEvents') : t('list.recentEvents', { recent: recent.length, total: events.length }))
       return jsxs('div', { className: 'dk_activity', 'data-open': open ? '1' : '0', children: [
         /*
          * 折叠按钮与「重连」是**兄弟**，不是嵌套——按钮里嵌按钮既不是合法 HTML，
@@ -5497,10 +5571,8 @@ window.__ModuleLoader__.load({
               jsx('span', { className: 'dk_activityState', 'data-state': props.status ?? '', children: props.statusText ?? '' }),
               jsx('span', { className: 'dk_headerSpacer' }),
               // 断开时右侧那句「暂无事件」是误导（不是「没动静」，是「听不见了」），
-              // 换成一句说明为什么需要手动重连
-              jsx('span', { className: 'dk_hint', children: canReconnect
-                ? t('hint.eventsClosedNoAuto')
-                : (events.length === 0 ? t('list.noEvents') : t('list.recentEvents', { recent: recent.length, total: events.length })) }),
+              // 换成一句说明为什么需要手动重连；**被拒过就改成说原因**（D164）
+              jsx('span', { className: 'dk_hint', children: hintText }),
               jsx('span', { className: 'dk_activityChevron', dangerouslySetInnerHTML: { __html: ICON_CHEVRON } }),
             ],
           }, 'head'),
@@ -5570,6 +5642,7 @@ window.__ModuleLoader__.load({
             onClick: props.onClear,
             children: t('btn.clear'),
           }, 'clear') : null,
+          props.budget === undefined ? null : jsx('span', { className: 'dk_hint dk_pickBudget', children: props.budget }),
           props.notice === '' ? null : jsx('span', { className: 'dk_hint dk_pickNotice', children: props.notice }),
         ] }) : null,
       ] })
@@ -5799,6 +5872,12 @@ window.__ModuleLoader__.load({
       /** 面板是否可见（S3）：折叠的 tab 不建流；模态 / dock 形态恒为 true。 */
       const active = usePanelActive()
       const [eventsStatus, setEventsStatus] = useState('')
+      /**
+       * 上一次被服务端**拒绝**的原因（D164）：配额满这类拒绝在界面上必须看得见，
+       * 否则「点重连 → 被拒 → 回到 closed」在视觉上与「点了没反应」不可区分。
+       * 重连**成功**时清空（那说明这个原因已经过去了）。
+       */
+      const [eventsRefused, setEventsRefused] = useState('')
       /**
        * 手动重连令牌（D160）：事件流断开后是**终止态**（EventSource 只在连接层抖动时自愈；
        * `docker events` 进程退出 / 服务端发 `end` 帧都会走 close()，之后没有东西会再开流）。
@@ -6458,6 +6537,9 @@ window.__ModuleLoader__.load({
          */
         let hadOpen = sameTarget && (eventsOpenedRef.current.opened || manualReconnect)
         setEventsStatus('connecting')
+        // 每次重新建流都先把上一条拒绝原因清掉（D164）：这是「又试了一次」，不是「一直坏着」；
+        // 若这次仍被拒，onError 会立刻把它写回来。
+        setEventsRefused('')
         const debounced = makeDebounced(EVENTS_REFRESH_DEBOUNCE_MS, () => {
           const load = loadContainersRef.current
           if (load !== null) load()
@@ -6486,8 +6568,15 @@ window.__ModuleLoader__.load({
           close()
         }
         const onError = (raw) => {
-          if (typeof raw.data === 'string' && raw.data !== '') {
+          /*
+           * 服务端主动说了原因（带 data 的 error 帧）：**显式收尾**，并把那句话留下来
+           * （D164）。老代码把它丢掉、只置 `closed`，于是「重连」点了看起来毫无反应——
+           * 拒绝 → 回 `closed` → 界面与点击前一样。统计流一直是读出 message 的。
+           */
+          const message = eventsErrorMessage(raw)
+          if (message !== '') {
             setEventsStatus('closed')
+            setEventsRefused(message)
             close()
             return
           }
@@ -6499,6 +6588,8 @@ window.__ModuleLoader__.load({
         es.addEventListener('error', onError)
         es.onopen = () => {
           setEventsStatus('open')
+          // 连上了就说明上次那条拒绝原因已经过去（D164）：留着会让人以为现在还坏着
+          setEventsRefused('')
           if (hadOpen) {
             // 重连补偿**不走事件驱动的那条防抖**（D93）：debounced 是 500ms 尾沿防抖，
             // 每条事件都 schedule() 一次；容器多 + healthcheck 时事件持续 >2 条/秒，
@@ -7340,6 +7431,9 @@ window.__ModuleLoader__.load({
               info: pickInfo,
               presets: pickPresetList,
               max: pickMax,
+              // 上限为什么是 3 得写在脸上（D165）：它是量出来的浏览器连接预算，
+              // 不写清楚，看起来就只是一个随手定的数字，用户只会觉得「怎么才 3 个」。
+              budget: t('hint.pickBudget'),
               notice: pickNotice,
               onPreset: applyPreset,
               onClear: () => { setPickedIds([]); setPickNotice('') },
@@ -7386,6 +7480,7 @@ window.__ModuleLoader__.load({
                   events,
                   status: eventsStatus,
                   statusText: eventsStatusText(),
+                  refused: eventsRefused,
                   open: activityOpen,
                   onToggle: () => setActivityOpen((value) => !value),
                   // 只重开事件流，不顺带刷列表：列表有自己的 ⟳ 与 AUTO REFRESH，
@@ -8682,8 +8777,11 @@ window.__ModuleLoader__.load({
     }
     exports.__pick = {
       MAX: PICK_MAX,
-      /** SSH 目标的上限（= MAX 之外更紧的一档）：一条连接要同时装实时流与短命令。 */
+      /** SSH 目标的上限（D165 后与本地同值：卡页面的是浏览器同源预算）。 */
       SSH_MAX: PICK_MAX_SSH,
+      /** 同源常驻流预算与其中留给事件流的名额（上限的推导依据，测试直接钉住）。 */
+      BUDGET: SAME_ORIGIN_STREAM_BUDGET,
+      RESERVED: RESERVED_STREAMS,
       PRESETS: PICK_PRESETS,
       presetCounts: pickPresetCounts,
       apply: pickApply,
@@ -8706,6 +8804,7 @@ window.__ModuleLoader__.load({
       timeText: eventTimeText,
       debounce: makeDebounced,
       canReconnect: canReconnectEvents,
+      errorMessage: eventsErrorMessage,
     }
     /*
      * 同一类测试缝：总览的折叠逻辑与**正文渲染**都是纯函数（正文刻意写成普通函数而不是