dsh-file-finder 0.3.0 → 0.4.0

package/README.md

@@ -12,6 +12,7 @@ A DeepSeek Harness plugin for finding workspace files without leaving DSH: searc
 - **Edit in place** when you need to: ⌘/Ctrl+Enter opens the built-in editor, which saves through DSH's workspace filesystem and refuses to overwrite a file that changed after it was loaded.
 - **Native shortcuts**: Cmd/Ctrl+P and Cmd/Ctrl+Shift+F, like VS Code, without claiming a default binding in DSH's shortcut registry.
 - **Optional DS Bot bridge**: when the DS Bot plugin is installed, Cmd/Ctrl+Shift+B flips between Bot mode and classic Agent mode; without it neither the shortcut nor its settings card exists.
+- **Preview, not just text**: images, video, audio, PDFs, HTML pages and Markdown open in the built-in viewer; HTML runs in a sandbox, Markdown is rendered with DSH's own renderer, and relative images inside a Markdown file resolve to the workspace.
 - **A redesigned settings page** with cards, keycaps, steppers, and switches, plus an "Opening" preference that chooses whether Enter previews or edits.
 - **Polished interaction**: a frosted command palette, spring-eased mode switch, selected-row rail, loading skeletons, and reduced-motion support.
 
@@ -65,17 +66,25 @@ Without DS Bot nothing is registered or shown: the command never reaches **Setti
 
 Choose a result and press Cmd/Ctrl+Enter (or set the built-in editor as the default action). Save writes the full text back through the workspace filesystem and refuses to overwrite a file that changed after it was loaded. Reload, then save again, to take the newer version. The editor is for UTF-8 text under about 1 MB. Binary files and common build or dependency directories are skipped.
 
+Files that are not text open in the built-in viewer instead: images, video and audio render inline (byte ranges, so video seeking works), PDFs open in the platform frame, HTML pages run in a sandboxed iframe whose scripts cannot reach DSH, and Markdown is rendered with DSH's Markdown renderer, with an **Edit source** button that hands the file to the text editor.
+
 The editor shows a line-number gutter and highlights the caret's line. **Cmd/Ctrl+F** opens in-file search: every match is highlighted, the current one more strongly, with a match count, previous/next buttons, and a **Aa** case-sensitivity toggle. Enter and Shift+Enter step through matches, Escape closes the search and returns focus to the text.
 
 ## Install
 
-From this directory, after the plugin is on disk:
+The plugin is published to npm as **`dsh-file-finder`**, so **Settings → Plugins → Add plugin** resolves the package name directly:
+
+```sh
+dsh plugin add dsh-file-finder
+```
+
+Or install from this checkout:
 
 ```sh
 dsh plugin add /Library/aiProject/dsh-file-finder
 ```
 
-Or install the GitHub archive once it has been pushed. Restart or refresh the DSH page if the new client module does not appear immediately.
+Restart or refresh the DSH page if the new client module does not appear immediately.
 
 The same operations are available to the agent as the `file_finder` tool.
 
@@ -89,10 +98,11 @@ npm test
 
 `npm test` covers the search helpers, the shortcut-default regression guard, and the UI contract (native preview address, palette hooks, reduced-motion rules, the DS Bot bridge, and the editor's line gutter plus in-file find).
 
-The editor has its own browser check for the gutter and in-file find:
+The editor has its own browser check for the gutter and in-file find, and the viewer has one for every preview kind:
 
 ```sh
 npm run check:find
+npm run check:viewer
 ```
 
 The DS Bot bridge also has a browser check that runs the real key handler against DS Bot's real selectors, with and without `ds-bot` in the boot graph:

package/README.zh.md

@@ -12,6 +12,7 @@ DeepSeek Harness 插件：在 DSH 里按文件名或文件内容查找工作区
 - **需要时再编辑**：⌘/Ctrl+回车打开内置编辑器，保存通过 DSH 的工作区文件系统写回；文件在打开后被别的程序改过时会拒绝覆盖。
 - **VS Code 习惯的快捷键**：⌘/Ctrl+P 与 ⌘/Ctrl+Shift+F，但不占用 DSH 快捷键注册表的默认键位。
 - **可选的 DS Bot 桥接**：装了 DS Bot 插件时，⌘/Ctrl+Shift+B 在 Bot 模式与经典 Agent 模式之间来回切换；没装时快捷键和设置卡片都不存在。
+- **不只是文本**：图片、视频、音频、PDF、HTML 和 Markdown 用内置预览打开——视频走字节范围请求，可以拖进度条；HTML 在沙箱里跑，脚本碰不到 DSH 页面；Markdown 用 DSH 自己的渲染器，文内相对路径的图片会解析到工作区。
 - **重新设计的设置页**：卡片分组、键帽、步进器和开关，并新增「打开方式」选择，决定回车是预览还是编辑。
 - **更细腻的交互**：磨砂质感的命令面板、弹性切换动画、选中行指示条、加载骨架，以及 reduced-motion 支持。
 
@@ -66,10 +67,20 @@ DS Bot 的模式切换是它自己的私有状态，没有对外暴露客户端
 
 选中结果后按 ⌘/Ctrl+回车（或把「内置编辑」设为默认动作）打开编辑器。⌘/Ctrl+S 保存；保存使用打开时读到的版本，如果文件期间被别的程序改过，会拒绝覆盖，需要先重新加载。只编辑约 1 MB 以内的 UTF-8 文本。二进制文件，以及 `node_modules`、`.git`、构建目录等，不会进入搜索。
 
+不是文本的文件会走内置预览：图片、视频、音频直接渲染（字节范围请求，视频能拖进度），PDF 用平台预览框，HTML 放在沙箱 iframe 里（脚本访问不到 DSH 页面），Markdown 用 DSH 的 Markdown 渲染器，并带一个「编辑源码」按钮切回文本编辑器。
+
 编辑器左边有行号栏，并高亮光标所在行。**⌘/Ctrl+F** 打开文件内查找：所有命中都会高亮、当前命中更醒目，带命中计数、上一个/下一个按钮和 **Aa** 区分大小写开关；回车/⇧回车切换命中，Esc 关闭查找并把焦点交还正文。
 
 ## 安装
 
+插件已发布到 npm（包名 **`dsh-file-finder`**），在 **设置 → 插件 → 添加插件** 里直接输入包名即可：
+
+```sh
+dsh plugin add dsh-file-finder
+```
+
+也可以从本地目录安装：
+
 ```sh
 dsh plugin add /Library/aiProject/dsh-file-finder
 ```
@@ -88,10 +99,11 @@ npm test
 
 `npm test` 覆盖搜索函数、快捷键默认值的防回归测试，以及 UI 契约（原生预览地址、面板钩子、reduced-motion 规则、DS Bot 桥接，以及编辑器的行号栏与文件内查找）。
 
-编辑器另有浏览器检查，分别验证行号和文件内查找：
+编辑器和预览器各有浏览器检查：一个验证行号与文件内查找，一个验证各种文件类型的预览：
 
 ```sh
 npm run check:find
+npm run check:viewer
 ```
 
 DS Bot 桥接还有一个浏览器检查，用 DS Bot 真实的类名跑一遍按键逻辑，分别验证启动清单里有 / 没有 `ds-bot` 两种情况：

package/client.js

@@ -18,6 +18,11 @@ window.__ModuleLoader__.load({
     const FileTypeIcon = primitives && typeof primitives.FileTypeIcon === 'function'
       ? primitives.FileTypeIcon
       : null
+    // DSH's own Markdown renderer, when the shell provides primitives. The
+    // viewer falls back to plain text in harnesses without them.
+    const MarkdownText = primitives && typeof primitives.MarkdownText === 'function'
+      ? primitives.MarkdownText
+      : null
 
     const dict = {
       zh: {
@@ -109,6 +114,19 @@ window.__ModuleLoader__.load({
         findClose: '关闭查找',
         findNoResult: '无结果',
         hintFind: '查找',
+        readOnly: '只读预览',
+        unpreviewable: '无法预览此类型',
+        editText: '编辑源码',
+        previewUnsupported: '这种文件暂时不能在面板里预览',
+        previewUnsupportedHint: '可以用右侧栏预览，或先把这个文件导出到别处再用系统程序打开。',
+        previewHtmlNote: 'HTML 在沙箱中运行，脚本无法访问 DSH 页面。',
+        kindImage: '图片',
+        kindVideo: '视频',
+        kindAudio: '音频',
+        kindPdf: 'PDF',
+        kindMarkdown: 'Markdown',
+        kindHtml: 'HTML',
+        kindBinary: '二进制文件',
       },
       en: {
         title: 'File Finder',
@@ -199,6 +217,19 @@ window.__ModuleLoader__.load({
         findClose: 'Close search',
         findNoResult: 'No results',
         hintFind: 'find',
+        readOnly: 'Read-only preview',
+        unpreviewable: 'No preview for this type',
+        editText: 'Edit source',
+        previewUnsupported: 'This file type cannot be previewed here yet',
+        previewUnsupportedHint: 'Open it in the right-sidebar preview, or export the file and use a system app.',
+        previewHtmlNote: 'HTML runs sandboxed; its scripts cannot reach the DSH page.',
+        kindImage: 'Image',
+        kindVideo: 'Video',
+        kindAudio: 'Audio',
+        kindPdf: 'PDF',
+        kindMarkdown: 'Markdown',
+        kindHtml: 'HTML',
+        kindBinary: 'Binary file',
       },
     }
 
@@ -479,6 +510,77 @@ window.__ModuleLoader__.load({
       return base.slice(dot + 1).toLowerCase()
     }
 
+    // ── Built-in viewer kinds ──────────────────────────────────────────────
+    // Extension-driven, mirroring the host's fileKindOf. Media and documents
+    // open in the viewer; everything else goes through the text editor.
+    const KIND_IMAGE = /^(png|jpe?g|gif|webp|avif|bmp|ico|svg)$/
+    const KIND_VIDEO = /^(mp4|webm|mov|m4v|ogv|mkv)$/
+    const KIND_AUDIO = /^(mp3|wav|ogg|oga|m4a|flac|aac|opus)$/
+    const KIND_MARKDOWN = /^(md|markdown|mdown|mdx)$/
+    const KIND_HTML = /^(html|htm)$/
+    const KIND_PDF = /^(pdf)$/
+
+    function previewKindOf(name) {
+      const extension = extOf(name)
+      if (KIND_IMAGE.test(extension)) return 'image'
+      if (KIND_VIDEO.test(extension)) return 'video'
+      if (KIND_AUDIO.test(extension)) return 'audio'
+      if (KIND_PDF.test(extension)) return 'pdf'
+      if (KIND_MARKDOWN.test(extension)) return 'markdown'
+      if (KIND_HTML.test(extension)) return 'html'
+      return 'text'
+    }
+
+    function base64Url(value) {
+      const bytes = new TextEncoder().encode(String(value))
+      let binary = ''
+      for (const byte of bytes) binary += String.fromCharCode(byte)
+      return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+    }
+
+    function rawUrlFor(rootPath, filePath) {
+      const relative = relativePath(rootPath, filePath)
+      if (!relative) return ''
+      return '/dsh-file-finder/ws/' + base64Url(rootPath) + '/'
+        + relative.split('/').map(encodeURIComponent).join('/')
+    }
+
+    function normalizeRelative(baseDir, target) {
+      const value = String(target || '')
+      if (!value || /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(value)) return ''
+      const stack = String(baseDir || '').split('/').filter(Boolean)
+      for (const part of value.split('/')) {
+        if (!part || part === '.') continue
+        if (part === '..') stack.pop()
+        else stack.push(part)
+      }
+      return stack.join('/')
+    }
+
+    // Markdown images and <img> tags with relative sources are pointed at the raw
+    // route, so a README's screenshots show up inside the panel.
+    function rewriteMarkdownAssets(text, rootPath, filePath) {
+      const baseDir = dirOf(relativePath(rootPath, filePath))
+      const token = base64Url(rootPath)
+      const toUrl = (target) => {
+        const resolved = normalizeRelative(baseDir, target)
+        if (!resolved) return ''
+        const path = '/dsh-file-finder/ws/' + token + '/' + resolved.split('/').map(encodeURIComponent).join('/')
+        // DSH's Markdown renderer only draws http(s) sources; a same-origin
+        // absolute URL passes that check and still hits our route.
+        try { return new URL(path, location.href).href } catch { return path }
+      }
+      return String(text || '')
+        .replace(/(!\[[^\]]*\]\()([^)\s]+)(\))/g, (whole, head, target, tail) => {
+          const url = toUrl(target)
+          return url ? head + url + tail : whole
+        })
+        .replace(/(<img\b[^>]*\bsrc=["'])([^"']+)(["'])/gi, (whole, head, target, tail) => {
+          const url = toUrl(target)
+          return url ? head + url + tail : whole
+        })
+    }
+
     function fileAccent(name) {
       const ext = extOf(name)
       if (/^(js|mjs|cjs|jsx|ts|tsx|mts|cts)$/.test(ext)) return 'amber'
@@ -1157,8 +1259,19 @@ window.__ModuleLoader__.load({
         setFindIndex(0)
         try {
           const data = await post('/dsh-file-finder/read', { root, path: item.path })
-          setFile({ path: data.path, version: data.version, text: data.text, bytes: data.bytes, line: item.line || 1 })
-          setDraft(data.text)
+          const text = typeof data.text === 'string' ? data.text : ''
+          // The host decides the kind from the extension and decodability; media
+          // and PDFs arrive without text and are rendered by the viewer.
+          const kind = typeof data.kind === 'string' && data.kind ? data.kind : previewKindOf(item.path)
+          setFile({
+            path: data.path,
+            version: data.version,
+            text,
+            bytes: data.bytes,
+            line: item.line || 1,
+            kind,
+          })
+          setDraft(text)
           setView('editor')
         } catch (reason) {
           setError(reason instanceof Error ? reason.message : String(reason))
@@ -1169,6 +1282,12 @@ window.__ModuleLoader__.load({
 
       async function openPrimary(item) {
         if (busy) return
+        // Media and documents have nothing to edit here, so they always open in
+        // the built-in viewer instead of the sidebar/native split.
+        if (previewKindOf(item.path) !== 'text') {
+          await openEditor(item)
+          return
+        }
         if (prefsState.openMode === 'preview') {
           if (openNative(item)) {
             store.close()
@@ -1181,6 +1300,10 @@ window.__ModuleLoader__.load({
 
       async function openSecondary(item) {
         if (busy) return
+        if (previewKindOf(item.path) !== 'text') {
+          await openEditor(item)
+          return
+        }
         if (prefsState.openMode === 'preview') {
           setNotice('')
           await openEditor(item)
@@ -1252,7 +1375,7 @@ window.__ModuleLoader__.load({
       }
 
       function onPanelKey(event) {
-        if (view === 'editor' && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'f') {
+        if (view === 'editor' && file && file.kind === 'text' && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'f') {
           event.preventDefault()
           event.stopPropagation()
           openFind()
@@ -1562,6 +1685,115 @@ window.__ModuleLoader__.load({
             h('span', { className: 'dff-rootpath', title: root }, h(FolderIcon, { size: 12 }), h('span', { className: 'dff-rootpath-text' }, h('bdi', null, root)))))
       }
 
+
+      // ── Built-in viewer ──────────────────────────────────────────────────
+      function switchToEditor() {
+        if (!file || typeof file.text !== 'string' || !file.text) return
+        setFile({ ...file, kind: 'text' })
+        setDraft(file.text)
+        setFindOpen(false)
+        setFindQuery('')
+        setFindIndex(0)
+      }
+
+      // Links inside a rendered Markdown file: keep external ones to the browser
+      // and route workspace-relative ones back through the viewer.
+      function onMarkdownClick(event) {
+        const anchor = event.target && typeof event.target.closest === 'function'
+          ? event.target.closest('a')
+          : null
+        if (!anchor || !file) return
+        const href = anchor.getAttribute('href') || ''
+        if (/^(?:https?:|mailto:)/i.test(href)) return
+        event.preventDefault()
+        const relative = normalizeRelative(dirOf(relativePath(root, file.path)), href)
+        if (!relative) return
+        openEditor({ path: root.replace(/\/+$/, '') + '/' + relative, line: 1 })
+      }
+
+      function viewerBody(kind) {
+        const name = file ? baseName(file.path) : ''
+        const src = file ? rawUrlFor(root, file.path) : ''
+        if (kind === 'image') {
+          return h('div', { className: 'dff-media', 'data-dff-viewer': 'image' },
+            h('img', { className: 'dff-media-image', src, alt: name, draggable: false }))
+        }
+        if (kind === 'video') {
+          return h('div', { className: 'dff-media is-dark', 'data-dff-viewer': 'video' },
+            h('video', { className: 'dff-media-video', src, controls: true, preload: 'metadata', playsInline: true }))
+        }
+        if (kind === 'audio') {
+          return h('div', { className: 'dff-media dff-media-audio', 'data-dff-viewer': 'audio' },
+            h('audio', { src, controls: true, preload: 'metadata' }))
+        }
+        if (kind === 'pdf') {
+          return h('iframe', { className: 'dff-frame', src, title: name, 'data-dff-viewer': 'pdf' })
+        }
+        if (kind === 'html') {
+          return h('div', { className: 'dff-frame-wrap', 'data-dff-viewer': 'html' },
+            h('iframe', {
+              className: 'dff-frame',
+              src,
+              title: name,
+              sandbox: 'allow-scripts',
+              referrerPolicy: 'no-referrer',
+            }),
+            h('span', { className: 'dff-frame-note' }, t('previewHtmlNote')))
+        }
+        if (kind === 'markdown') {
+          const source = file && typeof file.text === 'string' ? file.text : ''
+          if (!source) return viewerEmpty()
+          return h('div', { className: 'dff-doc-wrap', 'data-dff-viewer': 'markdown' },
+            MarkdownText
+              ? h('div', { className: 'dff-markdown', onClickCapture: onMarkdownClick },
+                h(MarkdownText, { text: rewriteMarkdownAssets(source, root, file.path), variant: 'body' }))
+              : h('pre', { className: 'dff-markdown-fallback' }, source))
+        }
+        return viewerEmpty()
+      }
+
+      function viewerEmpty() {
+        return h('div', { className: 'dff-viewer-empty' },
+          h(WarningIcon, { size: 22, className: 'dff-viewer-empty-icon' }),
+          h('strong', null, t('previewUnsupported')),
+          h('p', null, t('previewUnsupportedHint')))
+      }
+
+      function viewerView() {
+        const name = file ? baseName(file.path) : t('title')
+        const kind = file && file.kind ? file.kind : 'binary'
+        const canEdit = Boolean(file && typeof file.text === 'string' && file.text.length > 0
+          && (kind === 'markdown' || kind === 'html'))
+        return h('div', { className: 'dff-view', key: 'viewer' },
+          h('div', { className: 'dff-head dff-head-editor' },
+            h('button', {
+              type: 'button', className: 'dff-icon-btn', 'aria-label': t('back'),
+              onClick: leaveEditor,
+            }, h(BackIcon, { size: 16 })),
+            h('span', { className: 'dff-editor-glyph' }, h(FileGlyph, { name, size: 20 })),
+            h('span', { className: 'dff-editor-title' },
+              h('strong', null, name),
+              h('small', { title: file ? file.path : '' }, h('bdi', null, file ? (dirOf(relativePath(root, file.path)) || baseName(root) || parentOf(file.path)) : ''))),
+            h('span', { className: 'dff-editor-state', 'data-state': 'readonly' },
+              h('span', { className: 'dff-dot', 'aria-hidden': 'true' }),
+              kind === 'binary' ? t('unpreviewable') : t('readOnly')),
+            h('div', { className: 'dff-editor-actions' },
+              canEdit ? h('button', {
+                type: 'button', className: 'dff-ghost-btn', disabled: busy, onClick: switchToEditor,
+              }, t('editText')) : null,
+              h('button', { type: 'button', className: 'dff-icon-btn', 'aria-label': t('openInSidebar'), title: t('openInSidebar'), disabled: busy, onClick: previewCurrent }, h(SidebarIcon, { size: 16 })),
+              h('button', { type: 'button', className: 'dff-icon-btn', 'aria-label': t('reload'), title: t('reload'), disabled: busy, onClick: reloadFile }, h(RefreshIcon, { size: 15 })),
+              h('button', { type: 'button', className: 'dff-icon-btn', 'aria-label': t('close'), onClick: closePanel }, h(CloseIcon, { size: 16 })))),
+          message(),
+          h('div', { className: 'dff-viewer-body' },
+            h('div', { className: 'dff-editor-meta dff-viewer-meta' },
+              h('span', { className: 'dff-editor-path', title: file ? file.path : '' }, h('bdi', null, file ? file.path : '')),
+              h('span', { className: 'dff-editor-stats' },
+                file && file.bytes ? h('span', null, bytesText(file.bytes)) : null,
+                h('span', null, t('kind' + (kind.charAt(0).toUpperCase() + kind.slice(1)))))),
+            viewerBody(kind)))
+      }
+
       function editorView() {
         const name = file ? baseName(file.path) : t('title')
         const state = dirty ? 'dirty' : status === t('conflict') ? 'conflict' : 'saved'
@@ -1729,7 +1961,7 @@ window.__ModuleLoader__.load({
         'aria-modal': 'true',
         'aria-label': t('title'),
         onKeyDown: onPanelKey,
-      }, view === 'search' ? searchView() : editorView()))
+      }, view === 'search' ? searchView() : file && file.kind && file.kind !== 'text' ? viewerView() : editorView()))
     }
 
     function SettingsPage(props) {
@@ -2421,6 +2653,57 @@ window.__ModuleLoader__.load({
       .dff-editor::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 10px; background-clip: content-box; background-color: var(--dsw-alias-scrollbar-bg-l1); }
       .dff-editor::-webkit-scrollbar-thumb:hover { background-color: var(--dsw-alias-scrollbar-hover-l1); }
 
+
+      /* ── Built-in viewer ──────────────────────────────────────────────── */
+      .dff-viewer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 10px 12px 12px; }
+      .dff-viewer-meta { padding-bottom: 8px; }
+      .dff-media {
+        flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
+        padding: 14px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px;
+        background: var(--dsw-alias-bg-module-platform); overflow: hidden;
+      }
+      .dff-media.is-dark { background: #0b0d12; }
+      .dff-media-image { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
+      .dff-media-video { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; }
+      .dff-media-audio { padding: 40px; }
+      .dff-media-audio audio { width: min(520px, 100%); }
+      .dff-frame-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+      .dff-frame { flex: 1; min-height: 0; width: 100%; border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; background: #fff; }
+      .dff-frame-note { flex: none; padding: 8px 2px 0; color: var(--dsw-alias-label-tertiary); font-size: 11px; }
+      .dff-doc-wrap { flex: 1; min-height: 0; display: flex; }
+      .dff-markdown {
+        flex: 1; min-height: 0; overflow: auto; padding: 20px 26px;
+        border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px;
+        background: var(--dsw-alias-markdown-code-block);
+        color: var(--dsw-alias-label-primary);
+      }
+      .dff-markdown img { max-width: 100%; height: auto; border-radius: 8px; }
+      .dff-markdown-fallback {
+        flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 18px 20px;
+        border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px;
+        background: var(--dsw-alias-markdown-code-block);
+        color: var(--dsw-alias-label-primary);
+        font: 12.5px/20px var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+        white-space: pre-wrap; word-break: break-word;
+      }
+      .dff-viewer-empty {
+        flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+        border: 1px dashed var(--dsw-alias-border-l2); border-radius: 12px;
+        color: var(--dsw-alias-label-secondary); text-align: center; padding: 24px;
+      }
+      .dff-viewer-empty strong { font-size: 14px; color: var(--dsw-alias-label-primary); }
+      .dff-viewer-empty p { margin: 0; max-width: 420px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); }
+      .dff-viewer-empty-icon { color: var(--dsw-alias-label-tertiary); }
+      .dff-editor-state[data-state="readonly"] { color: var(--dsw-alias-label-tertiary); }
+      .dff-editor-state[data-state="readonly"] .dff-dot { background: var(--dsw-alias-label-tertiary); opacity: 0.6; animation: none; }
+      .dff-ghost-btn {
+        height: 28px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px;
+        background: transparent; color: var(--dsw-alias-label-secondary);
+        font: inherit; font-size: 12px; cursor: pointer;
+      }
+      .dff-ghost-btn:hover:not(:disabled) { background: var(--dsw-alias-bg-module-platform); color: var(--dsw-alias-label-primary); }
+      .dff-ghost-btn:disabled { opacity: 0.4; cursor: default; }
+
       .dff-banner {
         display: flex; align-items: center; gap: 8px;
         margin: 8px 12px 0; padding: 9px 12px;

package/index.js

@@ -31,6 +31,52 @@ const BINARY_EXT = new Set([
   'ipa', 'apk', 'aar',
 ])
 
+// ── Previewable kinds ──────────────────────────────────────────────────────
+// The built-in viewer renders these without turning them into text; anything
+// else goes through the text editor (and falls back to a binary notice when the
+// bytes are not decodable).
+const IMAGE_EXT = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'bmp', 'ico', 'svg'])
+const VIDEO_EXT = new Set(['mp4', 'webm', 'mov', 'm4v', 'ogv', 'mkv'])
+const AUDIO_EXT = new Set(['mp3', 'wav', 'ogg', 'oga', 'm4a', 'flac', 'aac', 'opus'])
+const MARKDOWN_EXT = new Set(['md', 'markdown', 'mdown', 'mdx'])
+const HTML_EXT = new Set(['html', 'htm'])
+const PDF_EXT = new Set(['pdf'])
+
+const MIME_TYPES = {
+  png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif',
+  webp: 'image/webp', avif: 'image/avif', bmp: 'image/bmp', ico: 'image/x-icon',
+  svg: 'image/svg+xml',
+  mp4: 'video/mp4', webm: 'video/webm', mov: 'video/quicktime', m4v: 'video/x-m4v',
+  ogv: 'video/ogg', mkv: 'video/x-matroska',
+  mp3: 'audio/mpeg', wav: 'audio/wav', ogg: 'audio/ogg', oga: 'audio/ogg',
+  m4a: 'audio/mp4', flac: 'audio/flac', aac: 'audio/aac', opus: 'audio/ogg',
+  pdf: 'application/pdf',
+  html: 'text/html; charset=utf-8', htm: 'text/html; charset=utf-8',
+  css: 'text/css; charset=utf-8', js: 'text/javascript; charset=utf-8',
+  mjs: 'text/javascript; charset=utf-8', cjs: 'text/javascript; charset=utf-8',
+  json: 'application/json; charset=utf-8', map: 'application/json; charset=utf-8',
+  txt: 'text/plain; charset=utf-8', md: 'text/markdown; charset=utf-8',
+  xml: 'application/xml; charset=utf-8', wasm: 'application/wasm',
+  woff: 'font/woff', woff2: 'font/woff2', ttf: 'font/ttf', otf: 'font/otf',
+  yml: 'text/yaml; charset=utf-8', yaml: 'text/yaml; charset=utf-8',
+}
+
+/** Which built-in viewer should open a path. */
+export function fileKindOf(name) {
+  const extension = extensionOf(name)
+  if (IMAGE_EXT.has(extension)) return 'image'
+  if (VIDEO_EXT.has(extension)) return 'video'
+  if (AUDIO_EXT.has(extension)) return 'audio'
+  if (PDF_EXT.has(extension)) return 'pdf'
+  if (MARKDOWN_EXT.has(extension)) return 'markdown'
+  if (HTML_EXT.has(extension)) return 'html'
+  return 'text'
+}
+
+function mimeOf(name) {
+  return MIME_TYPES[extensionOf(name)] || 'application/octet-stream'
+}
+
 function fold(value, caseSensitive) {
   const text = String(value || '')
   return caseSensitive ? text : text.toLowerCase()
@@ -310,27 +356,166 @@ async function searchContent(ctx, rootPath, query, signal, options) {
 async function readFile(ctx, rootPath, filePath, signal) {
   const { target } = await resolveInside(ctx, rootPath, filePath)
   const info = await ctx.fs.stat(target, signal)
-  if (!info || info.type !== 'file') throw Object.assign(new Error('不是可编辑的文件'), { code: 'not-text' })
+  if (!info || info.type !== 'file') throw Object.assign(new Error('不是可预览的文件'), { code: 'not-text' })
+  const path = visiblePath(ctx, target)
+  const name = path.split('/').pop() || path
+  const kind = fileKindOf(name)
+  const base = {
+    ok: true,
+    path,
+    version: String(info.version),
+    bytes: info.size,
+    kind,
+  }
+  // Media and PDFs are served by the raw route; the client never needs their bytes.
+  if (kind !== 'text') {
+    if ((kind === 'markdown' || kind === 'html')
+      && (typeof info.size !== 'number' || info.size <= READ_BYTE_CAP)) {
+      try {
+        const text = await ctx.fs.readText(target, signal)
+        if (text.length <= WRITE_CHAR_CAP) return { ...base, text }
+      } catch { /* a metadata-only preview is still useful */ }
+    }
+    return base
+  }
   if (typeof info.size === 'number' && info.size > READ_BYTE_CAP) {
     throw Object.assign(new Error('文件过大，不能在这里编辑'), { code: 'too-large' })
   }
-  const text = await ctx.fs.readText(target, signal)
+  let text
+  try {
+    text = await ctx.fs.readText(target, signal)
+  } catch {
+    // A text extension with binary bytes: preview it as an opaque file instead
+    // of failing the whole open.
+    return { ...base, kind: 'binary' }
+  }
   if (text.length > WRITE_CHAR_CAP) {
     throw Object.assign(new Error('文件过大，不能在这里编辑'), { code: 'too-large' })
   }
-  return {
-    ok: true,
-    path: visiblePath(ctx, target),
-    text,
-    version: String(info.version),
-    bytes: info.size,
+  return { ...base, text }
+}
+
+// ── Raw bytes for the built-in viewer ──────────────────────────────────────
+// One prefix route per file, so relative URLs inside a previewed HTML page
+// resolve here too. Ranges are capped per response; the browser asks for the
+// next window, which is what makes video seeking work without buffering the
+// whole file in the host.
+const RAW_CHUNK_BYTES = 8 * 1024 * 1024
+const RAW_FULL_CAP = 64 * 1024 * 1024
+
+export function parseRange(value, size) {
+  const match = /^bytes=(\d*)-(\d*)$/.exec(String(value || '').replace(/\s+/g, ''))
+  if (!match) return null
+  const rawStart = match[1]
+  const rawEnd = match[2]
+  if (rawStart === '' && rawEnd === '') return null
+  let start
+  let end
+  if (rawStart === '') {
+    const suffix = Number(rawEnd)
+    if (!Number.isFinite(suffix) || suffix <= 0) return 'invalid'
+    start = Math.max(0, size - suffix)
+    end = size - 1
+  } else {
+    start = Number(rawStart)
+    end = rawEnd === '' ? size - 1 : Math.min(Number(rawEnd), size - 1)
+  }
+  if (!Number.isFinite(start) || !Number.isFinite(end) || start > end || start >= size) return 'invalid'
+  return { start, end }
+}
+
+export async function serveRaw(ctx, req, res, signal) {
+  if (req.method !== 'GET' && req.method !== 'HEAD') {
+    res.statusCode = 405
+    res.setHeader('content-type', 'text/plain; charset=utf-8')
+    res.end('只接受 GET')
+    return
+  }
+  const prefix = '/dsh-file-finder/ws/'
+  const url = new URL(req.url || '/', 'http://dsh-file-finder.invalid')
+  const rest = url.pathname.startsWith(prefix) ? url.pathname.slice(prefix.length) : ''
+  const slash = rest.indexOf('/')
+  if (slash <= 0 || slash === rest.length - 1) {
+    res.statusCode = 400
+    res.setHeader('content-type', 'text/plain; charset=utf-8')
+    res.end('缺少路径')
+    return
+  }
+  let rootPath = ''
+  let relative = ''
+  try {
+    rootPath = Buffer.from(decodeURIComponent(rest.slice(0, slash)), 'base64url').toString('utf8')
+    relative = rest.slice(slash + 1).split('/').map((segment) => decodeURIComponent(segment)).join('/')
+  } catch {
+    rootPath = ''
+  }
+  if (!rootPath || !relative) {
+    res.statusCode = 400
+    res.setHeader('content-type', 'text/plain; charset=utf-8')
+    res.end('缺少路径')
+    return
+  }
+  const targetPath = rootPath.replace(/\/+$/, '') + '/' + relative
+  const { target } = await resolveInside(ctx, rootPath, targetPath)
+  const info = await ctx.fs.stat(target, signal)
+  if (!info || info.type !== 'file') {
+    res.statusCode = 404
+    res.setHeader('content-type', 'text/plain; charset=utf-8')
+    res.end('没有这个文件')
+    return
+  }
+  const displayPath = visiblePath(ctx, target)
+  const size = Number(info.size) || 0
+  res.setHeader('content-type', mimeOf(displayPath))
+  res.setHeader('accept-ranges', 'bytes')
+  res.setHeader('cache-control', 'no-store')
+  res.setHeader('x-content-type-options', 'nosniff')
+  const range = parseRange(req.headers.range, size)
+  if (range === 'invalid') {
+    res.statusCode = 416
+    res.setHeader('content-range', `bytes */${size}`)
+    res.end()
+    return
+  }
+  if (range) {
+    const start = range.start
+    const end = Math.min(range.end, range.start + RAW_CHUNK_BYTES - 1)
+    const buffer = await ctx.fs.readByteRange(target, { offset: start, length: end - start + 1 }, signal)
+    res.statusCode = 206
+    res.setHeader('content-range', `bytes ${start}-${end}/${size}`)
+    res.setHeader('content-length', String(buffer.length))
+    if (req.method === 'HEAD') {
+      res.end()
+      return
+    }
+    res.end(buffer)
+    return
   }
+  if (size > RAW_FULL_CAP) {
+    res.statusCode = 413
+    res.setHeader('content-type', 'text/plain; charset=utf-8')
+    res.end('文件过大，请改用 DSH 右侧栏预览或系统应用打开')
+    return
+  }
+  const buffer = await ctx.fs.readBytes(target, signal, RAW_FULL_CAP)
+  res.statusCode = 200
+  res.setHeader('content-length', String(buffer.length))
+  if (req.method === 'HEAD') {
+    res.end()
+    return
+  }
+  res.end(buffer)
 }
 
 async function saveFile(ctx, rootPath, filePath, content, version, signal) {
   if (typeof content !== 'string') throw new Error('缺少文件内容')
   if (content.length > WRITE_CHAR_CAP) throw Object.assign(new Error('内容过大，不能保存'), { code: 'too-large' })
   const { target } = await resolveInside(ctx, rootPath, filePath)
+  const displayPath = visiblePath(ctx, target)
+  const kind = fileKindOf(displayPath.split('/').pop() || displayPath)
+  if (kind !== 'text' && kind !== 'markdown' && kind !== 'html') {
+    throw Object.assign(new Error('这个文件类型不能在面板里编辑'), { code: 'not-text' })
+  }
   const info = await ctx.fs.stat(target, signal)
   if (!info || info.type !== 'file') throw Object.assign(new Error('不是可编辑的文件'), { code: 'not-text' })
   if (version && String(info.version) !== String(version)) {
@@ -401,6 +586,35 @@ function registerRoutes(ctx) {
       },
     }), `dsh-file-finder: /dsh-file-finder/${name}`)
   }
+  // The built-in viewer's read-only byte route: images, video, audio, PDFs and
+  // HTML previews (plus the assets a previewed page asks for).
+  ctx.effect(() => ctx.webServer.register({
+    kind: 'prefix',
+    // Prefix routes match `${path}/…`: keep this without the trailing slash.
+    path: '/dsh-file-finder/ws',
+    handler: async (req, res) => {
+      const connection = ctx.get('connection')
+      const rejected = rejectionStatus(connection, req)
+      if (rejected !== undefined) {
+        res.statusCode = rejected
+        res.end()
+        return
+      }
+      const controller = new AbortController()
+      res.on('close', () => {
+        if (!res.writableEnded) controller.abort()
+      })
+      try {
+        await serveRaw(ctx, req, res, controller.signal)
+      } catch (error) {
+        if (!res.writableEnded) {
+          res.statusCode = error && error.code === 'FS_TOO_LARGE' ? 413 : 404
+          res.setHeader('content-type', 'text/plain; charset=utf-8')
+          res.end(errorText(error))
+        }
+      }
+    },
+  }), 'dsh-file-finder: raw files')
 }
 
 function registerTool(ctx) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-file-finder",
-  "version": "0.3.0",
-  "description": "File search palette for DSH: find workspace files by name or content, open them in DSH's native preview, and edit text files when needed.",
+  "version": "0.4.0",
+  "description": "File finder for DSH: search by name or content, preview images, video, audio, PDF, HTML and Markdown, and edit text files with line numbers and in-file find.",
   "license": "MIT",
   "type": "module",
   "icon": "./icon.svg",
@@ -34,10 +34,11 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "node --test test/search.test.mjs test/boot-safety.test.mjs test/ui-contract.test.mjs",
+    "test": "node --test test/search.test.mjs test/raw-route.test.mjs test/boot-safety.test.mjs test/ui-contract.test.mjs",
     "preview": "node preview/screenshot.mjs",
     "check:bot": "node preview/bot-check.mjs",
-    "check:find": "node preview/find-check.mjs"
+    "check:find": "node preview/find-check.mjs",
+    "check:viewer": "node preview/viewer-check.mjs"
   },
   "dsh": {
     "bundle": {