@rooode/dsh-plugin-preview 0.1.5 → 0.1.7

package/README.md

@@ -1,46 +1,54 @@
-# DeepSeek Harness - 右侧 Markdown 文档预览插件 (`@rooode/dsh-plugin-preview`)
+# DeepSeek Harness - 多功能文档与工作空间代码预览插件 (`@rooode/dsh-plugin-preview`)
 
 [![npm version](https://img.shields.io/npm/v/@rooode/dsh-plugin-preview.svg?style=flat-square)](https://www.npmjs.com/package/@rooode/dsh-plugin-preview)
 [![license](https://img.shields.io/npm/l/@rooode/dsh-plugin-preview.svg?style=flat-square)](https://github.com/rooode)
 
-本插件为 **DeepSeek Harness (DSH)** 与 **WorkBuddy** 对话界面提供了参考 WorkBuddy `FileTabs` 设计的**右侧多标签 Markdown 与文档预览面板**。
+本插件为 **DeepSeek Harness (DSH)** 与 **WorkBuddy** 对话界面提供了参考 WorkBuddy `FileTabs` 设计的**右侧多标签 Markdown、代码与工作空间文件树浏览器**。
 
-在 DSH 中，大模型经常会生成、改写或读取 `.md` 文档。默认情况下，点击生成的文档链接会直接调用 Windows 系统的本地记事本 (Notepad) 打开，打断了用户在 Web 会话中的阅读与操作体验。通过安装本插件，点击任何 Markdown 文档将直接在**右侧滑出多标签预览抽屉**，提供富文本渲染、目录大纲、源码分栏、一键复制、实时刷新以及按需本地打开等全套能力。
+在 DSH 中，大模型经常会生成、改写或读取 `.md` 文档与各类代码文件。默认情况下，点击生成的文档链接会直接调用 Windows 系统的本地记事本 (Notepad) 打开，打断了用户在 Web 会话中的阅读与操作体验。通过安装本插件，点击任何文档或代码将直接在**右侧滑出多标签预览抽屉**，提供工作空间目录树浏览、多语言代码高亮与符号大纲、JSON 交互结构树、GFM 富文本渲染、一键复制、实时刷新以及按需本地打开等全套能力。
 
 ---
 
 ## 🌟 核心特性 (Features)
 
-1. **自动拦截与无感打开**：
-   - 自动拦截对话底部 **产出文件行 (`ProducedFiles`)**、**工具执行行 (`ToolRow`)** 以及对话正文中的所有 `.md`、`.markdown`、`.txt`、`.json` 等文档点击。
-   - 不再弹出本地记事本，直接在右侧平滑滑出预览面板。
-
-2. **右侧多标签页支持 (FileTabs)**：
-   - 支持同时打开多个文档，标签栏清晰展示文件图标、文档名、修改标记与独立关闭按钮。
-   - 支持快速切换激活标签、一键全部关闭。
-   - 左侧边框支持 **鼠标自由拖拽调节宽度 (ResizeHandle)**（支持 380px 至 90vw 自由调整）。
-
-3. **全功能 GFM Markdown 渲染引擎**：
-   - **三模视图切换**：
-     - 📖 **渲染预览 (Preview)**：排版精美的富文本 Markdown 渲染。
-     - 📝 **源码模式 (Source)**：带行号与等宽字体的 Markdown 原文。
-     - 🌓 **分栏对比 (Split)**：左右双栏并排对照。
+1. **📁 工作空间目录树浏览器 (Workspace Tree Explorer)**：
+   - 树状层级展开/折叠项目所有目录与文件，支持文件大小与修改时间展示。
+   - 文件名即时过滤搜索，自动展开命中路径并折叠无关项。
+   - 快捷折叠全部目录、一键刷新磁盘目录结构。
+   - 目录树宽度支持鼠标自由拖拽调节。
+
+2. **💡 对话区智能交互与自动收起**：
+   - 当预览抽屉处于打开状态时，点击左侧会话列表或对话输入框，抽屉自动平滑收起/隐藏，保证专注对话输入。
+   - 收起后右下角保留胶囊浮窗，一键随时恢复展开。
+
+3. **🌳 交互式 JSON 结构树检查器 (JSON Tree Inspector)**：
+   - `.json` 文件默认以交互结构树呈现，支持 `Object{N}` 与 `Array[N]` 多层级折叠展开。
+   - 属性名与属性值即时过滤搜索。
+   - 单击快捷复制指定字段路径（如 `scripts.build`）或字段值。
+   - 提供 `⚡ 格式化 (2空格对齐)` 与 `🗜️ 压缩 (单行)` 快捷操作，并支持随时切换至高亮代码模式。
+
+4. **🌐 多语言语法高亮与符号大纲 (Polyglot Highlighting & Symbol TOC)**：
+   - 采用单趟扫描分词器（Single-Pass Tokenizer），杜绝 HTML 嵌套污染。
+   - **全面支持主流语言**：
+     - ☕ **Java**：注解（`@Service`, `@Autowired`, `@Override`）、泛型、集合类、文本块、Package/Class/Method 符号大纲。
+     - ⚙️ **C / C++**：预处理指令（`#include <...>`）、命名空间、模板、标准库类型、智能指针、Namespace/Class/Struct/Function 符号大纲。
+     - 🐍 **Python**：装饰器（`@dataclass`, `@property`）、多行 Docstrings、异步协程（`async def`）、类型标注、Class/Def 符号大纲。
+     - ⚡ **JavaScript / TypeScript**：ES 模块、JSX 标签、接口/枚举、模板字符串、箭头函数、Class/Fn/Type/Export 符号大纲。
+     - 🦀 **Rust** / 🌐 **Go** / ⌨️ **Shell** / 🗄️ **SQL** / ⚙️ **YAML** / 📝 **Markdown** 等。
+   - **大纲点击平滑跳转**：点击大纲侧栏任一项，代码区域自动平滑滚动定位至目标代码行，并在行号及对应行触发高亮闪烁反馈。
+   - **代码排版优化**：默认水平滚动，点击 `↩️ 换行` 可在单行与自动折行（`overflow-wrap: break-word`）间无缝切换，杜绝单词被撕裂打碎。
+
+5. **📖 全功能 GFM Markdown 渲染引擎**：
+   - **三模视图切换**：📖 渲染预览 (Preview) / 📝 源码模式 (Source) / 🌓 分栏对比 (Split)。
    - **GitHub Alerts 提示框**：完整支持 `> [!NOTE]`、`> [!TIP]`、`> [!IMPORTANT]`、`> [!WARNING]`、`> [!CAUTION]` 彩色卡片渲染。
-   - **代码块语法高亮**：支持 JavaScript/TypeScript、Python、JSON、Bash、HTML、CSS 等多种语言关键字高亮，顶部附带语言标识与**一键复制代码**按钮。
    - **LaTeX 数学公式**：支持 `$inline$` 与 `$$block$$` 数学公式排版。
    - **数据表格与任务清单**：斑马纹表格自适应排版、交互式勾选框列表。
-   - **目录大纲导航 (TOC)**：自动提取 H1~H6 标题生成侧栏目录，点击平滑滚动跳转至对应章节。
+   - **目录大纲导航 (TOC)**：自动提取 H1~H6 标题生成侧栏目录，点击平滑滚动跳转。
 
-4. **实用操作工具栏**：
-   - 📋 **一键复制 (Copy)**：一键复制完整 Markdown 内容至系统剪贴板。
-   - 🔄 **实时刷新 (Refresh)**：重新从磁盘加载最新文件内容（Agent 持续写入时可一键更新）。
-   - 🖥️ **本地应用打开 (Open Native)**：若确需在系统外部编辑器（记事本/VSCode）中打开，可一键唤起。
-   - 📁 **资源管理器中定位 (Reveal)**：一键调用系统资源管理器定位并高亮选中该文件。
-   - 🔍 **文档内关键词搜索 (Find)**：快速高亮匹配文本。
-   - ✕ **快捷收起与悬浮入口**：支持 Esc 快捷键关闭；收起后右下角保留胶囊浮窗，一键随时恢复展开。
-
-5. **Node 端服务与安全保障**：
-   - 配合 Node 端 Cordis `PreviewService`，提供 `/api/preview/read`、`/api/preview/reveal` 等 REST 路由，解决本地工作区文件跨目录读取与超大文件防护。
+6. **📑 右侧多标签页 (FileTabs)**：
+   - 支持同时打开多个文档与代码文件，标签栏展示对应语言彩色图标、文件名与独立关闭按钮。
+   - 支持快速切换激活标签、一键全部关闭。
+   - 左侧边框支持鼠标自由拖拽调节宽度（支持 380px 至 90vw 自由调整）。
 
 ---
 
@@ -67,32 +75,9 @@ npx @deepseek-ai/dsh web
 
 ---
 
-## 📁 目录结构 (Directory Structure)
-
-```text
-dsh-plugin-preview/
-├── package.json              # 插件元信息与 npm 脚本配置
-├── cordis.patch.yml          # DSH 组合包 patch 描述文件
-├── tsconfig.json             # TypeScript 编译配置
-├── README.md                 # 插件说明文档
-├── scripts/
-│   └── build.js              # 自动构建、分发与补丁安装脚本
-├── src/
-│   ├── types.ts              # 核心 TypeScript 类型定义
-│   ├── service.ts            # Node 端 PreviewService 服务 (HTTP 路由)
-│   ├── index.ts              # Node 端 Cordis Service 注册与 Schema 导出
-│   └── client.js             # Web 浏览器端 React 预览面板与拦截器
-└── lib/
-    ├── index.js              # Node ESM 导出产物
-    ├── index.d.ts            # 类型声明文件
-    └── client.js             # Web 端 ModuleLoader 加载产物
-```
-
----
-
 ## ⚙️ 配置项说明 (Configuration)
 
-可以在 `cordis.patch.yml` 或配置中自定义以下参数：
+可以在 `cordis.patch.yml` 或配置文件中自定义以下参数：
 
 ```yaml
 - id: ui-preview
@@ -106,12 +91,24 @@ dsh-plugin-preview/
       - .json
       - .yaml
       - .yml
+      - .js
+      - .ts
+      - .java
+      - .cpp
+      - .c
+      - .h
+      - .hpp
+      - .py
+      - .go
+      - .rs
+      - .sh
+      - .sql
     # 最大允许读取的文件大小 (MB)
     maxFileSizeMb: 10
-    # 默认打开视图: 'preview' (预览) | 'source' (源码) | 'split' (分栏)
+    # 默认打开视图: 'preview' (预览) | 'source' (源码) | 'split' (分栏) | 'json-tree' (树) | 'code' (代码)
     defaultViewMode: preview
     # 右侧预览面板默认宽度 (px)
-    defaultPanelWidth: 620
+    defaultPanelWidth: 760
 ```
 
 ---

package/lib/client.js

@@ -2586,9 +2586,8 @@
             return;
           }
 
-          // 4. If clicking on the floating pill, do not close
-          const floatPill = document.querySelector('.dsh-preview-float-pill');
-          if (floatPill && (floatPill === target || floatPill.contains(target))) {
+          // 4. If clicking on the right activity rail, preview drawer or git drawer, do not close
+          if (target.closest && target.closest('.dsh-right-activity-rail, .dsh-rail-tab-item, .dsh-preview-drawer-container, .dsh-git-drawer-container')) {
             return;
           }
 
@@ -2616,6 +2615,17 @@
         };
       }, [isOpen, isDragging, isTreeDragging]);
 
+      // Mutual exclusion with other tool windows (e.g. Git modal)
+      useEffect(() => {
+        const handleToolWindowOpen = (e) => {
+          if (e.detail?.id && e.detail.id !== 'preview') {
+            setPanelOpen(false);
+          }
+        };
+        window.addEventListener('dsh:tool-window:open', handleToolWindowOpen);
+        return () => window.removeEventListener('dsh:tool-window:open', handleToolWindowOpen);
+      }, []);
+
       // Hotkey: Esc closes preview, Ctrl/Cmd+B toggles file tree
       useEffect(() => {
         const onKeyDown = (e) => {
@@ -2631,24 +2641,42 @@
         return () => window.removeEventListener('keydown', onKeyDown);
       }, []);
 
+      // Register into Unified Right Activity Rail
+      useEffect(() => {
+        if (typeof window === 'undefined' || !window.__DSH_RIGHT_RAIL__) return;
+        return window.__DSH_RIGHT_RAIL__.register('preview', {
+          id: 'preview',
+          order: 10,
+          label: '预览',
+          icon: '📁',
+          badge: tabs.length > 0 ? tabs.length : null,
+          title: tabs.length > 0 ? `工作区文件与文档预览 (${tabs.length} 个标签)` : '浏览工作空间文件树',
+          onClick: (nextActive) => {
+            setPanelOpen(nextActive);
+          },
+        });
+      }, [tabs.length]);
+
+      // Sync activeId with Right Rail
+      useEffect(() => {
+        if (typeof window === 'undefined' || !window.__DSH_RIGHT_RAIL__) return;
+        if (isOpen && window.__DSH_RIGHT_RAIL__.activeId !== 'preview') {
+          window.__DSH_RIGHT_RAIL__.activeId = 'preview';
+          window.__DSH_RIGHT_RAIL__.notify();
+        } else if (!isOpen && window.__DSH_RIGHT_RAIL__.activeId === 'preview') {
+          window.__DSH_RIGHT_RAIL__.activeId = null;
+          window.__DSH_RIGHT_RAIL__.notify();
+        }
+      }, [isOpen]);
+
       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)
-        !isOpen ? h('div', {
-          className: 'dsh-preview-float-pill',
-          onClick: () => setPanelOpen(true),
-          title: tabs.length > 0 ? `展开文档与工作区文件浏览 (${tabs.length} 个标签)` : '浏览工作空间文件树',
-        },
-          h('span', { className: 'dsh-float-pill-icon' }, '📁'),
-          h('span', { className: 'dsh-float-pill-text' }, tabs.length > 0 ? `预览: ${activeTab?.title || '文档'}` : '工作区文件'),
-          tabs.length > 0 ? h('span', { className: 'dsh-float-pill-badge' }, tabs.length) : null
-        ) : null,
-
-        // Right-Side Slide Drawer
+      return h(
+        Fragment,
+        null,
         isOpen ? h('div', {
           ref: drawerRef,
           className: `dsh-preview-drawer-container ${isDragging || isTreeDragging ? 'dragging' : ''}`,
@@ -2832,45 +2860,185 @@
            DeepSeek Harness Preview Plugin Styles (WorkBuddy FileTabs Inspired)
            ===================================================================== */
         
-        /* Floating Pill Button */
-        .dsh-preview-float-pill {
+        /* Unified Right Activity Rail Container */
+        .dsh-right-activity-rail {
           position: fixed;
-          bottom: 84px;
-          right: 20px;
-          z-index: 9990;
+          right: 0;
+          top: 40%;
+          transform: translateY(-50%);
+          z-index: 9998;
           display: flex;
-          align-items: center;
+          flex-direction: column;
           gap: 8px;
-          padding: 8px 14px;
+          align-items: flex-end;
+          pointer-events: auto;
+          user-select: none;
+          transition: none !important;
+          animation: none !important;
+        }
+
+        /* Right-Edge Vertical Tool Window Tab (Preview Tab & Unified Item) */
+        .dsh-rail-tab-item, .dsh-preview-right-rail-tab, .dsh-preview-float-pill, .dsh-git-right-rail-tab {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: space-between;
+          width: 28px;
+          min-width: 28px;
+          max-width: 28px;
+          height: 84px;
+          min-height: 84px;
+          max-height: 84px;
+          padding: 8px 3px 6px;
           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);
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          border-right: none;
+          border-radius: 8px 0 0 8px;
+          box-shadow: -3px 3px 12px rgba(0, 0, 0, 0.08);
           cursor: pointer;
-          font-size: 13px;
-          font-weight: 500;
-          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
           user-select: none;
+          transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
+          font-family: inherit;
+          outline: none;
+          overflow: hidden;
         }
-        body[data-ds-dark-theme] .dsh-preview-float-pill {
+        body[data-ds-dark-theme] .dsh-rail-tab-item,
+        body[data-ds-dark-theme] .dsh-preview-right-rail-tab,
+        body[data-ds-dark-theme] .dsh-preview-float-pill,
+        body[data-ds-dark-theme] .dsh-git-right-rail-tab {
           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);
+          border-color: var(--dsw-alias-border-l2, #334155);
+          box-shadow: -4px 4px 16px 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-rail-tab-item:hover,
+        .dsh-preview-right-rail-tab:hover,
+        .dsh-preview-float-pill:hover,
+        .dsh-git-right-rail-tab:hover {
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: #3b82f6;
+          border-color: #3b82f6;
+          transform: translateX(-4px);
+          box-shadow: -5px 5px 18px rgba(59, 130, 246, 0.22);
+        }
+        body[data-ds-dark-theme] .dsh-rail-tab-item:hover,
+        body[data-ds-dark-theme] .dsh-preview-right-rail-tab:hover,
+        body[data-ds-dark-theme] .dsh-preview-float-pill:hover,
+        body[data-ds-dark-theme] .dsh-git-right-rail-tab:hover {
+          background: var(--dsw-alias-bg-layer-1, #252a36);
+          color: #60a5fa;
+          border-color: #3b82f6;
         }
-        .dsh-float-pill-badge {
-          background: var(--dsw-static-deepseek-500, #4176e6);
-          color: #fff;
-          font-size: 11px;
-          padding: 1px 6px;
-          border-radius: 10px;
+        .dsh-rail-tab-item.active,
+        .dsh-preview-right-rail-tab.active,
+        .dsh-git-right-rail-tab.active {
+          background: #2563eb;
+          color: #ffffff;
+          border-color: #1d4ed8;
+          transform: translateX(-3px);
+          box-shadow: -5px 5px 18px rgba(37, 99, 235, 0.35);
+        }
+
+        .dsh-rail-tab-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 16px;
+          height: 16px;
+          min-width: 16px;
+          min-height: 16px;
+          max-width: 16px;
+          max-height: 16px;
+          line-height: 1;
+          flex-shrink: 0;
+          transition: none !important;
+          animation: none !important;
+          transform: none !important;
+        }
+        .dsh-rail-tab-icon svg {
+          width: 14px !important;
+          height: 14px !important;
+          min-width: 14px !important;
+          min-height: 14px !important;
+          max-width: 14px !important;
+          max-height: 14px !important;
+          flex-shrink: 0 !important;
+          display: block !important;
+          transition: none !important;
+          animation: none !important;
+          transform: none !important;
+        }
+
+        .dsh-rail-tab-title, .dsh-preview-rail-title, .dsh-git-rail-title {
+          writing-mode: vertical-rl;
+          text-orientation: mixed;
+          font-size: 11.5px;
           font-weight: 600;
+          letter-spacing: 2px;
+          line-height: 1;
+          flex-shrink: 0;
+          user-select: none;
+          transition: none !important;
+          animation: none !important;
+          transform: none !important;
+        }
+
+        .dsh-rail-tab-badge, .dsh-float-pill-badge, .dsh-preview-rail-badge, .dsh-git-rail-badge {
+          writing-mode: horizontal-tb;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 17px;
+          height: 17px;
+          min-height: 17px;
+          max-height: 17px;
+          padding: 0 4px;
+          border-radius: 9px;
+          background: #2563eb;
+          color: #ffffff;
+          font-size: 10px;
+          font-weight: 700;
+          line-height: 1;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+          flex-shrink: 0;
+          box-sizing: border-box;
+          transition: none !important;
+          animation: none !important;
+          transform: none !important;
+        }
+        body[data-ds-dark-theme] .dsh-rail-tab-badge,
+        body[data-ds-dark-theme] .dsh-float-pill-badge,
+        body[data-ds-dark-theme] .dsh-preview-rail-badge,
+        body[data-ds-dark-theme] .dsh-git-rail-badge {
+          background: #3b82f6;
+        }
+        .dsh-rail-tab-item.active .dsh-rail-tab-badge,
+        .dsh-preview-right-rail-tab.active .dsh-preview-rail-badge,
+        .dsh-git-right-rail-tab.active .dsh-git-rail-badge {
+          background: #ffffff;
+          color: #2563eb;
+        }
+
+        .dsh-rail-tab-badge-placeholder {
+          width: 17px;
+          height: 17px;
+          min-height: 17px;
+          max-height: 17px;
+          flex-shrink: 0;
+          visibility: hidden;
+        }
+        body[data-ds-dark-theme] .dsh-rail-tab-badge,
+        body[data-ds-dark-theme] .dsh-float-pill-badge,
+        body[data-ds-dark-theme] .dsh-preview-rail-badge {
+          background: #3b82f6;
+        }
+        .dsh-rail-tab-item.active .dsh-rail-tab-badge,
+        .dsh-preview-right-rail-tab.active .dsh-float-pill-badge,
+        .dsh-preview-right-rail-tab.active .dsh-preview-rail-badge {
+          background: #ffffff;
+          color: #2563eb;
         }
 
         /* Right-Side Drawer Container */
@@ -4502,6 +4670,102 @@
       document.head.appendChild(style);
     }
 
+    // =========================================================================
+    // =========================================================================
+    // Unified Right Activity Rail Registry & Host
+    // =========================================================================
+    if (typeof window !== 'undefined' && !window.__DSH_RIGHT_RAIL__) {
+      window.__DSH_RIGHT_RAIL__ = {
+        tabs: new Map(),
+        listeners: new Set(),
+        activeId: null,
+        register(id, config) {
+          this.tabs.set(id, config);
+          this.notify();
+          return () => {
+            this.tabs.delete(id);
+            this.notify();
+          };
+        },
+        setActive(id) {
+          if (this.activeId === id) return;
+          this.activeId = id;
+          this.notify();
+          window.dispatchEvent(new CustomEvent('dsh:tool-window:open', { detail: { id } }));
+        },
+        subscribe(fn) {
+          this.listeners.add(fn);
+          return () => this.listeners.delete(fn);
+        },
+        notify() {
+          for (const fn of this.listeners) {
+            try { fn(); } catch (e) {}
+          }
+        }
+      };
+    }
+
+    function RightActivityRailHost() {
+      const [, setTick] = useState(0);
+      const hostIdRef = useRef(null);
+
+      if (!hostIdRef.current) {
+        hostIdRef.current = Math.random().toString(36).slice(2);
+      }
+
+      useEffect(() => {
+        if (typeof window === 'undefined' || !window.__DSH_RIGHT_RAIL__) return;
+        if (!window.__DSH_ACTIVE_RAIL_HOST_ID__) {
+          window.__DSH_ACTIVE_RAIL_HOST_ID__ = hostIdRef.current;
+        }
+        return window.__DSH_RIGHT_RAIL__.subscribe(() => setTick((t) => t + 1));
+      }, []);
+
+      useEffect(() => {
+        return () => {
+          if (typeof window !== 'undefined' && window.__DSH_ACTIVE_RAIL_HOST_ID__ === hostIdRef.current) {
+            window.__DSH_ACTIVE_RAIL_HOST_ID__ = null;
+          }
+        };
+      }, []);
+
+      if (typeof window !== 'undefined' && window.__DSH_ACTIVE_RAIL_HOST_ID__ && window.__DSH_ACTIVE_RAIL_HOST_ID__ !== hostIdRef.current) {
+        return null;
+      }
+
+      const rail = typeof window !== 'undefined' ? window.__DSH_RIGHT_RAIL__ : null;
+      if (!rail || rail.tabs.size === 0) return null;
+
+      const tabList = Array.from(rail.tabs.values()).sort((a, b) => (a.order ?? 50) - (b.order ?? 50));
+
+      return h(
+        'div',
+        { className: 'dsh-right-activity-rail' },
+        tabList.map((tab) => {
+          const isActive = rail.activeId === tab.id;
+          return h(
+            'button',
+            {
+              key: tab.id,
+              type: 'button',
+              className: `dsh-rail-tab-item ${isActive ? 'active' : ''}`,
+              onClick: () => {
+                const nextActive = !isActive;
+                rail.setActive(nextActive ? tab.id : null);
+                if (tab.onClick) tab.onClick(nextActive);
+              },
+              title: tab.title || tab.label || tab.id,
+            },
+            h('span', { className: 'dsh-rail-tab-icon' }, tab.icon),
+            h('span', { className: 'dsh-rail-tab-title' }, tab.label || tab.id),
+            tab.badge !== undefined && tab.badge !== null && tab.badge !== 0
+              ? h('span', { className: 'dsh-rail-tab-badge' }, tab.badge)
+              : h('span', { className: 'dsh-rail-tab-badge-placeholder' })
+          );
+        })
+      );
+    }
+
     // =========================================================================
     // Cordis Client Plugin Apply & Slot Injection
     // =========================================================================
@@ -4519,7 +4783,17 @@
 
       console.log('[Preview] Markdown Preview Client Plugin loaded successfully!');
 
-      // Mount into shell.overlay slot so it renders seamlessly across the app
+      // 1. Mount Unified Right Activity Rail Host into shell.overlay
+      ctx.slots.inject(
+        'shell.overlay',
+        () => ctx.slots.register({
+          name: 'shell.overlay',
+          id: 'preview-right-rail-host',
+          order: 34,
+        }, () => h(RightActivityRailHost, { hostId: 'preview' }))
+      );
+
+      // 2. Mount Preview Drawer into shell.overlay
       ctx.slots.inject(
         'shell.overlay',
         () => ctx.slots.register({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rooode/dsh-plugin-preview",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "DeepSeek Harness Markdown 文档与工作空间文件浏览器右侧预览插件 (支持工作区文件树、JSON 交互结构树/格式化、Java/C++/Python/JS/TS/YAML/Go/Rust 多语言语法高亮与符号大纲、自动换行与多标签 FileTabs)",
   "type": "module",
   "main": "lib/index.js",