@lyhue1991/dsh-soup 0.4.0 → 0.4.1

package/README.md

@@ -97,7 +97,8 @@ dsh plugin add @lyhue1991/dsh-soup
 
 ## 更新日志
 
-- **0.4.0（当前）** —
+- **0.4.1（当前）** — **浏览器半区内部整理**：`lib/client.js` 按四大功能分区重排并加统一标题注释（i18n 基座 → 资源管理器 → 会话内预览 → 速率徽标 → 多行 GoalBar → apply 注册），纯重排无逻辑变更、无行为差异。
+- **0.4.0** —
   - **语言适配（i18n）**：dsh-soup 全部文案（资源管理器、预览页、右键菜单、上传/下载、速度徽标、GoalBar）跟随 DSH 通用设置的语言切换（zh/en），切换即时生效。
   - **预览 tab 纯阅读模式**：激活预览时隐藏底部输入框、「N 轮 · M 步」统计行、GoalBar 与速度徽标——整屏干净内容区，切回对话/轨迹恢复。
 - **0.3.0** —

package/lib/client.js

@@ -198,6 +198,10 @@ window.__ModuleLoader__.load({
     /** 需要的客户端服务：slots、layout、timer、sessions、locale（i18n 词典）+ remote.goals（goal 动作动词）。 */
     var inject = ['slots', 'layout', 'timer', 'sessions', 'locale', 'remote', 'remote.goals']
 
+    // ------------------------------------------------------------------
+    // ------------------------------------------------------------------
+    // ▓▓ 区域零 · i18n / 词典
+    //   注册双语词典 NS/DICT；组件内 t()、组件外 T()，语言切换即时生效。
     // ------------------------------------------------------------------
     // i18n：走 DSH 官方插件词典机制（ui-cordis / ui-conversation 同款）——
     // ctx.locale.register(NS, DICT) 注册；槽位配置加 locale: NS 后组件 props
@@ -362,6 +366,10 @@ window.__ModuleLoader__.load({
       return state
     }
 
+    // ------------------------------------------------------------------
+    // ▓▓ 区域一 · 资源管理器 · 🧅 葱（共享数据层）
+    //   共享 store、/api/dsh-soup RPC、树数据加载/自动刷新、selection、拖拽/上传/下载、类型图标 —— 预览亦复用其中 store/rpc。
+    // ------------------------------------------------------------------
     var visibleRows = []
     var uploadInputEl = null
     var layout = null
@@ -991,137 +999,10 @@ window.__ModuleLoader__.load({
     }
 
     // ------------------------------------------------------------------
-    // 文件标签页：右键/双击「预览」把文件以只读预览展示进会话区的「预览」
-    // tab（原生 conversation.view 槽位，与 对话/轨迹 同级）。
-    // markdown/html/json/csv 有专属渲染器；图片预览；其余按纯文本。
-    // 状态存模块级 store，切走 tab 再切回来内容不丢。
     // ------------------------------------------------------------------
-    var FILES_TAB_LABEL = function () { return T('files.tab') }
-
-    /** 当前活跃会话：list/read/download 携带给宿主，供围栏直查该会话 cwd。 */
-    var activeSessionId = null
-
-    /** 同时打开的预览 tab 上限：超过后挤掉最早打开的（FIFO）。 */
-    var FILES_MAX_OPEN = 5
-
-    /** path 是否落在 base 目录子树内（base 为根或空时视为全量放行）。 */
-    function withinScope(path, base) {
-      if (!base || base === '/') return true
-      return path === base || path.indexOf(base + '/') === 0
-    }
-
-    /**
-     * 会话切换时按新 cwd 裁剪预览列表：范围外的 tab 自动关闭。
-     * 若当前激活文件被裁掉，激活项顺移到剩余最后一个。
-     * 列表无变化时返回原引用，避免触发多余渲染。
-     */
-    function pruneFilesToScope(files, cwd) {
-      var kept = files.list.filter(function (f) { return withinScope(f.path, cwd) })
-      try { window.__DFV_PRUNE = (window.__DFV_PRUNE || []) ; window.__DFV_PRUNE.push({ cwd: cwd, before: files.list.length, after: kept.length }) } catch (_) {}
-      if (kept.length === files.list.length) return files
-      var activeKept = kept.some(function (f) { return f.path === files.active })
-      var active = files.active
-      if (!activeKept) active = kept.length ? kept[kept.length - 1].path : null
-      return { list: kept, active: active }
-    }
-
-    function setFiles(patch) {
-      setState({ files: Object.assign({}, state.files, patch) })
-      try {
-        var f = state.files
-        window.__DFV_DBG = { n: f.list.length, active: f.active, ops: ((window.__DFV_DBG && window.__DFV_DBG.ops) || 0) + 1 }
-      } catch (_) {}
-    }
-
-    function findFileEntry(path) {
-      for (var i = 0; i < state.files.list.length; i++) {
-        if (state.files.list[i].path === path) return state.files.list[i]
-      }
-      return null
-    }
-
-    /** 点击原生 header 的「预览」tab，把 view ring 切到预览视图。 */
-    function activateFilesView() {
-      try {
-        var tabs = document.querySelectorAll('[role="tab"]')
-        for (var i = 0; i < tabs.length; i++) {
-          if (tabs[i].textContent === FILES_TAB_LABEL()) { tabs[i].click(); return true }
-        }
-      } catch (err) {}
-      return false
-    }
-
-    async function openFileInTab(path) {
-      setState({ menu: null })
-      var entry = findFileEntry(path)
-      if (!entry) {
-        entry = {
-          path: path, name: baseName(path),
-          loading: true, loaded: false, error: '',
-          kind: null, content: '', dataUrl: '', data: '',
-          truncated: false, size: 0,
-        }
-        // FIFO：最多同时 5 个预览，新开的挤掉最早打开的
-        var list = state.files.list.slice()
-        while (list.length >= FILES_MAX_OPEN) list.shift()
-        list.push(entry)
-        setFiles({ list: list, active: path })
-      } else if (entry.loaded) {
-        setFiles({ active: path })
-        activateFilesView()
-        return
-      } else {
-        setFiles({ active: path })
-      }
-      activateFilesView()
-      var res = await rpc('read', { path: path, sessionId: activeSessionId })
-      if (!res.ok && /超出允许范围/.test(res.error || '')) {
-        await new Promise(function (r) { setTimeout(r, 600) })
-        res = await rpc('read', { path: path, sessionId: activeSessionId })
-      }
-      var cur = findFileEntry(path)
-      if (!cur) return
-      cur.loading = false
-      if (!res || !res.ok) {
-        cur.error = (res && res.error) || T('explorer.readFail')
-      } else {
-        cur.error = ''
-        cur.loaded = true
-        cur.kind = res.kind
-        cur.size = res.size || 0
-        if (res.kind === 'text') { cur.content = res.content; cur.truncated = !!res.truncated }
-        else if (res.kind === 'image') { cur.dataUrl = 'data:' + res.mime + ';base64,' + res.data }
-        else if (res.kind === 'pdf') { cur.data = res.data }
-      }
-      setFiles({ list: state.files.list.slice(), active: path })
-    }
-
-    async function reloadFile(path) {
-      var entry = findFileEntry(path)
-      if (!entry) return
-      // 复位 loaded，让 openFileInTab 走重读路径而不是「已打开直接激活」。
-      entry.loaded = false
-      await openFileInTab(path)
-    }
-
-    function closeFileTab(path) {
-      var list = state.files.list
-      var idx = -1
-      for (var i = 0; i < list.length; i++) if (list[i].path === path) { idx = i; break }
-      if (idx < 0) return
-      var next = list.slice(0, idx).concat(list.slice(idx + 1))
-      var active = state.files.active
-      if (active === path) {
-        var neighbor = next[Math.min(idx, next.length - 1)]
-        active = neighbor ? neighbor.path : null
-      }
-      setFiles({ list: next, active: active })
-    }
-
-    function setActiveFile(path) {
-      setFiles({ active: path })
-    }
-
+    // ▓▓ 区域一 · 资源管理器 · 🧅 葱（列表 UI）
+    //   NameInput / Row / buildMenuItems / Menu：行渲染、多选、右键菜单、重命名/新建。
+    // ------------------------------------------------------------------
     function NameInput(props) {
       var initial = props.initial
       var selectBase = props.selectBase !== false
@@ -1299,81 +1180,448 @@ window.__ModuleLoader__.load({
       return create('div', { ref: menuRef, className: 'expl-menu', style: { left: pos.x, top: pos.y } }, menuChildren)
     }
 
-    // ------------------------------------------------------------------
-    // 文件视图（conversation.view 'dsh-soup-files'）：
-    // 子 tab 条 + 只读预览区（markdown/html/json/csv 渲染 / 图片预览 / 二进制提示）。
     // ------------------------------------------------------------------
     // ------------------------------------------------------------------
-    // 预览渲染器：按扩展名分派（信任模型参考 JupyterLab viewer——
-    // markdown 走不可信安全渲染管线，html 进无 allow-* 的沙箱 iframe）。
+    // ▓▓ 区域一 · 资源管理器 · 🧅 葱（面板与入口）
+    //   Panel（右列 details 面板）/ HeaderAction（Session log 侧 📁）/ HeroAction（空白会话 📁）。
     // ------------------------------------------------------------------
-    /** 取路径小写扩展名。 */
-    function extOfName(p) {
-      var m = /\.([A-Za-z0-9]+)$/.exec(String(p || ''))
-      return m ? m[1].toLowerCase() : ''
-    }
-
-    /** 预览渲染器类型：markdown | html | json | csv | tsv | notebook | code | text。 */
-    function previewKind(path) {
-      var ext = extOfName(path)
-      if (ext === 'md' || ext === 'markdown') return 'markdown'
-      if (ext === 'html' || ext === 'htm') return 'html'
-      if (ext === 'json') return 'json'
-      if (ext === 'ipynb') return 'notebook'
-      if (ext === 'csv') return 'csv'
-      if (ext === 'tsv') return 'tsv'
-      return 'text'
-    }
+    function Panel(props) {
+      var s = useStore()
+      var sessionId = props && props.sessionId
+      // 客户端会话快照是本会话 cwd 的可信来源（与官方 DetailsPanel 同源，
+      // 始终是当前会话所在项目目录，而非宿主启动时的根目录）。
+      var useSessions = props && props.useSessions
+      var liveCwd = useSessions ? useSessions(function (list) {
+        return (sessionId && list.byId[sessionId]) ? list.byId[sessionId].cwd : undefined
+      }) : undefined
+      var cwdRef = React.useRef(liveCwd)
+      cwdRef.current = liveCwd || cwdRef.current
+      var panelRef = React.useRef(null)
+      var frameRef = React.useRef(null)
+      var widthRef = React.useRef(DETAILS_DEFAULT)
+      var dragRef = React.useRef({ startX: 0, startW: 0, active: false })
 
-    // 扩展名 → Shiki 语言提示。对齐 DSH 读卡片的 LANG_BY_EXTENSION
-    // （packages/fs/tool-fs read-render.ts），json/md/markdown/html/htm 除外——
-    // 它们走上方专属渲染器。
-    var CODE_LANG_BY_EXT = {
-      ts: 'ts', tsx: 'tsx', mts: 'ts', cts: 'ts',
-      js: 'js', jsx: 'jsx', mjs: 'js', cjs: 'js',
-      jsonc: 'json',
-      py: 'py', rb: 'rb', go: 'go', rs: 'rs', java: 'java',
-      c: 'c', h: 'c', cc: 'cpp', cpp: 'cpp', hpp: 'cpp', cxx: 'cpp',
-      cs: 'cs', kt: 'kotlin', swift: 'swift', php: 'php',
-      sh: 'sh', bash: 'sh', zsh: 'sh',
-      yaml: 'yaml', yml: 'yaml', toml: 'toml', ini: 'ini',
-      mdx: 'mdx', css: 'css', scss: 'scss', less: 'less',
-      sql: 'sql', xml: 'xml', lua: 'lua',
-    }
+      React.useEffect(function () { trackSession(sessionId, cwdRef.current) }, [sessionId])
 
-    /** 超过该字符数的代码文件不做高亮（Shiki 首次高亮的耗时保护）。 */
-    var CODE_HIGHLIGHT_MAX_CHARS = 400000
+      var setFrameWidth = React.useCallback(function (w) {
+        var frame = frameRef.current
+        if (!frame) return
+        try {
+          var gtc = frame.style.gridTemplateColumns
+          if (!gtc) return
+          var parts = gtc.trim().split(/\s+/)
+          if (parts.length < 3) return
+          parts[parts.length - 1] = Math.round(w) + 'px'
+          frame.style.gridTemplateColumns = parts.join(' ')
+        } catch (e) {}
+      }, [])
 
-    /** RFC 4180 风格的分隔符解析（引号感知，"" 转义），返回行数组。 */
-    function parseDelimited(text, delim) {
-      var rows = []
-      var row = []
-      var field = ''
-      var inQuotes = false
-      var n = text.length
-      for (var i = 0; i < n; i++) {
-        var ch = text[i]
-        if (inQuotes) {
-          if (ch === '"') {
-            if (text[i + 1] === '"') { field += '"'; i++ } else { inQuotes = false }
-          } else {
-            field += ch
+      React.useEffect(function () {
+        var el = panelRef.current
+        if (!el) return
+        var mo = null
+        var cancelled = false
+        function attach() {
+          var frame = findFrameEl(el)
+          if (!frame || mo) return
+          frameRef.current = frame
+          function sync() {
+            try {
+              var gtc = frame.style.gridTemplateColumns
+              if (!gtc) return
+              var parts = gtc.trim().split(/\s+/)
+              if (parts.length < 3) return
+              var last = parseFloat(parts[parts.length - 1])
+              if (isNaN(last) || last <= 1) { setState({ open: false }); return }
+              setState({ open: true })
+              if (Math.round(last) !== Math.round(widthRef.current)) {
+                parts[parts.length - 1] = Math.round(widthRef.current) + 'px'
+                frame.style.gridTemplateColumns = parts.join(' ')
+              }
+            } catch (e) {}
           }
-        } else if (ch === '"') {
-          inQuotes = true
-        } else if (ch === delim) {
-          row.push(field); field = ''
-        } else if (ch === '\n') {
-          row.push(field); rows.push(row); row = []; field = ''
-        } else if (ch !== '\r') {
-          field += ch
+          mo = new MutationObserver(sync)
+          mo.observe(frame, { attributes: true, attributeFilter: ['style'] })
+          sync()
         }
-      }
-      if (field !== '' || row.length > 0) { row.push(field); rows.push(row) }
-      return rows
-    }
-
-    /** 把 pretty JSON 切成着色 token 数组（纯文本/React 节点，无 innerHTML）。 */
+        attach()
+        if (!mo) {
+          var tries = 0
+          var t = setInterval(function () {
+            if (cancelled || mo) { clearInterval(t); return }
+            attach()
+            if (++tries > 40) clearInterval(t)
+          }, 100)
+        }
+        return function () { cancelled = true; if (mo) mo.disconnect() }
+      }, [])
+
+      function onResizeDown(e) {
+        e.preventDefault()
+        try { e.currentTarget.setPointerCapture(e.pointerId) } catch (err) {}
+        dragRef.current = { startX: e.clientX, startW: widthRef.current, active: true }
+        if (frameRef.current) { try { frameRef.current.style.transition = 'none' } catch (e) {} }
+      }
+      function onResizeMove(e) {
+        if (!dragRef.current.active) return
+        var w = clampW(dragRef.current.startW - (e.clientX - dragRef.current.startX))
+        widthRef.current = w
+        setFrameWidth(w)
+      }
+      function onResizeUp(e) {
+        dragRef.current.active = false
+        try { e.currentTarget.releasePointerCapture(e.pointerId) } catch (err) {}
+        if (frameRef.current) { try { frameRef.current.style.transition = '' } catch (e) {} }
+      }
+
+      visibleRows.length = 0
+
+      var bodyChildren = []
+      if (state.newItem && state.newItem.parent === state.cwd) {
+        bodyChildren.push(create('div', { key: '__new__', className: 'expl-row' },
+          create('div', { className: 'expl-row-main', style: { paddingLeft: 8 } },
+            create('span', { className: 'expl-icon' }, state.newItem.isDir ? '📁' : '📄'),
+            create(NameInput, {
+              initial: '',
+              selectBase: false,
+              onCommit: function (name) { commitNew(state.newItem.parent, name, state.newItem.isDir) },
+              onCancel: function () { setState({ newItem: null }) },
+            }),
+          ),
+        ))
+      }
+      if (s.tree.length === 0 && !(state.newItem && state.newItem.parent === state.cwd)) {
+        bodyChildren.push(create('div', { key: '__empty__', className: 'expl-muted' }, T('explorer.emptyDir')))
+      } else {
+        s.tree.forEach(function (node) { bodyChildren.push(create(Row, { key: node.path, node: node, depth: 0 })) })
+      }
+
+      var container = create('div', {
+        className: 'expl-body' + (state.dropTarget === state.cwd ? ' drop-target' : ''),
+        onClick: onBlankClick,
+        onContextMenu: onBlankContext,
+        onDragOver: function (e) { e.preventDefault(); e.stopPropagation(); if (state.dropTarget !== state.cwd) setState({ dropTarget: state.cwd }) },
+        onDragLeave: function (e) { if (state.dropTarget === state.cwd) setState({ dropTarget: null }) },
+        onDrop: onBodyDrop,
+      }, bodyChildren)
+
+      return create('div', { ref: panelRef, className: 'expl-panel' },
+        create('div', { className: 'expl-resize', onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onPointerCancel: onResizeUp }),
+        create('div', { className: 'expl-head' },
+          create('span', { className: 'expl-title' }, T('explorer.title')),
+          create('div', { className: 'expl-head-btns' },
+            create('button', {
+              className: 'expl-btn',
+              onClick: function () { refreshAll() },
+              title: T('explorer.refreshTitle'),
+              'aria-label': T('explorer.refresh'),
+            }, create('span', { className: 'expl-icon', dangerouslySetInnerHTML: { __html: ICON_REFRESH } })),
+            create('button', {
+              className: 'expl-btn',
+              onClick: function () { if (uploadInputEl) uploadInputEl.click() },
+              title: T('explorer.upload'),
+              'aria-label': T('explorer.upload'),
+            }, '⬆'),
+            create('button', {
+              className: 'expl-btn',
+              style: { fontSize: '18px' },
+              onClick: function (event) {
+                try { layout.closeDetails() } catch (e) {}
+                setHeroDetailsWidth(event.currentTarget, 0)
+              },
+              title: T('explorer.close'),
+              'aria-label': T('explorer.closePanel'),
+            }, '✕'),
+          ),
+        ),
+        create('div', { className: 'expl-path', title: s.cwd || '' }, s.cwd || '…'),
+        (s.uploads && s.uploads.length) ? create('div', { className: 'expl-uploads' },
+          s.uploads.map(function (u, i) {
+            var pct = u.done ? null : (u.total ? Math.round((u.loaded / u.total) * 100) : 0)
+            return create('div', { key: i, className: 'expl-upload-row' + (u.done ? ' expl-upload-done' : '') },
+              create('span', { className: 'expl-upload-glyph' }, u.done ? '✓' : (u.down ? '⬇' : '⬆')),
+              create('span', { className: 'expl-upload-text' },
+                u.done ? u.name
+                  : (u.down ? T('explorer.downloading') : T('explorer.uploading')) + (u.totalFiles > 1 ? '(' + u.idx + '/' + u.totalFiles + ') ' : '') + u.name,
+              ),
+              !u.done && u.total ? create('span', { className: 'expl-upload-pct' }, pct + '%') : null,
+            )
+          }),
+        ) : null,
+        create('input', { type: 'file', multiple: true, style: { display: 'none' }, ref: function (el) { uploadInputEl = el }, onChange: onUploadPicker }),
+        s.error ? create('div', { className: 'expl-error' }, s.error) : null,
+        s.notice ? create('div', { className: 'expl-notice' }, s.notice) : null,
+        s.selected.size > 1
+          ? create('div', { className: 'expl-bulk' }, T('explorer.bulkSelected', { n: s.selected.size }))
+          : null,
+        container,
+        s.menu ? create('div', { className: 'expl-menu-mask', onMouseDown: function () { setState({ menu: null }) }, onContextMenu: function (e) { e.preventDefault(); setState({ menu: null }) } }) : null,
+        s.menu ? create(Menu, { menu: s.menu }) : null,
+      )
+    }
+
+    function HeaderAction(props) {
+      var s = useStore()
+      var sessionId = props && props.sessionId
+      var useSessions = props && props.useSessions
+      var liveCwd = useSessions ? useSessions(function (list) {
+        return (sessionId && list.byId[sessionId]) ? list.byId[sessionId].cwd : undefined
+      }) : undefined
+      var cwdRef = React.useRef(liveCwd)
+      cwdRef.current = liveCwd || cwdRef.current
+      React.useEffect(function () { trackSession(sessionId, cwdRef.current) }, [sessionId])
+      return create('button', {
+        type: 'button',
+        className: 'expl-toggle expl-tool' + (s.open ? ' expl-active' : ''),
+        onClick: function () { try { if (s.open) layout.closeDetails(); else layout.openDetails() } catch (e) {} },
+        title: T('explorer.label'),
+        'aria-label': T('explorer.label'),
+      }, '📁')
+    }
+
+    function HeroAction(props) {
+      var s = useStore()
+      var session = props && props.session
+      var useSessions = props && props.useSessions
+      var liveCwd = useSessions ? useSessions(function (list) {
+        return (props.sessionId && list.byId[props.sessionId]) ? list.byId[props.sessionId].cwd : undefined
+      }) : undefined
+      var blank = !!(session && session.blank && session.composerPhase === 'blank')
+      React.useEffect(function () {
+        if (blank) trackSession(props.sessionId, liveCwd)
+      }, [blank, props.sessionId])
+      if (!blank) return null
+      return create('div', { className: 'expl-hero-dock' },
+        create('button', {
+          type: 'button',
+          className: 'expl-toggle expl-tool' + (s.open ? ' expl-active' : ''),
+          onClick: function (event) {
+            if (s.open) {
+              try { layout.closeDetails() } catch (e) {}
+              setHeroDetailsWidth(event.currentTarget, 0)
+            } else if (!setHeroDetailsWidth(event.currentTarget, DETAILS_DEFAULT)) {
+              try { layout.openDetails() } catch (e) {}
+            }
+          },
+          title: T('explorer.label'),
+          'aria-label': T('explorer.label'),
+        }, '📁'))
+    }
+
+    // ------------------------------------------------------------------
+    // ------------------------------------------------------------------
+    // ▓▓ 区域二 · 会话内预览 · 🫚 姜（files tab 状态）
+    //   files tab 状态机：打开/重载/关闭、FIFO(≤5)、会话切换按 cwd 裁剪。
+    // ------------------------------------------------------------------
+    // 文件标签页：右键/双击「预览」把文件以只读预览展示进会话区的「预览」
+    // tab（原生 conversation.view 槽位，与 对话/轨迹 同级）。
+    // markdown/html/json/csv 有专属渲染器；图片预览；其余按纯文本。
+    // 状态存模块级 store，切走 tab 再切回来内容不丢。
+    // ------------------------------------------------------------------
+    var FILES_TAB_LABEL = function () { return T('files.tab') }
+
+    /** 当前活跃会话：list/read/download 携带给宿主，供围栏直查该会话 cwd。 */
+    var activeSessionId = null
+
+    /** 同时打开的预览 tab 上限：超过后挤掉最早打开的（FIFO）。 */
+    var FILES_MAX_OPEN = 5
+
+    /** path 是否落在 base 目录子树内（base 为根或空时视为全量放行）。 */
+    function withinScope(path, base) {
+      if (!base || base === '/') return true
+      return path === base || path.indexOf(base + '/') === 0
+    }
+
+    /**
+     * 会话切换时按新 cwd 裁剪预览列表：范围外的 tab 自动关闭。
+     * 若当前激活文件被裁掉，激活项顺移到剩余最后一个。
+     * 列表无变化时返回原引用，避免触发多余渲染。
+     */
+    function pruneFilesToScope(files, cwd) {
+      var kept = files.list.filter(function (f) { return withinScope(f.path, cwd) })
+      try { window.__DFV_PRUNE = (window.__DFV_PRUNE || []) ; window.__DFV_PRUNE.push({ cwd: cwd, before: files.list.length, after: kept.length }) } catch (_) {}
+      if (kept.length === files.list.length) return files
+      var activeKept = kept.some(function (f) { return f.path === files.active })
+      var active = files.active
+      if (!activeKept) active = kept.length ? kept[kept.length - 1].path : null
+      return { list: kept, active: active }
+    }
+
+    function setFiles(patch) {
+      setState({ files: Object.assign({}, state.files, patch) })
+      try {
+        var f = state.files
+        window.__DFV_DBG = { n: f.list.length, active: f.active, ops: ((window.__DFV_DBG && window.__DFV_DBG.ops) || 0) + 1 }
+      } catch (_) {}
+    }
+
+    function findFileEntry(path) {
+      for (var i = 0; i < state.files.list.length; i++) {
+        if (state.files.list[i].path === path) return state.files.list[i]
+      }
+      return null
+    }
+
+    /** 点击原生 header 的「预览」tab，把 view ring 切到预览视图。 */
+    function activateFilesView() {
+      try {
+        var tabs = document.querySelectorAll('[role="tab"]')
+        for (var i = 0; i < tabs.length; i++) {
+          if (tabs[i].textContent === FILES_TAB_LABEL()) { tabs[i].click(); return true }
+        }
+      } catch (err) {}
+      return false
+    }
+
+    async function openFileInTab(path) {
+      setState({ menu: null })
+      var entry = findFileEntry(path)
+      if (!entry) {
+        entry = {
+          path: path, name: baseName(path),
+          loading: true, loaded: false, error: '',
+          kind: null, content: '', dataUrl: '', data: '',
+          truncated: false, size: 0,
+        }
+        // FIFO：最多同时 5 个预览，新开的挤掉最早打开的
+        var list = state.files.list.slice()
+        while (list.length >= FILES_MAX_OPEN) list.shift()
+        list.push(entry)
+        setFiles({ list: list, active: path })
+      } else if (entry.loaded) {
+        setFiles({ active: path })
+        activateFilesView()
+        return
+      } else {
+        setFiles({ active: path })
+      }
+      activateFilesView()
+      var res = await rpc('read', { path: path, sessionId: activeSessionId })
+      if (!res.ok && /超出允许范围/.test(res.error || '')) {
+        await new Promise(function (r) { setTimeout(r, 600) })
+        res = await rpc('read', { path: path, sessionId: activeSessionId })
+      }
+      var cur = findFileEntry(path)
+      if (!cur) return
+      cur.loading = false
+      if (!res || !res.ok) {
+        cur.error = (res && res.error) || T('explorer.readFail')
+      } else {
+        cur.error = ''
+        cur.loaded = true
+        cur.kind = res.kind
+        cur.size = res.size || 0
+        if (res.kind === 'text') { cur.content = res.content; cur.truncated = !!res.truncated }
+        else if (res.kind === 'image') { cur.dataUrl = 'data:' + res.mime + ';base64,' + res.data }
+        else if (res.kind === 'pdf') { cur.data = res.data }
+      }
+      setFiles({ list: state.files.list.slice(), active: path })
+    }
+
+    async function reloadFile(path) {
+      var entry = findFileEntry(path)
+      if (!entry) return
+      // 复位 loaded，让 openFileInTab 走重读路径而不是「已打开直接激活」。
+      entry.loaded = false
+      await openFileInTab(path)
+    }
+
+    function closeFileTab(path) {
+      var list = state.files.list
+      var idx = -1
+      for (var i = 0; i < list.length; i++) if (list[i].path === path) { idx = i; break }
+      if (idx < 0) return
+      var next = list.slice(0, idx).concat(list.slice(idx + 1))
+      var active = state.files.active
+      if (active === path) {
+        var neighbor = next[Math.min(idx, next.length - 1)]
+        active = neighbor ? neighbor.path : null
+      }
+      setFiles({ list: next, active: active })
+    }
+
+    function setActiveFile(path) {
+      setFiles({ active: path })
+    }
+
+    // ------------------------------------------------------------------
+    // ▓▓ 区域二 · 会话内预览 · 🫚 姜（渲染器）
+    //   按扩展名分派 md/html/pdf/notebook/json/csv + 图片/纯文本兜底 + FileContent + FilesView 子标签条。
+    // ------------------------------------------------------------------
+    // 文件视图（conversation.view 'dsh-soup-files'）：
+    // 子 tab 条 + 只读预览区（markdown/html/json/csv 渲染 / 图片预览 / 二进制提示）。
+    // ------------------------------------------------------------------
+    // ------------------------------------------------------------------
+    // 预览渲染器：按扩展名分派（信任模型参考 JupyterLab viewer——
+    // markdown 走不可信安全渲染管线，html 进无 allow-* 的沙箱 iframe）。
+    // ------------------------------------------------------------------
+    /** 取路径小写扩展名。 */
+    function extOfName(p) {
+      var m = /\.([A-Za-z0-9]+)$/.exec(String(p || ''))
+      return m ? m[1].toLowerCase() : ''
+    }
+
+    /** 预览渲染器类型：markdown | html | json | csv | tsv | notebook | code | text。 */
+    function previewKind(path) {
+      var ext = extOfName(path)
+      if (ext === 'md' || ext === 'markdown') return 'markdown'
+      if (ext === 'html' || ext === 'htm') return 'html'
+      if (ext === 'json') return 'json'
+      if (ext === 'ipynb') return 'notebook'
+      if (ext === 'csv') return 'csv'
+      if (ext === 'tsv') return 'tsv'
+      return 'text'
+    }
+
+    // 扩展名 → Shiki 语言提示。对齐 DSH 读卡片的 LANG_BY_EXTENSION
+    // （packages/fs/tool-fs read-render.ts），json/md/markdown/html/htm 除外——
+    // 它们走上方专属渲染器。
+    var CODE_LANG_BY_EXT = {
+      ts: 'ts', tsx: 'tsx', mts: 'ts', cts: 'ts',
+      js: 'js', jsx: 'jsx', mjs: 'js', cjs: 'js',
+      jsonc: 'json',
+      py: 'py', rb: 'rb', go: 'go', rs: 'rs', java: 'java',
+      c: 'c', h: 'c', cc: 'cpp', cpp: 'cpp', hpp: 'cpp', cxx: 'cpp',
+      cs: 'cs', kt: 'kotlin', swift: 'swift', php: 'php',
+      sh: 'sh', bash: 'sh', zsh: 'sh',
+      yaml: 'yaml', yml: 'yaml', toml: 'toml', ini: 'ini',
+      mdx: 'mdx', css: 'css', scss: 'scss', less: 'less',
+      sql: 'sql', xml: 'xml', lua: 'lua',
+    }
+
+    /** 超过该字符数的代码文件不做高亮（Shiki 首次高亮的耗时保护）。 */
+    var CODE_HIGHLIGHT_MAX_CHARS = 400000
+
+    /** RFC 4180 风格的分隔符解析（引号感知，"" 转义），返回行数组。 */
+    function parseDelimited(text, delim) {
+      var rows = []
+      var row = []
+      var field = ''
+      var inQuotes = false
+      var n = text.length
+      for (var i = 0; i < n; i++) {
+        var ch = text[i]
+        if (inQuotes) {
+          if (ch === '"') {
+            if (text[i + 1] === '"') { field += '"'; i++ } else { inQuotes = false }
+          } else {
+            field += ch
+          }
+        } else if (ch === '"') {
+          inQuotes = true
+        } else if (ch === delim) {
+          row.push(field); field = ''
+        } else if (ch === '\n') {
+          row.push(field); rows.push(row); row = []; field = ''
+        } else if (ch !== '\r') {
+          field += ch
+        }
+      }
+      if (field !== '' || row.length > 0) { row.push(field); rows.push(row) }
+      return rows
+    }
+
+    /** 把 pretty JSON 切成着色 token 数组（纯文本/React 节点，无 innerHTML）。 */
     function jsonColorNodes(pretty) {
       var out = []
       var last = 0
@@ -1832,229 +2080,9 @@ window.__ModuleLoader__.load({
       }
     }
 
-    function Panel(props) {
-      var s = useStore()
-      var sessionId = props && props.sessionId
-      // 客户端会话快照是本会话 cwd 的可信来源（与官方 DetailsPanel 同源，
-      // 始终是当前会话所在项目目录，而非宿主启动时的根目录）。
-      var useSessions = props && props.useSessions
-      var liveCwd = useSessions ? useSessions(function (list) {
-        return (sessionId && list.byId[sessionId]) ? list.byId[sessionId].cwd : undefined
-      }) : undefined
-      var cwdRef = React.useRef(liveCwd)
-      cwdRef.current = liveCwd || cwdRef.current
-      var panelRef = React.useRef(null)
-      var frameRef = React.useRef(null)
-      var widthRef = React.useRef(DETAILS_DEFAULT)
-      var dragRef = React.useRef({ startX: 0, startW: 0, active: false })
-
-      React.useEffect(function () { trackSession(sessionId, cwdRef.current) }, [sessionId])
-
-      var setFrameWidth = React.useCallback(function (w) {
-        var frame = frameRef.current
-        if (!frame) return
-        try {
-          var gtc = frame.style.gridTemplateColumns
-          if (!gtc) return
-          var parts = gtc.trim().split(/\s+/)
-          if (parts.length < 3) return
-          parts[parts.length - 1] = Math.round(w) + 'px'
-          frame.style.gridTemplateColumns = parts.join(' ')
-        } catch (e) {}
-      }, [])
-
-      React.useEffect(function () {
-        var el = panelRef.current
-        if (!el) return
-        var mo = null
-        var cancelled = false
-        function attach() {
-          var frame = findFrameEl(el)
-          if (!frame || mo) return
-          frameRef.current = frame
-          function sync() {
-            try {
-              var gtc = frame.style.gridTemplateColumns
-              if (!gtc) return
-              var parts = gtc.trim().split(/\s+/)
-              if (parts.length < 3) return
-              var last = parseFloat(parts[parts.length - 1])
-              if (isNaN(last) || last <= 1) { setState({ open: false }); return }
-              setState({ open: true })
-              if (Math.round(last) !== Math.round(widthRef.current)) {
-                parts[parts.length - 1] = Math.round(widthRef.current) + 'px'
-                frame.style.gridTemplateColumns = parts.join(' ')
-              }
-            } catch (e) {}
-          }
-          mo = new MutationObserver(sync)
-          mo.observe(frame, { attributes: true, attributeFilter: ['style'] })
-          sync()
-        }
-        attach()
-        if (!mo) {
-          var tries = 0
-          var t = setInterval(function () {
-            if (cancelled || mo) { clearInterval(t); return }
-            attach()
-            if (++tries > 40) clearInterval(t)
-          }, 100)
-        }
-        return function () { cancelled = true; if (mo) mo.disconnect() }
-      }, [])
-
-      function onResizeDown(e) {
-        e.preventDefault()
-        try { e.currentTarget.setPointerCapture(e.pointerId) } catch (err) {}
-        dragRef.current = { startX: e.clientX, startW: widthRef.current, active: true }
-        if (frameRef.current) { try { frameRef.current.style.transition = 'none' } catch (e) {} }
-      }
-      function onResizeMove(e) {
-        if (!dragRef.current.active) return
-        var w = clampW(dragRef.current.startW - (e.clientX - dragRef.current.startX))
-        widthRef.current = w
-        setFrameWidth(w)
-      }
-      function onResizeUp(e) {
-        dragRef.current.active = false
-        try { e.currentTarget.releasePointerCapture(e.pointerId) } catch (err) {}
-        if (frameRef.current) { try { frameRef.current.style.transition = '' } catch (e) {} }
-      }
-
-      visibleRows.length = 0
-
-      var bodyChildren = []
-      if (state.newItem && state.newItem.parent === state.cwd) {
-        bodyChildren.push(create('div', { key: '__new__', className: 'expl-row' },
-          create('div', { className: 'expl-row-main', style: { paddingLeft: 8 } },
-            create('span', { className: 'expl-icon' }, state.newItem.isDir ? '📁' : '📄'),
-            create(NameInput, {
-              initial: '',
-              selectBase: false,
-              onCommit: function (name) { commitNew(state.newItem.parent, name, state.newItem.isDir) },
-              onCancel: function () { setState({ newItem: null }) },
-            }),
-          ),
-        ))
-      }
-      if (s.tree.length === 0 && !(state.newItem && state.newItem.parent === state.cwd)) {
-        bodyChildren.push(create('div', { key: '__empty__', className: 'expl-muted' }, T('explorer.emptyDir')))
-      } else {
-        s.tree.forEach(function (node) { bodyChildren.push(create(Row, { key: node.path, node: node, depth: 0 })) })
-      }
-
-      var container = create('div', {
-        className: 'expl-body' + (state.dropTarget === state.cwd ? ' drop-target' : ''),
-        onClick: onBlankClick,
-        onContextMenu: onBlankContext,
-        onDragOver: function (e) { e.preventDefault(); e.stopPropagation(); if (state.dropTarget !== state.cwd) setState({ dropTarget: state.cwd }) },
-        onDragLeave: function (e) { if (state.dropTarget === state.cwd) setState({ dropTarget: null }) },
-        onDrop: onBodyDrop,
-      }, bodyChildren)
-
-      return create('div', { ref: panelRef, className: 'expl-panel' },
-        create('div', { className: 'expl-resize', onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onPointerCancel: onResizeUp }),
-        create('div', { className: 'expl-head' },
-          create('span', { className: 'expl-title' }, T('explorer.title')),
-          create('div', { className: 'expl-head-btns' },
-            create('button', {
-              className: 'expl-btn',
-              onClick: function () { refreshAll() },
-              title: T('explorer.refreshTitle'),
-              'aria-label': T('explorer.refresh'),
-            }, create('span', { className: 'expl-icon', dangerouslySetInnerHTML: { __html: ICON_REFRESH } })),
-            create('button', {
-              className: 'expl-btn',
-              onClick: function () { if (uploadInputEl) uploadInputEl.click() },
-              title: T('explorer.upload'),
-              'aria-label': T('explorer.upload'),
-            }, '⬆'),
-            create('button', {
-              className: 'expl-btn',
-              style: { fontSize: '18px' },
-              onClick: function (event) {
-                try { layout.closeDetails() } catch (e) {}
-                setHeroDetailsWidth(event.currentTarget, 0)
-              },
-              title: T('explorer.close'),
-              'aria-label': T('explorer.closePanel'),
-            }, '✕'),
-          ),
-        ),
-        create('div', { className: 'expl-path', title: s.cwd || '' }, s.cwd || '…'),
-        (s.uploads && s.uploads.length) ? create('div', { className: 'expl-uploads' },
-          s.uploads.map(function (u, i) {
-            var pct = u.done ? null : (u.total ? Math.round((u.loaded / u.total) * 100) : 0)
-            return create('div', { key: i, className: 'expl-upload-row' + (u.done ? ' expl-upload-done' : '') },
-              create('span', { className: 'expl-upload-glyph' }, u.done ? '✓' : (u.down ? '⬇' : '⬆')),
-              create('span', { className: 'expl-upload-text' },
-                u.done ? u.name
-                  : (u.down ? T('explorer.downloading') : T('explorer.uploading')) + (u.totalFiles > 1 ? '(' + u.idx + '/' + u.totalFiles + ') ' : '') + u.name,
-              ),
-              !u.done && u.total ? create('span', { className: 'expl-upload-pct' }, pct + '%') : null,
-            )
-          }),
-        ) : null,
-        create('input', { type: 'file', multiple: true, style: { display: 'none' }, ref: function (el) { uploadInputEl = el }, onChange: onUploadPicker }),
-        s.error ? create('div', { className: 'expl-error' }, s.error) : null,
-        s.notice ? create('div', { className: 'expl-notice' }, s.notice) : null,
-        s.selected.size > 1
-          ? create('div', { className: 'expl-bulk' }, T('explorer.bulkSelected', { n: s.selected.size }))
-          : null,
-        container,
-        s.menu ? create('div', { className: 'expl-menu-mask', onMouseDown: function () { setState({ menu: null }) }, onContextMenu: function (e) { e.preventDefault(); setState({ menu: null }) } }) : null,
-        s.menu ? create(Menu, { menu: s.menu }) : null,
-      )
-    }
-
-    function HeaderAction(props) {
-      var s = useStore()
-      var sessionId = props && props.sessionId
-      var useSessions = props && props.useSessions
-      var liveCwd = useSessions ? useSessions(function (list) {
-        return (sessionId && list.byId[sessionId]) ? list.byId[sessionId].cwd : undefined
-      }) : undefined
-      var cwdRef = React.useRef(liveCwd)
-      cwdRef.current = liveCwd || cwdRef.current
-      React.useEffect(function () { trackSession(sessionId, cwdRef.current) }, [sessionId])
-      return create('button', {
-        type: 'button',
-        className: 'expl-toggle expl-tool' + (s.open ? ' expl-active' : ''),
-        onClick: function () { try { if (s.open) layout.closeDetails(); else layout.openDetails() } catch (e) {} },
-        title: T('explorer.label'),
-        'aria-label': T('explorer.label'),
-      }, '📁')
-    }
-
-    function HeroAction(props) {
-      var s = useStore()
-      var session = props && props.session
-      var useSessions = props && props.useSessions
-      var liveCwd = useSessions ? useSessions(function (list) {
-        return (props.sessionId && list.byId[props.sessionId]) ? list.byId[props.sessionId].cwd : undefined
-      }) : undefined
-      var blank = !!(session && session.blank && session.composerPhase === 'blank')
-      React.useEffect(function () {
-        if (blank) trackSession(props.sessionId, liveCwd)
-      }, [blank, props.sessionId])
-      if (!blank) return null
-      return create('div', { className: 'expl-hero-dock' },
-        create('button', {
-          type: 'button',
-          className: 'expl-toggle expl-tool' + (s.open ? ' expl-active' : ''),
-          onClick: function (event) {
-            if (s.open) {
-              try { layout.closeDetails() } catch (e) {}
-              setHeroDetailsWidth(event.currentTarget, 0)
-            } else if (!setHeroDetailsWidth(event.currentTarget, DETAILS_DEFAULT)) {
-              try { layout.openDetails() } catch (e) {}
-            }
-          },
-          title: T('explorer.label'),
-          'aria-label': T('explorer.label'),
-        }, '📁'))
-    }
-
+    // ------------------------------------------------------------------
+    // ▓▓ 区域三 · 速率徽标 · 🧂 盐
+    //   输入框上方实时 t/s 吞吐徽标，数据来自 llm/stream 真实流；timerRef 为共享模块级计时引用。
     // ------------------------------------------------------------------
     // 速度徽标：DOM 注入到 Deep diving（role=status）旁。
     // 不改 DSH 源码。用 MutationObserver 定位消息流里的 Deep diving，
@@ -2202,6 +2230,10 @@ window.__ModuleLoader__.load({
 
     // ------------------------------------------------------------------
     // ------------------------------------------------------------------
+    // ------------------------------------------------------------------
+    // ▓▓ 区域四 · 多行 GoalBar · 🧄 蒜
+    //   复用原生 goal projection 与动作动词，多行完整展示 + textarea 编辑。
+    // ------------------------------------------------------------------
     // GoalBar 多行版：复用 DSH 原生 GoalBar 的 goal projection 与动作动词
     // （onEdit/onPause/onResume/onClear），仅在展示上把单行截断放开为多行、
     // 编辑用 textarea。通过 conversation.input.dock 同 id 'goal' + 更低 priority
@@ -2403,6 +2435,10 @@ window.__ModuleLoader__.load({
     }
 
     /** 应用浏览器半区：注册会话头部/空白会话切换按钮、details 右列面板、GoalBar、速度徽标。 */
+    // ------------------------------------------------------------------
+    // ▓▓ 区域五 · 应用注册（apply）
+    //   把上述各区域组件注册进 slots / inject；导出插件浏览器半区入口 apply/inject。
+    // ------------------------------------------------------------------
     function apply(ctx) {
       var slots = ctx.slots
       layout = ctx.layout

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lyhue1991/dsh-soup",
   "description": "DSH 项目资源管理器：右侧 details 列文件树（并列网格、宽度与左侧工作区一致 264-420px），有 Session log 时在其右侧、空白新会话在输入框上方右端提供 📁 切换按钮；支持多选、双击展开/打开、右键菜单（打开/系统打开/重命名/废纸篓/新建/复制路径）、拖拽移动、上传。文件「打开」在会话区新增「文件」标签页（原生 conversation.view，与对话/轨迹同级）：文本可编辑 ⌘S 保存、图片预览、二进制提示。附带模型吞吐徽标：输入框正上方显示「正在等待模型...」与彩色 t/s 徽标（数据来自 llm/stream 真实流）。附带 GoalBar 多行展示：把原生单行截断 GoalBar 放开为多行完整显示，编辑用 textarea，工具与数据仍走原生 goal。",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "lib/index.js",
   "exports": {