@rooode/dsh-plugin-preview 0.1.6 → 0.1.7

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