dsh-linked-workspace 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.8.1 — 2026-11-09
+
+- **Image zoom**: the image preview gains zoom-out/zoom-in buttons, a percentage readout, “Fit to window” and “1:1” controls, plus `Ctrl/Cmd + wheel` zoom.
+- **HTML preview**: `.html` and `.htm` files now render in a sandboxed iframe in the content panel. Scripts are disabled; the status bar notes this.
+
 ## 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).

package/README.en.md

@@ -61,7 +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.
+- **Image, CSV and HTML preview**: PNG/JPG/GIF/WebP/BMP/ICO/AVIF/SVG render directly in the content panel (up to 24 MB) with toolbar zoom, `Ctrl/Cmd + wheel` zoom, fit-to-window and 1:1 actual-size controls. 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. HTML/HTM files render in a sandboxed iframe with scripts disabled.
 - **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.

package/README.md

@@ -62,7 +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 列时只展示截断后的表格。
+- **图片、CSV 与网页预览**：PNG/JPG/GIF/WebP/BMP/ICO/AVIF/SVG 直接在内容面板按图片显示（最大 24 MB），支持按钮缩放、`Ctrl/Cmd + 滚轮` 缩放、适应窗口和 1:1 原始大小；CSV/TSV 默认按表格显示，可在「表格 / 源码」间切换，源码视图仍可编辑保存。超过 1000 行或 80 列时只展示截断后的表格。HTML/HTM 文件以沙箱 iframe 渲染网页预览（脚本禁用）。
 - **快捷键**：`Ctrl/Cmd+S` 保存当前文件；`Ctrl/Cmd+W` 关闭当前标签（未保存时提示保存/放弃/取消）；`Ctrl+Tab` / `Shift+Ctrl+Tab` 切换标签；`Ctrl/Cmd+B` 显示/隐藏目录面板；`Ctrl/Cmd+Shift+F` 打开文件搜索。
 - **自动保存**：设置 → 连接 →「编辑器行为」中开启；停止输入约 1 秒后自动保存。关闭时使用 `Ctrl+S` 手动保存；未保存文件关闭前会弹窗，不会静默丢弃。
 - **多个文件同时打开**：文件内容面板内最多同时打开 12 个标签；单击文件打开预览标签并替换未固定的预览，双击固定标签，重复点击同一文件聚焦原标签；本地文件与远端文件共用内部编辑器，本地文件可编辑保存。

package/docs/VERIFY.md

@@ -123,3 +123,12 @@ Host code (lib/) reloads live with `plugin_manager set_plugin include:linked-wor
 5. 移动后目录树与内容面板一致；已打开的旧标签关闭，已修改未保存的文件阻止移动并提示先保存。
 6. 目标目录已有同名文件时提示冲突（409），不覆盖；文件夹不能移动到自身或其子目录。
 7. 移动选择器不能浏览到当前工作区/本地目录之外，根目录本身不可作为被移动项。
+
+## 图片缩放与网页预览（0.8.1）
+
+1. 打开 PNG/SVG：图片默认适应窗口；点「适应窗口」重新适配，「1:1」恢复原始像素。
+2. 点 `−` / `+` 时缩放比例按 20% 步进，状态栏百分比同步；`Ctrl/Cmd + 滚轮` 可连续缩放，最小 5%、最大 800%。
+3. 放大后图片区域出现滚动条，可查看四周；缩小后图片保持居中，不出现拉伸变形。
+4. 本地与远端各打开一个 `.html`/`.htm`：内容面板以 iframe 渲染页面，状态栏显示 HTML、大小和「网页脚本已禁用」。
+5. HTML 内联样式与静态标签正常显示；页面内脚本不执行，链接不会跳出 DSH 主界面。
+6. 读取失败的 HTML（权限/过大/二进制）显示错误提示和重试按钮。

package/lib/client.js

@@ -2006,6 +2006,12 @@ function fileIconSpec(name, isDir) {
       truncated: '内容已截断',
       fileLoadError: '无法打开文件',
       imageLoadError: '无法预览图片',
+      imageZoomIn: '放大',
+      imageZoomOut: '缩小',
+      imageFit: '适应窗口',
+      imageActualSize: '原始大小',
+      htmlLoadError: '无法预览网页',
+      htmlScriptsDisabled: '网页脚本已禁用',
       previewOnly: '图片预览',
       csvTable: '表格',
       csvSource: '源码',
@@ -2329,6 +2335,12 @@ function fileIconSpec(name, isDir) {
       truncated: 'Content truncated',
       fileLoadError: 'Cannot open the file',
       imageLoadError: 'Cannot preview this image',
+      imageZoomIn: 'Zoom in',
+      imageZoomOut: 'Zoom out',
+      imageFit: 'Fit to window',
+      imageActualSize: 'Actual size',
+      htmlLoadError: 'Cannot preview this page',
+      htmlScriptsDisabled: 'Page scripts are disabled',
       previewOnly: 'Image preview',
       csvTable: 'Table',
       csvSource: 'Source',
@@ -2713,6 +2725,7 @@ function fileIconSpec(name, isDir) {
       if (value === '.xlsx') return 'xlsx';
       if (value === '.pptx') return 'pptx';
       if (value === '.csv' || value === '.tsv') return 'csv';
+      if (value === '.html' || value === '.htm') return 'html';
       if (value === '.png' || value === '.jpg' || value === '.jpeg' || value === '.gif'
         || value === '.webp' || value === '.bmp' || value === '.ico' || value === '.avif'
         || value === '.svg') return 'image';
@@ -3213,8 +3226,14 @@ function fileIconSpec(name, isDir) {
       '.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-image-stage{display:block;flex:1 1 auto;min-height:0;overflow:auto;padding:18px;text-align:center;background:repeating-conic-gradient(var(--dsw-alias-bg-layer-1) 0% 25%,var(--dsw-alias-bg-base) 0% 50%) 50%/18px 18px}',
+      '.rw-image-canvas{display:inline-block;min-width:100%;min-height:100%;box-sizing:border-box}',
+      '.rw-image{display:inline-block;max-width:none;max-height:none;vertical-align:top;border-radius:4px;box-shadow:0 2px 16px rgba(0,0,0,.18)}',
+      '.rw-image-tools{display:flex;align-items:center;gap:4px;flex:none}',
+      '.rw-image-zoom{min-width:52px;text-align:center;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary);font-size:12px}',
+      '.rw-html-preview{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary)}',
+      '.rw-html-stage{flex:1 1 auto;min-height:0;background:#fff;position:relative}',
+      '.rw-html-frame{display:block;width:100%;height:100%;border:0;background:#fff}',
       '.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}',
@@ -3866,13 +3885,38 @@ function fileIconSpec(name, isDir) {
       var state = useState({ loading: true, error: null, data: null });
       var view = state[0];
       var setView = state[1];
+      var naturalState = useState(null);
+      var natural = naturalState[0];
+      var setNatural = naturalState[1];
+      var zoomState = useState(1);
+      var zoom = zoomState[0];
+      var setZoom = zoomState[1];
+      var stageRef = useRef(null);
       var params = scopeParams(scope);
+      var MIN_ZOOM = 0.05;
+      var MAX_ZOOM = 8;
+
+      function clampZoom(value) {
+        return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value));
+      }
+
+      function zoomBy(factor) {
+        setZoom(function (previous) { return clampZoom(previous * factor); });
+      }
+
+      function fitToStage() {
+        if (!natural || !stageRef.current) return;
+        var width = Math.max(40, stageRef.current.clientWidth - 36);
+        var height = Math.max(40, stageRef.current.clientHeight - 36);
+        setZoom(clampZoom(Math.min(1, width / natural.width, height / natural.height)));
+      }
 
       var load = useCallback(function () {
         if (!filePath || (!local && !scope)) {
           setView({ loading: false, error: new Error(t('noWorkspace')), data: null });
           return;
         }
+        setNatural(null);
         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) {
@@ -3884,13 +3928,59 @@ function fileIconSpec(name, isDir) {
 
       useEffect(function () { load(); }, [load]);
 
+      useEffect(function () {
+        setZoom(1);
+        setNatural(null);
+      }, [filePath]);
+
+      useEffect(function () {
+        if (!natural || !stageRef.current) return;
+        var width = Math.max(40, stageRef.current.clientWidth - 36);
+        var height = Math.max(40, stageRef.current.clientHeight - 36);
+        setZoom(clampZoom(Math.min(1, width / natural.width, height / natural.height)));
+      }, [natural]);
+
+      useEffect(function () {
+        var stage = stageRef.current;
+        if (!stage) return;
+        function onWheel(event) {
+          if (!event.ctrlKey && !event.metaKey) return;
+          event.preventDefault();
+          setZoom(function (previous) {
+            return clampZoom(previous * (event.deltaY < 0 ? 1.2 : 1 / 1.2));
+          });
+        }
+        stage.addEventListener('wheel', onWheel, { passive: false });
+        return function () { stage.removeEventListener('wheel', onWheel); };
+      }, [view.data]);
+
       var name = basename(filePath) || t('fileTabTitle');
+      var zoomTools = view.data ? h('div', { className: 'rw-image-tools' },
+        h('button', {
+          type: 'button', className: 'rw-btn rw-btn-sm', title: t('imageZoomOut'),
+          onClick: function () { zoomBy(1 / 1.2); },
+        }, '−'),
+        h('span', { className: 'rw-image-zoom' }, Math.round(zoom * 100) + '%'),
+        h('button', {
+          type: 'button', className: 'rw-btn rw-btn-sm', title: t('imageZoomIn'),
+          onClick: function () { zoomBy(1.2); },
+        }, '+'),
+        h('button', {
+          type: 'button', className: 'rw-btn rw-btn-sm', title: t('imageFit'),
+          onClick: fitToStage,
+        }, t('imageFit')),
+        h('button', {
+          type: 'button', className: 'rw-btn rw-btn-sm', title: t('imageActualSize'),
+          onClick: function () { setZoom(1); },
+        }, '1:1')) : null;
+
       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' },
+          zoomTools,
           h('button', { type: 'button', className: 'rw-btn rw-btn-sm', onClick: load, disabled: view.loading }, IconRefresh(12), t('reload'))));
 
       if (view.loading) {
@@ -3904,24 +3994,104 @@ function fileIconSpec(name, isDir) {
             h('button', { type: 'button', className: 'rw-btn', onClick: load }, IconRefresh(13), t('retry'))));
       }
       var data = view.data;
+      var imageStyle = natural
+        ? { width: natural.width * zoom + 'px', height: natural.height * zoom + 'px' }
+        : { maxWidth: '100%', maxHeight: '100%' };
       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-image-stage', ref: stageRef },
+          h('div', { className: 'rw-image-canvas' },
+            h('img', {
+              className: 'rw-image',
+              src: 'data:' + data.mime + ';base64,' + data.base64,
+              alt: name,
+              style: imageStyle,
+              onLoad: function (event) {
+                var image = event.currentTarget;
+                if (image.naturalWidth && image.naturalHeight) {
+                  setNatural({ width: image.naturalWidth, height: image.naturalHeight });
+                }
+              },
+              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-status-chip' }, Math.round(zoom * 100) + '%'),
           h('span', { className: 'rw-fill', style: { flex: '1 1 auto' } }),
           h('span', { className: 'rw-status-chip' }, t('previewOnly'))));
     }
 
+    function HtmlPreview(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.read' : 'fs.read', request).then(function (result) {
+          if (result.binary || result.tooLarge) {
+            setView({ loading: false, error: new Error(t('htmlLoadError')), data: null });
+            return;
+          }
+          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-html-preview' }, header,
+          h('div', { className: 'rw-editor-message' }, Spinner(14), t('loading')));
+      }
+      if (view.error) {
+        return h('div', { className: 'rw-html-preview' }, header,
+          h('div', { className: 'rw-editor-message' },
+            h(Banner, { kind: 'error' }, t('htmlLoadError') + '：' + 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-html-preview' },
+        header,
+        h('div', { className: 'rw-html-stage' },
+          h('iframe', {
+            className: 'rw-html-frame',
+            title: name,
+            sandbox: '',
+            srcDoc: data.content || '',
+          })),
+        h('div', { className: 'rw-editor-status' },
+          h('span', { className: 'rw-status-chip' }, 'HTML'),
+          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('htmlScriptsDisabled'))));
+    }
+
     // ── editor ─────────────────────────────────────────────────────────────
 
     function colorForToken(colors, type) {
@@ -5959,6 +6129,13 @@ function fileIconSpec(name, isDir) {
             path: activeFile.path,
             local: activeFile.side === 'local',
           })
+          : activeDocKind === 'html'
+          ? h(HtmlPreview, {
+            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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-linked-workspace",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "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",