@hyzyn/dsh-docker 0.7.3 → 0.8.1

package/client-src/index.js

@@ -19,6 +19,8 @@
 import dockerCss from './docker.css'
 import { bookSessionHost, pickTargetByHost, sessionHostPort, staleBookRef } from './session-target.js'
 import { currentSessionIdOf } from './current-session.js'
+import { createLogBuffer, splitLogLines } from './log-buffer.js'
+import { subscribeLogStream, reconnectTail, LOG_RECONNECT_BASE_MS, LOG_RECONNECT_MAX_MS } from './log-stream.js'
 
 const API = '/api/dsh-docker'
 const PANEL_STYLE_ID = 'dsh-docker-style'
@@ -1312,7 +1314,11 @@ window.__ModuleLoader__.load({
           jsxs('div', { className: 'dk_cardRows', children: [
             jsx(CardRow, { label: '镜像', value: item.image }, 'image'),
             jsx(CardRow, { label: 'ID', value: item.shortId }, 'id'),
-            jsx(CardRow, { label: '端口', value: portsText(item.ports) }, 'ports'),
+            // host 网络容器在 ps 里没有端口映射：空值加说明，免得被读成「没暴露端口」（D131）
+            jsx(CardRow, {
+              label: '端口',
+              value: portsText(item.ports) + (item.ports.length === 0 && Array.isArray(item.networks) && item.networks.includes('host') ? '（host 网络：端口即宿主机端口）' : ''),
+            }, 'ports'),
             jsx(CardRow, { label: '创建', value: created }, 'created'),
             item.composeProject === null ? null : jsx(CardRow, { label: 'compose', value: item.composeProject + (item.composeService === null ? '' : '/' + item.composeService) }, 'compose'),
           ] }, 'rows'),
@@ -1342,17 +1348,43 @@ window.__ModuleLoader__.load({
      * ------------------------------------------------------------------ */
 
     /**
-     * 日志行前缀解析：时间戳与级别各自成 span，便于分级着色。两种常见格式都吃：
+     * 日志行前缀解析：时间戳与级别各自成 span，便于分级着色。三种常见格式都吃：
      *   `[INFO] [2026-09-09 18:05:52] ...`（级别在前）
+     *   `[INFO ] [2026-09-25 11:31:00] ...`（同上，但级别被 `%5p` 右填充到 5 字符）
      *   `16:11:34,150 |INFO in ...`（Spring Boot，时间戳在前、级别用竖线）
+     *
+     * 方括号里的 `\s*` 不是装饰：Logback / Spring 的 `%5p` 会把 INFO / WARN / DEBUG 右填充成
+     * `[INFO ]` / `[WARN ]`，而 ERROR / FATAL 恰好 5 字符不带空格。旧正则只认 `[INFO]`，
+     * 于是填充过的行全部判成「无级别」——分级着色丢掉，**级别门槛也整个失效**：
+     * `filterByLevelCore` 对未知级别走「不误杀」分支（rank=null 一律保留），
+     * 结果就是选了 WARN+ 仍能看到一屏 INFO。
      */
     const LOG_TS_RE = /^\s*(\[\d{4}-\d{2}-\d{2}[ T][0-9:.,]+\]|\d{2}:\d{2}:\d{2}[,.]\d{3})/
-    const LOG_LEVEL_RE = /^\s*(\[(?:TRACE|DEBUG|INFO|WARN|ERROR|FATAL)\]|\|\s*(?:TRACE|DEBUG|INFO|WARN|ERROR|FATAL))/
+    const LOG_LEVEL_RE = /^\s*(\[\s*(?:TRACE|DEBUG|INFO|WARN|ERROR|FATAL)\s*\]|\|\s*(?:TRACE|DEBUG|INFO|WARN|ERROR|FATAL))/
     const LOG_LEVEL_NAME_RE = /(TRACE|DEBUG|INFO|WARN|ERROR|FATAL)/
-    /** 着色行数上限：超大日志整篇着色会拖慢渲染，超出只对尾部着色。 */
-    const LOG_COLOR_LIMIT = 2000
-    /** FOLLOW 流式日志的环形缓冲上限：超出丢最旧并提示一次（防止长时间跟随吃内存）。 */
+    /**
+     * FOLLOW 流式日志的环形缓冲行数上限：超出丢最旧并提示一次（防止长时间跟随吃内存）。
+     *
+     * 显示**不再另设截断**：LINES 选多少就渲染/导出多少——真正的闸是这里的缓冲
+     * （行数 + 字节）与宿主的「输出上限（KB）」，再多加一层「只显示最近 N 行」只会
+     * 让 LINES 说了不算。行 key 用单调 id（见 log-buffer.js），窗口滑动只挂载/卸载
+     * 边界行，行数本身不再触发全量重绘。
+     */
     const FOLLOW_LINE_LIMIT = 5000
+    /**
+     * FOLLOW 缓冲的字节上限（UTF-16 unit 数）：旧实现只限行数，容器吐大行（整段
+     * JSON / base64 / 压平的堆栈）时 5000 行能吃掉数百 MB——这是「日志多 → 崩溃」
+     * 的内存根因之一。超限丢最旧，与行数上限共用同一套 dropped 提示。
+     */
+    const FOLLOW_BYTE_LIMIT = 4 * 1024 * 1024
+    /** 单条残行上限：无换行输出超此长度强制落为分片行（否则 pending 无界增长）。 */
+    const LOG_PENDING_MAX = 1024 * 1024
+    /**
+     * FOLLOW 合帧间隔：SSE chunk 到达速率与渲染频率解耦——缓冲照单全收，React
+     * 每 150ms 至多消费一次快照。打开 FOLLOW 时的 tail 突发（docker logs -f 先把
+     * 历史一口气吐完）从「几百次全量重渲染」变成「几次」。
+     */
+    const FOLLOW_FLUSH_MS = 150
 
     /*
      * 聚合视图的**每容器**初始行数。
@@ -1370,7 +1402,7 @@ window.__ModuleLoader__.load({
      * Compose 聚合日志共用同一套着色：聚合日志只需要在这几个片段前再插一个
      * `[service]` 前缀即可，不必复制一份正则与渲染逻辑。
      */
-    function renderLogParts(line, index, query) {
+    function renderLogParts(line, keyBase, query) {
       const nodes = []
       let rest = line
       // 最多吃掉两个前缀（时间戳 + 级别，顺序不限）
@@ -1390,16 +1422,20 @@ window.__ModuleLoader__.load({
         }
         break
       }
-      nodes.push(jsx('span', { className: 'dk_logText', children: highlight(rest, query, 'x' + String(index)) }, 'tx'))
+      nodes.push(jsx('span', { className: 'dk_logText', children: highlight(rest, query, 'x' + String(keyBase)) }, 'tx'))
       return nodes
     }
 
-    function renderLogLine(line, index, query) {
-      return jsxs('div', { className: 'dk_logLine', children: renderLogParts(line, index, query) }, String(index))
+    /**
+     * 行 key = 行的单调 id（D63 根治）：旧实现用渲染下标当 key，环形缓冲一滑动
+     * 每行内容全变 → 每帧全量 reconcile；id 稳定后窗口滑动只挂载/卸载边界行。
+     */
+    function renderLogLine(entry, query) {
+      return jsxs('div', { className: 'dk_logLine', children: renderLogParts(entry.text, entry.id, query) }, String(entry.id))
     }
 
     /** Compose 聚合日志行：在标准日志行前加一个 `[service]` 前缀。 */
-    function renderAggLine(entry, index, query, showTs) {
+    function renderAggLine(entry, query, showTs) {
       const ts = showTs === true && typeof entry.ts === 'number' && Number.isFinite(entry.ts)
         ? jsx('span', { className: 'dk_logTs', children: new Date(entry.ts).toLocaleTimeString() }, 'ts')
         : null
@@ -1411,9 +1447,9 @@ window.__ModuleLoader__.load({
         children: [
           jsx('span', { className: 'dk_logSvc', children: '[' + entry.service + ']' }, 'svc'),
           ts,
-          ...renderLogParts(entry.text, index, query),
+          ...renderLogParts(entry.text, entry.id, query),
         ],
-      }, String(index))
+      }, String(entry.id))
     }
 
     /* ------------------------------------------------------------------ *
@@ -1711,14 +1747,19 @@ window.__ModuleLoader__.load({
       menu.className = 'dk_menu'
       menu.setAttribute('role', 'menu')
 
-      const head = document.createElement('div')
-      head.className = 'dk_menuHead'
-      head.textContent = options.head
-      menu.appendChild(head)
-      const sub = document.createElement('div')
-      sub.className = 'dk_menuSub'
-      sub.textContent = options.sub
-      menu.appendChild(sub)
+      // head / sub / note 都可省：导出菜单只有两行选项，套一层标题+注解反而比菜单本身高
+      if (options.head !== undefined) {
+        const head = document.createElement('div')
+        head.className = 'dk_menuHead'
+        head.textContent = options.head
+        menu.appendChild(head)
+      }
+      if (options.sub !== undefined) {
+        const sub = document.createElement('div')
+        sub.className = 'dk_menuSub'
+        sub.textContent = options.sub
+        menu.appendChild(sub)
+      }
 
       for (const item of options.items) {
         const btn = document.createElement('button')
@@ -1741,10 +1782,12 @@ window.__ModuleLoader__.load({
         menu.appendChild(btn)
       }
 
-      const note = document.createElement('div')
-      note.className = 'dk_menuNote'
-      note.textContent = options.note
-      menu.appendChild(note)
+      if (options.note !== undefined) {
+        const note = document.createElement('div')
+        note.className = 'dk_menuNote'
+        note.textContent = options.note
+        menu.appendChild(note)
+      }
 
       document.body.appendChild(menu)
       placeFloating(menu, options.x, options.y)
@@ -1767,8 +1810,47 @@ window.__ModuleLoader__.load({
       }
     }
 
-    /* ---------------------- 投递 ---------------------- */
+    /**
+     * 日志导出：两个格式（`.log` / `.md`）与触发按钮文案的**唯一定义**，单容器日志与
+     * 聚合日志两个视图共用。
+     *
+     * 为什么收成一份：这两个视图已经因为「各写一套」栽过好几次（级别档位、过滤内核都
+     * 是这么对齐的）。格式集合、hint、按钮文案一旦分家，改一处忘一处，症状还很轻——
+     * 只是两个视图长得不一样，没人报 bug。
+     */
+    const LOG_EXPORT_LABEL = '⬇ 导出'
+    function exportMenuItems(onPick) {
+      return [
+        { label: '⬇ .log', hint: '纯文本，逐行原样', onPick: () => onPick('log') },
+        { label: '⬇ .md', hint: '带来源与行数表头，适合当工单附件', onPick: () => onPick('md') },
+      ]
+    }
+
+    /**
+     * 工具条上那个「导出」按钮的浮层菜单（D137）。
+     *
+     * 为什么合并：两个格式各占一个 chip，窄面板（或 docked / tab 承载）下 `.dk_filterBar`
+     * 一换行，`.md` 就被甩到第二行、把行数计数也带下去——工具条长成两行，视觉上像是
+     * 「布局坏了」。合成一个按钮后工具条少一格，两种格式仍在菜单里各有一项。
+     *
+     * 复用 openLogMenu：Esc / 点外部 / 滚轮 / 触摸 / resize 的关闭语义与右键菜单完全一致，
+     * 不另造一套。锚点取按钮自己的矩形（贴着下沿展开），越界由 placeFloating 夹回。
+     */
+    function openExportMenu(event, options) {
+      const target = event === null || event === undefined ? null : event.currentTarget
+      const rect = target !== null && target !== undefined && typeof target.getBoundingClientRect === 'function'
+        ? target.getBoundingClientRect()
+        : null
+      openLogMenu({
+        x: rect === null ? 0 : rect.left,
+        y: rect === null ? 0 : rect.bottom + 4,
+        head: '导出日志',
+        ...(options.sub === undefined ? {} : { sub: options.sub }),
+        items: exportMenuItems(options.onPick),
+      })
+    }
 
+    /* ---------------------- 投递 ---------------------- */
     /** 非安全上下文（远端 GUI 用 IP 访问）没有 navigator.clipboard，退回 textarea。 */
     function copyToClipboard(text) {
       if (navigator.clipboard !== undefined && navigator.clipboard !== null) {
@@ -1908,6 +1990,8 @@ window.__ModuleLoader__.load({
     function ContainerView(props) {
       const item = props.item
       const config = props.config
+      /** 宿主的单次输出字节上限（KB）：快照日志的第二个闸，文案里要说清是它截断的。 */
+      const outputCapKb = Number(config.maxOutputKb) || 0
       const [tab, setTab] = useState(props.initialTab ?? 'overview')
       /** 面板是否可见（S3）：折叠的 tab 不建流。模态 / dock 形态下恒为 true。 */
       const active = usePanelActive()
@@ -1926,10 +2010,13 @@ window.__ModuleLoader__.load({
       const [logIntervalSec, setLogIntervalSec] = useState(3)
       /*
        * 实时跟随（FOLLOW，docker logs -f → SSE）：
-       *   followLines 是环形缓冲（≤ FOLLOW_LINE_LIMIT 行），followPending 存
-       *   最后一段没等到 \n 的残行；followStatus 只表达连接状态（connecting /
-       *   open / reconnecting / closed），**连接错误不弹横幅**（EventSource 会
-       *   自动重连，弹一次就会刷屏），只有服务端 event:error 才进 followError。
+       *   followBuf 是环形缓冲（≤ FOLLOW_LINE_LIMIT 行且 ≤ FOLLOW_BYTE_LIMIT，
+       *   残行超 LOG_PENDING_MAX 强制分片，见 log-buffer.js），followLines 是它
+       *   按 FOLLOW_FLUSH_MS **合帧**后的快照——渲染频率与 chunk 速率解耦（D63
+       *   根治：旧实现逐 chunk setState，tail 突发即几百次全量重渲染）。
+       *   followStatus 只表达连接状态（connecting / open / reconnecting / closed），
+       *   **连接错误不弹横幅**（EventSource 会自动重连，弹一次就会刷屏），只有
+       *   服务端 event:error 才进 followError。
        */
       const [follow, setFollow] = useState(false)
       const [followLines, setFollowLines] = useState([])
@@ -1938,8 +2025,37 @@ window.__ModuleLoader__.load({
       const [followNotice, setFollowNotice] = useState('')
       const [followDropped, setFollowDropped] = useState(false)
       const [followAtBottom, setFollowAtBottom] = useState(true)
-      const followLinesRef = useRef([])
-      const followPendingRef = useRef('')
+      const followBufRef = useRef(null)
+      const followDirtyRef = useRef(false)
+      const followTimerRef = useRef(null)
+
+      /** 合帧落地：把缓冲快照交给 React；期间的淘汰只提示一次（dropped 读后清零）。 */
+      const flushFollow = () => {
+        followTimerRef.current = null
+        if (!followDirtyRef.current) return
+        followDirtyRef.current = false
+        const buffer = followBufRef.current
+        if (buffer === null) return
+        setFollowLines(buffer.snapshot())
+        if (buffer.takeDropped()) setFollowDropped(true)
+      }
+
+      /** 有完整新行才排渲染；残行增长不打扰 React（旧版逐 chunk setState 的病根）。 */
+      const scheduleFollowFlush = () => {
+        followDirtyRef.current = true
+        if (followTimerRef.current === null) {
+          followTimerRef.current = setTimeout(flushFollow, FOLLOW_FLUSH_MS)
+        }
+      }
+
+      /** 关流 / 切快照前收掉合帧：别让迟到的一次 flush 在切换后再动 state。 */
+      const cancelFollowFlush = () => {
+        followDirtyRef.current = false
+        if (followTimerRef.current !== null) {
+          clearTimeout(followTimerRef.current)
+          followTimerRef.current = null
+        }
+      }
       const logBodyRef = useRef(null)
       const [stats, setStats] = useState(null)
       const [statsError, setStatsError] = useState('')
@@ -2022,8 +2138,8 @@ window.__ModuleLoader__.load({
           return undefined
         }
         // 每次重开流都从空缓冲开始，避免把上一次的行混进来
-        followLinesRef.current = []
-        followPendingRef.current = ''
+        followBufRef.current = createLogBuffer({ maxLines: FOLLOW_LINE_LIMIT, maxBytes: FOLLOW_BYTE_LIMIT, maxPendingBytes: LOG_PENDING_MAX })
+        cancelFollowFlush()
         setFollowLines([])
         setFollowDropped(false)
         setFollowError('')
@@ -2031,86 +2147,70 @@ window.__ModuleLoader__.load({
         setFollowAtBottom(true)
         setFollowStatus('connecting')
 
-        const params = new URLSearchParams({
-          target: props.target,
-          id: item.id,
-          tail: String(logOptions.tail),
-          ...(logOptions.timestamps ? { timestamps: '1' } : {}),
-        })
-        const es = new EventSource(API + '/logs/stream?' + params.toString())
-        let closed = false
-        const close = () => {
-          if (closed) return
-          closed = true
-          try { es.close() } catch { /* 已关闭 */ }
-        }
-
-        /** 分片 → 完整行：docker 的 chunk 不按行切，末段残行留给下一片。 */
+        /**
+         * 分片 → 完整行：docker 的 chunk 不按行切，末段残行留给下一片。
+         * 切分/淘汰都在缓冲里做，这里只负责「有新行 → 排一次合帧」。
+         */
         const pushChunk = (text) => {
           if (text === '') return
-          const parts = (followPendingRef.current + text).split('\n')
-          followPendingRef.current = parts.pop() ?? ''
-          if (parts.length === 0) return
-          const next = followLinesRef.current.concat(parts)
-          const trimmed = next.length > FOLLOW_LINE_LIMIT ? next.slice(next.length - FOLLOW_LINE_LIMIT) : next
-          followLinesRef.current = trimmed
-          if (trimmed.length !== next.length) setFollowDropped(true)
-          setFollowLines(trimmed)
-        }
-
-        const onLine = (event) => {
-          let payload = null
-          try { payload = JSON.parse(event.data) } catch { return }
-          if (payload === null || typeof payload !== 'object') return
-          if (typeof payload.d === 'string') pushChunk(payload.d)
-          else if (typeof payload.e === 'string') pushChunk(payload.e)
-        }
-
-        const onEnd = (event) => {
-          let payload = null
-          try { payload = JSON.parse(event.data) } catch { /* 畸形载荷按容器退出处理 */ }
-          const reason = payload !== null && typeof payload.reason === 'string' ? payload.reason : 'container-exit'
-          const code = payload !== null && typeof payload.code === 'number' ? payload.code : null
-          if (reason === 'container-exit') {
-            // 容器停止 → docker logs -f 自然退出：关流、切回快照并立即补一次刷新
-            setFollowNotice('容器已退出' + (code === null ? '' : '（退出码 ' + String(code) + '）') + '，日志流结束，已切回快照')
-            close()
-            setFollow(false)
-            loadLogs()
-            return
-          }
-          // 服务端主动停流（插件禁用 / 配置热更新）：交给 EventSource 自动重连
-          setFollowStatus('reconnecting')
-          setFollowNotice('服务端已停止日志流，正在重连…')
+          const result = followBufRef.current.pushChunk(text)
+          if (result.appended > 0) scheduleFollowFlush()
         }
 
-        const onError = (event) => {
-          // 服务端 event:error 是带 data 的 MessageEvent；连接层错误是普通 Event
-          if (typeof event.data === 'string' && event.data !== '') {
-            let message = '日志流异常'
-            try {
-              const payload = JSON.parse(event.data)
-              if (payload !== null && typeof payload.message === 'string') message = payload.message
-            } catch { /* 用默认文案 */ }
+        /** 订阅句柄：onEnd 里要能关掉自己，而它在 subscribeLogStream 返回之前就已定义。 */
+        let subscription = null
+        /*
+         * 断线重连交给 subscribeLogStream（D133）：首连带 tail 补历史，**重连带
+         * tail=0** 只补新行。EventSource 自带的自动重连会复用带 tail 的 URL —— 服务端
+         * 把最后 tail 行当新行再推一遍，客户端就会重复回填（还会挤掉真正的历史）。
+         */
+        subscription = subscribeLogStream({
+          buildUrl: (tailNow) => streamUrl('/logs/stream', {
+            target: props.target,
+            id: item.id,
+            tail: String(tailNow),
+            ...(logOptions.timestamps ? { timestamps: '1' } : {}),
+          }),
+          tail: logOptions.tail,
+          onStatus: (status) => {
+            if (status === 'open') setFollowNotice('')
+            setFollowStatus(status)
+          },
+          onLine: pushChunk,
+          onEnd: (payload, controls) => {
+            const reason = payload !== null && typeof payload.reason === 'string' ? payload.reason : 'container-exit'
+            const code = payload !== null && typeof payload.code === 'number' ? payload.code : null
+            if (reason === 'container-exit') {
+              // 容器停止 → docker logs -f 自然退出：关流、切回快照并立即补一次刷新
+              setFollowNotice('容器已退出' + (code === null ? '' : '（退出码 ' + String(code) + '）') + '，日志流结束，已切回快照')
+              subscription?.close()
+              cancelFollowFlush()
+              setFollow(false)
+              loadLogs()
+              return
+            }
+            if (reason === 'output-limit') {
+              // 宿主侧背压队列溢出（推送快过浏览器消费）：不是容器的问题，重连即可
+              setFollowNotice('主机侧日志积压超出上限（推送速度超过浏览器消费速度），已断开并重连；重连只补新行，不重复历史')
+              controls.reconnect()
+              return
+            }
+            // 服务端主动停流（插件禁用 / 配置热更新）：重连也会补新行
+            setFollowNotice('服务端已停止日志流，正在重连…')
+            controls.reconnect()
+          },
+          onError: (message) => {
             setFollowError(message)
-            close()
+            subscription?.close()
+            cancelFollowFlush()
             setFollow(false)
             loadLogs()
-            return
-          }
-          // 连接层错误：浏览器按 EventSource 语义自动重连，这里只更新状态，
-          // 不弹错误横幅（否则每次重试都会刷一条）
-          setFollowStatus(es.readyState === 2 ? 'closed' : 'reconnecting')
-        }
-
-        es.addEventListener('line', onLine)
-        es.addEventListener('end', onEnd)
-        es.addEventListener('error', onError)
-        es.onopen = () => {
-          setFollowStatus('open')
-          setFollowNotice('')
+          },
+        })
+        return () => {
+          subscription?.close()
+          cancelFollowFlush()
         }
-        return close
         // active 必须在 deps 里（D17）：折叠 tab / 切走会话时收掉 SSE，否则
         // `docker logs -f` 会一直占着共享的 SSH 通道额度——与 S3 的设计意图相反
       }, [active, tab, follow, props.target, item.id, logOptions.tail, logOptions.timestamps, loadLogs])
@@ -2126,6 +2226,7 @@ window.__ModuleLoader__.load({
       /** FOLLOW 与 AUTO REFRESH 互斥：开流停轮询；关流立即回快照。 */
       const toggleFollow = () => {
         if (follow) {
+          cancelFollowFlush()
           setFollow(false)
           setFollowStatus('')
           loadLogs()
@@ -2352,25 +2453,34 @@ window.__ModuleLoader__.load({
       }
 
       /**
-       * 日志统计（工具条与正文共用）：FOLLOW 时数据源是流缓冲，否则是快照。
-       * useMemo 到 [数据源, 过滤条件]（D63）：它在渲染期被 logFilterBar / logsView /
-       * logShown 调 2~3 次，每次都 join/split 最多 5000 行——渲染期重复重算是
-       * 消息密集时主线程占满的主因之一。
+       * 快照日志 → 行对象：每次 logs 载入只 split 一次（D63 根治——旧实现每次
+       * 渲染都 join/split 最多 5000 行的大字符串）。id 用 `s+下标`：同一次快照内
+       * 稳定，新快照整体换血（贴底/导出语义不受影响）。
+       *
+       * 切分走 splitLogLines（D136）：它不是 `text.split('\n')`——结尾那个 `\n`
+       * 是终止符，不该多切出一条空行，否则 `--tail N` 的计数恒为 N+1。
        */
-      const logStatsValue = useMemo(() => {
+      const snapshotEntriesValue = useMemo(() => {
         // 只认 string：宿主 /logs 的形状是 { id, text, truncated }，但客户端不该
         // 因为一个畸形/旧版响应就在渲染期抛错——那会连整块面板和 exec 终端一起被
         // React 卸载掉（一次日志请求赔进去一个正在跑的容器会话）。
-        const raw = follow
-          ? followLines.join('\n')
-          : (logs !== null && typeof logs === 'object' && typeof logs.text === 'string' ? logs.text : '')
+        const text = logs !== null && typeof logs === 'object' && typeof logs.text === 'string' ? logs.text : ''
+        return splitLogLines(text).map((line, index) => ({ id: 's' + String(index), text: line }))
+      }, [logs])
+
+      /**
+       * 级别/文本过滤结果（工具条与正文共用）：FOLLOW 时数据源是流缓冲的合帧快照，
+       * 否则是快照行对象。入口已是行数组，这里只做 O(行数) 的过滤；渲染频率由
+       * FOLLOW 合帧压到 ≤~7 次/秒，主线程不再被逐 chunk 重算占满。
+       */
+      const logStatsValue = useMemo(() => {
+        const allEntries = follow ? followLines : snapshotEntriesValue
         const needle = logFilter.trim().toLowerCase()
-        const allLines = raw === '' ? [] : raw.split('\n')
         // 先级别、再文本——与聚合日志同一顺序、同一个内核（含"续行继承上一条级别"）
-        const leveled = filterLinesByLevel(allLines, levelMin)
-        const matchedLines = needle === '' ? leveled : leveled.filter((line) => line.toLowerCase().includes(needle))
-        return { raw, needle, allLines, leveled, matchedLines }
-      }, [follow, followLines, logs, logFilter, levelMin])
+        const leveled = filterRowsByLevel(allEntries, levelMin)
+        const matched = needle === '' ? leveled : leveled.filter((entry) => entry.text.toLowerCase().includes(needle))
+        return { needle, total: allEntries.length, matched }
+      }, [follow, followLines, snapshotEntriesValue, logFilter, levelMin])
       const logStats = () => logStatsValue
 
       const logPill = (on, label, onClick, options) => jsx('button', {
@@ -2393,6 +2503,8 @@ window.__ModuleLoader__.load({
           jsx('select', {
             className: 'dk_select dk_selectSm',
             value: String(logOptions.tail),
+            // 行数与字节是两个闸：快照还会被设置卡片的「输出上限（KB）」按字节截断
+            title: '拉取的尾部行数。快照另受设置卡片「输出上限（KB）」限制（当前 ' + String(outputCapKb) + 'KB）——行数够但字节超了仍会截断，实际行数可能更少；FOLLOW 流不受该字节上限约束（由本面板的缓冲上限收口）。',
             onChange: (event) => setLogOptions({ ...logOptions, tail: Number(event.target.value) }),
             children: tailOptions.map((value) => jsx('option', { value: String(value), children: value === 5000 ? 'Last 5000' : 'Last ' + String(value) }, String(value))),
           }),
@@ -2438,7 +2550,7 @@ window.__ModuleLoader__.load({
        * 绝对定位，不占布局，所以出现 / 消失都不会让任何东西位移。
        */
       const logFilterBar = () => {
-        const { needle, allLines, matchedLines } = logStats()
+        const { needle, total, matched } = logStats()
         return jsxs('div', { className: 'dk_filterBar', children: [
           jsxs('div', { className: 'dk_filterWrap', children: [
             jsx('input', {
@@ -2473,38 +2585,29 @@ window.__ModuleLoader__.load({
           jsx('button', {
             type: 'button',
             className: 'dk_chip',
-            disabled: logShown().length === 0,
-            title: '导出当前显示内容为 .log（纯文本）',
-            onClick: () => doLogExport('log'),
-            children: '⬇ .log',
-          }, 'exportLog'),
-          jsx('button', {
-            type: 'button',
-            className: 'dk_chip',
-            disabled: logShown().length === 0,
-            title: '导出当前显示内容为 .md（带来源与行数表头，适合当工单附件）',
-            onClick: () => doLogExport('md'),
-            children: '⬇ .md',
-          }, 'exportMd'),
+            disabled: matched.length === 0,
+            'aria-haspopup': 'menu',
+            title: '导出当前显示内容：.log（纯文本）/ .md（带来源与行数表头，适合当工单附件）',
+            onClick: (event) => openExportMenu(event, { sub: item.name + ' · ' + String(matched.length) + ' 行', onPick: doLogExport }),
+            children: LOG_EXPORT_LABEL,
+          }, 'export'),
           jsx('span', {
             className: 'dk_filterCount',
             children: needle === '' && levelMin === 0
-              ? String(allLines.length) + ' 行'
-              : String(matchedLines.length) + ' / ' + String(allLines.length) + ' 行',
+              ? String(total) + ' 行'
+              : String(matched.length) + ' / ' + String(total) + ' 行',
           }, 'count'),
         ] })
       }
 
-      /** 当前**显示**的行：受级别 / 文本过滤与显示上限影响——渲染与「导出当前显示内容」共用它。 */
-      const logShown = () => {
-        const { matchedLines } = logStats()
-        return matchedLines.length > LOG_COLOR_LIMIT ? matchedLines.slice(-LOG_COLOR_LIMIT) : matchedLines
-      }
-
-      /** 导出当前显示内容：与聚合日志同一个构建器、同样两种格式。 */
+      /**
+       * 导出当前显示内容：与聚合日志同一个构建器、同样两种格式。
+       * 显示与导出取**同一个集合**（LINES 选多少就渲染/导出多少）——上限由缓冲
+       * （行数 + 字节）与宿主「输出上限（KB）」决定，不在这里再截一刀。
+       */
       const doLogExport = (format) => {
-        const rows = logShown().map((line) => {
-          const split = splitLogTimestamp(line)
+        const rows = logStats().matched.map((entry) => {
+          const split = splitLogTimestamp(entry.text)
           return { service: item.name, ts: split.ts, text: split.text }
         })
         const text = buildLogExport(rows, {
@@ -2519,8 +2622,7 @@ window.__ModuleLoader__.load({
       }
 
       const logsView = () => {
-        const { needle, matchedLines } = logStats()
-        const shown = logShown()
+        const { needle, matched } = logStats()
         return jsxs('div', { className: 'dk_logs', children: [
           logsError === '' ? null : jsx(Banner, {
             title: '读取日志失败',
@@ -2536,10 +2638,14 @@ window.__ModuleLoader__.load({
           followNotice === '' ? null : jsx(Banner, { kind: 'info', title: followNotice }),
           followDropped ? jsx(Banner, {
             kind: 'warn',
-            title: '日志超过 ' + String(FOLLOW_LINE_LIMIT) + ' 行，已丢弃最早内容',
-            hint: '流式日志只保留最近的行；需要完整历史请关掉 FOLLOW 用快照，或调大「LINES」。',
+            title: '日志超出缓冲上限（' + String(FOLLOW_LINE_LIMIT) + ' 行 / ' + String(Math.round(FOLLOW_BYTE_LIMIT / 1024 / 1024)) + 'MB），已丢弃最早内容',
+            hint: '流式日志只保留最近的行；需要完整历史请关掉 FOLLOW 用快照，或调小「LINES」。',
+          }) : null,
+          !follow && logs !== null && logs.truncated === true ? jsx(Banner, {
+            kind: 'warn',
+            title: '日志输出超过「输出上限（' + String(outputCapKb) + 'KB）」，已截断',
+            hint: '这是**字节**上限，不是行数上限——所以 LINES 选了 5000 也可能只回来一部分。想多留日志请到设置卡片调大「输出上限（KB）」，或打开 FOLLOW（流式不受它约束）。',
           }) : null,
-          !follow && logs !== null && logs.truncated === true ? jsx(Banner, { kind: 'warn', title: '日志输出超过上限，已截断', hint: '调小「LINES」或到设置卡片调大「单次命令输出上限」。' }) : null,
           follow ? jsx('div', { className: 'dk_followState', 'data-state': followStatus, children: followStatusText() }) : null,
           jsxs('div', {
             className: 'dk_logBody',
@@ -2556,16 +2662,13 @@ window.__ModuleLoader__.load({
               filtered: needle !== '',
             }),
             children: [
-              matchedLines.length > shown.length
-                ? jsx('div', { className: 'dk_logLine dk_logMore', children: '（只显示最近 ' + String(LOG_COLOR_LIMIT) + ' 行，共 ' + String(matchedLines.length) + ' 行匹配）' }, 'more')
-                : null,
               logsError !== ''
                 ? null
                 : (!follow && logs === null)
                   ? jsx('div', { className: 'dk_logLine', children: '读取中…' }, 'loading')
-                  : (shown.length === 0
+                  : (matched.length === 0
                     ? jsx('div', { className: 'dk_logLine', children: follow ? '等待日志…' : (needle === '' ? '(无日志)' : '(无匹配日志)') }, 'empty')
-                    : shown.map((line, index) => renderLogLine(line, index, needle))),
+                    : matched.map((entry) => renderLogLine(entry, needle))),
             ],
           }),
           follow && !followAtBottom
@@ -3051,6 +3154,30 @@ window.__ModuleLoader__.load({
       const linesRef = useRef([])
       const pendingRef = useRef('')
       const bodyRef = useRef(null)
+      /** 进度落地合帧定时器（D134）：拉到跑满带宽时这个流能到几百行/秒。 */
+      const flushTimerRef = useRef(null)
+
+      /**
+       * 合帧落地进度行（D134）：docker pull 逐层刷进度时这个流能有几百行/秒，而
+       * 每行都会走一次 mergeProgress（要 slice + 重建 key 索引表，O(行数)）再 setLines
+       * ——逐行落地就是「每行一次 2000 行重渲染」，与日志页原来的崩溃同一类写法，
+       * 只是量级小。这里把窗口内的多批并成一次：真相源仍是 linesRef.current（同步
+       * 更新，结束时不会丢行），DOM 按 150ms 节奏刷。
+       */
+      const flushLines = () => {
+        if (flushTimerRef.current !== null) return
+        flushTimerRef.current = setTimeout(() => {
+          flushTimerRef.current = null
+          setLines(linesRef.current)
+        }, FOLLOW_FLUSH_MS)
+      }
+      const flushNow = () => {
+        if (flushTimerRef.current !== null) {
+          clearTimeout(flushTimerRef.current)
+          flushTimerRef.current = null
+        }
+        setLines(linesRef.current)
+      }
 
       useEffect(() => {
         if (!running) return undefined
@@ -3077,12 +3204,14 @@ window.__ModuleLoader__.load({
           linesRef.current = merged.lines
           pendingRef.current = merged.pending
           if (merged.dropped) setDropped(true)
-          setLines(merged.lines)
+          flushLines()
         }
         const onEnd = (event) => {
           let payload = null
           try { payload = JSON.parse(event.data) } catch { /* 畸形载荷按失败处理 */ }
           const code = payload !== null && typeof payload.code === 'number' ? payload.code : null
+          // 结束前把还没落地的进度刷出去，别让最后几行卡在合帧窗口里
+          flushNow()
           setExitCode(code)
           setRunning(false)
           setStatus(code === 0 ? '拉取完成' : '拉取结束（退出码 ' + String(code === null ? '?' : code) + '）')
@@ -3106,7 +3235,14 @@ window.__ModuleLoader__.load({
         es.addEventListener('end', onEnd)
         es.addEventListener('error', onError)
         es.onopen = () => setStatus('open')
-        return () => { close(); pendingRef.current = '' }
+        return () => {
+          close()
+          pendingRef.current = ''
+          if (flushTimerRef.current !== null) {
+            clearTimeout(flushTimerRef.current)
+            flushTimerRef.current = null
+          }
+        }
       }, [running, props.target])
 
       useEffect(() => {
@@ -3477,7 +3613,14 @@ window.__ModuleLoader__.load({
       const [levelMin, setLevelMin] = useState(0)
       /** 每容器初始行数：改它触发重连（见 AGG_TAIL_OPTIONS 的注释）。 */
       const [tail, setTail] = useState(AGG_TAIL_DEFAULT)
-      const entriesRef = useRef([])
+      /**
+       * 聚合日志缓冲（D63 根治）：行对象带单调 id,行数 + 字节双限都在 log-buffer
+       * 里;entriesRef 退役——真相源是 aggBuf,snapshot() 即列表。到达序的合帧
+       * 暂存区也在这里(与单容器 FOLLOW 同节奏)。
+       */
+      const aggBufRef = useRef(null)
+      const arrivalRowsRef = useRef([])
+      const arrivalTimerRef = useRef(null)
       const pendingRef = useRef(new Map())
       /** SSE 回调里读「最新暂停态」：闭包捕获的是连接建立那一刻的 state。 */
       const pausedRef = useRef(false)
@@ -3502,6 +3645,63 @@ window.__ModuleLoader__.load({
         setAtBottom(true)
       }
 
+      /** 暂停期间的去处：攒进暂停缓冲,DOM 不动(与旧版 push 里的分支同一语义)。 */
+      const stashRows = (rows) => {
+        const buffered = bufferRef.current.concat(rows)
+        bufferRef.current = buffered.length > FOLLOW_LINE_LIMIT ? buffered.slice(buffered.length - FOLLOW_LINE_LIMIT) : buffered
+        setBufferedCount((current) => (bufferRef.current.length - current >= 5 || current === 0 ? bufferRef.current.length : current))
+      }
+
+      /**
+       * 落地一批行:真相源是 aggBuf(行数 + 字节双限);到达序 appendRows、「按时间」
+       * 整表重排后 replaceAll。N 条流 × 逐 chunk setState 的渲染风暴在这里收敛
+       * (D63 根治:到达序按 FOLLOW_FLUSH_MS 合帧,时间序本就有 350ms 窗口)。
+       */
+      const commit = (rows) => {
+        if (rows.length === 0) return
+        if (pausedRef.current) {
+          stashRows(rows)
+          return
+        }
+        const buffer = aggBufRef.current
+        if (buffer === null) return
+        const result = orderRef.current === 'time'
+          ? buffer.replaceAll(reorderTailByTimestamp(buffer.snapshot(), rows, LOG_REORDER_TAIL))
+          : buffer.appendRows(rows)
+        if (result.dropped) setDropped(true)
+        setEntries(buffer.snapshot())
+      }
+
+      /** 到达序合帧:150ms 内的多批并成一次 commit(与单容器 FOLLOW 同节奏)。 */
+      const scheduleArrivalCommit = (rows) => {
+        arrivalRowsRef.current = arrivalRowsRef.current.concat(rows)
+        if (arrivalTimerRef.current === null) {
+          arrivalTimerRef.current = setTimeout(() => {
+            arrivalTimerRef.current = null
+            const pendingRows = arrivalRowsRef.current
+            arrivalRowsRef.current = []
+            commit(pendingRows)
+          }, FOLLOW_FLUSH_MS)
+        }
+      }
+
+      /** 时间序：攒进窗口，到点整体按时间戳排序后落地（到达序走合帧）。 */
+      const enqueue = (rows) => {
+        if (orderRef.current !== 'time') {
+          scheduleArrivalCommit(rows)
+          return
+        }
+        timeBufRef.current = timeBufRef.current.concat(rows)
+        if (flushTimerRef.current !== null) return
+        flushTimerRef.current = setTimeout(() => {
+          flushTimerRef.current = null
+          const pendingRows = timeBufRef.current
+          timeBufRef.current = []
+          // 时序种子取自主列表（D56）：flush 窗口的首行可能是无前缀续行
+          commit(orderRowsByTimestamp(pendingRows, carriedTsBefore(aggBufRef.current.snapshot())))
+        }, LOG_MERGE_WINDOW_MS)
+      }
+
       useEffect(() => {
         // 折叠的 tab 不建流（S3）。
         // 刻意**不动 status**：隐藏时状态行停在原样（比如「已连接 N 条」），展开后
@@ -3516,7 +3716,12 @@ window.__ModuleLoader__.load({
           return undefined
         }
         setStatus('connecting')
-        entriesRef.current = []
+        aggBufRef.current = createLogBuffer({ maxLines: FOLLOW_LINE_LIMIT, maxBytes: FOLLOW_BYTE_LIMIT })
+        arrivalRowsRef.current = []
+        if (arrivalTimerRef.current !== null) {
+          clearTimeout(arrivalTimerRef.current)
+          arrivalTimerRef.current = null
+        }
         pendingRef.current = new Map()
         bufferRef.current = []
         setEntries([])
@@ -3534,37 +3739,18 @@ window.__ModuleLoader__.load({
         }
         let open = 0
         let closed = 0
+        /*
+         * 每条容器流各一个订阅句柄（D133）：首连带 tail 补历史，**重连带 tail=0** 只补
+         * 新行。聚合视图一条流断了就用 EventSource 自动重连的话，那条流的 tail 会被
+         * 整段重放，混进同一条列表里就是「凭空多出一段重复日志」。
+         */
         const sources = items.map((item) => {
           const service = item.composeService === null ? item.name : item.composeService
-          // timestamps=1：聚合视图为「按时间合并」与可选显示时间戳固定带上的参数
-          const es = new EventSource(streamUrl('/logs/stream', { target: props.target, id: item.id, tail, timestamps: 1 }))
-          const commit = (rows) => {
-            if (rows.length === 0) return
-            // 时间序：把最近 N 行连同新行一起重排（跨批次的历史错序也能被纠正）
-            const next = orderRef.current === 'time'
-              ? reorderTailByTimestamp(entriesRef.current, rows, LOG_REORDER_TAIL)
-              : entriesRef.current.concat(rows)
-            const trimmed = next.length > FOLLOW_LINE_LIMIT ? next.slice(next.length - FOLLOW_LINE_LIMIT) : next
-            entriesRef.current = trimmed
-            if (trimmed.length !== next.length) setDropped(true)
-            setEntries(trimmed)
-          }
-          /** 时间序：攒进窗口，到点整体按时间戳排序后落地（到达序则直接落地）。 */
-          const enqueue = (rows) => {
-            if (orderRef.current !== 'time') {
-              commit(rows)
-              return
-            }
-            timeBufRef.current = timeBufRef.current.concat(rows)
-            if (flushTimerRef.current !== null) return
-            flushTimerRef.current = setTimeout(() => {
-              flushTimerRef.current = null
-              const pendingRows = timeBufRef.current
-              timeBufRef.current = []
-              // 时序种子取自主列表（D56）：flush 窗口的首行可能是无前缀续行
-              commit(orderRowsByTimestamp(pendingRows, carriedTsBefore(entriesRef.current)))
-            }, LOG_MERGE_WINDOW_MS)
-          }
+          /**
+           * 分片 → 完整行：残行按 item 存（pendingRef）；行对象组出来时即取单调 id
+           * （之后重排/合并只是挪位置，key 不抖动），再交给 enqueue——commit/合帧
+           * 在组件作用域（见上），N 条流共享同一份。
+           */
           const push = (text) => {
             const pending = pendingRef.current.get(item.id) ?? ''
             const parts = (pending + text).split('\n')
@@ -3572,42 +3758,56 @@ window.__ModuleLoader__.load({
             if (parts.length === 0) return
             const rows = parts.map((line) => {
               const parsed = splitLogTimestamp(line)
-              return { service, text: parsed.text, ts: parsed.ts }
+              return { id: aggBufRef.current.nextId(), service, text: parsed.text, ts: parsed.ts, bytes: parsed.text.length }
             })
             if (pausedRef.current) {
               // 暂停：攒进缓冲，DOM 不动（恢复时并入并回到底部）
-              const buffered = bufferRef.current.concat(rows)
-              bufferRef.current = buffered.length > FOLLOW_LINE_LIMIT ? buffered.slice(buffered.length - FOLLOW_LINE_LIMIT) : buffered
-              setBufferedCount((current) => (bufferRef.current.length - current >= 5 || current === 0 ? bufferRef.current.length : current))
+              stashRows(rows)
               return
             }
             enqueue(rows)
           }
-          es.addEventListener('line', (event) => {
-            let payload = null
-            try { payload = JSON.parse(event.data) } catch { return }
-            if (payload === null || typeof payload !== 'object') return
-            if (typeof payload.d === 'string') push(payload.d)
-            else if (typeof payload.e === 'string') push(payload.e)
-          })
-          es.addEventListener('end', () => {
-            try { es.close() } catch { /* 已关闭 */ }
-            closed += 1
-            if (closed >= items.length) setStatus('closed')
-          })
-          es.addEventListener('error', (event) => {
-            // 服务端 event:error 会带 data；连接层错误交给 EventSource 自动重连
-            if (typeof event.data === 'string' && event.data !== '') setStatus('partial')
-            else setStatus('reconnecting')
+          // timestamps=1：聚合视图为「按时间合并」与可选显示时间戳固定带上的参数
+          const handle = subscribeLogStream({
+            buildUrl: (tailNow) => streamUrl('/logs/stream', { target: props.target, id: item.id, tail: String(tailNow), timestamps: '1' }),
+            tail,
+            onStatus: (next) => {
+              if (next === 'connecting') return
+              if (next === 'open') {
+                open += 1
+                setStatus('open')
+                return
+              }
+              if (next === 'reconnecting') setStatus('reconnecting')
+            },
+            onLine: push,
+            onEnd: (payload, controls) => {
+              const reason = payload !== null && typeof payload.reason === 'string' ? payload.reason : 'container-exit'
+              if (reason === 'container-exit') {
+                // 这个容器停了：这条流不会再有内容，计入「已结束」的条数
+                controls.close()
+                closed += 1
+                if (closed >= items.length) setStatus('closed')
+                return
+              }
+              // 服务端停流 / 宿主队列溢出：重连（只补新行）
+              controls.reconnect()
+            },
+            onError: () => {
+              // 服务端 event:error：只标记「部分出错」，其余流继续
+              setStatus('partial')
+            },
           })
-          es.onopen = () => {
-            open += 1
-            setStatus('open')
-          }
-          return () => { try { es.close() } catch { /* 已关闭 */ } }
+          return () => handle.close()
         })
         void open
-        return () => { for (const close of sources) close() }
+        return () => {
+          for (const close of sources) close()
+          if (arrivalTimerRef.current !== null) {
+            clearTimeout(arrivalTimerRef.current)
+            arrivalTimerRef.current = null
+          }
+        }
       }, [active, props.target, itemIds, tail])
 
       useEffect(() => {
@@ -3627,10 +3827,11 @@ window.__ModuleLoader__.load({
         bufferRef.current = []
         setBufferedCount(0)
         if (buffered.length > 0) {
-          const merged = mergeBufferedEntries(entriesRef.current, buffered, FOLLOW_LINE_LIMIT)
-          entriesRef.current = merged.entries
-          setEntries(merged.entries)
-          if (merged.dropped) setDropped(true)
+          const merged = mergeBufferedEntries(aggBufRef.current.snapshot(), buffered, FOLLOW_LINE_LIMIT)
+          // 行数上限由 mergeBufferedEntries 把关,字节上限由 replaceAll 的裁剪把关
+          const result = aggBufRef.current.replaceAll(merged.entries)
+          if (result.dropped) setDropped(true)
+          setEntries(aggBufRef.current.snapshot())
         }
         // 等这一帧的 DOM 落地再贴底（否则滚到的是合并前的高度）
         requestAnimationFrame(() => {
@@ -3640,12 +3841,13 @@ window.__ModuleLoader__.load({
       }
 
       const needle = filter.trim().toLowerCase()
-      // 先按级别（WARN+ / ERROR+），再按文本/服务名，最后套显示上限
+      // 先按级别（WARN+ / ERROR+），再按文本/服务名，最后套渲染窗口
       const leveled = filterRowsByLevel(entries, levelMin)
       const matched = needle === ''
         ? leveled
         : leveled.filter((entry) => entry.text.toLowerCase().indexOf(needle) >= 0 || entry.service.toLowerCase().indexOf(needle) >= 0)
-      const shown = matched.length > LOG_COLOR_LIMIT ? matched.slice(-LOG_COLOR_LIMIT) : matched
+      // 与单容器视图一致:LINES 选多少就渲染/导出多少,显示层不再截断(缓冲与宿主
+      // 输出上限已是闸;再多一道「只显示最近 N 行」只会让选择说了不算)
 
       /** 切换排序：先把待合并窗口落地，避免切模式时短暂的顺序错乱。 */
       const toggleOrderMode = () => {
@@ -3659,22 +3861,20 @@ window.__ModuleLoader__.load({
         const pendingRows = timeBufRef.current
         timeBufRef.current = []
         if (pendingRows.length > 0) {
-          const merged = reorderTailByTimestamp(entriesRef.current, pendingRows, LOG_REORDER_TAIL)
-          const trimmed = merged.length > FOLLOW_LINE_LIMIT ? merged.slice(merged.length - FOLLOW_LINE_LIMIT) : merged
-          entriesRef.current = trimmed
-          setEntries(trimmed)
+          commit(pendingRows)
         }
         // 切到「按时间」时，把现有尾部也整体重排一次（历史批次之间的错序一次纠正）
         if (next === 'time') {
-          const reordered = reorderTailByTimestamp([], entriesRef.current, entriesRef.current.length)
-          entriesRef.current = reordered
-          setEntries(reordered)
+          const snapshot = aggBufRef.current.snapshot()
+          const result = aggBufRef.current.replaceAll(reorderTailByTimestamp([], snapshot, snapshot.length))
+          if (result.dropped) setDropped(true)
+          setEntries(aggBufRef.current.snapshot())
         }
       }
 
-      /** 导出当前显示内容（受级别 / 文本过滤影响）。 */
+      /** 导出当前显示内容（受级别 / 文本过滤影响;与渲染取同一集合）。 */
       const doExport = (format) => {
-        const text = buildLogExport(shown, {
+        const text = buildLogExport(matched, {
           format,
           target: props.target,
           targetLabel: props.targetLabel,
@@ -3696,7 +3896,7 @@ window.__ModuleLoader__.load({
       }
 
       return jsxs('div', { className: 'dk_logs', children: [
-        dropped ? jsx(Banner, { kind: 'warn', title: '聚合日志超过 ' + String(FOLLOW_LINE_LIMIT) + ' 行，已丢弃最早内容' }) : null,
+        dropped ? jsx(Banner, { kind: 'warn', title: '聚合日志超出缓冲上限（' + String(FOLLOW_LINE_LIMIT) + ' 行 / ' + String(Math.round(FOLLOW_BYTE_LIMIT / 1024 / 1024)) + 'MB），已丢弃最早内容' }) : null,
         jsxs('div', { className: 'dk_filterBar', children: [
           jsxs('div', { className: 'dk_filterWrap', children: [
             jsx('input', {
@@ -3769,19 +3969,12 @@ window.__ModuleLoader__.load({
           jsx('button', {
             type: 'button',
             className: 'dk_chip',
-            disabled: shown.length === 0,
-            title: '导出当前显示内容为 .log（纯文本）',
-            onClick: () => doExport('log'),
-            children: '⬇ .log',
-          }),
-          jsx('button', {
-            type: 'button',
-            className: 'dk_chip',
-            disabled: shown.length === 0,
-            title: '导出当前显示内容为 .md（带来源与行数表头，适合当工单附件）',
-            onClick: () => doExport('md'),
-            children: '⬇ .md',
-          }),
+            disabled: matched.length === 0,
+            'aria-haspopup': 'menu',
+            title: '导出当前显示内容：.log（纯文本）/ .md（带来源与行数表头，适合当工单附件）',
+            onClick: (event) => openExportMenu(event, { sub: String(items.length) + ' 个容器 · ' + String(matched.length) + ' 行', onPick: doExport }),
+            children: LOG_EXPORT_LABEL,
+          }, 'export'),
           jsx('span', { className: 'dk_filterCount', children: needle === '' && levelMin === 0 ? String(entries.length) + ' 行' : String(matched.length) + ' / ' + String(entries.length) + ' 行' }),
         ] }),
         jsx('div', { className: 'dk_followState', 'data-state': status === 'open' ? 'open' : (status === 'closed' ? 'closed' : 'connecting'), children: statusText() }),
@@ -3801,9 +3994,9 @@ window.__ModuleLoader__.load({
             filtered: needle !== '',
           }),
           children: [
-            shown.length === 0
+            matched.length === 0
               ? jsx('div', { className: 'dk_logLine', children: status === 'open' ? '等待日志…' : statusText() }, 'empty')
-              : shown.map((entry, index) => renderAggLine(entry, index, needle, showTs)),
+              : matched.map((entry) => renderAggLine(entry, needle, showTs)),
           ],
         }),
         !paused && !atBottom ? jsx('button', { type: 'button', className: 'dk_backToBottom', onClick: backToBottom, children: '回到底部' }) : null,
@@ -5945,8 +6138,8 @@ window.__ModuleLoader__.load({
         jsxs('div', { className: 'dk_fieldGrid', children: [
           field('docker CLI', jsx('input', { className: 'dk_input', value: form.dockerBin, onChange: (event) => patch({ dockerBin: event.target.value }) }), '默认 docker；podman 可填 podman'),
           field('统计刷新间隔（秒）', numberInput('pollIntervalSec', 1, 60)),
-          field('日志默认行数', numberInput('logTailDefault', 1, 5000)),
-          field('输出上限（KB）', numberInput('maxOutputKb', 1, 8192)),
+          field('日志默认行数', numberInput('logTailDefault', 1, 5000), '面板日志页 LINES 的初始值（面板内可临时改）；它只是**行数**上限——快照还要过下面那道字节闸，所以不保证一定拿得到这么多行'),
+          field('输出上限（KB）', numberInput('maxOutputKb', 1, 8192), '单次输出的**字节**上限：日志快照 / inspect / exec 共用；日志行数够但字节超了会被截断（面板会给出截断横幅）。FOLLOW 流式日志不受它约束'),
           field('exec 超时（秒）', numberInput('execTimeoutSec', 1, 120)),
         ] }),
 
@@ -6382,6 +6575,7 @@ window.__ModuleLoader__.load({
     exports.__render = {
       ContainerPanel,
       DockerTabBody,
+      ComposeLogs,
     }
     exports.__pick = {
       MAX: PICK_MAX,
@@ -6444,6 +6638,29 @@ window.__ModuleLoader__.load({
        */
       matchTargetForSession,
     }
+    /*
+     * 日志缓冲的测试缝：环形上限 / 残行分片 / 单调 id / 快照切分都是纯逻辑，离线冒烟
+     * 直接驱动（真实 EventSource 时序进不了 Node 桩）。常量挂出来供用例对齐，避免两边漂移。
+     */
+    exports.__logBuffer = {
+      create: createLogBuffer,
+      splitLines: splitLogLines,
+      MAX_LINES: FOLLOW_LINE_LIMIT,
+      BYTE_LIMIT: FOLLOW_BYTE_LIMIT,
+      PENDING_MAX: LOG_PENDING_MAX,
+      FLUSH_MS: FOLLOW_FLUSH_MS,
+    }
+    /*
+     * 断线重连策略的测试缝（D133）：真实 EventSource 时序进不了 Node 桩，但「首连带
+     * tail、重连带 0」这条规则本身是纯的——用可注入的假 EventSource 驱动一遍，
+     * 把「重连不许重放历史」钉在用例里（否则退化成浏览器自动重连就没人发现）。
+     */
+    exports.__logStream = {
+      subscribe: subscribeLogStream,
+      RECONNECT_BASE_MS: LOG_RECONNECT_BASE_MS,
+      RECONNECT_MAX_MS: LOG_RECONNECT_MAX_MS,
+      reconnectTail,
+    }
     exports.__aggLogs = {
       mergeBuffered: mergeBufferedEntries,
       WINDOW_MS: LOG_MERGE_WINDOW_MS,
@@ -6455,6 +6672,9 @@ window.__ModuleLoader__.load({
       filterByLevel: filterRowsByLevel,
       filterLinesByLevel,
       buildLogExport,
+      /* 导出按钮文案与两个格式的菜单项：两个视图共用一份，产物里只该出现一次（D137）。 */
+      EXPORT_LABEL: LOG_EXPORT_LABEL,
+      exportMenuItems,
       LEVEL_OPTIONS: LOG_LEVEL_OPTIONS,
       TAIL_OPTIONS: AGG_TAIL_OPTIONS,
       TAIL_DEFAULT: AGG_TAIL_DEFAULT,