@rooode/dsh-plugin-preview 0.1.0

package/lib/client.js

@@ -0,0 +1,2200 @@
+/**
+ * DeepSeek Harness - Markdown & Document Preview Client Bundle
+ * @rooode/dsh-plugin-preview / @deepseek-ai/dsh-client-ui-preview
+ *
+ * Provides a right-side multi-tab Markdown & file preview panel inspired by WorkBuddy (wb).
+ * Automatically intercepts .md, .markdown, .txt, .json, .yaml etc. clicks from chat deliverables & tool rows,
+ * rendering rich GFM Markdown, syntax-highlighted code blocks, TOC outline, LaTeX math, and split view,
+ * without popping up Windows Notepad.
+ */
+
+window.__ModuleLoader__.load({
+  id: "@deepseek-ai/dsh-client-ui-preview",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+    Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+
+    const React = require("react");
+    const ReactDOM = require("react-dom");
+    const { useState, useEffect, useRef, useMemo, useCallback, createElement: h, Fragment } = React;
+
+    // =========================================================================
+    // Storage & State Constants
+    // =========================================================================
+    const STORAGE_KEY_TABS = 'dsh:preview:tabs:v1';
+    const STORAGE_KEY_WIDTH = 'dsh:preview:panel_width:v1';
+    const DEFAULT_PANEL_WIDTH = 620;
+    const MIN_PANEL_WIDTH = 380;
+    const SUPPORTED_EXTENSIONS = new Set([
+      '.md', '.markdown', '.mdown', '.mkdn', '.mdwn',
+      '.txt', '.log', '.json', '.yaml', '.yml',
+      '.js', '.jsx', '.ts', '.tsx', '.html', '.css', '.scss',
+      '.py', '.sh', '.bash', '.ps1', '.sql', '.toml', '.xml'
+    ]);
+
+    // =========================================================================
+    // Global Event Bus & State Store
+    // =========================================================================
+    let clientCtx = null;
+    let globalTabs = [];
+    let globalActiveTabId = null;
+    let globalIsPanelOpen = false;
+    let globalPanelWidth = DEFAULT_PANEL_WIDTH;
+    const stateListeners = new Set();
+
+    try {
+      const savedWidth = localStorage.getItem(STORAGE_KEY_WIDTH);
+      if (savedWidth) {
+        const parsed = parseInt(savedWidth, 10);
+        if (!isNaN(parsed) && parsed >= MIN_PANEL_WIDTH) {
+          globalPanelWidth = Math.min(parsed, Math.floor(window.innerWidth * 0.92));
+        }
+      }
+    } catch (e) {}
+
+    try {
+      const savedTabs = localStorage.getItem(STORAGE_KEY_TABS);
+      if (savedTabs) {
+        globalTabs = JSON.parse(savedTabs);
+        if (globalTabs.length > 0) {
+          globalActiveTabId = globalTabs[0].id;
+        }
+      }
+    } catch (e) {}
+
+    function notifyStateChange() {
+      for (const fn of stateListeners) {
+        try { fn(); } catch (err) { console.error('[Preview] State notify error:', err); }
+      }
+    }
+
+    function saveTabsToStorage() {
+      try {
+        localStorage.setItem(STORAGE_KEY_TABS, JSON.stringify(globalTabs.slice(0, 15)));
+      } catch (e) {}
+    }
+
+    function setPanelWidth(width) {
+      const maxW = Math.floor(window.innerWidth * 0.92);
+      globalPanelWidth = Math.max(MIN_PANEL_WIDTH, Math.min(width, maxW));
+      try {
+        localStorage.setItem(STORAGE_KEY_WIDTH, String(globalPanelWidth));
+      } catch (e) {}
+      notifyStateChange();
+    }
+
+    function setPanelOpen(open) {
+      globalIsPanelOpen = open;
+      notifyStateChange();
+    }
+
+    function getFileExtension(filePath) {
+      if (!filePath) return '';
+      const clean = filePath.split('#')[0].split('?')[0];
+      const match = clean.match(/\.([a-zA-Z0-9_-]+)$/);
+      return match ? ('.' + match[1].toLowerCase()) : '';
+    }
+
+    function getFileName(filePath) {
+      if (!filePath) return '未命名文件';
+      const clean = filePath.split('#')[0].split('?')[0].replace(/[\\/]+$/, '');
+      const parts = clean.split(/[\\/]/);
+      return parts[parts.length - 1] || filePath;
+    }
+
+    function isPreviewableFile(filePath) {
+      if (!filePath) return false;
+      const ext = getFileExtension(filePath);
+      return SUPPORTED_EXTENSIONS.has(ext);
+    }
+
+    function resolveAbsoluteFilePath(targetPath) {
+      if (!targetPath) return '';
+      let cleanPath = targetPath.trim();
+      if (cleanPath.startsWith('file:///')) {
+        cleanPath = decodeURIComponent(cleanPath.replace(/^file:\/\/\/?/, ''));
+        if (cleanPath.match(/^[a-zA-Z]:\//)) {
+          cleanPath = cleanPath.replace(/\//g, '\\');
+        }
+      }
+      const isWinAbs = /^[a-zA-Z]:[\\/]/.test(cleanPath);
+      const isPosixAbs = cleanPath.startsWith('/');
+      if (isWinAbs || isPosixAbs) {
+        return cleanPath;
+      }
+      let cwd = '';
+      if (clientCtx && clientCtx.sessions) {
+        try {
+          const snapshot = clientCtx.sessions.list.getSnapshot();
+          const currentSessionId = snapshot.current;
+          if (currentSessionId && snapshot.byId[currentSessionId]) {
+            cwd = snapshot.byId[currentSessionId].cwd || '';
+          }
+        } catch (e) {}
+      }
+      if (!cwd && clientCtx && clientCtx.workspaces) {
+        try {
+          const wsList = clientCtx.workspaces.list.getSnapshot();
+          if (wsList.items && wsList.items.length > 0) {
+            cwd = wsList.items[0].directory || '';
+          }
+        } catch (e) {}
+      }
+      if (cwd) {
+        const isWinCwd = /^[a-zA-Z]:[\\/]/.test(cwd);
+        const sep = isWinCwd ? '\\' : '/';
+        const normCwd = cwd.replace(/[\\/]+$/, '');
+        const normRel = cleanPath.replace(/^[\\/]+/, '');
+        return isWinCwd
+          ? `${normCwd}\\${normRel.replace(/\//g, '\\')}`
+          : `${normCwd}/${normRel}`;
+      }
+      return cleanPath;
+    }
+
+    // =========================================================================
+    // Open & Tab Management Functions
+    // =========================================================================
+    function openPreviewFile(rawPath, options = {}) {
+      const fullPath = resolveAbsoluteFilePath(rawPath);
+      const fileName = getFileName(fullPath);
+      const ext = getFileExtension(fullPath);
+      const tabId = 'tab:' + fullPath.toLowerCase();
+
+      const existingIndex = globalTabs.findIndex(t => t.id === tabId || t.filePath.toLowerCase() === fullPath.toLowerCase());
+      if (existingIndex >= 0) {
+        globalActiveTabId = globalTabs[existingIndex].id;
+        globalTabs[existingIndex].lastActiveAt = Date.now();
+      } else {
+        const newTab = {
+          id: tabId,
+          filePath: fullPath,
+          title: fileName,
+          extension: ext,
+          viewMode: options.viewMode || 'preview',
+          pinned: false,
+          createdAt: Date.now(),
+          lastActiveAt: Date.now(),
+        };
+        globalTabs = [newTab, ...globalTabs];
+        globalActiveTabId = tabId;
+      }
+      globalIsPanelOpen = true;
+      saveTabsToStorage();
+      notifyStateChange();
+    }
+
+    function closePreviewTab(tabId, e) {
+      if (e) e.stopPropagation();
+      const idx = globalTabs.findIndex(t => t.id === tabId);
+      if (idx === -1) return;
+      const nextTabs = globalTabs.filter(t => t.id !== tabId);
+      globalTabs = nextTabs;
+      if (globalActiveTabId === tabId) {
+        if (nextTabs.length > 0) {
+          const nextIdx = Math.min(idx, nextTabs.length - 1);
+          globalActiveTabId = nextTabs[nextIdx].id;
+        } else {
+          globalActiveTabId = null;
+          globalIsPanelOpen = false;
+        }
+      }
+      saveTabsToStorage();
+      notifyStateChange();
+    }
+
+    function closeAllTabs() {
+      globalTabs = [];
+      globalActiveTabId = null;
+      globalIsPanelOpen = false;
+      saveTabsToStorage();
+      notifyStateChange();
+    }
+
+    function switchActiveTab(tabId) {
+      globalActiveTabId = tabId;
+      const tab = globalTabs.find(t => t.id === tabId);
+      if (tab) tab.lastActiveAt = Date.now();
+      notifyStateChange();
+    }
+
+    function updateTabMode(tabId, mode) {
+      const tab = globalTabs.find(t => t.id === tabId);
+      if (tab) {
+        tab.viewMode = mode;
+        saveTabsToStorage();
+        notifyStateChange();
+      }
+    }
+
+    // =========================================================================
+    // Toast Notification Utility
+    // =========================================================================
+    let toastContainer = null;
+    function showToast(message, type = 'info') {
+      if (typeof document === 'undefined') return;
+      if (!toastContainer) {
+        toastContainer = document.createElement('div');
+        toastContainer.className = 'dsh-preview-toast-container';
+        document.body.appendChild(toastContainer);
+      }
+      const item = document.createElement('div');
+      item.className = `dsh-preview-toast dsh-preview-toast-${type}`;
+      const icon = type === 'success' ? '✓' : (type === 'error' ? '✕' : 'ℹ');
+      item.innerHTML = `<span class="dsh-preview-toast-icon">${icon}</span><span>${message}</span>`;
+      toastContainer.appendChild(item);
+      setTimeout(() => {
+        item.classList.add('dsh-preview-toast-show');
+      }, 10);
+      setTimeout(() => {
+        item.classList.remove('dsh-preview-toast-show');
+        setTimeout(() => item.remove(), 300);
+      }, 2500);
+    }
+
+    // =========================================================================
+    // File Fetcher via Node /api/preview/read
+    // =========================================================================
+    const fileCache = new Map();
+    async function fetchFileContent(filePath, forceRefresh = false) {
+      if (!filePath) return null;
+      const cacheKey = filePath.toLowerCase();
+      if (!forceRefresh && fileCache.has(cacheKey)) {
+        const cached = fileCache.get(cacheKey);
+        if (Date.now() - cached.timestamp < 10000) { // 10s fresh cache
+          return cached.data;
+        }
+      }
+
+      try {
+        const query = encodeURIComponent(filePath);
+        const res = await fetch(`/api/preview/read?path=${query}`);
+        if (!res.ok) {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData?.error?.message || `HTTP ${res.status}: 无法读取文件`);
+        }
+        const json = await res.json();
+        if (!json.ok || !json.file) {
+          throw new Error(json?.error?.message || '读取文件失败');
+        }
+        fileCache.set(cacheKey, { data: json.file, timestamp: Date.now() });
+        return json.file;
+      } catch (err) {
+        console.warn('[Preview] Fetch file error:', err);
+        return {
+          path: filePath,
+          displayPath: getFileName(filePath),
+          name: getFileName(filePath),
+          content: '',
+          size: 0,
+          mtime: Date.now(),
+          extension: getFileExtension(filePath),
+          lineCount: 0,
+          wordCount: 0,
+          charCount: 0,
+          error: err.message || '读取文件失败',
+        };
+      }
+    }
+
+    async function triggerOpenNative(filePath) {
+      try {
+        const res = await fetch('/api/preview/open-native', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: filePath }),
+        });
+        if (res.ok) {
+          showToast('已在系统本地应用中打开', 'success');
+        } else {
+          showToast('打开外部应用失败', 'error');
+        }
+      } catch (e) {
+        showToast('调用系统打开器失败', 'error');
+      }
+    }
+
+    async function triggerRevealInExplorer(filePath) {
+      try {
+        const res = await fetch('/api/preview/reveal', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: filePath }),
+        });
+        if (res.ok) {
+          showToast('已在文件管理器中定位', 'success');
+        } else {
+          showToast('定位文件失败', 'error');
+        }
+      } catch (e) {
+        showToast('定位文件失败', 'error');
+      }
+    }
+
+    // =========================================================================
+    // Markdown Parser & Rich HTML Renderer (Self-contained GFM + LaTeX Math)
+    // =========================================================================
+    function escapeHtml(str) {
+      if (!str) return '';
+      return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    function slugify(text) {
+      return String(text)
+        .toLowerCase()
+        .replace(/<[^>]*>/g, '')
+        .replace(/[^\w\u4e00-\u9fa5\s-]/g, '')
+        .trim()
+        .replace(/\s+/g, '-');
+    }
+
+    function extractTocHeadings(markdownText) {
+      if (!markdownText) return [];
+      const lines = markdownText.split('\n');
+      const headings = [];
+      let inCodeBlock = false;
+
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i].trim();
+        if (line.startsWith('```')) {
+          inCodeBlock = !inCodeBlock;
+          continue;
+        }
+        if (inCodeBlock) continue;
+
+        const match = line.match(/^(#{1,6})\s+(.+)$/);
+        if (match) {
+          const level = match[1].length;
+          const rawText = match[2].trim();
+          const cleanText = rawText.replace(/\*\*|__|\*|_|`|~~/g, '');
+          const id = 'heading-' + slugify(cleanText) + '-' + headings.length;
+          headings.push({ level, text: cleanText, id, raw: rawText });
+        }
+      }
+      return headings;
+    }
+
+    function highlightCodeSyntax(code, lang = '') {
+      const escaped = escapeHtml(code);
+      const l = (lang || '').toLowerCase();
+      // Basic syntax highlighter keywords
+      const keywords = /\b(const|let|var|function|return|if|else|for|while|import|export|from|default|class|extends|new|this|async|await|try|catch|finally|throw|typeof|instanceof|interface|type|public|private|protected|static|readonly|abstract|implements|enum|as|is|in|of|def|self|None|True|False|elif|lambda|pass|struct|fn|mut|impl|pub|trait|match|use|package|func|select|defer|go|val|null|undefined|true|false)\b/g;
+      const strings = /(&quot;.*?&quot;|&#39;.*?&#39;|`.*?`)/g;
+      const comments = /(\/\/.*$|\/\*[\s\S]*?\*\/|#.*$)/gm;
+      const numbers = /\b(\d+(\.\d+)?)\b/g;
+
+      let highlighted = escaped
+        .replace(comments, '<span class="dsh-token-comment">$1</span>')
+        .replace(strings, '<span class="dsh-token-string">$1</span>')
+        .replace(keywords, '<span class="dsh-token-keyword">$1</span>')
+        .replace(numbers, '<span class="dsh-token-number">$1</span>');
+
+      return highlighted;
+    }
+
+    function renderMarkdownToHtml(markdownText) {
+      if (!markdownText) return '<div class="dsh-md-empty">暂无文档内容</div>';
+
+      try {
+        const codeBlocks = [];
+        const mathBlocks = [];
+        const inlineMaths = [];
+        let text = markdownText.replace(/\r\n/g, '\n');
+
+        // 1. Extract Block Math $$ ... $$
+        text = text.replace(/\$\$([\s\S]+?)\$\$/g, (_, math) => {
+          const id = mathBlocks.length;
+          mathBlocks.push(math.trim());
+          return `@@MATH_BLOCK_${id}@@`;
+        });
+
+        // 2. Extract Inline Math $ ... $
+        text = text.replace(/(?<!\$)\$(?!\$)(.+?)(?<!\$)\$(?!\$)/g, (_, math) => {
+          const id = inlineMaths.length;
+          inlineMaths.push(math.trim());
+          return `@@MATH_INLINE_${id}@@`;
+        });
+
+        // 3. Extract Fenced Code Blocks ```lang ... ```
+        text = text.replace(/```([a-zA-Z0-9_\-\.\+]*)\n([\s\S]*?)```/g, (_, lang, code) => {
+          const id = codeBlocks.length;
+          codeBlocks.push({ lang: (lang || 'text').trim(), code: code.replace(/\n$/, '') });
+          return `@@CODE_BLOCK_${id}@@`;
+        });
+
+        // 4. Parse GitHub Alerts / Callouts (> [!NOTE] etc.)
+        text = text.replace(/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*\n((?:>.*(?:\n|$))*)/gim, (_, type, body) => {
+          const alertType = type.toUpperCase();
+          const cleanBody = body.replace(/^>\s?/gm, '').trim();
+          const titleMap = {
+            'NOTE': '备注 (Note)',
+            'TIP': '提示 (Tip)',
+            'IMPORTANT': '要点 (Important)',
+            'WARNING': '警告 (Warning)',
+            'CAUTION': '注意 (Caution)',
+          };
+          const iconMap = {
+            'NOTE': 'ℹ️',
+            'TIP': '💡',
+            'IMPORTANT': '📌',
+            'WARNING': '⚠️',
+            'CAUTION': '🚨',
+          };
+          return `<div class="dsh-alert dsh-alert-${alertType.toLowerCase()}">
+            <div class="dsh-alert-title"><span class="dsh-alert-icon">${iconMap[alertType] || 'ℹ️'}</span>${titleMap[alertType] || alertType}</div>
+            <div class="dsh-alert-body">${cleanBody}</div>
+          </div>\n\n`;
+        });
+
+        // 5. Parse Tables
+        const parseTableRow = (line) => {
+          let t = line.trim();
+          if (t.startsWith('|')) t = t.slice(1);
+          if (t.endsWith('|')) t = t.slice(0, -1);
+          return t.split('|').map(c => c.trim());
+        };
+
+        const tableRegex = /^(\|?.+\|.*)\n(\|?[\s\-:|]+\|.*)\n((?:\|?.*\|.*(?:\n|$))*)/gm;
+        text = text.replace(tableRegex, (match, headerLine, alignLine, bodyLines) => {
+          const headerCells = parseTableRow(headerLine);
+          const alignCells = parseTableRow(alignLine);
+          const aligns = alignCells.map(c => {
+            if (c.startsWith(':') && c.endsWith(':')) return 'center';
+            if (c.endsWith(':')) return 'right';
+            return 'left';
+          });
+
+          let tableHtml = '<div class="dsh-md-table-wrapper"><table><thead><tr>';
+          headerCells.forEach((hCell, i) => {
+            const align = aligns[i] || 'left';
+            tableHtml += `<th style="text-align:${align}">${formatInlineStyles(hCell)}</th>`;
+          });
+          tableHtml += '</tr></thead><tbody>';
+
+          const rows = bodyLines.trim().split('\n');
+          for (const row of rows) {
+            if (!row.trim()) continue;
+            const cells = parseTableRow(row);
+            tableHtml += '<tr>';
+            cells.forEach((cell, i) => {
+              const align = aligns[i] || 'left';
+              tableHtml += `<td style="text-align:${align}">${formatInlineStyles(cell)}</td>`;
+            });
+            tableHtml += '</tr>';
+          }
+          tableHtml += '</tbody></table></div>\n\n';
+          return tableHtml;
+        });
+
+      // 6. Split into blocks/paragraphs
+      const lines = text.split('\n');
+      let html = '';
+      let inList = false;
+      let listType = 'ul';
+      let inBlockquote = false;
+      let headingCount = 0;
+
+      for (let i = 0; i < lines.length; i++) {
+        let line = lines[i];
+
+        // Horizontal rule
+        if (/^(\-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
+          if (inList) { html += `</${listType}>`; inList = false; }
+          if (inBlockquote) { html += `</blockquote>`; inBlockquote = false; }
+          html += '<hr class="dsh-md-hr" />';
+          continue;
+        }
+
+        // Headings
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+          if (inList) { html += `</${listType}>`; inList = false; }
+          if (inBlockquote) { html += `</blockquote>`; inBlockquote = false; }
+          const level = headingMatch[1].length;
+          const headingText = headingMatch[2].trim();
+          const cleanText = headingText.replace(/\*\*|__|\*|_|`|~~/g, '');
+          const id = 'heading-' + slugify(cleanText) + '-' + (headingCount++);
+          html += `<h${level} id="${id}" class="dsh-md-h dsh-md-h${level}">
+            <a href="#${id}" class="dsh-md-anchor" aria-hidden="true">#</a>
+            ${formatInlineStyles(headingText)}
+          </h${level}>`;
+          continue;
+        }
+
+        // Blockquotes (regular)
+        if (line.startsWith('> ') || line === '>') {
+          if (inList) { html += `</${listType}>`; inList = false; }
+          if (!inBlockquote) {
+            html += '<blockquote class="dsh-md-blockquote">';
+            inBlockquote = true;
+          }
+          const quoteContent = line.replace(/^>\s?/, '');
+          html += `<p>${formatInlineStyles(quoteContent)}</p>`;
+          continue;
+        } else if (inBlockquote) {
+          html += '</blockquote>';
+          inBlockquote = false;
+        }
+
+        // Task list & Lists
+        const taskMatch = line.match(/^(\s*)[-*+]\s+\[([ xX])\]\s+(.+)$/);
+        const ulMatch = line.match(/^(\s*)[-*+]\s+(.+)$/);
+        const olMatch = line.match(/^(\s*)(\d+)\.\s+(.+)$/);
+
+        if (taskMatch) {
+          if (!inList) { html += '<ul class="dsh-md-list dsh-md-task-list">'; inList = true; listType = 'ul'; }
+          const checked = taskMatch[2].toLowerCase() === 'x';
+          const taskContent = taskMatch[3];
+          html += `<li class="dsh-md-task-item"><input type="checkbox" ${checked ? 'checked' : ''} disabled /><span>${formatInlineStyles(taskContent)}</span></li>`;
+          continue;
+        } else if (ulMatch) {
+          if (!inList || listType !== 'ul') {
+            if (inList) html += `</${listType}>`;
+            html += '<ul class="dsh-md-list">';
+            inList = true;
+            listType = 'ul';
+          }
+          html += `<li>${formatInlineStyles(ulMatch[2])}</li>`;
+          continue;
+        } else if (olMatch) {
+          if (!inList || listType !== 'ol') {
+            if (inList) html += `</${listType}>`;
+            html += '<ol class="dsh-md-list dsh-md-ol">';
+            inList = true;
+            listType = 'ol';
+          }
+          html += `<li>${formatInlineStyles(olMatch[3])}</li>`;
+          continue;
+        } else if (inList && line.trim() === '') {
+          html += `</${listType}>`;
+          inList = false;
+        }
+
+        // Empty lines
+        if (line.trim() === '') {
+          continue;
+        }
+
+        // If line is pre-rendered HTML (like tables, alert boxes, code block markers)
+        if (line.startsWith('@@CODE_BLOCK_') || line.startsWith('@@MATH_BLOCK_') || line.startsWith('<div class="dsh-')) {
+          html += line + '\n';
+          continue;
+        }
+
+        // Normal paragraph
+        html += `<p class="dsh-md-p">${formatInlineStyles(line)}</p>`;
+      }
+
+      if (inList) html += `</${listType}>`;
+      if (inBlockquote) html += `</blockquote>`;
+
+      // 7. Restore Code Blocks with Syntax Highlighter & Copy Button
+      html = html.replace(/@@CODE_BLOCK_(\d+)@@/g, (_, id) => {
+        const item = codeBlocks[parseInt(id, 10)];
+        if (!item) return '';
+        const langUpper = (item.lang || 'CODE').toUpperCase();
+        const codeEscaped = escapeHtml(item.code);
+        const codeHighlighted = highlightCodeSyntax(item.code, item.lang);
+        const copyData = encodeURIComponent(item.code);
+
+        return `<div class="dsh-code-card">
+          <div class="dsh-code-card-header">
+            <span class="dsh-code-lang-badge">${escapeHtml(langUpper)}</span>
+            <button type="button" class="dsh-code-copy-btn" data-code="${copyData}" onclick="window.__dsh_copy_code(this)">
+              <span class="dsh-copy-icon">📋</span> 复制
+            </button>
+          </div>
+          <pre class="dsh-code-pre"><code class="language-${escapeHtml(item.lang)}">${codeHighlighted}</code></pre>
+        </div>`;
+      });
+
+      // 8. Restore Math Blocks
+      html = html.replace(/@@MATH_BLOCK_(\d+)@@/g, (_, id) => {
+        const math = mathBlocks[parseInt(id, 10)] || '';
+        return `<div class="dsh-math-block">
+          <div class="dsh-math-content">$$\n${escapeHtml(math)}\n$$</div>
+        </div>`;
+      });
+
+      // 9. Restore Inline Maths
+      html = html.replace(/@@MATH_INLINE_(\d+)@@/g, (_, id) => {
+        const math = inlineMaths[parseInt(id, 10)] || '';
+        return `<span class="dsh-math-inline">$${escapeHtml(math)}$</span>`;
+      });
+
+        return html;
+      } catch (err) {
+        console.error('[Preview] Failed to parse Markdown:', err);
+        return `<pre class="dsh-code-pre">${escapeHtml(markdownText)}</pre>`;
+      }
+    }
+
+    function formatInlineStyles(text) {
+      if (!text) return '';
+      let s = escapeHtml(text);
+
+      // Inline code
+      s = s.replace(/`([^`]+)`/g, '<code class="dsh-md-inline-code">$1</code>');
+
+      // Bold & Italic
+      s = s.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong><em>$1</em></strong>');
+      s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+      s = s.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+      s = s.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+      s = s.replace(/_([^_]+)_/g, '<em>$1</em>');
+
+      // Strikethrough
+      s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+
+      // Images ![alt](url)
+      s = s.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
+        return `<span class="dsh-md-img-container"><img src="${src}" alt="${alt}" class="dsh-md-img" loading="lazy" /></span>`;
+      });
+
+      // Links [title](url)
+      s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="dsh-md-link">$1 ↗</a>');
+
+      return s;
+    }
+
+    // Global copy code callback for inline onclick handlers
+    if (typeof window !== 'undefined') {
+      window.__dsh_copy_code = function(btn) {
+        try {
+          const raw = btn.getAttribute('data-code');
+          if (raw) {
+            const code = decodeURIComponent(raw);
+            navigator.clipboard.writeText(code).then(() => {
+              const origHtml = btn.innerHTML;
+              btn.innerHTML = '<span style="color:#22c55e">✓ 已复制</span>';
+              setTimeout(() => { btn.innerHTML = origHtml; }, 1800);
+            });
+          }
+        } catch (e) {
+          console.error('Copy code failed:', e);
+        }
+      };
+    }
+
+    // =========================================================================
+    // React Components: MarkdownPreviewView
+    // =========================================================================
+    function MarkdownPreviewView({ tab, fileInfo, isLoading, error, onRefresh, onOpenNative, onReveal }) {
+      const [viewMode, setViewMode] = useState(tab.viewMode || 'preview');
+      const [isTocOpen, setIsTocOpen] = useState(false);
+      const [searchQuery, setSearchQuery] = useState('');
+      const [isSearchOpen, setIsSearchOpen] = useState(false);
+      const contentRef = useRef(null);
+      const sourceRef = useRef(null);
+
+      const content = fileInfo?.content || '';
+      const tocHeadings = useMemo(() => extractTocHeadings(content), [content]);
+
+      const renderedHtml = useMemo(() => {
+        if (!content) return '';
+        let html = renderMarkdownToHtml(content);
+        if (searchQuery.trim()) {
+          try {
+            const q = escapeHtml(searchQuery.trim());
+            const regex = new RegExp(`(${q})`, 'gi');
+            html = html.replace(regex, '<mark class="dsh-search-highlight">$1</mark>');
+          } catch (e) {}
+        }
+        return html;
+      }, [content, searchQuery]);
+
+      const handleCopyAll = () => {
+        if (!content) return;
+        navigator.clipboard.writeText(content).then(() => {
+          showToast('已复制文档全文到剪贴板', 'success');
+        }).catch(() => {
+          showToast('复制失败', 'error');
+        });
+      };
+
+      const handleTocClick = (headingId) => {
+        if (!contentRef.current) return;
+        const el = contentRef.current.querySelector(`#${headingId}`);
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      };
+
+      const handleModeChange = (mode) => {
+        setViewMode(mode);
+        updateTabMode(tab.id, mode);
+      };
+
+      return h('div', { className: 'dsh-preview-content-container' },
+        // Toolbar
+        h('div', { className: 'dsh-preview-toolbar' },
+          // Left: View mode toggles
+          h('div', { className: 'dsh-preview-toolbar-left' },
+            h('div', { className: 'dsh-preview-mode-group' },
+              h('button', {
+                type: 'button',
+                className: `dsh-preview-mode-btn ${viewMode === 'preview' ? 'active' : ''}`,
+                onClick: () => handleModeChange('preview'),
+                title: '渲染预览模式 (Markdown Render)',
+              }, '📖 预览'),
+              h('button', {
+                type: 'button',
+                className: `dsh-preview-mode-btn ${viewMode === 'source' ? 'active' : ''}`,
+                onClick: () => handleModeChange('source'),
+                title: '源码模式 (Raw Source)',
+              }, '📝 源码'),
+              h('button', {
+                type: 'button',
+                className: `dsh-preview-mode-btn ${viewMode === 'split' ? 'active' : ''}`,
+                onClick: () => handleModeChange('split'),
+                title: '分栏对比模式 (Split View)',
+              }, '🌓 分栏')
+            ),
+
+            tocHeadings.length > 0 ? h('button', {
+              type: 'button',
+              className: `dsh-preview-tool-btn ${isTocOpen ? 'active' : ''}`,
+              onClick: () => setIsTocOpen(!isTocOpen),
+              title: isTocOpen ? '隐藏目录大纲' : '显示目录大纲 (TOC)',
+            }, `📑 大纲 (${tocHeadings.length})`) : null,
+
+            h('button', {
+              type: 'button',
+              className: `dsh-preview-tool-btn ${isSearchOpen ? 'active' : ''}`,
+              onClick: () => setIsSearchOpen(!isSearchOpen),
+              title: '在文档中查找',
+            }, '🔍 查找')
+          ),
+
+          // Right: Action buttons
+          h('div', { className: 'dsh-preview-toolbar-right' },
+            h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: handleCopyAll,
+              title: '一键复制全文',
+            }, '📋 复制'),
+
+            h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: onRefresh,
+              title: '从磁盘重新加载最新内容',
+            }, '🔄 刷新'),
+
+            h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn dsh-preview-tool-btn-accent',
+              onClick: () => onOpenNative(tab.filePath),
+              title: '在系统本地默认编辑器中打开 (记事本/VSCode)',
+            }, '🖥️ 本地打开'),
+
+            h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: () => onReveal(tab.filePath),
+              title: '在文件管理器中定位',
+            }, '📁 定位')
+          )
+        ),
+
+        // Search Bar (if open)
+        isSearchOpen ? h('div', { className: 'dsh-preview-search-bar' },
+          h('span', { className: 'dsh-search-icon' }, '🔍'),
+          h('input', {
+            type: 'text',
+            placeholder: '输入关键词在文档中搜索...',
+            value: searchQuery,
+            onChange: e => setSearchQuery(e.target.value),
+            className: 'dsh-preview-search-input',
+            autoFocus: true,
+          }),
+          searchQuery ? h('button', {
+            type: 'button',
+            className: 'dsh-search-clear-btn',
+            onClick: () => setSearchQuery(''),
+          }, '✕') : null
+        ) : null,
+
+        // Body area with optional TOC sidebar + Main content
+        h('div', { className: 'dsh-preview-body-layout' },
+          // TOC Sidebar
+          isTocOpen && tocHeadings.length > 0 ? h('div', { className: 'dsh-preview-toc-sidebar' },
+            h('div', { className: 'dsh-preview-toc-header' },
+              h('span', { style: { fontWeight: 600, fontSize: 12 } }, '目录大纲 (TOC)'),
+              h('button', {
+                type: 'button',
+                className: 'dsh-toc-close-btn',
+                onClick: () => setIsTocOpen(false),
+              }, '✕')
+            ),
+            h('div', { className: 'dsh-preview-toc-list' },
+              tocHeadings.map((hItem, idx) =>
+                h('div', {
+                  key: idx,
+                  className: `dsh-toc-item dsh-toc-level-${hItem.level}`,
+                  onClick: () => handleTocClick(hItem.id),
+                  title: hItem.text,
+                },
+                  h('span', { className: 'dsh-toc-bullet' }, '•'),
+                  h('span', { className: 'dsh-toc-text' }, hItem.text)
+                )
+              )
+            )
+          ) : null,
+
+          // Main Viewer
+          h('div', { className: 'dsh-preview-main-scroll' },
+            isLoading ? h('div', { className: 'dsh-preview-loading' },
+              h('div', { className: 'dsh-preview-spinner' }),
+              h('span', null, '正在加载文档内容...')
+            ) : (error || fileInfo?.error) ? h('div', { className: 'dsh-preview-error-card' },
+              h('div', { className: 'dsh-error-icon' }, '⚠️'),
+              h('div', { className: 'dsh-error-title' }, '读取文档失败'),
+              h('div', { className: 'dsh-error-desc' }, error || fileInfo?.error),
+              h('div', { className: 'dsh-error-actions' },
+                h('button', { type: 'button', className: 'dsh-btn-retry', onClick: onRefresh }, '重试'),
+                h('button', { type: 'button', className: 'dsh-btn-native', onClick: () => onOpenNative(tab.filePath) }, '在外部打开')
+              )
+            ) : viewMode === 'preview' ? (
+              // 1. Preview Mode
+              h('div', {
+                ref: contentRef,
+                className: 'dsh-markdown-body',
+                dangerouslySetInnerHTML: { __html: renderedHtml },
+              })
+            ) : viewMode === 'source' ? (
+              // 2. Source Code Mode
+              h('div', { className: 'dsh-source-view' },
+                h('div', { className: 'dsh-source-line-numbers' },
+                  (content.split('\n') || []).map((_, i) => h('div', { key: i }, i + 1))
+                ),
+                h('pre', { ref: sourceRef, className: 'dsh-source-pre' },
+                  h('code', null, content)
+                )
+              )
+            ) : (
+              // 3. Split Mode
+              h('div', { className: 'dsh-split-view' },
+                h('div', { className: 'dsh-split-pane dsh-split-source' },
+                  h('div', { className: 'dsh-split-pane-header' }, '📝 原始源码'),
+                  h('div', { className: 'dsh-source-view' },
+                    h('div', { className: 'dsh-source-line-numbers' },
+                      (content.split('\n') || []).map((_, i) => h('div', { key: i }, i + 1))
+                    ),
+                    h('pre', { className: 'dsh-source-pre' },
+                      h('code', null, content)
+                    )
+                  )
+                ),
+                h('div', { className: 'dsh-split-pane dsh-split-render' },
+                  h('div', { className: 'dsh-split-pane-header' }, '📖 渲染预览'),
+                  h('div', {
+                    ref: contentRef,
+                    className: 'dsh-markdown-body',
+                    dangerouslySetInnerHTML: { __html: renderedHtml },
+                  })
+                )
+              )
+            )
+          )
+        ),
+
+        // Status Footer
+        h('div', { className: 'dsh-preview-footer' },
+          h('div', { className: 'dsh-footer-left', title: fileInfo?.path || tab.filePath },
+            h('span', { className: 'dsh-footer-ext' }, (fileInfo?.extension || tab.extension || '.md').toUpperCase().replace('.', '')),
+            h('span', { className: 'dsh-footer-path' }, fileInfo?.path || tab.filePath)
+          ),
+          h('div', { className: 'dsh-footer-right' },
+            fileInfo?.size ? h('span', { className: 'dsh-footer-stat' }, `${(fileInfo.size / 1024).toFixed(1)} KB`) : null,
+            fileInfo?.lineCount ? h('span', { className: 'dsh-footer-stat' }, `${fileInfo.lineCount} 行`) : null,
+            fileInfo?.wordCount ? h('span', { className: 'dsh-footer-stat' }, `约 ${fileInfo.wordCount} 字`) : null
+          )
+        )
+      );
+    }
+
+    // =========================================================================
+    // React Components: Right Side Drawer / Shell Overlay Container
+    // =========================================================================
+    function PreviewDrawerRoot() {
+      const [tabs, setTabs] = useState(globalTabs);
+      const [activeTabId, setActiveTabId] = useState(globalActiveTabId);
+      const [isOpen, setIsOpen] = useState(globalIsPanelOpen);
+      const [width, setWidth] = useState(globalPanelWidth);
+      const [fileData, setFileData] = useState({});
+      const [loadingMap, setLoadingMap] = useState({});
+      const [errorMap, setErrorMap] = useState({});
+      const [isDragging, setIsDragging] = useState(false);
+      const dragStartX = useRef(0);
+      const dragStartWidth = useRef(0);
+
+      // Subscribe to global store changes
+      useEffect(() => {
+        const update = () => {
+          setTabs([...globalTabs]);
+          setActiveTabId(globalActiveTabId);
+          setIsOpen(globalIsPanelOpen);
+          setWidth(globalPanelWidth);
+        };
+        stateListeners.add(update);
+        return () => stateListeners.delete(update);
+      }, []);
+
+      const activeTab = useMemo(() => {
+        return tabs.find(t => t.id === activeTabId) || tabs[0] || null;
+      }, [tabs, activeTabId]);
+
+      // Load file content when active tab changes
+      const loadTabFile = useCallback(async (tab, force = false) => {
+        if (!tab || !tab.filePath) return;
+        const key = tab.filePath.toLowerCase();
+        setLoadingMap(m => ({ ...m, [key]: true }));
+        setErrorMap(m => ({ ...m, [key]: null }));
+        try {
+          const fileInfo = await fetchFileContent(tab.filePath, force);
+          if (fileInfo?.error) {
+            setErrorMap(m => ({ ...m, [key]: fileInfo.error }));
+          } else {
+            setFileData(d => ({ ...d, [key]: fileInfo }));
+          }
+        } catch (e) {
+          setErrorMap(m => ({ ...m, [key]: e.message }));
+        } finally {
+          setLoadingMap(m => ({ ...m, [key]: false }));
+        }
+      }, []);
+
+      useEffect(() => {
+        if (activeTab) {
+          loadTabFile(activeTab);
+        }
+      }, [activeTab, loadTabFile]);
+
+      // Drag Resize Handlers
+      const onResizePointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        dragStartX.current = e.clientX;
+        dragStartWidth.current = globalPanelWidth;
+        setIsDragging(true);
+      }, []);
+
+      const onResizePointerMove = useCallback((e) => {
+        if (!isDragging) return;
+        const dx = dragStartX.current - e.clientX; // drag left increases width
+        const newWidth = dragStartWidth.current + dx;
+        setPanelWidth(newWidth);
+      }, [isDragging]);
+
+      const onResizePointerUp = useCallback((e) => {
+        if (isDragging) {
+          setIsDragging(false);
+          try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) {}
+        }
+      }, [isDragging]);
+
+      // Hotkey: Esc closes preview
+      useEffect(() => {
+        const onKeyDown = (e) => {
+          if (e.key === 'Escape' && globalIsPanelOpen) {
+            setPanelOpen(false);
+          }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+      }, []);
+
+      if (!isOpen && tabs.length === 0) return null;
+
+      const activeKey = activeTab?.filePath?.toLowerCase();
+      const currentFileInfo = activeKey ? fileData[activeKey] : null;
+      const currentLoading = activeKey ? !!loadingMap[activeKey] : false;
+      const currentError = activeKey ? errorMap[activeKey] : null;
+
+      return h(Fragment, null,
+        // Floating Mini Button to Reopen (when closed but tabs exist)
+        !isOpen && tabs.length > 0 ? h('div', {
+          className: 'dsh-preview-float-pill',
+          onClick: () => setPanelOpen(true),
+          title: `重新展开文档预览 (${tabs.length} 个标签)`,
+        },
+          h('span', { className: 'dsh-float-pill-icon' }, '📝'),
+          h('span', { className: 'dsh-float-pill-text' }, `预览: ${activeTab?.title || '文档'}`),
+          h('span', { className: 'dsh-float-pill-badge' }, tabs.length)
+        ) : null,
+
+        // Right-Side Slide Drawer
+        isOpen ? h('div', {
+          className: `dsh-preview-drawer-container ${isDragging ? 'dragging' : ''}`,
+          style: { width: `${width}px` },
+        },
+          // Drag Handle on Left Border
+          h('div', {
+            className: 'dsh-preview-drag-handle',
+            onPointerDown: onResizePointerDown,
+            onPointerMove: onResizePointerMove,
+            onPointerUp: onResizePointerUp,
+            title: '左右拖拽调整预览面板宽度',
+          }),
+
+          // Drawer Header with FileTabs
+          h('div', { className: 'dsh-preview-drawer-header' },
+            // Tabs Bar
+            h('div', { className: 'dsh-preview-tabs-row' },
+              tabs.map(tab => {
+                const isActive = tab.id === activeTabId;
+                const ext = (tab.extension || '').toLowerCase();
+                const icon = ext === '.json' ? '{ }' : (ext === '.ts' || ext === '.js' ? 'TS' : '📝');
+                return h('div', {
+                  key: tab.id,
+                  className: `dsh-preview-tab-item ${isActive ? 'active' : ''}`,
+                  onClick: () => switchActiveTab(tab.id),
+                  title: `${tab.title}\n${tab.filePath}`,
+                },
+                  h('span', { className: 'dsh-tab-icon' }, icon),
+                  h('span', { className: 'dsh-tab-title' }, tab.title),
+                  h('button', {
+                    type: 'button',
+                    className: 'dsh-tab-close-btn',
+                    onClick: (e) => closePreviewTab(tab.id, e),
+                    title: '关闭此标签',
+                  }, '✕')
+                );
+              })
+            ),
+
+            // Header Right Window Controls
+            h('div', { className: 'dsh-preview-window-controls' },
+              tabs.length > 1 ? h('button', {
+                type: 'button',
+                className: 'dsh-win-ctrl-btn',
+                onClick: closeAllTabs,
+                title: '关闭所有标签页',
+              }, '✕ 全部') : null,
+              h('button', {
+                type: 'button',
+                className: 'dsh-win-ctrl-btn dsh-win-ctrl-close',
+                onClick: () => setPanelOpen(false),
+                title: '收起预览面板 (Esc)',
+              }, '✕')
+            )
+          ),
+
+          // Drawer Body
+          activeTab ? h(MarkdownPreviewView, {
+            tab: activeTab,
+            fileInfo: currentFileInfo,
+            isLoading: currentLoading,
+            error: currentError,
+            onRefresh: () => loadTabFile(activeTab, true),
+            onOpenNative: triggerOpenNative,
+            onReveal: triggerRevealInExplorer,
+          }) : h('div', { className: 'dsh-preview-empty-state' }, '暂无打开的文件')
+        ) : null
+      );
+    }
+
+    // =========================================================================
+    // Global Link Click Listener & Workspace Interceptor
+    // =========================================================================
+    function setupFileInterceptors(ctx) {
+      // 1. Intercept ctx.workspaces.openPath
+      if (ctx && ctx.workspaces && typeof ctx.workspaces.openPath === 'function') {
+        const originalOpenPath = ctx.workspaces.openPath.bind(ctx.workspaces);
+        ctx.workspaces.openPath = async function(targetPath) {
+          if (isPreviewableFile(targetPath)) {
+            console.log('[Preview] Intercepted workspaces.openPath ->', targetPath);
+            openPreviewFile(targetPath);
+            return Promise.resolve();
+          }
+          return originalOpenPath(targetPath);
+        };
+        console.log('[Preview] Successfully hooked ctx.workspaces.openPath');
+      }
+
+      // 2. Intercept DOM Clicks globally
+      if (typeof document !== 'undefined') {
+        document.addEventListener('click', (e) => {
+          const target = e.target;
+          if (!target || !target.closest) return;
+
+          // A. Click on ProducedFiles chip button or ToolRow summary button
+          const button = target.closest('button');
+          if (button) {
+            const title = button.getAttribute('title') || '';
+            const ariaLabel = button.getAttribute('aria-label') || '';
+            const text = (button.textContent || '').trim();
+
+            const candidate = title || ariaLabel || text;
+            if (isPreviewableFile(candidate)) {
+              const fullPath = resolveAbsoluteFilePath(candidate);
+              if (fullPath) {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('[Preview] Intercepted button click ->', fullPath);
+                openPreviewFile(fullPath);
+                return;
+              }
+            }
+          }
+
+          // B. Click on <a> link pointing to .md or file://
+          const anchor = target.closest('a');
+          if (anchor) {
+            const href = anchor.getAttribute('href') || '';
+            if (href.startsWith('#') && !href.startsWith('#heading-')) return;
+            if (href.startsWith('file://') || isPreviewableFile(href)) {
+              e.preventDefault();
+              e.stopPropagation();
+              const fullPath = resolveAbsoluteFilePath(href);
+              console.log('[Preview] Intercepted link click ->', fullPath);
+              openPreviewFile(fullPath);
+            }
+          }
+        }, true); // Use capture phase to intercept early!
+      }
+    }
+
+    // =========================================================================
+    // Inject Custom Stylesheet
+    // =========================================================================
+    function injectStyles() {
+      if (typeof document === 'undefined') return;
+      if (document.getElementById('dsh-plugin-preview-styles')) return;
+
+      const style = document.createElement('style');
+      style.id = 'dsh-plugin-preview-styles';
+      style.textContent = `
+        /* =====================================================================
+           DeepSeek Harness Preview Plugin Styles (WorkBuddy FileTabs Inspired)
+           ===================================================================== */
+        
+        /* Floating Pill Button */
+        .dsh-preview-float-pill {
+          position: fixed;
+          bottom: 84px;
+          right: 20px;
+          z-index: 9990;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 8px 14px;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          color: var(--dsw-alias-label-primary, #0f172a);
+          border: 1px solid var(--dsw-alias-border-l3, #cbd5e1);
+          border-radius: 20px;
+          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+          cursor: pointer;
+          font-size: 13px;
+          font-weight: 500;
+          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+          user-select: none;
+        }
+        body[data-ds-dark-theme] .dsh-preview-float-pill {
+          background: var(--dsw-alias-bg-layer-2, #1e222d);
+          color: var(--dsw-alias-label-primary, #e2e8f0);
+          border-color: var(--dsw-alias-border-l3, #334155);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+        }
+        .dsh-preview-float-pill:hover {
+          transform: translateY(-2px);
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+          box-shadow: 0 10px 24px rgba(65, 118, 230, 0.25);
+        }
+        .dsh-float-pill-badge {
+          background: var(--dsw-static-deepseek-500, #4176e6);
+          color: #fff;
+          font-size: 11px;
+          padding: 1px 6px;
+          border-radius: 10px;
+          font-weight: 600;
+        }
+
+        /* Right-Side Drawer Container */
+        .dsh-preview-drawer-container {
+          position: fixed;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          height: 100vh;
+          z-index: 9995;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-primary, #0f172a);
+          border-left: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          box-shadow: -8px 0 32px rgba(0, 0, 0, 0.14);
+          display: flex;
+          flex-direction: column;
+          box-sizing: border-box;
+          overflow: hidden;
+          animation: dshPreviewSlideIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        body[data-ds-dark-theme] .dsh-preview-drawer-container {
+          background: var(--dsw-alias-bg-layer-1, #161922);
+          color: var(--dsw-alias-label-primary, #e2e8f0);
+          border-left-color: var(--dsw-alias-border-l3, #2d3748);
+          box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
+        }
+        .dsh-preview-drawer-container.dragging {
+          user-select: none;
+          transition: none;
+        }
+        @keyframes dshPreviewSlideIn {
+          from { transform: translateX(100%); }
+          to { transform: translateX(0); }
+        }
+
+        /* Left Resize Handle */
+        .dsh-preview-drag-handle {
+          position: absolute;
+          top: 0;
+          left: -4px;
+          bottom: 0;
+          width: 8px;
+          cursor: col-resize;
+          z-index: 100;
+          transition: background 0.15s;
+        }
+        .dsh-preview-drag-handle:hover,
+        .dsh-preview-drawer-container.dragging .dsh-preview-drag-handle {
+          background: var(--dsw-static-deepseek-500, #4176e6);
+        }
+
+        /* Header & FileTabs */
+        .dsh-preview-drawer-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 38px;
+          min-height: 38px;
+          flex-shrink: 0;
+          background: var(--dsw-alias-bg-layer-2, #f1f5f9);
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          padding: 0 8px;
+          overflow: hidden;
+          box-sizing: border-box;
+        }
+        body[data-ds-dark-theme] .dsh-preview-drawer-header {
+          background: var(--dsw-alias-bg-layer-2, #12151d);
+          border-bottom-color: var(--dsw-alias-border-l2, #2d3748);
+        }
+        .dsh-preview-tabs-row {
+          display: flex;
+          align-items: flex-end;
+          gap: 4px;
+          overflow-x: auto;
+          scrollbar-width: none;
+          flex: 1;
+          height: 100%;
+          padding-top: 4px;
+        }
+        .dsh-preview-tabs-row::-webkit-scrollbar { display: none; }
+
+        .dsh-preview-tab-item {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 0 10px;
+          height: 30px;
+          border-radius: 6px 6px 0 0;
+          font-size: 12px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          background: transparent;
+          cursor: pointer;
+          user-select: none;
+          white-space: nowrap;
+          max-width: 180px;
+          transition: all 0.15s;
+          border: 1px solid transparent;
+          border-bottom: none;
+        }
+        .dsh-preview-tab-item:hover {
+          background: rgba(0, 0, 0, 0.04);
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-preview-tab-item:hover {
+          background: rgba(255, 255, 255, 0.05);
+          color: var(--dsw-alias-label-primary, #f1f5f9);
+        }
+        .dsh-preview-tab-item.active {
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-static-deepseek-500, #4176e6);
+          font-weight: 600;
+          border-color: var(--dsw-alias-border-l2, #e2e8f0);
+          border-bottom: 2px solid var(--dsw-static-deepseek-500, #4176e6);
+          box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.03);
+        }
+        body[data-ds-dark-theme] .dsh-preview-tab-item.active {
+          background: var(--dsw-alias-bg-layer-1, #161922);
+          border-color: var(--dsw-alias-border-l2, #2d3748);
+          border-bottom: 2px solid var(--dsw-static-deepseek-500, #4176e6);
+          box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
+        }
+        .dsh-tab-icon {
+          font-size: 12px;
+        }
+        .dsh-tab-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .dsh-tab-close-btn {
+          background: none;
+          border: none;
+          color: var(--dsw-alias-label-tertiary, #94a3b8);
+          font-size: 11px;
+          cursor: pointer;
+          padding: 2px 4px;
+          border-radius: 4px;
+          line-height: 1;
+        }
+        .dsh-tab-close-btn:hover {
+          background: rgba(239, 68, 68, 0.15);
+          color: #ef4444;
+        }
+
+        .dsh-preview-window-controls {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding-left: 8px;
+          height: 100%;
+        }
+        .dsh-win-ctrl-btn {
+          background: transparent;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          color: var(--dsw-alias-label-secondary, #64748b);
+          font-size: 11px;
+          padding: 3px 8px;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.15s;
+        }
+        .dsh-win-ctrl-btn:hover {
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-win-ctrl-btn {
+          border-color: var(--dsw-alias-border-l2, #334155);
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+        body[data-ds-dark-theme] .dsh-win-ctrl-btn:hover {
+          background: var(--dsw-alias-bg-layer-3, #283042);
+          color: var(--dsw-alias-label-primary, #f1f5f9);
+        }
+        .dsh-win-ctrl-close:hover {
+          background: #ef4444 !important;
+          border-color: #ef4444 !important;
+          color: #fff !important;
+        }
+
+        /* Content Container */
+        .dsh-preview-content-container {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          min-height: 0;
+          overflow: hidden;
+          box-sizing: border-box;
+        }
+
+        /* Toolbar */
+        .dsh-preview-toolbar {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 12px;
+          height: 38px;
+          min-height: 38px;
+          flex-shrink: 0;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          gap: 10px;
+          box-sizing: border-box;
+        }
+        body[data-ds-dark-theme] .dsh-preview-toolbar {
+          background: var(--dsw-alias-bg-layer-2, #161a24);
+          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+        .dsh-preview-toolbar-left,
+        .dsh-preview-toolbar-right {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          flex-shrink: 0;
+          white-space: nowrap;
+        }
+
+        .dsh-preview-mode-group {
+          display: flex;
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          padding: 2px;
+          border-radius: 6px;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-preview-mode-group {
+          background: var(--dsw-alias-bg-layer-3, #0d1017);
+          border-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+        .dsh-preview-mode-btn {
+          background: transparent;
+          border: none;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          font-size: 11px;
+          padding: 4px 9px;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.15s;
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-preview-mode-btn {
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+        .dsh-preview-mode-btn.active {
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-primary, #0f172a);
+          font-weight: 600;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        body[data-ds-dark-theme] .dsh-preview-mode-btn.active {
+          background: var(--dsw-alias-bg-layer-2, #1e2433);
+          color: var(--dsw-alias-label-primary, #f8fafc);
+          box-shadow: 0 1px 4px rgba(0,0,0,0.25);
+        }
+        .dsh-preview-tool-btn {
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          color: var(--dsw-alias-label-primary, #334155);
+          font-size: 11px;
+          padding: 4px 9px;
+          border-radius: 5px;
+          cursor: pointer;
+          transition: all 0.15s;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-preview-tool-btn {
+          background: var(--dsw-alias-bg-layer-2, #1e2433);
+          border-color: var(--dsw-alias-border-l2, #2d3748);
+          color: var(--dsw-alias-label-secondary, #cbd5e1);
+        }
+        .dsh-preview-tool-btn:hover {
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          color: var(--dsw-static-deepseek-500, #4176e6);
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+        }
+        body[data-ds-dark-theme] .dsh-preview-tool-btn:hover {
+          background: var(--dsw-alias-bg-layer-3, #293347);
+          color: #fff;
+        }
+        .dsh-preview-tool-btn.active {
+          background: rgba(65, 118, 230, 0.12);
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+          color: var(--dsw-static-deepseek-500, #4176e6);
+          font-weight: 600;
+        }
+        .dsh-preview-tool-btn-accent {
+          background: rgba(65, 118, 230, 0.1);
+          border-color: rgba(65, 118, 230, 0.35);
+          color: var(--dsw-static-deepseek-500, #2563eb);
+          font-weight: 500;
+        }
+        body[data-ds-dark-theme] .dsh-preview-tool-btn-accent {
+          background: rgba(65, 118, 230, 0.15);
+          border-color: rgba(65, 118, 230, 0.4);
+          color: #60a5fa;
+        }
+        .dsh-preview-tool-btn-accent:hover {
+          background: var(--dsw-static-deepseek-500, #4176e6) !important;
+          color: #fff !important;
+        }
+
+        /* Search Bar */
+        .dsh-preview-search-bar {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 6px 12px;
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+        }
+        body[data-ds-dark-theme] .dsh-preview-search-bar {
+          background: var(--dsw-alias-bg-layer-3, #0d1017);
+          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+        .dsh-preview-search-input {
+          flex: 1;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          border: 1px solid var(--dsw-alias-border-l3, #cbd5e1);
+          color: var(--dsw-alias-label-primary, #0f172a);
+          font-size: 12px;
+          padding: 4px 10px;
+          border-radius: 4px;
+          outline: none;
+        }
+        body[data-ds-dark-theme] .dsh-preview-search-input {
+          background: var(--dsw-alias-bg-layer-2, #1a1f2c);
+          border-color: var(--dsw-alias-border-l3, #334155);
+          color: #f1f5f9;
+        }
+        .dsh-preview-search-input:focus {
+          border-color: var(--dsw-static-deepseek-500, #4176e6);
+        }
+        .dsh-search-clear-btn {
+          background: none;
+          border: none;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          cursor: pointer;
+        }
+        mark.dsh-search-highlight {
+          background: #fde047;
+          color: #000;
+          padding: 1px 3px;
+          border-radius: 2px;
+        }
+
+        /* Body Layout & TOC */
+        .dsh-preview-body-layout {
+          display: flex;
+          flex: 1;
+          overflow: hidden;
+          position: relative;
+        }
+        .dsh-preview-toc-sidebar {
+          width: 220px;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-right: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          display: flex;
+          flex-direction: column;
+          flex-shrink: 0;
+          animation: dshTocSlide 0.2s ease;
+        }
+        body[data-ds-dark-theme] .dsh-preview-toc-sidebar {
+          background: var(--dsw-alias-bg-layer-2, #161922);
+          border-right-color: var(--dsw-alias-border-l2, #262c3b);
+        }
+        @keyframes dshTocSlide {
+          from { width: 0; opacity: 0; }
+          to { width: 220px; opacity: 1; }
+        }
+        .dsh-preview-toc-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 10px 12px;
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          color: var(--dsw-alias-label-secondary, #64748b);
+        }
+        body[data-ds-dark-theme] .dsh-preview-toc-header {
+          border-bottom-color: var(--dsw-alias-border-l2, #262c3b);
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+        .dsh-toc-close-btn {
+          background: none;
+          border: none;
+          color: #94a3b8;
+          cursor: pointer;
+        }
+        .dsh-preview-toc-list {
+          flex: 1;
+          overflow-y: auto;
+          padding: 8px 4px;
+        }
+        .dsh-toc-item {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 5px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          cursor: pointer;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        body[data-ds-dark-theme] .dsh-toc-item {
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+        .dsh-toc-item:hover {
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          color: var(--dsw-static-deepseek-500, #4176e6);
+        }
+        body[data-ds-dark-theme] .dsh-toc-item:hover {
+          background: var(--dsw-alias-bg-layer-3, #222938);
+        }
+        .dsh-toc-level-1 { padding-left: 8px; font-weight: 600; color: var(--dsw-alias-label-primary, #0f172a); }
+        body[data-ds-dark-theme] .dsh-toc-level-1 { color: #f1f5f9; }
+        .dsh-toc-level-2 { padding-left: 18px; }
+        .dsh-toc-level-3 { padding-left: 28px; font-size: 11px; }
+        .dsh-toc-level-4 { padding-left: 36px; font-size: 11px; }
+        .dsh-toc-bullet { opacity: 0.5; }
+
+        /* Main Scroll Content */
+        .dsh-preview-main-scroll {
+          flex: 1;
+          overflow-y: auto;
+          padding: 24px 32px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+        }
+        body[data-ds-dark-theme] .dsh-preview-main-scroll {
+          background: var(--dsw-alias-bg-layer-1, #161922);
+        }
+
+        /* Status Footer */
+        .dsh-preview-footer {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 28px;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-top: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          padding: 0 14px;
+          font-size: 11px;
+          color: var(--dsw-alias-label-tertiary, #94a3b8);
+        }
+        body[data-ds-dark-theme] .dsh-preview-footer {
+          background: var(--dsw-alias-bg-layer-2, #161922);
+          border-top-color: var(--dsw-alias-border-l2, #252d3d);
+          color: var(--dsw-alias-label-tertiary, #64748b);
+        }
+        .dsh-footer-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+        }
+        .dsh-footer-ext {
+          background: var(--dsw-alias-bg-layer-3, #e2e8f0);
+          color: var(--dsw-alias-label-secondary, #475569);
+          padding: 1px 4px;
+          border-radius: 3px;
+          font-size: 10px;
+          font-weight: 600;
+        }
+        body[data-ds-dark-theme] .dsh-footer-ext {
+          background: var(--dsw-alias-bg-layer-3, #262e3d);
+          color: #94a3b8;
+        }
+        .dsh-footer-path {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .dsh-footer-right {
+          display: flex;
+          gap: 12px;
+          flex-shrink: 0;
+        }
+        .dsh-footer-stat {
+          color: var(--dsw-alias-label-secondary, #64748b);
+        }
+        body[data-ds-dark-theme] .dsh-footer-stat {
+          color: var(--dsw-alias-label-secondary, #94a3b8);
+        }
+
+        /* Markdown Typography Styles */
+        .dsh-markdown-body {
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+          font-size: 14px;
+          line-height: 1.72;
+          color: var(--dsw-alias-label-primary, #1e293b);
+          word-break: break-word;
+        }
+        body[data-ds-dark-theme] .dsh-markdown-body {
+          color: var(--dsw-alias-label-primary, #e2e8f0);
+        }
+        .dsh-markdown-body h1,
+        .dsh-markdown-body h2,
+        .dsh-markdown-body h3,
+        .dsh-markdown-body h4,
+        .dsh-markdown-body h5,
+        .dsh-markdown-body h6 {
+          position: relative;
+          color: var(--dsw-alias-label-primary, #0f172a);
+          font-weight: 600;
+          margin-top: 1.5em;
+          margin-bottom: 0.6em;
+          line-height: 1.35;
+        }
+        body[data-ds-dark-theme] .dsh-markdown-body h1,
+        body[data-ds-dark-theme] .dsh-markdown-body h2,
+        body[data-ds-dark-theme] .dsh-markdown-body h3,
+        body[data-ds-dark-theme] .dsh-markdown-body h4,
+        body[data-ds-dark-theme] .dsh-markdown-body h5,
+        body[data-ds-dark-theme] .dsh-markdown-body h6 {
+          color: #f8fafc;
+        }
+        .dsh-markdown-body h1 { font-size: 1.85em; border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0); padding-bottom: 0.3em; }
+        .dsh-markdown-body h2 { font-size: 1.45em; border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0); padding-bottom: 0.25em; }
+        body[data-ds-dark-theme] .dsh-markdown-body h1 { border-bottom-color: var(--dsw-alias-border-l2, #334155); }
+        body[data-ds-dark-theme] .dsh-markdown-body h2 { border-bottom-color: var(--dsw-alias-border-l2, #273344); }
+        .dsh-markdown-body h3 { font-size: 1.25em; }
+        .dsh-markdown-body h4 { font-size: 1.1em; }
+        .dsh-markdown-body h5 { font-size: 0.95em; }
+        .dsh-markdown-body h6 { font-size: 0.88em; color: var(--dsw-alias-label-secondary, #64748b); }
+        .dsh-md-anchor {
+          position: absolute;
+          left: -18px;
+          opacity: 0;
+          color: var(--dsw-static-deepseek-500, #4176e6);
+          text-decoration: none;
+          transition: opacity 0.15s;
+        }
+        .dsh-markdown-body h1:hover .dsh-md-anchor,
+        .dsh-markdown-body h2:hover .dsh-md-anchor,
+        .dsh-markdown-body h3:hover .dsh-md-anchor {
+          opacity: 1;
+        }
+        .dsh-md-p {
+          margin-bottom: 1em;
+        }
+        .dsh-md-hr {
+          border: none;
+          height: 1px;
+          background: var(--dsw-alias-border-l2, #e2e8f0);
+          margin: 2em 0;
+        }
+        body[data-ds-dark-theme] .dsh-md-hr {
+          background: var(--dsw-alias-border-l2, #334155);
+        }
+        .dsh-md-blockquote {
+          margin: 1.2em 0;
+          padding: 8px 16px;
+          border-left: 4px solid var(--dsw-static-deepseek-500, #4176e6);
+          background: rgba(65, 118, 230, 0.05);
+          border-radius: 0 6px 6px 0;
+          color: var(--dsw-alias-label-secondary, #475569);
+        }
+        body[data-ds-dark-theme] .dsh-md-blockquote {
+          color: var(--dsw-alias-label-secondary, #cbd5e1);
+          background: rgba(65, 118, 230, 0.08);
+        }
+        .dsh-md-blockquote p { margin: 0.3em 0; }
+
+        /* Tables */
+        .dsh-md-table-wrapper {
+          width: 100%;
+          overflow-x: auto;
+          margin: 1.2em 0;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border-radius: 8px;
+        }
+        body[data-ds-dark-theme] .dsh-md-table-wrapper {
+          border-color: var(--dsw-alias-border-l2, #334155);
+        }
+        .dsh-md-table-wrapper table {
+          width: 100%;
+          border-collapse: collapse;
+          font-size: 13px;
+        }
+        .dsh-md-table-wrapper th,
+        .dsh-md-table-wrapper td {
+          padding: 8px 14px;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+        }
+        body[data-ds-dark-theme] .dsh-md-table-wrapper th,
+        body[data-ds-dark-theme] .dsh-md-table-wrapper td {
+          border-color: var(--dsw-alias-border-l2, #273344);
+        }
+        .dsh-md-table-wrapper th {
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          font-weight: 600;
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-md-table-wrapper th {
+          background: var(--dsw-alias-bg-layer-2, #1a202c);
+          color: #f1f5f9;
+        }
+        .dsh-md-table-wrapper tr:nth-child(even) {
+          background: rgba(0, 0, 0, 0.015);
+        }
+        body[data-ds-dark-theme] .dsh-md-table-wrapper tr:nth-child(even) {
+          background: rgba(255, 255, 255, 0.02);
+        }
+
+        /* Lists & Tasks */
+        .dsh-md-list {
+          padding-left: 24px;
+          margin: 0.8em 0 1.2em 0;
+        }
+        .dsh-md-list li { margin-bottom: 0.35em; }
+        .dsh-md-task-list {
+          list-style: none;
+          padding-left: 0;
+        }
+        .dsh-md-task-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 0.4em;
+        }
+        .dsh-md-task-item input[type="checkbox"] {
+          accent-color: var(--dsw-static-deepseek-500, #4176e6);
+          cursor: pointer;
+        }
+
+        /* Inline Code & Badges */
+        .dsh-md-inline-code {
+          background: var(--dsw-alias-bg-layer-3, #f1f5f9);
+          color: var(--dsw-static-deepseek-500, #2563eb);
+          padding: 2px 6px;
+          border-radius: 4px;
+          font-family: "Cascadia Code", Consolas, "Courier New", monospace;
+          font-size: 0.88em;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+        }
+        body[data-ds-dark-theme] .dsh-md-inline-code {
+          background: var(--dsw-alias-bg-layer-3, #1e2433);
+          color: #93c5fd;
+          border-color: rgba(147, 197, 253, 0.15);
+        }
+        .dsh-md-link {
+          color: var(--dsw-static-deepseek-500, #2563eb);
+          text-decoration: none;
+          border-bottom: 1px solid rgba(37, 99, 235, 0.3);
+          transition: border-color 0.15s;
+        }
+        body[data-ds-dark-theme] .dsh-md-link {
+          color: var(--dsw-static-deepseek-500, #60a5fa);
+          border-bottom-color: rgba(96, 165, 250, 0.3);
+        }
+        .dsh-md-link:hover {
+          border-color: currentColor;
+        }
+
+        /* Code Cards */
+        .dsh-code-card {
+          margin: 1.4em 0;
+          background: var(--dsw-alias-bg-layer-3, #f8fafc);
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border-radius: 8px;
+          overflow: hidden;
+        }
+        body[data-ds-dark-theme] .dsh-code-card {
+          background: #0d1117;
+          border-color: #30363d;
+        }
+        .dsh-code-card-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 12px;
+          background: rgba(0, 0, 0, 0.03);
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+        }
+        body[data-ds-dark-theme] .dsh-code-card-header {
+          background: rgba(255, 255, 255, 0.04);
+          border-bottom-color: #21262d;
+        }
+        .dsh-code-lang-badge {
+          font-family: monospace;
+          font-size: 11px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          font-weight: 600;
+        }
+        body[data-ds-dark-theme] .dsh-code-lang-badge {
+          color: #8b949e;
+        }
+        .dsh-code-copy-btn {
+          background: transparent;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          color: var(--dsw-alias-label-secondary, #475569);
+          font-size: 11px;
+          padding: 2px 8px;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.15s;
+        }
+        body[data-ds-dark-theme] .dsh-code-copy-btn {
+          border-color: #30363d;
+          color: #c9d1d9;
+        }
+        .dsh-code-copy-btn:hover {
+          background: var(--dsw-alias-bg-layer-2, #e2e8f0);
+          color: var(--dsw-static-deepseek-500, #2563eb);
+        }
+        body[data-ds-dark-theme] .dsh-code-copy-btn:hover {
+          background: #21262d;
+          color: #58a6ff;
+        }
+        .dsh-code-pre {
+          margin: 0;
+          padding: 14px 16px;
+          overflow-x: auto;
+          font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
+          font-size: 13px;
+          line-height: 1.55;
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-code-pre {
+          color: #e6edf3;
+        }
+        .dsh-token-keyword { color: #d73a49; font-weight: 500; }
+        body[data-ds-dark-theme] .dsh-token-keyword { color: #ff7b72; }
+        .dsh-token-string { color: #032f62; }
+        body[data-ds-dark-theme] .dsh-token-string { color: #a5d6ff; }
+        .dsh-token-comment { color: #6a737d; font-style: italic; }
+        body[data-ds-dark-theme] .dsh-token-comment { color: #8b949e; }
+        .dsh-token-number { color: #005cc5; }
+        body[data-ds-dark-theme] .dsh-token-number { color: #79c0ff; }
+
+        /* GitHub Alert Callouts */
+        .dsh-alert {
+          margin: 1.4em 0;
+          padding: 12px 16px;
+          border-left: 4px solid;
+          border-radius: 0 8px 8px 0;
+        }
+        .dsh-alert-title {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-weight: 600;
+          font-size: 13px;
+          margin-bottom: 6px;
+        }
+        .dsh-alert-note { background: rgba(59, 130, 246, 0.08); border-color: #3b82f6; }
+        .dsh-alert-note .dsh-alert-title { color: #2563eb; }
+        body[data-ds-dark-theme] .dsh-alert-note .dsh-alert-title { color: #60a5fa; }
+        .dsh-alert-tip { background: rgba(16, 185, 129, 0.08); border-color: #10b981; }
+        .dsh-alert-tip .dsh-alert-title { color: #059669; }
+        body[data-ds-dark-theme] .dsh-alert-tip .dsh-alert-title { color: #34d399; }
+        .dsh-alert-important { background: rgba(168, 85, 247, 0.08); border-color: #a855f7; }
+        .dsh-alert-important .dsh-alert-title { color: #7c3aed; }
+        body[data-ds-dark-theme] .dsh-alert-important .dsh-alert-title { color: #c084fc; }
+        .dsh-alert-warning { background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; }
+        .dsh-alert-warning .dsh-alert-title { color: #d97706; }
+        body[data-ds-dark-theme] .dsh-alert-warning .dsh-alert-title { color: #fbbf24; }
+        .dsh-alert-caution { background: rgba(239, 68, 68, 0.08); border-color: #ef4444; }
+        .dsh-alert-caution .dsh-alert-title { color: #dc2626; }
+        body[data-ds-dark-theme] .dsh-alert-caution .dsh-alert-title { color: #f87171; }
+        .dsh-alert-body { font-size: 13px; color: var(--dsw-alias-label-secondary, #475569); }
+        body[data-ds-dark-theme] .dsh-alert-body { color: #cbd5e1; }
+
+        /* Math Formulas */
+        .dsh-math-block {
+          margin: 1.2em 0;
+          padding: 12px 16px;
+          background: rgba(0, 0, 0, 0.02);
+          border-radius: 6px;
+          border: 1px dashed var(--dsw-alias-border-l2, #cbd5e1);
+          text-align: center;
+          font-family: "KaTeX_Math", "Times New Roman", serif;
+          font-size: 1.1em;
+          color: var(--dsw-alias-label-primary, #1e293b);
+        }
+        body[data-ds-dark-theme] .dsh-math-block {
+          background: rgba(255, 255, 255, 0.03);
+          border-color: var(--dsw-alias-border-l2, #334155);
+          color: #cbd5e1;
+        }
+        .dsh-math-inline {
+          font-family: "KaTeX_Math", "Times New Roman", serif;
+          color: var(--dsw-static-deepseek-500, #2563eb);
+          padding: 0 3px;
+        }
+        body[data-ds-dark-theme] .dsh-math-inline {
+          color: #93c5fd;
+        }
+
+        /* Source View Mode */
+        .dsh-source-view {
+          display: flex;
+          background: var(--dsw-alias-bg-layer-3, #f8fafc);
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border-radius: 8px;
+          overflow: hidden;
+          font-family: "Fira Code", Consolas, monospace;
+          font-size: 13px;
+          line-height: 1.6;
+        }
+        body[data-ds-dark-theme] .dsh-source-view {
+          background: var(--dsw-alias-bg-layer-3, #0d1017);
+          border-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+        .dsh-source-line-numbers {
+          padding: 16px 8px;
+          background: rgba(0, 0, 0, 0.02);
+          border-right: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          color: #94a3b8;
+          text-align: right;
+          user-select: none;
+        }
+        body[data-ds-dark-theme] .dsh-source-line-numbers {
+          background: rgba(255, 255, 255, 0.02);
+          border-right-color: var(--dsw-alias-border-l2, #252d3d);
+          color: #475569;
+        }
+        .dsh-source-pre {
+          margin: 0;
+          padding: 16px;
+          flex: 1;
+          overflow-x: auto;
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-source-pre {
+          color: #cbd5e1;
+        }
+
+        /* Split View Mode */
+        .dsh-split-view {
+          display: flex;
+          gap: 12px;
+          height: 100%;
+        }
+        .dsh-split-pane {
+          flex: 1;
+          overflow-y: auto;
+          border: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+          border-radius: 8px;
+          padding: 12px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+        }
+        body[data-ds-dark-theme] .dsh-split-pane {
+          border-color: var(--dsw-alias-border-l2, #252d3d);
+          background: var(--dsw-alias-bg-layer-1, #0d1017);
+        }
+        .dsh-split-pane-header {
+          font-size: 11px;
+          font-weight: 600;
+          color: var(--dsw-alias-label-secondary, #64748b);
+          margin-bottom: 8px;
+          padding-bottom: 4px;
+          border-bottom: 1px solid var(--dsw-alias-border-l2, #e2e8f0);
+        }
+        body[data-ds-dark-theme] .dsh-split-pane-header {
+          color: #94a3b8;
+          border-bottom-color: var(--dsw-alias-border-l2, #252d3d);
+        }
+
+        /* Loading & Error States */
+        .dsh-preview-loading {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 60px 0;
+          gap: 14px;
+          color: var(--dsw-alias-label-secondary, #64748b);
+        }
+        .dsh-preview-spinner {
+          width: 32px;
+          height: 32px;
+          border: 3px solid rgba(65, 118, 230, 0.2);
+          border-top-color: var(--dsw-static-deepseek-500, #4176e6);
+          border-radius: 50%;
+          animation: dshSpinner 0.8s linear infinite;
+        }
+        @keyframes dshSpinner {
+          to { transform: rotate(360deg); }
+        }
+
+        .dsh-preview-error-card {
+          padding: 32px 24px;
+          background: rgba(239, 68, 68, 0.06);
+          border: 1px solid rgba(239, 68, 68, 0.25);
+          border-radius: 8px;
+          text-align: center;
+          margin: 30px auto;
+          max-width: 480px;
+        }
+        .dsh-error-icon { font-size: 32px; margin-bottom: 10px; }
+        .dsh-error-title { font-size: 16px; font-weight: 600; color: #ef4444; margin-bottom: 6px; }
+        .dsh-error-desc { font-size: 13px; color: var(--dsw-alias-label-secondary, #64748b); margin-bottom: 16px; }
+        body[data-ds-dark-theme] .dsh-error-desc { color: #cbd5e1; }
+        .dsh-error-actions { display: flex; justify-content: center; gap: 10px; }
+        .dsh-btn-retry {
+          background: #ef4444; color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px;
+        }
+        .dsh-btn-native {
+          background: var(--dsw-alias-bg-layer-2, #f1f5f9); color: var(--dsw-alias-label-primary, #0f172a); border: 1px solid #cbd5e1; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px;
+        }
+        body[data-ds-dark-theme] .dsh-btn-native {
+          background: var(--dsw-alias-bg-layer-2, #1e2433); color: #e2e8f0; border-color: #334155;
+        }
+
+        /* Toast Popup */
+        .dsh-preview-toast-container {
+          position: fixed;
+          bottom: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 10000;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          pointer-events: none;
+        }
+        .dsh-preview-toast {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 8px 16px;
+          background: #1e293b;
+          color: #f8fafc;
+          border: 1px solid #334155;
+          border-radius: 20px;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+          font-size: 12px;
+          opacity: 0;
+          transform: translateY(10px);
+          transition: all 0.25s ease;
+        }
+        .dsh-preview-toast.dsh-preview-toast-show {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        .dsh-preview-toast-success { border-color: #22c55e; }
+        .dsh-preview-toast-success .dsh-preview-toast-icon { color: #22c55e; font-weight: bold; }
+        .dsh-preview-toast-error { border-color: #ef4444; }
+        .dsh-preview-toast-error .dsh-preview-toast-icon { color: #ef4444; font-weight: bold; }
+      `;
+      document.head.appendChild(style);
+    }
+
+    // =========================================================================
+    // Cordis Client Plugin Apply & Slot Injection
+    // =========================================================================
+    exports.inject = ['slots', 'locale', 'sessions', 'workspaces', 'connection', 'remote'];
+
+    exports.apply = function apply(ctx) {
+      clientCtx = ctx;
+      if (typeof window !== 'undefined') {
+        window.__dsh_preview_ctx = ctx;
+        window.__dsh_open_preview = openPreviewFile;
+      }
+
+      injectStyles();
+      setupFileInterceptors(ctx);
+
+      console.log('[Preview] Markdown Preview Client Plugin loaded successfully!');
+
+      // Mount into shell.overlay slot so it renders seamlessly across the app
+      ctx.slots.inject(
+        'shell.overlay',
+        () => ctx.slots.register({
+          name: 'shell.overlay',
+          id: 'preview-drawer',
+          order: 20, // Render on top of normal overlays
+        }, (props) => h(PreviewDrawerRoot, { ...props, ctx }))
+      );
+    };
+
+    return module.exports;
+  }
+});