dsh-linked-workspace 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.8.0 — 2026-11-09
+
+- **Image previews**: PNG/JPG/GIF/WebP/BMP/ICO/AVIF/SVG now render in the content panel for both remote and local files (`media.read` / `local.media`, 24 MB cap).
+- **CSV/TSV table view**: CSV and TSV files open in a table by default with a Table/Source toggle. The source view keeps editing, syntax highlighting, and save; tables are capped at 1000 rows and 80 columns.
+- **Move files and folders**: the directory context menu gains "Move to…" for remote and local entries. A directory picker chooses the destination inside the same tree; the plugin rejects collisions, moving a folder into itself, moving the workspace root, and moving a file with unsaved edits.
+- New host APIs `media.read`, `fs.move`, `local.media`, `local.move`; `FS_EXISTS` now maps to HTTP 409.
+
 ## 0.7.0 — 2026-11-09
 
 - **VSCode-like tree interaction**: single-click a folder to expand/collapse and single-click a file to open it. A single-click preview tab is replaced by the next file; double-click pins the tab so later single clicks do not overwrite it. Double-clicking a folder keeps it expanded.

package/README.en.md

@@ -61,6 +61,7 @@ The content panel now edits **Markdown / PDF / DOCX / XLSX / PPTX** files on bot
   - **Refresh**: reload roots, git status and search.
 - File-type icons for JS/TS/Python/JSON/Markdown/Shell/YAML/images/archives/config files, etc.
 - Editor: line numbers, syntax highlighting (layered rendering), theme colors, `Ctrl/Cmd+S` save, conflict prompt (reload/force save), read-only protection for binary and >2 MB files, UTF-8/LF/CRLF/line-count status bar. The embedded content panel hides the path/save header; unsaved changes show a gray dot in the file tab. Read-only tabs render the file content but cannot be edited or saved.
+- **Image and CSV preview**: PNG/JPG/GIF/WebP/BMP/ICO/AVIF/SVG render directly in the content panel (up to 24 MB). CSV/TSV opens as a table by default with a Table/Source toggle; the source view remains editable and saveable. Tables are capped at 1000 rows and 80 columns.
 - **Shortcuts**: `Ctrl/Cmd+S` saves the current file; `Ctrl/Cmd+W` closes the current tab (with a save/discard/cancel prompt when dirty); `Ctrl+Tab` / `Shift+Ctrl+Tab` cycles tabs; `Ctrl/Cmd+B` toggles the directory panel; `Ctrl/Cmd+Shift+F` opens file search.
 - **Auto save**: enable it under Settings → Connections → Editor behavior. It saves about one second after you stop typing. When off, use `Ctrl+S`. Closing a dirty file always asks first instead of discarding silently.
 - Multiple files can be open at once (up to 12 slots). A single click opens a preview tab and replaces the current unpinned preview; double-click pins the tab; clicking the same file focuses its existing tab. Local files use the same internal editor and can be edited and saved.
@@ -72,7 +73,7 @@ The content panel now edits **Markdown / PDF / DOCX / XLSX / PPTX** files on bot
 
 ### Context menu (files, folders, roots)
 
-Transfer (download to `.remote` / upload to remote), download to the default folder, queue, open, edit with Notepad, copy, paste, copy path, rename, delete, change permissions, new folder/file, properties. Remote operations use SFTP; local operations use the local filesystem. The transfer queue runs one job at a time.
+Transfer (download to `.remote` / upload to remote), download to the default folder, queue, open, edit with Notepad, copy, paste, copy path, **Move to…** (only within the same local or remote tree), rename, delete, change permissions, new folder/file, properties. Remote operations use SFTP; local operations use the local filesystem. The transfer queue runs one job at a time.
 
 ### Linked-workspace layout
 

package/README.md

@@ -62,6 +62,7 @@
   - **刷新**：重新拉取根目录、git 状态与搜索。
 - 不同文件类型使用不同彩色图标（JS/TS/Python/JSON/Markdown/Shell/YAML/图片/压缩包/配置文件等）。
 - 编辑器：行号、语法高亮（叠层渲染）、主题配色、`Ctrl/Cmd+S` 保存、冲突提示（重新加载/强制保存）、二进制与 >2 MB 文件只读保护、UTF-8/LF/CRLF/行数状态栏；内嵌内容面板不显示文件路径/保存工具条，未保存修改在文件标签前显示灰点。
+- **图片与 CSV 预览**：PNG/JPG/GIF/WebP/BMP/ICO/AVIF/SVG 直接在内容面板按图片显示（最大 24 MB）；CSV/TSV 默认按表格显示，可在「表格 / 源码」间切换，源码视图仍可编辑保存。超过 1000 行或 80 列时只展示截断后的表格。
 - **快捷键**：`Ctrl/Cmd+S` 保存当前文件；`Ctrl/Cmd+W` 关闭当前标签（未保存时提示保存/放弃/取消）；`Ctrl+Tab` / `Shift+Ctrl+Tab` 切换标签；`Ctrl/Cmd+B` 显示/隐藏目录面板；`Ctrl/Cmd+Shift+F` 打开文件搜索。
 - **自动保存**：设置 → 连接 →「编辑器行为」中开启；停止输入约 1 秒后自动保存。关闭时使用 `Ctrl+S` 手动保存；未保存文件关闭前会弹窗，不会静默丢弃。
 - **多个文件同时打开**：文件内容面板内最多同时打开 12 个标签；单击文件打开预览标签并替换未固定的预览，双击固定标签，重复点击同一文件聚焦原标签；本地文件与远端文件共用内部编辑器，本地文件可编辑保存。
@@ -73,7 +74,7 @@
 
 ### 右键菜单（文件/文件夹/根节点）
 
-传输（下载到 `.remote`）、下载到默认文件夹、队列、打开、用记事本编辑、复制、粘贴、复制路径、重命名、删除、更改权限、新建（文件夹/文件）、属性。远端操作走 SFTP；本地目录的同类操作走本机文件系统。传输队列一次执行一个任务并显示排队/传输中/完成/失败状态。
+传输（下载到 `.remote`）、下载到默认文件夹、队列、打开、用记事本编辑、复制、粘贴、复制路径、**移动到…**（只允许移动到同一棵本地树或同一棵远程树内的目录）、重命名、删除、更改权限、新建（文件夹/文件）、属性。远端操作走 SFTP；本地目录的同类操作走本机文件系统。传输队列一次执行一个任务并显示排队/传输中/完成/失败状态。
 
 ### 联动工作区结构
 

package/docs/API.md

@@ -60,10 +60,12 @@ relative to the scope root, or absolute inside it.
 | `workspaces.test` | `{ id }` | `{ ok, latencyMs?, resolvedPath?, error? }` |
 | `fs.list` | `{ workspaceId?/linkedId?, path }` | `{ path, entries: RemoteEntry[] }` |
 | `fs.read` | `{ workspaceId?/linkedId?, path, maxBytes? }` | `FileRead` |
+| `media.read` | `{ workspaceId?/linkedId?, path }` | `{ path, size, mtime, mime, base64 }` (PNG/JPG/GIF/WebP/BMP/ICO/AVIF/SVG, max 24 MB) |
 | `fs.write` | `{ workspaceId?/linkedId?, path, content, expectedMtime? }` | `{ path, size, mtime }` |
 | `fs.stat` | `{ workspaceId?/linkedId?, path }` | `{ path, relative, type, size, mtime, mode }` |
 | `fs.mkdir` | `{ workspaceId?/linkedId?, path }` | `{}` |
 | `fs.rename` | `{ workspaceId?/linkedId?, from, to }` | `{}` |
+| `fs.move` | `{ workspaceId?/linkedId?, path, targetDir? }` | `{ path }` (same remote tree; collision → 409) |
 | `fs.delete` | `{ workspaceId?/linkedId?, path }` | `{}` |
 | `fs.home` | `{ workspaceId?/linkedId? }` | `{ home }` |
 | `settings.get` | `{}` | `{ editorTheme, editorThemeFamily, editorThemeMode, fileOpenMode, autoSave }` |
@@ -93,9 +95,11 @@ relative to the scope root, or absolute inside it.
 | `fs.copy` | `{ workspaceId?/linkedId?, path, targetDir? }` | `{ path, files }` |
 | `fs.chmod` | `{ workspaceId?/linkedId?, path, mode }` | stat |
 | `local.read` | `{ path }` | `{ path, content, size, mtime, truncated, binary, tooLarge, editable }` |
+| `local.media` | `{ path }` | `{ path, size, mtime, mime, base64 }` (max 24 MB) |
 | `local.write` | `{ path, content, expectedMtime? }` | `{ path, size, mtime }` |
 | `local.stat` | `{ path }` | `{ path, type, size, mtime, mode }` |
 | `local.rename` | `{ from, to }` | `{ path }` |
+| `local.move` | `{ path, targetDir?, root? }` | `{ path, type }` (same local tree; collision → 409) |
 | `local.delete` | `{ path, root? }` | `{}` (recursive) |
 | `local.copy` | `{ path, targetDir? }` | `{ path, type }` |
 | `local.newFile` | `{ path }` | `{ path }` |

package/docs/VERIFY.md

@@ -113,3 +113,13 @@ Host code (lib/) reloads live with `plugin_manager set_plugin include:linked-wor
 7. 以上操作在本地目录与远端（联动工作区）文件上都应可用；Office/PDF 需要 Python 3 + python-docx/openpyxl/python-pptx/PyMuPDF。
 
 - 新建一个空白联动工作区会话：右侧栏开始页应出现「联动工作区目录」，打开后目录面板正常显示。
+
+## 图片 / CSV 预览与移动（0.8.0）
+
+1. 本地目录与远端目录各放一个 PNG、一个 SVG、一个 JPG：单击文件应在内容面板显示图片，状态栏显示 MIME 与大小；损坏图片显示错误提示而不是空白。
+2. 打开 CSV/TSV：默认显示表格，第一行作为表头；超过 1000 行或 80 列时显示截断提示；点「源码」可切换编辑器并保存，表格模式下保存按钮禁用。
+3. 含引号、逗号、字段内换行的 CSV 应正确分列；TSV 按制表符分列。
+4. 右键文件/文件夹 →「移动到…」：在本地目录内可移动到当前目录的任意子目录，在远端目录内可移动到当前远程工作区根目录或子目录。
+5. 移动后目录树与内容面板一致；已打开的旧标签关闭，已修改未保存的文件阻止移动并提示先保存。
+6. 目标目录已有同名文件时提示冲突（409），不覆盖；文件夹不能移动到自身或其子目录。
+7. 移动选择器不能浏览到当前工作区/本地目录之外，根目录本身不可作为被移动项。

package/lib/client.js

@@ -1848,6 +1848,13 @@ function fileIconSpec(name, isDir) {
       return String(cwd || '').replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase();
     }
 
+    function pathInsideOf(root, target) {
+      var base = linkedScopeKey(root);
+      var value = linkedScopeKey(target);
+      if (!base) return true;
+      return value === base || value.indexOf(base + '/') === 0;
+    }
+
     function isLinkedWorkspaceId(workspaceId) {
       return Boolean(workspaceId) && linkedWorkspaceKeys.has(String(workspaceId));
     }
@@ -1998,6 +2005,19 @@ function fileIconSpec(name, isDir) {
       tooLarge: '文件过大（{{size}}），暂不支持在侧边栏内编辑。',
       truncated: '内容已截断',
       fileLoadError: '无法打开文件',
+      imageLoadError: '无法预览图片',
+      previewOnly: '图片预览',
+      csvTable: '表格',
+      csvSource: '源码',
+      csvEmpty: '没有可显示的数据',
+      csvTruncated: '仅显示前 1000 行',
+      moveTitle: '移动到…',
+      moveMessage: '选择「{{name}}」要移动到的目录',
+      moveDone: '已移动',
+      moveDirty: '该文件有未保存修改，请先保存或关闭后再移动',
+      moveFailed: '移动失败',
+      moveHint: '进入目标文件夹后点击「使用此目录」',
+      ctxMove: '移动到…',
       noWorkspace: '远程工作区不存在，请重新添加。',
       noTarget: '没有可用的远程目录。先在设置 → 连接中添加，或点击左侧「添加工作区」。',
       treeEmpty: '空目录',
@@ -2308,6 +2328,19 @@ function fileIconSpec(name, isDir) {
       tooLarge: 'File too large ({{size}}); editing it in the sidebar is not supported yet.',
       truncated: 'Content truncated',
       fileLoadError: 'Cannot open the file',
+      imageLoadError: 'Cannot preview this image',
+      previewOnly: 'Image preview',
+      csvTable: 'Table',
+      csvSource: 'Source',
+      csvEmpty: 'No rows to show',
+      csvTruncated: 'Showing the first 1000 rows',
+      moveTitle: 'Move to…',
+      moveMessage: 'Choose the destination folder for "{{name}}"',
+      moveDone: 'Moved',
+      moveDirty: 'This file has unsaved changes; save or close it before moving',
+      moveFailed: 'Move failed',
+      moveHint: 'Open the destination folder, then click “Use this directory”',
+      ctxMove: 'Move to…',
       noWorkspace: 'This remote workspace no longer exists. Add it again.',
       noTarget: 'No remote directory is available. Add one in Settings → Connections, or click “Add workspace” on the left.',
       treeEmpty: 'Empty directory',
@@ -2679,9 +2712,58 @@ function fileIconSpec(name, isDir) {
       if (value === '.docx') return 'docx';
       if (value === '.xlsx') return 'xlsx';
       if (value === '.pptx') return 'pptx';
+      if (value === '.csv' || value === '.tsv') return 'csv';
+      if (value === '.png' || value === '.jpg' || value === '.jpeg' || value === '.gif'
+        || value === '.webp' || value === '.bmp' || value === '.ico' || value === '.avif'
+        || value === '.svg') return 'image';
       return '';
     }
 
+    function isCsvPath(path) {
+      var ext = String(path || '').toLowerCase().match(/\.[^./\\]+$/);
+      return Boolean(ext && (ext[0] === '.csv' || ext[0] === '.tsv'));
+    }
+
+    function parseDelimited(text, delimiter) {
+      var rows = [];
+      var row = [];
+      var field = '';
+      var quoted = false;
+      var index = 0;
+      var source = String(text || '');
+      function pushField() { row.push(field); field = ''; }
+      function pushRow() {
+        pushField();
+        rows.push(row);
+        row = [];
+      }
+      while (index < source.length) {
+        var ch = source[index];
+        if (quoted) {
+          if (ch === '"') {
+            if (source[index + 1] === '"') { field += '"'; index += 2; continue; }
+            quoted = false; index += 1; continue;
+          }
+          field += ch; index += 1; continue;
+        }
+        if (ch === '"') { quoted = true; index += 1; continue; }
+        if (ch === delimiter) { pushField(); index += 1; continue; }
+        if (ch === '\r') { index += 1; continue; }
+        if (ch === '\n') { pushRow(); index += 1; continue; }
+        field += ch; index += 1;
+      }
+      if (field !== '' || row.length > 0) pushRow();
+      return rows;
+    }
+
+    function csvDelimiterOf(path, text) {
+      if (/\.tsv$/i.test(String(path || ''))) return '\t';
+      var firstLine = String(text || '').split(/\r?\n/, 1)[0] || '';
+      var commas = (firstLine.match(/,/g) || []).length;
+      var semicolons = (firstLine.match(/;/g) || []).length;
+      return semicolons > commas ? ';' : ',';
+    }
+
     function sanitizeDocumentHtml(html) {
       try {
         var parsed = new DOMParser().parseFromString(String(html || ''), 'text/html');
@@ -3128,6 +3210,17 @@ function fileIconSpec(name, isDir) {
       '.rw-props{display:grid;grid-template-columns:70px minmax(0,1fr);gap:5px 9px;font-size:12px;line-height:18px}',
       '.rw-props-key{color:var(--dsw-alias-label-tertiary)}',
       '.rw-props-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+      '.rw-image-preview{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary)}',
+      '.rw-image-head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);min-width:0;flex:none}',
+      '.rw-image-head .rw-actions{display:flex;align-items:center;gap:6px;flex:none}',
+      '.rw-image-stage{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:0;overflow:auto;padding:18px;background:repeating-conic-gradient(var(--dsw-alias-bg-layer-1) 0% 25%,var(--dsw-alias-bg-base) 0% 50%) 50%/18px 18px}',
+      '.rw-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 2px 16px rgba(0,0,0,.18)}',
+      '.rw-csv-wrap{flex:1 1 auto;min-height:0;overflow:auto;background:var(--dsw-alias-bg-base)}',
+      '.rw-csv-table{border-collapse:collapse;font:12px/18px ui-monospace,"Cascadia Code",Consolas,monospace;min-width:100%}',
+      '.rw-csv-table th{position:sticky;top:0;z-index:1;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-tertiary);font-weight:600;text-align:left;padding:4px 8px;border:1px solid var(--dsw-alias-border-l1);white-space:nowrap}',
+      '.rw-csv-table td{padding:3px 8px;border:1px solid var(--dsw-alias-border-l1);vertical-align:top;max-width:360px;overflow-wrap:anywhere}',
+      '.rw-csv-table tr:nth-child(even) td{background:color-mix(in srgb,var(--dsw-alias-bg-layer-1) 52%,transparent)}',
+      '.rw-csv-note{padding:5px 9px;font-size:10.5px;color:var(--dsw-alias-label-tertiary);border-top:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1)}',
       '.rw-queue-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--dsw-alias-border-l1);font-size:12px}',
       '.rw-queue-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
       '.rw-queue-state{flex:none;font-size:10.5px;color:var(--dsw-alias-label-tertiary)}',
@@ -3484,6 +3577,7 @@ function fileIconSpec(name, isDir) {
       var t = props.t;
       var locale = props.locale;
       var initialPath = props.initialPath || '';
+      var root = props.root || '';
       var state = useState({ loading: true, listing: null, error: '', input: initialPath, creating: false, folderName: '' });
       var local = state[0];
       var setLocal = state[1];
@@ -3505,6 +3599,7 @@ function fileIconSpec(name, isDir) {
 
       function navigate(path) {
         if (!path) return;
+        if (root && !pathInsideOf(root, path)) return;
         load(path);
       }
 
@@ -3607,7 +3702,7 @@ function fileIconSpec(name, isDir) {
           h('div', { className: 'rw-actions' },
             h('button', {
               type: 'button', className: 'rw-btn rw-btn-sm rw-btn-primary',
-              disabled: !listing || local.loading,
+              disabled: !listing || local.loading || (root && !pathInsideOf(root, listing.path)),
               onClick: function () { if (listing && props.onPick) props.onPick(listing.path); },
             }, IconCheck(12), t('useThisDir')))),
         local.creating
@@ -3705,6 +3800,128 @@ function fileIconSpec(name, isDir) {
           }, IconCheck(12), t('useThisDir'))));
     }
 
+    function ScopePathPicker(props) {
+      var t = props.t;
+      var locale = props.locale;
+      var scope = props.scope;
+      var root = props.root || '';
+      var state = useState({ loading: true, listing: null, error: '' });
+      var view = state[0];
+      var setView = state[1];
+
+      var load = useCallback(function (path) {
+        setView(function (previous) { return Object.assign({}, previous, { loading: true, error: '' }); });
+        var request = Object.assign({ path: path || root }, scopeParams(scope));
+        apiCall('fs.list', request).then(function (result) {
+          setView({ loading: false, listing: result, error: '' });
+        }).catch(function (error) {
+          setView({ loading: false, listing: null, error: messageOf(error, t, locale) });
+        });
+      }, [scopeKeyOf(scope), root]);
+
+      useEffect(function () { load(props.initialPath || root); }, []);
+
+      var listing = view.listing;
+      var dirs = listing ? (listing.entries || []).filter(function (entry) { return entry.type === 'dir'; }) : [];
+      var parent = listing && listing.path !== root
+        ? listing.path.replace(/\/+$/, '').replace(/\/[^/]*$/, '') || '/'
+        : '';
+      return h('div', { className: 'rw-browser rw-move-browser' },
+        h('div', { className: 'rw-browser-head' },
+          h('button', {
+            type: 'button', className: 'rw-icon-btn', title: t('parentDir'),
+            disabled: view.loading || !parent,
+            onClick: function () { if (parent) load(parent); },
+          }, h('span', { style: { transform: 'rotate(180deg)', display: 'inline-flex' } }, IconChevron(13))),
+          h('div', { className: 'rw-breadcrumb rw-input-mono', title: listing ? listing.path : '' },
+            listing ? listing.path : t('loading')),
+          view.loading ? Spinner(13) : null),
+        h('div', { className: 'rw-browser-list', role: 'list' },
+          view.error
+            ? h('div', { className: 'rw-row-msg' }, IconAlert(12), view.error)
+            : dirs.length === 0
+              ? h('div', { className: 'rw-row-msg' }, t('noEntries'))
+              : dirs.map(function (entry) {
+                return h('button', {
+                  key: entry.path, type: 'button', className: 'rw-browser-row', role: 'listitem',
+                  onClick: function () { load(entry.path); },
+                }, h('span', { className: 'rw-dir-icon' }, IconFolder(13, false)), h('span', null, entry.name));
+              })),
+        h('div', { className: 'rw-browser-actions', style: { padding: '8px' } },
+          h('span', { className: 'rw-hint' }, t('moveHint')),
+          h('button', {
+            type: 'button', className: 'rw-btn rw-btn-sm rw-btn-primary',
+            disabled: !listing || view.loading,
+            onClick: function () { if (listing) props.onPick(listing.path); },
+          }, IconCheck(12), t('useThisDir'))));
+    }
+
+    function ImagePreview(props) {
+      var ctx = props.ctx;
+      var t = props.t;
+      var locale = props.locale;
+      var scope = props.scope;
+      var local = props.local === true;
+      var filePath = props.path;
+      var state = useState({ loading: true, error: null, data: null });
+      var view = state[0];
+      var setView = state[1];
+      var params = scopeParams(scope);
+
+      var load = useCallback(function () {
+        if (!filePath || (!local && !scope)) {
+          setView({ loading: false, error: new Error(t('noWorkspace')), data: null });
+          return;
+        }
+        setView({ loading: true, error: null, data: null });
+        var request = local ? { path: filePath } : Object.assign({ path: filePath }, params);
+        apiCall(local ? 'local.media' : 'media.read', request).then(function (result) {
+          setView({ loading: false, error: null, data: result });
+        }).catch(function (error) {
+          setView({ loading: false, error: error, data: null });
+        });
+      }, [scopeKeyOf(scope), filePath, local]);
+
+      useEffect(function () { load(); }, [load]);
+
+      var name = basename(filePath) || t('fileTabTitle');
+      var header = h('div', { className: 'rw-image-head' },
+        h(FileGlyph, { name: name, size: 15 }),
+        h('div', { className: 'rw-editor-title' },
+          h('span', { className: 'rw-editor-name', title: name }, name),
+          h('span', { className: 'rw-editor-path', title: filePath }, filePath)),
+        h('div', { className: 'rw-actions' },
+          h('button', { type: 'button', className: 'rw-btn rw-btn-sm', onClick: load, disabled: view.loading }, IconRefresh(12), t('reload'))));
+
+      if (view.loading) {
+        return h('div', { className: 'rw-image-preview' }, header,
+          h('div', { className: 'rw-editor-message' }, Spinner(14), t('loading')));
+      }
+      if (view.error) {
+        return h('div', { className: 'rw-image-preview' }, header,
+          h('div', { className: 'rw-editor-message' },
+            h(Banner, { kind: 'error' }, t('imageLoadError') + '：' + messageOf(view.error, t, locale)),
+            h('button', { type: 'button', className: 'rw-btn', onClick: load }, IconRefresh(13), t('retry'))));
+      }
+      var data = view.data;
+      return h('div', { className: 'rw-image-preview' },
+        header,
+        h('div', { className: 'rw-image-stage' },
+          h('img', {
+            className: 'rw-image',
+            src: 'data:' + data.mime + ';base64,' + data.base64,
+            alt: name,
+            onError: function () {
+              setView({ loading: false, error: new Error(t('imageLoadError')), data: null });
+            },
+          })),
+        h('div', { className: 'rw-editor-status' },
+          h('span', { className: 'rw-status-chip' }, data.mime || 'image'),
+          h('span', { className: 'rw-status-chip' }, formatBytes(data.size || 0)),
+          h('span', { className: 'rw-fill', style: { flex: '1 1 auto' } }),
+          h('span', { className: 'rw-status-chip' }, t('previewOnly'))));
+    }
+
     // ── editor ─────────────────────────────────────────────────────────────
 
     function colorForToken(colors, type) {
@@ -3756,6 +3973,10 @@ function fileIconSpec(name, isDir) {
       var settings = useRuntimeSettings();
       var theme = getTheme(resolveEditorTheme(settings));
       var language = languageOf(filePath);
+      var csvMode = isCsvPath(filePath);
+      var csvTableState = useState(true);
+      var showCsvTable = csvTableState[0];
+      var setShowCsvTable = csvTableState[1];
 
       var loadState = useState({ loading: true, error: null, file: null });
       var load = loadState[0];
@@ -3880,6 +4101,14 @@ function fileIconSpec(name, isDir) {
         return count;
       }, [content]);
       var gutterLines = typeof lineCount === 'number' && lineCount <= 20000;
+      var csvRows = useMemo(function () {
+        if (!csvMode) return [];
+        var text = content.length > 1000000 ? content.slice(0, 1000000) : content;
+        var delimiter = csvDelimiterOf(filePath, text);
+        return parseDelimited(text, delimiter).slice(0, 1000).map(function (row) {
+          return row.slice(0, 80);
+        });
+      }, [content, filePath, csvMode]);
       var highlighted = useMemo(function () {
         if (!editable) return null;
         return highlightNodes(content, language, theme, 180000);
@@ -3910,13 +4139,20 @@ function fileIconSpec(name, isDir) {
           props.onClose
             ? h('button', { type: 'button', className: 'rw-icon-btn', title: t('closeEditor'), onClick: props.onClose }, IconClose(13))
             : null,
+          csvMode
+            ? h('button', {
+              type: 'button', className: 'rw-btn rw-btn-sm',
+              onClick: function () { setShowCsvTable(function (previous) { return !previous; }); },
+              title: showCsvTable ? t('csvSource') : t('csvTable'),
+            }, showCsvTable ? t('csvSource') : t('csvTable'))
+            : null,
           h('button', {
             type: 'button', className: 'rw-btn rw-btn-sm', onClick: function () { loadFile(); },
             disabled: load.loading || save.saving,
           }, IconRefresh(12), t('reload')),
           h('button', {
             type: 'button', className: 'rw-btn rw-btn-sm rw-btn-primary', onClick: function () { saveFile(false); },
-            disabled: !editable || save.saving,
+            disabled: !editable || save.saving || (csvMode && showCsvTable),
           }, save.saving ? Spinner(12) : IconSave(12), save.saving ? t('saving') : t('save'))));
 
       if (load.loading) {
@@ -3952,46 +4188,66 @@ function fileIconSpec(name, isDir) {
             : null;
 
       var canView = Boolean(load.file && !load.file.binary && !load.file.tooLarge);
+      var csvColumnCount = 0;
+      csvRows.forEach(function (row) { if (row.length > csvColumnCount) csvColumnCount = row.length; });
+      var csvTable = csvRows.length === 0
+        ? h('div', { className: 'rw-editor-message' }, t('csvEmpty'))
+        : h('div', { className: 'rw-csv-wrap' },
+          h('table', { className: 'rw-csv-table' },
+            h('thead', null, h('tr', null,
+              Array.from({ length: csvColumnCount }, function (_, index) {
+                return h('th', { key: 'h' + index, title: csvRows[0][index] || '' }, csvRows[0][index] || '');
+              }))),
+            h('tbody', null, csvRows.slice(1).map(function (row, rowIndex) {
+              return h('tr', { key: 'r' + rowIndex },
+                Array.from({ length: csvColumnCount }, function (_, columnIndex) {
+                  var value = row[columnIndex] === undefined ? '' : row[columnIndex];
+                  return h('td', { key: 'c' + columnIndex, title: value }, value);
+                }));
+            }))),
+          csvRows.length >= 1000 ? h('div', { className: 'rw-csv-note' }, t('csvTruncated')) : null);
       var body = canView
-        ? h('div', { className: 'rw-editor-body' },
-          h('div', { className: 'rw-code' },
-            h('div', { className: 'rw-gutter', ref: gutterRef },
-              gutterLines
-                ? h('div', { className: 'rw-gutter-inner' }, Array.from({ length: lineCount }, function (_, index) { return index + 1; }).join('\n'))
-                : null),
-            h('div', { className: 'rw-code-area' },
-              h('pre', { className: 'rw-highlight', ref: highlightRef, 'aria-hidden': 'true' },
-                highlighted || content),
-              h('textarea', {
-                ref: textareaRef,
-                className: 'rw-textarea',
-                readOnly: readOnly || !editable,
-                value: content,
-                spellCheck: false,
-                wrap: 'off',
-                onChange: function (event) {
-                  setContent(event.currentTarget.value);
-                  setDirty(true);
-                  setSave({ saving: false, conflict: false, error: '', ok: false });
-                },
-                onScroll: syncScroll,
-                onKeyDown: function (event) {
-                  if (!editable) return;
-                  if (event.key === 'Tab' && !event.ctrlKey && !event.altKey && !event.metaKey) {
-                    event.preventDefault();
-                    var target = event.currentTarget;
-                    var start = target.selectionStart;
-                    var end = target.selectionEnd;
-                    var next = content.slice(0, start) + '    ' + content.slice(end);
-                    setContent(next);
+        ? (csvMode && showCsvTable
+          ? csvTable
+          : h('div', { className: 'rw-editor-body' },
+            h('div', { className: 'rw-code' },
+              h('div', { className: 'rw-gutter', ref: gutterRef },
+                gutterLines
+                  ? h('div', { className: 'rw-gutter-inner' }, Array.from({ length: lineCount }, function (_, index) { return index + 1; }).join('\n'))
+                  : null),
+              h('div', { className: 'rw-code-area' },
+                h('pre', { className: 'rw-highlight', ref: highlightRef, 'aria-hidden': 'true' },
+                  highlighted || content),
+                h('textarea', {
+                  ref: textareaRef,
+                  className: 'rw-textarea',
+                  readOnly: readOnly || !editable,
+                  value: content,
+                  spellCheck: false,
+                  wrap: 'off',
+                  onChange: function (event) {
+                    setContent(event.currentTarget.value);
                     setDirty(true);
-                    requestAnimationFrame(function () {
-                      target.selectionStart = start + 4;
-                      target.selectionEnd = start + 4;
-                    });
-                  }
-                },
-              }))))
+                    setSave({ saving: false, conflict: false, error: '', ok: false });
+                  },
+                  onScroll: syncScroll,
+                  onKeyDown: function (event) {
+                    if (!editable) return;
+                    if (event.key === 'Tab' && !event.ctrlKey && !event.altKey && !event.metaKey) {
+                      event.preventDefault();
+                      var target = event.currentTarget;
+                      var start = target.selectionStart;
+                      var end = target.selectionEnd;
+                      var next = content.slice(0, start) + '    ' + content.slice(end);
+                      setContent(next);
+                      setDirty(true);
+                      requestAnimationFrame(function () {
+                        target.selectionStart = start + 4;
+                        target.selectionEnd = start + 4;
+                      });
+                    }
+                  },
+                })))))
         : h('div', { className: 'rw-editor-message' }, notice, h('span', { className: 'rw-muted' }, t('readOnly')));
 
       return h('div', { className: 'rw-editor', style: containerStyle },
@@ -4495,6 +4751,23 @@ function fileIconSpec(name, isDir) {
           h('button', { type: 'button', className: 'rw-btn rw-btn-sm', onClick: props.onClose }, props.t('close'))));
     }
 
+    function MoveDialog(props) {
+      var picker = props.side === 'local'
+        ? h(LocalPathPicker, {
+          t: props.t, locale: props.locale, initialPath: props.initialPath, root: props.root,
+          onPick: props.onPick,
+        })
+        : h(ScopePathPicker, {
+          t: props.t, locale: props.locale, scope: props.scope, root: props.root,
+          initialPath: props.initialPath, onPick: props.onPick,
+        });
+      return h(DialogShell, { title: props.title, onClose: props.onClose },
+        h('div', { className: 'rw-dialog-message' }, props.message),
+        picker,
+        h('div', { className: 'rw-dialog-actions' },
+          h('button', { type: 'button', className: 'rw-btn rw-btn-sm', onClick: props.onClose }, props.t('cancel'))));
+    }
+
     function QueueDialog(props) {
       return h(DialogShell, { title: props.title, onClose: props.onClose },
         props.queue.length === 0
@@ -5320,6 +5593,56 @@ function fileIconSpec(name, isDir) {
         }).catch(noticeError);
       }
 
+      function pathUnder(filePath, parentPath) {
+        if (!filePath || !parentPath) return false;
+        var normalized = String(filePath).replace(/\\/g, '/').replace(/\/+$/, '');
+        var parent = String(parentPath).replace(/\\/g, '/').replace(/\/+$/, '');
+        return normalized === parent || normalized.indexOf(parent + '/') === 0 || normalized.indexOf(parent + '\\') === 0;
+      }
+
+      function moveEntry(side, oldPath, targetDir) {
+        var blocked = openFiles.some(function (file) {
+          return file.side === side && pathUnder(file.path, oldPath) && fileDirty[file.key];
+        });
+        if (blocked) {
+          showNotice('error', t('moveDirty'));
+          return;
+        }
+        var method = side === 'remote' ? 'fs.move' : 'local.move';
+        var params = side === 'remote'
+          ? Object.assign({ path: oldPath, targetDir: targetDir }, scopeParams(scopeRef))
+          : { path: oldPath, targetDir: targetDir, root: selected.localPath };
+        apiCall(method, params).then(function (result) {
+          var nextPath = result && result.path ? result.path : oldPath;
+          setOpenFiles(function (previous) {
+            return previous.filter(function (file) {
+              return !(file.side === side && pathUnder(file.path, oldPath));
+            });
+          });
+          setActiveFileKey(function (activeKey) {
+            var stillOpen = openFiles.filter(function (file) {
+              return file.key === activeKey && !(file.side === side && pathUnder(file.path, oldPath));
+            });
+            if (stillOpen.length > 0) return activeKey;
+            var remaining = openFiles.filter(function (file) {
+              return !(file.side === side && pathUnder(file.path, oldPath));
+            });
+            return remaining.length > 0 ? remaining[remaining.length - 1].key : null;
+          });
+          setFileDirty(function (previous) {
+            var next = Object.assign({}, previous);
+            openFiles.forEach(function (file) {
+              if (file.side === side && pathUnder(file.path, oldPath)) delete next[file.key];
+            });
+            return next;
+          });
+          setDialog(null);
+          showNotice('success', t('moveDone'));
+          refreshTree();
+          if (nextPath !== oldPath) refreshTree();
+        }).catch(noticeError);
+      }
+
       function submitNew(side, dirPath, name, isDir) {
         var target = joinChildPath(dirPath, name, side);
         var docKind = documentKindOf(name);
@@ -5399,6 +5722,15 @@ function fileIconSpec(name, isDir) {
         items.push({ separator: true });
         items.push({ label: t('ctxCopyPath'), onSelect: function () { copyPathToClipboard(menu.path); } });
         items.push({ separator: true });
+        var rootPath = menu.side === 'remote' ? selected.remotePath : selected.localPath;
+        if (menu.path !== rootPath) {
+          items.push({ label: t('ctxMove'), onSelect: function () {
+            setDialog({
+              kind: 'move', side: menu.side, path: menu.path, name: menu.name, isDir: menu.isDir,
+              initialPath: parentPathOf(menu.path, menu.side),
+            });
+          } });
+        }
         items.push({ label: t('ctxRename'), onSelect: function () {
           setDialog({ kind: 'rename', side: menu.side, path: menu.path, value: menu.name, title: t('renameTitle'), label: t('renameLabel') });
         } });
@@ -5450,6 +5782,19 @@ function fileIconSpec(name, isDir) {
             onConfirm: function () { setDialog(null); confirmDelete(dialog); },
           });
         }
+        if (dialog.kind === 'move') {
+          return h(MoveDialog, {
+            t: t, locale: locale,
+            title: t('moveTitle'),
+            message: t('moveMessage', { name: dialog.name }),
+            side: dialog.side,
+            scope: dialog.side === 'remote' ? sourceScopeOf(selected) : null,
+            root: dialog.side === 'remote' ? selected.remotePath : selected.localPath,
+            initialPath: dialog.initialPath,
+            onClose: function () { setDialog(null); },
+            onPick: function (targetDir) { moveEntry(dialog.side, dialog.path, targetDir); },
+          });
+        }
         if (dialog.kind === 'closeDirty') {
           return h(ConfirmDialog, {
             t: t,
@@ -5607,7 +5952,14 @@ function fileIconSpec(name, isDir) {
       var activeFile = openFiles.filter(function (file) { return file.key === activeFileKey; })[0] || null;
       var activeDocKind = activeFile ? documentKindOf(activeFile.name) : '';
       var contentArea = activeFile
-        ? (activeDocKind
+        ? (activeDocKind === 'image'
+          ? h(ImagePreview, {
+            ctx: ctx, t: t, locale: locale,
+            scope: activeFile.side === 'remote' ? sourceScopeOf(selected) : undefined,
+            path: activeFile.path,
+            local: activeFile.side === 'local',
+          })
+          : activeDocKind && activeDocKind !== 'csv'
           ? h(DocumentPane, {
             ctx: ctx, t: t, locale: locale,
             scope: activeFile.side === 'remote' ? sourceScopeOf(selected) : undefined,

package/lib/index.js

@@ -67,6 +67,18 @@ const EDITABLE_LIMIT = 2 * 1024 * 1024
 const PEEK_LIMIT = 512 * 1024
 const READ_CAP = 8 * 1024 * 1024
 const MAX_WRITE_BYTES = 8 * 1024 * 1024
+const MAX_MEDIA_BYTES = 24 * 1024 * 1024
+const IMAGE_MIME = Object.freeze({
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+  '.bmp': 'image/bmp',
+  '.ico': 'image/x-icon',
+  '.avif': 'image/avif',
+  '.svg': 'image/svg+xml',
+})
 const MAX_NAME_LENGTH = 120
 const CONNECT_TIMEOUT_MS = 20_000
 const OP_TIMEOUT_MS = 60_000
@@ -87,6 +99,7 @@ const ERROR_STATUS = {
   FS_IS_DIR: 400,
   FS_NOT_DIR: 400,
   FS_TOO_LARGE: 413,
+  FS_EXISTS: 409,
   CONFLICT: 409,
   INTERNAL: 500,
 }
@@ -295,6 +308,12 @@ function isInside(root, target) {
   return next === base || next.startsWith(`${base}/`)
 }
 
+function isInsideLocal(root, target) {
+  const base = resolve(root)
+  const next = resolve(target)
+  return next === base || next.startsWith(`${base}${sep}`)
+}
+
 function withTimeout(promise, ms, label) {
   let timer
   const timeout = new Promise((_, reject) => {
@@ -1825,6 +1844,24 @@ export function apply(ctx) {
       }
     },
 
+    async 'media.read'(params = {}) {
+      const scope = await requireScope(params)
+      const target = scopeTarget(scope, params.path)
+      const mime = imageMimeOf(target)
+      if (!mime) throw new ApiError('BAD_REQUEST', '该文件不是支持的图片格式')
+      const stat = await scope.remote.stat(target)
+      if (stat.type === 'dir') throw new ApiError('FS_IS_DIR', '目标是目录，无法预览')
+      if (stat.size > MAX_MEDIA_BYTES) throw new ApiError('FS_TOO_LARGE', '图片超过 24 MB，无法预览')
+      const read = await scope.remote.readFile(target, { maxBytes: MAX_MEDIA_BYTES })
+      return {
+        path: target,
+        size: stat.size,
+        mtime: stat.mtime,
+        mime,
+        base64: read.data.toString('base64'),
+      }
+    },
+
     async 'fs.write'(params = {}) {
       const scope = await requireScope(params)
       if (typeof params.content !== 'string') throw new ApiError('BAD_REQUEST', 'content is required')
@@ -2036,6 +2073,27 @@ export function apply(ctx) {
       return {}
     },
 
+    async 'fs.move'(params = {}) {
+      const scope = await requireScope(params)
+      const source = scopeTarget(scope, params.path)
+      if (source === scope.root) throw new ApiError('BAD_REQUEST', '不能移动工作区根目录')
+      const sourceStat = await scope.remote.stat(source)
+      const targetDir = params.targetDir === undefined || params.targetDir === ''
+        ? posix.dirname(source)
+        : scopeTarget(scope, params.targetDir)
+      const dirStat = await scope.remote.stat(targetDir)
+      if (dirStat.type !== 'dir') throw new ApiError('FS_NOT_DIR', '目标不是目录')
+      if (sourceStat.type === 'dir' && (targetDir === source || targetDir.startsWith(`${source}/`))) {
+        throw new ApiError('BAD_REQUEST', '不能把目录移动到自身内部')
+      }
+      const target = posix.join(targetDir, posix.basename(source))
+      if (target === source) return { path: target }
+      if (await scope.remote.stat(target).catch(() => null)) throw new ApiError('FS_EXISTS', '目标目录中已存在同名文件或文件夹')
+      await scope.remote.rename(source, target)
+      await scopeMirrorRemove(scope, source)
+      return { path: target }
+    },
+
     async 'fs.delete'(params = {}) {
       const scope = await requireScope(params)
       const target = scopeTarget(scope, params.path)
@@ -2209,6 +2267,29 @@ export function apply(ctx) {
       }
     },
 
+    async 'local.media'(params = {}) {
+      const target = typeof params.path === 'string' ? params.path.trim() : ''
+      if (target === '' || !isAbsolute(target)) throw new ApiError('BAD_REQUEST', '本地路径必须是绝对路径')
+      const absolute = resolve(target)
+      const mime = imageMimeOf(absolute)
+      if (!mime) throw new ApiError('BAD_REQUEST', '该文件不是支持的图片格式')
+      let info
+      try {
+        info = await fsStat(absolute)
+      } catch (error) {
+        throw mapLocalFsError(error)
+      }
+      if (info.isDirectory()) throw new ApiError('FS_IS_DIR', '目标是目录，无法预览')
+      if (info.size > MAX_MEDIA_BYTES) throw new ApiError('FS_TOO_LARGE', '图片超过 24 MB，无法预览')
+      let data
+      try {
+        data = readFileSync(absolute)
+      } catch (error) {
+        throw mapLocalFsError(error)
+      }
+      return { path: absolute, size: info.size, mtime: info.mtimeMs, mime, base64: data.toString('base64') }
+    },
+
     async 'local.write'(params = {}) {
       const target = typeof params.path === 'string' ? params.path.trim() : ''
       if (target === '' || !isAbsolute(target)) throw new ApiError('BAD_REQUEST', '本地路径必须是绝对路径')
@@ -2255,6 +2336,46 @@ export function apply(ctx) {
       return { path: resolve(to) }
     },
 
+    async 'local.move'(params = {}) {
+      const source = typeof params.path === 'string' ? params.path.trim() : ''
+      const targetDir = typeof params.targetDir === 'string' ? params.targetDir.trim() : ''
+      if (source === '' || targetDir === '' || !isAbsolute(source) || !isAbsolute(targetDir)) {
+        throw new ApiError('BAD_REQUEST', '本地路径必须是绝对路径')
+      }
+      const root = typeof params.root === 'string' && params.root.trim() !== '' ? resolve(params.root.trim()) : ''
+      const sourcePath = resolve(source)
+      const dirPath = resolve(targetDir)
+      if (root && sourcePath === root) throw new ApiError('BAD_REQUEST', '不能移动工作区根目录')
+      if (root && (!isInsideLocal(root, sourcePath) || !isInsideLocal(root, dirPath))) {
+        throw new ApiError('BAD_REQUEST', '移动范围超出本地目录')
+      }
+      let sourceInfo
+      try {
+        sourceInfo = await fsStat(sourcePath)
+      } catch (error) {
+        throw mapLocalFsError(error)
+      }
+      let dirInfo
+      try {
+        dirInfo = await fsStat(dirPath)
+      } catch (error) {
+        throw mapLocalFsError(error)
+      }
+      if (!dirInfo.isDirectory()) throw new ApiError('FS_NOT_DIR', '目标不是目录')
+      if (sourceInfo.isDirectory() && (dirPath === sourcePath || dirPath.startsWith(sourcePath + sep))) {
+        throw new ApiError('BAD_REQUEST', '不能把目录移动到自身内部')
+      }
+      const target = join(dirPath, basename(sourcePath))
+      if (target === sourcePath) return { path: target }
+      if (existsSync(target)) throw new ApiError('FS_EXISTS', '目标目录中已存在同名文件或文件夹')
+      try {
+        renameSync(sourcePath, target)
+      } catch (error) {
+        throw mapLocalFsError(error)
+      }
+      return { path: target, type: sourceInfo.isDirectory() ? 'dir' : 'file' }
+    },
+
     async 'local.delete'(params = {}) {
       const target = typeof params.path === 'string' ? params.path.trim() : ''
       if (target === '' || !isAbsolute(target)) throw new ApiError('BAD_REQUEST', '本地路径必须是绝对路径')
@@ -3099,6 +3220,10 @@ function loopbackRejection(req) {
 
 // ── file helpers ────────────────────────────────────────────────────────────
 
+function imageMimeOf(filePath) {
+  return IMAGE_MIME[extname(String(filePath || '')).toLowerCase()] || ''
+}
+
 function looksBinary(buffer) {
   const sample = buffer.subarray(0, Math.min(buffer.length, 8192))
   for (let index = 0; index < sample.length; index += 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-linked-workspace",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Linked local ⇄ remote workspaces and SSH-backed remote directories for DeepSeek Harness: theme-aware split editor, file-type icons, and an agent tool that edits remote files directly.",
   "type": "module",
   "main": "lib/index.js",