dsh-workspace-ide 1.8.7 → 1.8.8

package/README.md

@@ -109,8 +109,12 @@ standard:
 with `Cmd/Ctrl+Shift+V`. The preview is built from React elements — never injected HTML — and
 covers headings, fenced code blocks (highlighted by the same engine, in the selected theme),
 ordered/unordered and task lists, blockquotes, GFM tables, links, images and rules;
-`javascript:`/`data:` URLs are dropped. It renders the current draft, so unsaved edits
-preview immediately, and read-only/oversized Markdown files still preview.
+`javascript:`/`data:` URLs are dropped. Relative images are resolved against the
+Markdown file's folder and served through the authenticated Host image route, so
+`![shot](public/hero.png)` renders a real workspace file in the preview; remote `https:`
+images keep their direct URL, and paths escaping the workspace are rejected. It renders
+the current draft, so unsaved edits preview immediately, and read-only/oversized Markdown
+files still preview.
 
 ![Markdown preview with source toggle](docs/screenshot-markdown.png)
 
@@ -223,6 +227,7 @@ node scripts/build-client.mjs --check  # fail when lib/client.js is stale
 node --check lib/client.js
 node --test test/host/                      # Host route unit tests (node:test, 118)
 node test/smoke/client-smoke.mjs            # headless client module/face smoke test (43 checks)
+python3 scripts/check-screenshots.py        # README screenshots are non-blank renders
 node --test test/review/*.test.mjs          # independent adversarial + contract suites (78)
 python3 scripts/screenshots/build-screenshots.py   # rebuild docs/ screenshots (mock data)
 ```

package/lib/client.js

@@ -3823,6 +3823,127 @@ function mdSafeUrl(raw) {
         return null;
     return url;
 }
+/**
+ * Resolve a Markdown image URL to a workspace-relative file path. Remote/
+ * protocol-relative/anchor URLs answer null; `..` escaping the workspace root
+ * answers null. Query/fragment suffixes are ignored and percent escapes are
+ * decoded, so `![x](img/my%20shot.png?raw=1)` resolves to `img/my shot.png`.
+ * @param {unknown} raw - Markdown image URL.
+ * @param {unknown} filePath - Markdown file path relative to the workspace root.
+ * @returns {string|null} normalized workspace-relative path.
+ */
+function mdImagePath(raw, filePath) {
+    if (typeof raw !== 'string' || typeof filePath !== 'string')
+        return null;
+    let url = raw.trim();
+    if (url.length === 0 || /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(url))
+        return null;
+    const suffix = url.search(/[?#]/);
+    if (suffix >= 0)
+        url = url.slice(0, suffix);
+    if (url.length === 0)
+        return null;
+    let decoded;
+    try {
+        decoded = decodeURIComponent(url);
+    }
+    catch (error) {
+        return null;
+    }
+    if (decoded.indexOf('\u0000') !== -1)
+        return null;
+    decoded = decoded.replace(/\\/g, '/');
+    if (decoded.length === 0)
+        return null;
+    const directory = filePath.indexOf('/') >= 0 ? filePath.slice(0, filePath.lastIndexOf('/')) : '';
+    const source = decoded.charAt(0) === '/' ? decoded.slice(1) : (directory.length > 0 ? directory + '/' + decoded : decoded);
+    const parts = [];
+    const segments = source.split('/');
+    for (let index = 0; index < segments.length; index = index + 1) {
+        const segment = segments[index];
+        if (segment.length === 0 || segment === '.')
+            continue;
+        if (segment === '..') {
+            if (parts.length === 0)
+                return null;
+            parts.pop();
+            continue;
+        }
+        parts.push(segment);
+    }
+    return parts.length > 0 ? parts.join('/') : null;
+}
+/**
+ * Collect the workspace-relative images referenced by a Markdown document.
+ * Remote images, anchors and paths escaping the workspace are omitted. Rows are
+ * unique by resolved path, in document order.
+ * @param {unknown} source - Markdown source.
+ * @param {unknown} filePath - Markdown file path relative to the workspace root.
+ * @returns {Array<{url: string, path: string}>} image rows for the viewer to load.
+ */
+function collectMarkdownImages(source, filePath) {
+    const text = typeof source === 'string' ? source : '';
+    if (text.length === 0)
+        return [];
+    const rows = [];
+    const seen = {};
+    function visitInline(nodes) {
+        for (let index = 0; index < nodes.length; index = index + 1) {
+            const node = nodes[index];
+            if (node === null || typeof node !== 'object')
+                continue;
+            if (node.type === 'image') {
+                const url = mdSafeUrl(node.url);
+                if (url !== null) {
+                    const resolved = mdImagePath(url, filePath);
+                    if (resolved !== null && seen[resolved] !== true) {
+                        seen[resolved] = true;
+                        rows.push({ url: url, path: resolved });
+                    }
+                }
+            }
+            if (Array.isArray(node.children))
+                visitInline(node.children);
+        }
+    }
+    function visitBlocks(blocks) {
+        for (let index = 0; index < blocks.length; index = index + 1) {
+            const block = blocks[index];
+            if (block === null || typeof block !== 'object')
+                continue;
+            if (Array.isArray(block.inline))
+                visitInline(block.inline);
+            if (Array.isArray(block.blocks))
+                visitBlocks(block.blocks);
+            if (Array.isArray(block.items)) {
+                for (let itemIndex = 0; itemIndex < block.items.length; itemIndex = itemIndex + 1) {
+                    const item = block.items[itemIndex];
+                    if (item === null || typeof item !== 'object')
+                        continue;
+                    if (Array.isArray(item.inline))
+                        visitInline(item.inline);
+                    if (item.nested !== null && item.nested !== undefined && typeof item.nested === 'object')
+                        visitBlocks([item.nested]);
+                }
+            }
+            if (Array.isArray(block.header)) {
+                for (let cellIndex = 0; cellIndex < block.header.length; cellIndex = cellIndex + 1)
+                    visitInline(block.header[cellIndex]);
+            }
+            if (Array.isArray(block.rows)) {
+                for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex = rowIndex + 1) {
+                    const row = block.rows[rowIndex];
+                    if (!Array.isArray(row))
+                        continue;
+                    for (let cellIndex = 0; cellIndex < row.length; cellIndex = cellIndex + 1)
+                        visitInline(row[cellIndex]);
+                }
+            }
+        }
+    }
+    visitBlocks(parseMarkdown(text));
+    return rows;
+}
 function mdPlainInline(nodes) {
     let out = '';
     for (let index = 0; index < nodes.length; index = index + 1) {
@@ -4261,6 +4382,15 @@ const MD_STYLE = {
     taskBox: { marginRight: '6px', verticalAlign: 'middle' },
     link: { color: C.accent, textDecoration: 'underline' },
     image: { maxWidth: '100%', borderRadius: '6px', margin: '6px 0', display: 'block' },
+    imagePending: {
+        display: 'inline-block',
+        margin: '3px 0',
+        padding: '2px 7px',
+        border: '1px dashed ' + C.border1,
+        borderRadius: '4px',
+        color: C.textSecondary,
+        fontSize: '12px',
+    },
     table: { width: '100%', borderCollapse: 'collapse', margin: '0 0 14px', fontSize: '12.5px', lineHeight: '1.6' },
     tableCell: { border: '1px solid ' + C.border1, padding: '5px 10px', textAlign: 'left', verticalAlign: 'top' },
     tableHeadCell: { border: '1px solid ' + C.border1, padding: '5px 10px', textAlign: 'left', background: C.layer1, fontWeight: '600' },
@@ -4272,7 +4402,7 @@ const MD_STYLE = {
  * @param {string} keyPrefix - stable key prefix.
  * @returns {Array} React children.
  */
-function renderMarkdownInline(nodes, keyPrefix) {
+function renderMarkdownInline(nodes, keyPrefix, options) {
     const out = [];
     for (let index = 0; index < nodes.length; index = index + 1) {
         const node = nodes[index];
@@ -4292,31 +4422,44 @@ function renderMarkdownInline(nodes, keyPrefix) {
             continue;
         }
         if (node.type === 'strong') {
-            out.push(h('strong', { key: key }, renderMarkdownInline(node.children || [], key)));
+            out.push(h('strong', { key: key }, renderMarkdownInline(node.children || [], key, options)));
             continue;
         }
         if (node.type === 'em') {
-            out.push(h('em', { key: key }, renderMarkdownInline(node.children || [], key)));
+            out.push(h('em', { key: key }, renderMarkdownInline(node.children || [], key, options)));
             continue;
         }
         if (node.type === 'del') {
-            out.push(h('del', { key: key }, renderMarkdownInline(node.children || [], key)));
+            out.push(h('del', { key: key }, renderMarkdownInline(node.children || [], key, options)));
             continue;
         }
         if (node.type === 'link') {
             const url = mdSafeUrl(node.url);
             if (url === null)
-                out.push(h('span', { key: key }, renderMarkdownInline(node.children || [], key)));
+                out.push(h('span', { key: key }, renderMarkdownInline(node.children || [], key, options)));
             else
-                out.push(h('a', { key: key, href: url, target: '_blank', rel: 'noreferrer noopener', style: MD_STYLE.link }, renderMarkdownInline(node.children || [], key)));
+                out.push(h('a', { key: key, href: url, target: '_blank', rel: 'noreferrer noopener', style: MD_STYLE.link }, renderMarkdownInline(node.children || [], key, options)));
             continue;
         }
         if (node.type === 'image') {
             const url = mdSafeUrl(node.url);
-            if (url === null)
+            if (url === null) {
                 out.push(h('span', { key: key, style: MD_STYLE.link }, String(node.alt)));
-            else
-                out.push(h('img', { key: key, src: url, alt: String(node.alt), style: MD_STYLE.image, loading: 'lazy' }));
+                continue;
+            }
+            // Remote images load directly; workspace-relative paths ask the Host,
+            // because a DSH page origin has no access to the user's workspace files.
+            if (options !== undefined && typeof options.resolveImage === 'function' && /^(?:https?:)?\/\//i.test(url) === false) {
+                const resolved = options.resolveImage(url);
+                if (typeof resolved === 'string' && resolved.length > 0) {
+                    out.push(h('img', { key: key, src: resolved, alt: String(node.alt), style: MD_STYLE.image, loading: 'lazy' }));
+                }
+                else {
+                    out.push(h('span', { key: key, style: MD_STYLE.imagePending, 'data-md-image-pending': url }, String(node.alt)));
+                }
+                continue;
+            }
+            out.push(h('img', { key: key, src: url, alt: String(node.alt), style: MD_STYLE.image, loading: 'lazy' }));
             continue;
         }
     }
@@ -4352,17 +4495,17 @@ function renderMarkdownCode(block, key) {
  * @param {string} keyPrefix - stable key prefix.
  * @returns {Array} React children.
  */
-function renderMarkdownBlocks(blocks, keyPrefix) {
+function renderMarkdownBlocks(blocks, keyPrefix, options) {
     const out = [];
     for (let index = 0; index < blocks.length; index = index + 1) {
         const block = blocks[index];
         const key = keyPrefix + '-' + String(index);
         if (block.type === 'heading') {
-            out.push(h('h' + String(block.depth), { key: key, style: MD_STYLE.heading(block.depth) }, renderMarkdownInline(block.inline || [], key)));
+            out.push(h('h' + String(block.depth), { key: key, style: MD_STYLE.heading(block.depth) }, renderMarkdownInline(block.inline || [], key, options)));
             continue;
         }
         if (block.type === 'paragraph') {
-            out.push(h('p', { key: key, style: MD_STYLE.paragraph }, renderMarkdownInline(block.inline || [], key)));
+            out.push(h('p', { key: key, style: MD_STYLE.paragraph }, renderMarkdownInline(block.inline || [], key, options)));
             continue;
         }
         if (block.type === 'code') {
@@ -4370,7 +4513,7 @@ function renderMarkdownBlocks(blocks, keyPrefix) {
             continue;
         }
         if (block.type === 'blockquote') {
-            out.push(h('blockquote', { key: key, style: MD_STYLE.blockquote }, renderMarkdownBlocks(block.blocks || [], key)));
+            out.push(h('blockquote', { key: key, style: MD_STYLE.blockquote }, renderMarkdownBlocks(block.blocks || [], key, options)));
             continue;
         }
         if (block.type === 'list') {
@@ -4387,9 +4530,9 @@ function renderMarkdownBlocks(blocks, keyPrefix) {
                         style: MD_STYLE.taskBox,
                     }));
                 }
-                children.push.apply(children, renderMarkdownInline(item.inline, itemKey));
+                children.push.apply(children, renderMarkdownInline(item.inline, itemKey, options));
                 if (item.nested !== null && item.nested !== undefined) {
-                    children.push(h(item.nested.ordered ? 'ol' : 'ul', { key: itemKey + '-nested', style: MD_STYLE.nestedList }, renderMarkdownListItems(item.nested, itemKey + '-nested')));
+                    children.push(h(item.nested.ordered ? 'ol' : 'ul', { key: itemKey + '-nested', style: MD_STYLE.nestedList }, renderMarkdownListItems(item.nested, itemKey + '-nested', options)));
                 }
                 return h('li', { key: itemKey, style: MD_STYLE.listItem }, children);
             });
@@ -4399,12 +4542,12 @@ function renderMarkdownBlocks(blocks, keyPrefix) {
         if (block.type === 'table') {
             const align = block.align || [];
             const headerCells = (block.header || []).map(function (cell, cellIndex) {
-                return h('th', { key: key + '-h' + String(cellIndex), style: Object.assign({}, MD_STYLE.tableHeadCell, align[cellIndex] ? { textAlign: align[cellIndex] } : null) }, renderMarkdownInline(cell, key + '-h' + String(cellIndex)));
+                return h('th', { key: key + '-h' + String(cellIndex), style: Object.assign({}, MD_STYLE.tableHeadCell, align[cellIndex] ? { textAlign: align[cellIndex] } : null) }, renderMarkdownInline(cell, key + '-h' + String(cellIndex), options));
             });
             const bodyRows = (block.rows || []).map(function (row, rowIndex) {
                 const rowKey = key + '-r' + String(rowIndex);
                 const cells = row.map(function (cell, cellIndex) {
-                    return h('td', { key: rowKey + '-c' + String(cellIndex), style: Object.assign({}, MD_STYLE.tableCell, align[cellIndex] ? { textAlign: align[cellIndex] } : null) }, renderMarkdownInline(cell, rowKey + '-c' + String(cellIndex)));
+                    return h('td', { key: rowKey + '-c' + String(cellIndex), style: Object.assign({}, MD_STYLE.tableCell, align[cellIndex] ? { textAlign: align[cellIndex] } : null) }, renderMarkdownInline(cell, rowKey + '-c' + String(cellIndex), options));
                 });
                 return h('tr', { key: rowKey }, cells);
             });
@@ -4419,10 +4562,10 @@ function renderMarkdownBlocks(blocks, keyPrefix) {
     return out;
 }
 /** Shallow helper so nested lists reuse the item renderer without duplication. */
-function renderMarkdownListItems(listBlock, keyPrefix) {
+function renderMarkdownListItems(listBlock, keyPrefix, options) {
     return listBlock.items.map(function (item, itemIndex) {
         const itemKey = keyPrefix + '-' + String(itemIndex);
-        return h('li', { key: itemKey, style: MD_STYLE.listItem }, renderMarkdownInline(item.inline, itemKey), item.nested ? h(item.nested.ordered ? 'ol' : 'ul', { style: MD_STYLE.nestedList }, renderMarkdownListItems(item.nested, itemKey + '-n')) : null);
+        return h('li', { key: itemKey, style: MD_STYLE.listItem }, renderMarkdownInline(item.inline, itemKey, options), item.nested ? h(item.nested.ordered ? 'ol' : 'ul', { style: MD_STYLE.nestedList }, renderMarkdownListItems(item.nested, itemKey + '-n', options)) : null);
     });
 }
 /**
@@ -4430,15 +4573,17 @@ function renderMarkdownListItems(listBlock, keyPrefix) {
  * @param {unknown} source - markdown source.
  * @returns {Array} React children for the preview body.
  */
-function renderMarkdown(source) {
+function renderMarkdown(source, options) {
     const text = typeof source === 'string' ? source : '';
-    return renderMarkdownBlocks(parseMarkdown(text), 'md');
+    return renderMarkdownBlocks(parseMarkdown(text), 'md', options);
 }
 S.MD_MAX_SOURCE_CHARS = MD_MAX_SOURCE_CHARS;
 S.MD_STYLE = MD_STYLE;
 S.parseMarkdown = parseMarkdown;
 S.parseMarkdownInline = parseMarkdownInline;
 S.renderMarkdown = renderMarkdown;
+S.mdImagePath = mdImagePath;
+S.collectMarkdownImages = collectMarkdownImages;
 
 /* ─── src/client/10-shell.ts ─────────────────────────────────────────────────── */
 "use strict";
@@ -7365,6 +7510,9 @@ function FileViewer(props) {
     const bracketRanges = Array.isArray(props.bracketRanges) ? props.bracketRanges : [];
     const bracketRef = useRef(null);
     const [editorScrollTop, setEditorScrollTop] = useState(0);
+    const [mdImages, setMdImages] = useState({});
+    const mdImagePendingRef = useRef({});
+    const mdImageCacheRef = useRef({});
     const findHighlight = useMemo(function () {
         if (findOpen === false || findMatches.length === 0 || readOnly === true)
             return null;
@@ -7451,6 +7599,65 @@ function FileViewer(props) {
     const isMarkdown = props.language === 'markdown';
     const markdownMode = props.markdownMode === 'preview' ? 'preview' : 'source';
     const previewMode = isMarkdown && markdownMode === 'preview';
+    const mdImageRoot = typeof props.root === 'string' ? props.root : '';
+    const mdImageEntries = useMemo(function () {
+        if (previewMode !== true || typeof S.collectMarkdownImages !== 'function')
+            return [];
+        return S.collectMarkdownImages(props.value, props.path);
+    }, [previewMode, props.value, props.path]);
+    // A different Markdown file resolves the same relative URL against another
+    // directory, so drop the per-file image cache when the open path changes.
+    useEffect(function () {
+        mdImagePendingRef.current = {};
+        mdImageCacheRef.current = {};
+        setMdImages({});
+    }, [props.path]);
+    // Markdown images that live in the workspace are read through the Host image
+    // route and turned into data URLs; a page origin cannot fetch file paths.
+    useEffect(function () {
+        if (previewMode !== true || mdImageEntries.length === 0)
+            return undefined;
+        let cancelled = false;
+        for (let index = 0; index < mdImageEntries.length; index = index + 1) {
+            const entry = mdImageEntries[index];
+            if (entry === null || entry === undefined || typeof entry.path !== 'string' || entry.path.length === 0)
+                continue;
+            const cacheKey = entry.path;
+            if (mdImageCacheRef.current[cacheKey] !== undefined || mdImagePendingRef.current[cacheKey] === true)
+                continue;
+            mdImagePendingRef.current[cacheKey] = true;
+            S.requestJson(S.apiUrl(ROUTES.image, { root: mdImageRoot, path: cacheKey }))
+                .then(function (payload) {
+                if (cancelled)
+                    return;
+                const mime = payload !== null && payload !== undefined && typeof payload.mime === 'string' ? payload.mime : '';
+                const base64 = payload !== null && payload !== undefined && typeof payload.base64 === 'string' ? payload.base64 : '';
+                const src = mime.length > 0 && base64.length > 0 && typeof S.buildImageDataUrl === 'function'
+                    ? S.buildImageDataUrl(mime, base64)
+                    : null;
+                if (typeof src !== 'string' || src.length === 0)
+                    return;
+                mdImageCacheRef.current[cacheKey] = src;
+                setMdImages(function (previous) {
+                    if (previous[cacheKey] === src)
+                        return previous;
+                    const next = Object.assign({}, previous);
+                    next[cacheKey] = src;
+                    return next;
+                });
+            })
+                .catch(function () {
+                // Leave the dashed alt placeholder in place; a missing/permission-
+                // denied image must not blank the whole preview.
+                if (cancelled)
+                    return;
+                mdImageCacheRef.current[cacheKey] = '';
+            });
+        }
+        return function () {
+            cancelled = true;
+        };
+    }, [previewMode, mdImageEntries, mdImageRoot]);
     const isSvg = props.isSvg === true;
     const svgMode = props.svgMode === 'source' ? 'source' : 'image';
     const svgImageMode = isSvg && svgMode === 'image';
@@ -7758,7 +7965,17 @@ function FileViewer(props) {
                 tabIndex: 0,
                 'data-md-preview': '1',
                 onKeyDown: props.onKeyDown,
-            }, h('div', { style: S.MD_STYLE.inner }, typeof S.renderMarkdown === 'function' ? S.renderMarkdown(props.value) : null))
+            }, h('div', { style: S.MD_STYLE.inner }, typeof S.renderMarkdown === 'function'
+                ? S.renderMarkdown(props.value, {
+                    resolveImage: function (url) {
+                        const imagePath = typeof S.mdImagePath === 'function' ? S.mdImagePath(url, props.path) : null;
+                        if (imagePath === null)
+                            return null;
+                        const resolved = mdImages[imagePath];
+                        return typeof resolved === 'string' && resolved.length > 0 ? resolved : null;
+                    },
+                })
+                : null))
             : readOnly
                 ? h('div', { style: ST_FILES.readOnlyScroll }, h('div', { style: wrap ? ST_FILES.readOnlyInnerWrap : ST_FILES.readOnlyInner }, wrap ? null : h('pre', { style: editorReadOnlyGutterStyle, 'aria-hidden': true }, numbersText), h('pre', {
                     style: editorReadOnlyCodeStyle,
@@ -9373,6 +9590,7 @@ function FilesView(props) {
     else if (file.status === 'loaded') {
         viewer = h(FileViewer, {
             t: t,
+            root: root,
             path: selected,
             value: draft,
             lineCount: lineCount,
@@ -11278,6 +11496,8 @@ S.face = {
             parseMarkdown: S.parseMarkdown,
             parseMarkdownInline: S.parseMarkdownInline,
             renderMarkdown: S.renderMarkdown,
+            mdImagePath: S.mdImagePath,
+            collectMarkdownImages: S.collectMarkdownImages,
             MD_STYLE: S.MD_STYLE,
             MD_MAX_SOURCE_CHARS: S.MD_MAX_SOURCE_CHARS,
             ST: { core: S.ST_CORE, shell: S.ST_SHELL, files: S.ST_FILES, search: S.ST_SEARCH, git: S.ST_GIT },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-workspace-ide",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "private": false,
   "description": "A JetBrains-inspired workspace IDE panel for DeepSeek Harness: file tree, TypeScript code editor with find & replace, Quick Open, tabs and syntax highlighting, full-text search, and git status / diff / history",
   "type": "module",